Merge pull request #3543 from Shadowghost/strm-display-fix

(cherry picked from commit 4792631f06)
Signed-off-by: crobibero <cody@robibe.ro>

src/components/itemHelper.js

@@ -331,6 +331,17 @@ export function supportsMediaSourceSelection (item) {
     return true;
 }
 
+export function sortTracks (trackA, trackB) {
+    let cmp = trackA.IsExternal - trackB.IsExternal;
+    if (cmp != 0) return cmp;
+    cmp = trackB.IsForced - trackA.IsForced;
+    if (cmp != 0) return cmp;
+    cmp = trackB.IsDefault - trackA.IsDefault;
+    if (cmp != 0) return cmp;
+
+    return trackA.Index - trackB.Index;
+}
+
 export default {
     getDisplayName: getDisplayName,
     supportsAddingToCollection: supportsAddingToCollection,
@@ -346,5 +357,6 @@ export default {
     canRate: canRate,
     canConvert: canConvert,
     canRefreshMetadata: canRefreshMetadata,
-    supportsMediaSourceSelection: supportsMediaSourceSelection
+    supportsMediaSourceSelection: supportsMediaSourceSelection,
+    sortTracks: sortTracks
 };

src/components/itemMediaInfo/itemMediaInfo.js

@@ -12,6 +12,7 @@ import toast from '../toast/toast';
 import { copy } from '../../scripts/clipboard';
 import dom from '../../scripts/dom';
 import globalize from '../../scripts/globalize';
+import itemHelper from '../../components/itemHelper';
 import loading from '../loading/loading';
 import '../../elements/emby-select/emby-select';
 import '../listview/listview.scss';
@@ -71,8 +72,8 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : '<span class="hide">: </s
             const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`;
             html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}<br/>`;
         }
-        for (let i = 0, length = version.MediaStreams.length; i < length; i++) {
+        version.MediaStreams.sort(itemHelper.sortTracks);
-            const stream = version.MediaStreams[i];
+        for (const stream of version.MediaStreams) {
             if (stream.Type === 'Data') {
                 continue;
             }

src/components/playback/playbackmanager.js

@@ -3663,7 +3663,7 @@ class PlaybackManager {
         if (player.audioTracks) {
             const result = player.audioTracks();
             if (result) {
-                return result;
+                return result.sort(itemHelper.sortTracks);
             }
         }
 
@@ -3672,14 +3672,14 @@ class PlaybackManager {
         const mediaStreams = (mediaSource || {}).MediaStreams || [];
         return mediaStreams.filter(function (s) {
             return s.Type === 'Audio';
-        });
+        }).sort(itemHelper.sortTracks);
     }
 
     subtitleTracks(player = this._currentPlayer) {
         if (player.subtitleTracks) {
             const result = player.subtitleTracks();
             if (result) {
-                return result;
+                return result.sort(itemHelper.sortTracks);
             }
         }
 
@@ -3688,7 +3688,7 @@ class PlaybackManager {
         const mediaStreams = (mediaSource || {}).MediaStreams || [];
         return mediaStreams.filter(function (s) {
             return s.Type === 'Subtitle';
-        });
+        }).sort(itemHelper.sortTracks);
     }
 
     getSupportedCommands(player) {

src/controllers/itemDetails/index.js

@@ -194,7 +194,7 @@ function renderTrackSelections(page, instance, item, forceReload) {
     });
 
     resolutionNames.sort((a, b) => parseInt(b.Name, 10) - parseInt(a.Name, 10));
-    sourceNames.sort(function(a, b) {
+    sourceNames.sort((a, b) => {
         const nameA = a.Name.toUpperCase();
         const nameB = b.Name.toUpperCase();
         if (nameA < nameB) {
@@ -280,6 +280,7 @@ function renderAudioSelections(page, mediaSources) {
     const tracks = mediaSource.MediaStreams.filter(function (m) {
         return m.Type === 'Audio';
     });
+    tracks.sort(itemHelper.sortTracks);
     const select = page.querySelector('.selectAudio');
     select.setLabel(globalize.translate('Audio'));
     const selectedId = mediaSource.DefaultAudioStreamIndex;
@@ -309,31 +310,26 @@ function renderSubtitleSelections(page, mediaSources) {
     const tracks = mediaSource.MediaStreams.filter(function (m) {
         return m.Type === 'Subtitle';
     });
+    tracks.sort(itemHelper.sortTracks);
     const select = page.querySelector('.selectSubtitles');
     select.setLabel(globalize.translate('Subtitles'));
     const selectedId = mediaSource.DefaultSubtitleStreamIndex == null ? -1 : mediaSource.DefaultSubtitleStreamIndex;
 
-    const videoTracks = mediaSource.MediaStreams.filter(function (m) {
+    let selected = selectedId === -1 ? ' selected' : '';
-        return m.Type === 'Video';
+    select.innerHTML = '<option value="-1">' + globalize.translate('Off') + '</option>' + tracks.map(function (v) {
-    });
+        selected = v.Index === selectedId ? ' selected' : '';
+        return '<option value="' + v.Index + '" ' + selected + '>' + v.DisplayTitle + '</option>';
+    }).join('');
 
-    // This only makes sense on Video items
+    if (tracks.length > 0) {
-    if (videoTracks.length) {
+        select.removeAttribute('disabled');
-        let selected = selectedId === -1 ? ' selected' : '';
+    } else {
-        select.innerHTML = '<option value="-1">' + globalize.translate('Off') + '</option>' + tracks.map(function (v) {
+        select.setAttribute('disabled', 'disabled');
-            selected = v.Index === selectedId ? ' selected' : '';
+    }
-            return '<option value="' + v.Index + '" ' + selected + '>' + v.DisplayTitle + '</option>';
-        }).join('');
-
-        if (tracks.length > 0) {
-            select.removeAttribute('disabled');
-        } else {
-            select.setAttribute('disabled', 'disabled');
-        }
 
+    if (tracks.length) {
         page.querySelector('.selectSubtitlesContainer').classList.remove('hide');
     } else {
-        select.innerHTML = '';
         page.querySelector('.selectSubtitlesContainer').classList.add('hide');
     }
 }