Show message when the live chat is unavailable (#3327)

* Show message when the live chat is unavailable

* Dynamically size live chat card when an error is shown

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

@@ -1,3 +1,8 @@
+.card.hasError {
+  height: auto !important;
+  padding: 16px;
+}
+
 .relative {
   position: relative;
 }
@@ -12,6 +17,11 @@
   text-align: center;
 }
 
+.messageContainer.hasError {
+  flex-direction: column;
+  row-gap: 16px;
+}
+
 .message {
   font-size: 18px;
   color: var(--tertiary-text-color);

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

@@ -88,8 +88,12 @@ export default defineComponent({
     } else {
       switch (this.backendPreference) {
         case 'local':
-          this.liveChatInstance = this.liveChat
-          this.startLiveChatLocal()
+          if (this.liveChat) {
+            this.liveChatInstance = this.liveChat
+            this.startLiveChatLocal()
+          } else {
+            this.showLiveChatUnavailable()
+          }
           break
         case 'invidious':
           if (this.backendFallback) {
@@ -114,9 +118,21 @@ export default defineComponent({
 
     getLiveChatLocal: async function () {
       const videoInfo = await getLocalVideoInfo(this.videoId)
-      this.liveChatInstance = videoInfo.getLiveChat()
 
-      this.startLiveChatLocal()
+      if (videoInfo.livechat) {
+        this.liveChatInstance = videoInfo.getLiveChat()
+
+        this.startLiveChatLocal()
+      } else {
+        this.showLiveChatUnavailable()
+      }
+    },
+
+    showLiveChatUnavailable: function () {
+      this.hasError = true
+      this.errorMessage = this.$t('Video["Live Chat is unavailable for this stream. It may have been disabled by the uploader."]')
+      this.isLoading = false
+      this.showEnableChat = false
     },
 
     startLiveChatLocal: function () {

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

@@ -1,6 +1,7 @@
 <template>
   <ft-card
-    class="relative"
+    class="card relative"
+    :class="{ hasError }"
   >
     <ft-loader
       v-if="isLoading"
@@ -8,6 +9,7 @@
     <div
       v-else-if="hasError"
       class="messageContainer"
+      :class="{ hasError }"
     >
       <p
         class="message"

static/locales/en-US.yaml

@@ -601,6 +601,7 @@ Video:
   'Live Chat is currently not supported with the Invidious API.  A direct connection to YouTube is required.': Live
     Chat is currently not supported with the Invidious API.  A direct connection to
     YouTube is required.
+  'Live Chat is unavailable for this stream. It may have been disabled by the uploader.': 'Live Chat is unavailable for this stream. It may have been disabled by the uploader.'
   Show Super Chat Comment: Show Super Chat Comment
   Scroll to Bottom: Scroll to Bottom
   Download Video: Download Video