diff --git a/dashboard-ui/nowplaying.html b/dashboard-ui/nowplaying.html index 1531ebda6b..2e0e3567bd 100644 --- a/dashboard-ui/nowplaying.html +++ b/dashboard-ui/nowplaying.html @@ -39,7 +39,7 @@
- +
@@ -85,6 +85,25 @@
+
+ +
+ +
+ +
diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js index e6736c9fce..7a499e62fc 100644 --- a/dashboard-ui/scripts/mediacontroller.js +++ b/dashboard-ui/scripts/mediacontroller.js @@ -319,8 +319,10 @@ player.setVolume(cmd.Arguments.Volume); break; case 'SetAudioStreamIndex': + player.setAudioStreamIndex(parseInt(cmd.Arguments.Index)); break; case 'SetSubtitleStreamIndex': + player.setSubtitleStreamIndex(parseInt(cmd.Arguments.Index)); break; case 'ToggleFullscreen': player.toggleFullscreen(); diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 1ceb19fd7e..312a75ecbb 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -147,6 +147,14 @@ } }; + self.setAudioStreamIndex = function (index) { + self.changeStream(self.getCurrentTicks(), { AudioStreamIndex: index }); + }; + + self.setSubtitleStreamIndex = function (index) { + self.changeStream(self.getCurrentTicks(), { SubtitleStreamIndex: index }); + }; + $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e) { var videoControls = $('#videoControls'); @@ -209,7 +217,7 @@ if (!$(this).hasClass('selectedMediaFlyoutOption')) { var index = parseInt(this.getAttribute('data-index')); - self.changeStream(self.getCurrentTicks(), { AudioStreamIndex: index }); + self.setAudioStreamIndex(index); } hideFlyout($('#video-audioTracksFlyout')); @@ -220,7 +228,7 @@ if (!$(this).hasClass('selectedMediaFlyoutOption')) { var index = parseInt(this.getAttribute('data-index')); - self.changeStream(self.getCurrentTicks(), { SubtitleStreamIndex: index }); + self.setSubtitleStreamIndex(index); } hideFlyout($('#video-subtitleFlyout')); diff --git a/dashboard-ui/scripts/nowplayingpage.js b/dashboard-ui/scripts/nowplayingpage.js index eb8b7c781e..ef131e8af8 100644 --- a/dashboard-ui/scripts/nowplayingpage.js +++ b/dashboard-ui/scripts/nowplayingpage.js @@ -4,6 +4,102 @@ var lastPlayerState; var isPositionSliderActive; + function showAudioMenu(page, item) { + + var streams = (item.MediaStreams || []).filter(function (i) { + + return i.Type == 'Audio'; + }); + + var elem = $('#popupAudioTrackMenu', page); + + var html = '
  • Select Audio
    • '; + + html += streams.map(function (s) { + + var streamHtml = '
  • '; + + streamHtml += (s.Codec || '').toUpperCase(); + + if (s.Profile) { + streamHtml += ' ' + s.Profile; + } + + streamHtml += '
    '; + + var extras = []; + + if (s.Language) { + extras.push(s.Language); + } + if (s.Layout) { + extras.push(s.Layout); + } + else if (s.Channels) { + extras.push(s.Channels + ' ch'); + } + + if (s.BitRate) { + extras.push((parseInt(s.BitRate / 1000)) + ' kbps'); + } + + streamHtml += extras.join(' - '); + + streamHtml += '
    • '; + + return streamHtml; + + }).join(''); + + $('ul', elem).html(html).listview('refresh').trigger('create'); + + elem.popup('open'); + } + + function showSubtitleMenu(page, item) { + + var streams = (item.MediaStreams || []).filter(function (i) { + + return i.Type == 'Subtitle'; + }); + + var elem = $('#popupSubtitleTrackMenu', page); + + var html = '
  • Select Subtitles
    • '; + + html += '
  • Off
    • '; + + html += streams.map(function (s) { + + var streamHtml = '
  • '; + + streamHtml += (s.Language || 'Unknown language'); + + if (s.IsDefault && s.IsForced) { + streamHtml += ' (Default/Forced)'; + } + else if (s.IsDefault) { + streamHtml += ' (Default)'; + } + else if (s.IsForced) { + streamHtml += ' (Forced)'; + } + + streamHtml += '
    '; + + streamHtml += (s.Codec || '').toUpperCase(); + + streamHtml += '
    • '; + + return streamHtml; + + }).join(''); + + $('ul', elem).html(html).listview('refresh').trigger('create'); + + elem.popup('open'); + } + function bindEvents(page) { $('.radioTabButton', page).on('change', function () { @@ -16,35 +112,90 @@ $('.btnCommand,.btnToggleFullscreen', page).on('click', function () { - MediaController.sendCommand({ - Name: this.getAttribute('data-command') - - }, currentPlayer); + if (currentPlayer) { + MediaController.sendCommand({ + Name: this.getAttribute('data-command') + + }, currentPlayer); + } + }); + + $('#popupAudioTrackMenu', page).on('click', '.lnkTrackOption', function () { + + if (currentPlayer && lastPlayerState) { + + var index = this.getAttribute('data-index'); + + currentPlayer.setAudioStreamIndex(parseInt(index)); + + $('#popupAudioTrackMenu', page).popup('close'); + } + }); + + $('#popupSubtitleTrackMenu', page).on('click', '.lnkTrackOption', function () { + + if (currentPlayer && lastPlayerState) { + var index = this.getAttribute('data-index'); + + currentPlayer.setSubtitleStreamIndex(parseInt(index)); + + $('#popupSubtitleTrackMenu', page).popup('close'); + } + }); + + $('.btnAudioTracks', page).on('click', function () { + + if (currentPlayer && lastPlayerState) { + showAudioMenu(page, lastPlayerState.NowPlayingItem); + } + }); + + $('.btnSubtitles', page).on('click', function () { + + if (currentPlayer && lastPlayerState) { + showSubtitleMenu(page, lastPlayerState.NowPlayingItem); + } + }); + + $('.btnChapters', page).on('click', function () { + + if (currentPlayer && lastPlayerState) { + } }); $('.btnStop', page).on('click', function () { - currentPlayer.stop(); + if (currentPlayer) { + currentPlayer.stop(); + } }); $('.btnPlay', page).on('click', function () { - currentPlayer.unpause(); + if (currentPlayer) { + currentPlayer.unpause(); + } }); $('.btnPause', page).on('click', function () { - currentPlayer.pause(); + if (currentPlayer) { + currentPlayer.pause(); + } }); $('.btnNextTrack', page).on('click', function () { - currentPlayer.nextTrack(); + if (currentPlayer) { + currentPlayer.nextTrack(); + } }); $('.btnPreviousTrack', page).on('click', function () { - currentPlayer.previousTrack(); + if (currentPlayer) { + currentPlayer.previousTrack(); + } }); $('.positionSlider', page).on('slidestart', function () { @@ -96,6 +247,12 @@ button.addClass('hide'); } + function hasStreams(item, type) { + return item && item.MediaStreams && item.MediaStreams.filter(function (i) { + return i.Type == type; + }).length > 0; + } + function updatePlayerState(page, state) { lastPlayerState = state; @@ -108,17 +265,17 @@ $('.btnToggleFullscreen', page).buttonEnabled(item && item.MediaType == 'Video' && supportedCommands.indexOf('ToggleFullscreen') != -1); - $('.btnAudioTracks', page).buttonEnabled(false); - $('.btnSubtitles', page).buttonEnabled(false); - $('.btnChapters', page).buttonEnabled(false); + $('.btnAudioTracks', page).buttonEnabled(hasStreams(item, 'Audio') && supportedCommands.indexOf('SetAudioStreamIndex') != -1); + $('.btnSubtitles', page).buttonEnabled(hasStreams(item, 'Subtitle') && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1); + $('.btnChapters', page).buttonEnabled(item && item.Chapters && item.Chapters.length); $('.btnStop', page).buttonEnabled(item != null); $('.btnNextTrack', page).buttonEnabled(item != null); $('.btnPreviousTrack', page).buttonEnabled(item != null); - + var btnPause = $('.btnPause', page).buttonEnabled(item != null); var btnPlay = $('.btnPlay', page).buttonEnabled(item != null); - + var playState = state.PlayState || {}; if (playState.IsPaused) { @@ -147,7 +304,7 @@ positionSlider.val(0); } - + if (playState.CanSeek) { positionSlider.slider("enable"); } else { @@ -174,7 +331,7 @@ } else { $('.videoButton', page).css('visibility', 'hidden'); } - + updateNowPlayingInfo(page, state); } @@ -221,7 +378,7 @@ setImageUrl(page, url); } - + function setImageUrl(page, url) { currentImgUrl = url; diff --git a/dashboard-ui/scripts/remotecontrol.js b/dashboard-ui/scripts/remotecontrol.js index f8f11fd95d..68f1e4095f 100644 --- a/dashboard-ui/scripts/remotecontrol.js +++ b/dashboard-ui/scripts/remotecontrol.js @@ -143,6 +143,18 @@ sendCommandByName('ToggleFullscreen'); }; + self.setAudioStreamIndex = function (index) { + sendCommandByName('SetAudioStreamIndex', { + Index: index + }); + }; + + self.setSubtitleStreamIndex = function (index) { + sendCommandByName('SetSubtitleStreamIndex', { + Index: index + }); + }; + self.displayContent = function (options) { sendCommandByName('DisplayContent', { @@ -276,7 +288,7 @@ } function onWebSocketConnectionChange() { - + // Reconnect if (player.isUpdating) { player.subscribeToPlayerUpdates();