enable shared media info

dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.css

@@ -0,0 +1,65 @@
+.mediaInfoItem {
+    margin: 0 1em 0 0;
+}
+
+iron-icon.mediaInfoItem {
+    width: 3vh;
+    height: 3vh;
+    margin-right: .6em;
+}
+
+.mediaInfoItem:last-child {
+    margin-right: 0;
+}
+
+.starRatingContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+    .starRatingContainer iron-icon {
+        color: #CB272A;
+        width: 3vh;
+        height: 3vh;
+    }
+
+.mediaInfoItem.criticRating {
+    padding-left: 3.15vh;
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: auto 2.6vh;
+    min-height: 2.6vh;
+    display: flex;
+    align-items: center;
+}
+
+.mediaInfoItem.criticRatingFresh {
+    background-image: url(fresh.png);
+}
+
+.mediaInfoItem.criticRatingRotten {
+    background-image: url(rotten.png);
+}
+
+.mediaInfoItem.timerIcon {
+    color: #CB272A;
+}
+
+.mediaInfoProgramAttribute {
+    color: yellow;
+    text-transform: uppercase;
+}
+
+.layout-tv iron-icon.mediaInfoItem {
+    width: 4vh;
+    height: 4vh;
+}
+
+.layout-tv .starRatingContainer iron-icon {
+    width: 3.4vh;
+    height: 3.4vh;
+}

dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js

@@ -1,4 +1,4 @@
-define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html'], function (datetime, globalize, embyRouter) {
+define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html', 'css!./mediainfo.css'], function (datetime, globalize, embyRouter) {
 
     function getProgramInfoHtml(item, options) {
         var html = '';
@@ -40,6 +40,17 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html']
             miscInfo.push('CH ' + item.ChannelNumber);
         }
 
+        if (item.SeriesTimerId) {
+            miscInfo.push({
+                html: '<iron-icon class="mediaInfoItem timerIcon" icon="mediainfo:fiber-smart-record"></iron-icon>'
+            });
+        }
+        else if (item.TimerId) {
+            miscInfo.push({
+                html: '<iron-icon class="mediaInfoItem timerIcon" icon="mediainfo:fiber-manual-record"></iron-icon>'
+            });
+        }
+
         html += miscInfo.map(function (m) {
             return getMediaInfoItem(m);
         }).join('');
@@ -145,6 +156,22 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html']
 
         if (item.Type == 'Program') {
 
+            if (item.IsLive) {
+                miscInfo.push({
+                    html: '<div class="mediaInfoProgramAttribute mediaInfoItem">' + globalize.translate('core#AttributeLive') + '</div>'
+                });
+            }
+            else if (item.IsPremiere) {
+                miscInfo.push({
+                    html: '<div class="mediaInfoProgramAttribute mediaInfoItem">' + globalize.translate('core#AttributePremiere') + '</div>'
+                });
+            }
+            else if (item.IsSeries && !item.IsRepeat) {
+                miscInfo.push({
+                    html: '<div class="mediaInfoProgramAttribute mediaInfoItem">' + globalize.translate('core#AttributeNew') + '</div>'
+                });
+            }
+
             if (item.PremiereDate) {
 
                 try {
@@ -201,12 +228,6 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html']
             });
         }
 
-        if (item.HasSubtitles && options.subtitles !== false) {
-            miscInfo.push({
-                html: '<iron-icon class="mediaInfoItem closedCaptionIcon" icon="core:closed-caption"></iron-icon>'
-            });
-        }
-
         if (item.Video3DFormat) {
             miscInfo.push("3D");
         }
@@ -221,6 +242,10 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html']
 
         html += getStarIconsHtml(item);
 
+        if (item.HasSubtitles && options.subtitles !== false) {
+            html += '<iron-icon class="mediaInfoItem closedCaptionIcon" icon="mediainfo:closed-caption"></iron-icon>';
+        }
+
         if (item.CriticRating && options.criticRating !== false) {
 
             if (item.CriticRating >= 60) {
@@ -295,20 +320,8 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html']
         if (rating) {
             html += '<div class="starRatingContainer mediaInfoItem">';
 
-            for (var i = 0; i < 5; i++) {
-                var starValue = (i + 1) * 2;
-
-                if (rating < starValue - 2) {
-                    html += '<iron-icon icon="core:star" class="emptyStar"></iron-icon>';
-                }
-                else if (rating < starValue) {
-                    html += '<iron-icon icon="core:star-half"></iron-icon>';
-                }
-                else {
-                    html += '<iron-icon icon="core:star"></iron-icon>';
-                }
-            }
-
+            html += '<iron-icon icon="mediainfo:star"></iron-icon>';
+            html += rating;
             html += '</div>';
         }