From bb816420e7b61f48cd2ba40e5e4455844542b641 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Tue, 17 Jan 2017 13:00:19 -0500 Subject: [PATCH] rework now playing screen --- .../emby-webcomponents/backdrop/backdrop.js | 2 +- .../emby-webcomponents/chromecastplayer.js | 22 +- .../playback/playbackmanager.js | 39 ++- .../emby-webcomponents/sessionplayer.js | 22 +- .../emby-webcomponents/shortcuts.js | 2 +- dashboard-ui/components/remotecontrol.js | 240 +++++++------- dashboard-ui/css/nowplaying.css | 298 ++++++++---------- dashboard-ui/css/nowplayingbar.css | 15 +- dashboard-ui/nowplaying.html | 273 ++++++++-------- dashboard-ui/scripts/mediacontroller.js | 27 -- dashboard-ui/scripts/nowplayingbar.js | 8 +- dashboard-ui/scripts/nowplayingpage.js | 2 +- dashboard-ui/scripts/videoosd.js | 8 +- dashboard-ui/videoosd.html | 6 +- 14 files changed, 448 insertions(+), 516 deletions(-) delete mode 100644 dashboard-ui/scripts/mediacontroller.js diff --git a/dashboard-ui/bower_components/emby-webcomponents/backdrop/backdrop.js b/dashboard-ui/bower_components/emby-webcomponents/backdrop/backdrop.js index 1898a0e665..fd4cb438f8 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/backdrop/backdrop.js +++ b/dashboard-ui/bower_components/emby-webcomponents/backdrop/backdrop.js @@ -294,7 +294,7 @@ currentRotationIndex = -1; if (images.length > 1 && enableImageRotation !== false && enableRotation()) { - rotationInterval = setInterval(onRotationInterval, 20000); + rotationInterval = setInterval(onRotationInterval, 24000); } onRotationInterval(); } diff --git a/dashboard-ui/bower_components/emby-webcomponents/chromecastplayer.js b/dashboard-ui/bower_components/emby-webcomponents/chromecastplayer.js index c394f680e9..c7e76256d9 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/chromecastplayer.js +++ b/dashboard-ui/bower_components/emby-webcomponents/chromecastplayer.js @@ -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)); diff --git a/dashboard-ui/bower_components/emby-webcomponents/playback/playbackmanager.js b/dashboard-ui/bower_components/emby-webcomponents/playback/playbackmanager.js index 6173c62c0f..7e2390429d 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/playback/playbackmanager.js +++ b/dashboard-ui/bower_components/emby-webcomponents/playback/playbackmanager.js @@ -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]); diff --git a/dashboard-ui/bower_components/emby-webcomponents/sessionplayer.js b/dashboard-ui/bower_components/emby-webcomponents/sessionplayer.js index 3f0309302a..11fc53bea0 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/sessionplayer.js +++ b/dashboard-ui/bower_components/emby-webcomponents/sessionplayer.js @@ -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; diff --git a/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js b/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js index ba492ca832..70d0bf10d5 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js +++ b/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js @@ -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') { diff --git a/dashboard-ui/components/remotecontrol.js b/dashboard-ui/components/remotecontrol.js index 63537367ff..0c0294be99 100644 --- a/dashboard-ui/components/remotecontrol.js +++ b/dashboard-ui/components/remotecontrol.js @@ -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 = ''; + 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 = ''; + } else { + view.querySelector('.buttonMute').setAttribute('title', globalize.translate('Mute')); + view.querySelector('.buttonMute i').innerHTML = ''; + } + + 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); } diff --git a/dashboard-ui/css/nowplaying.css b/dashboard-ui/css/nowplaying.css index 40cf717a06..3ab775717e 100644 --- a/dashboard-ui/css/nowplaying.css +++ b/dashboard-ui/css/nowplaying.css @@ -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%; } diff --git a/dashboard-ui/css/nowplayingbar.css b/dashboard-ui/css/nowplayingbar.css index 5b58669ba5..b1642c1b73 100644 --- a/dashboard-ui/css/nowplayingbar.css +++ b/dashboard-ui/css/nowplayingbar.css @@ -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 { diff --git a/dashboard-ui/nowplaying.html b/dashboard-ui/nowplaying.html index 8f006064d2..2d1476fafe 100644 --- a/dashboard-ui/nowplaying.html +++ b/dashboard-ui/nowplaying.html @@ -1,199 +1,174 @@ 
-
+
-
- - -
-
-
- - - -
-
+
+
+
-
-
-
-
-
-
-
-
-
- -
-
-
+

+ +
+
+
-
+ - + - + - + - + + + + +
+
+
/
+
-
- +
+
+
- - - -
-
- - - - - -
-
+
+ +
-
-
-
- -
-
- - +
+
+ +
+
+ - -
-
- -
-
- + - -
-
-
- + +
+
+ +
+
+ - -
-
- + +
+
+
+ - + +
+
+ +
+
+
+
+

${HeaderSendMessage}

+
+
+
+ +
+
+
+ +
+

+ +

+
-
-
-

${HeaderSendMessage}

-
-
-
- -
-
-
- -
-

- -

-
-
-
-
-

${HeaderTypeText}

-
-
-
- -
-

- -

-
-
+
+

${HeaderTypeText}

+
+
+
+ +
+

+ +

+
-
-
+ +
+
+

${TabPlaylist}

+
+
+
+
+
diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js deleted file mode 100644 index fdd76ce498..0000000000 --- a/dashboard-ui/scripts/mediacontroller.js +++ /dev/null @@ -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 || []; - }; - } -}); \ No newline at end of file diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js index 693bf57c20..09edcf170c 100644 --- a/dashboard-ui/scripts/nowplayingbar.js +++ b/dashboard-ui/scripts/nowplayingbar.js @@ -64,8 +64,7 @@ html += '
'; html += ''; - html += ''; - html += ''; + html += ''; html += '
'; html += '
'; @@ -185,11 +184,6 @@ showRemoteControl(); }); - elem.querySelector('.playlistButton').addEventListener('click', function () { - - showRemoteControl(2); - }); - toggleRepeatButton = elem.querySelector('.toggleRepeatButton'); toggleRepeatButton.addEventListener('click', function () { diff --git a/dashboard-ui/scripts/nowplayingpage.js b/dashboard-ui/scripts/nowplayingpage.js index 9a6ad2f8e4..1ae2364f40 100644 --- a/dashboard-ui/scripts/nowplayingpage.js +++ b/dashboard-ui/scripts/nowplayingpage.js @@ -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) { diff --git a/dashboard-ui/scripts/videoosd.js b/dashboard-ui/scripts/videoosd.js index e9679f218b..6b6b6e331e 100644 --- a/dashboard-ui/scripts/videoosd.js +++ b/dashboard-ui/scripts/videoosd.js @@ -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); diff --git a/dashboard-ui/videoosd.html b/dashboard-ui/videoosd.html index 11b34b2c32..39c1a4ca2b 100644 --- a/dashboard-ui/videoosd.html +++ b/dashboard-ui/videoosd.html @@ -246,12 +246,12 @@ - +