Add remote control chapter menu

dashboard-ui/about.html

@@ -22,7 +22,17 @@
                         <br />
                         <span id="appVersionNumber">${VersionNumber}</span>
                     </p>
-                    <hr />
+                    <br />
+                    <div class="ui-bar-a" style="padding: 1em;">${HeaderCredits}</div>
+                    <div style="padding: 0 .5em;">
+                        <p>
+                            <a href="http://www.pismotechnic.com/pfm/" target="_blank">${PismoMessage}</a>
+                        </p>
+                        <p>
+                            <a href="http://www.tangiblesoftwaresolutions.com/" target="_blank">${TangibleSoftwareMessage}</a>
+                        </p>
+
+                        <br />
                         <p>${PleaseSupportOtherProduces}</p>
 
                         <p>
@@ -43,10 +53,8 @@
                         <p>
                             <a href="http://thetvdb.com" target="_blank">TheTVDB.com</a>
                         </p>
+                    </div>
 
-                    <p>
-                        <a href="http://www.pismotechnic.com/pfm/" target="_blank">${PismoMessage}</a>
-                    </p>
                 </div>
             </div>
         </div>

dashboard-ui/css/librarybrowser.css

@@ -12,12 +12,12 @@
     margin-left: .5em;
 }
 
-.libraryPage {
+.page[data-theme=b] {
     background-color: #202020;
 }
 
 .backdropPage {
-    background-color: rgba(0, 0, 0, .85);
+    background-color: rgba(0, 0, 0, .85)!important;
 }
 
 .backdropContainer {
@@ -1036,62 +1036,6 @@ a.itemTag:hover {
         }
 }
 
-.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-    font-size: 30px;
-}
-
-.nowPlayingPageImage img {
-    max-height: 300px;
-    max-width: 300px;
-}
-
-.nowPlayingPage .positionSliderContainer {
-    width: 350px;
-}
-
-.nowPlayingNavButtonContainer {
-    width: 400px;
-}
-
-@media all and (max-width: 600px) {
-
-    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-        font-size: 26px;
-    }
-
-    .nowPlayingPageImage img {
-        max-height: 200px;
-        max-width: 250px;
-    }
-
-    .nowPlayingPage .positionSliderContainer {
-        width: 300px;
-    }
-}
-
-
-@media all and (max-width: 500px) {
-
-    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-        font-size: 22px;
-    }
-}
-
-@media all and (max-width: 400px) {
-
-    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-        font-size: 19px;
-    }
-
-    .nowPlayingPage .positionSliderContainer {
-        width: 220px;
-    }
-
-    .nowPlayingNavButtonContainer {
-        width: 300px;
-    }
-}
-
 .spotlight {
     position: absolute;
     left: 0;

dashboard-ui/css/librarymenu.css

@@ -232,6 +232,9 @@
     background-image: url(images/items/folders/settings.png);
     background-position: 16px 8px;
 }
+.reportsViewMenu {
+    background-image: url(images/items/folders/report.png);
+}
 
 .viewMenuSecondary {
     position: absolute;

dashboard-ui/css/nowplaying.css

@@ -0,0 +1,97 @@
+.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
+    font-size: 30px;
+}
+
+.nowPlayingPageImage img {
+    max-height: 300px;
+    max-width: 300px;
+}
+
+.nowPlayingPage .positionSliderContainer {
+    width: 350px;
+}
+
+.nowPlayingNavButtonContainer {
+    width: 400px;
+}
+
+.chapterMenuOverlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.chapterMenu {
+    position: fixed;
+    top: 30%;
+    height: 180px;
+    left: 0;
+    right: 0;
+    background-color: rgba(0,0,0,.9);
+    overflow-x: auto;
+    overflow-y: hidden;
+    z-index: 1001;
+}
+
+.chapterMenuInner {
+    padding: 1em 0;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.chapterPosterItem {
+    width: 240px!important;
+    cursor: pointer;
+}
+
+    .chapterPosterItem .posterItemImage {
+        height: 135px!important;
+    }
+
+.currentChapter {
+    -moz-box-shadow: 0 0 12px 7px #cc3333;
+    -webkit-box-shadow: 0 0 12px 7px #cc3333;
+    box-shadow: 0 0 12px 7px #cc3333;
+}
+
+@media all and (max-width: 600px) {
+
+    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
+        font-size: 26px;
+    }
+
+    .nowPlayingPageImage img {
+        max-height: 160px;
+        max-width: 250px;
+    }
+
+    .nowPlayingPage .positionSliderContainer {
+        width: 300px;
+    }
+}
+
+
+@media all and (max-width: 500px) {
+
+    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
+        font-size: 24px;
+    }
+}
+
+@media all and (max-width: 400px) {
+
+    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
+        font-size: 19px;
+    }
+
+    .nowPlayingPage .positionSliderContainer {
+        width: 220px;
+    }
+
+    .nowPlayingNavButtonContainer {
+        width: 300px;
+    }
+}

dashboard-ui/css/posteritem.css

@@ -92,15 +92,10 @@
     .posterItemTextOverlay .posterItemText {
         background-color: transparent;
         padding-left: 5px;
-        padding: 0 5px 3px;
+        padding: 0 5px 4px;
     }
 
-        .posterItemTextOverlay .posterItemText:first-child {
+        .posterItemTextOverlay .posterItemText:last-child:not(.posterItemProgress) {
-            font-weight: bold;
-            font-size: 14px;
-        }
-
-        .posterItemTextOverlay .posterItemText:last-child {
             padding-bottom: 8px;
         }
 
@@ -165,11 +160,15 @@
         height: 51.8px;
     }
 
-.posterItemProgress .itemProgressBar {
+.posterItemProgress {
-    height: 8px;
+    line-height: 7px;
+}
+
+    .posterItemProgress .itemProgressBar {
+        height: 7px;
         width: 100%;
         opacity: .8;
-}
+    }
 
 .miniPosterItemProgress {
     /* Make sure it's on top of the fade gradient '*/

dashboard-ui/css/site.css

@@ -90,6 +90,14 @@ h2 {
     font-size: 1.68em;
 }
 
+a, a.ui-link {
+    font-weight: normal;
+}
+
+.ui-controlgroup a, a.ui-btn {
+    font-weight: bold;
+}
+
 h1 a {
     text-decoration: none;
 }

dashboard-ui/metadata.html

@@ -11,11 +11,7 @@
             <div class="content-primary">
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">${TabBasics}</a>
-                    <a href="metadataimages.html?type=movies" data-role="button">${TabMovies}</a>
+                    <a href="metadataimages.html" data-role="button">${TabCustomizations}</a>
-                    <a href="metadataimages.html?type=tv" data-role="button">${TabTV}</a>
-                    <a href="metadataimages.html?type=games" data-role="button">${TabGames}</a>
-                    <a href="metadataimages.html?type=music" data-role="button">${TabMusic}</a>
-                    <a href="metadataimages.html?type=others" data-role="button">${TabOthers}</a>
                     <a href="metadatasubtitles.html" data-role="button">${TabSubtitles}</a>
                     <a href="metadataadvanced.html" data-role="button">${TabAdvanced}</a>
                 </div>

dashboard-ui/metadataadvanced.html

@@ -11,11 +11,7 @@
             <div class="content-primary">
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="metadata.html" data-role="button">${TabBasics}</a>
-                    <a href="metadataimages.html?type=movies" data-role="button">${TabMovies}</a>
+                    <a href="metadataimages.html" data-role="button">${TabCustomizations}</a>
-                    <a href="metadataimages.html?type=tv" data-role="button">${TabTV}</a>
-                    <a href="metadataimages.html?type=games" data-role="button">${TabGames}</a>
-                    <a href="metadataimages.html?type=music" data-role="button">${TabMusic}</a>
-                    <a href="metadataimages.html?type=others" data-role="button">${TabOthers}</a>
                     <a href="metadatasubtitles.html" data-role="button">${TabSubtitles}</a>
                     <a href="#" data-role="button" class="ui-btn-active">${TabAdvanced}</a>
                 </div>

dashboard-ui/metadataimages.html

@@ -11,24 +11,20 @@
             <div class="content-primary">
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true" style="margin-bottom: 20px!important;">
                     <a href="metadata.html" data-role="button">${TabBasics}</a>
-                    <a href="metadataimages.html?type=movies" data-role="button" class="categoryTab moviesTab">${TabMovies}</a>
+                    <a href="#" data-role="button" class="ui-btn-active">${TabCustomizations}</a>
-                    <a href="metadataimages.html?type=tv" data-role="button" class="categoryTab tvTab">${TabTV}</a>
-                    <a href="metadataimages.html?type=games" data-role="button" class="categoryTab gamesTab">${TabGames}</a>
-                    <a href="metadataimages.html?type=music" data-role="button" class="categoryTab musicTab">${TabMusic}</a>
-                    <a href="metadataimages.html?type=others" data-role="button" class="categoryTab othersTab">${TabOthers}</a>
                     <a href="metadatasubtitles.html" data-role="button">${TabSubtitles}</a>
                     <a href="metadataadvanced.html" data-role="button">${TabAdvanced}</a>
                 </div>
 
-                <p>${HeaderCustomizeOptionsPerMediaType}</p>
-
-                <div class="tabs">
-                </div>
-
-                <br />
                 <div class="tabContent">
                     <form class="metadataImagesConfigurationForm" style="margin-top: 10px; max-width: 800px;">
-
+                        <br />
+                        <div style="width: 75%;">
+                            <label for="selectItemType">${LabelCustomizeOptionsPerMediaType}</label>
+                            <select id="selectItemType" data-mini="true"></select>
+                        </div>
+                        <br />
+                        <br />
                         <div class="metadataReaders" style="margin-bottom: 2em; width: 75%;">
                         </div>
                         <div class="metadataFetchers" style="margin-bottom: 2em;">

dashboard-ui/metadatasubtitles.html

@@ -11,11 +11,7 @@
             <div class="content-primary">
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="metadata.html" data-role="button">${TabBasics}</a>
-                    <a href="metadataimages.html?type=movies" data-role="button">${TabMovies}</a>
+                    <a href="metadataimages.html" data-role="button">${TabCustomizations}</a>
-                    <a href="metadataimages.html?type=tv" data-role="button">${TabTV}</a>
-                    <a href="metadataimages.html?type=games" data-role="button">${TabGames}</a>
-                    <a href="metadataimages.html?type=music" data-role="button">${TabMusic}</a>
-                    <a href="metadataimages.html?type=others" data-role="button">${TabOthers}</a>
                     <a href="#" class="ui-btn-active" data-role="button">${TabSubtitles}</a>
                     <a href="metadataadvanced.html" data-role="button">${TabAdvanced}</a>
                 </div>

dashboard-ui/nowplaying.html

@@ -136,6 +136,12 @@
             <div class="trackList"></div>
         </div>
         
+        <div class="chapterMenuOverlay" style="display: none;"></div>
+        <div class="chapterMenu" style="display: none;">
+            <div class="chapterMenuInner">
+            </div>
+        </div>
+
         <script type="text/javascript">
             $('.sendMessageForm').off('submit', NowPlayingPage.onMessageSubmit).on('submit', NowPlayingPage.onMessageSubmit);
             $('.typeTextForm').off('submit', NowPlayingPage.onSendStringSubmit).on('submit', NowPlayingPage.onSendStringSubmit);

dashboard-ui/reports.html

@@ -4,16 +4,8 @@
     <title>${TitleMediaBrowser}</title>
 </head>
 <body>
-    <div id="libraryReportPage" data-role="page" data-theme="b" class="page libraryPage metadataEditorPage">
+    <div id="libraryReportPage" data-role="page" data-theme="b" class="page libraryPage noSecondaryNavPage reportsPage">
-        <div data-role="content editPageContent">
+        <div data-role="content">
-            <div class="editPageSidebar">
-                <div class="libraryTree">
-                    <ul>
-                    </ul>
-                </div>
-            </div>
-            <div class="editPageInnerContent">
-
             <div style="text-align: center;">
                 <div class="viewControls">
                     <span style="margin-right: 10px; vertical-align: middle;">Report:</span>
@@ -46,7 +38,6 @@
             <div class="listBottomPaging">
             </div>
         </div>
-        </div>
 
         <div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="a" data-position-fixed="true">
             <form>

dashboard-ui/scripts/edititemimages.js

@@ -545,11 +545,6 @@
 
         $('.libraryTree', page).on('itemclicked', function (event, data) {
 
-            if (data.itemType == "libraryreport") {
-                Dashboard.navigate('libraryreport.html');
-                return;
-            }
-
             if (data.itemType == "livetvservice") {
                 return;
             }

dashboard-ui/scripts/edititemmetadata.js

@@ -1139,11 +1139,6 @@
 
         $('.libraryTree', page).on('itemclicked', function (event, data) {
 
-            if (data.itemType == "libraryreport") {
-                Dashboard.navigate('libraryreport.html');
-                return;
-            }
-
             if (data.itemType == "livetvservice") {
                 return;
             }

dashboard-ui/scripts/edititempeople.js

@@ -255,11 +255,6 @@
 
         $('.libraryTree', page).on('itemclicked', function (event, data) {
 
-            if (data.itemType == "libraryreport") {
-                Dashboard.navigate('libraryreport.html');
-                return;
-            }
-
             if (data.itemType == "livetvservice") {
                 return;
             }

dashboard-ui/scripts/editorsidebar.js

@@ -111,17 +111,8 @@
                 nodes.push({ attr: { id: name, rel: 'folder', itemtype: 'livetvservice' }, data: htmlName, state: 'closed' });
             }
 
-            nodes.push({ attr: { id: 'libraryreport', rel: 'default', itemtype: 'libraryreport' }, data: 'Reports' });
-
             callback(nodes);
 
-            if (!selectedId) {
-                
-                if (window.location.toString().toLowerCase().indexOf('report.html') != -1) {
-                    selectedId = 'libraryreport';
-                }
-            }
-
             if (selectedId && nodes.filter(function (f) {
 
                 return f.attr.id == selectedId;
@@ -163,11 +154,6 @@
 
         var itemtype = node.attr("itemtype");
 
-        if (itemtype == 'libraryreport') {
-
-            return;
-        }
-
         if (itemtype == 'livetvservice') {
 
             loadLiveTvChannels(id, openItems, callback);

dashboard-ui/scripts/librarymenu.js

@@ -98,8 +98,9 @@
 
         if (user.Configuration.IsAdministrator) {
             html += '<div class="libraryMenuDivider"></div>';
-            html += '<a class="viewMenuLink viewMenuTextLink lnkMediaFolder dashboardViewMenu" data-itemid="editor" href="dashboard.html">Dashboard</a>';
+            html += '<a class="viewMenuLink viewMenuTextLink lnkMediaFolder dashboardViewMenu" data-itemid="dashboard" href="dashboard.html">Dashboard</a>';
             html += '<a class="viewMenuLink viewMenuTextLink lnkMediaFolder editorViewMenu" data-itemid="editor" href="edititemmetadata.html">Metadata Manager</a>';
+            html += '<a class="viewMenuLink viewMenuTextLink lnkMediaFolder reportsViewMenu" data-itemid="reports" href="reports.html">Reports</a>';
         }
 
         return html;
@@ -128,7 +129,7 @@
 
     function getLibraryMenu(page, user, counts, items, liveTvInfo) {
 
-        var panel = $('#libraryPanel', page);
+        var panel = $('#libraryPanel');
 
         if (!panel.length) {
 
@@ -144,9 +145,9 @@
 
             html += '</div>';
 
-            $(page).append(html);
+            $(document.body).append(html);
 
-            panel = $('#libraryPanel', page).panel({}).trigger('create');
+            panel = $('#libraryPanel').panel({}).trigger('create');
         }
 
         updateLibraryNavLinks(page);
@@ -179,14 +180,16 @@
         }
     }
 
-    function updateLibraryNavLinks(page, updateElements) {
+    function updateLibraryNavLinks(page) {
 
         page = $(page);
 
         var isLiveTvPage = page.hasClass('liveTvPage');
         var isChannelsPage = page.hasClass('channelsPage');
+        var isEditorPage = page.hasClass('metadataEditorPage');
+        var isReportsPage = page.hasClass('reportsPage');
 
-        var id = isLiveTvPage || isChannelsPage || page.hasClass('allLibraryPage') ?
+        var id = isLiveTvPage || isChannelsPage || isEditorPage || isReportsPage || page.hasClass('allLibraryPage') ?
             '' :
             getTopParentId() || '';
 
@@ -202,6 +205,12 @@
             else if (isLiveTvPage && itemId == 'livetv') {
                 $(this).addClass('selectedMediaFolder');
             }
+            else if (isEditorPage && itemId == 'editor') {
+                $(this).addClass('selectedMediaFolder');
+            }
+            else if (isReportsPage && itemId == 'reports') {
+                $(this).addClass('selectedMediaFolder');
+            }
             else if (id && itemId == id) {
                 $(this).addClass('selectedMediaFolder');
             }

dashboard-ui/scripts/livetvstatus.js

@@ -123,7 +123,7 @@
             versionHtml += '<img src="css/images/checkmarkgreen.png" style="height: 17px; margin-left: 10px; margin-right: 0; position: relative; top: 5px; border-radius:3px;" /> Up to date!';
         }
 
-        $('#activeServiceVersion', page).html(versionHtml);
+        $('#activeServiceVersion', page).html(versionHtml).trigger('create');
 
         var status = liveTvInfo.Status;
 

dashboard-ui/scripts/mediaplayer-video.js

@@ -31,7 +31,7 @@
         var currentTimeElement;
 
         self.initVideoPlayer = function () {
-            video = playVideo(item, mediaSource, startPosition, user);
+            video = playVideo(item, mediaSource, startPosition);
 
             return video;
         };
@@ -640,75 +640,6 @@
             return html;
         }
 
-        function getInitialSubtitleStreamIndex(mediaStreams, user) {
-
-            var i, length, mediaStream;
-
-            // Find the first forced subtitle stream
-            for (i = 0, length = mediaStreams.length; i < length; i++) {
-                mediaStream = mediaStreams[i];
-
-                if (mediaStream.Type == "Subtitle" && mediaStream.IsForced) {
-                    return mediaStream.Index;
-                }
-
-            }
-
-            // If none then look at user configuration
-            if (user.Configuration.SubtitleLanguagePreference) {
-
-                for (i = 0, length = mediaStreams.length; i < length; i++) {
-                    mediaStream = mediaStreams[i];
-
-                    if (mediaStream.Type == "Subtitle" && mediaStream.Language == user.Configuration.SubtitleLanguagePreference) {
-
-                        if (user.Configuration.UseForcedSubtitlesOnly) {
-
-                            if (mediaStream.IsForced) {
-                                return mediaStream.Index;
-                            }
-
-                        } else {
-                            return mediaStream.Index;
-                        }
-                    }
-
-                }
-            }
-
-            return null;
-        }
-
-        function getInitialAudioStreamIndex(mediaStreams, user) {
-
-            // Find all audio streams
-            var audioStreams = mediaStreams.filter(function (stream) {
-                return stream.Type == "Audio";
-
-            }).sort(function (a, b) {
-
-                var av = a.IsDefault ? 0 : 1;
-                var bv = b.IsDefault ? 0 : 1;
-
-                return av - bv;
-            });
-
-            if (user.Configuration.AudioLanguagePreference) {
-
-                for (var i = 0, length = audioStreams.length; i < length; i++) {
-                    var mediaStream = audioStreams[i];
-
-                    if (mediaStream.Language == user.Configuration.AudioLanguagePreference) {
-                        return mediaStream.Index;
-                    }
-
-                }
-            }
-
-            // Just use the first audio stream
-            return audioStreams.length ? audioStreams[0].Index : null;
-        }
-
         function getVideoQualityOptions(mediaStreams) {
 
             var videoStream = mediaStreams.filter(function (stream) {
@@ -787,15 +718,15 @@
             return options;
         }
 
-        function playVideo(item, mediaSource, startPosition, user) {
+        function playVideo(item, mediaSource, startPosition) {
 
             var mediaStreams = mediaSource.MediaStreams || [];
 
             var baseParams = {
                 audioChannels: 2,
                 StartTimeTicks: startPosition,
-                SubtitleStreamIndex: getInitialSubtitleStreamIndex(mediaStreams, user),
+                SubtitleStreamIndex: mediaSource.DefaultSubtitleStreamIndex,
-                AudioStreamIndex: getInitialAudioStreamIndex(mediaStreams, user),
+                AudioStreamIndex: mediaSource.DefaultAudioStreamIndex,
                 deviceId: ApiClient.deviceId(),
                 Static: false,
                 mediaSourceId: mediaSource.Id

dashboard-ui/scripts/metadataimagespage.js

@@ -6,32 +6,18 @@
 
         var html = '';
 
-        html += '<div data-role="controlgroup" data-type="horizontal" data-mini="true">';
-
         for (var i = 0, length = tabs.length; i < length; i++) {
 
             var tab = tabs[i];
 
-            var isChecked = i == 0 ? ' checked="checked"' : '';
+            var isChecked = i == 0 ? ' selected="selected"' : '';
 
-            html += '<input type="radio" name="radioTypeTab" class="radioTypeTab" id="' + tab.type + '" value="' + tab.type + '"' + isChecked + '>';
+            html += '<option value="' + tab.type + '"' + isChecked + '>' + tab.name + '</option>';
-            html += '<label for="' + tab.type + '">' + tab.name + '</label>';
         }
 
-        html += '</div>';
+        $('#selectItemType', page).html(html).selectmenu('refresh').trigger('change');
-
-        var elem = $('.tabs', page).html(html).trigger('create');
 
         Dashboard.hideLoadingMsg();
-
-        $('.radioTypeTab', elem).on('change', function () {
-
-            if (this.checked) {
-
-                loadType(page, this.id);
-            }
-
-        }).trigger('change');
     }
 
     function loadType(page, type) {
@@ -416,70 +402,29 @@
 
     function loadPage(page) {
 
-        var type = getParameterByName('type');
-
-        $('.categoryTab', page).removeClass('ui-btn-active');
-
-        if (type == 'games') {
-
-            loadTabs(page, [
-
-                { name: 'Games', type: 'Game' },
-                { name: 'Game Systems', type: 'GameSystem' },
-                { name: 'Game Genres', type: 'GameGenre' }
-            ]);
-
-            $('.gamesTab', page).addClass('ui-btn-active');
-        }
-        else if (type == 'movies') {
-
         loadTabs(page, [
 
             { name: 'Movies', type: 'Movie' },
             { name: 'Trailers', type: 'Trailer' },
-                { name: 'Collections', type: 'BoxSet' }
+            { name: 'Collections', type: 'BoxSet' },
-            ]);
+            { name: 'TV Series', type: 'Series' },
-
+            { name: 'TV Seasons', type: 'Season' },
-            $('.moviesTab', page).addClass('ui-btn-active');
+            { name: 'TV Episodes', type: 'Episode' },
-        }
+            { name: 'Games', type: 'Game' },
-        else if (type == 'tv') {
+            { name: 'Game Systems', type: 'GameSystem' },
-
+            { name: 'Game Genres', type: 'GameGenre' },
-            loadTabs(page, [
+            { name: 'Music Artists', type: 'MusicArtist' },
-
+            { name: 'Music Albums', type: 'MusicAlbum' },
-                { name: 'Series', type: 'Series' },
-                { name: 'Seasons', type: 'Season' },
-                { name: 'Episodes', type: 'Episode' }
-            ]);
-
-            $('.tvTab', page).addClass('ui-btn-active');
-        }
-        else if (type == 'music') {
-
-            loadTabs(page, [
-
-                { name: 'Artists', type: 'MusicArtist' },
-                { name: 'Albums', type: 'MusicAlbum' },
-                { name: 'Songs', type: 'Audio' },
             { name: 'Music Videos', type: 'MusicVideo' },
-                { name: 'Music Genres', type: 'MusicGenre' }
+            { name: 'Music Genres', type: 'MusicGenre' },
-            ]);
+            { name: 'Songs', type: 'Audio' },
-
+            { name: 'Home Videos', type: 'Video' },
-            $('.musicTab', page).addClass('ui-btn-active');
+            { name: 'Books', type: 'Book' },
-        }
+            { name: 'Adult Videos', type: 'AdultVideo' },
-        else if (type == 'others') {
-
-            loadTabs(page, [
-
             { name: 'People', type: 'Person' },
             { name: 'Genres', type: 'Genre' },
-                { name: 'Studios', type: 'Studio' },
+            { name: 'Studios', type: 'Studio' }
-                { name: 'Books', type: 'Book' },
-                { name: 'Home Videos', type: 'Video' },
-                { name: 'Adult Videos', type: 'AdultVideo' }
         ]);
-
-            $('.othersTab', page).addClass('ui-btn-active');
-        }
     }
 
     function saveSettingsIntoConfig(form, config) {
@@ -615,6 +560,11 @@
             ul.listview('destroy').listview({});
         });
 
+        $('#selectItemType', page).on('change', function () {
+
+            loadType(page, this.value);
+        });
+
     }).on('pageshow', "#metadataImagesConfigurationPage", function () {
 
         Dashboard.showLoadingMsg();

dashboard-ui/scripts/nowplayingpage.js

@@ -4,6 +4,106 @@
     var lastPlayerState;
     var isPositionSliderActive;
 
+    function populateChapters(elem, chapters, itemId, runtimeTicks) {
+
+        var html = '';
+
+        for (var i = 0, length = chapters.length; i < length; i++) {
+
+            var chapter = chapters[i];
+
+            html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="posterItem backdropPosterItem chapterPosterItem">';
+
+            var imgUrl;
+
+            if (chapter.ImageTag) {
+
+                imgUrl = ApiClient.getImageUrl(itemId, {
+                    maxwidth: 600,
+                    tag: chapter.ImageTag,
+                    type: "Chapter",
+                    index: i
+                });
+
+            } else {
+                imgUrl = "css/images/items/list/chapter.png";
+            }
+
+            var dataSrc = ' data-src="' + imgUrl + '"';
+
+            html += '<div class="posterItemImage lazy"' + dataSrc + '>';
+
+            html += '<div class="posterItemTextOverlay">';
+
+            if (chapter.Name) {
+                html += "<div class='posterItemText'>";
+                html += chapter.Name;
+                html += "</div>";
+            }
+
+            html += "<div class='posterItemProgress posterItemText'>";
+            var pct = 100 * (chapter.StartPositionTicks / runtimeTicks);
+            html += '<progress class="itemProgressBar" min="0" max="100" value="' + pct + '" style="opacity:.8;"></progress>';
+            html += "</div>";
+
+            html += "</div>";
+
+            html += "</div>";
+
+            html += "</div>";
+        }
+
+        elem.html(html).trigger('create');
+    }
+
+    function selectCurrentChapter(elem, positionTicks) {
+
+        var elems = $('.chapterPosterItem', elem).removeClass('currentChapter');
+
+        var matches = elems.get().filter(function (i) {
+
+            var ticks = i.getAttribute('data-positionticks');
+
+            return positionTicks >= ticks;
+
+        });
+
+        var chapterElem = matches[matches.length - 1];
+
+        $(chapterElem).addClass('currentChapter');
+
+        chapterElem.scrollIntoView();
+
+        elem[0].scrollLeft += 50;
+    }
+
+    function showChapterMenu(page, item, currentPositionTicks) {
+
+        $('.chapterMenuOverlay', page).show();
+
+        var elem = $('.chapterMenu', page).show();
+
+        if (item.Id == elem.attr('data-itemid')) {
+
+            selectCurrentChapter(elem, currentPositionTicks);
+            return;
+        }
+
+        var innerElem = $('.chapterMenuInner', elem);
+
+        populateChapters(innerElem, item.Chapters, item.Id, item.RunTimeTicks);
+
+        elem.attr('data-itemid', item.Id);
+
+        selectCurrentChapter(elem, currentPositionTicks);
+    }
+
+    function hideChapterMenu(page) {
+
+        $('.chapterMenuOverlay', page).hide();
+        $('.chapterMenu', page).hide();
+    }
+
     function showAudioMenu(page, item, currentIndex) {
 
         var streams = (item.MediaStreams || []).filter(function (i) {
@@ -138,6 +238,22 @@
             $(this).addClass('ui-btn-active');
         });
 
+        $('.chapterMenuOverlay', page).on('click', function () {
+
+            hideChapterMenu(page);
+        });
+
+        $('.chapterMenu', page).on('click', '.chapterPosterItem', function () {
+
+            if (currentPlayer) {
+                var ticks = this.getAttribute('data-positionticks');
+
+                currentPlayer.seek(parseInt(ticks));
+            }
+
+            hideChapterMenu(page);
+        });
+
         $('.btnCommand,.btnToggleFullscreen', page).on('click', function () {
 
             if (currentPlayer) {
@@ -192,6 +308,9 @@
         $('.btnChapters', page).on('click', function () {
 
             if (currentPlayer && lastPlayerState) {
+
+                var currentPositionTicks = lastPlayerState.PlayState.PositionTicks;
+                showChapterMenu(page, lastPlayerState.NowPlayingItem, currentPositionTicks);
             }
         });
 
@@ -299,7 +418,14 @@
 
         $('.btnAudioTracks', page).buttonEnabled(hasStreams(item, 'Audio') && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
         $('.btnSubtitles', page).buttonEnabled(hasStreams(item, 'Subtitle') && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
-        $('.btnChapters', page).buttonEnabled(item && item.Chapters && item.Chapters.length);
+
+        if (item && item.Chapters && item.Chapters.length) {
+            $('.btnChapters', page).buttonEnabled(true);
+
+        } else {
+            $('.btnChapters', page).buttonEnabled(false);
+            hideChapterMenu(page);
+        }
 
         $('.sendMessageElement', page).buttonEnabled(supportedCommands.indexOf('DisplayMessage') != -1);
         $('.typeTextElement', page).buttonEnabled(supportedCommands.indexOf('SendString') != -1);
@@ -521,7 +647,7 @@
             return false;
         },
 
-        onSendStringSubmit: function() {
+        onSendStringSubmit: function () {
 
             var form = this;
 

dashboard-ui/scripts/reports.js

@@ -484,9 +484,9 @@
                 if (c.sortField == currentSortField) {
 
                     if (currentSortDirection == "Descending") {
-                        cellHtml += '<span style="font-weight:bold;margin-left:5px;vertical-align:top;font-size:12px;">&darr;</span>';
+                        cellHtml += '<span style="font-weight:bold;margin-left:5px;vertical-align:top;font-size:14px">&darr;</span>';
                     } else {
-                        cellHtml += '<span style="font-weight:bold;margin-left:5px;vertical-align:top;font-size:12px;">&uarr;</span>';
+                        cellHtml += '<span style="font-weight:bold;margin-left:5px;vertical-align:top;font-size:14px;">&uarr;</span>';
                     }
                 }
             }
@@ -623,19 +623,6 @@
 
         var page = this;
 
-        $('.libraryTree', page).on('itemclicked', function (event, data) {
-
-            if (data.itemType == "libraryreport") {
-                return;
-            }
-
-            if (data.itemType == "livetvservice") {
-                return;
-            }
-
-            Dashboard.navigate('edititemmetadata.html?id=' + data.id);
-        });
-
         $('#radioBasicFilters', page).on('change', function () {
 
             if (this.checked) {

dashboard-ui/scripts/usersettings.js

@@ -29,12 +29,14 @@
             $('#selectSubtitleLanguage', page).val(user.Configuration.SubtitleLanguagePreference || "").selectmenu("refresh");
         });
 
-        $('#chkForcedSubtitlesOnly', page).checked(user.Configuration.UseForcedSubtitlesOnly || false).checkboxradio("refresh");
         $('#chkDisplayMissingEpisodes', page).checked(user.Configuration.DisplayMissingEpisodes || false).checkboxradio("refresh");
         $('#chkDisplayUnairedEpisodes', page).checked(user.Configuration.DisplayUnairedEpisodes || false).checkboxradio("refresh");
 
         $('#chkGroupMoviesIntoCollections', page).checked(user.Configuration.GroupMoviesIntoBoxSets || false).checkboxradio("refresh");
 
+        $('#selectSubtitlePlaybackMode', page).val(user.Configuration.SubtitleMode || "").selectmenu("refresh");
+        $('#chkPlayDefaultAudioTrack', page).checked(user.Configuration.PlayDefaultAudioTrack || false).checkboxradio("refresh");
+
         Dashboard.hideLoadingMsg();
     }
 
@@ -57,11 +59,13 @@
 
         user.Configuration.AudioLanguagePreference = $('#selectAudioLanguage', page).val();
         user.Configuration.SubtitleLanguagePreference = $('#selectSubtitleLanguage', page).val();
-        user.Configuration.UseForcedSubtitlesOnly = $('#chkForcedSubtitlesOnly', page).checked();
         user.Configuration.DisplayMissingEpisodes = $('#chkDisplayMissingEpisodes', page).checked();
         user.Configuration.DisplayUnairedEpisodes = $('#chkDisplayUnairedEpisodes', page).checked();
         user.Configuration.GroupMoviesIntoBoxSets = $('#chkGroupMoviesIntoCollections', page).checked();
 
+        user.Configuration.SubtitleMode = $('#selectSubtitlePlaybackMode', page).val();
+        user.Configuration.PlayDefaultAudioTrack = $('#chkPlayDefaultAudioTrack', page).checked();
+
         ApiClient.updateUser(user).done(function () {
             onSaveComplete(page);
         });

dashboard-ui/usersettings.html

@@ -36,15 +36,23 @@
                         <li>
                             <label for="selectAudioLanguage">${LabelAudioLanguagePreference}</label>
                             <select id="selectAudioLanguage" data-mini="true"></select>
-                            <div class="fieldDescription">${LabelAudioLanguagePreferenceHelp}</div>
+                        </li>
+                        <li>
+                            <input type="checkbox" id="chkPlayDefaultAudioTrack" data-mini="true" />
+                            <label for="chkPlayDefaultAudioTrack">${LabelPlayDefaultAudioTrack}</label>
                         </li>
                         <li>
                             <label for="selectSubtitleLanguage">${LabelSubtitleLanguagePreference}</label>
                             <select id="selectSubtitleLanguage" data-mini="true"></select>
                         </li>
                         <li>
-                            <input type="checkbox" id="chkForcedSubtitlesOnly" data-mini="true" />
+                            <label for="selectSubtitlePlaybackMode">${LabelSubtitlePlaybackMode}</label>
-                            <label for="chkForcedSubtitlesOnly">${LabelDisplayForcedSubtitlesOnly}</label>
+                            <select id="selectSubtitlePlaybackMode" data-mini="true">
+                                <option value="Default">{OptionDefaultSubtitles}</option>
+                                <option value="Always">Always</option>
+                                <option value="OnlyForced">OnlyForced</option>
+                                <option value="None">None</option>
+                            </select>
                         </li>
                         <li>
                             <button type="submit" data-theme="b" data-icon="check" data-mini="true">