Changed to non-blocking subtitles

src/components/htmlvideoplayer/plugin.js

@@ -200,6 +200,27 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             return self._currentSrc;
         };
 
+        self._fetchQueue = 0;
+        self.isFetching = false;
+
+        function incrementFetchQueue() {
+            if (self._fetchQueue <= 0) {
+                self.isFetching = true;
+                events.trigger(self, "beginFetch");
+            }
+
+            self._fetchQueue++;
+        }
+
+        function decrementFetchQueue() {
+            self._fetchQueue--;
+
+            if (self._fetchQueue <= 0) {
+                self.isFetching = false;
+                events.trigger(self, "endFetch");
+            }
+        }
+
         function updateVideoUrl(streamInfo) {
 
             var isHls = streamInfo.url.toLowerCase().indexOf('.m3u8') !== -1;
@@ -510,20 +531,15 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             } else*/ if (browser.chromecast && val.indexOf('.m3u8') !== -1 && options.mediaSource.RunTimeTicks) {
 
-                setTracks(elem, tracks, options.item, options.mediaSource);
                 return setCurrentSrcChromecast(self, elem, options, val);
             }
 
             else if (htmlMediaHelper.enableHlsJsPlayer(options.mediaSource.RunTimeTicks, 'Video') && val.indexOf('.m3u8') !== -1) {
                 
-                setTracks(elem, tracks, options.item, options.mediaSource);
-
                 return setSrcWithHlsJs(self, elem, options, val);
 
             } else if (options.playMethod !== 'Transcode' && options.mediaSource.Container === 'flv') {
 
-                setTracks(elem, tracks, options.item, options.mediaSource);
-
                 return setSrcWithFlvJs(self, elem, options, val);
 
             } else {
@@ -532,8 +548,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
                 return htmlMediaHelper.applySrc(elem, val, options).then(function () {
 
-                    setTracks(elem, tracks, options.item, options.mediaSource);
-
                     self._currentSrc = val;
 
                     return htmlMediaHelper.playWithPromise(elem, onError);
@@ -968,8 +982,8 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 return fetchSubtitlesUwp(track, item);
             }
 
+            incrementFetchQueue();
             return new Promise(function (resolve, reject) {
-
                 var xhr = new XMLHttpRequest();
 
                 var url = getTextTrackUrl(track, item, '.js');
@@ -978,15 +992,19 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
                 xhr.onload = function (e) {
                     resolve(JSON.parse(this.response));
+                    decrementFetchQueue();
                 };
 
-                xhr.onerror = reject;
+                xhr.onerror = function (e) {
+                    reject(e);
+                    decrementFetchQueue();
+                }
 
                 xhr.send();
             });
         }
 
-        function setTrackForCustomDisplay(videoElement, track) {
+        function setTrackForDisplay(videoElement, track) {
 
             if (!track) {
                 destroyCustomTrack(videoElement);
@@ -1267,60 +1285,17 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 return t.Index === streamIndex;
             })[0];
 
+            setTrackForDisplay(self._mediaElement, track);
             if (enableNativeTrackSupport(self._currentSrc, track)) {
-
-                setTrackForCustomDisplay(self._mediaElement, null);
-
                 if (streamIndex !== -1) {
                     setCueAppearance();
                 }
 
             } else {
-                setTrackForCustomDisplay(self._mediaElement, track);
-
                 // null these out to disable the player's native display (handled below)
                 streamIndex = -1;
                 track = null;
             }
-
-            var expectedId = 'textTrack' + streamIndex;
-            var trackIndex = streamIndex === -1 || !track ? -1 : mediaStreamTextTracks.indexOf(track);
-            var modes = ['disabled', 'showing', 'hidden'];
-
-            var allTracks = self._mediaElement.textTracks; // get list of tracks
-            for (var i = 0; i < allTracks.length; i++) {
-
-                var currentTrack = allTracks[i];
-
-                console.log('currentTrack id: ' + currentTrack.id);
-
-                var mode;
-
-                console.log('expectedId: ' + expectedId + '--currentTrack.Id:' + currentTrack.id);
-
-                // IE doesn't support track id
-                if (browser.msie || browser.edge) {
-                    if (trackIndex === i) {
-                        mode = 1; // show this track
-                    } else {
-                        mode = 0; // hide all other tracks
-                    }
-                } else {
-
-                    if (currentTrack.label.indexOf('manualTrack') !== -1) {
-                        continue;
-                    }
-                    if (currentTrack.id === expectedId) {
-                        mode = 1; // show this track
-                    } else {
-                        mode = 0; // hide all other tracks
-                    }
-                }
-
-                console.log('Setting track ' + i + ' mode to: ' + mode);
-
-                currentTrack.mode = modes[mode];
-            }
         }
 
         function updateTextStreamUrls(startPositionTicks) {

src/controllers/videoosd.js

@@ -603,6 +603,14 @@ define(["playbackManager", "dom", "inputmanager", "datetime", "itemHelper", "med
             }, state);
         }
 
+        function onBeginFetch() {
+            document.querySelector(".osdMediaStatus").classList.remove("hide");
+        }
+
+        function onEndFetch() {
+            document.querySelector(".osdMediaStatus").classList.add("hide");
+        }
+
         function bindToPlayer(player) {
             if (player !== currentPlayer) {
                 releaseCurrentPlayer();
@@ -621,7 +629,13 @@ define(["playbackManager", "dom", "inputmanager", "datetime", "itemHelper", "med
             events.on(player, "timeupdate", onTimeUpdate);
             events.on(player, "fullscreenchange", updateFullscreenIcon);
             events.on(player, "mediastreamschange", onMediaStreamsChanged);
+            events.on(player, "beginFetch", onBeginFetch);
+            events.on(player, "endFetch", onEndFetch);
             resetUpNextDialog();
+
+            if (player.isFetching) {
+                onBeginFetch();
+            }
         }
 
         function releaseCurrentPlayer() {

src/css/videoosd.css

@@ -214,6 +214,19 @@
     align-items: baseline
 }
 
+.osdMediaStatus {
+    margin-left: auto;
+}
+
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+.osdMediaStatus .animate {
+    -webkit-animation:spin 4s linear infinite;
+    -moz-animation:spin 4s linear infinite;
+    animation:spin 4s linear infinite;
+}
+
 .pageContainer {
     top: 0;
     position: fixed
@@ -236,7 +249,8 @@
 }
 
 @media all and (max-width:43em) {
-    .videoOsdBottom .volumeButtons {
+    .videoOsdBottom .volumeButtons,
+    .osdMediaStatus span {
         display: none !important
     }
 }

src/strings/de.json

@@ -238,6 +238,7 @@
     "FastForward": "Vorwärts spulen",
     "Favorite": "Favorit",
     "Favorites": "Favoriten",
+    "FetchingData": "Lade zusätzliche Daten",
     "File": "Datei",
     "FileNotFound": "Datei nicht gefunden.",
     "FileReadCancelled": "Dateiimport wurde abgebrochen.",

src/strings/en-us.json

@@ -250,6 +250,7 @@
     "Favorite": "Favorite",
     "Favorites": "Favorites",
     "Features": "Features",
+    "FetchingData": "Fetching additional data",
     "File": "File",
     "FileNotFound": "File not found.",
     "FileReadCancelled": "The file read has been canceled.",

src/videoosd.html

@@ -15,6 +15,9 @@
             <div class="osdTextContainer osdMainTextContainer">
                 <h3 class="osdTitle"></h3>
                 <div class="osdMediaInfo"></div>
+                <div class="osdMediaStatus hide">
+                    <i class="md-icon animate">autorenew</i> <span>${FetchingData}</span>
+                </div>
             </div>
 
             <div class="osdTextContainer osdSecondaryMediaInfo">