Show a message while buffering if it was caused by the internet conne…

…ction disappearing
kommunarr · Aug 11, 2024 · 704e49e · 704e49e
1 parent 6908a9e
commit 704e49e
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 1 deletion.
diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
@@ -65,6 +65,39 @@
   /* user-select is intentionally not disabled, so that you can select and copy the stats */
 }
 
+.offlineWrapper {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  margin-left: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  background-color: #000;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+:global(body[dir='rtl'] .offlineWrapper) {
+  right: initial;
+  margin-left: initial;
+  left: 20px;
+  margin-right: 20px;
+}
+
+.offlineIcon {
+  font-size: 30px;
+}
+
+.offlineMessage {
+  margin: 0;
+}
+
+.offlineMessageSubtitle {
+  font-size: 0.8em;
+}
+
 :deep(.shaka-volume-bar-container) {
   flex-shrink: initial;
 }

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -2278,6 +2278,31 @@ export default defineComponent({
 
     // #endregion seek bar markers
 
+    // #region offline message
+
+    const isOffline = ref(!navigator.onLine)
+    const isBuffering = ref(false)
+
+    function onlineHandler() {
+      isOffline.value = false
+    }
+
+    function offlineHandler() {
+      isOffline.value = true
+    }
+
+    window.addEventListener('online', onlineHandler)
+    window.addEventListener('offline', offlineHandler)
+
+    // Only display the offline message while buffering/the loading symbol is visible.
+    // If we briefly lose the connection but it comes back before the buffer is empty,
+    // the user won't notice anything so we don't need to display the message.
+    const showOfflineMessage = computed(() => {
+      return isOffline.value && isBuffering.value
+    })
+
+    // #endregion offline message
+
     // #region setup
 
     onMounted(async () => {
@@ -2320,6 +2345,10 @@ export default defineComponent({
       const controls = ui.getControls()
       player = controls.getPlayer()
 
+      player.addEventListener('buffering', event => {
+        isBuffering.value = event.buffering
+      })
+
       player.addEventListener('error', event => handleError(event.detail, 'shaka error handler'))
 
       player.configure(getPlayerConfig(props.format, defaultQuality.value === 'auto'))
@@ -2701,6 +2730,9 @@ export default defineComponent({
       }
 
       skippedSponsorBlockSegments.value.forEach(segment => clearTimeout(segment.timeoutId))
+
+      window.removeEventListener('online', onlineHandler)
+      window.removeEventListener('offline', offlineHandler)
     })
 
     // #endregion tear down
@@ -2753,6 +2785,8 @@ export default defineComponent({
 
       skippedSponsorBlockSegments,
 
+      showOfflineMessage,
+
       handlePlay,
       handlePause,
       handleEnded,

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
@@ -65,6 +65,28 @@
         <span>{{ $t('Video.Player.Stats.Dropped Frames / Total Frames', stats.frames) }}</span>
       </template>
     </div>
+    <div
+      v-if="showOfflineMessage"
+      class="offlineWrapper"
+    >
+      <font-awesome-layers
+        fixed-width
+        class="offlineIcon"
+        aria-hidden="true"
+      >
+        <font-awesome-icon :icon="['fas', 'wifi']" />
+        <font-awesome-icon :icon="['fas', 'slash']" />
+      </font-awesome-layers>
+      <p class="offlineMessage">
+        <span>
+          {{ $t('Video.Player.You appear to be offline') }}
+        </span>
+        <br>
+        <span class="offlineMessageSubtitle">
+          {{ $t('Video.Player.Playback will resume automatically when your connection comes back') }}
+        </span>
+      </p>
+    </div>
     <div
       v-if="sponsorBlockShowSkippedToast && skippedSponsorBlockSegments.length > 0"
       class="skippedSegmentsWrapper"

diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -77,6 +77,7 @@ import {
   faSearch,
   faServer,
   faShareAlt,
+  faSlash,
   faSlidersH,
   faSortAlphaDown,
   faSortAlphaDownAlt,
@@ -93,6 +94,7 @@ import {
   faUserCheck,
   faUsers,
   faUsersSlash,
+  faWifi,
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBookmark as farBookmark
@@ -102,7 +104,7 @@ import {
   faGithub,
   faMastodon,
 } from '@fortawesome/free-brands-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 import PortalVue from 'portal-vue'
 
 Vue.config.devtools = process.env.NODE_ENV === 'development'
@@ -177,6 +179,7 @@ library.add(
   faSearch,
   faServer,
   faShareAlt,
+  faSlash,
   faSlidersH,
   faSortAlphaDown,
   faSortAlphaDownAlt,
@@ -193,6 +196,7 @@ library.add(
   faUserCheck,
   faUsers,
   faUsersSlash,
+  faWifi,
 
   // solid icons
   farBookmark,
@@ -206,6 +210,7 @@ library.add(
 registerSwiper()
 
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)
+Vue.component('FontAwesomeLayers', FontAwesomeLayers)
 Vue.directive('observe-visibility', ObserveVisibility)
 
 /* eslint-disable-next-line no-new */

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -899,6 +899,8 @@ Video:
       Dropped Frames / Total Frames: 'Dropped Frames: {droppedFrames} / Total Frames: {totalFrames}'
       CodecAudio: 'Codec: {audioCodec} ({audioItag})'
       CodecsVideoAudio: 'Codecs: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
+    You appear to be offline: You appear to be offline.
+    Playback will resume automatically when your connection comes back: Playback will resume automatically when your connection comes back.
     Skipped segment: 'Skipped {segmentCategory} segment'
 #& Videos
 Videos:

diff --git a/static/locales/en_GB.yaml b/static/locales/en_GB.yaml
@@ -969,6 +969,8 @@ Video:
       Dropped Frames / Total Frames: 'Dropped frames: {droppedFrames} / Total frames: {totalFrames}'
       CodecAudio: 'Codec: {audioCodec} ({audioItag})'
       CodecsVideoAudio: 'Codecs: {videoCodec} ({videoItag}) / {audioCodec} ({audioItag})'
+    You appear to be offline: You appear to be offline.
+    Playback will resume automatically when your connection comes back: Playback will resume automatically when your connection comes back.
     Skipped segment: 'Skipped {segmentCategory} segment'
 Videos:
   #& Sort By