feat(client/player): handle network offline

client/src/assets/player/peertube-player-manager.ts

@@ -128,6 +128,28 @@ export class PeertubePlayerManager {
           saveAverageBandwidth(data.bandwidthEstimate)
         })
 
+        const offlineNotificationElem = document.createElement('div')
+        offlineNotificationElem.classList.add('vjs-peertube-offline-notification')
+        offlineNotificationElem.innerText = 'You seem to be offline and the video may not work'
+
+        const handleOnline = () => {
+          player.el().removeChild(offlineNotificationElem)
+          logger.info('The browser is online')
+        }
+
+        const handleOffline = () => {
+          player.el().appendChild(offlineNotificationElem)
+          logger.info('The browser is offline')
+        }
+
+        window.addEventListener('online', handleOnline)
+        window.addEventListener('offline', handleOffline)
+
+        player.on('dispose', () => {
+          window.removeEventListener('online', handleOnline)
+          window.removeEventListener('offline', handleOffline)
+        })
+
         return res(player)
       })
     })

client/src/sass/player/index.scss

@@ -9,3 +9,4 @@
 @use './bezels';
 @use './playlist';
 @use './stats';
+@use './offline-notification';

client/src/sass/player/offline-notification.scss

@@ -0,0 +1,22 @@
+$height: 40px;
+
+.vjs-peertube-offline-notification {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: $height;
+  color: #000;
+  background-color: var(--mainColorLightest);
+  text-align: center;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vjs-modal-dialog
+.vjs-modal-dialog-content,
+.video-js .vjs-modal-dialog {
+  top: $height;
+}