update media info icons

dashboard-ui/css/librarybrowser.css

@@ -12,7 +12,7 @@
 }
 
     .background-theme-b .backgroundContainer.withBackdrop {
-        background-color: rgba(6, 6,6, .72);
+        background-color: rgba(6, 6,6, .74);
     }
 
 .ui-body-b {
@@ -408,14 +408,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     background-color: #cc3333 !important;
 }
 
-.textLinkList a {
-    margin: 0 .5em;
-}
-
-    .textLinkList a:first-child {
-        margin-left: 0;
-    }
-
 @media all and (max-width: 800px) {
 
     .parentName {
@@ -805,3 +797,29 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .btnSyncComplete i {
         border-radius: 1000px;
     }
+
+.bulletSeparator {
+    margin: 0 .35em;
+}
+
+.mediaInfoIcons {
+    display: flex;
+    align-items: center;
+    margin: 1.25em 0;
+}
+
+.mediaInfoText {
+    background: rgba(31,31,31,.7);
+    padding: .2em .5em;
+    border-radius: .25em;
+    color: #ddd;
+    margin-right: .5em;
+    font-size: 94%;
+    background: rgba(170,170,190, .2);
+    display: flex;
+    align-items: center;
+}
+
+.mediaInfoText-upper {
+    text-transform: uppercase;
+}

dashboard-ui/itemdetails.html

@@ -15,13 +15,6 @@
 
                 <div class="detailLogo"></div>
 
-                <div class="syncLocalContainer hide" style="margin-top: 1em; display: inline-flex; padding: 0 .5em;">
-                    <label class="checkboxContainer" style="margin: 0;">
-                        <input type="checkbox" is="emby-checkbox" class="chkOffline" />
-                        <span>${MakeAvailableOffline}</span>
-                    </label>
-                </div>
-
                 <div class="detailSection" style="margin-bottom: 0;">
 
                     <div>
@@ -55,22 +48,30 @@
                         <button is="emby-button" type="button" class="btnDeleteItem fab mini hide" title="${DeleteMedia}"><i class="md-icon">&#xE872;</i></button>
                     </div>
 
+                    <div class="syncLocalContainer hide" style="margin: 1em 0;">
+                        <label class="checkboxContainer" style="margin: 0;">
+                            <input type="checkbox" is="emby-checkbox" class="chkOffline" />
+                            <span>${MakeAvailableOffline}</span>
+                        </label>
+                    </div>
+
                     <div class="recordingFields hide" style="margin:  .5em 0 1.5em;">
 
                     </div>
 
                     <div class="detailSectionContent">
 
-                        <p class="itemGenres textLinkList"></p>
+                        <p class="itemGenres"></p>
                         <h1 class="tagline" style="margin-bottom: .7em;"></h1>
                         <p class="artist"></p>
                         <p class="overview"></p>
-                        <p id="dateAdded"></p>
+                        <div class="mediaInfoIcons hide">
+                        </div>
                         <p id="itemBirthday"></p>
                         <p id="itemBirthLocation"></p>
                         <p id="itemDeathDate"></p>
                         <p id="seriesAirTime"></p>
-                        <p class="itemExternalLinks textLinkList"></p>
+                        <p class="itemExternalLinks"></p>
                         <p class="itemStudios"></p>
                         <p class="itemTags"></p>
                     </div>

dashboard-ui/scripts/itemdetailpage.js

@@ -119,7 +119,7 @@
 
             if (dom.getWindowSize().innerWidth >= 800) {
                 backdrop.setBackdrops([item], {
-                    blur: 24
+                    blur: 20
                 }, false);
             } else {
                 backdrop.clear();
@@ -362,7 +362,7 @@
 
         if (links.length) {
 
-            var html = links.join('•');
+            var html = links.join('<span class="bulletSeparator">&bull;</span>');
 
             linksElem.innerHTML = html;
             linksElem.classList.remove('hide');
@@ -693,13 +693,10 @@
 
         renderSeriesAirTime(page, item, isStatic);
 
-        var dateAddedElement = page.querySelector('#dateAdded');
+        if (renderDynamicMediaIcons(page, item)) {
-
+            page.querySelector('.mediaInfoIcons').classList.remove('hide');
-        if (itemHelper.enableDateAddedDisplay(item)) {
-            dateAddedElement.classList.remove('hide');
-            dateAddedElement.innerHTML = globalize.translate('DateAddedValue', datetime.toLocaleDateString(datetime.parseISO8601Date(item.DateCreated)));
         } else {
-            dateAddedElement.classList.add('hide');
+            page.querySelector('.mediaInfoIcons').classList.add('hide');
         }
 
         var artist = page.querySelectorAll('.artist');
@@ -726,6 +723,25 @@
         }
     }
 
+    function renderDynamicMediaIcons(view, item) {
+
+        var html = mediaInfo.getMediaInfoStats(item).map(function (mediaInfoItem) {
+
+            var text = mediaInfoItem.text;
+
+            if (mediaInfoItem.type === 'added') {
+                return '<div class="mediaInfoText">' + text + '</div>';
+            }
+
+            return '<div class="mediaInfoText mediaInfoText-upper">' + text + '</div>';
+
+        }).join('');
+
+        view.querySelector('.mediaInfoIcons').innerHTML = html;
+
+        return html;
+    }
+
     function renderPhotoInfo(page, item) {
 
         var html = '';
@@ -1422,7 +1438,7 @@
             }
 
             if (i > 0) {
-                html += '&bull;';
+                html += '<span class="bulletSeparator">&bull;</span>';
             }
 
             var param = item.Type == "Audio" || item.Type == "MusicArtist" || item.Type == "MusicAlbum" ? "musicgenre" : "genre";