Merge pull request #1825 from MrTimscampi/modern-osd

Redesign OSD and Up Next dialog

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;

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 += '<div class="mediaInfoItem mediaInfoText closedCaptionMediaInfoText">CC</div>';
@@ -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;
         }
 

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;
 }

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 = '<img class="upNextDialog-poster-img" src="' + imgUrl + '" />';
-                return;
-            }
-        }
-
-        osdPoster.innerHTML = '';
-    }
-
     function getHtml() {
         let html = '';
 
-        html += '<div class="upNextDialog-poster">';
-        html += '</div>';
-
         html += '<div class="flex flex-direction-column flex-grow">';
 
         html += '<h2 class="upNextDialog-nextVideoText" style="margin:.25em 0;">&nbsp;</h2>';
@@ -101,8 +26,6 @@ import 'flexStyles';
         html += '<div class="flex flex-direction-row upNextDialog-mediainfo">';
         html += '</div>';
 
-        html += '<div class="upNextDialog-overview" style="margin-top:1em;"></div>';
-
         html += '<div class="flex flex-direction-row upNextDialog-buttons" style="margin-top:1em;">';
 
         html += '<button type="button" is="emby-button" class="raised raised-mini btnStartNow upNextDialog-button">';
@@ -145,11 +68,11 @@ 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, {
+            criticRating: false,
+            originalAirDate: false,
+            starRating: false,
+            subtitles: false
         });
 
         let title = itemHelper.getDisplayName(item);

src/controllers/playback/video/index.html

@@ -1,11 +1,9 @@
 <div id="videoOsdPage" data-role="page" class="page libraryPage" data-backbutton="true">
     <div class="upNextContainer hide"></div>
     <div class="videoOsdBottom videoOsdBottom-maincontrols">
-        <div class="osdPoster"></div>
         <div class="osdControls">
             <div class="osdTextContainer osdMainTextContainer">
                 <h3 class="osdTitle"></h3>
-                <div class="osdMediaInfo"></div>
                 <div class="osdMediaStatus hide">
                     <span class="material-icons animate autorenew"></span>
                     <span>${FetchingData}</span>
@@ -16,7 +14,7 @@
 
             <div class="flex flex-direction-row align-items-center">
                 <div class="osdTextContainer startTimeText" style="margin: 0 .25em 0 0;"></div>
-                <div class="sliderContainer flex-grow" style="margin: .5em .5em .25em;">
+                <div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
                     <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
                 </div>
                 <div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
@@ -47,32 +45,18 @@
                     <span class="xlargePaperIconButton material-icons skip_next"></span>
                 </button>
 
-                <button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
-                    <span class="xlargePaperIconButton material-icons audiotrack"></span>
-                </button>
-                <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
-                    <span class="xlargePaperIconButton material-icons closed_caption"></span>
-                </button>
-
-                <button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
-                    <span class="largePaperIconButton material-icons settings"></span>
-                </button>
-                <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
-                    <span class="xlargePaperIconButton material-icons fullscreen"></span>
-                </button>
-                <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
-                    <span class="xlargePaperIconButton material-icons picture_in_picture_alt"></span>
-                </button>
-                <button is="paper-icon-button-light" class="btnAirPlay hide autoSize" title="${AirPlay}">
-                    <span class="xlargePaperIconButton material-icons airplay"></span>
-                </button>
-
                 <div class="osdTimeText">
                     <span class="osdPositionText"></span>
                     <span class="osdDurationText"></span>
                     <span class="endsAtText"></span>
                 </div>
 
+                <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
+                    <span class="xlargePaperIconButton material-icons closed_caption"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
+                    <span class="xlargePaperIconButton material-icons audiotrack"></span>
+                </button>
                 <div class="volumeButtons hide-mouse-idle-tv">
                     <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (m)">
                         <span class="xlargePaperIconButton material-icons volume_up"></span>
@@ -81,6 +65,18 @@
                         <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="osdVolumeSlider" />
                     </div>
                 </div>
+                <button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
+                    <span class="largePaperIconButton material-icons settings"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnAirPlay hide autoSize" title="${AirPlay}">
+                    <span class="xlargePaperIconButton material-icons airplay"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
+                    <span class="xlargePaperIconButton material-icons picture_in_picture_alt"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
+                    <span class="xlargePaperIconButton material-icons fullscreen"></span>
+                </button>
             </div>
         </div>
     </div>

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 = '<img src="' + imgUrl + '" />');
-                }
-            }
-
-            osdPoster.innerHTML = '';
-        }
-
         let mouseIsDown = false;
 
         function showOsd() {