update guide style

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.381",
+  "version": "1.4.382",
-  "_release": "1.4.381",
+  "_release": "1.4.382",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.381",
+    "tag": "1.4.382",
-    "commit": "2a3f7a75f989eb2c1086deac144f40f15baffefc"
+    "commit": "6d310465e6467b924653f526c91bcfb0b5f4920e"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

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

@@ -110,30 +110,70 @@
         return locale;
     }
 
+    function getOptionList(options) {
+
+        var list = [];
+
+        for (var i in options) {
+            list.push({
+                name: i,
+                value: options[i]
+            });
+        }
+
+        return list;
+    }
+
     function toLocaleString(date, options) {
+        options = options || {};
+
         var currentLocale = getCurrentLocale();
 
-        return currentLocale && toLocaleTimeStringSupportsLocales ?
+        if (currentLocale && toLocaleTimeStringSupportsLocales) {
-            date.toLocaleString(currentLocale, options || {}) :
+            return date.toLocaleString(currentLocale, options);
-            date.toLocaleString();
+        }
+
+        return date.toLocaleString();
     }
 
     function toLocaleDateString(date, options) {
 
+        options = options || {};
+
         var currentLocale = getCurrentLocale();
 
-        return currentLocale && toLocaleTimeStringSupportsLocales ?
+        if (currentLocale && toLocaleTimeStringSupportsLocales) {
-            date.toLocaleDateString(currentLocale, options || {}) :
+            return date.toLocaleDateString(currentLocale, options);
-            date.toLocaleDateString();
+        }
+
+        // This is essentially a hard-coded polyfill
+        var optionList = getOptionList(options);
+        if (optionList.length === 1 && optionList[0].name === 'weekday') {
+            var weekday = [];
+            weekday[0] = "Sun";
+            weekday[1] = "Mon";
+            weekday[2] = "Tue";
+            weekday[3] = "Wed";
+            weekday[4] = "Thu";
+            weekday[5] = "Fri";
+            weekday[6] = "Sat";
+            return weekday[date.getDay()];
+        }
+
+        return date.toLocaleDateString();
     }
 
     function toLocaleTimeString(date, options) {
 
+        options = options || {};
+
         var currentLocale = getCurrentLocale();
 
-        return currentLocale && toLocaleTimeStringSupportsLocales ?
+        if (currentLocale && toLocaleTimeStringSupportsLocales) {
-            date.toLocaleTimeString(currentLocale, options || {}).toLowerCase() :
+            return date.toLocaleTimeString(currentLocale, options);
-            date.toLocaleTimeString().toLowerCase();
+        }
+
+        return date.toLocaleTimeString();
     }
 
     function getDisplayTime(date) {

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

@@ -8,7 +8,7 @@
     width: auto;
     font-family: inherit;
     font-size: inherit;
-    color: #aaa !important;
+    color: #aaa;
     display: inline-block;
     vertical-align: middle;
     flex-shrink: 0;
@@ -17,7 +17,7 @@
     transition: none !important;
     position: relative;
     text-transform: uppercase;
-    font-weight: bold !important;
+    font-weight: bold;
     height: auto;
     min-width: initial;
     line-height: initial;
@@ -26,11 +26,11 @@
 }
 
     .emby-tab-button:focus {
-        font-weight: bold !important;
+        font-weight: bold;
     }
 
 .emby-tab-button-active {
-    color: #52B54B !important;
+    color: #52B54B;
     border-color: #52B54B;
 }
 

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

@@ -212,6 +212,13 @@
         initSelectionBar(this);
     };
 
