Redesign OSD and Up Next dialog

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;
+    background: linear-gradient(180deg, rgba(16, 16 16, 0.75) 0%, rgba(16, 16, 16, 0.15) 80%, rgba(16, 16, 16, 0) 100%);
-    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none;
-    backdrop-filter: none !important;
+    color: #eee;
-    color: #eee !important;
+    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);
+    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: 1%;
+    padding-top: 10em;
-    display: -webkit-box;
+    padding-bottom: 1.75em;
-    display: -webkit-flex;
     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;

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

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 = '<img class="upNextDialog-poster-img" src="' + imgUrl + '" />';
-                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, {

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

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