Merge pull request #1957 from MediaBrowser/dev

Dev

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

@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.98",
+  "version": "1.4.101",
-  "_release": "1.4.98",
+  "_release": "1.4.101",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.98",
+    "tag": "1.4.101",
-    "commit": "6e0ce46f8c48908f94a7f32e95fee78b994c16f5"
+    "commit": "c6aa6b09f9c705ca83e31728ebbf0c4a2cda2454"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

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

@@ -1,17 +1,4 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'emby-button', 'css!./actionsheet', 'material-icons', 'scrollStyles'], function (dialogHelper, layoutManager, globalize, browser) {
+define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-button', 'css!./actionsheet', 'material-icons', 'scrollStyles'], function (dialogHelper, layoutManager, globalize, browser, dom) {
-
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
 
     function getOffsets(elems) {
 
@@ -221,7 +208,7 @@
 
         dlg.addEventListener('click', function (e) {
 
-            var actionSheetMenuItem = parentWithClass(e.target, 'actionSheetMenuItem');
+            var actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem');
 
             if (actionSheetMenuItem) {
                 selectedId = actionSheetMenuItem.getAttribute('data-id');

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

@@ -1,4 +1,4 @@
-define(['historyManager', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'scrollHelper', 'css!./dialoghelper.css', 'scrollStyles'], function (historyManager, focusManager, browser, layoutManager, inputManager, scrollHelper) {
+define(['historyManager', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'scrollHelper', 'dom', 'css!./dialoghelper.css', 'scrollStyles'], function (historyManager, focusManager, browser, layoutManager, inputManager, scrollHelper, dom) {
 
     var globalOnOpenCallback;
 
@@ -128,19 +128,6 @@
         }
     }
 
-    function parentWithTag(elem, tagName) {
-
-        while (elem.tagName != tagName) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function closeOnBackdropClick(dlg) {
 
         dlg.addEventListener('click', function (event) {
@@ -149,7 +136,7 @@
               && rect.left <= event.clientX && event.clientX <= (rect.left + rect.width));
 
             if (!isInDialog) {
-                if (parentWithTag(event.target, 'SELECT')) {
+                if (dom.parentWithTag(event.target, 'SELECT')) {
                     isInDialog = true;
                 }
             }

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

@@ -0,0 +1,47 @@
+define([], function () {
+
+    function parentWithAttribute(elem, name, value) {
+
+        while ((value ? elem.getAttribute(name) != value : !elem.getAttribute(name))) {
+            elem = elem.parentNode;
+
+            if (!elem || !elem.getAttribute) {
+                return null;
+            }
+        }
+
+        return elem;
+    }
+
+    function parentWithTag(elem, tagName) {
+
+        while (elem.tagName != tagName) {
+            elem = elem.parentNode;
+
+            if (!elem) {
+                return null;
+            }
+        }
+
+        return elem;
+    }
+
+    function parentWithClass(elem, className) {
+
+        while (!elem.classList || !elem.classList.contains(className)) {
+            elem = elem.parentNode;
+
+            if (!elem) {
+                return null;
+            }
+        }
+
+        return elem;
+    }
+
+    return {
+        parentWithAttribute: parentWithAttribute,
+        parentWithClass: parentWithClass,
+        parentWithTag: parentWithTag
+    };
+});

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

@@ -1,26 +1,21 @@
-define(['itemShortcuts', 'connectionManager', 'layoutManager', 'browser', 'registerElement'], function (itemShortcuts, connectionManager, layoutManager, browser) {
+define(['itemShortcuts', 'connectionManager', 'layoutManager', 'browser', 'dom', 'registerElement'], function (itemShortcuts, connectionManager, layoutManager, browser, dom) {
 
     var ItemsContainerProtoType = Object.create(HTMLDivElement.prototype);
 
-    function parentWithAttribute(elem, name) {
-
-        while (!elem.getAttribute(name)) {
-            elem = elem.parentNode;
-
-            if (!elem || !elem.getAttribute) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function onClick(e) {
 
         var itemsContainer = this;
         var target = e.target;
 
-        itemShortcuts.onClick.call(this, e);
+        var multiSelect = itemsContainer.multiSelect;
+
+        if (multiSelect) {
+            if (multiSelect.onContainerClick.call(itemsContainer, e) === false) {
+                return;
+            }
+        }
+
+        itemShortcuts.onClick.call(itemsContainer, e);
     }
 
     function disableEvent(e) {
@@ -35,7 +30,7 @@
         var itemsContainer = this;
 
         var target = e.target;
-        var card = parentWithAttribute(target, 'data-id');
+        var card = dom.parentWithAttribute(target, 'data-id');
 
         if (card) {
 
@@ -99,7 +94,10 @@
 
         var self = this;
         require(['multiSelect'], function (MultiSelect) {
-            self.multiSelect = new MultiSelect(self);
+            self.multiSelect = new MultiSelect({
+                container: self,
+                bindOnClick: false
+            });
         });
     };
 

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

@@ -1,4 +1,4 @@
-define([], function () {
+define(['dom'], function (dom) {
 
     function autoFocus(view, defaultToFirst) {
 
@@ -194,7 +194,7 @@ define([], function () {
             return;
         }
 
-        var focusableContainer = parentWithClass(activeElement, 'focusable');
+        var focusableContainer = dom.parentWithClass(activeElement, 'focusable');
 
         var doc = activeElement.ownerDocument;
         var windowData = getWindowData(doc.defaultView, doc.documentElement);
@@ -273,9 +273,9 @@ define([], function () {
             var nearestElement = nearest[0].node;
 
             // See if there's a focusable container, and if so, send the focus command to that
-            var nearestElementFocusableParent = parentWithClass(nearestElement, 'focusable');
+            var nearestElementFocusableParent = dom.parentWithClass(nearestElement, 'focusable');
             if (nearestElementFocusableParent && nearestElementFocusableParent != nearestElement && activeElement) {
-                if (parentWithClass(activeElement, 'focusable') != nearestElementFocusableParent) {
+                if (dom.parentWithClass(activeElement, 'focusable') != nearestElementFocusableParent) {
                     nearestElement = nearestElementFocusableParent;
                 }
             }
@@ -283,19 +283,6 @@ define([], function () {
         }
     }
 
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function intersectsInternal(a1, a2, b1, b2) {
 
         return (b1 >= a1 && b1 <= a2) || (b2 >= a1 && b2 <= a2);

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

@@ -443,6 +443,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
                         getResolveFunction(resolve, id, true)();
                     });
 
+                    break;
+                case 'canceltimer':
+                    deleteTimer(itemId, parentWithClass(card, 'itemsContainer'));
                     break;
                 default:
                     reject();
@@ -455,13 +458,20 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
 
         var method = queue ? 'queue' : 'play';
 
+        var startPosition = 0;
+        if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
+            startPosition = item.UserData.PlaybackPositionTicks;
+        }
+
         if (item.Type == 'Program') {
             playbackManager[method]({
-                ids: [item.ChannelId]
+                ids: [item.ChannelId],
+                startPositionTicks: startPosition
             });
         } else {
             playbackManager[method]({
-                items: [item]
+                items: [item],
+                startPositionTicks: startPosition
             });
         }
     }

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

@@ -1,21 +1,8 @@
-define(['connectionManager', 'itemHelper', 'mediaInfo', 'userdataButtons', 'playbackManager', 'globalize', 'css!./itemhovermenu', 'emby-button'], function (connectionManager, itemHelper, mediaInfo, userdataButtons, playbackManager, globalize) {
+define(['connectionManager', 'itemHelper', 'mediaInfo', 'userdataButtons', 'playbackManager', 'globalize', 'dom', 'css!./itemhovermenu', 'emby-button'], function (connectionManager, itemHelper, mediaInfo, userdataButtons, playbackManager, globalize, dom) {
 
     var preventHover = false;
     var showOverlayTimeout;
 
-    function parentWithAttribute(elem, name) {
-
-        while (!elem.getAttribute(name)) {
-            elem = elem.parentNode;
-
-            if (!elem || !elem.getAttribute) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function onHoverOut(e) {
 
         var elem = e.target;
@@ -164,18 +151,6 @@
         return html;
     }
 
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
 
     function onShowTimerExpired(elem) {
 
@@ -186,10 +161,16 @@
             innerElem.classList.add('hide');
             innerElem.classList.add('cardOverlayTarget');
 
-            elem.parentNode.appendChild(innerElem);
+            var appendTo;
+            if (elem.classList.contains('cardImageContainer')) {
+                appendTo = dom.parentWithClass(elem, 'cardBox');
+            } else {
+                appendTo = elem.parentNode;
+            }
+            appendTo.appendChild(innerElem);
         }
 
-        var dataElement = parentWithAttribute(elem, 'data-id');
+        var dataElement = dom.parentWithAttribute(elem, 'data-id');
 
         var id = dataElement.getAttribute('data-id');
         var type = dataElement.getAttribute('data-type');
@@ -218,7 +199,7 @@
     function onHoverIn(e) {
 
         var elem = e.target;
-        var card = parentWithClass(elem, 'cardImageContainer') || parentWithClass(elem, 'cardImage');
+        var card = dom.parentWithClass(elem, 'cardImageContainer') || dom.parentWithClass(elem, 'cardImage');
 
         if (!card) {
             return;

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

@@ -169,7 +169,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             var playlistItemId = item.PlaylistItemId ? (' data-playlistitemid="' + item.PlaylistItemId + '"') : '';
 
-            html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + index + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '"  data-serverid="' + item.ServerId + '" data-type="' + item.Type + '">';
+            var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
+
+            html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + index + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-mediatype="' + item.MediaType + '" data-type="' + item.Type + '"' + positionTicksData + '>';
 
             if (!clickEntireItem && options.dragHandle) {
                 html += '<button is="paper-icon-button-light" class="listViewDragHandle autoSize"><i class="md-icon">&#xE25D;</i></button>';

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

@@ -1,22 +1,9 @@
-define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'embyRouter', 'css!./multiselect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, embyRouter) {
+define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'embyRouter', 'dom', 'css!./multiselect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, embyRouter, dom) {
 
     var selectedItems = [];
     var selectedElements = [];
     var currentSelectionCommandsPanel;
 
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function hideSelections() {
 
         var selectionCommandsPanel = currentSelectionCommandsPanel;
@@ -66,7 +53,7 @@
     function onItemSelectionPanelClick(e, itemSelectionPanel) {
 
         // toggle the checkbox, if it wasn't clicked on
-        if (!parentWithClass(e.target, 'chkItemSelect')) {
+        if (!dom.parentWithClass(e.target, 'chkItemSelect')) {
             var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
 
             if (chkItemSelect) {
@@ -88,7 +75,7 @@
 
     function updateItemSelection(chkItemSelect, selected) {
 
-        var id = parentWithClass(chkItemSelect, 'card').getAttribute('data-id');
+        var id = dom.parentWithClass(chkItemSelect, 'card').getAttribute('data-id');
 
         if (selected) {
 
@@ -377,26 +364,13 @@
         });
     }
 
-    function parentWithAttribute(elem, name, value) {
-
-        while ((value ? elem.getAttribute(name) != value : !elem.getAttribute(name))) {
-            elem = elem.parentNode;
-
-            if (!elem || !elem.getAttribute) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function dispatchNeedsRefresh() {
 
         var elems = [];
 
         [].forEach.call(selectedElements, function (i) {
 
-            var container = parentWithAttribute(i, 'is', 'emby-itemscontainer');
+            var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
 
             if (container && elems.indexOf(container) == -1) {
                 elems.push(container);
@@ -466,7 +440,7 @@
 
         if (selectedItems.length) {
 
-            var card = parentWithClass(target, 'card');
+            var card = dom.parentWithClass(target, 'card');
             if (card) {
                 var itemSelectionPanel = card.querySelector('.itemSelectionPanel');
                 if (itemSelectionPanel) {
@@ -482,13 +456,15 @@
 
     document.addEventListener('viewbeforehide', hideSelections);
 
-    return function (container) {
+    return function (options) {
 
         var self = this;
 
+        var container = options.container;
+
         function onTapHold(e) {
 
-            var card = parentWithClass(e.target, 'card');
+            var card = dom.parentWithClass(e.target, 'card');
 
             if (card) {
 
@@ -531,7 +507,11 @@
 
         initTapHold(container);
 
+        if (options.bindOnClick !== false) {
             container.addEventListener('click', onContainerClick);
+        }
+
+        self.onContainerClick = onContainerClick;
 
         self.destroy = function () {
 

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

@@ -1,4 +1,4 @@
-define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'globalize', 'loading'], function (playbackManager, inputManager, connectionManager, embyRouter, globalize, loading) {
+define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'globalize', 'loading', 'dom'], function (playbackManager, inputManager, connectionManager, embyRouter, globalize, loading, dom) {
 
     function playAllFromHere(card, serverId, queue) {
 
@@ -92,7 +92,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
 
     function getItem(button) {
 
-        button = parentWithAttribute(button, 'data-id');
+        button = dom.parentWithAttribute(button, 'data-id');
         var serverId = button.getAttribute('data-serverid');
         var id = button.getAttribute('data-id');
         var type = button.getAttribute('data-type');
@@ -109,13 +109,13 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
 
         getItem(card).then(function (item) {
 
-            var itemsContainer = options.itemsContainer || parentWithAttribute(card, 'is', 'emby-itemscontainer');
+            var itemsContainer = options.itemsContainer || dom.parentWithAttribute(card, 'is', 'emby-itemscontainer');
 
             var playlistId = itemsContainer ? itemsContainer.getAttribute('data-playlistid') : null;
             var collectionId = itemsContainer ? itemsContainer.getAttribute('data-collectionid') : null;
 
             if (playlistId) {
-                var elem = parentWithAttribute(card, 'data-playlistitemid');
+                var elem = dom.parentWithAttribute(card, 'data-playlistitemid');
                 item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null;
             }
 
@@ -153,7 +153,16 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
 
     function showPlayMenu(card, target) {
 
-        getItem(card).then(function (item) {
+        var item = {
+            Type: card.getAttribute('data-type'),
+            Id: card.getAttribute('data-id'),
+            ServerId: card.getAttribute('data-serverid'),
+            MediaType: card.getAttribute('data-mediatype'),
+            IsFolder: card.getAttribute('data-isfolder') == 'true',
+            UserData: {
+                PlaybackPositionTicks: parseInt(card.getAttribute('data-positionticks') || '0')
+            }
+        };
 
         require(['playMenu'], function (playMenu) {
 
@@ -163,7 +172,6 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
                 positionTo: target
             });
         });
-        });
     }
 
     function executeAction(card, target, action) {
@@ -173,7 +181,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
         var id = card.getAttribute('data-id');
 
         if (!id) {
-            card = parentWithAttribute(card, 'data-id');
+            card = dom.parentWithAttribute(card, 'data-id');
             id = card.getAttribute('data-id');
         }
 
@@ -196,7 +204,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
 
         else if (action == 'play') {
 
-            var startPositionTicks = parseInt(card.getAttribute('data-startpositionticks') || '0');
+            var startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0');
 
             playbackManager.play({
                 ids: [id],
@@ -363,7 +371,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
 
     function onClick(e) {
 
-        var card = parentWithClass(e.target, 'itemAction');
+        var card = dom.parentWithClass(e.target, 'itemAction');
 
         if (card) {
 
@@ -371,7 +379,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
             var action = actionElement.getAttribute('data-action');
 
             if (!action) {
-                actionElement = parentWithAttribute(actionElement, 'data-action');
+                actionElement = dom.parentWithAttribute(actionElement, 'data-action');
                 action = actionElement.getAttribute('data-action');
             }
 
@@ -385,37 +393,11 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
         }
     }
 
-    function parentWithAttribute(elem, name, value) {
-
-        while ((value ? elem.getAttribute(name) != value : !elem.getAttribute(name))) {
-            elem = elem.parentNode;
-
-            if (!elem || !elem.getAttribute) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function onCommand(e) {
         var cmd = e.detail.command;
 
         if (cmd == 'play' || cmd == 'record' || cmd == 'menu' || cmd == 'info') {
-            var card = parentWithClass(e.target, 'itemAction');
+            var card = dom.parentWithClass(e.target, 'itemAction');
 
             if (card) {
                 executeAction(card, card, cmd);

dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json

@@ -120,5 +120,7 @@
   "GroupVersions": "Group Versions",
   "PleaseSelectTwoItems": "Please select at least two items.",
   "TheSelectedItemsWillBeGrouped": "The selected videos will be grouped into one virtual item. Emby apps will automatically choose which version to play based on device and network performance. Are you sure you wish to continue?",
+  "TryMultiSelect": "Try Multi-Select",
+  "TryMultiSelectMessage": "To edit multiple media items, just click and hold any poster and select the items you want to manage. Try it!",
   "Error": "Error"
 }

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

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'scrollHelper', 'appStorage', 'connectionManager', 'loading', 'focusManager', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button'], function (dialogHelper, require, layoutManager, globalize, scrollHelper, appStorage, connectionManager, loading, focusManager) {
+define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'scrollHelper', 'appStorage', 'connectionManager', 'loading', 'focusManager', 'dom', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button'], function (dialogHelper, require, layoutManager, globalize, scrollHelper, appStorage, connectionManager, loading, focusManager, dom) {
 
     var currentItem;
     var hasChanges;
@@ -326,25 +326,12 @@
         }
     }
 
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function onSearchSubmit(e) {
         var form = this;
 
         var lang = form.querySelector('#selectLanguage', form).value;
 
-        searchForSubtitles(parentWithClass(form, 'dialogContent'), lang);
+        searchForSubtitles(dom.parentWithClass(form, 'dialogContent'), lang);
 
         e.preventDefault();
         return false;
@@ -352,20 +339,20 @@
 
     function onSubtitleListClick(e) {
 
-        var btnDelete = parentWithClass(e.target, 'btnDelete');
+        var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
         if (btnDelete) {
             var index = btnDelete.getAttribute('data-index');
-            var context = parentWithClass(btnDelete, 'subtitleEditorDialog');
+            var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
             deleteLocalSubtitle(context, index);
         }
     }
 
     function onSubtitleResultsClick(e) {
 
-        var btnOptions = parentWithClass(e.target, 'btnOptions');
+        var btnOptions = dom.parentWithClass(e.target, 'btnOptions');
         if (btnOptions) {
             var subtitleId = btnOptions.getAttribute('data-subid');
-            var context = parentWithClass(btnOptions, 'subtitleEditorDialog');
+            var context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
             showDownloadOptions(btnOptions, context, subtitleId);
         }
     }

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

@@ -46,7 +46,7 @@ define(['connectionManager', 'globalize', 'paper-icon-button-light', 'material-i
         }
 
         if (includePlayed !== false) {
-            var tooltipPlayed = globalize.translate('sharedcomponents#Played');
+            var tooltipPlayed = globalize.translate('sharedcomponents#MarkPlayed');
 
             if (item.MediaType == 'Video' || item.Type == 'Series' || item.Type == 'Season' || item.Type == 'BoxSet' || item.Type == 'Playlist') {
                 if (item.Type != 'TvChannel') {

dashboard-ui/components/categorysyncbuttons.js

@@ -0,0 +1,48 @@
+define(['itemHelper'], function (itemHelper) {
+
+    function initSyncButtons(view) {
+
+        var apiClient = window.ApiClient;
+
+        if (!apiClient || !apiClient.getCurrentUserId()) {
+            return;
+        }
+
+        apiClient.getCurrentUser().then(function (user) {
+
+            var item = {
+                SupportsSync: true
+            };
+
+            var categorySyncButtons = view.querySelectorAll('.categorySyncButton');
+            for (var i = 0, length = categorySyncButtons.length; i < length; i++) {
+                categorySyncButtons[i].addEventListener('click', onCategorySyncButtonClick);
+                if (itemHelper.canSync(user, item)) {
+                    categorySyncButtons[i].classList.remove('hide');
+                } else {
+                    categorySyncButtons[i].classList.add('hide');
+                }
+            }
+        });
+    }
+
+    function onCategorySyncButtonClick(e) {
+
+        var button = this;
+        var category = button.getAttribute('data-category');
+        var parentId = LibraryMenu.getTopParentId();
+
+        require(['syncDialog'], function (syncDialog) {
+            syncDialog.showMenu({
+                ParentId: parentId,
+                Category: category
+            });
+        });
+    }
+
+    return {
+        init: function (view) {
+            initSyncButtons(view);
+        }
+    };
+});

dashboard-ui/scripts/homenextup.js

@@ -1,4 +1,4 @@
-define(['emby-itemscontainer'], function () {
+define(['components/categorysyncbuttons', 'emby-itemscontainer'], function (categorysyncbuttons) {
 
     function getNextUpPromise() {
 
@@ -50,6 +50,8 @@
         var self = this;
         var nextUpPromise;
 
+        categorysyncbuttons.init(view);
+
         self.preRender = function () {
             nextUpPromise = getNextUpPromise();
         };

dashboard-ui/scripts/itemdetailpage.js

@@ -1,4 +1,4 @@
-define(['layoutManager', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons) {
+define(['layoutManager', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom) {
 
     var currentItem;
 
@@ -2038,19 +2038,6 @@
 
     window.ItemDetailPage = new itemDetailPage();
 
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function onPlayClick() {
         playCurrentItem(this);
     }
@@ -2144,20 +2131,20 @@
 
         view.addEventListener('click', function (e) {
 
-            if (parentWithClass(e.target, 'moreScenes')) {
+            if (dom.parentWithClass(e.target, 'moreScenes')) {
                 Dashboard.getCurrentUser().then(function (user) {
                     renderScenes(view, currentItem, user);
                 });
             }
-            else if (parentWithClass(e.target, 'morePeople')) {
+            else if (dom.parentWithClass(e.target, 'morePeople')) {
                 renderCast(view, currentItem, params.context);
             }
-            else if (parentWithClass(e.target, 'moreSpecials')) {
+            else if (dom.parentWithClass(e.target, 'moreSpecials')) {
                 Dashboard.getCurrentUser().then(function (user) {
                     renderSpecials(view, currentItem, user);
                 });
             }
-            else if (parentWithClass(e.target, 'moreCriticReviews')) {
+            else if (dom.parentWithClass(e.target, 'moreCriticReviews')) {
                 renderCriticReviews(view, currentItem);
             }
         });
@@ -2168,7 +2155,7 @@
         });
 
         view.querySelector('.detailImageContainer').addEventListener('click', function (e) {
-            var itemDetailGalleryLink = parentWithClass(e.target, 'itemDetailGalleryLink');
+            var itemDetailGalleryLink = dom.parentWithClass(e.target, 'itemDetailGalleryLink');
             if (itemDetailGalleryLink) {
                 LibraryBrowser.editImages(currentItem.Id).then(function () {
                     reload(view, params);

dashboard-ui/scripts/librarybrowser.js

@@ -1,17 +1,4 @@
-define(['scrollHelper', 'viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'scrollStyles'], function (scrollHelper, viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators) {
+define(['scrollHelper', 'viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'dom', 'scrollStyles'], function (scrollHelper, viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators, dom) {
-
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
 
     function fadeInRight(elem) {
 
@@ -267,7 +254,7 @@
                 tabs.addEventListener('click', function (e) {
 
                     var current = tabs.querySelector('.is-active');
-                    var link = parentWithClass(e.target, 'pageTabButton');
+                    var link = dom.parentWithClass(e.target, 'pageTabButton');
 
                     if (link && link != current) {
 

dashboard-ui/scripts/librarylist.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'itemHelper'], function (libraryBrowser, itemHelper) {
+define(['libraryBrowser'], function (libraryBrowser) {
 
     function isClickable(target) {
 
@@ -56,62 +56,4 @@
         e.preventDefault();
         return false;
     }
-
-    function showSyncButtonsPerUser(page) {
-
-        var apiClient = window.ApiClient;
-
-        if (!apiClient || !apiClient.getCurrentUserId()) {
-            return;
-        }
-
-        Dashboard.getCurrentUser().then(function (user) {
-
-            var item = {
-                SupportsSync: true
-            };
-
-            var categorySyncButtons = page.querySelectorAll('.categorySyncButton');
-            for (var i = 0, length = categorySyncButtons.length; i < length; i++) {
-                if (itemHelper.canSync(user, item)) {
-                    categorySyncButtons[i].classList.remove('hide');
-                } else {
-                    categorySyncButtons[i].classList.add('hide');
-                }
-            }
-        });
-    }
-
-    function onCategorySyncButtonClick(e) {
-
-        var button = this;
-        var category = button.getAttribute('data-category');
-        var parentId = LibraryMenu.getTopParentId();
-
-        require(['syncDialog'], function (syncDialog) {
-            syncDialog.showMenu({
-                ParentId: parentId,
-                Category: category
-            });
-        });
-    }
-
-    pageClassOn('pageinit', "libraryPage", function () {
-
-        var page = this;
-
-        var categorySyncButtons = page.querySelectorAll('.categorySyncButton');
-        for (var i = 0, length = categorySyncButtons.length; i < length; i++) {
-            categorySyncButtons[i].addEventListener('click', onCategorySyncButtonClick);
-        }
-    });
-
-    pageClassOn('pageshow', "libraryPage", function () {
-
-        var page = this;
-
-        if (!Dashboard.isServerlessPage()) {
-            showSyncButtonsPerUser(page);
-        }
-    });
 });

dashboard-ui/scripts/librarymenu.js

@@ -1,4 +1,4 @@
-define(['imageLoader', 'layoutManager', 'viewManager', 'navdrawer', 'paper-icon-button-light', 'material-icons'], function (imageLoader, layoutManager, viewManager, navdrawer) {
+define(['imageLoader', 'layoutManager', 'viewManager', 'navdrawer', 'libraryBrowser', 'paper-icon-button-light', 'material-icons'], function (imageLoader, layoutManager, viewManager, navdrawer, libraryBrowser) {
 
     var navDrawerElement = document.querySelector('.mainDrawer');
     var navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
@@ -179,7 +179,7 @@
 
     function onHeaderAppsButtonClick() {
 
-        require(['dialogHelper'], function (dialogHelper) {
+        require(['dialogHelper', 'dom'], function (dialogHelper, dom) {
 
             var dlg = dialogHelper.createDialog({
                 removeOnClose: true,
@@ -222,7 +222,7 @@
             document.body.appendChild(dlg);
 
             dlg.addEventListener('click', function (e) {
-                var link = parentWithTag(e.target, 'A');
+                var link = dom.parentWithTag(e.target, 'A');
                 if (link) {
                     dialogHelper.close(dlg);
                 }
@@ -275,7 +275,7 @@
 
     function getItemHref(item, context) {
 
-        return LibraryBrowser.getHref(item, context);
+        return libraryBrowser.getHref(item, context);
     }
 
     var requiresUserRefresh = true;
@@ -391,19 +391,6 @@
         }
     }
 
-    function parentWithTag(elem, tagName) {
-
-        while (elem.tagName != tagName) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function updateDashboardMenuSelectedItem() {
 
         var links = navDrawerScrollContainer.querySelectorAll('.sidebarLink');

dashboard-ui/scripts/livetvrecordings.js

@@ -1,4 +1,4 @@
-define(['scripts/livetvcomponents', 'emby-button', 'listViewStyle', 'emby-itemscontainer'], function () {
+define(['components/categorysyncbuttons', 'scripts/livetvcomponents', 'emby-button', 'listViewStyle', 'emby-itemscontainer'], function (categorysyncbuttons) {
 
     function getRecordingGroupHtml(group) {
 
@@ -183,6 +183,8 @@
     return function (view, params, tabContent) {
 
         var self = this;
+
+        categorysyncbuttons.init(tabContent);
 
        tabContent.querySelector('#activeRecordings .recordingItems').addEventListener('timercancelled', function () {
             reload(tabContent);
         });

dashboard-ui/scripts/loginpage.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['libraryBrowser'], function (libraryBrowser) {
 
     function getApiClient() {
 
@@ -125,7 +125,7 @@
             }
             else {
 
-                var background = LibraryBrowser.getMetroColor(user.Id);
+                var background = libraryBrowser.getMetroColor(user.Id);
 
                 imgUrl = 'css/images/logindefault.png';
 

dashboard-ui/scripts/moviegenres.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['libraryBrowser'], function (libraryBrowser) {
 
     return function (view, params, tabContent) {
 
@@ -19,11 +19,11 @@
                         Fields: "DateCreated,SyncInfo,ItemCounts",
                         StartIndex: 0
                     },
-                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
                 };
 
                 pageData.query.ParentId = params.topParentId;
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
         }
@@ -35,7 +35,7 @@
 
         function getSavedQueryKey() {
 
-            return LibraryBrowser.getSavedQueryKey('genres');
+            return libraryBrowser.getSavedQueryKey('genres');
         }
 
         function getPromise() {
@@ -57,7 +57,7 @@
                 var viewStyle = self.getCurrentViewStyle();
 
                 if (viewStyle == "Thumb") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
@@ -70,7 +70,7 @@
                 }
                 else if (viewStyle == "ThumbCard") {
 
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
@@ -82,7 +82,7 @@
                     });
                 }
                 else if (viewStyle == "PosterCard") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
                         context: 'movies',
@@ -93,7 +93,7 @@
                     });
                 }
                 else if (viewStyle == "Poster") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
                         context: 'movies',
@@ -108,7 +108,7 @@
                 elem.innerHTML = html;
                 ImageLoader.lazyChildren(elem);
 
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
+                libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
                 Dashboard.hideLoadingMsg();
             });
@@ -123,7 +123,7 @@
 
         self.setCurrentViewStyle = function (viewStyle) {
             getPageData(tabContent).view = viewStyle;
-            LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+            libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
             fullyReload();
         };
 
@@ -147,7 +147,7 @@
         var btnSelectView = tabContent.querySelector('.btnSelectView');
         btnSelectView.addEventListener('click', function (e) {
 
-            LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
+            libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
         });
 
         btnSelectView.addEventListener('layoutchange', function (e) {

dashboard-ui/scripts/moviesrecommended.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {
+define(['libraryBrowser', 'components/categorysyncbuttons', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons) {
 
     function getView() {
 
@@ -270,7 +270,9 @@
         var self = this;
 
         self.initTab = function () {
+
             var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
+            categorysyncbuttons.init(tabContent);
             initSuggestedTab(view, tabContent);
         };
 

dashboard-ui/scripts/moviestudios.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['libraryBrowser'], function (libraryBrowser) {
 
     // The base query options
     var data = {};
@@ -27,7 +27,7 @@
 
     function getSavedQueryKey() {
 
-        return LibraryBrowser.getSavedQueryKey('studios');
+        return libraryBrowser.getSavedQueryKey('studios');
     }
 
     function getPromise(context, params) {
@@ -44,7 +44,7 @@
 
             var html = '';
 
-            html += LibraryBrowser.getPosterViewHtml({
+            html += libraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 shape: "backdrop",
                 showTitle: false,

dashboard-ui/scripts/musicgenres.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['libraryBrowser'], function (libraryBrowser) {
 
     return function (view, params, tabContent) {
 
@@ -19,11 +19,11 @@
                         Fields: "DateCreated,SyncInfo,ItemCounts",
                         StartIndex: 0
                     },
-                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
                 };
 
                 pageData.query.ParentId = params.topParentId;
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
         }
@@ -35,7 +35,7 @@
 
         function getSavedQueryKey() {
 
-            return LibraryBrowser.getSavedQueryKey('genres');
+            return libraryBrowser.getSavedQueryKey('genres');
         }
 
         function getPromise() {
@@ -57,7 +57,7 @@
                 var viewStyle = self.getCurrentViewStyle();
 
                 if (viewStyle == "Thumb") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
@@ -70,7 +70,7 @@
                 }
                 else if (viewStyle == "ThumbCard") {
 
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
@@ -82,7 +82,7 @@
                     });
                 }
                 else if (viewStyle == "PosterCard") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
                         context: 'music',
@@ -93,7 +93,7 @@
                     });
                 }
                 else if (viewStyle == "Poster") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
                         context: 'music',
@@ -108,7 +108,7 @@
                 elem.innerHTML = html;
                 ImageLoader.lazyChildren(elem);
 
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
+                libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
                 Dashboard.hideLoadingMsg();
             });
@@ -123,7 +123,7 @@
 
         self.setCurrentViewStyle = function (viewStyle) {
             getPageData(tabContent).view = viewStyle;
-            LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+            libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
             fullyReload();
         };
 
@@ -147,7 +147,7 @@
         var btnSelectView = tabContent.querySelector('.btnSelectView');
         btnSelectView.addEventListener('click', function (e) {
 
-            LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
+            libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
         });
 
         btnSelectView.addEventListener('layoutchange', function (e) {

dashboard-ui/scripts/notifications.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['libraryBrowser'], function (libraryBrowser) {
 
     function notifications() {
 
@@ -106,7 +106,7 @@
 
             var query = { StartIndex: startIndex, Limit: limit };
 
-            html += LibraryBrowser.getQueryPagingHtml({
+            html += libraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: totalRecordCount,

dashboard-ui/scripts/reports.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'libraryBrowser'], function ($, libraryBrowser) {
 
     var defaultSortBy = "SortName";
     var topItems = 5;
@@ -311,7 +311,7 @@
             $('#tabFilter', page).hide();
         }
 
-        var pagingHtml = LibraryBrowser.getQueryPagingHtml({
+        var pagingHtml = libraryBrowser.getQueryPagingHtml({
             startIndex: query.StartIndex,
             limit: query.Limit,
             totalRecordCount: result.TotalRecordCount,

dashboard-ui/scripts/shared.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'libraryBrowser'], function ($, libraryBrowser) {
 
     var currentItem;
 
@@ -18,9 +18,9 @@
 
         currentItem = item;
 
-        LibraryBrowser.renderName(item, $('.itemName', page)[0], false);
+        libraryBrowser.renderName(item, $('.itemName', page)[0], false);
-        LibraryBrowser.renderParentName(item, $('.parentName', page)[0]);
+        libraryBrowser.renderParentName(item, $('.parentName', page)[0]);
-        LibraryBrowser.renderDetailPageBackdrop(page, item);
+        libraryBrowser.renderDetailPageBackdrop(page, item);
 
         renderImage(page, item);
 
@@ -58,7 +58,7 @@
     }
 
     function renderImage(page, item) {
-        LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, false);
+        libraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, false);
     }
 
     $(document).on('pageinit', "#publicSharedItemPage", function () {

dashboard-ui/scripts/site.js

@@ -1822,6 +1822,7 @@ var AppInfo = {};
         define("subtitleEditor", [embyWebComponentsBowerPath + "/subtitleeditor/subtitleeditor"], returnFirstDependency);
         define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
         define("itemContextMenu", [embyWebComponentsBowerPath + "/itemcontextmenu"], returnFirstDependency);
+        define("dom", [embyWebComponentsBowerPath + "/dom"], returnFirstDependency);
         define("playMenu", [embyWebComponentsBowerPath + "/playmenu"], returnFirstDependency);
         define("refreshDialog", [embyWebComponentsBowerPath + "/refreshdialog/refreshdialog"], returnFirstDependency);
         define("backdrop", [embyWebComponentsBowerPath + "/backdrop/backdrop"], returnFirstDependency);
@@ -3176,7 +3177,6 @@ var AppInfo = {};
             }
         }
 
-        deps.push('scripts/librarylist');
         deps.push('scripts/librarymenu');
 
         deps.push('css!css/card.css');

dashboard-ui/scripts/tvgenres.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['libraryBrowser'], function (libraryBrowser) {
 
     return function (view, params, tabContent) {
 
@@ -19,11 +19,11 @@
                         Fields: "DateCreated,SyncInfo,ItemCounts",
                         StartIndex: 0
                     },
-                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
                 };
 
                 pageData.query.ParentId = params.topParentId;
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
         }
@@ -35,7 +35,7 @@
 
         function getSavedQueryKey() {
 
-            return LibraryBrowser.getSavedQueryKey('genres');
+            return libraryBrowser.getSavedQueryKey('genres');
         }
 
         function getPromise() {
@@ -57,7 +57,7 @@
                 var viewStyle = self.getCurrentViewStyle();
 
                 if (viewStyle == "Thumb") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
@@ -70,7 +70,7 @@
                 }
                 else if (viewStyle == "ThumbCard") {
 
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
@@ -82,7 +82,7 @@
                     });
                 }
                 else if (viewStyle == "PosterCard") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
                         context: 'tv',
@@ -93,7 +93,7 @@
                     });
                 }
                 else if (viewStyle == "Poster") {
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
                         context: 'tv',
@@ -108,7 +108,7 @@
                 elem.innerHTML = html;
                 ImageLoader.lazyChildren(elem);
 
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
+                libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
                 Dashboard.hideLoadingMsg();
             });
@@ -123,7 +123,7 @@
 
         self.setCurrentViewStyle = function(viewStyle) {
             getPageData(tabContent).view = viewStyle;
-            LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+            libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
             fullyReload();
         };
 
@@ -147,7 +147,7 @@
         var btnSelectView = tabContent.querySelector('.btnSelectView');
         btnSelectView.addEventListener('click', function (e) {
 
-            LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
+            libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
         });
 
         btnSelectView.addEventListener('layoutchange', function (e) {

dashboard-ui/scripts/tvlatest.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['components/categorysyncbuttons'], function (categorysyncbuttons) {
 
     function getView() {
 
@@ -77,7 +77,8 @@
 
    return function (view, params, tabContent) {
 
         var self = this;
-
        var latestPromise;
+
+        categorysyncbuttons.init(tabContent);

        var latestPromise;
 
         self.preRender = function () {
 
            latestPromise = getLatestPromise(view, params);

dashboard-ui/scripts/tvrecommended.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {
+define(['libraryBrowser', 'components/categorysyncbuttons', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons) {
 
     return function (view, params) {
 
@@ -165,6 +165,8 @@
             } else {
                 tabContent.querySelector('#resumableItems').classList.remove('hiddenScrollX');
             }
+
+            categorysyncbuttons.init(tabContent);
         };
 
         self.renderTab = function () {

dashboard-ui/scripts/tvstudios.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['libraryBrowser'], function (libraryBrowser) {
 
     // The base query options
     var data = {};
@@ -27,7 +27,7 @@
 
     function getSavedQueryKey() {
 
-        return LibraryBrowser.getSavedQueryKey('studios');
+        return libraryBrowser.getSavedQueryKey('studios');
     }
 
     function getPromise(context, params) {
@@ -44,7 +44,7 @@
 
             var html = '';
 
-            html += LibraryBrowser.getPosterViewHtml({
+            html += libraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 shape: "backdrop",
                 showTitle: false,

dashboard-ui/scripts/tvupcoming.js

@@ -1,4 +1,4 @@
-define(['datetime', 'scrollStyles', 'emby-itemscontainer'], function (datetime) {
+define(['datetime', 'libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (datetime, libraryBrowser) {
 
     function getUpcomingPromise(context, params) {
 
@@ -69,7 +69,7 @@
                     if (premiereDate.getDate() == new Date().getDate() - 1) {
                         dateText = Globalize.translate('Yesterday');
                     } else {
-                        dateText = LibraryBrowser.getFutureDateText(premiereDate, true);
+                        dateText = libraryBrowser.getFutureDateText(premiereDate, true);
                     }
 
                 } catch (err) {
@@ -107,7 +107,7 @@
                 html += '<div is="emby-itemscontainer" class="itemsContainer">';
             }
 
-            html += LibraryBrowser.getPosterViewHtml({
+            html += libraryBrowser.getPosterViewHtml({
                 items: group.items,
                 showLocationTypeIndicator: false,
                 shape: getThumbShape(),