enable shared media info

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.2.75",
+  "version": "1.2.87",
-  "_release": "1.2.75",
+  "_release": "1.2.87",
   "_resolution": {
     "type": "version",
-    "tag": "1.2.75",
+    "tag": "1.2.87",
-    "commit": "122d3aaefc1fe36b22916f03dac5eea73fbb2ba7"
+    "commit": "21a6cacb0ec2cf301045a5fb35192753efd71025"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

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

@@ -83,37 +83,6 @@
     background-color: #0B487D;
 }
 
-.timerCircle {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-    background: #cc0000;
-    border: 1px solid #cc3333;
-    margin-left: 1em;
-}
-
-.seriesTimerCircle {
-    position: relative;
-    margin-left: 0;
-    left: 21px;
-    opacity: .3;
-}
-
-.itemMiscInfo .seriesTimerCircle:first-child {
-    margin-left: 1em;
-}
-
-.seriesTimerCircle + .seriesTimerCircle {
-    opacity: .65;
-    left: 0;
-}
-
-    .seriesTimerCircle + .seriesTimerCircle + .seriesTimerCircle {
-        opacity: 1;
-        left: -21px;
-    }
-
 .channelTimeslotHeader {
     float: left;
 }
@@ -122,10 +91,6 @@
     white-space: nowrap;
 }
 
-.mobileGuide .timeslotHeaders {
-    overflow-x: hidden;
-}
-
 .programContainer {
     white-space: nowrap;
     position: relative;

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++) {
+            html += '<iron-icon icon="mediainfo:star"></iron-icon>';
-                var starValue = (i + 1) * 2;
+            html += rating;
-
-                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 += '</div>';
         }
 

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

