added loading indicator

frontend/js/player.js

@@ -29,10 +29,22 @@ App.player = App.player || {};
         return host;
     }
 
-    App.player.open = async function(source) {
+    App.player.open = async function(source, opts) {
         const modal = document.getElementById('video-modal');
         const video = document.getElementById('player');
-        if (!modal || !video) return;
+        const originEl = opts && opts.originEl ? opts.originEl : null;
+        const clearLoading = () => {
+            if (originEl) {
+                originEl.classList.remove('is-loading');
+            }
+        };
+        if (originEl) {
+            originEl.classList.add('is-loading');
+        }
+        if (!modal || !video) {
+            clearLoading();
+            return;
+        }
         const useMobileFullscreen = isMobilePlayback() || isTvPlayback();
         let playbackStarted = false;
 
@@ -60,6 +72,7 @@ App.player = App.player || {};
             if (App.ui && App.ui.showError) {
                 App.ui.showError('Unable to play this stream.');
             }
+            clearLoading();
             return;
         }
         const refererParam = resolved.referer ? `&referer=${encodeURIComponent(resolved.referer)}` : '';
@@ -128,6 +141,7 @@ App.player = App.player || {};
         const startPlayback = () => {
             if (playbackStarted) return;
             playbackStarted = true;
+            clearLoading();
             const playPromise = video.play();
             if (playPromise && typeof playPromise.catch === 'function') {
                 playPromise.catch(() => {});
@@ -152,6 +166,7 @@ App.player = App.player || {};
                 startPlayback();
                 state.hlsPlayer.on(window.Hls.Events.ERROR, function(event, data) {
                     if (data && data.fatal) {
+                        clearLoading();
                         if (App.ui && App.ui.showError) {
                             App.ui.showError('Unable to play this stream.');
                         }
@@ -166,6 +181,7 @@ App.player = App.player || {};
                 if (App.ui && App.ui.showError) {
                     App.ui.showError('HLS is not supported in this browser.');
                 }
+                clearLoading();
                 return;
             }
         } else {
@@ -174,6 +190,7 @@ App.player = App.player || {};
         }
 
         video.onerror = () => {
+            clearLoading();
             if (App.ui && App.ui.showError) {
                 App.ui.showError('Video failed to load.');
             }