Improve Up Next dialog

src/assets/css/videoosd.css

@@ -6,18 +6,29 @@
     -ms-user-select: none;
 }
 
-.osdPoster img,
 .videoOsdBottom {
     bottom: 0;
     left: 0;
     right: 0;
+    position: fixed;
+    background: linear-gradient(0deg, rgba(16, 16, 16, 0.6) 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 {
     transition: opacity 0.3s ease-out;
     position: relative;
     z-index: 1;
-    background: linear-gradient(180deg, rgba(16, 16 16, 0.75) 0%, rgba(16, 16, 16, 0.15) 80%, rgba(16, 16, 16, 0) 100%);
+    background: linear-gradient(180deg, rgba(16, 16, 16, 0.6) 0%, rgba(16, 16, 16, 0) 100%);
     backdrop-filter: none;
     color: #eee;
     height: 7.5em;
@@ -88,21 +99,6 @@
     opacity: 0.6;
 }
 
-.videoOsdBottom {
-    position: fixed;
-    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;
-    flex-direction: row;
-    justify-content: center;
-    will-change: opacity;
-    transition: opacity 0.3s ease-out;
-    color: #fff;
-    user-select: none;
-    -webkit-touch-callout: none;
-}
-
 .videoOsdBottom-hidden {
     opacity: 0;
 }
@@ -157,27 +153,6 @@
     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('');
 
+        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,24 @@
-.upNextDialog {
-    width: 30vw;
+.upNextContainer {
+    box-sizing: border-box;
     position: fixed;
-    left: auto;
+    top: 0;
     bottom: 0;
-    right: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 1em;
+    display: flex;
+    flex-grow: 1;
+    width: calc(100vh * (16 / 9));
+    height: 100vh;
+    justify-content: end;
+    align-items: flex-end;
+}
+
+.upNextDialog-container {
+    border-radius: 5px;
+    width: 30em;
+    height: 11em;
+    left: auto;
     padding: 1%;
     display: flex;
     flex-direction: column;

src/components/upnextdialog/upnextdialog.js

@@ -17,9 +17,7 @@ import 'flexStyles';
     function getHtml() {
         let html = '';
 
-        html += '<div class="upNextDialog-poster">';
-        html += '</div>';
-
+        html += '<div class="upNextDialog-container">';
         html += '<div class="flex flex-direction-column flex-grow">';
 
         html += '<h2 class="upNextDialog-nextVideoText" style="margin:.25em 0;">&nbsp;</h2>';
@@ -29,8 +27,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">';
@@ -46,6 +42,7 @@ import 'flexStyles';
 
         // main
         html += '</div>';
+        html += '</div>';
 
         return html;
     }
@@ -73,9 +70,11 @@ import 'flexStyles';
 
         const elem = instance.options.parent;
 
-        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);