mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
improve performance of now playing page
This commit is contained in:
Luke Pulverenti
parent
bbf03fdf40
commit
fe6a85e143
9 changed files with 1162 additions and 1110 deletions
1075
dashboard-ui/components/remotecontrol.js
Normal file
1075
dashboard-ui/components/remotecontrol.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.background-theme-b, paper-dialog.background-theme-b {
|
||||
background-color: #202020;
|
||||
background-color: #1A1A1A;
|
||||
/*background: radial-gradient(circle, #282828, #141414);*/
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,9 +17,12 @@
|
|||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.nowPlayingPageImage img {
|
||||
max-height: 360px;
|
||||
max-width: 360px;
|
||||
.nowPlayingPageImage {
|
||||
height: 360px;
|
||||
width: 360px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.nowPlayingPageTimeContainer {
|
||||
|
|
@ -89,9 +92,9 @@
|
|||
|
||||
@media all and (max-width: 700px) {
|
||||
|
||||
.nowPlayingPageImage img {
|
||||
max-height: 160px;
|
||||
max-width: 200px;
|
||||
.nowPlayingPageImage {
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -109,16 +112,17 @@
|
|||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.nowPlayingPageImage img {
|
||||
max-height: 160px;
|
||||
max-width: 220px;
|
||||
.nowPlayingPageImage {
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-height: 500px) {
|
||||
|
||||
.nowPlayingPageImage img {
|
||||
max-height: 120px;
|
||||
.nowPlayingPageImage {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -130,7 +134,8 @@
|
|||
}
|
||||
|
||||
.nowPlayingPageTitle {
|
||||
margin: .5em 0;
|
||||
margin: 1.5em auto .5em;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.nowPlayingInfoButtons {
|
||||
|
|
@ -140,7 +145,7 @@
|
|||
@media all and (min-height: 600px) {
|
||||
|
||||
.nowPlayingPageTitle {
|
||||
margin: 1em 0;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.nowPlayingInfoButtons {
|
||||
|
|
@ -173,16 +178,6 @@
|
|||
}
|
||||
|
||||
@media (orientation: landscape) and (max-height: 400px) {
|
||||
.nowPlayingPageTitle {
|
||||
margin: 0 auto;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
|
@ -190,15 +185,6 @@
|
|||
}
|
||||
|
||||
@media (orientation: portrait) and (max-height: 600px) {
|
||||
.nowPlayingPageTitle {
|
||||
margin: 0 auto;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
|
||||
width: 60px;
|
||||
|
|
@ -224,3 +210,11 @@
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.hideVideoButtons .videoButton {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.hideVolumeButtons .volumeButton {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,13 +109,13 @@
|
|||
height: 80px;
|
||||
}
|
||||
|
||||
.nowPlayingBar .nowPlayingImage {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.nowPlayingBar .nowPlayingImage {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.nowPlayingBarText {
|
||||
display: inline-block;
|
||||
|
|
@ -280,10 +280,15 @@
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.nowPlayingBar, .nowPlayingImage img {
|
||||
.nowPlayingBar {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.nowPlayingBar .nowPlayingImage {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionContainer {
|
||||
left: 70px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.background-theme-b, paper-dialog.background-theme-b {
|
||||
background-color: #1b1b1b;
|
||||
background-color: #1A1A1A;
|
||||
}
|
||||
|
||||
.defaultBackground .cardImage {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<a href="music.html?tab=3">${TabArtists}</a>
|
||||
<a href="music.html?tab=4">${TabSongs}</a>
|
||||
<a href="music.html?tab=5">${TabGenres}</a>
|
||||
<a href="music.html?tab=6" class="hide">${TabFolders}</a>
|
||||
<a href="music.html?tab=6">${TabFolders}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,174 +4,14 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage" data-contextname="${TitleRemoteControl}" data-theme="b" data-require="jqmcollapsible,scripts/nowplayingpage,buttonenabled,paper-slider,paper-tabs,neon-animated-pages,paper-fab">
|
||||
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage" data-contextname="${TitleRemoteControl}" data-theme="b" data-require="scripts/nowplayingpage">
|
||||
|
||||
<div class="libraryViewNav hide">
|
||||
<div>
|
||||
<a href="#" data-index="0">${TabNowPlaying}</a>
|
||||
<a href="#" data-index="1">${TabControls}</a>
|
||||
<a href="#" data-index="2">${TabPlaylist}</a>
|
||||
</div>
|
||||
<div class="remoteControlContent">
|
||||
|
||||
</div>
|
||||
|
||||
<div data-role="content" style="overflow:visible;">
|
||||
|
||||
<paper-fab mini icon="arrow-back" class="white nowPlayingPageBackButton" onclick="history.back()" style="position:relative;top:5px;left:5px;"></paper-fab>
|
||||
<div style="float:right;position:relative;top:5px;right:5px;text-align:right;">
|
||||
<div>
|
||||
<span class="nowPlayingSelectedPlayer"></span>
|
||||
<paper-fab mini icon="cast" class="blue nowPlayingCastIcon" onclick="MediaController.showPlayerSelection();" style="vertical-align:middle;"></paper-fab>
|
||||
<paper-fab mini icon="slideshow" class="btnSlideshow" style="vertical-align:middle;background:#888;z-index:1;margin-left:.5em;"></paper-fab>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<neon-animated-pages>
|
||||
<neon-animatable>
|
||||
<div style="text-align:center;">
|
||||
|
||||
<div class="nowPlayingPageTitle" style="line-height: normal;">
|
||||
</div>
|
||||
|
||||
<div class="nowPlayingInfoMetadata">
|
||||
<div class="nowPlayingPageImage" style="margin: 1em 0;"></div>
|
||||
|
||||
<div class="nowPlayingPageTimeContainer">
|
||||
<div>
|
||||
<paper-slider pin step=".1" min="0" max="100" value="0" class="nowPlayingPositionSlider"></paper-slider>
|
||||
</div>
|
||||
<div style="text-align:left;">
|
||||
<div class="positionTime" style="float:left;"></div>
|
||||
<div class="runtime" style="float: right;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nowPlayingInfoButtons">
|
||||
<div>
|
||||
<paper-fab icon="skip-previous" class="btnPreviousTrack btnPlayStateCommand subdued" title="${ButtonPreviousTrack}"></paper-fab>
|
||||
<paper-fab icon="pause" class="btnPause btnPlayStateCommand subdued" title="${ButtonPause}"></paper-fab>
|
||||
<paper-fab icon="play-arrow" class="btnPlay btnPlayStateCommand subdued" title="${ButtonPlay}"></paper-fab>
|
||||
<paper-fab icon="stop" class="btnPlayStateCommand btnStop subdued" title="${ButtonStop}"></paper-fab>
|
||||
<paper-fab icon="skip-next" class="btnPlayStateCommand btnNextTrack subdued" title="${ButtonNextTrack}"></paper-fab>
|
||||
</div>
|
||||
<div class="buttonsRow2">
|
||||
<paper-fab icon="audiotrack" class="btnAudioTracks videoButton btnPlayStateCommand subdued" title="${ButtonAudioTracks}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="closed-caption" class="btnSubtitles videoButton btnPlayStateCommand subdued" title="${ButtonSubtitles}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="movie" class="btnChapters videoButton btnPlayStateCommand subdued" title="${ButtonScenes}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="fullscreen" class="btnToggleFullscreen videoButton btnPlayStateCommand subdued" title="${ButtonFullscreen}" data-command="ToggleFullscreen"></paper-fab>
|
||||
</div>
|
||||
<!--<div class="buttonsRow3">
|
||||
<paper-fab icon="info" class="btnCommand videoButton subdued" title="${ButtonOsd}" data-command="ToggleOsdMenu"></paper-fab>
|
||||
</div>-->
|
||||
<div>
|
||||
<paper-fab icon="repeat" class="btnCommand subdued repeatToggleButton" title="${ButtonRepeat}" data-command="SetRepeatMode"></paper-fab>
|
||||
<paper-fab icon="volume-off" class="btnCommand subdued volumeButton" title="${ButtonMute}" data-command="ToggleMute"></paper-fab>
|
||||
<paper-fab icon="volume-down" class="btnCommand subdued volumeButton" title="${ButtonVolumeDown}" data-command="VolumeDown"></paper-fab>
|
||||
<paper-fab icon="volume-up" class="btnCommand subdued volumeButton" title="${ButtonVolumeUp}" data-command="VolumeUp"></paper-fab>
|
||||
</div>
|
||||
<div class="nowPlayingPageUserDataButtons" style="margin-top:1em;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</neon-animatable>
|
||||
<neon-animatable>
|
||||
<div style="text-align:center;">
|
||||
<div>
|
||||
<paper-fab icon="keyboard-arrow-up" class="btnArrowUp btnCommand subdued" title="${ButtonArrowUp}" data-command="MoveUp"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="keyboard-arrow-left" class="btnArrowLeft btnCommand subdued" title="${ButtonArrowLeft}" data-command="MoveLeft"></paper-fab>
|
||||
|
||||
<paper-fab icon="check" class="btnOk btnCommand subdued" title="${ButtonOk}" data-command="Select"></paper-fab>
|
||||
<paper-fab icon="keyboard-arrow-right" class="btnArrowRight btnCommand subdued" title="${ButtonArrowRight}" data-command="MoveRight"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="keyboard-arrow-down" class="btnArrowDown btnCommand subdued" title="${ButtonArrowDown}" data-command="MoveDown"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="arrow-back" class="btnBack btnCommand subdued" title="${ButtonBack}" data-command="Back"></paper-fab>
|
||||
<paper-fab icon="info" class="btnInfo btnCommand subdued" title="${ButtonInfo}" data-command="ToggleContextMenu"></paper-fab>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<paper-fab icon="home" class="btnGoHome btnCommand subdued" title="${ButtonHome}" data-command="GoHome"></paper-fab>
|
||||
|
||||
<!--<button data-inline="true" data-iconpos="right" title="${ButtonPageUp}" data-icon="plus" class="btnPageUp btnCommand ui-nodisc-icon" data-command="PageUp">${PageButtonAbbreviation}</button>
|
||||
<button data-inline="true" data-iconpos="right" title="${ButtonLetterUp}" data-icon="plus" class="btnLetterUp btnCommand ui-nodisc-icon" data-command="NextLetter">${LetterButtonAbbreviation}</button>-->
|
||||
<paper-fab icon="search" class="btnShowSearch btnCommand subdued" title="${ButtonSearch}" data-command="GoToSearch"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="settings" class="bthShowSettings btnCommand subdued" title="${ButtonSettings}" data-command="GoToSettings"></paper-fab>
|
||||
<!--<button data-inline="true" data-iconpos="right" title="${ButtonPageDown}" data-icon="minus" class="btnPageDown btnCommand ui-nodisc-icon" data-command="PageDown">${PageButtonAbbreviation}</button>
|
||||
<button data-inline="true" data-iconpos="right" title="${ButtonLetterDown}" data-icon="minus" class="btnLetterDown btnCommand ui-nodisc-icon" data-command="PreviousLetter">${LetterButtonAbbreviation}</button>-->
|
||||
<paper-fab icon="videocam" class="btnScreenshot btnCommand subdued" title="${ButtonTakeScreenshot}" data-command="TakeScreenshot"></paper-fab>
|
||||
</div>
|
||||
</div>
|
||||
<div class="readOnlyContent requiresJqmCreate" style="margin: 2em auto 0; padding: 0 1em 100px;">
|
||||
|
||||
<div data-role="collapsible">
|
||||
<h2>${HeaderSendMessage}</h2>
|
||||
<div style="text-align: left;">
|
||||
|
||||
<br />
|
||||
<form class="sendMessageForm">
|
||||
<div>
|
||||
<label for="txtMessageTitle">${LabelMessageTitle}</label>
|
||||
<input class="sendMessageElement" type="text" id="txtMessageTitle" required="required" />
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="txtMessageText">${LabelMessageText}</label>
|
||||
<input class="sendMessageElement" type="text" id="txtMessageText" required="required" />
|
||||
</div>
|
||||
<p>
|
||||
<button class="sendMessageElement" type="submit" data-icon="mail">${ButtonSend}</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h2>${HeaderTypeText}</h2>
|
||||
<div style="text-align: left;">
|
||||
|
||||
<br />
|
||||
<form class="typeTextForm">
|
||||
<div>
|
||||
<label for="txtTypeText">${LabelTypeText}</label>
|
||||
<input class="typeTextElement" type="text" id="txtTypeText" required="required" />
|
||||
</div>
|
||||
<p>
|
||||
<button class="typeTextElement" type="submit" data-icon="arrow-r">${ButtonSend}</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</neon-animatable>
|
||||
<neon-animatable>
|
||||
<div class="playlist itemsContainer" style="max-width:800px;margin: 2em auto 0;padding-bottom:200px;">
|
||||
</div>
|
||||
</neon-animatable>
|
||||
</neon-animated-pages>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="chapterMenuOverlay" style="display: none;"></div>
|
||||
<div class="chapterMenu hiddenScrollX" style="display: none;">
|
||||
<div class="chapterMenuInner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<paper-tabs class="nowPlayingPagePaperTabs" hidescrollbuttons noink>
|
||||
|
||||
<paper-tab>${TabNowPlaying}</paper-tab>
|
||||
<paper-tab>${TabControls}</paper-tab>
|
||||
<paper-tab>${TabPlaylist}</paper-tab>
|
||||
|
||||
</paper-tabs>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
(function (window, document, $, setTimeout, clearTimeout) {
|
||||
define([], function () {
|
||||
|
||||
var currentPlayer;
|
||||
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
html += '<paper-icon-button icon="play-arrow" class="mediaButton unpauseButton"></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="pause" class="mediaButton pauseButton"></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="tablet-android" onclick="Dashboard.navigate(\'nowplaying.html\', false);" class="mediaButton remoteControlButton"></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="tablet-android" class="mediaButton remoteControlButton"></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="queue-music" class="mediaButton playlistButton"></paper-icon-button>';
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -183,11 +183,14 @@
|
|||
}
|
||||
});
|
||||
|
||||
$('.playlistButton', elem).on('click', function () {
|
||||
elem.querySelector('.remoteControlButton').addEventListener('click', function () {
|
||||
|
||||
$.mobile.changePage('nowplaying.html', {
|
||||
dataUrl: 'nowplaying.html#playlist'
|
||||
});
|
||||
showRemoteControl();
|
||||
});
|
||||
|
||||
elem.querySelector('.playlistButton').addEventListener('click', function () {
|
||||
|
||||
showRemoteControl('playlist');
|
||||
});
|
||||
|
||||
toggleRepeatButton = $('.toggleRepeatButton', elem).on('click', function () {
|
||||
|
|
@ -249,6 +252,17 @@
|
|||
}, 300);
|
||||
}
|
||||
|
||||
function showRemoteControl(tab) {
|
||||
|
||||
if (tab) {
|
||||
$.mobile.changePage('nowplaying.html', {
|
||||
dataUrl: 'nowplaying.html#' + tab
|
||||
});
|
||||
} else {
|
||||
Dashboard.navigate('nowplaying.html');
|
||||
}
|
||||
}
|
||||
|
||||
var nowPlayingBarElement;
|
||||
function getNowPlayingBar() {
|
||||
|
||||
|
|
@ -645,4 +659,4 @@
|
|||
|
||||
bindToPlayer(MediaController.getCurrentPlayer());
|
||||
|
||||
})(window, document, jQuery, setTimeout, clearTimeout);
|
||||
});
|
||||
|
|
@ -1,919 +1,43 @@
|
|||
(function (window, document, $, setTimeout, clearTimeout) {
|
||||
|
||||
var currentPlayer;
|
||||
var lastPlayerState;
|
||||
|
||||
function populateChapters(elem, chapters, itemId, runtimeTicks) {
|
||||
|
||||
var html = '';
|
||||
|
||||
for (var i = 0, length = chapters.length; i < length; i++) {
|
||||
|
||||
var chapter = chapters[i];
|
||||
|
||||
html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="posterItem backdropPosterItem chapterPosterItem">';
|
||||
|
||||
var imgUrl;
|
||||
|
||||
if (chapter.ImageTag) {
|
||||
|
||||
imgUrl = ApiClient.getScaledImageUrl(itemId, {
|
||||
width: 240,
|
||||
tag: chapter.ImageTag,
|
||||
type: "Chapter",
|
||||
index: i
|
||||
});
|
||||
|
||||
} else {
|
||||
imgUrl = "css/images/items/list/chapter.png";
|
||||
}
|
||||
|
||||
var dataSrc = ' data-src="' + imgUrl + '"';
|
||||
// TODO: This markup needs to be converted to the newer card layout pattern
|
||||
html += '<div class="posterItemImage lazy"' + dataSrc + '>';
|
||||
|
||||
html += '<div class="posterItemTextOverlay" style="position:absolute;bottom:0;left:0;right:0;">';
|
||||
|
||||
if (chapter.Name) {
|
||||
html += "<div class='posterItemText'>";
|
||||
html += chapter.Name;
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
html += "<div class='posterItemProgress posterItemText'>";
|
||||
var pct = 100 * (chapter.StartPositionTicks / runtimeTicks);
|
||||
html += '<progress class="itemProgressBar" min="0" max="100" value="' + pct + '" style="opacity:.8;width:100%;"></progress>';
|
||||
html += "</div>";
|
||||
|
||||
html += "</div>";
|
||||
|
||||
html += "</div>";
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
}
|
||||
|
||||
function selectCurrentChapter(elem, positionTicks) {
|
||||
|
||||
var elems = $('.chapterPosterItem', elem).removeClass('currentChapter');
|
||||
|
||||
var matches = elems.get().filter(function (i) {
|
||||
|
||||
var ticks = i.getAttribute('data-positionticks');
|
||||
|
||||
return positionTicks >= ticks;
|
||||
|
||||
});
|
||||
|
||||
var chapterElem = matches[matches.length - 1];
|
||||
|
||||
chapterElem.classList.add('currentChapter');
|
||||
|
||||
chapterElem.scrollIntoView();
|
||||
|
||||
elem.scrollLeft += 50;
|
||||
}
|
||||
|
||||
function showChapterMenu(page, item, currentPositionTicks) {
|
||||
|
||||
$('.chapterMenuOverlay', page).show();
|
||||
|
||||
var elem = page.querySelector('.chapterMenu');
|
||||
$(elem).show();
|
||||
|
||||
if (item.Id == elem.getAttribute('data-itemid')) {
|
||||
|
||||
selectCurrentChapter(elem, currentPositionTicks);
|
||||
return;
|
||||
}
|
||||
|
||||
var innerElem = elem.querySelector('.chapterMenuInner');
|
||||
|
||||
populateChapters(innerElem, item.Chapters, item.Id, item.RunTimeTicks);
|
||||
|
||||
elem.setAttribute('data-itemid', item.Id);
|
||||
|
||||
selectCurrentChapter(elem, currentPositionTicks);
|
||||
}
|
||||
|
||||
function hideChapterMenu(page) {
|
||||
|
||||
$('.chapterMenuOverlay', page).hide();
|
||||
$('.chapterMenu', page).hide();
|
||||
}
|
||||
|
||||
function showAudioMenu(page, button, item, currentIndex) {
|
||||
|
||||
var streams = (item.MediaStreams || []).filter(function (i) {
|
||||
|
||||
return i.Type == 'Audio';
|
||||
});
|
||||
|
||||
var menuItems = streams.map(function (s) {
|
||||
|
||||
var name = (s.Codec || '').toUpperCase();
|
||||
|
||||
if (s.Profile) {
|
||||
name += ' ' + s.Profile;
|
||||
}
|
||||
|
||||
if (s.Language) {
|
||||
name += ' · ' + s.Language;
|
||||
}
|
||||
if (s.Layout) {
|
||||
name += ' · ' + s.Layout;
|
||||
}
|
||||
else if (s.Channels) {
|
||||
name += ' · ' + s.Channels + ' ch';
|
||||
}
|
||||
|
||||
var menuItem = {
|
||||
name: name,
|
||||
id: s.Index
|
||||
};
|
||||
|
||||
if (s.Index == currentIndex) {
|
||||
menuItem.ironIcon = 'check';
|
||||
}
|
||||
|
||||
return menuItem;
|
||||
});
|
||||
|
||||
require(['actionsheet'], function (actionsheet) {
|
||||
|
||||
actionsheet.show({
|
||||
items: menuItems,
|
||||
positionTo: button,
|
||||
callback: function (id) {
|
||||
|
||||
currentPlayer.setAudioStreamIndex(parseInt(id));
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function showSubtitleMenu(page, button, item, currentIndex) {
|
||||
|
||||
var streams = (item.MediaStreams || []).filter(function (i) {
|
||||
|
||||
return i.Type == 'Subtitle';
|
||||
});
|
||||
|
||||
var menuItems = streams.map(function (s) {
|
||||
|
||||
var name = (s.Language || Globalize.translate('LabelUnknownLanguage'));
|
||||
|
||||
if (s.IsDefault && s.IsForced) {
|
||||
name += ' · ' + Globalize.translate('LabelDefaultForcedStream');
|
||||
}
|
||||
else if (s.IsDefault) {
|
||||
name += ' · ' + Globalize.translate('LabelDefaultStream');
|
||||
}
|
||||
else if (s.IsForced) {
|
||||
name += ' · ' + Globalize.translate('LabelForcedStream');
|
||||
}
|
||||
|
||||
if (s.Codec) {
|
||||
name += ' · ' + s.Codec.toUpperCase();
|
||||
}
|
||||
|
||||
var menuItem = {
|
||||
name: name,
|
||||
id: s.Index
|
||||
};
|
||||
|
||||
if (s.Index == currentIndex) {
|
||||
menuItem.ironIcon = 'check';
|
||||
}
|
||||
|
||||
return menuItem;
|
||||
});
|
||||
alert(currentIndex);
|
||||
menuItems.unshift({
|
||||
id: -1,
|
||||
name: Globalize.translate('ButtonOff'),
|
||||
ironIcon: currentIndex == null ? 'check' : null
|
||||
});
|
||||
|
||||
require(['actionsheet'], function (actionsheet) {
|
||||
|
||||
actionsheet.show({
|
||||
items: menuItems,
|
||||
positionTo: button,
|
||||
callback: function (id) {
|
||||
|
||||
currentPlayer.setSubtitleStreamIndex(parseInt(id));
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function toggleRepeat(player) {
|
||||
|
||||
if (player && lastPlayerState) {
|
||||
var state = lastPlayerState;
|
||||
switch ((state.PlayState || {}).RepeatMode) {
|
||||
case 'RepeatNone':
|
||||
player.setRepeatMode('RepeatAll');
|
||||
break;
|
||||
case 'RepeatAll':
|
||||
player.setRepeatMode('RepeatOne');
|
||||
break;
|
||||
case 'RepeatOne':
|
||||
player.setRepeatMode('RepeatNone');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function bindEvents(page) {
|
||||
|
||||
$('.tabButton', page).on('click', function () {
|
||||
|
||||
var elem = $('.' + this.getAttribute('data-tab'), page);
|
||||
elem.siblings('.tabContent').hide();
|
||||
|
||||
elem.show();
|
||||
|
||||
$('.tabButton', page).removeClass('ui-btn-active');
|
||||
$(this).addClass('ui-btn-active');
|
||||
});
|
||||
|
||||
$('.chapterMenuOverlay', page).on('click', function () {
|
||||
|
||||
hideChapterMenu(page);
|
||||
});
|
||||
|
||||
$('.chapterMenu', page).on('click', '.chapterPosterItem', function () {
|
||||
|
||||
if (currentPlayer) {
|
||||
var ticks = this.getAttribute('data-positionticks') || '0';
|
||||
|
||||
currentPlayer.seek(parseInt(ticks));
|
||||
}
|
||||
|
||||
hideChapterMenu(page);
|
||||
});
|
||||
|
||||
$('.btnCommand,.btnToggleFullscreen', page).on('click', function () {
|
||||
|
||||
if (currentPlayer) {
|
||||
|
||||
if (this.classList.contains('repeatToggleButton')) {
|
||||
toggleRepeat(currentPlayer);
|
||||
} else {
|
||||
MediaController.sendCommand({
|
||||
Name: this.getAttribute('data-command')
|
||||
|
||||
}, currentPlayer);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.btnAudioTracks', page).on('click', function () {
|
||||
|
||||
if (currentPlayer && lastPlayerState && lastPlayerState.PlayState) {
|
||||
|
||||
var currentIndex = lastPlayerState.PlayState.AudioStreamIndex;
|
||||
showAudioMenu(page, this, lastPlayerState.NowPlayingItem, currentIndex);
|
||||
}
|
||||
});
|
||||
|
||||
$('.btnSubtitles', page).on('click', function () {
|
||||
|
||||
if (currentPlayer && lastPlayerState && lastPlayerState.PlayState) {
|
||||
|
||||
var currentIndex = lastPlayerState.PlayState.SubtitleStreamIndex;
|
||||
showSubtitleMenu(page, this, lastPlayerState.NowPlayingItem, currentIndex);
|
||||
}
|
||||
});
|
||||
|
||||
$('.btnChapters', page).on('click', function () {
|
||||
|
||||
if (currentPlayer && lastPlayerState) {
|
||||
|
||||
var currentPositionTicks = lastPlayerState.PlayState.PositionTicks;
|
||||
showChapterMenu(page, lastPlayerState.NowPlayingItem, currentPositionTicks);
|
||||
}
|
||||
});
|
||||
|
||||
$('.btnStop', page).on('click', function () {
|
||||
|
||||
if (currentPlayer) {
|
||||
currentPlayer.stop();
|
||||
}
|
||||
});
|
||||
|
||||
$('.btnPlay', page).on('click', function () {
|
||||
|
||||
if (currentPlayer) {
|
||||
currentPlayer.unpause();
|
||||
}
|
||||
});
|
||||
|
||||
$('.btnPause', page).on('click', function () {
|
||||
|
||||
if (currentPlayer) {
|
||||
currentPlayer.pause();
|
||||
}
|
||||
});
|
||||
|
||||
$('.btnNextTrack', page).on('click', function () {
|
||||
|
||||
if (currentPlayer) {
|
||||
currentPlayer.nextTrack();
|
||||
}
|
||||
});
|
||||
|
||||
$('.btnPreviousTrack', page).on('click', function () {
|
||||
|
||||
if (currentPlayer) {
|
||||
currentPlayer.previousTrack();
|
||||
}
|
||||
});
|
||||
|
||||
$('.nowPlayingPositionSlider', page).on('change', function () {
|
||||
|
||||
var value = this.value;
|
||||
|
||||
if (currentPlayer && lastPlayerState) {
|
||||
|
||||
var newPercent = parseFloat(value);
|
||||
var newPositionTicks = (newPercent / 100) * lastPlayerState.NowPlayingItem.RunTimeTicks;
|
||||
currentPlayer.seek(Math.floor(newPositionTicks));
|
||||
}
|
||||
});
|
||||
|
||||
$('.nowPlayingPositionSlider', page)[0]._setPinValue = function (value) {
|
||||
|
||||
var state = lastPlayerState;
|
||||
|
||||
if (!state || !state.NowPlayingItem || !state.NowPlayingItem.RunTimeTicks) {
|
||||
this.pinValue = '--:--';
|
||||
return;
|
||||
}
|
||||
|
||||
var ticks = state.NowPlayingItem.RunTimeTicks;
|
||||
ticks /= 100;
|
||||
ticks *= value;
|
||||
|
||||
this.pinValue = Dashboard.getDisplayTime(ticks);
|
||||
};
|
||||
|
||||
$(page).on('click', '.lnkPlayFromIndex', function () {
|
||||
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
MediaController.currentPlaylistIndex(index);
|
||||
loadPlaylist(page);
|
||||
|
||||
}).on('click', '.lnkRemoveFromPlaylist', function () {
|
||||
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
MediaController.removeFromPlaylist(index);
|
||||
loadPlaylist(page);
|
||||
});
|
||||
|
||||
Events.on(page, 'click', '.mediaItem', onListItemClick);
|
||||
}
|
||||
|
||||
function onPlaybackStart(e, state) {
|
||||
|
||||
var player = this;
|
||||
|
||||
player.beginPlayerUpdates();
|
||||
|
||||
onStateChanged.call(player, e, state);
|
||||
loadPlaylist($($.mobile.activePage)[0]);
|
||||
}
|
||||
|
||||
function onPlaybackStopped(e, state) {
|
||||
|
||||
var player = this;
|
||||
|
||||
player.endPlayerUpdates();
|
||||
|
||||
onStateChanged.call(player, e, {});
|
||||
loadPlaylist($($.mobile.activePage)[0]);
|
||||
}
|
||||
|
||||
var lastUpdateTime = 0;
|
||||
|
||||
function onStateChanged(e, state) {
|
||||
|
||||
if (e.type == 'positionchange') {
|
||||
// Try to avoid hammering the document with changes
|
||||
var now = new Date().getTime();
|
||||
if ((now - lastUpdateTime) < 700) {
|
||||
|
||||
return;
|
||||
}
|
||||
lastUpdateTime = now;
|
||||
}
|
||||
|
||||
updatePlayerState($($.mobile.activePage)[0], state);
|
||||
}
|
||||
|
||||
function showButton(button) {
|
||||
button.removeClass('hide');
|
||||
}
|
||||
|
||||
function hideButton(button) {
|
||||
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;
|
||||
|
||||
var item = state.NowPlayingItem;
|
||||
|
||||
var playerInfo = MediaController.getPlayerInfo();
|
||||
|
||||
var supportedCommands = playerInfo.supportedCommands;
|
||||
var playState = state.PlayState || {};
|
||||
|
||||
$('.btnToggleFullscreen', page).buttonEnabled(item && item.MediaType == 'Video' && supportedCommands.indexOf('ToggleFullscreen') != -1);
|
||||
|
||||
$('.btnAudioTracks', page).buttonEnabled(hasStreams(item, 'Audio') && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
|
||||
$('.btnSubtitles', page).buttonEnabled(hasStreams(item, 'Subtitle') && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
|
||||
|
||||
if (item && item.Chapters && item.Chapters.length && playState.CanSeek) {
|
||||
$('.btnChapters', page).buttonEnabled(true);
|
||||
|
||||
} else {
|
||||
$('.btnChapters', page).buttonEnabled(false);
|
||||
hideChapterMenu(page);
|
||||
}
|
||||
|
||||
$('.sendMessageElement', page).buttonEnabled(supportedCommands.indexOf('DisplayMessage') != -1);
|
||||
$('.typeTextElement', page).buttonEnabled(supportedCommands.indexOf('SendString') != -1);
|
||||
|
||||
$('.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);
|
||||
|
||||
if (playState.IsPaused) {
|
||||
|
||||
hideButton(btnPause);
|
||||
showButton(btnPlay);
|
||||
|
||||
} else {
|
||||
|
||||
showButton(btnPause);
|
||||
hideButton(btnPlay);
|
||||
}
|
||||
|
||||
var positionSlider = $('.nowPlayingPositionSlider', page)[0];
|
||||
|
||||
if (!positionSlider.dragging) {
|
||||
|
||||
if (item && item.RunTimeTicks) {
|
||||
|
||||
var pct = playState.PositionTicks / item.RunTimeTicks;
|
||||
pct *= 100;
|
||||
|
||||
positionSlider.value = pct;
|
||||
|
||||
} else {
|
||||
|
||||
positionSlider.value = 0;
|
||||
}
|
||||
|
||||
positionSlider.disabled = !playState.CanSeek;
|
||||
}
|
||||
|
||||
if (playState.PositionTicks == null) {
|
||||
$('.positionTime', page).html('--:--');
|
||||
} else {
|
||||
$('.positionTime', page).html(Dashboard.getDisplayTime(playState.PositionTicks));
|
||||
}
|
||||
|
||||
if (item && item.RunTimeTicks != null) {
|
||||
$('.runtime', page).html(Dashboard.getDisplayTime(item.RunTimeTicks));
|
||||
} else {
|
||||
$('.runtime', page).html('--:--');
|
||||
}
|
||||
|
||||
if (item && item.MediaType == 'Video') {
|
||||
$('.videoButton', page).css('visibility', 'visible');
|
||||
} else {
|
||||
$('.videoButton', page).css('visibility', 'hidden');
|
||||
}
|
||||
|
||||
if (playerInfo.isLocalPlayer && AppInfo.hasPhysicalVolumeButtons) {
|
||||
$('.volumeButton', page).css('visibility', 'hidden');
|
||||
} else {
|
||||
$('.volumeButton', page).css('visibility', 'visible');
|
||||
}
|
||||
|
||||
if (item && item.MediaType == 'Audio') {
|
||||
$('.buttonsRow2', page).hide();
|
||||
} else {
|
||||
$('.buttonsRow2', page).show();
|
||||
}
|
||||
|
||||
var toggleRepeatButton = page.querySelector('.repeatToggleButton');
|
||||
|
||||
if (playState.RepeatMode == 'RepeatAll') {
|
||||
toggleRepeatButton.icon = "repeat";
|
||||
toggleRepeatButton.classList.add('nowPlayingPageRepeatActive');
|
||||
}
|
||||
else if (playState.RepeatMode == 'RepeatOne') {
|
||||
toggleRepeatButton.icon = "repeat-one";
|
||||
toggleRepeatButton.classList.add('nowPlayingPageRepeatActive');
|
||||
} else {
|
||||
toggleRepeatButton.icon = "repeat";
|
||||
toggleRepeatButton.classList.remove('nowPlayingPageRepeatActive');
|
||||
}
|
||||
|
||||
updateNowPlayingInfo(page, state);
|
||||
}
|
||||
|
||||
var currentImgUrl;
|
||||
function updateNowPlayingInfo(page, state) {
|
||||
|
||||
var item = state.NowPlayingItem;
|
||||
var displayName = item ? MediaController.getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '';
|
||||
|
||||
$('.nowPlayingPageTitle', page).html(displayName);
|
||||
|
||||
if (displayName.length > 0) {
|
||||
$('.nowPlayingPageTitle', page).removeClass('hide');
|
||||
} else {
|
||||
$('.nowPlayingPageTitle', page).addClass('hide');
|
||||
}
|
||||
|
||||
var url;
|
||||
var backdropUrl = null;
|
||||
|
||||
if (!item) {
|
||||
}
|
||||
else if (item.PrimaryImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
height: 300,
|
||||
tag: item.PrimaryImageTag
|
||||
});
|
||||
}
|
||||
else if (item.BackdropImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(item.BackdropItemId, {
|
||||
type: "Backdrop",
|
||||
height: 300,
|
||||
tag: item.BackdropImageTag,
|
||||
index: 0
|
||||
});
|
||||
|
||||
} else if (item.ThumbImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(item.ThumbImageItemId, {
|
||||
type: "Thumb",
|
||||
height: 300,
|
||||
tag: item.ThumbImageTag
|
||||
});
|
||||
}
|
||||
|
||||
if (url == currentImgUrl) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item && item.BackdropImageTag) {
|
||||
|
||||
backdropUrl = ApiClient.getScaledImageUrl(item.BackdropItemId, {
|
||||
type: "Backdrop",
|
||||
maxWidth: $(window).width(),
|
||||
tag: item.BackdropImageTag,
|
||||
index: 0
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
setImageUrl(page, url);
|
||||
|
||||
if (item) {
|
||||
|
||||
// This should be outside of the IF
|
||||
// But for now, if you change songs but keep the same artist, the backdrop will flicker because in-between songs it clears out the image
|
||||
if (!browserInfo.mobile) {
|
||||
// Exclude from mobile because it just doesn't perform well
|
||||
Backdrops.setBackdropUrl(page, backdropUrl);
|
||||
}
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), item.Id).then(function (fullItem) {
|
||||
page.querySelector('.nowPlayingPageUserDataButtons').innerHTML = LibraryBrowser.getUserDataIconsHtml(fullItem, false);
|
||||
});
|
||||
} else {
|
||||
page.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
function setImageUrl(page, url) {
|
||||
currentImgUrl = url;
|
||||
|
||||
$('.nowPlayingPageImage', page).html(url ? '<img src="' + url + '" />' : '');
|
||||
}
|
||||
|
||||
function updateSupportedCommands(page, commands) {
|
||||
|
||||
$('.btnCommand', page).each(function () {
|
||||
|
||||
$(this).buttonEnabled(commands.indexOf(this.getAttribute('data-command')) != -1);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function releaseCurrentPlayer() {
|
||||
|
||||
if (currentPlayer) {
|
||||
|
||||
Events.off(currentPlayer, 'playbackstart', onPlaybackStart);
|
||||
Events.off(currentPlayer, 'playbackstop', onPlaybackStopped);
|
||||
Events.off(currentPlayer, 'volumechange', onStateChanged);
|
||||
Events.off(currentPlayer, 'playstatechange', onStateChanged);
|
||||
Events.off(currentPlayer, 'positionchange', onStateChanged);
|
||||
|
||||
currentPlayer.endPlayerUpdates();
|
||||
currentPlayer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function bindToPlayer(page, player) {
|
||||
|
||||
releaseCurrentPlayer();
|
||||
|
||||
currentPlayer = player;
|
||||
|
||||
player.getPlayerState().then(function (state) {
|
||||
|
||||
if (state.NowPlayingItem) {
|
||||
player.beginPlayerUpdates();
|
||||
}
|
||||
|
||||
onStateChanged.call(player, { type: 'init' }, state);
|
||||
});
|
||||
|
||||
Events.on(player, 'playbackstart', onPlaybackStart);
|
||||
Events.on(player, 'playbackstop', onPlaybackStopped);
|
||||
Events.on(player, 'volumechange', onStateChanged);
|
||||
Events.on(player, 'playstatechange', onStateChanged);
|
||||
Events.on(player, 'positionchange', onStateChanged);
|
||||
|
||||
var playerInfo = MediaController.getPlayerInfo();
|
||||
|
||||
var supportedCommands = playerInfo.supportedCommands;
|
||||
|
||||
updateSupportedCommands(page, supportedCommands);
|
||||
}
|
||||
|
||||
function loadPlaylist(page) {
|
||||
|
||||
var html = '';
|
||||
|
||||
//ApiClient.getItems(Dashboard.getCurrentUserId(), {
|
||||
|
||||
// SortBy: "SortName",
|
||||
// SortOrder: "Ascending",
|
||||
// IncludeItemTypes: "Audio",
|
||||
// Recursive: true,
|
||||
// Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,SyncInfo",
|
||||
// StartIndex: 0,
|
||||
// ImageTypeLimit: 1,
|
||||
// EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
||||
// Limit: 100
|
||||
|
||||
//}).then(function (result) {
|
||||
|
||||
// html += LibraryBrowser.getListViewHtml({
|
||||
// items: result.Items,
|
||||
// smallIcon: true
|
||||
// });
|
||||
|
||||
// $(".playlist", page).html(html).lazyChildren();
|
||||
//});
|
||||
|
||||
html += LibraryBrowser.getListViewHtml({
|
||||
items: MediaController.playlist(),
|
||||
smallIcon: true
|
||||
});
|
||||
|
||||
var itemsContainer = page.querySelector('.playlist');
|
||||
itemsContainer.innerHTML = html;
|
||||
|
||||
var index = MediaController.currentPlaylistIndex();
|
||||
|
||||
if (index != -1) {
|
||||
|
||||
var item = itemsContainer.querySelectorAll('.listItem')[index];
|
||||
if (item) {
|
||||
var img = item.querySelector('.listviewImage');
|
||||
|
||||
img.classList.remove('lazy');
|
||||
img.classList.add('playlistIndexIndicatorImage');
|
||||
}
|
||||
}
|
||||
|
||||
ImageLoader.lazyChildren(itemsContainer);
|
||||
}
|
||||
|
||||
function onListItemClick(e) {
|
||||
|
||||
var info = LibraryBrowser.getListItemInfo(this);
|
||||
|
||||
MediaController.currentPlaylistIndex(info.index);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function updateCastIcon() {
|
||||
|
||||
var info = MediaController.getPlayerInfo();
|
||||
|
||||
if (info.isLocalPlayer) {
|
||||
|
||||
$('.nowPlayingCastIcon').each(function () {
|
||||
this.icon = 'cast';
|
||||
});
|
||||
$('.nowPlayingSelectedPlayer').html('');
|
||||
|
||||
} else {
|
||||
|
||||
$('.nowPlayingCastIcon').each(function () {
|
||||
this.icon = 'cast-connected';
|
||||
});
|
||||
|
||||
$('.nowPlayingSelectedPlayer').html((info.deviceName || info.name));
|
||||
}
|
||||
}
|
||||
|
||||
function onPlayerChange() {
|
||||
bindToPlayer($($.mobile.activePage)[0], MediaController.getCurrentPlayer());
|
||||
}
|
||||
|
||||
function showSlideshowMenu(page) {
|
||||
require(['scripts/slideshow'], function () {
|
||||
SlideShow.showMenu();
|
||||
});
|
||||
}
|
||||
|
||||
pageIdOn('pageinit', "nowPlayingPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
Dashboard.importCss('css/nowplaying.css');
|
||||
bindEvents(page);
|
||||
|
||||
$('.sendMessageForm').off('submit', NowPlayingPage.onMessageSubmit).on('submit', NowPlayingPage.onMessageSubmit);
|
||||
$('.typeTextForm').off('submit', NowPlayingPage.onSendStringSubmit).on('submit', NowPlayingPage.onSendStringSubmit);
|
||||
|
||||
$('.requiresJqmCreate', this).trigger('create');
|
||||
|
||||
$('.btnSlideshow').on('click', function () {
|
||||
showSlideshowMenu(page);
|
||||
require(['components/remotecontrol'], function (remotecontrolFactory) {
|
||||
page.remoteControl = new remotecontrolFactory();
|
||||
page.remoteControl.init(page.querySelector('.remoteControlContent'));
|
||||
page.remoteControl.onShow();
|
||||
page.remoteControlInitComplete = true;
|
||||
});
|
||||
|
||||
var tabs = page.querySelector('paper-tabs');
|
||||
|
||||
if (AppInfo.enableNowPlayingPageBottomTabs) {
|
||||
tabs.classList.remove('hide');
|
||||
page.querySelector('.libraryViewNav').classList.add('hide');
|
||||
} else {
|
||||
tabs.classList.add('hide');
|
||||
page.querySelector('.libraryViewNav').classList.remove('hide');
|
||||
}
|
||||
|
||||
tabs.classList.add('bottom');
|
||||
tabs.alignBottom = true;
|
||||
LibraryBrowser.configureSwipeTabs(page, tabs, page.querySelector('neon-animated-pages'));
|
||||
|
||||
$(tabs).on('iron-select', function () {
|
||||
page.querySelector('neon-animated-pages').selected = this.selected;
|
||||
});
|
||||
|
||||
$(page.querySelector('neon-animated-pages')).on('iron-select', function () {
|
||||
var btn = page.querySelector('.libraryViewNav a.ui-btn-active');
|
||||
|
||||
if (btn) {
|
||||
btn.classList.remove('ui-btn-active');
|
||||
}
|
||||
|
||||
page.querySelector('.libraryViewNav a[data-index=\'' + this.selected + '\']').classList.add('ui-btn-active');
|
||||
});
|
||||
|
||||
$(page.querySelectorAll('.libraryViewNav a')).on('click', function () {
|
||||
var newSelected = this.getAttribute('data-index');
|
||||
|
||||
if (AppInfo.enableNowPlayingPageBottomTabs) {
|
||||
tabs.selected = newSelected;
|
||||
} else {
|
||||
page.querySelector('neon-animated-pages').selected = newSelected;
|
||||
}
|
||||
});
|
||||
|
||||
Events.on(MediaController, 'playerchange', function () {
|
||||
updateCastIcon(page);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
pageIdOn('pagebeforeshow', "nowPlayingPage", function () {
|
||||
|
||||
$(document.body).addClass('hiddenViewMenuBar').addClass('hiddenNowPlayingBar');
|
||||
var page = this;
|
||||
|
||||
currentImgUrl = null;
|
||||
document.body.classList.add('hiddenViewMenuBar');
|
||||
document.body.classList.add('hiddenNowPlayingBar');
|
||||
|
||||
Events.on(MediaController, 'playerchange', onPlayerChange);
|
||||
if (page.remoteControl) {
|
||||
|
||||
bindToPlayer(page, MediaController.getCurrentPlayer());
|
||||
|
||||
loadPlaylist(page);
|
||||
|
||||
var tab = window.location.hash;
|
||||
var selected = tab == '#playlist' ? 2 : 0;;
|
||||
|
||||
this.querySelector('paper-tabs').selected = selected;
|
||||
|
||||
if (AppInfo.enableNowPlayingPageBottomTabs) {
|
||||
this.querySelector('paper-tabs').selected = selected;
|
||||
} else {
|
||||
|
||||
// hack alert. doing this because the neon elements don't seem to be initialized yet
|
||||
setTimeout(function () {
|
||||
|
||||
page.querySelector('neon-animated-pages').selected = selected;
|
||||
}, 1000);
|
||||
if (!page.remoteControlInitComplete) {
|
||||
page.remoteControlInitComplete = true;
|
||||
} else {
|
||||
page.remoteControl.onShow();
|
||||
}
|
||||
}
|
||||
|
||||
updateCastIcon(page);
|
||||
|
||||
});
|
||||
|
||||
pageIdOn('pagebeforehide', "nowPlayingPage", function () {
|
||||
|
||||
releaseCurrentPlayer();
|
||||
var page = this;
|
||||
|
||||
Events.off(MediaController, 'playerchange', onPlayerChange);
|
||||
|
||||
lastPlayerState = null;
|
||||
$(document.body).removeClass('hiddenViewMenuBar').removeClass('hiddenNowPlayingBar');
|
||||
if (page.remoteControl) {
|
||||
page.remoteControl.destroy();
|
||||
}
|
||||
document.body.classList.remove('hiddenViewMenuBar');
|
||||
document.body.classList.remove('hiddenNowPlayingBar');
|
||||
});
|
||||
|
||||
window.NowPlayingPage = {
|
||||
|
||||
onMessageSubmit: function () {
|
||||
|
||||
var form = this;
|
||||
|
||||
MediaController.sendCommand({
|
||||
Name: 'DisplayMessage',
|
||||
Arguments: {
|
||||
|
||||
Header: $('#txtMessageTitle', form).val(),
|
||||
Text: $('#txtMessageText', form).val()
|
||||
}
|
||||
|
||||
}, currentPlayer);
|
||||
|
||||
$('input', form).val('');
|
||||
Dashboard.alert('Message sent.');
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
onSendStringSubmit: function () {
|
||||
|
||||
var form = this;
|
||||
|
||||
MediaController.sendCommand({
|
||||
Name: 'SendString',
|
||||
Arguments: {
|
||||
|
||||
String: $('#txtTypeText', form).val()
|
||||
}
|
||||
|
||||
}, currentPlayer);
|
||||
|
||||
$('input', form).val('');
|
||||
Dashboard.alert('Text sent.');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(window, document, jQuery, setTimeout, clearTimeout);
|
||||
Loading…
Add table
Add a link
Reference in a new issue