Adds Ratings to both Video Player and Up Next Dialog Window

src/components/upnextdialog/upnextdialog.js

@@ -69,9 +69,9 @@ import '../../styles/flexstyles.scss';
         const elem = instance.options.parent;
 
         elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, {
-            criticRating: false,
+            criticRating: true,
             originalAirDate: false,
-            starRating: false,
+            starRating: true,
             subtitles: false
         });
 

src/controllers/playback/video/index.html

@@ -65,6 +65,9 @@
                 <div class="osdTimeText">
                     <span class="endsAtText"></span>
                 </div>
+                
+                <div class="osdRatingsText">
+                </div>
 
                 <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
                     <span class="xlargePaperIconButton material-icons closed_caption" aria-hidden="true"></span>

src/controllers/playback/video/index.js

@@ -93,6 +93,18 @@ import { PluginType } from '../../../types/plugin.ts';
             }
 
             setTitle(displayItem, parentName);
+            ratingsText.innerHTML = mediaInfo.getPrimaryMediaInfoHtml(displayItem, {
+                officialRating: false,
+                criticRating: true,
+                starRating: true,
+                endsAt: false,
+                year: false,
+                programIndicator: false,
+                runtime: false,
+                subtitles: false,
+                originalAirDate: false,
+                episodeTitle: false
+            });
 
             const secondaryMediaInfo = view.querySelector('.osdSecondaryMediaInfo');
             const secondaryMediaInfoHtml = mediaInfo.getSecondaryMediaInfoHtml(displayItem, {
@@ -1412,6 +1424,7 @@ import { PluginType } from '../../../types/plugin.ts';
         const startTimeText = view.querySelector('.startTimeText');
         const endTimeText = view.querySelector('.endTimeText');
         const endsAtText = view.querySelector('.endsAtText');
+        const ratingsText = view.querySelector('.osdRatingsText');
         const btnRewind = view.querySelector('.btnRewind');
         const btnFastForward = view.querySelector('.btnFastForward');
         const transitionEndEventName = dom.whichTransitionEvent();

src/styles/videoosd.scss

@@ -136,12 +136,20 @@
     align-items: center;
 }
 
-.osdTimeText {
+.osdRatingsText {
+    display: flex;
+    align-items: center;
     margin-left: 1em;
     margin-right: auto;
     user-select: none;
 }
 
+.osdTimeText {
+    margin-left: 1em;
+    margin-right: 1em;
+    user-select: none;
+}
+
 .osdTitle,
 .osdTitleSmall {
     margin: 0 1em 0 0;
@@ -213,6 +221,14 @@
     .videoOsdBottom .endsAtText {
         display: none !important;
     }
+
+    .videoOsdBottom .osdRatingsText .starRatingContainer {
+        display: none !important;
+    }
+
+    .videoOsdBottom .osdRatingsText .mediaInfoCriticRating {
+        display: none !important;
+    }
 }
 
 .syncPlayContainer {