@@ -490,7 +490,9 @@ define(['loading', 'viewManager', 'skinManager', 'pluginManager', 'backdrop', 'b
         if (typeof (item) === 'string') {
             require(['connectionManager'], function (connectionManager) {
                 var apiClient = serverId ? connectionManager.getApiClient(serverId) : connectionManager.currentApiClient();
-                apiClient.getItem(apiClient.getCurrentUserId(), item).then(showItem);
+                apiClient.getItem(apiClient.getCurrentUserId(), item).then(function (item) {
+                    embyRouter.showItem(item);
+                });
             });
         } else {
             skinManager.getCurrentSkin().showItem(item);

dashboard-ui/components/recordingcreator/recordingcreator.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'jQuery', 'scripts/livetvcomponents', 'livetvcss', 'paper-checkbox', 'paper-input', 'paper-icon-button-light'], function (dialogHelper, $) {
+define(['dialogHelper', 'jQuery', 'mediaInfo', 'scripts/livetvcomponents', 'livetvcss', 'paper-checkbox', 'paper-input', 'paper-icon-button-light'], function (dialogHelper, $, mediaInfo) {
 
     var currentProgramId;
     var currentDialog;
@@ -243,7 +243,8 @@
 
         $('.itemEpisodeName', context).html(program.EpisodeTitle || '');
 
-        $('.itemMiscInfo', context).html(LibraryBrowser.getMiscInfoHtml(program));
+        $('.itemMiscInfoPrimary', context).html(mediaInfo.getPrimaryMediaInfoHtml(program));
+        $('.itemMiscInfoSecondary', context).html(mediaInfo.getSecondaryMediaInfoHtml(program));
 
         $('.itemMiscInfo a').each(function () {
             $(this).replaceWith(this.innerHTML);

dashboard-ui/components/recordingcreator/recordingcreator.template.html

@@ -7,9 +7,10 @@
 
 <form class="liveTvNewRecordingForm" style="margin: 0 auto;">
 
-    <p><span class="itemName inlineItemName"></span></p>
+    <h1 class="itemName" style="margin:0;"></h1>
     <p class="itemEpisodeName"></p>
-    <p class="itemMiscInfo"></p>
+    <p class="itemMiscInfo itemMiscInfoPrimary"></p>
+    <p class="itemMiscInfo itemMiscInfoSecondary"></p>
 
     <div style="display: none;" id="eligibleForSeriesFields">
         <br />

dashboard-ui/components/recordingeditor/recordingeditor.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'loading', 'jQuery', 'paper-checkbox', 'paper-input', 'emby-collapsible', 'paper-button', 'paper-icon-button-light'], function (dialogHelper, loading, $) {
+define(['dialogHelper', 'loading', 'jQuery', 'mediaInfo', 'paper-checkbox', 'paper-input', 'emby-collapsible', 'paper-button', 'paper-icon-button-light'], function (dialogHelper, loading, $, mediaInfo) {
 
     var currentDialog;
     var recordingUpdated = false;
@@ -12,8 +12,6 @@
 
         $('.itemEpisodeName', context).html(programInfo.EpisodeTitle || '');
 
-        $('.itemCommunityRating', context).html(LibraryBrowser.getRatingHtml(programInfo));
-
         LibraryBrowser.renderGenres($('.itemGenres', context), programInfo);
         LibraryBrowser.renderOverview(context.querySelectorAll('.itemOverview'), programInfo);
 
@@ -33,7 +31,8 @@
             $('.timerPageImageContainer', context).hide();
         }
 
-        $('.itemMiscInfo', context).html(LibraryBrowser.getMiscInfoHtml(programInfo));
+        $('.itemMiscInfoPrimary', context).html(mediaInfo.getPrimaryMediaInfoHtml(programInfo));
+        $('.itemMiscInfoSecondary', context).html(mediaInfo.getSecondaryMediaInfoHtml(programInfo));
 
         $('#txtPrePaddingMinutes', context).val(item.PrePaddingSeconds / 60);
         $('#txtPostPaddingMinutes', context).val(item.PostPaddingSeconds / 60);

dashboard-ui/components/recordingeditor/recordingeditor.template.html

@@ -16,12 +16,10 @@
         <div style="display: none; vertical-align: top; margin-right: 1em; padding-top: 1em;" class="timerPageImageContainer">
         </div>
         <div style="display: inline-block; vertical-align: middle;">
-            <p><span class="itemName inlineItemName"></span></p>
+            <h1 class="itemName" style="margin:0;"></h1>
             <p class="itemEpisodeName"></p>
-            <p class="itemMiscInfo miscTvProgramInfo"></p>
+            <p class="itemMiscInfo itemMiscInfoPrimary"></p>
-            <p>
+            <p class="itemMiscInfo itemMiscInfoSecondary"></p>
-                <span class="itemCommunityRating"></span>
-            </p>
             <p class="itemGenres"></p>
         </div>
     </div>

dashboard-ui/css/site.css

@@ -304,6 +304,11 @@ body {
         overflow-y: auto !important;
     }
 
+iron-icon {
+    min-width: 24px;
+    min-height: 24px;
+}
+
 /* Without this, no content will be displayed in mobile safari */
 .pageContainer {
     overflow-x: visible !important;

dashboard-ui/itemdetails.html

@@ -16,11 +16,10 @@
         </div>
         <div class="primaryDetailsContainer">
             <div class="detailNameContainer">
-                <div><span class="parentName"></span><span class="itemName inlineItemName"></span></div>
+                <div class="parentName"></div>
-                <div class="desktopDetails" style="margin-top:1em;">
+                <h1 class="itemName" style="margin:0;"></h1>
+                <div class="desktopDetails itemMiscInfo" style="margin-top:.5em;">
 
-                    <span class="itemMiscInfo"></span>
-                    <span class="itemCommunityRating" style="margin-left:1em;"></span>
                 </div>
             </div>
             <div class="desktopDetails" style="padding-top:5px;">
@@ -42,9 +41,7 @@
 
     <div class="mobileDetails" style="text-align:center;clear:both;">
         <div style="height:10px;"></div>
-        <div>
+        <div class="itemMiscInfo">
-            <span class="itemMiscInfo"></span>
-            <span class="itemCommunityRating" style="margin-left:1em;"></span>
         </div>
         <div class="detailButtonsContainer">
             <br />
@@ -70,7 +67,6 @@
                 <p id="itemBirthLocation"></p>
                 <p id="itemDeathDate"></p>
                 <p id="seriesAirTime"></p>
-                <p class="airDate"></p>
                 <p class="itemOverview topOverview"></p>
             </div>
             <div class="collectionItems"></div>

dashboard-ui/livetvseriestimer.html

@@ -3,7 +3,7 @@
     <div data-role="content">
 
         <div class="readOnlyContent" style="margin:auto; max-width: 720px;">
-            <p><span class="itemName inlineItemName"></span></p>
+            <h1 class="itemName" style="margin:0;"></h1>
 
             <p class="channel" style="margin-top: 2em;"></p>
             <p class="time"></p>

dashboard-ui/scripts/itemdetailpage.js

@@ -1,4 +1,4 @@
-define(['layoutManager', 'datetime', 'jQuery', 'scrollStyles'], function (layoutManager, datetime, $) {
+define(['layoutManager', 'datetime', 'jQuery', 'mediaInfo', 'scrollStyles'], function (layoutManager, datetime, $, mediaInfo) {
 
     var currentItem;
 
@@ -171,8 +171,6 @@
                 $('.chapterSettingsButton', page).hide();
             }
 
-            LiveTvHelpers.renderOriginalAirDate($('.airDate', page), item);
-
             if (item.Type == "Person" && item.PremiereDate) {
 
                 try {
@@ -467,11 +465,13 @@
             bottomOverview.classList.add('hide');
         }
 
-        $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item));
-
         LibraryBrowser.renderAwardSummary($('#awardSummary', page), item);
 
-        $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
+        $('.itemMiscInfo', page).each(function () {
+            mediaInfo.fillPrimaryMediaInfo(this, item, {
+                interactive: true
+            });
+        });
 
         LibraryBrowser.renderGenres($('.itemGenres', page), item, null, isStatic);
         LibraryBrowser.renderStudios($('.itemStudios', page), item, isStatic);
@@ -1319,7 +1319,7 @@
             IncludeItemTypes: "MusicVideo",
             Recursive: true,
             Fields: "DateCreated,SyncInfo,CanDelete",
-            Albums: item.Name
+            AlbumNames: item.Name
 
         }).then(function (result) {
             if (result.Items.length) {

dashboard-ui/scripts/librarybrowser.js

@@ -1,4 +1,4 @@
-define(['playlistManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'jQuery', 'itemHelper', 'scrollStyles'], function (playlistManager, appSettings, appStorage, appHost, datetime, $, itemHelper) {
+define(['playlistManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'jQuery', 'itemHelper', 'mediaInfo', 'scrollStyles'], function (playlistManager, appSettings, appStorage, appHost, datetime, $, itemHelper, mediaInfo) {
 
     function parentWithClass(elem, className) {
 
@@ -1363,7 +1363,9 @@
                         }
                     }
                     else {
-                        textlines.push(LibraryBrowser.getMiscInfoHtml(item));
+                        textlines.push('<div class="itemMiscInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item, {
+                            endsAt: false
+                        }) + '</div>');
                     }
 
                     if (textlines.length > 2) {
@@ -2992,44 +2994,6 @@
                 });
             },
 
-            getRatingHtml: function (item, metascore) {
-
-                var html = "";
-
-                if (item.CommunityRating) {
-
-                    html += "<div class='starRating' title='" + item.CommunityRating + "'></div>";
-                    html += '<div class="starRatingValue">';
-                    html += item.CommunityRating.toFixed(1);
-                    html += '</div>';
-                }
-
-                if (item.CriticRating != null) {
-
-                    if (item.CriticRating >= 60) {
-                        html += '<div class="fresh rottentomatoesicon" title="Rotten Tomatoes"></div>';
-                    } else {
-                        html += '<div class="rotten rottentomatoesicon" title="Rotten Tomatoes"></div>';
-                    }
-
-                    html += '<div class="criticRating" title="Rotten Tomatoes">' + item.CriticRating + '%</div>';
-                }
-
-                //if (item.Metascore && metascore !== false) {
-
-                //    if (item.Metascore >= 60) {
-                //        html += '<div class="metascore metascorehigh" title="Metascore">' + item.Metascore + '</div>';
-                //    }
-                //    else if (item.Metascore >= 40) {
-                //        html += '<div class="metascore metascoremid" title="Metascore">' + item.Metascore + '</div>';
-                //    } else {
-                //        html += '<div class="metascore metascorelow" title="Metascore">' + item.Metascore + '</div>';
-                //    }
-                //}
-
-                return html;
-            },
-
             getItemProgressBarHtml: function (item) {
 
 
@@ -3288,180 +3252,6 @@
                 detailImageProgressContainer.innerHTML = progressHtml || '';
             },
 
-            getMiscInfoHtml: function (item) {
-
-                var miscInfo = [];
-                var text, date;
-
-                if (item.IsSeries && !item.IsRepeat) {
-
-                    require(['livetvcss']);
-                    miscInfo.push('<span class="newTvProgram">' + Globalize.translate('AttributeNew') + '</span>');
-
-                }
-
-                if (item.IsLive) {
-
-                    miscInfo.push('<span class="liveTvProgram">' + Globalize.translate('AttributeLive') + '</span>');
-
-                }
-
-                if (item.ChannelId && item.ChannelName) {
-                    if (item.Type == 'Program' || item.Type == 'Recording') {
-                        miscInfo.push('<a class="textlink" href="itemdetails.html?id=' + item.ChannelId + '">' + item.ChannelName + '</a>');
-                    }
-                }
-
-                if (item.Type == "Episode" || item.MediaType == 'Photo') {
-
-                    if (item.PremiereDate) {
-
-                        try {
-                            date = datetime.parseISO8601Date(item.PremiereDate, true);
-
-                            text = date.toLocaleDateString();
-                            miscInfo.push(text);
-                        }
-                        catch (e) {
-                            console.log("Error parsing date: " + item.PremiereDate);
-                        }
-                    }
-                }
-
-                if (item.StartDate) {
-
-                    try {
-                        date = datetime.parseISO8601Date(item.StartDate, true);
-
-                        text = date.toLocaleDateString();
-                        miscInfo.push(text);
-
-                        if (item.Type != "Recording") {
-                            text = datetime.getDisplayTime(date);
-                            miscInfo.push(text);
-                        }
-                    }
-                    catch (e) {
-                        console.log("Error parsing date: " + item.PremiereDate);
-                    }
-                }
-
-                if (item.ProductionYear && item.Type == "Series") {
-
-                    if (item.Status == "Continuing") {
-                        miscInfo.push(Globalize.translate('ValueSeriesYearToPresent', item.ProductionYear));
-
-                    }
-                    else if (item.ProductionYear) {
-
-                        text = item.ProductionYear;
-
-                        if (item.EndDate) {
-
-                            try {
-
-                                var endYear = datetime.parseISO8601Date(item.EndDate, true).getFullYear();
-
-                                if (endYear != item.ProductionYear) {
-                                    text += "-" + datetime.parseISO8601Date(item.EndDate, true).getFullYear();
-                                }
-
-                            }
-                            catch (e) {
-                                console.log("Error parsing date: " + item.EndDate);
-                            }
-                        }
-
-                        miscInfo.push(text);
-                    }
-                }
-
-                if (item.Type != "Series" && item.Type != "Episode" && item.MediaType != 'Photo') {
-
-                    if (item.ProductionYear) {
-
-                        miscInfo.push(item.ProductionYear);
-                    }
-                    else if (item.PremiereDate) {
-
-                        try {
-                            text = datetime.parseISO8601Date(item.PremiereDate, true).getFullYear();
-                            miscInfo.push(text);
-                        }
-                        catch (e) {
-                            console.log("Error parsing date: " + item.PremiereDate);
-                        }
-                    }
-                }
-
-                var minutes;
-
-                if (item.RunTimeTicks && item.Type != "Series") {
-
-                    if (item.Type == "Audio") {
-
-                        miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
-
-                    } else {
-                        minutes = item.RunTimeTicks / 600000000;
-
-                        minutes = minutes || 1;
-
-                        miscInfo.push(Math.round(minutes) + "min");
-                    }
-                }
-
-                if (item.CumulativeRunTimeTicks && item.Type != "Series" && item.Type != "Season") {
-
-                    miscInfo.push(datetime.getDisplayRunningTime(item.CumulativeRunTimeTicks));
-                }
-
-                if (item.OfficialRating && item.Type !== "Season" && item.Type !== "Episode") {
-                    miscInfo.push(item.OfficialRating);
-                }
-
-                if (item.IsHD) {
-
-                    miscInfo.push(Globalize.translate('LabelHDProgram'));
-                }
-
-                //if (item.Audio) {
-
-                //    miscInfo.push(item.Audio);
-
-                //}
-
-                if (item.Video3DFormat) {
-                    miscInfo.push("3D");
-                }
-
-                if (item.MediaType == 'Photo' && item.Width && item.Height) {
-                    miscInfo.push(item.Width + "x" + item.Height);
-                }
-
-                if (item.SeriesTimerId) {
-                    var html = '';
-                    html += '<a href="livetvseriestimer.html?id=' + item.SeriesTimerId + '" title="' + Globalize.translate('ButtonViewSeriesRecording') + '">';
-                    html += '<div class="timerCircle seriesTimerCircle"></div>';
-                    html += '<div class="timerCircle seriesTimerCircle"></div>';
-                    html += '<div class="timerCircle seriesTimerCircle"></div>';
-                    html += '</a>';
-                    miscInfo.push(html);
-                    require(['livetvcss']);
-                }
-                else if (item.TimerId) {
-
-                    var html = '';
-                    html += '<button type="button" class="clearButton" onclick="LibraryBrowser.editTimer(\'' + item.TimerId + '\');">';
-                    html += '<div class="timerCircle"></div>';
-                    html += '</button>';
-                    miscInfo.push(html);
-                    require(['livetvcss']);
-                }
-
-                return miscInfo.join('&nbsp;&nbsp;&nbsp;&nbsp;');
-            },
-
             renderOverview: function (elems, item) {
 
                 for (var i = 0, length = elems.length; i < length; i++) {

dashboard-ui/scripts/librarylist.js

@@ -1,4 +1,4 @@
-define(['appSettings', 'appStorage', 'libraryBrowser', 'apphost', 'jQuery', 'itemHelper'], function (appSettings, appStorage, LibraryBrowser, appHost, $, itemHelper) {
+define(['appSettings', 'appStorage', 'libraryBrowser', 'apphost', 'jQuery', 'itemHelper', 'mediaInfo'], function (appSettings, appStorage, LibraryBrowser, appHost, $, itemHelper, mediaInfo) {
 
     var showOverlayTimeout;
 
@@ -118,28 +118,22 @@
             html += name;
             html += '</p>';
         } else if (!isSmallItem && !isMiniItem) {
-            html += '<p class="itemMiscInfo" style="white-space:nowrap;">';
+            html += '<div class="itemMiscInfo">';
-            html += LibraryBrowser.getMiscInfoHtml(item);
+            html += mediaInfo.getPrimaryMediaInfoHtml(item, {
-            html += '</p>';
+                endsAt: false
+            });
+            html += '</div>';
         }
 
         if (!isMiniItem) {
             html += '<div style="margin:1em 0 .75em;">';
 
             if (isPortrait) {
-                html += '<div class="itemCommunityRating">';
-                html += LibraryBrowser.getRatingHtml(item, false);
-                html += '</div>';
-
                 html += '<div class="userDataIcons" style="margin:.5em 0 0em;">';
                 html += LibraryBrowser.getUserDataIconsHtml(item);
                 html += '</div>';
             } else {
 
-                html += '<span class="itemCommunityRating" style="vertical-align:middle;">';
-                html += LibraryBrowser.getRatingHtml(item, false);
-                html += '</span>';
-
                 html += '<span class="userDataIcons" style="vertical-align:middle;">';
                 html += LibraryBrowser.getUserDataIconsHtml(item);
                 html += '</span>';

dashboard-ui/scripts/livetvcomponents.js

@@ -114,25 +114,6 @@
             });
         },
 
-        renderOriginalAirDate: function (elem, item) {
-
-            var airDate = item.PremiereDate;
-
-            if (airDate && item.IsRepeat) {
-
-                try {
-                    airDate = datetime.parseISO8601Date(airDate, true).toLocaleDateString();
-                }
-                catch (e) {
-                    console.log("Error parsing date: " + airDate);
-                }
-
-
-                elem.html(Globalize.translate('ValueOriginalAirDate').replace('{0}', airDate)).show();
-            } else {
-                elem.hide();
-            }
-        },
         getTimersHtml: getTimersHtml
 
     };

dashboard-ui/scripts/mediaplayer-video.js

@@ -1,4 +1,4 @@
-define(['appSettings', 'datetime', 'jQuery', 'scrollStyles', 'paper-icon-button-light'], function (appSettings, datetime, $) {
+define(['appSettings', 'datetime', 'jQuery', 'mediaInfo', 'scrollStyles', 'paper-icon-button-light'], function (appSettings, datetime, $, mediaInfo) {
 
     function createVideoPlayer(self) {
 
@@ -444,18 +444,12 @@
             var nameHtml = MediaController.getNowPlayingNameHtml(item, false);
             nameHtml = '<div class="videoNowPlayingName">' + nameHtml + '</div>';
 
-            var miscInfo = LibraryBrowser.getMiscInfoHtml(item);
+            var miscInfo = mediaInfo.getPrimaryMediaInfoHtml(item);
             if (miscInfo) {
 
                 nameHtml += '<div class="videoNowPlayingRating">' + miscInfo + '</div>';
             }
 
-            var ratingHtml = LibraryBrowser.getRatingHtml(item);
-            if (ratingHtml) {
-
-                nameHtml += '<div class="videoNowPlayingRating">' + ratingHtml + '</div>';
-            }
-
             if (item.Overview) {
 
                 nameHtml += '<div class="videoNowPlayingOverview">' + item.Overview + '</div>';

dashboard-ui/scripts/site.js

@@ -1797,6 +1797,7 @@ var AppInfo = {};
 
         if (navigator.webkitPersistentStorage) {
             paths.imageFetcher = embyWebComponentsBowerPath + "/images/persistentimagefetcher";
+            //paths.imageFetcher = embyWebComponentsBowerPath + "/images/basicimagefetcher";
         } else if (Dashboard.isRunningInCordova()) {
             paths.imageFetcher = 'cordova/imagestore';
         } else {
@@ -1820,7 +1821,7 @@ var AppInfo = {};
 
         define("libjass", [bowerPath + "/libjass/libjass", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
 
-        define("mediaInfo", [embyWebComponentsBowerPath + "/mediaInfo/mediaInfo"], returnFirstDependency);
+        define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
         define("backdrop", [embyWebComponentsBowerPath + "/backdrop/backdrop"], returnFirstDependency);
         define("fetchHelper", [embyWebComponentsBowerPath + "/fetchhelper"], returnFirstDependency);
 
@@ -3290,12 +3291,6 @@ pageClassOn('viewshow', "page", function () {
         page.classList.remove('ui-body-a');
     }
 
-    //if (currentTheme != 'a' && !browserInfo.mobile) {
-    //    document.documentElement.classList.add('darkScrollbars');
-    //} else {
-    //    document.documentElement.classList.remove('darkScrollbars');
-    //}
-
     var apiClient = window.ApiClient;
 
     Dashboard.ensureHeader(page);

dashboard-ui/shared.html

@@ -27,11 +27,10 @@
         </div>
         <div class="primaryDetailsContainer">
             <div class="detailNameContainer">
-                <div><span class="parentName"></span><span class="itemName inlineItemName"></span></div>
+                <div class="parentName"></div>
-                <div class="desktopDetails" style="margin-top:1em;">
+                <h1 class="itemName" style="margin:0;"></h1>
+                <div class="desktopDetails itemMiscInfo" style="margin-top:.5em;">
 
-                    <span class="itemMiscInfo"></span>
-                    <span class="itemCommunityRating" style="margin-left:1em;"></span>
                 </div>
             </div>
             <div class="desktopDetails" style="padding-top:5px;">
@@ -44,9 +43,7 @@
 
     <div class="mobileDetails" style="text-align:center;clear:both;">
         <div style="height:10px;"></div>
-        <div>
+        <div class="itemMiscInfo">
-            <span class="itemMiscInfo"></span>
-            <span class="itemCommunityRating" style="margin-left:1em;"></span>
         </div>
     </div>
 
@@ -63,7 +60,6 @@
                 <p id="itemBirthLocation"></p>
                 <p id="itemDeathDate"></p>
                 <p id="seriesAirTime"></p>
-                <p class="airDate"></p>
                 <p class="itemOverview topOverview"></p>
             </div>
             <div id="castCollapsible" style="display: none;" class="detailSection">

dashboard-ui/strings/en-US.json

@@ -1887,7 +1887,6 @@
   "OptionNewPlaylist": "New playlist...",
   "MessageAddedToPlaylistSuccess": "Ok",
   "ButtonViewSeriesRecording": "View series recording",
-  "ValueOriginalAirDate": "Original air date: {0}",
   "ButtonRemoveFromPlaylist": "Remove from playlist",
   "HeaderSpecials": "Specials",
   "HeaderTrailers": "Trailers",
@@ -2097,6 +2096,9 @@
   "LabelFullReview": "Full review:",
   "LabelShortRatingDescription": "Short rating summary:",
   "OptionIRecommendThisItem": "I recommend this item",
+  "EndsAtValue": "Ends at {0}",
+  "ReleaseYearValue": "Release year: {0}",
+  "OriginalAirDateValue": "Original air date: {0}",
   "WebClientTourContent": "View your recently added media, next episodes, and more. The green circles indicate how many unplayed items you have.",
   "WebClientTourMovies": "Play movies, trailers and more from any device with a web browser",
   "WebClientTourMouseOver": "Hold the mouse over any poster for quick access to important information",