Nuxt 2.10.2 (#71)

* upgrade to [email protected] * Disable default vuetify assets * Verify follow * Prevent errors if no messages are displayed * Do not connect trolls without a chat token * version bump * Resolve waiters if we have a token * Use vue-transition for FAB * Update FollowButton.vue * Use lastElementChild instead of querySelector * Fix homepage chat height * Styling improvements, set nuxt 2.10.2, script updates
bitwave-tv · Dec 10, 2019 · 890bdc4 · 890bdc4
1 parent fba41cb
commit 890bdc4
Show file tree

Hide file tree

Showing 9 changed files with 2,179 additions and 1,841 deletions.
diff --git a/components/BannerVideo.vue b/components/BannerVideo.vue
@@ -2,10 +2,10 @@
   <v-card
     v-if="live"
     color="black"
-    class="d-flex align-center flex-wrap elevation-8 mb-2"
+    class="d-flex flex-wrap justify-end elevation-8"
   >
     <div
-      class="flex-grow-1"
+      class="flex-grow-1 align-self-center"
       style="min-width: 40%;"
     >
       <video

diff --git a/components/Chat/ChatMessages.vue b/components/Chat/ChatMessages.vue
@@ -28,16 +28,19 @@
     </div>
 
     <!-- FAB for Scroll Down -->
-    <div class="stb-fab d-flex justify-center" :class="{ show: showFAB }">
-      <v-btn
-        fab
-        small
-        color="yellow"
-        @click="scrollToBottom( true )"
-        class="black--text mt-3"
-      >
-        <v-icon>keyboard_arrow_down</v-icon>
-      </v-btn>
+    <div class="stb-fab d-flex justify-center">
+      <v-slide-y-transition>
+        <v-btn
+          v-show="showFAB"
+          fab
+          small
+          color="yellow"
+          @click="scrollToBottom( true )"
+          class="black--text mt-3"
+        >
+          <v-icon>keyboard_arrow_down</v-icon>
+        </v-btn>
+      </v-slide-y-transition>
     </div>
 
   </v-flex>
@@ -75,16 +78,18 @@
       },
 
       checkIfBottom () {
+        if ( this.messages.length === 0 ) return true;
         const scrollTop    = this.chatContainer.scrollTop;
         const clientHeight = this.chatContainer.clientHeight; // or offsetHeight
         const scrollHeight = this.chatContainer.scrollHeight;
-        return scrollTop + clientHeight >= scrollHeight - document.querySelector("#chat-scroll > div:last-child").clientHeight;
+        const lastMessageHeight = this.chatContainer.lastElementChild.clientHeight;
+        // const lastMessageHeight = document.querySelector("#chat-scroll > div:last-child").clientHeight;
+        return scrollTop + clientHeight >= scrollHeight - lastMessageHeight;
       },
 
       async scrollToBottom ( force ) {
         // If we are NOT at the bottom && NOT forcing scroll, bail early
         if ( !this.checkIfBottom() && !force ) {
-          this.showFAB = true;
           return;
         }
 
@@ -144,6 +149,7 @@
     async mounted () {
       this.chatContainer = this.$refs.scroller;
       this.chatContainer.addEventListener( 'scroll', this.onScroll, { passive: true } );
+      this.$nextTick( () => this.jumpToBottom() );
     },
 
     beforeDestroy() {
@@ -167,12 +173,13 @@
       left: 0;
       top: 0;
 
-      transform: translateY(-150%);
+      /* Old animation for FAB
+      transform: translateY(0);
       transition: .5s transform;
 
-      &.show {
-        transform: translateY(0);
-      }
+      &.hide {
+        transform: translateY(-150%);
+      }*/
     }
   }
 

diff --git a/components/Chat/index.vue b/components/Chat/index.vue
@@ -110,6 +110,15 @@
 
   import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
 