+    EmbyTabs.refresh = function () {
+
+        if (this.scroller) {
+            this.scroller.reload();
+        }
+    };
+
     EmbyTabs.attachedCallback = function () {
 
         initScroller(this);

dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js

@@ -1,6 +1,42 @@
 define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
     'use strict';
 
+    function saveCategories(context, options) {
+
+        var categories = [];
+
+        var chkCategorys = context.querySelectorAll('.chkCategory');
+        for (var i = 0, length = chkCategorys.length; i < length; i++) {
+
+            var type = chkCategorys[i].getAttribute('data-type');
+
+            if (chkCategorys[i].checked) {
+                categories.push(type);
+            }
+        }
+
+        if (categories.length >= 4) {
+            categories.push('series');
+        }
+
+        // differentiate between none and all
+        categories.push('all');
+        options.categories = categories;
+    }
+
+    function loadCategories(context, options) {
+
+        var selectedCategories = options.categories || [];
+
+        var chkCategorys = context.querySelectorAll('.chkCategory');
+        for (var i = 0, length = chkCategorys.length; i < length; i++) {
+
+            var type = chkCategorys[i].getAttribute('data-type');
+
+            chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
+        }
+    }
+
     function save(context) {
 
         var i, length;
@@ -65,7 +101,7 @@
         }
     }
 
-    function showEditor() {
+    function showEditor(options) {
 
         return new Promise(function (resolve, reject) {
 
@@ -106,6 +142,7 @@
                     }
 
                     save(dlg);
+                    saveCategories(dlg, options);
 
                     if (settingsChanged) {
                         resolve();
@@ -123,6 +160,7 @@
                 }
 
                 load(dlg);
+                loadCategories(dlg, options);
                 dialogHelper.open(dlg);
             });
         });

dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.template.html

@@ -40,8 +40,29 @@
         </div>
         <br />
         <label class="checkboxContainer">
-            <input type="checkbox" is="emby-checkbox" class="chkColorCodedBackgrounds" />
+            <input type="checkbox" is="emby-checkbox" class="chkColorCodedBackgrounds"/>
             <span>${EnableColorCodedBackgrounds}</span>
         </label>
+
+        <h3 class="checkboxListLabel">${Categories}</h3>
+       <div class="checkboxList">
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="movies" />
+                <span>${Movies}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="sports" />
+                <span>${Sports}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="kids" />
+                <span>${Kids}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="news" />
+                <span>${News}</span>
+            </label>
+        </div>
+
     </form>
 </div>

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

@@ -7,15 +7,17 @@
 .tvGuideHeader {
     white-space: nowrap;
     width: 100%;
+    flex-direction: column;
     flex-shrink: 0;
     display: flex;
-    padding-left: 3.4em;
 }
 
-.guideContent {
+.guideHeaderDateSelection {
+    font-size: 90%;
+}
+
+.guideHeaderTimeslots {
     display: flex;
-    flex-grow: 1;
-    overflow: hidden;
 }
 
 .tvProgramSectionHeader {
@@ -44,6 +46,7 @@
 
 .channelTimeslotHeader {
     flex-shrink: 0;
+    justify-content: center;
 }
 
 .timeslotHeaders {
@@ -178,29 +181,6 @@
     }
 }
 
-.btnSelectDate {
-    padding-left: .5em;
-    text-transform: none;
-    font-weight: normal;
-}
-
-.btnSelectDateContent {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.guideDateText {
-    font-size: 80%;
-}
-
-@media all and (min-width: 1600px) {
-
-    .guideDateText {
-        font-size: 92%;
-    }
-}
-
 .btnGuideViewSettings {
     margin: 0;
     flex-shrink: 0;
@@ -210,13 +190,6 @@
     font-size: 1.5em !important;
 }
 
-@media all and (max-width: 1280px) {
-
-    .btnGuideViewSettings {
-        display: none;
-    }
-}
-
 .selectDateIcon {
     flex-shrink: 0;
 }
@@ -392,29 +365,6 @@
     flex-shrink: 0;
 }
 
-.btnCategories {
-    margin: 0 .3em 0 .5em !important;
-    padding: 0 !important;
-    flex-shrink: 0;
-    background: rgba(40, 40, 40, .9);
-    border-radius: 0 !important;
-    width: 2.6em;
-    font-weight: normal !important;
-    position: relative;
-}
-
-.btnCategoriesText {
-    transform: rotate(90deg);
-    text-transform: uppercase;
-    transform-origin: left;
-    margin-left: 1.2em;
-    letter-spacing: .25em;
-    position: absolute;
-    top: 0;
-    margin-top: 1em;
-    white-space: nowrap;
-}
-
 .channelList {
     display: flex;
     flex-direction: column;
@@ -424,11 +374,11 @@
     contain: layout style;
 }
 
-.programCell, .channelHeaderCell, .btnSelectDate {
+.programCell, .channelHeaderCell {
     outline: none !important;
 }
 
-    .programCell:focus, .channelHeaderCell:focus, .btnSelectDate:focus {
+    .programCell:focus, .channelHeaderCell:focus {
         background-color: #555;
     }
 
@@ -453,10 +403,6 @@
     .tvGuideHeader {
         padding-left: 0;
     }
-
-    .btnCategories {
-        display: none;
-    }
 }
 
 .guideRequiresUnlock {
@@ -470,3 +416,48 @@
     /* This is needed to combat the rubber banding in iOS */
     padding-bottom: 100px;
 }
+
+.guideDateTabsSlider {
+    text-align: center;
+}
+
+.guide-date-tab-button {
+    font-weight: 500 !important;
+    color: inherit !important;
+    padding-top: .8em !important;
+    padding-bottom: .8em !important;
+    opacity: .3;
+}
+
+    .guide-date-tab-button.emby-tab-button-active {
+        color: #52B54B !important;
+        border-color: transparent !important;
+        opacity: 1;
+        font-weight: 500 !important;
+    }
+
+    .guide-date-tab-button:focus {
+        color: #52B54B !important;
+        opacity: 1;
+    }
+
+.layout-tv .guide-date-tab-button:focus {
+    background-color: #52B54B !important;
+    color: #fff !important;
+}
+
+@media all and (min-width: 1200px) {
+
+    .guide-date-tab-button {
+        padding-left: 1em !important;
+        padding-right: 1em !important;
+    }
+}
+
+@media all and (min-width: 1400px) {
+
+    .guide-date-tab-button {
+        padding-left: 1.1em !important;
+        padding-right: 1.1em !important;
+    }
+}

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

@@ -1,21 +1,10 @@
-define(['require', 'browser', 'globalize', 'connectionManager', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationServices', 'dom', 'clearButtonStyle', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-button', 'paper-icon-button-light'], function (require, browser, globalize, connectionManager, serverNotifications, loading, datetime, focusManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, registrationServices, dom) {
+define(['require', 'browser', 'globalize', 'connectionManager', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationServices', 'dom', 'clearButtonStyle', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-tabs'], function (require, browser, globalize, connectionManager, serverNotifications, loading, datetime, focusManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, registrationServices, dom) {
     'use strict';
 
     function showViewSettings(instance) {
 
         require(['guide-settings-dialog'], function (guideSettingsDialog) {
-            guideSettingsDialog.show().then(function () {
+            guideSettingsDialog.show(instance.categoryOptions).then(function () {
-                instance.refresh();
-            });
-        });
-    }
-
-    function showCategoryOptions(instance) {
-
-        require(['guide-categories-dialog'], function (guideCategoriesDialog) {
-            guideCategoriesDialog.show(instance.categoryOptions).then(function (categoryOptions) {
-
-                instance.categoryOptions = categoryOptions;
                 instance.refresh();
             });
         });
@@ -233,8 +222,8 @@
                     channelQuery.SortBy = "DatePlayed";
                     channelQuery.SortOrder = "Descending";
                 } else {
-                    channelQuery.SortBy = "SortName";
+                    channelQuery.SortBy = null;
-                    channelQuery.SortOrder = "Ascending";
+                    channelQuery.SortOrder = null;
                 }
 
                 var date = newStartDate;
@@ -753,13 +742,22 @@
             currentDate = newStartDate;
 
             reloadGuide(page, newStartDate);
-
-            var dateText = datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' });
-
-            page.querySelector('.guideDateText').innerHTML = dateText;
         }
 
-        var dateOptions = [];
+        function getDateTabText(date, isActive, tabIndex) {
+
+            var cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button';
+
+            var html = '<button is="emby-button" class="' + cssClass + '" data-index="' + tabIndex + '" data-date="' + date.getTime() + '">';
+            var tabText = datetime.toLocaleDateString(date, { weekday: 'short' });
+
+            tabText += '<br/>';
+            tabText += date.getDate();
+            html += '<div class="emby-button-foreground">' + tabText + '</div>';
+            html += '</button>';
+
+            return html;
+        }
 
         function setDateRange(page, guideInfo) {
 
@@ -778,18 +776,8 @@
 
             start = new Date(Math.max(today, start));
 
-            dateOptions = [];
+            var dateTabsHtml = '';
-
+            var tabIndex = 0;
-            while (start <= end) {
-
-                dateOptions.push({
-                    name: datetime.toLocaleDateString(start, { weekday: 'long', month: 'long', day: 'numeric' }),
-                    id: start.getTime()
-                });
-
-                start.setDate(start.getDate() + 1);
-                start.setHours(0, 0, 0, 0);
-            }
 
             var date = new Date();
 
@@ -797,6 +785,19 @@
                 date.setTime(currentDate.getTime());
             }
 
+            while (start <= end) {
+
+                var isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear();
+
+                dateTabsHtml += getDateTabText(start, isActive, tabIndex);
+
+                start.setDate(start.getDate() + 1);
+                start.setHours(0, 0, 0, 0);
+            }
+
+            page.querySelector('.emby-tabs-slider').innerHTML = dateTabsHtml;
+            page.querySelector('.guideDateTabs').refresh();
+
             changeDate(page, date);
         }
 
@@ -812,29 +813,6 @@
             });
         }
 
-        function selectDate(page) {
-
-            var selectedDate = currentDate || new Date();
-            dateOptions.forEach(function (d) {
-                d.selected = new Date(d.id).getDate() === selectedDate.getDate();
-            });
-
-            require(['actionsheet'], function (actionsheet) {
-
-                actionsheet.show({
-                    items: dateOptions,
-                    title: globalize.translate('sharedcomponents#HeaderSelectDate'),
-                    callback: function (id) {
-
-                        var date = new Date();
-                        date.setTime(parseInt(id));
-                        changeDate(page, date);
-                    }
-                });
-
-            });
-        }
-
         function setScrollEvents(view, enabled) {
 
             if (layoutManager.tv) {
@@ -958,11 +936,6 @@
                 passive: true
             });
 
-            context.querySelector('.btnSelectDate').addEventListener('click', function () {
-                selectDate(context);
-                restartAutoRefresh();
-            });
-
             context.querySelector('.btnUnlockGuide').addEventListener('click', function () {
                 currentStartIndex = 0;
                 reloadPage(context);
@@ -986,9 +959,13 @@
                 restartAutoRefresh();
             });
 
-            context.querySelector('.btnCategories').addEventListener('click', function () {
+            context.querySelector('.guideDateTabsSlider').addEventListener('click', function (e) {
-                showCategoryOptions(self);
+                var tabButton = dom.parentWithClass(e.target, 'guide-date-tab-button');
-                restartAutoRefresh();
+                if (tabButton) {
+                    var date = new Date();
+                    date.setTime(parseInt(tabButton.getAttribute('data-date')));
+                    changeDate(context, date);
+                }
             });
 
             context.classList.add('tvguide');

dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html

@@ -1,25 +1,23 @@
 <div class="tvGuideHeader">
+
+    <div class="guideHeaderDateSelection">
+        <div is="emby-tabs" class="guideDateTabs" data-selectionbar="false">
+            <div class="emby-tabs-slider guideDateTabsSlider">
+            </div>
+        </div>
+    </div>
+
+    <div class="guideHeaderTimeslots">
         <div class="channelTimeslotHeader">
-        <button is="emby-button" type="button" class="btnSelectDate block button-flat" style="color:inherit;">
-            <div class="btnSelectDateContent">
-                <div class="guideDateText">
-                </div>
-                <i class="md-icon selectDateIcon">&#xE5C5;</i>
-            </div>
-        </button>
             <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
-            <i class="md-icon btnGuideViewSettingsIcon">&#xE42A;</i>
+                <i class="md-icon btnGuideViewSettingsIcon">&#xE5D3;</i>
             </button>
         </div>
         <div class="timeslotHeaders smoothScrollX guideScroller" style="scroll-behavior: auto;"></div>
+    </div>
 </div>
 
-<div class="guideContent">
+<div class="smoothScrollY guideVerticalScroller programContainer guideScroller">
-
-    <button is="emby-button" type="button" class="btnCategories">
-        <div class="btnCategoriesText">${Categories}</div>
-    </button>
-    <div class="smoothScrollY guideVerticalScroller programContainer guideScroller">
 
     <div class="channelsContainer">
         <div class="channelList"></div>
@@ -27,8 +25,6 @@
 
     <div class="programGridContainer programGrid smoothScrollX guideScroller" style="white-space: nowrap;">
     </div>
-    </div>
-
 </div>
 
 <div class="guideRequiresUnlock hide">

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

@@ -49,13 +49,30 @@ define(['css!./indicators.css', 'material-icons'], function () {
 
     function enablePlayedIndicator(item) {
 
-        if (item.Type === "Series" || item.Type === "Season" || item.Type === "BoxSet" || item.MediaType === "Video" || item.MediaType === "Game" || item.MediaType === "Book") {
+        if (item.MediaType === 'Video') {
-
             if (item.Type !== 'TvChannel') {
                 return true;
             }
         }
 
+        if (item.MediaType === 'Audio') {
+            if (item.Type === 'AudioPodcast') {
+                return true;
+            }
+            if (item.Type === 'AudioBook') {
+                return true;
+            }
+        }
+
+        if (item.Type === "Series" ||
+            item.Type === "Season" ||
+            item.Type === "BoxSet" ||
+            item.MediaType === "Game" ||
+            item.MediaType === "Book" ||
+            item.MediaType === "Recording") {
+            return true;
+        }
+
         return false;
     }
 

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

@@ -700,14 +700,14 @@
             showElement('#fldCustomRating', context);
         }
 
+        showElement('#tagsCollapsible', context);
+
         if (item.Type === "TvChannel") {
-            hideElement('#tagsCollapsible', context);
             hideElement('#metadataSettingsCollapsible', context);
             hideElement('#fldPremiereDate', context);
             hideElement('#fldDateAdded', context);
             hideElement('#fldYear', context);
         } else {
-            showElement('#tagsCollapsible', context);
             showElement('#metadataSettingsCollapsible', context);
             showElement('#fldPremiereDate', context);
             showElement('#fldDateAdded', context);

dashboard-ui/bower_components/emby-webcomponents/scroller/smoothscroller.js

@@ -873,6 +873,11 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'scrollStyles'], func
                 }
             } else {
                 slideeElement.style['will-change'] = 'transform';
+                if (o.horizontal) {
+                    slideeElement.classList.add('animatedScrollX');
+                } else {
+                    slideeElement.classList.add('animatedScrollY');
+                }
             }
 
             dragSourceElement.addEventListener('mousedown', dragInitSlidee);

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

@@ -35,8 +35,8 @@
     }
 
 .darkScroller::-webkit-scrollbar {
-    width: 10px;
+    width: 8px;
-    height: 10px;
+    height: 8px;
 }
 
 .darkScroller::-webkit-scrollbar-button:start:decrement,

dashboard-ui/css/librarymenu.css

@@ -20,7 +20,7 @@
     z-index: 1;
     margin: 0 !important;
     /* Page needs to supply padding */
-    top: 102px !important;
+    top: 98px !important;
     transition: transform 200ms ease-out;
 }
 

dashboard-ui/scripts/librarybrowser.js

@@ -97,7 +97,7 @@
                     }
 
                     if (elem.classList) {
-                        return !elem.classList.contains('hiddenScrollX') && !elem.classList.contains('smoothScrollX') && !elem.classList.contains('libraryViewNav');
+                        return !elem.classList.contains('hiddenScrollX') && !elem.classList.contains('smoothScrollX') && !elem.classList.contains('animatedScrollX');
                     }
 
                     return true;