mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
stub out remote control page
This commit is contained in:
Luke Pulverenti
parent
2189c2e40f
commit
d619275f90
3 changed files with 164 additions and 3 deletions
|
|
@ -7,7 +7,7 @@
|
||||||
padding-top: 48px !important;
|
padding-top: 48px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryPage:not(.metadataEditorPage):not(#indexPage):not(#boxsetsPage):not(#itemListPage) {
|
.libraryPage:not(.metadataEditorPage):not(#indexPage):not(#boxsetsPage):not(#itemListPage):not(.nowPlayingPage) {
|
||||||
padding-top: 91px !important;
|
padding-top: 91px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -174,7 +174,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ehsContent {
|
.ehsContent {
|
||||||
max-width: 620px;
|
max-width: 640px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,52 @@
|
||||||
<title>${TitleMediaBrowser}</title>
|
<title>${TitleMediaBrowser}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="nowPlayingPage" data-role="page" class="page libraryPage" data-theme="b">
|
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage" data-theme="b">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
|
|
||||||
|
<div data-role="controlgroup" data-type="horizontal" data-mini="true" style="text-align: center;">
|
||||||
|
<input type="radio" name="radioNowPlayingTab" class="radioTabButton" id="radioNowPlaying" value="tabNowPlaying">
|
||||||
|
<label for="radioNowPlaying">${TabNowPlaying}</label>
|
||||||
|
<input type="radio" name="radioNowPlayingTab" class="radioTabButton" id="radioNavigation" value="tabNavigation">
|
||||||
|
<label for="radioNavigation">${TabNavigation}</label>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div class="tabNowPlaying tabContent"></div>
|
||||||
|
|
||||||
|
<div class="tabNavigation tabContent" style="text-align: center;">
|
||||||
|
|
||||||
|
<div data-role="controlgroup" data-type="horizontal">
|
||||||
|
<button data-icon="arrow-u" data-inline="true" data-iconpos="notext" title="${ButtonArrowUp}" class="btnArrowUp btnCommand" data-command="MoveUp">${ButtonArrowUp}</button>
|
||||||
|
</div>
|
||||||
|
<div data-role="controlgroup" data-type="horizontal">
|
||||||
|
<button data-icon="arrow-l" data-inline="true" data-iconpos="notext" title="${ButtonArrowLeft}" class="btnArrowLeft btnCommand" data-command="MoveLeft">${ButtonArrowLeft}</button>
|
||||||
|
<button data-icon="check" data-inline="true" data-iconpos="notext" title="${ButtonOk}" class="btnOk btnCommand" data-command="Select">${ButtonOk}</button>
|
||||||
|
<button data-icon="arrow-r" data-inline="true" data-iconpos="notext" title="${ButtonArrowRight}" class="btnArrowRight btnCommand" data-command="MoveRight">${ButtonArrowRight}</button>
|
||||||
|
</div>
|
||||||
|
<div data-role="controlgroup" data-type="horizontal">
|
||||||
|
<button data-icon="arrow-d" data-inline="true" data-iconpos="notext" title="${ButtonArrowDown}" class="btnArrowDown btnCommand" data-command="MoveDown">${ButtonArrowDown}</button>
|
||||||
|
</div>
|
||||||
|
<div data-role="controlgroup" data-type="horizontal">
|
||||||
|
<button data-icon="back" data-inline="true" data-iconpos="notext" title="${ButtonBack}" class="btnBack btnCommand" data-command="Back">${ButtonBack}</button>
|
||||||
|
<button data-icon="info" data-inline="true" data-iconpos="notext" title="${ButtonInfo}" class="btnInfo btnCommand" data-command="ToggleContextMenu">${ButtonInfo}</button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div data-role="controlgroup" data-type="horizontal">
|
||||||
|
<button data-icon="home" data-inline="true" data-iconpos="notext" title="${ButtonHome}" class="btnGoHome btnCommand" data-command="GoHome">${ButtonHome}</button>
|
||||||
|
<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>
|
||||||
|
<button data-icon="search" data-inline="true" data-iconpos="notext" title="${ButtonSearch}" class="btnShowSearch btnCommand" data-command="GoToSearch">${ButtonSearch}</button>
|
||||||
|
</div>
|
||||||
|
<div data-role="controlgroup" data-type="horizontal">
|
||||||
|
<button data-icon="gear" data-inline="true" data-iconpos="notext" title="${ButtonSettings}" class="bthShowSettings btnCommand" data-command="GoToSettings">${ButtonSettings}</button>
|
||||||
|
<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>
|
||||||
|
<button data-icon="camera" data-inline="true" data-iconpos="notext" title="${ButtonTakeScreenshot}" class="btnScreenshot btnCommand" data-command="TakeScreenshot">${ButtonTakeScreenshot}</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
118
dashboard-ui/scripts/nowplayingpage.js
Normal file
118
dashboard-ui/scripts/nowplayingpage.js
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
(function (window, document, $, setTimeout, clearTimeout) {
|
||||||
|
|
||||||
|
var currentPlayer;
|
||||||
|
|
||||||
|
function bindEvents(page) {
|
||||||
|
|
||||||
|
$('.radioTabButton', page).on('change', function () {
|
||||||
|
|
||||||
|
var elem = $('.' + this.value, page);
|
||||||
|
elem.siblings('.tabContent').hide();
|
||||||
|
|
||||||
|
elem.show();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.btnCommand', page).on('click', function () {
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPlaybackStart(e, state) {
|
||||||
|
|
||||||
|
var player = this;
|
||||||
|
|
||||||
|
player.beginPlayerUpdates();
|
||||||
|
|
||||||
|
onStateChanged.call(player, e, state);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPlaybackStopped(e, state) {
|
||||||
|
|
||||||
|
var player = this;
|
||||||
|
|
||||||
|
player.endPlayerUpdates();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onStateChanged(e, state) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSupportedCommands(page, commands) {
|
||||||
|
|
||||||
|
$('.btnCommand', page).each(function () {
|
||||||
|
|
||||||
|
$(this).buttonEnabled(commands.indexOf(this.getAttribute('data-command')) != -1);
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function releaseCurrentPlayer() {
|
||||||
|
|
||||||
|
if (currentPlayer) {
|
||||||
|
|
||||||
|
$(currentPlayer).off('.nowplayingpage');
|
||||||
|
currentPlayer.endPlayerUpdates();
|
||||||
|
currentPlayer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindToPlayer(page, player) {
|
||||||
|
|
||||||
|
releaseCurrentPlayer();
|
||||||
|
|
||||||
|
currentPlayer = player;
|
||||||
|
|
||||||
|
player.getPlayerState().done(function (state) {
|
||||||
|
|
||||||
|
if (state.itemName) {
|
||||||
|
player.beginPlayerUpdates();
|
||||||
|
}
|
||||||
|
|
||||||
|
onStateChanged.call(player, { type: 'init' }, state);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(player).on('playbackstart.nowplayingpage', onPlaybackStart)
|
||||||
|
.on('playbackstop.nowplayingpage', onPlaybackStopped)
|
||||||
|
.on('volumechange.nowplayingpage', onStateChanged)
|
||||||
|
.on('playstatechange.nowplayingpage', onStateChanged)
|
||||||
|
.on('positionchange.nowplayingpage', onStateChanged);
|
||||||
|
|
||||||
|
var playerInfo = MediaController.getPlayerInfo();
|
||||||
|
|
||||||
|
var supportedCommands = playerInfo.supportedCommands;
|
||||||
|
|
||||||
|
updateSupportedCommands(page, supportedCommands);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).on('pageinit', "#nowPlayingPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
bindEvents(page);
|
||||||
|
|
||||||
|
}).on('pageshow', "#nowPlayingPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
$('.radioTabButton:first', page).checked(true).checkboxradio('refresh').trigger('change');
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
$(MediaController).on('playerchange.nowplayingpage', function () {
|
||||||
|
|
||||||
|
bindToPlayer(page, MediaController.getCurrentPlayer());
|
||||||
|
});
|
||||||
|
|
||||||
|
bindToPlayer(page, MediaController.getCurrentPlayer());
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}).on('pagehide', "#nowPlayingPage", function () {
|
||||||
|
|
||||||
|
releaseCurrentPlayer();
|
||||||
|
|
||||||
|
$(MediaController).off('playerchange.nowplayingpage');
|
||||||
|
});
|
||||||
|
|
||||||
|
})(window, document, jQuery, setTimeout, clearTimeout);
|
||||||
Loading…
Add table
Add a link
Reference in a new issue