Further improvements to the details page

src/assets/css/librarybrowser.css

@@ -507,7 +507,23 @@
 
 .parentName {
     display: block;
-    margin-bottom: 0.5em;
+    margin: 0 0 0;
+}
+
+.layout-mobile .parentName {
+    margin: 0.6em 0 0;
+}
+
+.musicParentName {
+    margin: 0.15em 0 0.2em;
+}
+
+.layout-mobile .musicParentName {
+    margin: -0.25em 0 0.25em;
+}
+
+.layout-mobile .itemExternalLinks {
+    display: none;
 }
 
 .mainDetailButtons {
@@ -530,6 +546,35 @@
     font-weight: 600;
 }
 
+.itemName.originalTitle {
+    margin: 0.2em 0 0.2em;
+}
+
+.itemName.parentNameLast {
+    margin: 0 0 0;
+}
+
+.layout-mobile .itemName.parentNameLast {
+    margin: 0.4em 0 0.4em;
+}
+
+.layout-mobile h1.itemName,
+.layout-mobile h1.parentName {
+    font-size: 1.6em;
+}
+
+.itemName.parentNameLast.withOriginalTitle {
+    margin: 0 0 0;
+}
+
+.layout-mobile .itemName.parentNameLast.withOriginalTitle {
+    margin: 0.6em 0 0;
+}
+
+.layout-mobile .itemName.originalTitle {
+    margin: 0.5em 0 0.5em;
+}
+
 .nameContainer {
     display: flex;
     flex-direction: column;
@@ -557,10 +602,18 @@
 }
 
 .layout-mobile .mainDetailButtons {
-    margin-top: 2em;
+    margin-top: 1em;
     margin-bottom: 0.5em;
 }
 
+.subTitle {
+    margin: 0.15em 0 0.2em;
+}
+
+.layout-mobile .subTitle {
+    margin: 0.2em 0 0.2em;
+}
+
 .detailPagePrimaryContainer {
     display: flex;
     align-items: center;
@@ -571,7 +624,7 @@
 .layout-mobile .detailPagePrimaryContainer {
     display: block;
     position: relative;
-    padding: 2.5em 3.3% 1em;
+    padding: 0.5em 3.3% 0.5em;
 }
 
 .layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
@@ -613,6 +666,10 @@
     margin: 1.25em 0;
 }
 