+  let trollInitialized = false;
+  let trollDataError = null;
+  let trollDataWaiters = [];
+  const trollDataLoaded = () => new Promise(( resolve, reject ) => {
+    if ( trollInitialized ) resolve();
+    if ( trollDataError ) reject( trollDataError );
+    trollDataWaiters.push({ resolve, reject });
+  });
+
   export default {
     name: 'Chat',
 
@@ -196,6 +205,8 @@
         if ( user ) {
           await this.subscribeToUser( user.uid );
         } else {
+          // if ( !this.token ) await this.getTrollToken();
+          await trollDataLoaded();
           const tokenTroll = {
             type  : 'troll',
             token : this.token,
@@ -309,7 +320,6 @@
 
         this.socket.on( 'blocked',   data => this.setMessage( data.message ) );
         this.socket.on( 'pollstate', data => this.updatePoll( data ) );
-        console.log('Bind Socket Events');
       },
 
       async socketConnect () {
@@ -321,7 +331,6 @@
         this.loading = false;
 
         if ( this.willBeDestroyed ) {
-          console.log('Component Destroyed, remove & disconnect');
           this.socket.off();
           this.socket.disconnect();
         }
@@ -499,30 +508,49 @@
           await this.$recaptcha.init();
           return await this.$recaptcha.execute( action );
         } catch ( error ) {
-          console.error(`reCAPTCHA failed to load!`, error);
+          console.error( error );
           return null;
         }
       },
 
-      async setupTrollData () {
-        let trollToken = localStorage.getItem( 'troll' );
-
-        // Get new troll token
-        if ( !trollToken ) {
+      async getTrollToken () {
+        try {
+          // Get new troll token
           const { data } = await this.$axios.get('https://api.bitwave.tv/api/troll-token');
-          trollToken = data.chatToken;
+          const trollToken = data.chatToken;
+          // Save token to localStorage
           localStorage.setItem( 'troll', trollToken );
-          const tokenTroll = {
-            type  : 'troll',
-            token : trollToken,
-            page  : this.page,
-          };
-          this.connectChat( tokenTroll );
+          // Parse token
+          this.setChatToken( trollToken );
+          this.token = trollToken;
+          this.trollId = jwt_decode( trollToken ).user.name;
+          // Resolve our waiters
+          trollInitialized = true;
+          trollDataWaiters.forEach( v => v.resolve() );
+        } catch ( error ) {
+          console.error( `Failed to get troll token`, error );
+          // Resolve our waiters
+          trollDataError = error;
+          trollDataWaiters.forEach( v => v.reject(error) );
         }
+      },
 
-        this.setChatToken( trollToken );
-        this.token = trollToken;
-        this.trollId = jwt_decode( trollToken ).user.name;
+      async setupTrollData () {
+        try {
+          const trollToken = localStorage.getItem( 'troll' );
+          if ( trollToken ) {
+            this.setChatToken( trollToken );
+            this.token = trollToken;
+            this.trollId = jwt_decode( trollToken ).user.name;
+            // Resolve our waiters
+            trollInitialized = true;
+            trollDataWaiters.forEach( v => v.resolve() );
+          } else {
+            await this.getTrollToken();
+          }
+        } catch ( error ) {
+          console.log( `Failed to access localstorage`, error );
+        }
       },
 
       speak ( message, username ) {
@@ -773,7 +801,7 @@
       },
 
       username () {
-        return this._username || this.trollId;
+        return this._username || this.trollId || 'troll';
       },
 
       page () {

diff --git a/components/FollowButton.vue b/components/FollowButton.vue
@@ -55,11 +55,10 @@
       },
 
       async checkIfFollowing (uid) {
-        console.log( `${uid}_${this.streamerId}` );
         const followerRef = db.collection( 'followers' ).doc( `${uid}_${this.streamerId}` );
         const doc = await followerRef.get();
-        console.log(doc.data());
         this.following = doc.exists;
+        return doc.exists;
       },
 
       async onFollowClick () {
@@ -72,6 +71,7 @@
       },
 
       async follow () {
+
         // Analytics
         this.$ga.event({
           eventCategory : 'follow',
@@ -80,6 +80,10 @@
 
         // Update followers
         if ( this.user.uid && !this.disabled ) {
+          // Verify state
+          if ( await this.checkIfFollowing( this.user.uid ) ) return;
+
+          // Update
           this.disabled = true;
           const batch = db.batch();
 
@@ -111,6 +115,10 @@
 
         // Update followers
         if ( this.user.uid && !this.disabled ) {
+          // Verify state
+          if ( ! await this.checkIfFollowing( this.user.uid ) ) return;
+
+          // Update
           this.disabled = true;
           const batch = db.batch();
 

diff --git a/layouts/barebones.vue b/layouts/barebones.vue
@@ -26,7 +26,7 @@
 
       <notifications />
 
-      <user />
+      <user class="ml-4" />
 
     </v-app-bar>
 

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -35,7 +35,7 @@
 
       <notifications />
 
-      <user />
+      <user class="ml-4" />
 
     </v-app-bar>