Replace jquery in live chat and improve the message styling (#2666)

* Replace jquery in live chat and improve the message styling

* Fix the automatic scrolling

src/renderer/components/watch-video-live-chat/watch-video-live-chat.css

@@ -19,6 +19,11 @@
   margin: 0;
 }
 
+:deep(.liveChatEmoji) {
+  vertical-align: middle;
+  margin: 0 2px;
+}
+
 .errorIcon {
   width: 100%;
   color: var(--tertiary-text-color);
@@ -47,6 +52,7 @@
   margin-right: 2px;
   height: 30px;
   cursor: pointer;
+  background-color: var(--primary-color);
   border-radius: 200px 200px 200px 200px;
   -webkit-border-radius: 200px 200px 200px 200px;
 }
@@ -54,6 +60,7 @@
 .superChatContent {
   margin-left: 32px;
   margin-top: 6px;
+  color: var(--text-with-main-color);
 }
 
 .superChat .channelThumbnail {
@@ -142,17 +149,18 @@
   width: 100%;
   padding-top: 5px;
   padding-bottom: 7px;
+  display: grid;
+  grid-template-columns: min-content auto;
+  gap: 5px;
 }
 
 .channelThumbnail {
   width: 25px;
-  float: left;
+  border-radius: 200px;
-  border-radius: 200px 200px 200px 200px;
+  -webkit-border-radius: 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
 }
 
 .chatContent {
-  margin-left: 30px;
   margin-top: 5px;
   margin-bottom: 2px;
   font-size: 12px;
@@ -162,7 +170,6 @@
 .channelName {
   color: var(--tertiary-text-color);
   font-weight: bold;
-  padding-left: 5px;
   padding-right: 5px;
 }
 

src/renderer/components/watch-video-live-chat/watch-video-live-chat.js

@@ -5,7 +5,6 @@ import FtCard from '../ft-card/ft-card.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
 
-import $ from 'jquery'
 import autolinker from 'autolinker'
 import { LiveChat } from '@freetube/youtube-chat'
 
@@ -74,8 +73,13 @@ export default Vue.extend({
         return '445px'
       }
     },
+
     hideLiveChat: function () {
       return this.$store.getters.getHideLiveChat
+    },
+
+    scrollingBehaviour: function () {
+      return this.$store.getters.getDisableSmoothScrolling ? 'auto' : 'smooth'
     }
   },
   created: function () {
@@ -146,6 +150,8 @@ export default Vue.extend({
       comment.messageHtml = ''
 
       comment.message.forEach((text) => {
+        if (typeof text === 'undefined') return
+
         if (typeof (text.navigationEndpoint) !== 'undefined') {
           if (typeof (text.navigationEndpoint.watchEndpoint) !== 'undefined') {
             const htmlRef = `<a href="https://www.youtube.com/watch?v=${text.navigationEndpoint.watchEndpoint.videoId}">${text.text}</a>`
@@ -154,7 +160,7 @@ export default Vue.extend({
             comment.messageHtml = (comment.messageHtml + text.text).replace(/(<([^>]+)>)/ig, '')
           }
         } else if (typeof (text.alt) !== 'undefined') {
-          const htmlImg = `<img src="${text.url}" alt="${text.alt}" height="24" width="24" />`
+          const htmlImg = `<img src="${text.url}" alt="${text.alt}" class="liveChatEmoji" height="24" width="24" />`
           comment.messageHtml = comment.messageHtml.replace(/(<([^>]+)>)/ig, '') + htmlImg
         } else {
           comment.messageHtml = (comment.messageHtml + text.text).replace(/(<([^>]+)>)/ig, '')
@@ -163,10 +169,7 @@ export default Vue.extend({
 
       comment.messageHtml = autolinker.link(comment.messageHtml)
 
-      const liveChatComments = $('.liveChatComments')
+      if (typeof this.$refs.liveChatComments === 'undefined' && typeof this.$refs.liveChatMessage === 'undefined') {
-      const liveChatMessage = $('.liveChatMessage')
-
-      if (typeof (liveChatComments.get(0)) === 'undefined' && typeof (liveChatMessage.get(0)) === 'undefined') {
         console.error("Can't find chat object.  Stopping chat connection")
         this.liveChat.stop()
         return
@@ -202,7 +205,12 @@ export default Vue.extend({
       }
 
       if (this.stayAtBottom) {
-        liveChatComments.animate({ scrollTop: liveChatComments.prop('scrollHeight') })
+        setTimeout(() => {
+          this.$refs.liveChatComments?.scrollTo({
+            top: this.$refs.liveChatComments.scrollHeight,
+            behavior: this.scrollingBehaviour
+          })
+        })
       }
 
       if (this.comments.length > 150 && this.stayAtBottom) {
@@ -226,9 +234,8 @@ export default Vue.extend({
     },
 
     onScroll: function (event) {
-      const liveChatComments = $('.liveChatComments').get(0)
+      const liveChatComments = this.$refs.liveChatComments
       if (event.wheelDelta >= 0 && this.stayAtBottom) {
-        $('.liveChatComments').data('animating', 0)
         this.stayAtBottom = false
 
         if (liveChatComments.scrollHeight > liveChatComments.clientHeight) {
@@ -242,8 +249,10 @@ export default Vue.extend({
     },
 
     scrollToBottom: function () {
-      const liveChatComments = $('.liveChatComments')
+      this.$refs.liveChatComments.scrollTo({
-      liveChatComments.animate({ scrollTop: liveChatComments.prop('scrollHeight') })
+        top: this.$refs.liveChatComments.scrollHeight,
+        behavior: this.scrollingBehaviour
+      })
       this.stayAtBottom = true
       this.showScrollToBottom = false
     },

src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue

@@ -28,6 +28,7 @@
     </div>
     <div
       v-else-if="comments.length === 0"
+      ref="liveChatMessage"
       class="messageContainer liveChatMessage"
     >
       <p
@@ -48,7 +49,6 @@
         <div
           v-for="(comment, index) in superChatComments"
           :key="index"
-          :style="{ backgroundColor: 'var(--primary-color)' }"
           class="superChat"
           :class="comment.superchat.colorClass"
           @click="showSuperChatComment(comment)"
@@ -59,7 +59,6 @@
           >
           <p
             class="superChatContent"
-            :style="{ color: 'var(--text-with-main-color)' }"
           >
             <span
               class="donationAmount"
@@ -105,6 +104,7 @@
         </div>
       </div>
       <div
+        ref="liveChatComments"
         class="liveChatComments"
         :style="{ height: chatHeight }"
         @mousewheel="e => onScroll(e)"
@@ -143,7 +143,7 @@
               v-html="comment.messageHtml"
             />
           </div>
-          <div
+          <template
             v-else
           >
             <img
@@ -180,7 +180,7 @@
                 v-html="comment.messageHtml"
               />
             </p>
-          </div>
+          </template>
         </div>
       </div>
       <div