+.layout-mobile .detailPageSecondaryContainer {
+    margin: 1em 0;
+}
+
 .detailImageContainer .card {
     position: absolute;
     top: 50%;
@@ -722,7 +779,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
 
 @media all and (max-width: 62.5em) {
     .parentName {
-        margin-bottom: 1em;
+        margin-bottom: 0;
     }
 
     .itemDetailPage {
@@ -983,6 +1040,10 @@ div.itemDetailGalleryLink.defaultCardBackground {
     margin-bottom: 2.7em;
 }
 
+.layout-mobile .verticalSection-extrabottompadding {
+    margin-bottom: 1em;
+}
+
 .sectionTitleButton,
 .sectionTitleIconButton {
     margin-right: 0 !important;
@@ -1008,7 +1069,12 @@ div.itemDetailGalleryLink.defaultCardBackground {
 
 div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
     margin: 0;
-    padding-top: 1.25em;
+    padding-top: 0.5em;
+}
+
+.layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards {
+    margin: 0;
+    padding-top: 0.5em;
 }
 
 .sectionTitleButton {

src/components/actionSheet/actionSheet.js

@@ -16,7 +16,7 @@ function getOffsets(elems) {
         return results;
     }
 
-    for (let elem of elems) {
+    for (const elem of elems) {
         let box = elem.getBoundingClientRect();
 
         results.push({
@@ -135,7 +135,7 @@ export function show(options) {
     let renderIcon = false;
     let icons = [];
     let itemIcon;
-    for (let item of options.items) {
+    for (const item of options.items) {
 
         itemIcon = item.icon || (item.selected ? 'check' : null);
 

src/components/groupedcards.js

@@ -22,7 +22,7 @@ define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, conn
                     return void appRouter.showItem(items[0]);
                 }
 
-                var url = 'itemdetails.html?id=' + itemId + '&serverId=' + serverId;
+                var url = 'details?id=' + itemId + '&serverId=' + serverId;
                 Dashboard.navigate(url);
             });
             e.stopPropagation();

src/components/itemHelper.js

@@ -1,14 +1,12 @@
 define(['apphost', 'globalize'], function (appHost, globalize) {
     'use strict';
 
-    function getDisplayName(item, options) {
+    function getDisplayName(item, options = {}) {
 
         if (!item) {
             throw new Error('null item passed into getDisplayName');
         }
 
-        options = options || {};
-
         if (item.Type === 'Timer') {
             item = item.ProgramInfo || item;
         }

src/components/remotecontrol/remotecontrol.js

@@ -122,10 +122,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                     var artistName;
                     if (item.ArtistItems != null) {
                         artistName = item.ArtistItems[0].Name;
-                        context.querySelector('.nowPlayingAlbum').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}">${albumName}</a>`;
+                        context.querySelector('.nowPlayingAlbum').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}">${albumName}</a>`;
-                        context.querySelector('.nowPlayingArtist').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}">${artistName}</a>`;
+                        context.querySelector('.nowPlayingArtist').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}">${artistName}</a>`;
-                        context.querySelector('.contextMenuAlbum').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}"><span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons album"></span> ` + globalize.translate('ViewAlbum') + '</a>';
+                        context.querySelector('.contextMenuAlbum').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}"><span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons album"></span> ` + globalize.translate('ViewAlbum') + '</a>';
-                        context.querySelector('.contextMenuArtist').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}"><span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons person"></span> ` + globalize.translate('ViewArtist') + '</a>';
+                        context.querySelector('.contextMenuArtist').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}"><span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons person"></span> ` + globalize.translate('ViewArtist') + '</a>';
                     } else {
                         artistName = item.Artists;
                         context.querySelector('.nowPlayingAlbum').innerHTML = albumName;
@@ -136,12 +136,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             } else if (item.Type == 'Episode') {
                 if (item.SeasonName != null) {
                     var seasonName = item.SeasonName;
-                    context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeasonId + `&amp;serverId=${nowPlayingServerId}">${seasonName}</a>`;
+                    context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeasonId + `&amp;serverId=${nowPlayingServerId}">${seasonName}</a>`;
                 }
                 if (item.SeriesName != null) {
                     var seriesName = item.SeriesName;
                     if (item.SeriesId != null) {
-                        context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeriesId + `&amp;serverId=${nowPlayingServerId}">${seriesName}</a>`;
+                        context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeriesId + `&amp;serverId=${nowPlayingServerId}">${seriesName}</a>`;
                     } else {
                         context.querySelector('.nowPlayingSerie').innerHTML = seriesName;
                     }

src/controllers/itemDetails/itemDetails.html

@@ -1,8 +1,5 @@
 <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
     <div id="itemBackdrop" class="itemBackdrop">
-        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
-            <span class="material-icons play_arrow"></span>
-        </button>
     </div>
 
     <div class="detailLogo"></div>
@@ -15,87 +12,75 @@
             </div>
 
             <div class="mainDetailButtons">
-                <button is="emby-button" type="button" class="button-flat btnResume hide detailButton detailButtonHideonMobile" data-mode="resume">
+                <button is="emby-button" type="button" class="button-flat btnResume hide detailButton" data-mode="resume">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon play_arrow"></span>
-                        <div class="detailButton-text">${ButtonResume}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton detailButtonHideonMobile" data-mode="play">
+                <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" data-mode="play">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon play_arrow"></span>
-                        <div class="detailButton-text">${ButtonPlay}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon get_app"></span>
-                        <div class="detailButton-text">${ButtonDownload}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon theaters"></span>
-                        <div class="detailButton-text">${ButtonTrailer}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon explore"></span>
-                        <div class="detailButton-text">${HeaderInstantMix}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon shuffle"></span>
-                        <div class="detailButton-text">${ButtonShuffle}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon delete"></span>
-                        <div class="detailButton-text">${CancelSeries}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon stop"></span>
-                        <div class="detailButton-text">${StopRecording}</div>
                     </div>
                 </button>
 
                 <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon check"></span>
-                        <div class="detailButton-text button-text"></div>
                     </div>
                 </button>
 
                 <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon favorite"></span>
-                        <div class="detailButton-text button-text">${Rate}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon call_split"></span>
-                        <div class="detailButton-text">${ButtonSplit}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon more_vert"></span>
-                        <div class="detailButton-text">${ButtonMore}</div>
                     </div>
                 </button>
             </div>
@@ -166,7 +151,7 @@
                     <div class="seriesTimerSchedule padded-right"></div>
                 </div>
 
-                <div class="collectionItems"></div>
+                <div class="collectionItems hide"></div>
 
                 <div class="nextUpSection verticalSection detailVerticalSection hide">
                     <h2 class="sectionTitle sectionTitle-cards">${HeaderNextUp}</h2>
@@ -178,7 +163,7 @@
                 </div>
 
                 <div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
-                    <h2 class="childrenSectionHeader sectionTitle sectionTitle-cards">
+                    <h2 class="childrenSectionHeader sectionTitle sectionTitle-cards hide">
                         <span id="childrenTitle"></span>
                     </h2>
                     <div id="childrenContent">

src/controllers/itemDetails/itemDetails.js

@@ -28,15 +28,11 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
     }
 
     function hideAll(page, className, show) {
-        var i;
+        for (const elem of page.querySelectorAll('.' + className)) {
-        var length;
-        var elems = page.querySelectorAll('.' + className);
-
-        for (i = 0, length = elems.length; i < length; i++) {
             if (show) {
-                elems[i].classList.remove('hide');
+                elem.classList.remove('hide');
             } else {
-                elems[i].classList.add('hide');
+                elem.classList.add('hide');
             }
         }
     }
@@ -75,7 +71,9 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             moreButton: false,
             recordButton: false
         });
-        return html += '</div>';
+        html += '</div>';
+
+        return html;
     }
 
     function renderSeriesTimerSchedule(page, apiClient, seriesTimerId) {
@@ -143,9 +141,13 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
 
         var mediaSources = item.MediaSources;
         instance._currentPlaybackMediaSources = mediaSources;
+
         page.querySelector('.trackSelections').classList.remove('hide');
+
         select.setLabel(globalize.translate('LabelVersion'));
+
         var currentValue = select.value;
+
         var selectedId = mediaSources[0].Id;
         select.innerHTML = mediaSources.map(function (v) {
             var selected = v.Id === selectedId ? ' selected' : '';
@@ -242,12 +244,24 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         select.setLabel(globalize.translate('LabelSubtitles'));
         var selectedId = null == mediaSource.DefaultSubtitleStreamIndex ? -1 : mediaSource.DefaultSubtitleStreamIndex;
 
-        if (tracks.length) {
+        var videoTracks = mediaSource.MediaStreams.filter(function (m) {
+            return 'Video' === m.Type;
+        });
+
+        // This only makes sence on Video items
+        if (videoTracks.length) {
             var selected = -1 === selectedId ? ' selected' : '';
             select.innerHTML = '<option value="-1">' + globalize.translate('Off') + '</option>' + tracks.map(function (v) {
                 selected = v.Index === selectedId ? ' selected' : '';
                 return '<option value="' + v.Index + '" ' + selected + '>' + v.DisplayTitle + '</option>';
             }).join('');
+
+            if (tracks.length > 1) {
+                select.removeAttribute('disabled');
+            } else {
+                select.setAttribute('disabled', 'disabled');
+            }
+
             page.querySelector('.selectSubtitlesContainer').classList.remove('hide');
         } else {
             select.innerHTML = '';
@@ -278,7 +292,12 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             var enableShuffle = item.IsFolder || -1 !== ['MusicAlbum', 'MusicGenre', 'MusicArtist'].indexOf(item.Type);
             hideAll(page, 'btnShuffle', enableShuffle);
             canPlay = true;
-            hideAll(page, 'btnResume', item.UserData && item.UserData.PlaybackPositionTicks > 0);
+            if (item.UserData && item.UserData.PlaybackPositionTicks > 0) {
+                hideAll(page, 'btnResume', true);
+                for (const elem of page.querySelectorAll('.btnPlay')) {
+                    elem.querySelector('.detailButton-icon').classList.replace('play_arrow', 'replay');
+                }
+            }
         } else {
             hideAll(page, 'btnPlay');
             hideAll(page, 'btnResume');
@@ -324,8 +343,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
     function getArtistLinksHtml(artists, serverId, context) {
         var html = [];
 
-        for (var i = 0, length = artists.length; i < length; i++) {
+        for (const artist of artists) {
-            var artist = artists[i];
             var href = appRouter.getRouteUrl(artist, {
                 context: context,
                 itemType: 'MusicArtist',
@@ -333,8 +351,9 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             });
             html.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + href + '">' + artist.Name + '</a>');
         }
+        html = html.join(' / ');
 
-        return html = html.join(' / ');
+        return html;
     }
 
     /**
@@ -371,6 +390,8 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
 
         if (item.SeriesName && 'Season' === item.Type) {
             parentRoute = appRouter.getRouteUrl({
+                Id: item.SeriesId,
+                Name: item.SeriesName,
                 Type: 'Series',
                 IsFolder: true,
                 ServerId: item.ServerId
@@ -414,36 +435,33 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             if (parentNameLast) {
                 // Music
                 if (layoutManager.mobile) {
-                    html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join('</br>') + '</h3>';
+                    html = '<h3 class="parentName musicParentName">' + parentNameHtml.join('</br>') + '</h3>';
                 } else {
-                    html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join(' - ') + '</h3>';
+                    html = '<h3 class="parentName musicParentName">' + parentNameHtml.join(' - ') + '</h3>';
                 }
             } else {
-                if (layoutManager.mobile) {
+                html = '<h1 class="parentName">' + tvShowHtml + '</h1>';
-                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join('</br>') + '</h1>';
-                } else {
-                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + tvShowHtml + '</h1>';
-                }
             }
         }
 
         var name = itemHelper.getDisplayName(item, {
             includeParentInfo: false
         });
-        var offset = parentNameLast ? '.25em' : '.5em';
 
         if (html && !parentNameLast) {
-            if (!layoutManager.mobile && tvSeasonHtml) {
+            if (tvSeasonHtml) {
-                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + tvSeasonHtml + ' - ' + name + '</h3>';
+                html += '<h3 class="itemName infoText subTitle">' + tvSeasonHtml + ' - ' + name + '</h3>';
             } else {
-                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
+                html += '<h3 class="itemName infoText subTitle">' + name + '</h3>';
             }
+        } else if (item.OriginalTitle && item.OriginalTitle != item.Name) {
+            html = '<h1 class="itemName infoText parentNameLast withOriginalTitle">' + name + '</h1>' + html;
         } else {
-            html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + ';">' + name + '</h1>' + html;
+            html = '<h1 class="itemName infoText parentNameLast">' + name + '</h1>' + html;
         }
 
         if (item.OriginalTitle && item.OriginalTitle != item.Name) {
-            html += '<h4 class="itemName infoText" style="margin: -0.75em 0 0.25em;">' + item.OriginalTitle + '</h4>';
+            html += '<h4 class="itemName infoText originalTitle">' + item.OriginalTitle + '</h4>';
         }
 
         container.innerHTML = html;
@@ -511,7 +529,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         Emby.Page.setTitle('');
 
         // Start rendering the artwork first
-        renderImage(page, item, apiClient, user);
+        renderImage(page, item);
         renderLogo(page, item, apiClient);
         renderBackdrop(item);
         renderDetailPageBackdrop(page, item, apiClient);
@@ -672,7 +690,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         }
 
         if (item.ExternalUrls) {
-            for (let url of item.ExternalUrls) {
+            for (const url of item.ExternalUrls) {
                 links.push(`<a is="emby-linkbutton" class="button-link" href="${url.Url}" target="_blank">${url.Name}</a>`);
             }
         }
@@ -691,7 +709,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         }
     }
 
-    function renderDetailImage(page, elem, item, apiClient, editable, imageLoader, indicators) {
+    function renderDetailImage(elem, item, imageLoader) {
         elem.classList.add('detailimg-hidemobile');
 
         const itemArray = [];
@@ -713,15 +731,11 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         imageLoader.lazyChildren(elem);
     }
 
-    function renderImage(page, item, apiClient, user) {
+    function renderImage(page, item) {
         renderDetailImage(
-            page,
             page.querySelector('.detailImageContainer'),
             item,
-            apiClient,
+            imageLoader
-            user.Policy.IsAdministrator && 'Photo' != item.MediaType,
-            imageLoader,
-            indicators
         );
     }
 
@@ -840,7 +854,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
     function renderOverview(page, item) {
         var overviewElemnts = page.querySelectorAll('.overview');
 
-        for (let overviewElemnt of overviewElemnts) {
+        for (const overviewElemnt of overviewElemnts) {
             var overview = item.Overview || '';
 
             if (overview) {
@@ -861,10 +875,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
 
                 expandButton.addEventListener('click', toggleLineClamp.bind(null, overviewElemnt));
 
-                var anchors = overviewElemnt.querySelectorAll('a');
+                for (const anchor of overviewElemnt.querySelectorAll('a')) {
-
-                var anchors = overviewElemnt.querySelectorAll('a');
-                for (let anchor of anchors) {
                     anchor.setAttribute('target', '_blank');
                 }
             } else {
@@ -874,19 +885,9 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         }
     }
 
-    function renderGenres(page, item, context) {
+    function renderGenres(page, item, context = inferContext(item)) {
-        context = context || inferContext(item);
-        var type;
         var genres = item.GenreItems || [];
-
+        var type = context === 'music' ? 'MusicGenre' : 'Genre';
-        switch (context) {
-            case 'music':
-                type = 'MusicGenre';
-                break;
-
-            default:
-                type = 'Genre';
-        }
 
         var html = genres.map(function (p) {
             return '<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + appRouter.getRouteUrl({
@@ -973,7 +974,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
     function renderMiscInfo(page, item) {
         const primaryItemMiscInfo = page.querySelectorAll('.itemMiscInfo-primary');
 
-        for (let miscInfo of primaryItemMiscInfo) {
+        for (const miscInfo of primaryItemMiscInfo) {
             mediaInfo.fillPrimaryMediaInfo(miscInfo, item, {
                 interactive: true,
                 episodeTitle: false,
@@ -989,7 +990,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
 
         const secondaryItemMiscInfo = page.querySelectorAll('.itemMiscInfo-secondary');
 
-        for (let miscInfo of secondaryItemMiscInfo) {
+        for (const miscInfo of secondaryItemMiscInfo) {
             mediaInfo.fillSecondaryMediaInfo(miscInfo, item, {
                 interactive: true
             });
@@ -1313,8 +1314,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                     action: 'playallfromhere',
                     image: false,
                     artist: 'auto',
-                    containerAlbumArtists: item.AlbumArtists,
+                    containerAlbumArtists: item.AlbumArtists
-                    addToListButton: true
                 });
                 isList = true;
             } else if ('Series' == item.Type) {
@@ -1588,12 +1588,10 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
     }
 
     function renderCollectionItems(page, parentItem, types, items) {
+        page.querySelector('.collectionItems').classList.remove('hide');
         page.querySelector('.collectionItems').innerHTML = '';
-        var i;
-        var length;
 
-        for (i = 0, length = types.length; i < length; i++) {
+        for (const type of types) {
-            var type = types[i];
             var typeItems = filterItemsByCollectionItemType(items, type);
 
             if (typeItems.length) {
@@ -1626,8 +1624,8 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             renderChildren(page, parentItem);
         };
 
-        for (i = 0, length = containers.length; i < length; i++) {
+        for (const container of containers) {
-            containers[i].notifyRefreshNeeded = notifyRefreshNeeded;
+            container.notifyRefreshNeeded = notifyRefreshNeeded;
         }
 
         // if nothing in the collection can be played hide play and shuffle buttons
@@ -1794,7 +1792,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
     function bindAll(view, selector, eventName, fn) {
         var elems = view.querySelectorAll(selector);
 
-        for (let elem of elems) {
+        for (const elem of elems) {
             elem.addEventListener(eventName, fn);
         }
     }
@@ -1814,10 +1812,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             Promise.all([getPromise(apiClient, params), apiClient.getCurrentUser()]).then(([item, user]) => {
                 currentItem = item;
                 reloadFromItem(instance, page, params, item, user);
-
-                let detailImageContainer = page.querySelector('.detailImageContainer');
-                const overlayPlayButton = detailImageContainer.querySelector('.cardOverlayFab-primary');
-                overlayPlayButton.addEventListener('click', onPlayClick);
             }).catch((error) => {
                 console.error('failed to get item or current user: ', error);
             });
@@ -1885,15 +1879,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             playbackManager.shuffle(currentItem);
         }
 
-        function onDeleteClick() {
-            require(['deleteHelper'], function (deleteHelper) {
-                deleteHelper.deleteItem({
-                    item: currentItem,
-                    navigate: true
-                });
-            });
-        }
-
         function onCancelSeriesTimerClick() {
             require(['recordingHelper'], function (recordingHelper) {
                 recordingHelper.cancelSeriesTimerWithConfirmation(currentItem.Id, currentItem.ServerId).then(function () {

src/scripts/dom.js

@@ -211,7 +211,7 @@
             'MozAnimation': 'animationend',
             'WebkitAnimation': 'webkitAnimationEnd'
         };
-        for (let t in animations) {
+        for (const t in animations) {
             if (el.style[t] !== undefined) {
                 _animationEvent = animations[t];
                 return animations[t];
@@ -251,7 +251,7 @@
             'MozTransition': 'transitionend',
             'WebkitTransition': 'webkitTransitionEnd'
         };
-        for (let t in transitions) {
+        for (const t in transitions) {
             if (el.style[t] !== undefined) {
                 _transitionEvent = transitions[t];
                 return transitions[t];

src/scripts/routes.js

@@ -15,7 +15,7 @@ define([
     'detailtablecss'], function () {
 
     function defineRoute(newRoute) {
-        var path = newRoute.path;
+        var path = newRoute.alias ? newRoute.alias : newRoute.path;
         console.debug('defining route: ' + path);
         newRoute.dictionary = 'core';
         Emby.Page.addRoute(path, newRoute);
@@ -234,8 +234,9 @@ define([
         transition: 'fade'
     });
     defineRoute({
-        path: '/itemdetails.html',
+        alias: '/details',
-        controller: 'itemDetails',
+        path: '/controllers/itemDetails/itemDetails.html',
+        controller: 'itemDetails/itemDetails',
         autoFocus: false,
         transition: 'fade'
     });

src/scripts/site.js

@@ -1059,7 +1059,7 @@ var AppInfo = {};
                 }
 
                 if ('SeriesTimer' == itemType) {
-                    return 'itemdetails.html?seriesTimerId=' + id + '&serverId=' + serverId;
+                    return 'details?seriesTimerId=' + id + '&serverId=' + serverId;
                 }
 
                 if ('livetv' == item.CollectionType) {
@@ -1129,13 +1129,13 @@ var AppInfo = {};
                 var itemTypes = ['Playlist', 'TvChannel', 'Program', 'BoxSet', 'MusicAlbum', 'MusicGenre', 'Person', 'Recording', 'MusicArtist'];
 
                 if (itemTypes.indexOf(itemType) >= 0) {
-                    return 'itemdetails.html?id=' + id + '&serverId=' + serverId;
+                    return 'details?id=' + id + '&serverId=' + serverId;
                 }
 
                 var contextSuffix = context ? '&context=' + context : '';
 
                 if ('Series' == itemType || 'Season' == itemType || 'Episode' == itemType) {
-                    return 'itemdetails.html?id=' + id + contextSuffix + '&serverId=' + serverId;
+                    return 'details?id=' + id + contextSuffix + '&serverId=' + serverId;
                 }
 
                 if (item.IsFolder) {
@@ -1146,7 +1146,7 @@ var AppInfo = {};
                     return '#';
                 }
 
-                return 'itemdetails.html?id=' + id + '&serverId=' + serverId;
+                return 'details?id=' + id + '&serverId=' + serverId;
             };
 
             appRouter.showItem = showItem;