diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index 808915e58b..7273121f53 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -14,21 +14,23 @@ } .osdHeader { - -webkit-transition: opacity 0.3s ease-out; - -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; position: relative; z-index: 1; - background: rgba(0, 0, 0, 0.7) !important; - -webkit-backdrop-filter: none !important; - backdrop-filter: none !important; - color: #eee !important; + background: linear-gradient(180deg, rgba(16, 16 16, 0.75) 0%, rgba(16, 16, 16, 0.15) 80%, rgba(16, 16, 16, 0) 100%); + backdrop-filter: none; + color: #eee; + height: 7.5em; } .osdHeader-hidden { opacity: 0; } +.osdHeader .headerTop { + max-height: 3.5em; +} + .osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton):not(.headerSyncButton) { display: none; } @@ -88,18 +90,13 @@ .videoOsdBottom { position: fixed; - background-color: rgba(0, 0, 0, 0.7); - padding: 1%; - display: -webkit-box; - display: -webkit-flex; + background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0.15) 80%, rgba(16, 16, 16, 0) 100%); + padding-top: 10em; + padding-bottom: 1.75em; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; flex-direction: row; + justify-content: center; will-change: opacity; - -webkit-transition: opacity 0.3s ease-out; - -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; color: #fff; user-select: none; @@ -111,9 +108,9 @@ } .osdControls { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; flex-grow: 1; + max-width: calc(100vh * 1.77); + padding: 0 0.8em; } .videoOsdBottom .buttons { @@ -145,7 +142,7 @@ } .volumeButtons { - margin: 0 0.5em 0 auto; + margin: 0 1em 0 0.29em; display: flex; -webkit-align-items: center; align-items: center; @@ -153,6 +150,7 @@ .osdTimeText { margin-left: 1em; + margin-right: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css index 05e3b10f57..067804919f 100644 --- a/src/components/upnextdialog/upnextdialog.css +++ b/src/components/upnextdialog/upnextdialog.css @@ -1,6 +1,7 @@ .upNextDialog { + width: 30vw; position: fixed; - left: 0; + left: auto; bottom: 0; right: 0; padding: 1%; @@ -23,6 +24,7 @@ } .upNextDialog-poster { + display: none; max-width: 40%; max-height: 15%; position: relative; @@ -31,6 +33,10 @@ margin-bottom: 0.5em; } +.upNextDialog-buttons { + justify-content: end; +} + .upNextDialog-button { background: #404040; color: #fff; @@ -44,7 +50,7 @@ .upNextDialog-poster { max-width: initial; max-height: initial; - width: 10%; + width: 30%; margin-bottom: 0; } } diff --git a/src/components/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js index e28bb03abe..c665d81173 100644 --- a/src/components/upnextdialog/upnextdialog.js +++ b/src/components/upnextdialog/upnextdialog.js @@ -1,6 +1,5 @@ import dom from 'dom'; import playbackManager from 'playbackManager'; -import connectionManager from 'connectionManager'; import events from 'events'; import mediaInfo from 'mediaInfo'; import layoutManager from 'layoutManager'; @@ -15,78 +14,6 @@ import 'flexStyles'; const transitionEndEventName = dom.whichTransitionEvent(); - function seriesImageUrl(item, options) { - if (item.Type !== 'Episode') { - return null; - } - - options = options || {}; - options.type = options.type || 'Primary'; - - if (options.type === 'Primary') { - if (item.SeriesPrimaryImageTag) { - options.tag = item.SeriesPrimaryImageTag; - - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - } - - if (options.type === 'Thumb') { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); - } - } - - return null; - } - - function imageUrl(item, options) { - options = options || {}; - options.type = options.type || 'Primary'; - - if (item.ImageTags && item.ImageTags[options.type]) { - options.tag = item.ImageTags[options.type]; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } - - if (options.type === 'Primary') { - if (item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); - } - } - - return null; - } - - function setPoster(osdPoster, item, secondaryItem) { - if (item) { - let imgUrl = seriesImageUrl(item, { type: 'Primary' }) || - seriesImageUrl(item, { type: 'Thumb' }) || - imageUrl(item, { type: 'Primary' }); - - if (!imgUrl && secondaryItem) { - imgUrl = seriesImageUrl(secondaryItem, { type: 'Primary' }) || - seriesImageUrl(secondaryItem, { type: 'Thumb' }) || - imageUrl(secondaryItem, { type: 'Primary' }); - } - - if (imgUrl) { - osdPoster.innerHTML = ''; - return; - } - } - - osdPoster.innerHTML = ''; - } - function getHtml() { let html = ''; @@ -146,8 +73,6 @@ import 'flexStyles'; const elem = instance.options.parent; - setPoster(elem.querySelector('.upNextDialog-poster'), item); - elem.querySelector('.upNextDialog-overview').innerHTML = item.Overview || ''; elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, { diff --git a/src/controllers/playback/video/index.html b/src/controllers/playback/video/index.html index 77274230e4..6651fc3da2 100644 --- a/src/controllers/playback/video/index.html +++ b/src/controllers/playback/video/index.html @@ -1,11 +1,9 @@
-

-
${FetchingData} @@ -16,7 +14,7 @@
-
+
@@ -47,32 +45,18 @@ - - - - - - - -
+ +
+ + + +
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 420268ea75..5da8ec45d8 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -21,50 +21,6 @@ import 'css!assets/css/videoosd'; /* eslint-disable indent */ - function seriesImageUrl(item, options) { - if (item.Type !== 'Episode') { - return null; - } - - options = options || {}; - options.type = options.type || 'Primary'; - if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { - options.tag = item.SeriesPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (options.type === 'Thumb') { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); - } - } - - return null; - } - - function imageUrl(item, options) { - options = options || {}; - options.type = options.type || 'Primary'; - - if (item.ImageTags && item.ImageTags[options.type]) { - options.tag = item.ImageTags[options.type]; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } - - if (options.type === 'Primary' && item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); - } - - return null; - } - function getOpenedDialog() { return document.querySelector('.dialogContainer .dialog.opened'); } @@ -164,7 +120,6 @@ import 'css!assets/css/videoosd'; currentItem = item; const displayItem = itemInfo.displayItem || item; updateRecordingButton(displayItem); - setPoster(displayItem, item); let parentName = displayItem.SeriesName || displayItem.Album; if (displayItem.EpisodeTitle || displayItem.IsSeries) { @@ -172,42 +127,6 @@ import 'css!assets/css/videoosd'; } setTitle(displayItem, parentName); - const titleElement = view.querySelector('.osdTitle'); - let displayName = itemHelper.getDisplayName(displayItem, { - includeParentInfo: displayItem.Type !== 'Program', - includeIndexNumber: displayItem.Type !== 'Program' - }); - - if (!displayName) { - displayName = displayItem.Type; - } - - titleElement.innerHTML = displayName; - - if (displayName) { - titleElement.classList.remove('hide'); - } else { - titleElement.classList.add('hide'); - } - - const mediaInfoHtml = mediaInfo.getPrimaryMediaInfoHtml(displayItem, { - runtime: false, - subtitles: false, - tomatoes: false, - endsAt: false, - episodeTitle: false, - originalAirDate: displayItem.Type !== 'Program', - episodeTitleIndexNumber: displayItem.Type !== 'Program', - programIndicator: false - }); - const osdMediaInfo = view.querySelector('.osdMediaInfo'); - osdMediaInfo.innerHTML = mediaInfoHtml; - - if (mediaInfoHtml) { - osdMediaInfo.classList.remove('hide'); - } else { - osdMediaInfo.classList.add('hide'); - } const secondaryMediaInfo = view.querySelector('.osdSecondaryMediaInfo'); const secondaryMediaInfoHtml = mediaInfo.getSecondaryMediaInfoHtml(displayItem, { @@ -222,12 +141,6 @@ import 'css!assets/css/videoosd'; secondaryMediaInfo.classList.add('hide'); } - if (displayName) { - view.querySelector('.osdMainTextContainer').classList.remove('hide'); - } else { - view.querySelector('.osdMainTextContainer').classList.add('hide'); - } - if (enableProgressByTimeOfDay) { setDisplayTime(startTimeText, displayItem.StartDate); setDisplayTime(endTimeText, displayItem.EndDate); @@ -277,7 +190,6 @@ import 'css!assets/css/videoosd'; currentItem = item; if (!item) { - setPoster(null); updateRecordingButton(null); Emby.Page.setTitle(''); nowPlayingVolumeSlider.disabled = true; @@ -314,7 +226,20 @@ import 'css!assets/css/videoosd'; } function setTitle(item, parentName) { - Emby.Page.setTitle(parentName || ''); + let itemName = itemHelper.getDisplayName(item, { + includeParentInfo: item.Type !== 'Program', + includeIndexNumber: item.Type !== 'Program' + }); + + if (itemName && parentName) { + itemName = `${parentName} - ${itemName}`; + } + + if (!itemName) { + itemName = parentName || ''; + } + + Emby.Page.setTitle(itemName); const documentTitle = parentName || (item ? item.Name : null); @@ -323,38 +248,6 @@ import 'css!assets/css/videoosd'; } } - function setPoster(item, secondaryItem) { - const osdPoster = view.querySelector('.osdPoster'); - - if (item) { - let imgUrl = seriesImageUrl(item, { - maxWidth: osdPoster.clientWidth, - type: 'Primary' - }) || seriesImageUrl(item, { - maxWidth: osdPoster.clientWidth, - type: 'Thumb' - }) || imageUrl(item, { - maxWidth: osdPoster.clientWidth, - type: 'Primary' - }); - - if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, { - maxWidth: osdPoster.clientWidth, - type: 'Primary' - }) || seriesImageUrl(secondaryItem, { - maxWidth: osdPoster.clientWidth, - type: 'Thumb' - }) || imageUrl(secondaryItem, { - maxWidth: osdPoster.clientWidth, - type: 'Primary' - })), imgUrl) { - return void (osdPoster.innerHTML = ''); - } - } - - osdPoster.innerHTML = ''; - } - let mouseIsDown = false; function showOsd() {