mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update now playing page
This commit is contained in:
Luke Pulverenti
parent
7fb59cc969
commit
e33e5875cf
10 changed files with 148 additions and 197 deletions
|
|
@ -14,144 +14,142 @@
|
|||
<paper-fab mini icon="cast" class="blue nowPlayingCastIcon" onclick="MediaController.showPlayerSelection();" style="vertical-align:middle;"></paper-fab>
|
||||
</div>
|
||||
|
||||
<template is="dom-bind" id="scope">
|
||||
<neon-animated-pages selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
|
||||
<neon-animatable>
|
||||
<div style="text-align:center;padding-bottom:100px;">
|
||||
<neon-animated-pages selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
|
||||
<neon-animatable>
|
||||
<div style="text-align:center;padding-bottom:100px;">
|
||||
|
||||
<div class="nowPlayingPageTitle">
|
||||
<div class="itemName" style="line-height: normal;"></div>
|
||||
<div class="nowPlayingPageTitle">
|
||||
<div class="itemName" style="line-height: normal;"></div>
|
||||
</div>
|
||||
|
||||
<div class="nowPlayingInfoMetadata">
|
||||
<div class="nowPlayingPageImage" style="margin: 1em 0;"></div>
|
||||
|
||||
<div class="nowPlayingTimeContainer">
|
||||
<div>
|
||||
<div class="positionSliderContainer sliderContainer requiresJqmCreate" style="margin: 0 auto;">
|
||||
<input type="range" style="display: none;" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" data-mini="true" data-theme="a" data-highlight="true" />
|
||||
</div>
|
||||
</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="nowPlayingInfoMetadata">
|
||||
<div class="nowPlayingPageImage" style="margin: 1em 0;"></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>
|
||||
<paper-fab icon="volume-up" class="btnCommand subdued" title="${ButtonVolumeUp}" data-command="VolumeUp"></paper-fab>
|
||||
<paper-fab icon="volume-off" class="btnCommand subdued" title="${ButtonMute}" data-command="ToggleMute"></paper-fab>
|
||||
<paper-fab icon="info" class="btnCommand videoButton subdued" title="${ButtonOsd}" data-command="ToggleOsdMenu"></paper-fab>
|
||||
<paper-fab icon="fullscreen" class="btnToggleFullscreen videoButton btnPlayStateCommand subdued" title="${ButtonFullscreen}" data-command="ToggleFullscreen"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="volume-down" class="btnCommand subdued" title="${ButtonVolumeDown}" data-command="VolumeDown"></paper-fab>
|
||||
<paper-fab icon="audiotrack" class="btnAudioTracks videoButton btnPlayStateCommand subdued" title="${ButtonAudioTracks}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="subtitles" 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>
|
||||
</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>
|
||||
|
||||
<div class="nowPlayingTimeContainer">
|
||||
<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>
|
||||
<div class="positionSliderContainer sliderContainer" style="margin: 0 auto;">
|
||||
<input type="range" style="display: none;" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" data-mini="true" data-theme="a" data-highlight="true" />
|
||||
</div>
|
||||
<label for="txtMessageTitle">${LabelMessageTitle}</label>
|
||||
<input class="sendMessageElement" type="text" id="txtMessageTitle" required="required" />
|
||||
</div>
|
||||
<div style="text-align:left;">
|
||||
<div class="positionTime" style="float:left;"></div>
|
||||
<div class="runtime" style="float: right;"></div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="txtMessageText">${LabelMessageText}</label>
|
||||
<input class="sendMessageElement" type="text" id="txtMessageText" required="required" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<button class="sendMessageElement" type="submit" data-icon="mail">${ButtonSend}</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<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>
|
||||
<paper-fab icon="volume-up" class="btnCommand subdued" title="${ButtonVolumeUp}" data-command="VolumeUp"></paper-fab>
|
||||
<paper-fab icon="volume-off" class="btnCommand subdued" title="${ButtonMute}" data-command="ToggleMute"></paper-fab>
|
||||
<paper-fab icon="info" class="btnCommand videoButton subdued" title="${ButtonOsd}" data-command="ToggleOsdMenu"></paper-fab>
|
||||
<paper-fab icon="fullscreen" class="btnToggleFullscreen videoButton btnPlayStateCommand subdued" title="${ButtonFullscreen}" data-command="ToggleFullscreen"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="volume-down" class="btnCommand subdued" title="${ButtonVolumeDown}" data-command="VolumeDown"></paper-fab>
|
||||
<paper-fab icon="audiotrack" class="btnAudioTracks videoButton btnPlayStateCommand subdued" title="${ButtonAudioTracks}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="subtitles" 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>
|
||||
</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>
|
||||
<div data-role="collapsible">
|
||||
<h2>${HeaderTypeText}</h2>
|
||||
<div style="text-align: left;">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!--<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" style="margin: 2em auto 0; padding: 0 1em 100px;">
|
||||
</div>
|
||||
</neon-animatable>
|
||||
<neon-animatable>
|
||||
<div class="playlist itemsContainer" style="max-width:800px;margin: 1.5em auto 0;">
|
||||
</div>
|
||||
</neon-animatable>
|
||||
</neon-animated-pages>
|
||||
|
||||
<div data-role="collapsible">
|
||||
<h2>${HeaderSendMessage}</h2>
|
||||
<div style="text-align: left;">
|
||||
<paper-tabs selected="{{selected}}" style="position:fixed;bottom:0;left:0;right:0;" alignbottom>
|
||||
|
||||
<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>
|
||||
<paper-tab>${TabNowPlaying}</paper-tab>
|
||||
<paper-tab>${TabControls}</paper-tab>
|
||||
<paper-tab>${TabPlaylist}</paper-tab>
|
||||
|
||||
</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: 1.5em auto 0;">
|
||||
</div>
|
||||
</neon-animatable>
|
||||
</neon-animated-pages>
|
||||
|
||||
<paper-tabs selected="{{selected}}" style="position:fixed;bottom:0;left:0;right:0;" alignbottom>
|
||||
|
||||
<paper-tab>${TabNowPlaying}</paper-tab>
|
||||
<paper-tab>${TabControls}</paper-tab>
|
||||
<paper-tab>${TabPlaylist}</paper-tab>
|
||||
|
||||
</paper-tabs>
|
||||
</template>
|
||||
</paper-tabs>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue