cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

rework now playing screen

Browse Source
This commit is contained in:
Luke Pulverenti 2017-01-17 13:00:19 -05:00
parent b614bbcf09
commit bb816420e7
14 changed files with 448 additions and 516 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard-ui/bower_components/emby-webcomponents/backdrop/backdrop.js vendored
View File

@ -294,7 +294,7 @@
currentRotationIndex = -1;
if (images.length > 1 && enableImageRotation !== false && enableRotation()) {
rotationInterval = setInterval(onRotationInterval, 20000);
rotationInterval = setInterval(onRotationInterval, 24000);
}
onRotationInterval();
}

22
dashboard-ui/bower_components/emby-webcomponents/chromecastplayer.js vendored
View File

@ -976,15 +976,25 @@
return Promise.resolve(self.getPlayerStateInternal() || {});
};
function normalizePrimaryImage(state) {
function normalizeImages(state) {
if (state && state.NowPlayingItem) {
if (!state.NowPlayingItem.ImageTags || !state.NowPlayingItem.ImageTags.Primary) {
if (state.NowPlayingItem.PrimaryImageTag) {
state.NowPlayingItem.ImageTags = state.NowPlayingItem.ImageTags || {};
state.NowPlayingItem.ImageTags.Primary = state.NowPlayingItem.PrimaryImageTag;
var item = state.NowPlayingItem;
if (!item.ImageTags || !item.ImageTags.Primary) {
if (item.PrimaryImageTag) {
item.ImageTags = item.ImageTags || {};
item.ImageTags.Primary = item.PrimaryImageTag;
}
}
if (item.BackdropImageTag && item.BackdropItemId === item.Id) {
item.BackdropImageTags = [item.BackdropImageTag];
}
if (item.BackdropImageTag && item.BackdropItemId !== item.Id) {
item.ParentBackdropImageTags = [item.BackdropImageTag];
item.ParentBackdropItemId = item.BackdropItemId;
}
}
}
@ -1000,7 +1010,7 @@
data = data || self.lastPlayerData;
self.lastPlayerData = data;
normalizePrimaryImage(data);
normalizeImages(data);
//console.log(JSON.stringify(data));

39
dashboard-ui/bower_components/emby-webcomponents/playback/playbackmanager.js vendored
View File

@ -100,6 +100,7 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
return;
}
setCurrentPlayerInternal(null, null);
return;
}
if (typeof (player) === 'string') {
@ -244,16 +245,21 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
self.removeActivePlayer = function (name) {
if (self.getPlayerInfo().name === name) {
self.setDefaultPlayerActive();
var playerInfo = self.getPlayerInfo();
if (playerInfo) {
if (playerInfo.name === name) {
self.setDefaultPlayerActive();
}
}
};
self.removeActiveTarget = function (id) {
if (self.getPlayerInfo().id === id) {
self.setDefaultPlayerActive();
var playerInfo = self.getPlayerInfo();
if (playerInfo) {
if (playerInfo.id === id) {
self.setDefaultPlayerActive();
}
}
};
@ -261,6 +267,10 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
var playerInfo = self.getPlayerInfo();
if (!playerInfo) {
return;
}
if (playerInfo.supportedCommands.indexOf('EndSession') !== -1) {
require(['dialog'], function (dialog) {
@ -2205,12 +2215,7 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
}
}
// Gets or sets the current playlist index
self.currentPlaylistIndex = function (i) {
if (i == null) {
return currentPlaylistIndex;
}
self.setCurrentPlaylistIndex = function (i) {
var newItem = playlist[i];
@ -2219,10 +2224,15 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
});
playInternal(newItem, playOptions, function () {
self.setPlaylistState(i);
currentPlaylistIndex = i;
});
};
self.getCurrentPlaylistIndex = function (i) {
return currentPlaylistIndex;
};
self.setRepeatMode = function (value, player) {
player = player || currentPlayer;
@ -2494,6 +2504,11 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
state.nextMediaType = nextMediaType;
state.nextItem = playbackStopInfo.nextItem;
if (!nextItem) {
playlist = [];
currentPlaylistIndex = -1;
}
events.trigger(player, 'playbackstop', [state]);
events.trigger(self, 'playbackstop', [playbackStopInfo]);

22
dashboard-ui/bower_components/emby-webcomponents/sessionplayer.js vendored
View File

@ -423,15 +423,25 @@
return session;
}
function normalizePrimaryImage(state) {
function normalizeImages(state) {
if (state && state.NowPlayingItem) {
if (!state.NowPlayingItem.ImageTags || !state.NowPlayingItem.ImageTags.Primary) {
if (state.NowPlayingItem.PrimaryImageTag) {
state.NowPlayingItem.ImageTags = state.NowPlayingItem.ImageTags || {};
state.NowPlayingItem.ImageTags.Primary = state.NowPlayingItem.PrimaryImageTag;
var item = state.NowPlayingItem;
if (!item.ImageTags || !item.ImageTags.Primary) {
if (item.PrimaryImageTag) {
item.ImageTags = item.ImageTags || {};
item.ImageTags.Primary = item.PrimaryImageTag;
}
}
if (item.BackdropImageTag && item.BackdropItemId === item.Id) {
item.BackdropImageTags = [item.BackdropImageTag];
}
if (item.BackdropImageTag && item.BackdropItemId !== item.Id) {
item.ParentBackdropImageTags = [item.BackdropImageTag];
item.ParentBackdropItemId = item.BackdropItemId;
}
}
}
@ -439,7 +449,7 @@
var state = getPlayerState(session);
normalizePrimaryImage(state);
normalizeImages(state);
self.lastPlayerData = state;

2
dashboard-ui/bower_components/emby-webcomponents/shortcuts.js vendored
View File

@ -288,7 +288,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
}
else if (action === 'setplaylistindex') {
playbackManager.currentPlaylistIndex(parseInt(card.getAttribute('data-index')));
playbackManager.setCurrentPlaylistIndex(parseInt(card.getAttribute('data-index')));
}
else if (action === 'record') {

240
dashboard-ui/components/remotecontrol.js
View File

@ -1,4 +1,4 @@
define(['browser', 'datetime', 'libraryBrowser', 'listView', 'userdataButtons', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'cardStyle'], function (browser, datetime, libraryBrowser, listView, userdataButtons, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost) {
define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'userdataButtons', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'cardStyle'], function (browser, datetime, backdrop, libraryBrowser, listView, userdataButtons, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize) {
'use strict';
function showSlideshowMenu(context) {
@ -65,7 +65,7 @@
menuItems.unshift({
id: -1,
name: Globalize.translate('ButtonOff'),
name: globalize.translate('ButtonOff'),
selected: currentIndex == null
});
@ -188,45 +188,28 @@
}) : null;
var backdropUrl = null;
if (url === currentImgUrl) {
return;
}
if (item && item.BackdropImageTag) {
backdropUrl = ApiClient.getScaledImageUrl(item.BackdropItemId, {
type: "Backdrop",
maxHeight: 300,
tag: item.BackdropImageTag,
index: 0
});
}
setImageUrl(context, 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 (!browser.slow) {
// Exclude from mobile because it just doesn't perform well
require(['backdrop'], function (backdrop) {
backdrop.setBackdrop(backdropUrl);
});
}
backdrop.setBackdrops([item]);
ApiClient.getItem(Dashboard.getCurrentUserId(), item.Id).then(function (fullItem) {
userdataButtons.fill({
item: fullItem,
includePlayed: false,
style: 'fab-mini',
element: context.querySelector('.nowPlayingPageUserDataButtons')
style: 'icon',
element: context.querySelector('.nowPlayingPageUserDataButtons'),
});
});
} else {
backdrop.clear();
userdataButtons.destroy({
element: context.querySelector('.nowPlayingPageUserDataButtons')
});
@ -236,10 +219,14 @@
function setImageUrl(context, url) {
currentImgUrl = url;
var imgContainer = context.querySelector('.nowPlayingPageImageContainer');
if (url) {
imageLoader.lazyImage(context.querySelector('.nowPlayingPageImage'), url);
imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />';
imgContainer.classList.remove('hide');
} else {
context.querySelector('.nowPlayingPageImage').style.backgroundImage = '';
imgContainer.classList.add('hide');
imgContainer.innerHTML = '';
}
}
@ -247,6 +234,14 @@
btn.disabled = !enabled;
}
function buttonVisible(btn, enabled) {
if (enabled) {
btn.classList.remove('hide');
} else {
btn.classList.add('hide');
}
}
function updateSupportedCommands(context, commands) {
var all = context.querySelectorAll('.btnCommand');
@ -256,10 +251,6 @@
}
}
function hideChapterMenu(page) {
}
return function () {
var dlg;
@ -271,6 +262,7 @@
var self = this;
var playlistNeedsRefresh = true;
var isEnabled;
function toggleRepeat(player) {
@ -301,17 +293,9 @@
var supportedCommands = playerInfo.supportedCommands;
var playState = state.PlayState || {};
buttonEnabled(context.querySelector('.btnToggleFullscreen'), item && item.MediaType == 'Video' && supportedCommands.indexOf('ToggleFullscreen') != -1);
buttonEnabled(context.querySelector('.btnAudioTracks'), hasStreams(item, 'Audio') && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
buttonEnabled(context.querySelector('.btnSubtitles'), hasStreams(item, 'Subtitle') && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
if (item && item.Chapters && item.Chapters.length && playState.CanSeek) {
buttonEnabled(context.querySelector('.btnChapters'), true);
} else {
buttonEnabled(context.querySelector('.btnChapters'), false);
hideChapterMenu(context);
}
buttonVisible(context.querySelector('.btnToggleFullscreen'), item && item.MediaType == 'Video' && supportedCommands.indexOf('ToggleFullscreen') != -1);
buttonVisible(context.querySelector('.btnAudioTracks'), hasStreams(item, 'Audio') && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
buttonVisible(context.querySelector('.btnSubtitles'), hasStreams(item, 'Subtitle') && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
if (supportedCommands.indexOf('DisplayMessage') != -1) {
context.querySelector('.sendMessageSection').classList.remove('hide');
@ -324,9 +308,9 @@
context.querySelector('.sendTextSection').classList.add('hide');
}
buttonEnabled(context.querySelector('.btnStop'), item != null);
buttonEnabled(context.querySelector('.btnNextTrack'), item != null);
buttonEnabled(context.querySelector('.btnPreviousTrack'), item != null);
buttonVisible(context.querySelector('.btnStop'), item != null);
buttonVisible(context.querySelector('.btnNextTrack'), item != null);
buttonVisible(context.querySelector('.btnPreviousTrack'), item != null);
var positionSlider = context.querySelector('.nowPlayingPositionSlider');
if (positionSlider && !positionSlider.dragging) {
@ -337,7 +321,7 @@
var runtimeTicks = item ? item.RunTimeTicks : null;
updateTimeDisplay(playState.PositionTicks, runtimeTicks);
updatePlayerVolumeState(playState.IsMuted, playState.VolumeLevel);
updatePlayerVolumeState(context, playState.IsMuted, playState.VolumeLevel);
if (item && item.MediaType == 'Video') {
context.classList.remove('hideVideoButtons');
@ -345,18 +329,6 @@
context.classList.add('hideVideoButtons');
}
if (playerInfo.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
context.classList.add('hideVolumeButtons');
} else {
context.classList.remove('hideVolumeButtons');
}
if (item && item.MediaType == 'Audio') {
context.querySelector('.buttonsRow2').classList.add('hide');
} else {
context.querySelector('.buttonsRow2').classList.remove('hide');
}
var toggleRepeatButton = context.querySelector('.repeatToggleButton');
if (playState.RepeatMode == 'RepeatAll') {
@ -374,8 +346,57 @@
updateNowPlayingInfo(context, state);
}
function updatePlayerVolumeState(isMuted, volumeLevel) {
function updatePlayerVolumeState(context, isMuted, volumeLevel) {
var view = context;
var supportedCommands = currentPlayerSupportedCommands;
var showMuteButton = true;
var showVolumeSlider = true;
if (supportedCommands.indexOf('Mute') === -1) {
showMuteButton = false;
}
if (supportedCommands.indexOf('SetVolume') === -1) {
showVolumeSlider = false;
}
if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
showMuteButton = false;
showVolumeSlider = false;
}
if (isMuted) {
view.querySelector('.buttonMute').setAttribute('title', globalize.translate('Unmute'));
view.querySelector('.buttonMute i').innerHTML = '&#xE04F;';
} else {
view.querySelector('.buttonMute').setAttribute('title', globalize.translate('Mute'));
view.querySelector('.buttonMute i').innerHTML = '&#xE050;';
}
if (showMuteButton) {
view.querySelector('.buttonMute').classList.remove('hide');
} else {
view.querySelector('.buttonMute').classList.add('hide');
}
var nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
var nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
// See bindEvents for why this is necessary
if (nowPlayingVolumeSlider) {
if (showVolumeSlider) {
nowPlayingVolumeSliderContainer.classList.remove('hide');
} else {
nowPlayingVolumeSliderContainer.classList.add('hide');
}
if (!nowPlayingVolumeSlider.dragging) {
nowPlayingVolumeSlider.value = volumeLevel || 0;
}
}
}
function updatePlayPauseState(isPaused, isActive) {
@ -389,7 +410,7 @@
btnPlayPause.querySelector('i').innerHTML = 'pause';
}
buttonEnabled(btnPlayPause, isActive);
buttonVisible(btnPlayPause, isActive);
}
function updateTimeDisplay(positionTicks, runtimeTicks) {
@ -425,49 +446,48 @@
}
}
function loadPlaylist(context) {
function getPlaylistItems(player) {
var html = '';
return Promise.resolve(playbackManager.playlist(player));
//ApiClient.getItems(Dashboard.getCurrentUserId(), {
return ApiClient.getItems(Dashboard.getCurrentUserId(), {
// SortBy: "SortName",
// SortOrder: "Ascending",
// IncludeItemTypes: "Audio",
// Recursive: true,
// Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount",
// StartIndex: 0,
// ImageTypeLimit: 1,
// EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
// Limit: 100
SortBy: "SortName",
SortOrder: "Ascending",
IncludeItemTypes: "Audio",
Recursive: true,
Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount",
StartIndex: 0,
ImageTypeLimit: 1,
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
Limit: 100
//}).then(function (result) {
}).then(function (result) {
// html += listView.getListViewHtml({
// items: result.Items,
// smallIcon: true
// });
// page(".playlist").html(html).lazyChildren();
//});
html += listView.getListViewHtml({
items: playbackManager.playlist(),
smallIcon: true,
action: 'setplaylistindex'
return result.Items;
});
}
playlistNeedsRefresh = false;
function loadPlaylist(context, player) {
var deps = [];
getPlaylistItems(player).then(function (items) {
var html = '';
require(deps, function () {
html += listView.getListViewHtml({
items: items,
smallIcon: true,
action: 'setplaylistindex',
enableUserDataButtons: false
});
playlistNeedsRefresh = false;
var itemsContainer = context.querySelector('.playlist');
itemsContainer.innerHTML = html;
var index = playbackManager.currentPlaylistIndex();
var index = playbackManager.getCurrentPlaylistIndex(player);
if (index != -1) {
@ -491,13 +511,14 @@
var player = this;
onStateChanged.call(player, e, state);
loadPlaylist(dlg);
loadPlaylist(dlg, player);
}
function onPlaybackStopped(e, state) {
console.log('remotecontrol event: ' + e.type);
var player = this;
updatePlayerState(dlg, {});
loadPlaylist(dlg);
}
@ -514,6 +535,7 @@
var player = this;
updatePlayerState(dlg, state);
loadPlaylist(dlg, player);
}
function onTimeUpdate(e) {
@ -535,7 +557,7 @@
var player = this;
updatePlayerVolumeState(player.isMuted(), player.getVolume());
updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume());
}
function releaseCurrentPlayer() {
@ -600,11 +622,9 @@
btnCast.querySelector('i').innerHTML = 'cast_connected';
btnCast.classList.add('btnActiveCast');
context.querySelector('.nowPlayingSelectedPlayer').innerHTML = info.deviceName || info.name;
} else {
btnCast.querySelector('i').innerHTML = 'cast';
btnCast.classList.remove('btnActiveCast');
context.querySelector('.nowPlayingSelectedPlayer').innerHTML = '';
}
}
@ -657,15 +677,6 @@
}
});
context.querySelector('.btnChapters').addEventListener('click', function () {
//if (currentPlayer && lastPlayerState) {
// var currentPositionTicks = lastPlayerState.PlayState.PositionTicks;
// showChapterMenu(context, lastPlayerState.NowPlayingItem, currentPositionTicks);
//}
});
context.querySelector('.btnStop').addEventListener('click', function () {
if (currentPlayer) {
@ -705,7 +716,7 @@
}
});
context.querySelector('.nowPlayingPositionSlider', context).getBubbleText = function (value) {
context.querySelector('.nowPlayingPositionSlider').getBubbleText = function (value) {
var state = lastPlayerState;
@ -719,6 +730,16 @@
return datetime.getDisplayRunningTime(ticks);
};
context.querySelector('.nowPlayingVolumeSlider').addEventListener('change', function () {
playbackManager.setVolume(this.value, currentPlayer);
});
context.querySelector('.buttonMute').addEventListener('click', function () {
playbackManager.toggleMute(currentPlayer);
});
}
function onPlayerChange() {
@ -798,19 +819,6 @@
// showSlideshowMenu(context);
//});
var mdlTabs = context.querySelector('.libraryViewNav');
context.querySelector('.libraryViewNav').classList.add('bottom');
libraryBrowser.configurePaperLibraryTabs(ownerView, mdlTabs, ownerView.querySelectorAll('.pageTabContent'));
mdlTabs.addEventListener('tabchange', function (e) {
if (e.detail.selectedTabIndex == 2 && playlistNeedsRefresh) {
loadPlaylist(context);
}
});
events.on(playbackManager, 'playerchange', onPlayerChange);
}

298
dashboard-ui/css/nowplaying.css
View File

@ -1,203 +1,159 @@
.nowPlayingPage {
padding-top: 0 !important;
/*.nowPlayingPage {
padding-top: 1em !important;
}*/
.remoteControlContent {
padding: 1em 0 0;
max-width: 96%;
}
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
margin: 2px 1px;
}
.nowPlayingInfoContainer {
display: flex;
flex-direction: row;
}
.nowPlayingPage .btnCommand:not(.hide), .nowPlayingPage .btnPlayStateCommand:not(.hide) {
display: inline-block !important;
}
.nowPlayingPageTitle {
margin: 0 0 .5em .5em;
}
.nowPlayingPositionSliderContainer {
margin: .7em 1em .7em;
}
.nowPlayingInfoButtons {
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: 130%;
}
.nowPlayingPageImageContainer {
width: 20%;
margin-right: .25em;
position: relative;
flex-shrink: 0;
}
@media all and (min-width: 800px) {
.nowPlayingPageImageContainer {
width: 16%;
}
}
.nowPlayingInfoControls {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.nowPlayingPageImage {
height: 360px;
width: 360px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/*position: absolute;*/
bottom: 0;
left: 0;
right: 0;
width: 100%;
-moz-box-shadow: 0 0 1.9vh #000;
-webkit-box-shadow: 0 0 1.9vh #000;
box-shadow: 0 0 1.9vh #000;
border: solid 1px #222;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nowPlayingPageTimeContainer {
min-width: 200px;
max-width: 280px;
margin: 1.5em auto 1em;
@media all and (orientation: portrait) and (max-width: 800px) {
.remoteControlContent {
padding-top: 0;
}
.nowPlayingInfoContainer {
flex-direction: column !important;
align-items: center;
}
.nowPlayingPageTitle {
text-align: center;
margin: .5em 0 .75em 0;
}
.nowPlayingPositionSliderContainer {
margin: .7em 1em;
}
.nowPlayingInfoButtons {
justify-content: center;
}
.nowPlayingPageImageContainer {
width: auto;
margin-right: 0;
}
.nowPlayingInfoControls {
margin-top: 1em;
}
.nowPlayingPageImage {
width: auto;
max-width: 100%;
max-height: 36vh;
}
}
.nowPlayingTime {
display: flex;
align-items: center;
margin: 0 1em;
}
.nowPlayingSecondaryButtons {
display: flex;
align-items: center;
}
@media all and (min-width: 800px) {
.nowPlayingSecondaryButtons {
margin-left: auto;
}
}
@media all and (min-width: 1280px) {
.nowPlayingPageImageContainer {
margin-right: .75em;
}
}
.nowPlayingNavButtonContainer {
width: 400px;
}
.chapterMenuOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
.chapterMenu {
position: fixed;
top: 30%;
height: 180px;
left: 0;
right: 0;
background-color: rgba(0,0,0,.9);
z-index: 1000;
}
.nowPlayingPageRepeatActive {
color: #2ad !important;
}
.chapterMenuInner {
padding: 1em 0;
text-align: center;
white-space: nowrap;
}
.smallBackdropPosterItem .cardOverlayInner > div {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.chapterPosterItem {
width: 240px !important;
cursor: pointer;
}
.chapterPosterItem .posterItemImage {
height: 135px !important;
}
.currentChapter {
box-shadow: 0 0 12px 7px #cc3333;
}
.playlistIndexIndicatorImage {
background-size: initial !important;
background-image: url(images/ani_equalizer_white.gif) !important;
}
@media all and (max-width: 700px) {
.nowPlayingPageImage {
height: 160px;
width: 160px;
}
}
.nowPlayingPage .btnCommand i, .nowPlayingPage .btnPlayStateCommand i {
width: 44px;
height: 44px;
font-size: 44px;
}
@media all and (max-width: 600px) and (orientation: portrait) {
.btnSlideshow {
display: block !important;
margin-top: 1em;
}
}
@media all and (max-height: 600px) {
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
margin: 2px 0;
}
.nowPlayingPageImage {
height: 160px;
width: 160px;
}
}
@media all and (max-height: 500px) {
.nowPlayingPageImage {
height: 120px;
width: 120px;
}
}
@media all and (max-width: 400px) {
.nowPlayingNavButtonContainer {
width: 300px;
}
}
.nowPlayingPageTitle {
margin: 1.5em auto .5em;
max-width: 50%;
}
.nowPlayingInfoButtons {
padding-top: .5em;
}
@media all and (min-height: 600px) {
.nowPlayingPageTitle {
margin-top: 2em;
}
.nowPlayingInfoButtons {
padding-top: 1em;
}
}
@media all and (min-width: 800px) {
.nowPlayingPageTimeContainer {
max-width: 340px;
}
}
@media (orientation: landscape) {
.nowPlayingInfoMetadata, .nowPlayingInfoButtons {
display: inline-block;
vertical-align: top;
}
.nowPlayingInfoButtons {
margin-left: 1em;
}
}
@media (orientation: landscape) and (min-width: 700px) {
.nowPlayingInfoButtons {
margin-left: 3em;
}
}
.nowPlayingSelectedPlayer {
display: inline-block;
vertical-align: middle;
color: #eee;
margin-right: .25em;
}
@media all and (max-width: 700px) {
.nowPlayingSelectedPlayer {
display: none;
}
}
.nowPlayingPageUserDataButtons paper-icon-button {
width: 40px;
height: 40px;
}
.hideVideoButtons .videoButton {
visibility: hidden;
display: none;
}
.hideVolumeButtons .volumeButton {
visibility: hidden;
.nowPlayingCastIcon {
font-size: 86%;
}

15
dashboard-ui/css/nowplayingbar.css
View File

@ -79,14 +79,12 @@
}
.mediaButton i {
height: auto;
width: auto;
height: 1em;
width: 1em;
font-size: 36px;
}
.mediaButton.remoteControlButton i, .mediaButton.muteButton i, .mediaButton.unmuteButton i, .mediaButton.castButton i, .mediaButton.infoButton i {
height: auto;
width: auto;
.mediaButton.muteButton i, .mediaButton.unmuteButton i, .mediaButton.castButton i, .mediaButton.infoButton i {
font-size: 24px;
}
@ -232,13 +230,6 @@
}
}
@media all and (max-width: 1000px) {
.nowPlayingBar .playlistButton {
display: none !important;
}
}
@media all and (max-width: 800px) {
.nowPlayingBarCurrentTime {

273
dashboard-ui/nowplaying.html
View File

@ -1,199 +1,174 @@
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="${TitleRemoteControl}" data-theme="b" style="padding:0;">
<div class="remoteControlContent">
<div class="remoteControlContent ehsContent">
<div style="background: #080808;">
<button is="paper-icon-button-light" style="position: absolute; top: .5em; left: .5em; z-index: 1;" tabindex="-1" class="btnExitRemoteControl autoSize">
<i class="md-icon">&#xE5C4;</i>
</button>
<div style="float: right; position: absolute; top: .5em; right: .5em; text-align: right;" class="topRightContainer">
<span class="nowPlayingSelectedPlayer"></span>
<button is="paper-icon-button-light" class="nowPlayingCastIcon autoSize" style="vertical-align: middle; z-index: 1;" tabindex="-1">
<i class="md-icon">cast</i>
</button>
</div>
</div>
<div is="emby-tabs" class="libraryViewNav headroomDisabled">
<div class="emby-tabs-slider">
<button is="emby-button" class="emby-tab-button is-active" data-index="0">
<div class="emby-button-foreground">${TabNowPlaying}</div>
</button>
<button is="emby-button" class="emby-tab-button" data-index="1">
<div class="emby-button-foreground">${TabControls}</div>
</button>
<button is="emby-button" class="emby-tab-button" data-index="2">
<div class="emby-button-foreground">${TabPlaylist}</div>
</button>
</div>
</div>
<div class="nowPlayingInfoContainer">
<div class="nowPlayingPageImageContainer"></div>
<div class="nowPlayingInfoControls">
<div class="is-active pageTabContent ehsContent" id="nowPlayingTab" data-index="0">
<div style="text-align:center;">
<div class="nowPlayingPageTitle" style="line-height: normal;">
</div>
<div class="nowPlayingInfoMetadata">
<div class="nowPlayingPageImage" style="margin: 1em auto;"></div>
<div class="nowPlayingPageTimeContainer" style="display:flex; align-items: center;">
<div class="positionTime"></div>
<div class="sliderContainer nowPlayingPositionSliderContainer" style="flex-grow:1;margin: 0 1em;">
<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" />
</div>
<div class="runtime"></div>
</div>
<h1 class="nowPlayingPageTitle"></h1>
<div class="sliderContainer nowPlayingPositionSliderContainer">
<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" />
</div>
<div class="nowPlayingInfoButtons">
<div>
<button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
<i class="md-icon">skip_previous</i>
</button>
<button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
<i class="md-icon">skip_previous</i>
</button>
<button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
<i class="md-icon">pause</i>
</button>
<button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
<i class="md-icon">pause</i>
</button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
<i class="md-icon">stop</i>
</button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
<i class="md-icon">stop</i>
</button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
<i class="md-icon">skip_next</i>
</button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
<i class="md-icon">skip_next</i>
</button>
<button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
<i class="md-icon">audiotrack</i>
</button>
<button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
<i class="md-icon">closed_caption</i>
</button>
<div class="nowPlayingTime">
<div class="positionTime"></div>
<div style="margin: 0 .25em;">/</div>
<div class="runtime"></div>
</div>
<div class="buttonsRow2">
<button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
<i class="md-icon">audiotrack</i>
</button>
<div class="nowPlayingSecondaryButtons">
<div class="nowPlayingPageUserDataButtons">
</div>
<button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
<i class="md-icon">closed_caption</i>
</button>
<button is="paper-icon-button-light" class="btnChapters videoButton btnPlayStateCommand autoSize" title="${ButtonScenes}" data-command="GoToSearch">
<i class="md-icon">movie</i>
<button is="paper-icon-button-light" class="nowPlayingCastIcon">
<i class="md-icon">cast</i>
</button>
<button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
<i class="md-icon">fullscreen</i>
</button>
</div>
<div>
<button is="paper-icon-button-light" class="btnCommand repeatToggleButton autoSize" title="${ButtonRepeat}" data-command="SetRepeatMode">
<i class="md-icon">repeat</i>
</button>
<button is="paper-icon-button-light" class="btnCommand volumeButton autoSize" title="${ButtonMute}" data-command="ToggleMute">
<i class="md-icon">volume_off</i>
<button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute}">
<i class="xlargePaperIconButton md-icon">&#xE050;</i>
</button>
<button is="paper-icon-button-light" class="btnCommand volumeButton autoSize" title="${ButtonVolumeDown}" data-command="VolumeDown">
<i class="md-icon">volume_down</i>
</button>
<button is="paper-icon-button-light" class="btnCommand volumeButton autoSize" title="${ButtonVolumeUp}" data-command="VolumeUp">
<i class="md-icon">volume_up</i>
</button>
</div>
<div class="nowPlayingPageUserDataButtons" style="margin-top:1em;">
<div class="sliderContainer nowPlayingVolumeSliderContainer">
<input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider" />
</div>
</div>
</div>
</div>
</div>
<div class="pageTabContent ehsContent" id="controlsTab" data-index="1">
<div style="text-align:center;">
<div>
<button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize" title="${ButtonArrowUp}" data-command="MoveUp">
<i class="md-icon">keyboard_arrow_up</i>
</button>
</div>
<div>
<button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize" title="${ButtonArrowLeft}" data-command="MoveLeft">
<i class="md-icon">keyboard_arrow_left</i>
</button>
<button is="paper-icon-button-light" class="btnOk btnCommand autoSize" title="${ButtonOk}" data-command="Select">
<i class="md-icon">check</i>
</button>
<div class="hide">
<div>
<button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize" title="${ButtonArrowUp}" data-command="MoveUp">
<i class="md-icon">keyboard_arrow_up</i>
</button>
</div>
<div>
<button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize" title="${ButtonArrowLeft}" data-command="MoveLeft">
<i class="md-icon">keyboard_arrow_left</i>
</button>
<button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize" title="${ButtonArrowRight}" data-command="MoveRight">
<i class="md-icon">keyboard_arrow_right</i>
</button>
</div>
<div>
<button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize" title="${ButtonArrowDown}" data-command="MoveDown">
<i class="md-icon">keyboard_arrow_down</i>
</button>
</div>
<div>
<button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
<i class="md-icon">&#xE5C4;</i>
</button>
<button is="paper-icon-button-light" class="btnOk btnCommand autoSize" title="${ButtonOk}" data-command="Select">
<i class="md-icon">check</i>
</button>
<button is="paper-icon-button-light" class="btnInfo btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
<i class="md-icon">info</i>
</button>
</div>
<br />
<div>
<button is="paper-icon-button-light" class="btnGoHome btnCommand autoSize" title="${ButtonHome}" data-command="GoHome">
<i class="md-icon">home</i>
</button>
<button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize" title="${ButtonArrowRight}" data-command="MoveRight">
<i class="md-icon">keyboard_arrow_right</i>
</button>
</div>
<div>
<button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize" title="${ButtonArrowDown}" data-command="MoveDown">
<i class="md-icon">keyboard_arrow_down</i>
</button>
</div>
<div>
<button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
<i class="md-icon">&#xE5C4;</i>
</button>
<button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${ButtonSearch}" data-command="GoToSearch">
<i class="md-icon">search</i>
</button>
</div>
<div>
<button is="paper-icon-button-light" class="bthShowSettings btnCommand autoSize" title="${ButtonSettings}" data-command="GoToSettings">
<i class="md-icon">settings</i>
</button>
<button is="paper-icon-button-light" class="btnInfo btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
<i class="md-icon">info</i>
</button>
</div>
<br />
<div>
<button is="paper-icon-button-light" class="btnGoHome btnCommand autoSize" title="${ButtonHome}" data-command="GoHome">
<i class="md-icon">home</i>
</button>
<button is="paper-icon-button-light" class="btnScreenshot btnCommand autoSize" title="${ButtonTakeScreenshot}" data-command="TakeScreenshot">
<i class="md-icon">videocam</i>
</button>
<button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${ButtonSearch}" data-command="GoToSearch">
<i class="md-icon">search</i>
</button>
</div>
<div>
<button is="paper-icon-button-light" class="bthShowSettings btnCommand autoSize" title="${ButtonSettings}" data-command="GoToSettings">
<i class="md-icon">settings</i>
</button>
</div>
</div>
<div class="hide">
<div class="sendMessageSection">
<br /><h1>${HeaderSendMessage}</h1>
<div style="text-align: left;">
<form class="sendMessageForm">
<div class="inputContainer">
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required />
</div>
<br />
<div class="inputContainer">
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required />
</div>
<p>
<button is="emby-button" class="sendMessageElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
</p>
</form>
</div>
</div>
<div class="readOnlyContent" style="margin: 2em auto 0; padding: 0 1em 100px;">
<div class="sendMessageSection">
<br /><h1>${HeaderSendMessage}</h1>
<div style="text-align: left;">
<form class="sendMessageForm">
<div class="inputContainer">
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required />
</div>
<br />
<div class="inputContainer">
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required />
</div>
<p>
<button is="emby-button" class="sendMessageElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
</p>
</form>
</div>
</div>
<div class="sendTextSection">
<br /><h1>${HeaderTypeText}</h1>
<div style="text-align: left;">
<form class="typeTextForm">
<div class="inputContainer">
<input is="emby-input" class="typeTextElement" type="text" id="txtTypeText" label="${LabelTypeText}" required />
</div>
<p>
<button is="emby-button" class="typeTextElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
</p>
</form>
</div>
<div class="sendTextSection">
<br /><h1>${HeaderTypeText}</h1>
<div style="text-align: left;">
<form class="typeTextForm">
<div class="inputContainer">
<input is="emby-input" class="typeTextElement" type="text" id="txtTypeText" label="${LabelTypeText}" required />
</div>
<p>
<button is="emby-button" class="typeTextElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
</p>
</form>
</div>
</div>
</div>
<div class="pageTabContent ehsContent" id="playlistTab" data-index="2">
<div class="playlist itemsContainer vertical-list" is="emby-itemscontainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
<br />
<div>
<h1>${TabPlaylist}</h1>
<div class="playlist itemsContainer vertical-list" is="emby-itemscontainer">
</div>
</div>
<br />
<br />
<br />
<br />
</div>
<div data-role="content" style="overflow:visible;">

27
dashboard-ui/scripts/mediacontroller.js
View File

@ -1,27 +0,0 @@
define(['appSettings', 'events'], function (appSettings, events) {
'use strict';
function mediaController() {
var self = this;
var currentPlayer;
self.currentPlaylistIndex = function (i) {
if (i == null) {
// TODO: Get this implemented in all of the players
return currentPlayer.currentPlaylistIndex ? currentPlayer.currentPlaylistIndex() : -1;
}
currentPlayer.currentPlaylistIndex(i);
};
self.removeFromPlaylist = function (i) {
currentPlayer.removeFromPlaylist(i);
};
self.playlist = function () {
return currentPlayer.playlist || [];
};
}
});

8
dashboard-ui/scripts/nowplayingbar.js
View File

@ -64,8 +64,7 @@
html += '</div>';
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton autoSize"><i class="md-icon">pause</i></button>';
html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton autoSize"><i class="md-icon">tablet_android</i></button>';
html += '<button is="paper-icon-button-light" class="playlistButton mediaButton autoSize"><i class="md-icon">queue_music</i></button>';
html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton autoSize"><i class="md-icon">playlist_play</i></button>';
html += '</div>';
html += '</div>';
@ -185,11 +184,6 @@
showRemoteControl();
});
elem.querySelector('.playlistButton').addEventListener('click', function () {
showRemoteControl(2);
});
toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
toggleRepeatButton.addEventListener('click', function () {

2
dashboard-ui/scripts/nowplayingpage.js
View File

@ -1,4 +1,4 @@
define(['components/remotecontrol', 'emby-tabs', 'emby-button'], function (remotecontrolFactory) {
define(['components/remotecontrol', 'emby-button'], function (remotecontrolFactory) {
'use strict';
return function (view, params) {

8
dashboard-ui/scripts/videoosd.js
View File

@ -470,7 +470,7 @@
isEnabled = true;
updatePlayerStateInternal(event, state);
updatePlaylist();
updatePlaylist(player);
enableStopOnBack(true);
}
@ -732,11 +732,11 @@
}
}
function updatePlaylist() {
function updatePlaylist(player) {
var items = playbackManager.playlist();
var items = playbackManager.playlist(player);
var index = playbackManager.currentPlaylistIndex();
var index = playbackManager.getCurrentPlaylistIndex(player);
var previousEnabled = index > 0;
var nextEnabled = (index < items.length - 1);

6
dashboard-ui/videoosd.html
View File

@ -246,12 +246,12 @@
<button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
<i class="xlargePaperIconButton md-icon">&#xE01C;</i>
</button>
<button is="paper-icon-button-light" class="btnCast hide autoSize" title="${PlayOnAnotherDevice}">
<i class="xlargePaperIconButton md-icon">&#xE307;</i>
</button>
<button is="paper-icon-button-light" class="btnSettings hide autoSize" title="${Settings}">
<i class="largePaperIconButton md-icon">&#xE8B8;</i>
</button>
<button is="paper-icon-button-light" class="btnCast hide autoSize" title="${PlayOnAnotherDevice}">
<i class="xlargePaperIconButton md-icon">&#xE307;</i>
</button>
<button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen}">
<i class="xlargePaperIconButton md-icon">&#xE5D0;</i>
</button>