diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index 808915e58b..b2446d5d48 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -6,29 +6,42 @@ -ms-user-select: none; } -.osdPoster img, .videoOsdBottom { bottom: 0; left: 0; right: 0; + position: fixed; + background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%); + padding-top: 7.5em; + padding-bottom: 1.75em; + display: flex; + flex-direction: row; + justify-content: center; + will-change: opacity; + transition: opacity 0.3s ease-out; + color: #fff; + user-select: none; + -webkit-touch-callout: none; } -.osdHeader { - -webkit-transition: opacity 0.3s ease-out; - -o-transition: opacity 0.3s ease-out; +.skinHeader-withBackground.osdHeader { 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) 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; } @@ -86,34 +99,17 @@ opacity: 0.6; } -.videoOsdBottom { - position: fixed; - background-color: rgba(0, 0, 0, 0.7); - padding: 1%; - display: -webkit-box; - display: -webkit-flex; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - flex-direction: row; - 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; - -webkit-touch-callout: none; -} - .videoOsdBottom-hidden { opacity: 0; } .osdControls { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; flex-grow: 1; + padding: 0 0.8em; +} + +.layout-desktop .osdControls { + max-width: calc(100vh * 1.77 - 2vh); } .videoOsdBottom .buttons { @@ -145,7 +141,7 @@ } .volumeButtons { - margin: 0 0.5em 0 auto; + margin: 0 1em 0 0.29em; display: flex; -webkit-align-items: center; align-items: center; @@ -153,33 +149,13 @@ .osdTimeText { margin-left: 1em; + margin-right: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -.osdPoster { - width: 10%; - position: relative; - margin-right: 0.5em; -} - -.osdPoster img { - position: absolute; - height: auto; - width: 100%; - -webkit-box-shadow: 0 0 1.9vh #000; - box-shadow: 0 0 1.9vh #000; - border: 0.08em solid #222; - user-drag: none; - user-select: none; - -moz-user-select: none; - -webkit-user-drag: none; - -webkit-user-select: none; - -ms-user-select: none; -} - .osdTitle, .osdTitleSmall { margin: 0 1em 0 0; diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js index 1d78d490a2..d5da29d3bc 100644 --- a/src/components/mediainfo/mediainfo.js +++ b/src/components/mediainfo/mediainfo.js @@ -100,11 +100,10 @@ import 'emby-button'; return html; } - export function getMediaInfoHtml(item, options) { + export function getMediaInfoHtml(item, options = {}) { let html = ''; const miscInfo = []; - options = options || {}; let text; let date; let minutes; @@ -289,7 +288,9 @@ import 'emby-button'; return getMediaInfoItem(m); }).join(''); - html += getStarIconsHtml(item); + if (options.starRating !== false) { + html += getStarIconsHtml(item); + } if (item.HasSubtitles && options.subtitles !== false) { html += '
CC
'; @@ -418,9 +419,8 @@ import 'emby-button'; return false; } - export function getPrimaryMediaInfoHtml(item, options) { - options = options || {}; - if (options.interactive == null) { + export function getPrimaryMediaInfoHtml(item, options = {}) { + if (options.interactive === undefined) { options.interactive = false; } diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css index 05e3b10f57..efb0366488 100644 --- a/src/components/upnextdialog/upnextdialog.css +++ b/src/components/upnextdialog/upnextdialog.css @@ -1,9 +1,10 @@ -.upNextDialog { +.upNextContainer { position: fixed; - left: 0; - bottom: 0; right: 0; - padding: 1%; + bottom: 0; + width: 30em; + padding: 1em; + margin: 0 2em 2em 0; display: flex; flex-direction: column; will-change: transform, opacity; @@ -22,13 +23,18 @@ font-weight: 500; } -.upNextDialog-poster { - max-width: 40%; - max-height: 15%; - position: relative; - margin-right: 1em; - flex-shrink: 0; - margin-bottom: 0.5em; +.upNextDialog-nextVideoText, +.upNextDialog-title { + width: 25.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.upNextDialog-buttons { + width: 29.75em; + justify-content: end; + align-content: flex-end; } .upNextDialog-button { @@ -40,34 +46,4 @@ .upNextDialog { flex-direction: row; } - - .upNextDialog-poster { - max-width: initial; - max-height: initial; - width: 10%; - margin-bottom: 0; - } -} - -@media all and (max-width: 50em) { - .upNextDialog-overview { - display: none !important; - } -} - -.upNextDialog-poster-img { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: auto; - width: 100%; - box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); - user-drag: none; - border: 0; - user-select: none; - -moz-user-select: none; - -webkit-user-drag: none; - -webkit-user-select: none; - -ms-user-select: none; } diff --git a/src/components/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js index 985e4fb02f..45ac72b139 100644 --- a/src/components/upnextdialog/upnextdialog.js +++ b/src/components/upnextdialog/upnextdialog.js @@ -14,84 +14,9 @@ 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 window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - } - - if (options.type === 'Thumb') { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - - return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - - return window.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 window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } - - if (options.type === 'Primary') { - if (item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return window.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 = ''; - html += '
'; - html += '
'; - html += '
'; html += '

 

'; @@ -101,8 +26,6 @@ import 'flexStyles'; html += '
'; html += '
'; - html += '
'; - html += '
'; html += ' - - - - - - - -
+ +
+ + + +
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index a5c270bf6d..492f4aeee9 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -20,50 +20,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 window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (options.type === 'Thumb') { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - return window.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 window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } - - if (options.type === 'Primary' && item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); - } - - return null; - } - function getOpenedDialog() { return document.querySelector('.dialogContainer .dialog.opened'); } @@ -163,7 +119,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) { @@ -171,42 +126,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, { @@ -221,12 +140,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); @@ -276,7 +189,6 @@ import 'css!assets/css/videoosd'; currentItem = item; if (!item) { - setPoster(null); updateRecordingButton(null); Emby.Page.setTitle(''); nowPlayingVolumeSlider.disabled = true; @@ -313,7 +225,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); @@ -322,38 +247,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() {