v1.18.7 - Chat Alerts

bitwave-tv · May 23, 2020 · 5d93b75 · 5d93b75
1 parent d436a64
commit 5d93b75
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 37 deletions.
diff --git a/components/Chat/Chat.vue b/components/Chat/Chat.vue
@@ -358,6 +358,7 @@
         this.socket.on( 'update usernames', async () => await this.updateViewers() );
 
         this.socket.on( 'bulkmessage', async data => await this.rcvMessageBulk( data ) );
+        this.socket.on( 'alert', async data => await this.addAlert( data ) );
 
         this.socket.on( 'blocked',   data => this.setMessage( data.message ) );
         this.socket.on( 'pollstate', data => this.updatePoll( data ) );
@@ -450,20 +451,22 @@
 
       async rcvMessageBulk ( messages ) {
         const pattern = new RegExp( `@${this.username}\\b`, 'gi' );
-        messages.forEach( el => {
+        messages.forEach( m => {
           // Filter messages
-          if ( this.filterMessage( el ) ) return;
+          if ( this.filterMessage( m ) ) return;
 
           // Notification Sounds
-          if ( this.notify ) if ( pattern.test( el.message ) ) this.sound.play().then();
+          if ( this.notify ) if ( pattern.test( m.message ) ) this.sound.play().then();
 
           // For Text to Speech
-          const currentChat = el.channel.toLowerCase() === this.username.toLowerCase();
-          const myChat      = el.channel.toLowerCase() === this.page.toLowerCase();
-          if ( currentChat || myChat ) this.speak( el.message, el.username ); // Say Message
+          const currentChat = m.channel.toLowerCase() === this.username.toLowerCase();
+          const myChat      = m.channel.toLowerCase() === this.page.toLowerCase();
+          if ( currentChat || myChat ) this.speak( m.message, m.username ); // Say Message
+
+          m.type = 'message';
 
           // Add message to list
-          this.messages.push( Object.freeze( el ) );
+          this.messages.push( Object.freeze( m ) );
 
           // Track message count
           if ( this.statInterval ) this.newMessageCount++;
@@ -488,6 +491,21 @@
         }
       },
 
+      addAlert ( data ) {
+        const m = {
+          _id: data._id,
+          type: 'alert',
+          message: data.message,
+          color: 'primary',
+        };
+
+        this.messages.push( Object.freeze( m ) );
+
+        if ( !this.$refs['chatmessages'].showFAB ) {
+          this.$nextTick( () => this.scrollToBottom() );
+        }
+      },
+
       filterMessage ( message ) {
 
         // Remove ignored user messages

diff --git a/components/Chat/ChatMessages/index.vue b/components/Chat/ChatMessages/index.vue
@@ -36,39 +36,62 @@
           :key="msg._id"
           class="pb-1 pl-3 pr-1"
         >
-          <!-- Regular chat message -->
-          <chat-message
-            v-if="msg.username !== ( index && messages[ index - 1 ].username )"
-            :badge="msg.badge"
-            :username="msg.username"
-            :display-name="msg.username"
-            :user-styling="{ color: msg.userColor ? msg.userColor : '#9e9e9e' }"
-            :route-prefix="routePrefix"
-            :channel="msg.channel"
-            :timestamp="getTime( msg.timestamp )"
-            :avatar="msg.avatar"
-            :color="msg.color"
-            :global="getGlobalTag( msg.global )"
-            @reply="addUserTag"
-            @whisper="addWhisper"
-            @select="onMessageClick( msg )"
-          >
-            <div
-              class="body-2 msg"
-              v-html="msg.message"
-            ></div>
-          </chat-message>
 
-          <!-- Append messages -->
-          <div
+          <!-- Chat Alert -->
+          <template
+            v-if="msg.type === 'alert'"
+          >
+            <div>
+              <v-alert
+                dense
+                outlined
+                text
+                border="left"
+                :color="msg.color"
+                class="my-2"
+              >{{ msg.message }}</v-alert>
+            </div>
+          </template>
+
+          <!-- Chat Message -->
+          <template
             v-else
-            class="msg append"
           >
+            <!-- Regular chat message -->
+            <chat-message
+              v-if="msg.username !== ( index && messages[ index - 1 ].username )"
+              :badge="msg.badge"
+              :username="msg.username"
+              :display-name="msg.username"
+              :user-styling="{ color: msg.userColor ? msg.userColor : '#9e9e9e' }"
+              :route-prefix="routePrefix"
+              :channel="msg.channel"
+              :timestamp="getTime( msg.timestamp )"
+              :avatar="msg.avatar"
+              :color="msg.color"
+              :global="getGlobalTag( msg.global )"
+              @reply="addUserTag"
+              @whisper="addWhisper"
+              @select="onMessageClick( msg )"
+            >
+              <div
+                class="body-2 msg"
+                v-html="msg.message"
+              ></div>
+            </chat-message>
+
+            <!-- Append messages -->
             <div
-              class="body-2 msg"
-              v-html="msg.message"
-            ></div>
-          </div>
+              v-else
+              class="msg append"
+            >
+              <div
+                class="body-2 msg"
+                v-html="msg.message"
+              ></div>
+            </div>
+          </template>
+
         </div>
 
       </transition-group>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bitwave.tv",
-  "version": "1.18.6",
+  "version": "1.18.7",
   "description": "An open platform live streaming service for creators to freely express themselves.",
   "author": "Dispatch",
   "scripts": {