Merge pull request #1950 from MediaBrowser/dev

Dev
2016-07-18 02:46:33 -04:00 · 2016-07-18 02:46:33 -04:00 · 9afdf82a20
commit 9afdf82a20
parent 2c04fb9eb8 c216a7ecdc
65 changed files with 1147 additions and 1157 deletions
--- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
@ -15,12 +15,12 @@
  },
  "devDependencies": {},
  "ignore": [],
-  "version": "1.4.91",
-  "_release": "1.4.91",
+  "version": "1.4.96",
+  "_release": "1.4.96",
  "_resolution": {
    "type": "version",
-    "tag": "1.4.91",
-    "commit": "a4c5466d5a59e57b157aa941fcadb1e0df602f75"
+    "tag": "1.4.96",
+    "commit": "4c9f9b8c4937da15ac8c81d554e768f0ef6e944e"
  },
  "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
  "_target": "^1.2.0",
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-itemscontainer/emby-itemscontainer.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-itemscontainer/emby-itemscontainer.js
@ -1,26 +1,13 @@
-define(['itemShortcuts', 'connectionManager', 'registerElement'], function (itemShortcuts, connectionManager) {
+define(['itemShortcuts', 'connectionManager', 'layoutManager', 'browser', 'registerElement'], function (itemShortcuts, connectionManager, layoutManager, browser) {

    var ItemsContainerProtoType = Object.create(HTMLDivElement.prototype);

-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
    function parentWithAttribute(elem, name) {

        while (!elem.getAttribute(name)) {
            elem = elem.parentNode;

-            if (!elem) {
+            if (!elem || !elem.getAttribute) {
                return null;
            }
        }
@ -28,80 +15,96 @@
        return elem;
    }

-    function getItem(button) {
-
-        button = parentWithAttribute(button, 'data-id');
-        var serverId = button.getAttribute('data-serverid');
-        var id = button.getAttribute('data-id');
-        var type = button.getAttribute('data-type');
-
-        var apiClient = connectionManager.getApiClient(serverId);
-
-        return apiClient.getItem(apiClient.getCurrentUserId(), id);
-    }
-
-    function showContextMenu(button, itemsContainer) {
-
-        getItem(button).then(function (item) {
-
-            var playlistId = itemsContainer.getAttribute('data-playlistid');
-            var collectionId = itemsContainer.getAttribute('data-collectionid');
-
-            if (playlistId) {
-                var elem = parentWithAttribute(button, 'data-playlistitemid');
-                item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null;
-            }
-
-            require(['itemContextMenu'], function (itemContextMenu) {
-                itemContextMenu.show({
-                    positionTo: button,
-                    item: item,
-                    play: true,
-                    queue: true,
-                    playAllFromHere: !item.IsFolder,
-                    queueAllFromHere: !item.IsFolder,
-                    identify: false,
-                    playlistId: playlistId,
-                    collectionId: collectionId
-
-                }).then(function (result) {
-
-                    if (result.command == 'playallfromhere' || result.command == 'queueallfromhere') {
-                        itemShortcuts.execute(button, result.command);
-                    }
-                    else if (result.command == 'removefromplaylist' || result.command == 'removefromcollection') {
-
-                        itemsContainer.dispatchEvent(new CustomEvent('needsrefresh', {
-                            detail: {},
-                            cancelable: false,
-                            bubbles: true
-                        }));
-                    }
-                });
-            });
-        });
-    }
-
    function onClick(e) {

        var itemsContainer = this;
+        var target = e.target;

-        var menuButton = parentWithClass(e.target, 'menuButton');
-        if (menuButton) {
-            showContextMenu(menuButton, itemsContainer);
-            e.stopPropagation();
-            return false;
-        }
+        itemShortcuts.onClick.call(this, e);
    }

+    function disableEvent(e) {
+
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+    }
+
+    function onContextMenu(e) {
+
+        var itemsContainer = this;
+
+        var target = e.target;
+        var card = parentWithAttribute(target, 'data-id');
+        if (card) {
+
+            //var itemSelectionPanel = card.querySelector('.itemSelectionPanel');
+
+            //if (!itemSelectionPanel) {
+            //    showContextMenu(card, {});
+            //}
+
+            itemShortcuts.showContextMenu(card, {
+                identify: false,
+                positionTo: target,
+                itemsContainer: itemsContainer
+            });
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+    }
+
+    function getShortcutOptions() {
+        return {
+            click: false
+        };
+    }
+
+    ItemsContainerProtoType.enableHoverMenu = function (enabled) {
+
+        var current = this.hoverMenu;
+
+        if (!enabled && current) {
+            current.destroy();
+            this.hoverMenu = null;
+            return;
+        }
+
+        if (current) {
+            return;
+        }
+
+        var self = this;
+        require(['itemHoverMenu'], function (ItemHoverMenu) {
+            self.hoverMenu = new ItemHoverMenu(self);
+        });
+    };
+
    ItemsContainerProtoType.attachedCallback = function () {
        this.addEventListener('click', onClick);
-        itemShortcuts.on(this);
+
+        // mobile safari doesn't allow contextmenu override
+        if (browser.safari && browser.mobile) {
+            this.addEventListener('contextmenu', disableEvent);
+            // todo: use tap hold
+        } else {
+            this.addEventListener('contextmenu', onContextMenu);
+        }
+
+        if (layoutManager.desktop) {
+            this.enableHoverMenu(true);
+        }
+
+        itemShortcuts.on(this, getShortcutOptions());
    };

    ItemsContainerProtoType.detachedCallback = function () {
        this.removeEventListener('click', onClick);
-        itemShortcuts.off(this);
+        this.removeEventListener('contextmenu', onContextMenu);
+        this.removeEventListener('contextmenu', disableEvent);
+        itemShortcuts.off(this, getShortcutOptions());
    };

    document.registerElement('emby-itemscontainer', {
--- a/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js
@ -39,20 +39,37 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
                });
            }

-            if (options.edit !== false) {
-                if (itemHelper.canEdit(user, item.Type)) {
+            if (itemHelper.canEdit(user, item.Type)) {
+
+                if (!isTheater) {
+                    if (options.edit !== false) {
+
+                        var text = item.Type == 'Timer' ? globalize.translate('sharedcomponents#Edit') : globalize.translate('sharedcomponents#EditInfo');

-                    if (!isTheater) {
                        commands.push({
-                            name: globalize.translate('sharedcomponents#EditInfo'),
+                            name: text,
                            id: 'edit'
                        });
+                    }
+                }
+            }
+
+            if (itemHelper.canEditImages(user, item.Type)) {
+
+                if (!isTheater) {
+                    if (options.editImages !== false) {
                        commands.push({
                            name: globalize.translate('sharedcomponents#EditImages'),
                            id: 'editimages'
                        });
                    }
-                    if (item.MediaType == 'Video' && item.Type != 'TvChannel' && item.Type != 'Program' && item.LocationType != 'Virtual') {
+                }
+            }
+
+            if (itemHelper.canEdit(user, item.Type)) {
+
+                if (item.MediaType == 'Video' && item.Type != 'TvChannel' && item.Type != 'Program' && item.LocationType != 'Virtual') {
+                    if (options.editSubtitles !== false) {
                        commands.push({
                            name: globalize.translate('sharedcomponents#EditSubtitles'),
                            id: 'editsubtitles'
--- a/dashboard-ui/bower_components/emby-webcomponents/itemhelper.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemhelper.js
@ -69,6 +69,20 @@ define(['apphost'], function (appHost) {
        return item.RunTimeTicks || item.IsFolder || item.Type == "Genre" || item.Type == "MusicGenre" || item.Type == "MusicArtist";
    }

+    function canEdit(user, itemType) {
+
+        if (itemType == "UserRootFolder" || /*itemType == "CollectionFolder" ||*/ itemType == "UserView") {
+            return false;
+        }
+
+        if (user.Policy.IsAdministrator) {
+
+            return true;
+        }
+
+        return false;
+    }
+
    return {
        getDisplayName: getDisplayName,
        supportsAddingToCollection: supportsAddingToCollection,
@ -95,18 +109,11 @@ define(['apphost'], function (appHost) {
            return false;
        },

-        canEdit: function (user, itemType) {
+        canEdit: canEdit,

-            if (itemType == "UserRootFolder" || /*itemType == "CollectionFolder" ||*/ itemType == "UserView") {
-                return false;
-            }
+        canEditImages: function (user, itemType) {

-            if (user.Policy.IsAdministrator) {
-
-                return true;
-            }
-
-            return false;
+            return itemType != 'Timer' && canEdit(user, itemType);
        },

        canSync: function (user, item) {
--- a/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css
@ -0,0 +1,52 @@
+.cardOverlayTarget {
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, .85);
+    z-index: 998;
+    line-height: initial;
+}
+
+.cardOverlayInner {
+    padding: 11px 12px 10px;
+    color: #fff;
+}
+
+    .cardOverlayInner button:last-child {
+        margin-right: 0 !important;
+    }
+
+    .cardOverlayInner p {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+.cardOverlayMediaInfo {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 1em 0;
+    color: #ddd;
+}
+
+.cardOverlayButtons {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+    .cardOverlayButtons .fab {
+        background-color: #333;
+        margin-right: .25em;
+    }
+
+@media all and (max-width: 1200px) {
+
+    .cardOverlayInner {
+        padding-left: 7px;
+        padding-right: 7px;
+    }
+}
--- a/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.js
@ -0,0 +1,280 @@
+define(['connectionManager', 'itemHelper', 'mediaInfo', 'userdataButtons', 'playbackManager', 'globalize', 'css!./itemhovermenu', 'emby-button'], function (connectionManager, itemHelper, mediaInfo, userdataButtons, playbackManager, globalize) {
+
+    var preventHover = false;
+    var showOverlayTimeout;
+    var hoveringElement;
+
+    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;
+
+        if (elem != hoveringElement) {
+            return;
+        }
+
+        if (showOverlayTimeout) {
+            clearTimeout(showOverlayTimeout);
+            showOverlayTimeout = null;
+        }
+
+        elem = elem.querySelector('.cardOverlayTarget');
+
+        if (elem) {
+            slideDownToHide(elem);
+        }
+    }
+
+    function slideDownToHide(elem) {
+
+        if (elem.classList.contains('hide')) {
+            return;
+        }
+
+        if (!elem.animate) {
+            elem.classList.add('hide');
+            return;
+        }
+
+        requestAnimationFrame(function () {
+            var keyframes = [
+              { transform: 'translateY(0)', offset: 0 },
+              { transform: 'translateY(100%)', offset: 1 }];
+            var timing = { duration: 300, iterations: 1, fill: 'forwards', easing: 'ease-out' };
+
+            elem.animate(keyframes, timing).onfinish = function () {
+                elem.classList.add('hide');
+            };
+        });
+    }
+
+    function slideUpToShow(elem) {
+
+        if (!elem.classList.contains('hide')) {
+            return;
+        }
+
+        elem.classList.remove('hide');
+
+        if (!elem.animate) {
+            return;
+        }
+
+        requestAnimationFrame(function () {
+
+            var keyframes = [
+              { transform: 'translateY(100%)', offset: 0 },
+              { transform: 'translateY(0)', offset: 1 }];
+            var timing = { duration: 300, iterations: 1, fill: 'forwards', easing: 'ease-out' };
+            elem.animate(keyframes, timing);
+        });
+    }
+
+    function getOverlayHtml(item, currentUser, card) {
+
+        var html = '';
+
+        html += '<div class="cardOverlayInner">';
+
+        var className = card.className.toLowerCase();
+
+        var isMiniItem = className.indexOf('mini') != -1;
+        var isSmallItem = isMiniItem || className.indexOf('small') != -1;
+        var isPortrait = className.indexOf('portrait') != -1;
+
+        var parentName = isSmallItem || isMiniItem || isPortrait ? null : item.SeriesName;
+        var name = itemHelper.getDisplayName(item);
+
+        html += '<div>';
+        var logoHeight = isSmallItem || isMiniItem ? 20 : 26;
+        var imgUrl;
+
+        if (parentName && item.ParentLogoItemId) {
+
+            imgUrl = ApiClient.getScaledImageUrl(item.ParentLogoItemId, {
+                maxHeight: logoHeight,
+                type: 'logo',
+                tag: item.ParentLogoImageTag
+            });
+
+            html += '<img src="' + imgUrl + '" style="max-height:' + logoHeight + 'px;max-width:100%;" />';
+
+        }
+        else if (item.ImageTags.Logo) {
+
+            imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                maxHeight: logoHeight,
+                type: 'logo',
+                tag: item.ImageTags.Logo
+            });
+
+            html += '<img src="' + imgUrl + '" style="max-height:' + logoHeight + 'px;max-width:100%;" />';
+        }
+        else {
+            html += parentName || name;
+        }
+        html += '</div>';
+
+        if (parentName) {
+            html += '<p>';
+            html += name;
+            html += '</p>';
+        } else if (!isSmallItem && !isMiniItem) {
+            html += '<div class="cardOverlayMediaInfo">';
+            html += mediaInfo.getPrimaryMediaInfoHtml(item, {
+                endsAt: false
+            });
+            html += '</div>';
+        }
+
+        html += '<div class="cardOverlayButtons">';
+
+        var buttonCount = 0;
+
+        if (playbackManager.canPlay(item)) {
+
+            html += '<button is="emby-button" class="itemAction autoSize fab mini" data-action="playmenu"><i class="md-icon">&#xE037;</i></button>';
+            buttonCount++;
+        }
+
+        if (item.LocalTrailerCount) {
+            html += '<button title="' + globalize.translate('sharedcomponents#Trailer') + '" is="emby-button" class="itemAction autoSize fab mini" data-action="playtrailer"><i class="md-icon">&#xE04B;</i></button>';
+            buttonCount++;
+        }
+
+        html += '<button is="emby-button" class="itemAction autoSize fab mini" data-action="menu" data-playoptions="false"><i class="md-icon">&#xE5D4;</i></button>';
+        buttonCount++;
+
+        html += userdataButtons.getIconsHtml({
+            item: item,
+            style: 'fab-mini'
+        });
+
+        html += '</div>';
+
+        html += '</div>';
+
+        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) {
+
+        elem = elem.querySelector('a');
+
+        var innerElem = elem.querySelector('.cardOverlayTarget');
+
+        if (!innerElem) {
+            innerElem = document.createElement('div');
+            innerElem.classList.add('hide');
+            innerElem.classList.add('cardOverlayTarget');
+            parentWithClass(elem, 'cardContent').appendChild(innerElem);
+        }
+
+        var dataElement = parentWithAttribute(elem, 'data-id');
+
+        var id = dataElement.getAttribute('data-id');
+        var type = dataElement.getAttribute('data-type');
+
+        if (type == 'Timer') {
+            return;
+        }
+
+        var serverId = dataElement.getAttribute('data-serverid');
+
+        var apiClient = connectionManager.getApiClient(serverId);
+        var promise1 = apiClient.getItem(apiClient.getCurrentUserId(), id);
+        var promise2 = apiClient.getCurrentUser();
+
+        Promise.all([promise1, promise2]).then(function (responses) {
+
+            var item = responses[0];
+            var user = responses[1];
+
+            var card = elem;
+
+            elem = parentWithAttribute(elem, 'data-id');
+
+            innerElem.innerHTML = getOverlayHtml(item, user, card);
+        });
+
+        slideUpToShow(innerElem);
+    }
+
+    function onHoverIn(e) {
+
+        var elem = e.target;
+
+        if (!elem.classList.contains('cardImage')) {
+            return;
+        }
+
+        if (preventHover === true) {
+            preventHover = false;
+            return;
+        }
+
+        if (showOverlayTimeout) {
+            clearTimeout(showOverlayTimeout);
+            showOverlayTimeout = null;
+        }
+
+        elem = parentWithAttribute(elem, 'data-id');
+        hoveringElement = elem;
+
+        showOverlayTimeout = setTimeout(function () {
+            onShowTimerExpired(elem);
+
+        }, 1200);
+    }
+
+    function preventTouchHover() {
+        preventHover = true;
+    }
+
+    function ItemHoverMenu(parentElement) {
+
+        this.parent = parentElement;
+
+        this.parent.addEventListener('mouseenter', onHoverIn, true);
+        this.parent.addEventListener('mouseleave', onHoverOut, true);
+        this.parent.addEventListener("touchstart", preventTouchHover);
+    }
+
+    ItemHoverMenu.prototype = {
+
+        constructor: ItemHoverMenu,
+
+        destroy: function () {
+            this.parent.removeEventListener('mouseenter', onHoverIn, true);
+            this.parent.removeEventListener('mouseleave', onHoverOut, true);
+            this.parent.removeEventListener("touchstart", preventTouchHover);
+        }
+    }
+
+    return ItemHoverMenu;
+});
--- a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js
@ -282,13 +282,21 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
            html += '</div>';

            if (enableSideMediaInfo) {
-                html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>';
+                html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item, {
+
+                    year: false,
+                    container: false
+
+                }) + '</div>';
            }

            if (!clickEntireItem) {
-                html += '<button is="paper-icon-button-light" class="menuButton autoSize"><i class="md-icon">&#xE5D4;</i></button>';
+                html += '<button is="paper-icon-button-light" class="itemAction autoSize" data-action="menu"><i class="md-icon">&#xE5D4;</i></button>';
                html += '<span class="listViewUserDataButtons">';
-                html += userdataButtons.getIconsHtml(item, false);
+                html += userdataButtons.getIconsHtml({
+                    item: item,
+                    includePlayed: false
+                });
                html += '</span>';
            }

--- a/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.css
@ -26,7 +26,7 @@ i.mediaInfoItem {
        color: #CB272A;
        width: auto !important;
        height: auto !important;
-        font-size: 120%;
+        font-size: 1.4em;
    }

 .mediaInfoItem.criticRating {
--- a/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js
@ -125,7 +125,7 @@ define(['datetime', 'globalize', 'embyRouter', 'material-icons', 'css!./mediainf
            }
        }

-        if (item.ProductionYear && item.Type == "Series") {
+        if (options.year !== false && item.ProductionYear && item.Type == "Series") {

            if (item.Status == "Continuing") {
                miscInfo.push(globalize.translate('sharedcomponents#ValueSeriesYearToPresent', item.ProductionYear));
@ -237,7 +237,7 @@ define(['datetime', 'globalize', 'embyRouter', 'material-icons', 'css!./mediainf
            miscInfo.push(item.Width + "x" + item.Height);
        }

-        if (item.Type == 'Audio' && item.Container) {
+        if (options.container !== false && item.Type == 'Audio' && item.Container) {
            miscInfo.push(item.Container);
        }

--- a/dashboard-ui/bower_components/emby-webcomponents/playmenu.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/playmenu.js
@ -0,0 +1,100 @@
+define(['actionsheet', 'datetime', 'playbackManager', 'globalize'], function (actionsheet, datetime, playbackManager, globalize) {
+
+    function show(options) {
+
+        var item = options.item;
+
+        var itemType = item.Type;
+        var mediaType = item.MediaType;
+        var isFolder = item.IsFolder;
+        var itemId = item.Id;
+        var serverId = item.ServerId;
+        var resumePositionTicks = item.UserData ? item.UserData.PlaybackPositionTicks : null;
+
+        if (!resumePositionTicks && mediaType != "Audio" && !isFolder) {
+            playbackManager.play({
+                items: [item]
+            });
+            return;
+        }
+
+        var menuItems = [];
+
+        if (resumePositionTicks) {
+            menuItems.push({
+                name: globalize.translate('sharedcomponents#ResumeAt', datetime.getDisplayRunningTime(resumePositionTicks)),
+                id: 'resume'
+            });
+
+            menuItems.push({
+                name: globalize.translate('sharedcomponents#PlayFromBeginning'),
+                id: 'play'
+            });
+        } else {
+            menuItems.push({
+                name: globalize.translate('sharedcomponents#Play'),
+                id: 'play'
+            });
+        }
+
+        if (playbackManager.canQueueMediaType(mediaType)) {
+            menuItems.push({
+                name: globalize.translate('sharedcomponents#Queue'),
+                id: 'queue'
+            });
+        }
+
+        if (itemType == "Audio" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "MusicGenre") {
+            menuItems.push({
+                name: globalize.translate('sharedcomponents#InstantMix'),
+                id: 'instantmix'
+            });
+        }
+
+        if (isFolder || itemType == "MusicArtist" || itemType == "MusicGenre") {
+            menuItems.push({
+                name: globalize.translate('sharedcomponents#Shuffle'),
+                id: 'shuffle'
+            });
+        }
+
+        actionsheet.show({
+
+            items: menuItems,
+            positionTo: options.positionTo
+
+        }).then(function (id) {
+            switch (id) {
+
+                case 'play':
+                    playbackManager.play({
+                        ids: [itemId],
+                        serverId: item.ServerId
+                    });
+                    break;
+                case 'resume':
+                    playbackManager.play({
+                        ids: [itemId],
+                        startPositionTicks: resumePositionTicks,
+                        serverId: item.ServerId
+                    });
+                    break;
+                case 'queue':
+                    playbackManager.queue(item);
+                    break;
+                case 'instantmix':
+                    playbackManager.instantMix(item);
+                    break;
+                case 'shuffle':
+                    playbackManager.shuffle(item);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+
+    return {
+        show: show
+    };
+});
--- a/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js
@ -90,7 +90,85 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
        embyRouter.showItem(options);
    }

-    function executeAction(card, action) {
+    function getItem(button) {
+
+        button = parentWithAttribute(button, 'data-id');
+        var serverId = button.getAttribute('data-serverid');
+        var id = button.getAttribute('data-id');
+        var type = button.getAttribute('data-type');
+
+        var apiClient = connectionManager.getApiClient(serverId);
+
+        if (type == 'Timer') {
+            return apiClient.getLiveTvTimer(id);
+        }
+        return apiClient.getItem(apiClient.getCurrentUserId(), id);
+    }
+
+    function showContextMenu(card, options) {
+
+        getItem(card).then(function (item) {
+
+            var itemsContainer = options.itemsContainer || 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');
+                item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null;
+            }
+
+            require(['itemContextMenu'], function (itemContextMenu) {
+
+                itemContextMenu.show(Object.assign({
+                    item: item,
+                    play: true,
+                    queue: true,
+                    playAllFromHere: !item.IsFolder,
+                    queueAllFromHere: !item.IsFolder,
+                    identify: false,
+                    playlistId: playlistId,
+                    collectionId: collectionId
+
+                }, options || {})).then(function (result) {
+
+                    if (result.command == 'playallfromhere' || result.command == 'queueallfromhere') {
+                        executeAction(card, options.positionTo, result.command);
+                    }
+                    else if (result.command == 'removefromplaylist' || result.command == 'removefromcollection') {
+
+                        if (itemsContainer) {
+                            itemsContainer.dispatchEvent(new CustomEvent('needsrefresh', {
+                                detail: {},
+                                cancelable: false,
+                                bubbles: true
+                            }));
+                        }
+                    }
+                });
+            });
+        });
+    }
+
+    function showPlayMenu(card, target) {
+
+        getItem(card).then(function (item) {
+
+            require(['playMenu'], function (playMenu) {
+
+                playMenu.show({
+
+                    item: item,
+                    positionTo: target
+                });
+            });
+        });
+    }
+
+    function executeAction(card, target, action) {
+
+        target = target || card;

        var id = card.getAttribute('data-id');

@ -142,6 +220,56 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
        else if (action == 'record') {
            onRecordCommand(serverId, id, type, card.getAttribute('data-timerid'), card.getAttribute('data-seriestimerid'));
        }
+
+        else if (action == 'menu') {
+
+            var options = target.getAttribute('data-playoptions') == 'false' ?
+            {
+                shuffle: false,
+                instantMix: false,
+                play: false,
+                playAllFromHere: false,
+                queue: false,
+                queueAllFromHere: false
+            } :
+            {};
+
+            options.identify = false;
+            options.positionTo = target;
+
+            showContextMenu(card, options);
+        }
+
+        else if (action == 'playmenu') {
+            showPlayMenu(card, target);
+        }
+
+        else if (action == 'edit') {
+            getItem(target).then(function (item) {
+                editItem(item, serverId);
+            });
+        }
+    }
+
+    function editItem(item, serverId) {
+
+        var apiClient = connectionManager.getApiClient(serverId);
+
+        return new Promise(function (resolve, reject) {
+
+            if (item.Type == 'Timer') {
+                require(['recordingEditor'], function (recordingEditor) {
+
+                    var serverId = apiClient.serverInfo().Id;
+                    recordingEditor.show(item.Id, serverId).then(resolve, reject);
+                });
+            } else {
+                require(['components/metadataeditor/metadataeditor'], function (metadataeditor) {
+
+                    metadataeditor.show(item.Id).then(resolve, reject);
+                });
+            }
+        });
    }

    function onRecordCommand(serverId, id, type, timerId, seriesTimerId) {
@ -221,6 +349,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
    }

    function onClick(e) {
+
        var card = parentWithClass(e.target, 'itemAction');

        if (card) {
@ -234,17 +363,21 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
            }

            if (action) {
-                executeAction(card, action);
+                executeAction(card, actionElement, action);
+
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
            }
        }
    }

-    function parentWithAttribute(elem, name) {
+    function parentWithAttribute(elem, name, value) {

-        while (!elem.getAttribute(name)) {
+        while ((value ? elem.getAttribute(name) != value : !elem.getAttribute(name))) {
            elem = elem.parentNode;

-            if (!elem) {
+            if (!elem || !elem.getAttribute) {
                return null;
            }
        }
@ -268,29 +401,43 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
    function onCommand(e) {
        var cmd = e.detail.command;

-        if (cmd == 'play' || cmd == 'record') {
+        if (cmd == 'play' || cmd == 'record' || cmd == 'menu' || cmd == 'info') {
            var card = parentWithClass(e.target, 'itemAction');

            if (card) {
-                executeAction(card, cmd);
+                executeAction(card, card, cmd);
            }
        }
    }

-    function on(context) {
-        context.addEventListener('click', onClick);
-        inputManager.on(context, onCommand);
+    function on(context, options) {
+
+        options = options || {};
+
+        if (options.click !== false) {
+            context.addEventListener('click', onClick);
+        }
+
+        if (options.command !== false) {
+            inputManager.on(context, onCommand);
+        }
    }

-    function off(context) {
+    function off(context, options) {
+        options = options || {};
+
        context.removeEventListener('click', onClick);
-        inputManager.off(context, onCommand);
+
+        if (options.command !== false) {
+            inputManager.off(context, onCommand);
+        }
    }

    return {
        on: on,
        off: off,
-        execute: executeAction
+        onClick: onClick,
+        showContextMenu: showContextMenu
    };

 });
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/da.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/da.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Edit Info",
+    "RemoveFromPlaylist": "Remove from Playlist",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "Special - {0}",
    "Share": "Del",
    "ServerUpdateNeeded": "Denne Emby server b\u00f8r opdateres. For at downloade den nyeste version bes\u00f8g venligst {0}",
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/de.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/de.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Edit Info",
+    "RemoveFromPlaylist": "Remove from Playlist",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "Special - {0}",
    "Share": "Teilen",
    "ServerUpdateNeeded": "Dieser Emby Server sollte aktualisiert werden. Um die neueste Version zu laden, besuche bitte {0}",
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json
@ -112,5 +112,8 @@
  "ViewArtist": "View Artist",
  "QueueAllFromHere": "Queue All from Here",
  "PlayAllFromHere": "Play All from Here",
-  "RemoveFromPlaylist": "Remove from Playlist"
+  "PlayFromBeginning": "Play from beginning",
+  "ResumeAt": "Resume from {0}",
+  "RemoveFromPlaylist": "Remove from Playlist",
+  "Trailer": "Trailer"
 }
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/es-MX.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/es-MX.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Edit Info",
+    "RemoveFromPlaylist": "Remove from Playlist",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "Especial - {0}",
    "Share": "Compartir",
    "ServerUpdateNeeded": "Este Servidor Emby necesita ser actualizado. Para descargar la ultima versi\u00f3n, por favor visite {0}",
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/fr.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/fr.json
@ -0,0 +1,118 @@
+{
+    "EditInfo": "Modifier les informations",
+    "RemoveFromPlaylist": "Supprimer de la liste de lecture",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
+    "ValueSpecialEpisodeName": "Sp\u00e9cial - {0}",
+    "Share": "Partager",
+    "ServerUpdateNeeded": "Le serveur Emby doit \u00eatre mis \u00e0 jour. Pour t\u00e9l\u00e9charger la derni\u00e8re version, veuillez visiter {0}",
+    "LiveTvGuideRequiresUnlock": "Le Guide TV en direct est actuellement limit\u00e9 \u00e0 {0} cha\u00eenes. Cliquez sur le bouton d\u00e9verrouiller pour d\u00e9couvrir comment profiter de l'ensemble.",
+    "AttributeNew": "Nouveau",
+    "AttributePremiere": "Premiere",
+    "AttributeLive": "Direct",
+    "TrackCount": "{0} pistes",
+    "ItemCount": "{0} \u00e9l\u00e9ments",
+    "ValueSeriesYearToPresent": "{0}-Pr\u00e9sent",
+    "ReleaseYearValue": "Ann\u00e9e de sortie: {0}",
+    "OriginalAirDateValue": "Date de diffusion originale: {0}",
+    "EndsAtValue": "Se termine \u00e0 {0}",
+    "OptionSundayShort": "Dim",
+    "OptionMondayShort": "Lun",
+    "OptionTuesdayShort": "Mar",
+    "OptionWednesdayShort": "Mer",
+    "OptionThursdayShort": "Jeu",
+    "OptionFridayShort": "Ven",
+    "OptionSaturdayShort": "Sam",
+    "HeaderSelectDate": "S\u00e9lectionnez la date",
+    "ButtonOk": "Ok",
+    "ButtonCancel": "Annuler",
+    "ButtonGotIt": "Compris",
+    "RecordingCancelled": "Enregistrement annul\u00e9.",
+    "RecordingScheduled": "Enregistrement planifi\u00e9.",
+    "SeriesRecordingScheduled": "Enregistrement de la s\u00e9rie pr\u00e9vue.",
+    "HeaderNewRecording": "Nouvel enregistrement",
+    "Sunday": "Dimanche",
+    "Monday": "Lundi",
+    "Tuesday": "Mardi",
+    "Wednesday": "Mercredi",
+    "Thursday": "Jeudi",
+    "Friday": "Vendredi",
+    "Saturday": "Samedi",
+    "Days": "Jours",
+    "RecordSeries": "Enregistrer s\u00e9ries",
+    "LabelPrePaddingMinutes": "D\u00e9lai avant l'enregistrement en minutes:",
+    "LabelPostPaddingMinutes": "D\u00e9lai apr\u00e8s l'enregistrement en minutes:",
+    "RecordOnAllChannels": "Enregistrer sur toutes les cha\u00eenes",
+    "RecordAnytime": "Enregistrer \u00e0 n'importe quelle heure\/journ\u00e9e",
+    "RecordOnlyNewEpisodes": "Enregistrer seulement les nouveaux \u00e9pisodes",
+    "HeaderBecomeProjectSupporter": "Obtenez Emby Premiere",
+    "HeaderEnjoyDayTrial": "Profitez d'une p\u00e9riode d'essai de 14 jours",
+    "MessageActiveSubscriptionRequiredSeriesRecordings": "Une souscription Emby Premiere active est n\u00e9cessaire pour cr\u00e9er des enregistrements automatiques de s\u00e9ries.",
+    "OptionConvertRecordingsToStreamingFormat": "Convertir automatiquement les enregistrements a un format facilement diffusable.",
+    "OptionConvertRecordingsToStreamingFormatHelp": "Les enregistrements seront convertis \u00e0 la vol\u00e9e en MP4 afin faciliter la lecture sur tous vos appareils.",
+    "FeatureRequiresEmbyPremiere": "Cette fonctionnalit\u00e9 requiert un compte Emby Premiere.",
+    "Record": "Enregistrer",
+    "Save": "Sauvegarder",
+    "Edit": "Modifier",
+    "Download": "T\u00e9l\u00e9chargement",
+    "Advanced": "Avanc\u00e9",
+    "Delete": "Supprimer",
+    "HeaderDeleteItem": "Supprimer l'\u00e9l\u00e9ment",
+    "ConfirmDeleteItem": "Supprimer cet \u00e9l\u00e9ment l'effacera \u00e0 la fois du syst\u00e8me de fichiers et de votre biblioth\u00e8que de medias. Etes-vous s\u00fbr de vouloir continuer ?",
+    "Refresh": "Actualiser",
+    "RefreshQueued": "Demande d'actualisation en file d'attente.",
+    "AddToCollection": "Ajouter \u00e0 la collection",
+    "NewCollection": "Nouvelle collection",
+    "LabelCollection": "Collection:",
+    "Help": "Aide",
+    "NewCollectionHelp": "Les Collections vous permettent de cr\u00e9er des groupes personnalis\u00e9s de films et autres contenus.",
+    "SearchForCollectionInternetMetadata": "Rechercher sur Internet les images et m\u00e9tadonn\u00e9es",
+    "LabelName": "Nom:",
+    "NewCollectionNameExample": "Exemple: Collection Star Wars",
+    "MessageItemsAdded": " \u00c9l\u00e9ments ajout\u00e9s.",
+    "OptionNew": "Nouveau...",
+    "LabelPlaylist": "Liste de lecture:",
+    "AddToPlaylist": "Ajouter \u00e0 la liste de lecture",
+    "Subtitles": "Sous-titres",
+    "SearchForSubtitles": "Rechercher des sous-titres",
+    "LabelLanguage": "Langue:",
+    "Search": "Recherche",
+    "NoSubtitleSearchResultsFound": "Aucun appareil trouv\u00e9",
+    "File": "Fichier",
+    "MessageAreYouSureDeleteSubtitles": "\u00cates-vous s\u00fbr de vouloir supprimer ce fichier sous-titres ?",
+    "ConfirmDeletion": "Confirmer la suppression",
+    "MySubtitles": "Mes Sous-titres",
+    "MessageDownloadQueued": "T\u00e9l\u00e9charger en file d'attente.",
+    "EditSubtitles": "Modifier les sous-titres",
+    "UnlockGuide": "D\u00e9verrouiller le Guide",
+    "RefreshMetadata": "Actualiser les m\u00e9tadonn\u00e9es",
+    "ReplaceExistingImages": "Remplacer les images existantes",
+    "ReplaceAllMetadata": "Remplacer toutes les m\u00e9tadonn\u00e9es",
+    "SearchForMissingMetadata": "Rechercher les m\u00e9tadonn\u00e9es manquantes",
+    "LabelRefreshMode": "Mode de rafra\u00eechissement:",
+    "NoItemsFound": "Aucun \u00e9l\u00e9ment trouv\u00e9.",
+    "HeaderSaySomethingLike": "Dites quelque chose...",
+    "ButtonTryAgain": "Veuillez r\u00e9essayer",
+    "HeaderYouSaid": "Vous avez dit...",
+    "MessageWeDidntRecognizeCommand": "D\u00e9sol\u00e9, cette commande n'a pas \u00e9t\u00e9 reconnue.",
+    "MessageIfYouBlockedVoice": "Si vous avez supprim\u00e9 l'acc\u00e8s par commande vocale \u00e0 l'application, vous devrez reconfigurer avant de r\u00e9essayer.",
+    "ValueDiscNumber": "Disque {0}",
+    "Unrated": "Non not\u00e9",
+    "Favorite": "Favoris",
+    "Like": "J'aime",
+    "Dislike": "Je n'aime pas",
+    "Played": "Lu",
+    "RefreshDialogHelp": "Les m\u00e9tadonn\u00e9es sont actualis\u00e9es en fonction des param\u00e8tres et des services internet qui sont activ\u00e9s dans le tableau de bord Emby Server.",
+    "Open": "Ouvrir",
+    "Play": "Lire",
+    "Queue": "File d'attente",
+    "Shuffle": "Lecture al\u00e9atoire",
+    "Identify": "Identifier",
+    "EditImages": "Modifier les images",
+    "Sync": "Sync",
+    "InstantMix": "Mix instantan\u00e9",
+    "ViewAlbum": "Voir l'album",
+    "ViewArtist": "Voir l'artiste",
+    "QueueAllFromHere": "Tout mette en file d'attente \u00e0 partir d'ici",
+    "PlayAllFromHere": "Tout lire \u00e0 partir d'ici"
+}
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/kk.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/kk.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Edit Info",
+    "RemoveFromPlaylist": "Remove from Playlist",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "\u0410\u0440\u043d\u0430\u0439\u044b - {0}",
    "Share": "\u041e\u0440\u0442\u0430\u049b\u0442\u0430\u0441\u0443",
    "ServerUpdateNeeded": "\u041e\u0441\u044b Emby Server \u0436\u0430\u04a3\u0430\u0440\u0442\u044b\u043b\u0443\u044b \u049b\u0430\u0436\u0435\u0442. \u0421\u043e\u04a3\u0493\u044b \u043d\u04b1\u0441\u049b\u0430\u0441\u044b\u043d \u0436\u04af\u043a\u0442\u0435\u043f \u0430\u043b\u0443 \u04af\u0448\u0456\u043d, {0} \u043a\u0456\u0440\u0456\u04a3\u0456\u0437",
@ -92,23 +96,23 @@
    "HeaderYouSaid": "\u0421\u0456\u0437 \u0430\u0439\u0442\u049b\u0430\u043d\u044b\u04a3\u044b\u0437...",
    "MessageWeDidntRecognizeCommand": "\u041e\u0441\u044b\u043d\u0434\u0430\u0439 \u043f\u04d9\u0440\u043c\u0435\u043d\u0434\u0456 \u0442\u0430\u043d\u044b\u043f \u0430\u0439\u044b\u0440\u043c\u0430\u0434\u044b\u049b.",
    "MessageIfYouBlockedVoice": "\u0415\u0433\u0435\u0440 \u049b\u043e\u043b\u0434\u0430\u043d\u0431\u0430\u0493\u0430 \u0434\u0430\u0443\u044b\u0441\u0442\u044b\u049b \u049b\u0430\u0442\u044b\u043d\u0430\u0443\u044b\u04a3\u044b\u0437 \u0431\u0430\u0441 \u0442\u0430\u0440\u0442\u044b\u043b\u0441\u0430, \u049b\u0430\u0439\u0442\u0430 \u04d9\u0440\u0435\u043a\u0435\u0442\u0442\u0435\u043d\u0443\u0456\u04a3\u0456\u0437\u0434\u0435\u043d \u0430\u043b\u0434\u044b\u043d\u0430\u043d \u049b\u0430\u0439\u0442\u0430 \u0442\u0435\u04a3\u0448\u0435\u0443\u0456\u04a3\u0456\u0437 \u049b\u0430\u0436\u0435\u0442 \u0431\u043e\u043b\u0430\u0434\u044b.",
-    "ValueDiscNumber": "Disc {0}",
-    "Unrated": "Unrated",
-    "Favorite": "Favorite",
-    "Like": "Like",
-    "Dislike": "Dislike",
-    "Played": "Played",
+    "ValueDiscNumber": "{0}-\u0434\u0438\u0441\u043a\u0456",
+    "Unrated": "\u0411\u0430\u0493\u0430\u043b\u0430\u043d\u0431\u0430\u0493\u0430\u043d",
+    "Favorite": "\u0422\u0430\u04a3\u0434\u0430\u0443\u043b\u044b",
+    "Like": "\u04b0\u043d\u0430\u0439\u0434\u044b",
+    "Dislike": "\u04b0\u043d\u0430\u043c\u0430\u0439\u0434\u044b",
+    "Played": "\u041e\u0439\u043d\u0430\u0442\u044b\u043b\u0493\u0430\u043d",
    "RefreshDialogHelp": "\u041c\u0435\u0442\u0430\u0434\u0435\u0440\u0435\u043a\u0442\u0435\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043b\u0435\u0440 \u043c\u0435\u043d Emby Server \u0431\u0430\u049b\u044b\u043b\u0430\u0443 \u0442\u0430\u049b\u0442\u0430\u0441\u044b\u043d\u0434\u0430 \u049b\u043e\u0441\u044b\u043b\u0493\u0430\u043d \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u049b\u044b\u0437\u043c\u0435\u0442\u0442\u0435\u0440\u0456 \u043d\u0435\u0433\u0456\u0437\u0456\u043d\u0434\u0435 \u0436\u0430\u04a3\u0493\u044b\u0440\u0442\u044b\u043b\u0430\u0434\u044b.",
-    "Open": "Open",
-    "Play": "Play",
-    "Queue": "Queue",
-    "Shuffle": "Shuffle",
-    "Identify": "Identify",
-    "EditImages": "Edit Images",
-    "Sync": "Sync",
-    "InstantMix": "Instant Mix",
-    "ViewAlbum": "View Album",
-    "ViewArtist": "View Artist",
-    "QueueAllFromHere": "Queue All from Here",
-    "PlayAllFromHere": "Play All from Here"
+    "Open": "\u0410\u0448\u0443",
+    "Play": "\u041e\u0439\u043d\u0430\u0442\u0443",
+    "Queue": "\u041a\u0435\u0437\u0435\u043a",
+    "Shuffle": "\u0410\u0440\u0430\u043b\u0430\u0441\u0442\u044b\u0440\u0443",
+    "Identify": "\u0410\u043d\u044b\u049b\u0442\u0430\u0443",
+    "EditImages": "\u0421\u0443\u0440\u0435\u0442\u0442\u0435\u0440\u0434\u0456 \u04e9\u04a3\u0434\u0435\u0443",
+    "Sync": "\u04ae\u043d\u0434\u0435\u0441\u0442\u0456\u0440\u0443",
+    "InstantMix": "\u041b\u0435\u0437\u0434\u0456\u043a \u049b\u043e\u0441\u043f\u0430",
+    "ViewAlbum": "\u0410\u043b\u044c\u0431\u043e\u043c\u0434\u044b \u049b\u0430\u0440\u0430\u0443",
+    "ViewArtist": "\u041e\u0440\u044b\u043d\u0434\u0430\u0443\u0448\u044b\u043d\u044b \u049b\u0430\u0440\u0430\u0443",
+    "QueueAllFromHere": "\u0411\u04b1\u043b \u0430\u0440\u0430\u0434\u0430\u043d \u0431\u04d9\u0440\u0456\u043d \u043a\u0435\u0437\u0435\u043a\u043a\u0435",
+    "PlayAllFromHere": "\u0411\u04b1\u043b \u0430\u0440\u0430\u0434\u0430\u043d \u0431\u04d9\u0440\u0456\u043d \u043e\u0439\u043d\u0430\u0442\u0443"
 }
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/nb.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/nb.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Edit Info",
+    "RemoveFromPlaylist": "Remove from Playlist",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "Spesial - {0}",
    "Share": "Del",
    "ServerUpdateNeeded": "Denne Emby serveren trenger en oppdatering. For \u00e5 laste ned nyeste versjon, vennligst bes\u00f8k: {0}",
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/nl.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/nl.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Info Bewerken",
+    "RemoveFromPlaylist": "Verwijderen uit afspeellijst",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "Speciaal - {0}",
    "Share": "Delen",
    "ServerUpdateNeeded": "Deze Emby Server moet worden bijgewerkt. Om de laatste versie te downloaden, gaat u naar {0}",
@ -92,23 +96,23 @@
    "HeaderYouSaid": "U zei...",
    "MessageWeDidntRecognizeCommand": "Sorry, dat commando herkennen we niet.",
    "MessageIfYouBlockedVoice": "Als u spraak toegang uitgeschakeld heeft moet u dit opnieuw configureren voordat u verder gaat.",
-    "ValueDiscNumber": "Disc {0}",
-    "Unrated": "Unrated",
-    "Favorite": "Favorite",
-    "Like": "Like",
-    "Dislike": "Dislike",
-    "Played": "Played",
+    "ValueDiscNumber": "Schijf {0}",
+    "Unrated": "Geen rating",
+    "Favorite": "Favoriet",
+    "Like": "Leuk",
+    "Dislike": "Niet leuk",
+    "Played": "Afgespeeld",
    "RefreshDialogHelp": "Metadata wordt vernieuwd op basis van de instellingen en internet diensten die zijn ingeschakeld in het dashboard van de Emby Server.",
-    "Open": "Open",
-    "Play": "Play",
-    "Queue": "Queue",
-    "Shuffle": "Shuffle",
-    "Identify": "Identify",
-    "EditImages": "Edit Images",
-    "Sync": "Sync",
+    "Open": "Openen",
+    "Play": "Afspelen",
+    "Queue": "Wachtrij",
+    "Shuffle": "Willekeurig",
+    "Identify": "Identificeer",
+    "EditImages": "Bewerk afbeeldingen",
+    "Sync": "Synchronisatie",
    "InstantMix": "Instant Mix",
-    "ViewAlbum": "View Album",
-    "ViewArtist": "View Artist",
-    "QueueAllFromHere": "Queue All from Here",
-    "PlayAllFromHere": "Play All from Here"
+    "ViewAlbum": "Bekijk album",
+    "ViewArtist": "Bekijk artiest",
+    "QueueAllFromHere": "Plaats alles in de wachtrij vanaf hier",
+    "PlayAllFromHere": "Speel alles vanaf hier"
 }
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/pt-BR.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/pt-BR.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Editar Informa\u00e7\u00f5es",
+    "RemoveFromPlaylist": "Remover da Lista de Reprodu\u00e7\u00e3o",
+    "PlayFromBeginning": "Reproduzir do in\u00edcio",
+    "ResumeAt": "Retomar de {0}",
    "ValueSpecialEpisodeName": "Especial - {0}",
    "Share": "Compartilhar",
    "ServerUpdateNeeded": "Este servidor Emby precisa ser atualizado. Para baixar a \u00faltima vers\u00e3o, por favor visite {0}",
@ -86,29 +90,29 @@
    "ReplaceAllMetadata": "Substituir todos os metadados",
    "SearchForMissingMetadata": "Buscar por metadados que faltam",
    "LabelRefreshMode": "Mode de atualiza\u00e7\u00e3o:",
-    "NoItemsFound": "No items found.",
-    "HeaderSaySomethingLike": "Say Something Like...",
-    "ButtonTryAgain": "Try Again",
-    "HeaderYouSaid": "You Said...",
-    "MessageWeDidntRecognizeCommand": "We're sorry, we didn't recognize that command.",
-    "MessageIfYouBlockedVoice": "If you denied voice access to the app you'll need to reconfigure before trying again.",
-    "ValueDiscNumber": "Disc {0}",
-    "Unrated": "Unrated",
-    "Favorite": "Favorite",
-    "Like": "Like",
-    "Dislike": "Dislike",
-    "Played": "Played",
+    "NoItemsFound": "Nenhum item encontrado.",
+    "HeaderSaySomethingLike": "Diga algo como...",
+    "ButtonTryAgain": "Tente Novamente",
+    "HeaderYouSaid": "Voc\u00ea disse...",
+    "MessageWeDidntRecognizeCommand": "Desculpe-nos, n\u00e3o foi poss\u00edvel reconhecer este comando.",
+    "MessageIfYouBlockedVoice": "Se voc\u00ea negou acessos de voz ao app voc\u00ea precisar\u00e1 reconfigurar antes de tentar novamente.",
+    "ValueDiscNumber": "Disco {0}",
+    "Unrated": "Sem classifica\u00e7\u00e3o",
+    "Favorite": "Favorito",
+    "Like": "Gostei",
+    "Dislike": "N\u00e3o Gostei",
+    "Played": "Reproduzido",
    "RefreshDialogHelp": "Os metadados s\u00e3o atualizados com bases nas defini\u00e7\u00f5es e nos servi\u00e7os de internet que est\u00e3o ativos no painel do Servidor Emby.",
-    "Open": "Open",
-    "Play": "Play",
-    "Queue": "Queue",
-    "Shuffle": "Shuffle",
-    "Identify": "Identify",
-    "EditImages": "Edit Images",
-    "Sync": "Sync",
-    "InstantMix": "Instant Mix",
-    "ViewAlbum": "View Album",
-    "ViewArtist": "View Artist",
-    "QueueAllFromHere": "Queue All from Here",
-    "PlayAllFromHere": "Play All from Here"
+    "Open": "Abrir",
+    "Play": "Reproduzir",
+    "Queue": "Enfileirar",
+    "Shuffle": "Embaralhar",
+    "Identify": "Identificar",
+    "EditImages": "Editar Imagens",
+    "Sync": "Sincronizar",
+    "InstantMix": "Mix Instant\u00e2neo",
+    "ViewAlbum": "Visualizar \u00c1lbum",
+    "ViewArtist": "Visualizar Artista",
+    "QueueAllFromHere": "Enfileirar todos daqui",
+    "PlayAllFromHere": "Reproduzir todos daqui"
 }
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/pt-PT.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/pt-PT.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Edit Info",
+    "RemoveFromPlaylist": "Remove from Playlist",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "Especial -  {0}",
    "Share": "Partilhar",
    "ServerUpdateNeeded": "Este Servidor Emby precisa ser atualizado. Para fazer download da vers\u00e3o mais recente, por favor visite {0}",
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/ru.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/ru.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Edit Info",
+    "RemoveFromPlaylist": "Remove from Playlist",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "\u0421\u043f\u0435\u0446\u044d\u043f\u0438\u0437\u043e\u0434 - {0}",
    "Share": "\u041f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f",
    "ServerUpdateNeeded": "\u0414\u0430\u043d\u043d\u044b\u0439 Emby Server \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435 {0}",
@ -92,23 +96,23 @@
    "HeaderYouSaid": "\u0412\u044b \u0441\u043a\u0430\u0437\u0430\u043b\u0438...",
    "MessageWeDidntRecognizeCommand": "\u0414\u0430\u043d\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043d\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u043d\u0430.",
    "MessageIfYouBlockedVoice": "\u0415\u0441\u043b\u0438 \u043e\u0442\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u043e\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u043f\u0435\u0440\u0435\u0434 \u043d\u043e\u0432\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u043e\u0439 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u043f\u0435\u0440\u0435\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430.",
-    "ValueDiscNumber": "Disc {0}",
-    "Unrated": "Unrated",
-    "Favorite": "Favorite",
-    "Like": "Like",
-    "Dislike": "Dislike",
-    "Played": "Played",
+    "ValueDiscNumber": "\u0414\u0438\u0441\u043a {0}",
+    "Unrated": "\u0411\u0435\u0437 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438",
+    "Favorite": "\u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435",
+    "Like": "\u041d\u0440\u0430\u0432\u0438\u0442\u0441\u044f",
+    "Dislike": "\u041d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f",
+    "Played": "\u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u0435",
    "RefreshDialogHelp": "\u041f\u043e\u0434\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0432 \u0438\u043d\u0444\u043e\u043f\u0430\u043d\u0435\u043b\u0438 Emby Server \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0443\u0441\u043b\u0443\u0433\u0430\u043c\u0438.",
-    "Open": "Open",
-    "Play": "Play",
-    "Queue": "Queue",
-    "Shuffle": "Shuffle",
-    "Identify": "Identify",
-    "EditImages": "Edit Images",
-    "Sync": "Sync",
-    "InstantMix": "Instant Mix",
-    "ViewAlbum": "View Album",
-    "ViewArtist": "View Artist",
-    "QueueAllFromHere": "Queue All from Here",
-    "PlayAllFromHere": "Play All from Here"
+    "Open": "\u041e\u0442\u043a\u0440\u044b\u0442\u044c",
+    "Play": "\u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438",
+    "Queue": "\u041e\u0447\u0435\u0440\u0435\u0434\u044c",
+    "Shuffle": "\u041f\u0435\u0440\u0435\u043c\u0435\u0448\u0430\u0442\u044c",
+    "Identify": "\u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c",
+    "EditImages": "\u041f\u0440\u0430\u0432\u0438\u0442\u044c \u0440\u0438\u0441\u0443\u043d\u043a\u0438",
+    "Sync": "\u0421\u0438\u043d\u0445\u0440\u043e",
+    "InstantMix": "\u0410\u0432\u0442\u043e\u043c\u0438\u043a\u0441",
+    "ViewAlbum": "\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0430\u043b\u044c\u0431\u043e\u043c",
+    "ViewArtist": "\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044f",
+    "QueueAllFromHere": "\u0412 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u0441\u0435 \u043e\u0442\u0441\u044e\u0434\u0430",
+    "PlayAllFromHere": "\u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0432\u0441\u0435 \u043e\u0442\u0441\u044e\u0434\u0430"
 }
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/sv.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/sv.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Edit Info",
+    "RemoveFromPlaylist": "Remove from Playlist",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "Specialavsnitt - {0}",
    "Share": "Dela",
    "ServerUpdateNeeded": "Den h\u00e4r Emby servern beh\u00f6ver uppdateras. F\u00f6r att ladda ner senaste versionen, g\u00e5 till {0}",
@ -92,23 +96,23 @@
    "HeaderYouSaid": "Du sa...",
    "MessageWeDidntRecognizeCommand": "Ledsen, men vi k\u00e4nner inte igen det kommandot.",
    "MessageIfYouBlockedVoice": "Om du nekade tillg\u00e5ng f\u00f6r r\u00f6st\u00e5tkomst till appen s\u00e5 beh\u00f6ver du konfigurera om innan du f\u00f6rs\u00f6ker igen.",
-    "ValueDiscNumber": "Disc {0}",
-    "Unrated": "Unrated",
-    "Favorite": "Favorite",
-    "Like": "Like",
-    "Dislike": "Dislike",
-    "Played": "Played",
+    "ValueDiscNumber": "Skiva {0}",
+    "Unrated": "Ej klassad",
+    "Favorite": "Favorit",
+    "Like": "Gilla",
+    "Dislike": "Ogilla",
+    "Played": "Visad",
    "RefreshDialogHelp": "Metadata uppdateras baserat p\u00e5 inst\u00e4llningar och internettj\u00e4nster som har aktiverats under Emby servers kontrollpanel.",
-    "Open": "Open",
-    "Play": "Play",
-    "Queue": "Queue",
-    "Shuffle": "Shuffle",
-    "Identify": "Identify",
-    "EditImages": "Edit Images",
-    "Sync": "Sync",
-    "InstantMix": "Instant Mix",
-    "ViewAlbum": "View Album",
-    "ViewArtist": "View Artist",
-    "QueueAllFromHere": "Queue All from Here",
-    "PlayAllFromHere": "Play All from Here"
+    "Open": "\u00d6ppna",
+    "Play": "Spela",
+    "Queue": "K\u00f6a",
+    "Shuffle": "Blanda",
+    "Identify": "Identifiera",
+    "EditImages": "\u00c4ndra bilder",
+    "Sync": "Synk",
+    "InstantMix": "Instant mix",
+    "ViewAlbum": "Bl\u00e4ddra album",
+    "ViewArtist": "Bl\u00e4ddra artist",
+    "QueueAllFromHere": "K\u00f6a alla h\u00e4rifr\u00e5n",
+    "PlayAllFromHere": "Spela upp alla h\u00e4rifr\u00e5n"
 }
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/zh-TW.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/zh-TW.json
@ -1,4 +1,8 @@
 {
+    "EditInfo": "Edit Info",
+    "RemoveFromPlaylist": "Remove from Playlist",
+    "PlayFromBeginning": "Play from beginning",
+    "ResumeAt": "Resume from {0}",
    "ValueSpecialEpisodeName": "Special - {0}",
    "Share": "\u5206\u4eab",
    "ServerUpdateNeeded": "\u6b64Emby\u4f3a\u670d\u5668\u9700\u8981\u66f4\u65b0\uff0c\u8acb\u81f3{0}\u53d6\u5f97\u6700\u65b0\u7248\u672c",
--- a/dashboard-ui/bower_components/emby-webcomponents/userdatabuttons/userdatabuttons.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/userdatabuttons/userdatabuttons.js
@ -2,10 +2,17 @@ define(['connectionManager', 'globalize', 'paper-icon-button-light', 'material-i

    function getUserDataButtonHtml(method, itemId, iconCssClass, icon, tooltip, style) {

+        if (style == 'fab-mini') {
+            style = 'fab';
+            iconCssClass = iconCssClass ? (iconCssClass + ' mini') : 'mini';
+        }
+
        var is = style == 'fab' ? 'emby-button' : 'paper-icon-button-light';
        var className = style == 'fab' ? 'autoSize fab' : 'autoSize';

-        className += ' ' + iconCssClass;
+        if (iconCssClass) {
+            className += ' ' + iconCssClass;
+        }

        return '<button title="' + tooltip + '" data-itemid="' + itemId + '" is="' + is + '" class="' + className + '" onclick="UserDataButtons.' + method + '(this);return false;">\
                <i class="md-icon">' + icon + '</i>\
@ -14,12 +21,17 @@ define(['connectionManager', 'globalize', 'paper-icon-button-light', 'material-i

    function fill(options) {

-        var html = getIconsHtml(options.item, options.includePlayed, options.buttonClass, options.style);
+        var html = getIconsHtml(options);

        options.element.innerHTML = html;
    }

-    function getIconsHtml(item, includePlayed, cssClass, style) {
+    function getIconsHtml(options) {
+
+        var item = options.item;
+        var includePlayed = options.includePlayed;
+        var cssClass = options.cssClass;
+        var style = options.style;

        var html = '';

@ -47,8 +59,8 @@ define(['connectionManager', 'globalize', 'paper-icon-button-light', 'material-i
            }
        }

-        var tooltipLike = globalize.translate('sharedcomponents#Like');
-        var tooltipDislike = globalize.translate('sharedcomponents#Dislike');
+        //var tooltipLike = globalize.translate('sharedcomponents#Like');
+        //var tooltipDislike = globalize.translate('sharedcomponents#Dislike');

        //if (typeof userData.Likes == "undefined") {
        //    html += getUserDataButtonHtml('markDislike', itemId, btnCssClass + ' btnUserData btnDislike', 'thumb-down', tooltipDislike);
--- a/dashboard-ui/bower_components/fingerprintjs2/.bower.json
+++ b/dashboard-ui/bower_components/fingerprintjs2/.bower.json
@ -23,15 +23,14 @@
    "spec"
  ],
  "homepage": "https://github.com/Valve/fingerprintjs2",
-  "version": "1.4.0",
-  "_release": "1.4.0",
+  "version": "1.4.1",
+  "_release": "1.4.1",
  "_resolution": {
    "type": "version",
-    "tag": "1.4.0",
-    "commit": "75cbd474158f8ecce43e00f198c76e486b896937"
+    "tag": "1.4.1",
+    "commit": "6320cfa19c89aca0eb39e811d101336a2812ad61"
  },
  "_source": "https://github.com/Valve/fingerprintjs2.git",
  "_target": "^1.4.0",
-  "_originalSource": "fingerprintjs2",
-  "_direct": true
+  "_originalSource": "fingerprintjs2"
 }
--- a/dashboard-ui/bower_components/fingerprintjs2/dist/fingerprint2.min.js
+++ b/dashboard-ui/bower_components/fingerprintjs2/dist/fingerprint2.min.js
--- a/dashboard-ui/bower_components/fingerprintjs2/fingerprint2.js
+++ b/dashboard-ui/bower_components/fingerprintjs2/fingerprint2.js
@ -1,5 +1,5 @@
 /*
-* Fingerprintjs2 1.4.0 - Modern & flexible browser fingerprint library v2
+* Fingerprintjs2 1.4.1 - Modern & flexible browser fingerprint library v2
 * https://github.com/Valve/fingerprintjs2
 * Copyright (c) 2015 Valentin Vasilyev (valentin.vasilyev@outlook.com)
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@ -58,7 +58,8 @@
      swfContainerId: "fingerprintjs2",
      swfPath: "flash/compiled/FontList.swf",
      detectScreenOrientation: true,
-      sortPluginsFor: [/palemoon/i]
+      sortPluginsFor: [/palemoon/i],
+      userDefinedFonts: []
    };
    this.options = this.extend(options, defaultOptions);
    this.nativeForEach = Array.prototype.forEach;
@ -395,6 +396,8 @@
            fontList = fontList.concat(extendedFontList);
        }

+        fontList = fontList.concat(that.options.userDefinedFonts);
+
        //we use m or w because these two characters take up the maximum width.
        // And we use a LLi so that the same matching fonts can get separated
        var testString = "mmmmmmmmmmlli";
@ -1283,6 +1286,6 @@
      return ("00000000" + (h1[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h1[1] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[1] >>> 0).toString(16)).slice(-8);
    }
  };
-  Fingerprint2.VERSION = "1.4.0";
+  Fingerprint2.VERSION = "1.4.1";
  return Fingerprint2;
 });
--- a/dashboard-ui/bower_components/fingerprintjs2/package.json
+++ b/dashboard-ui/bower_components/fingerprintjs2/package.json
@ -1,6 +1,6 @@
 {
  "name": "fingerprintjs2",
-  "version": "1.4.0",
+  "version": "1.4.1",
  "description": "Modern & flexible browser fingerprinting library",
  "main": "dist/fingerprint2.min.js",
  "devDependencies": {
--- a/dashboard-ui/channelitems.html
+++ b/dashboard-ui/channelitems.html
@ -6,6 +6,6 @@
            <div class="listTopPaging">
            </div>
        </div>
-        <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
    </div>
 </div>
--- a/dashboard-ui/channels.html
+++ b/dashboard-ui/channels.html
@ -10,7 +10,7 @@
    <div class="pageTabContent ehsContent" id="channelsTab" data-index="1">
        <div class="viewSettings">
        </div>
-        <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
    </div>

    <div data-role="content">
--- a/dashboard-ui/components/favoriteitems.js
+++ b/dashboard-ui/components/favoriteitems.js
@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {

    function enableScrollX() {
        return browserInfo.mobile && AppInfo.enableAppLayouts;
@ -83,9 +83,9 @@
                html += '</div>';

                if (enableScrollX()) {
-                    html += '<div class="itemsContainer hiddenScrollX">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
                } else {
-                    html += '<div class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
                }

                html += libraryBrowser.getPosterViewHtml({
@ -109,7 +109,6 @@

            elem.innerHTML = html;
            ImageLoader.lazyChildren(elem);
-            libraryBrowser.createCardMenus(elem);
        });
    }

--- a/dashboard-ui/components/metadataeditor/metadataeditor.js
+++ b/dashboard-ui/components/metadataeditor/metadataeditor.js
@ -285,6 +285,8 @@
                item: currentItem,
                positionTo: button,
                edit: false,
+                editImages: true,
+                editSubtitles: true,
                sync: false,
                share: false

--- a/dashboard-ui/components/remotecontrol.js
+++ b/dashboard-ui/components/remotecontrol.js
@ -769,9 +769,6 @@
            });

            Events.on(MediaController, 'playerchange', onPlayerChange);
-
-            libraryBrowser.createCardMenus(context.querySelector('.itemsContainer'));
-
        }

        function onDialogClosed(e) {
--- a/dashboard-ui/css/card.css
+++ b/dashboard-ui/css/card.css
@ -25,31 +25,6 @@
        font-weight: 400 !important;
    }

-.cardOverlayTarget {
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    top: 0;
-    background-color: rgba(0, 0, 0, .85);
-    z-index: 998;
-    line-height: initial;
-}
-
-.cardOverlayInner {
-    padding: 11px 12px 10px;
-}
-
-    .cardOverlayInner button:last-child {
-        margin-right: 0 !important;
-    }
-
-    .cardOverlayInner p {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
 .buttonCard:hover .cardBox {
    opacity: .6;
 }
@ -237,10 +212,6 @@
    font-size: 115%;
 }

-.cardOverlayInner {
-    color: #fff;
-}
-
 .cardTextCentered {
    text-align: center;
 }
@ -360,14 +331,6 @@
    }
 }

-@media all and (max-width: 1200px) {
-
-    .portraitCard .cardOverlayInner {
-        padding-left: 7px;
-        padding-right: 7px;
-    }
-}
-
@media all and (min-width: 500px) {

    .smallBackdropCard {
--- a/dashboard-ui/home.html
+++ b/dashboard-ui/home.html
@ -25,7 +25,7 @@
                    <span>${ButtonSync}</span>
                </button>
            </div>
-            <div id="nextUpItems" class="itemsContainer">
+            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer">
            </div>
        </div>
        <p class="noNextUpItems hide">${NoNextUpItemsMessage}</p>
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@ -74,14 +74,14 @@
                <h1>
                    ${HeaderNextUp}
                </h1>
-                <div class="smallItemsContainer nextUpItems"></div>
+                <div is="emby-itemscontainer" class="smallItemsContainer nextUpItems"></div>
            </div>
            <div id="childrenCollapsible" class="hide detailSection">
                <h1 class="childrenSectionHeader">
                    <span id="childrenTitle"></span>
                </h1>
                <div id="childrenContent">
-                    <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer noautoinit" style="text-align:left;"></div>
+                    <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer" style="text-align:left;"></div>
                </div>
            </div>
            <div id="additionalPartsCollapsible" class="detailSection hide">
--- a/dashboard-ui/livetv.html
+++ b/dashboard-ui/livetv.html
@ -12,12 +12,12 @@
    <div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
        <div id="activePrograms" class="homePageSection">
            <h1 class="listHeader">${HeaderWhatsOnTV}</h1>
-            <div class="activeProgramItems itemsContainer noautoinit"></div>
+            <div is="emby-itemscontainer" class="activeProgramItems itemsContainer"></div>
            <br />
        </div>
        <div id="upcomingPrograms" class="homePageSection" style="margin-top: 1em;">
            <h1 class="listHeader">${HeaderUpcomingPrograms}</h1>
-            <div class="upcomingProgramItems itemsContainer noautoinit"></div>
+            <div is="emby-itemscontainer" class="upcomingProgramItems itemsContainer"></div>
            <br />
        </div>
        <div id="upcomingTvMovies" class="homePageSection" style="margin-top: 1em;">
@ -25,7 +25,7 @@
                <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingMovies}</h1>
                <a href="livetvitems.html?type=movies" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><button is="emby-button" type="button" class="raised more mini noIcon">${ButtonMoreItems}</button></a>
            </div>
-            <div class="upcomingTvMovieItems itemsContainer noautoinit"></div>
+            <div is="emby-itemscontainer" class="upcomingTvMovieItems itemsContainer"></div>
            <br />
        </div>
        <div id="upcomingSports" class="homePageSection" style="margin-top: 1em;">
@ -33,7 +33,7 @@
                <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingSports}</h1>
                <a href="livetvitems.html?type=sports" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><button is="emby-button" type="button" class="raised more mini noIcon">${ButtonMoreItems}</button></a>
            </div>
-            <div class="upcomingSportsItems itemsContainer noautoinit"></div>
+            <div is="emby-itemscontainer" class="upcomingSportsItems itemsContainer"></div>
            <br />
        </div>
        <div id="upcomingKids" class="homePageSection" style="margin-top: 1em;">
@ -41,7 +41,7 @@
                <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingForKids}</h1>
                <a href="livetvitems.html?type=kids" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><button is="emby-button" type="button" class="raised more mini noIcon">${ButtonMoreItems}</button></a>
            </div>
-            <div class="upcomingKidsItems itemsContainer noautoinit"></div>
+            <div is="emby-itemscontainer" class="upcomingKidsItems itemsContainer"></div>
            <br />
        </div>
    </div>
@ -52,12 +52,12 @@
            <div class="paging"></div>
            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
        </div>
-        <div id="items" class="itemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer"></div>
    </div>
    <div class="pageTabContent ehsContent" id="recordingsTab" data-index="3">
        <div id="activeRecordings" class="homePageSection hide">
            <h1 class="listHeader">${HeaderActiveRecordings}</h1>
-            <div class="recordingItems itemsContainer"></div>
+            <div is="emby-itemscontainer" class="recordingItems itemsContainer"></div>
            <br />
        </div>
        <div id="latestRecordings" class="homePageSection hide">
@ -68,7 +68,7 @@
                    <span>${ButtonSync}</span>
                </button>
            </div>
-            <div class="recordingItems itemsContainer"></div>
+            <div is="emby-itemscontainer" class="recordingItems itemsContainer"></div>
            <br />
        </div>
        <div id="upcomingRecordings" class="homePageSection hide">
--- a/dashboard-ui/livetvitems.html
+++ b/dashboard-ui/livetvitems.html
@ -4,7 +4,7 @@
        <div class="viewSettings">
            <div class="listTopPaging"></div>
        </div>
-        <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
    </div>

 </div>
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@ -20,7 +20,7 @@
                </button>
            </div>

-            <div id="resumableItems" class="itemsContainer noautoinit">
+            <div is="emby-itemscontainer" id="resumableItems" class="itemsContainer">
            </div>
        </div>

@ -33,7 +33,7 @@
                </button>
            </div>

-            <div id="recentlyAddedItems" class="itemsContainer noautoinit">
+            <div is="emby-itemscontainer" id="recentlyAddedItems" class="itemsContainer">
            </div>
        </div>

@ -98,14 +98,14 @@
        <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
        </div>
-        <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
    </div>
    <div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
        <div class="viewSettings">
            <div class="listTopPaging">
            </div>
        </div>
-        <div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
    </div>

    <div data-role="content">
--- a/dashboard-ui/music.html
+++ b/dashboard-ui/music.html
@ -15,28 +15,28 @@
        <div class="homePageSection">
            <h1 class="listHeader">${HeaderLatestMusic}</h1>

-            <div id="recentlyAddedSongs" class="itemsContainer noautoinit" style="text-align:left;">
+            <div is="emby-itemscontainer" id="recentlyAddedSongs" class="itemsContainer" style="text-align:left;">
            </div>
        </div>

        <div id="playlists" class="homePageSection hide">
            <h1 class="listHeader">${HeaderPlaylists}</h1>

-            <div class="itemsContainer noautoinit" style="text-align:left;">
+            <div is="emby-itemscontainer" class="itemsContainer" style="text-align:left;">
            </div>
        </div>

        <div id="recentlyPlayed" class="homePageSection hide">
            <h1 class="listHeader">${HeaderRecentlyPlayed}</h1>

-            <div id="recentlyPlayedSongs" class="itemsContainer noautoinit" style="text-align:left;">
+            <div is="emby-itemscontainer" id="recentlyPlayedSongs" class="itemsContainer" style="text-align:left;">
            </div>
        </div>

        <div id="topPlayed" class="homePageSection hide">
            <h1 class="listHeader">${HeaderFrequentlyPlayed}</h1>

-            <div id="topPlayedSongs" class="itemsContainer noautoinit" style="text-align: left;">
+            <div is="emby-itemscontainer" id="topPlayedSongs" class="itemsContainer" style="text-align: left;">
            </div>
        </div>

@ -108,14 +108,14 @@
        <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
        </div>
-        <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
    </div>
    <div class="pageTabContent pageTabContent ehsContent" id="foldersTab" data-index="6">
        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
            <div class="paging"></div>
        </div>

-        <div class="itemsContainer itemsContainerWithAlphaPicker">
+        <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
        </div>
        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
            <div class="paging"></div>
--- a/dashboard-ui/scripts/channelitems.js
+++ b/dashboard-ui/scripts/channelitems.js
@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'emby-itemscontainer'], function ($) {

    var data = {};

--- a/dashboard-ui/scripts/channels.js
+++ b/dashboard-ui/scripts/channels.js
@ -1,4 +1,4 @@
-define(['libraryBrowser'], function (libraryBrowser) {
+define(['libraryBrowser', 'emby-itemscontainer'], function (libraryBrowser) {

    // The base query options
    var query = {
--- a/dashboard-ui/scripts/homenextup.js
+++ b/dashboard-ui/scripts/homenextup.js
@ -1,4 +1,4 @@
-define([], function () {
+define(['emby-itemscontainer'], function () {

    function getNextUpPromise() {

--- a/dashboard-ui/scripts/homeupcoming.js
+++ b/dashboard-ui/scripts/homeupcoming.js
@ -1,4 +1,4 @@
-define(['datetime', 'scrollStyles'], function (datetime) {
+define(['datetime', 'emby-itemscontainer', 'scrollStyles'], function (datetime) {

    function getUpcomingPromise() {

@ -100,9 +100,9 @@
            html += '<h1 class="listHeader">' + group.name + '</h1>';

            if (enableScrollX()) {
-                html += '<div class="itemsContainer hiddenScrollX">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
            } else {
-                html += '<div class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer">';
            }

            html += LibraryBrowser.getPosterViewHtml({
@ -124,7 +124,6 @@
        }

        elem.innerHTML = html;
-        LibraryBrowser.createCardMenus(elem);
        ImageLoader.lazyChildren(elem);
    }
 
    return function (view, params, tabContent) {
--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@ -256,7 +256,6 @@
            var itemsContainer = element.querySelector('.itemsContainer');
            itemsContainer.innerHTML = html;

-            LibraryBrowser.createCardMenus(itemsContainer);
            ImageLoader.lazyChildren(itemsContainer);
        });
    }
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@ -345,7 +345,6 @@

            itemsContainer.innerHTML = html;
            ImageLoader.lazyChildren(itemsContainer);
-            LibraryBrowser.createCardMenus(itemsContainer);
        });
    }

@ -765,9 +764,9 @@
            var html = '';

            if (enableScrollX()) {
-                html += '<div class="hiddenScrollX itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
            } else {
-                html += '<div class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer">';
            }
            html += LibraryBrowser.getPosterViewHtml({
                items: result.Items,
@ -787,7 +786,6 @@
            var similarContent = page.querySelector('#similarContent');
            similarContent.innerHTML = html;
            ImageLoader.lazyChildren(similarContent);
-            LibraryBrowser.createCardMenus(similarContent);
        });
    }

@ -1006,8 +1004,6 @@
                elem.classList.remove('hiddenScrollX');
            }

-            LibraryBrowser.createCardMenus(elem);
-
            if (item.Type == "BoxSet") {

                var collectionItemTypes = [
@ -1112,11 +1108,6 @@
        if (!items.length) {
            renderCollectionItemType(page, parentItem, { name: Globalize.translate('HeaderItems') }, items);
        }
-
-        var containers = page.querySelectorAll('.collectionItems .itemsContainer');
-        for (i = 0, length = containers.length; i < length; i++) {
-            LibraryBrowser.createCardMenus(containers[i]);
-        }
    }

    function renderCollectionItemType(page, parentItem, type, items) {
@ -1993,27 +1984,31 @@
        }
    }

+    function showPlayMenu(item, target) {
+
+        require(['playMenu'], function (playMenu) {
+
+            playMenu.show({
+
+                item: item,
+                positionTo: target
+            });
+        });
+    }
+
    function playCurrentItem(button) {

        if (currentItem.Type == 'Program') {

            ApiClient.getLiveTvChannel(currentItem.ChannelId, Dashboard.getCurrentUserId()).then(function (channel) {

-                LibraryBrowser.showPlayMenu(null, channel.Id, channel.Type, false, channel.MediaType, (channel.UserData || {}).PlaybackPositionTicks);
+                showPlayMenu(channel, button);
            });

            return;
        }

-        var userdata = currentItem.UserData || {};
-
-        var mediaType = currentItem.MediaType;
-
-        if (currentItem.Type == "MusicArtist" || currentItem.Type == "MusicAlbum") {
-            mediaType = "Audio";
-        }
-
-        LibraryBrowser.showPlayMenu(button, currentItem.Id, currentItem.Type, currentItem.IsFolder, mediaType, userdata.PlaybackPositionTicks);
+        showPlayMenu(currentItem, button);
    }

    function deleteTimer(page, params, id) {
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@ -577,106 +577,6 @@
                });
            },

-            showPlayMenu: function (positionTo, itemId, itemType, isFolder, mediaType, resumePositionTicks) {
-
-                var externalPlayers = AppInfo.supportsExternalPlayers && appSettings.enableExternalPlayers();
-
-                if (!resumePositionTicks && mediaType != "Audio" && !isFolder) {
-
-                    if (!externalPlayers || mediaType != "Video") {
-
-                        MediaController.play(itemId);
-                        return;
-                    }
-                }
-
-                var menuItems = [];
-
-                if (resumePositionTicks) {
-                    menuItems.push({
-                        name: Globalize.translate('ButtonResume'),
-                        id: 'resume',
-                        ironIcon: 'play-arrow'
-                    });
-                }
-
-                menuItems.push({
-                    name: Globalize.translate('ButtonPlay'),
-                    id: 'play',
-                    ironIcon: 'play-arrow'
-                });
-
-                if (!isFolder && externalPlayers && mediaType != "Audio") {
-                    menuItems.push({
-                        name: Globalize.translate('ButtonPlayExternalPlayer'),
-                        id: 'externalplayer',
-                        ironIcon: 'airplay'
-                    });
-                }
-
-                if (MediaController.canQueueMediaType(mediaType, itemType)) {
-                    menuItems.push({
-                        name: Globalize.translate('ButtonQueue'),
-                        id: 'queue',
-                        ironIcon: 'playlist-add'
-                    });
-                }
-
-                if (itemType == "Audio" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "MusicGenre") {
-                    menuItems.push({
-                        name: Globalize.translate('ButtonInstantMix'),
-                        id: 'instantmix',
-                        ironIcon: 'shuffle'
-                    });
-                }
-
-                if (isFolder || itemType == "MusicArtist" || itemType == "MusicGenre") {
-                    menuItems.push({
-                        name: Globalize.translate('ButtonShuffle'),
-                        id: 'shuffle',
-                        ironIcon: 'shuffle'
-                    });
-                }
-
-                require(['actionsheet'], function (actionsheet) {
-
-                    actionsheet.show({
-                        items: menuItems,
-                        positionTo: positionTo,
-                        callback: function (id) {
-
-                            switch (id) {
-
-                                case 'play':
-                                    MediaController.play(itemId);
-                                    break;
-                                case 'externalplayer':
-                                    LibraryBrowser.playInExternalPlayer(itemId);
-                                    break;
-                                case 'resume':
-                                    MediaController.play({
-                                        ids: [itemId],
-                                        startPositionTicks: resumePositionTicks
-                                    });
-                                    break;
-                                case 'queue':
-                                    MediaController.queue(itemId);
-                                    break;
-                                case 'instantmix':
-                                    MediaController.instantMix(itemId);
-                                    break;
-                                case 'shuffle':
-                                    MediaController.shuffle(itemId);
-                                    break;
-                                default:
-                                    break;
-                            }
-                        }
-                    });
-
-                });
-            },
-
            deleteItems: function (itemIds) {

                return new Promise(function (resolve, reject) {
@ -896,14 +796,9 @@

                var atts = [];

-                atts.push({
-                    name: 'itemid',
-                    value: item.Id
-                });
-
                atts.push({
                    name: 'serverid',
-                    value: item.ServerId
+                    value: item.ServerId || options.serverId
                });

                atts.push({
@ -926,7 +821,7 @@
                }

                atts.push({
-                    name: 'itemtype',
+                    name: 'type',
                    value: item.Type
                });

@ -1546,7 +1441,7 @@
                anchorCssClass += ' mediaItem';

                if (options.defaultAction) {
-                    anchorCssClass += ' itemWithAction';
+                    anchorCssClass += ' itemAction';
                }

                var transition = options.transition === false || !AppInfo.enableSectionTransitions ? '' : ' data-transition="slide"';
@ -1604,10 +1499,10 @@
                html += '</a>';

                if (options.overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person' && item.PlayAccess == 'Full') {
-                    html += '<div class="cardOverlayButtonContainer"><button is="paper-icon-button-light" class="cardOverlayPlayButton autoSize" onclick="return false;"><i class="md-icon">play_arrow</i></button></div>';
+                    html += '<div class="cardOverlayButtonContainer"><button is="paper-icon-button-light" class="cardOverlayPlayButton itemAction autoSize" data-action="playmenu" onclick="return false;"><i class="md-icon">play_arrow</i></button></div>';
                }
                if (options.overlayMoreButton) {
-                    html += '<div class="cardOverlayButtonContainer"><button is="paper-icon-button-light" class="cardOverlayMoreButton menuButton autoSize" onclick="return false;"><i class="md-icon">' + AppInfo.moreIcon.replace('-', '_') + '</i></button></div>';
+                    html += '<div class="cardOverlayButtonContainer"><button is="paper-icon-button-light" class="cardOverlayMoreButton itemAction autoSize" data-action="menu" onclick="return false;"><i class="md-icon">' + AppInfo.moreIcon.replace('-', '_') + '</i></button></div>';
                }

                // cardScalable
@ -1632,7 +1527,7 @@

                if (options.cardLayout) {
                    html += '<div class="cardButtonContainer">';
-                    html += '<button is="paper-icon-button-light" class="menuButton btnCardOptions autoSize"><i class="md-icon">' + AppInfo.moreIcon.replace('-', '_') + '</i></button>';
+                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><i class="md-icon">' + AppInfo.moreIcon.replace('-', '_') + '</i></button>';
                    html += "</div>";
                }

@ -1795,11 +1690,11 @@

                var elemWithAttributes = elem;

-                while (!elemWithAttributes.getAttribute('data-itemid')) {
+                while (!elemWithAttributes.getAttribute('data-id')) {
                    elemWithAttributes = elemWithAttributes.parentNode;
                }

-                var itemId = elemWithAttributes.getAttribute('data-itemid');
+                var itemId = elemWithAttributes.getAttribute('data-id');
                var index = elemWithAttributes.getAttribute('data-index');
                var mediaType = elemWithAttributes.getAttribute('data-mediatype');

@ -2375,10 +2270,10 @@
                if (style == 'fab') {

                    var tagName = 'paper-fab';
-                    return '<' + tagName + ' title="' + tooltip + '" data-itemid="' + itemId + '" icon="' + icon + '" class="' + btnCssClass + '" onclick="LibraryBrowser.' + method + '(this);return false;"></' + tagName + '>';
+                    return '<' + tagName + ' title="' + tooltip + '" data-id="' + itemId + '" icon="' + icon + '" class="' + btnCssClass + '" onclick="LibraryBrowser.' + method + '(this);return false;"></' + tagName + '>';
                }

-                return '<button is="paper-icon-button-light" title="' + tooltip + '" data-itemid="' + itemId + '"  class="autoSize ' + btnCssClass + '" onclick="LibraryBrowser.' + method + '(this);return false;"><i class="md-icon">' + icon + '</i></button>';
+                return '<button is="paper-icon-button-light" title="' + tooltip + '" data-id="' + itemId + '"  class="autoSize ' + btnCssClass + '" onclick="LibraryBrowser.' + method + '(this);return false;"><i class="md-icon">' + icon + '</i></button>';
            },

            getUserDataIconsHtml: function (item, includePlayed, style) {
@ -2416,7 +2311,7 @@

            markPlayed: function (link) {

-                var id = link.getAttribute('data-itemid');
+                var id = link.getAttribute('data-id');

                var markAsPlayed = !link.classList.contains('btnUserItemRatingOn');

@ -2431,7 +2326,7 @@

            markFavorite: function (link) {

-                var id = link.getAttribute('data-itemid');
+                var id = link.getAttribute('data-id');

                var markAsFavorite = !link.classList.contains('btnUserItemRatingOn');

--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@ -1,317 +1,4 @@
-define(['appSettings', 'appStorage', 'libraryBrowser', 'apphost', 'itemHelper', 'mediaInfo'], function (appSettings, appStorage, LibraryBrowser, appHost, itemHelper, mediaInfo) {
-
-    var showOverlayTimeout;
-
-    function onHoverOut(e) {
-
-        var elem = e.target;
-
-        if (!elem.classList.contains('card')) {
-            return;
-        }
-
-        if (showOverlayTimeout) {
-            clearTimeout(showOverlayTimeout);
-            showOverlayTimeout = null;
-        }
-
-        elem = elem.querySelector('.cardOverlayTarget');
-
-        if (elem) {
-            slideDownToHide(elem);
-        }
-    }
-
-    function slideDownToHide(elem) {
-
-        if (elem.classList.contains('hide')) {
-            return;
-        }
-
-        if (!elem.animate) {
-            elem.classList.add('hide');
-            return;
-        }
-
-        requestAnimationFrame(function () {
-            var keyframes = [
-              { transform: 'translateY(0)', offset: 0 },
-              { transform: 'translateY(100%)', offset: 1 }];
-            var timing = { duration: 300, iterations: 1, fill: 'forwards', easing: 'ease-out' };
-
-            elem.animate(keyframes, timing).onfinish = function () {
-                elem.classList.add('hide');
-            };
-        });
-    }
-
-    function slideUpToShow(elem) {
-
-        if (!elem.classList.contains('hide')) {
-            return;
-        }
-
-        elem.classList.remove('hide');
-
-        if (!elem.animate) {
-            return;
-        }
-
-        requestAnimationFrame(function () {
-
-            var keyframes = [
-              { transform: 'translateY(100%)', offset: 0 },
-              { transform: 'translateY(0)', offset: 1 }];
-            var timing = { duration: 300, iterations: 1, fill: 'forwards', easing: 'ease-out' };
-            elem.animate(keyframes, timing);
-        });
-    }
-
-    function getOverlayHtml(item, currentUser, card) {
-
-        var html = '';
-
-        html += '<div class="cardOverlayInner">';
-
-        var className = card.className.toLowerCase();
-
-        var isMiniItem = className.indexOf('mini') != -1;
-        var isSmallItem = isMiniItem || className.indexOf('small') != -1;
-        var isPortrait = className.indexOf('portrait') != -1;
-        var isSquare = className.indexOf('square') != -1;
-
-        var parentName = isSmallItem || isMiniItem || isPortrait ? null : item.SeriesName;
-        var name = itemHelper.getDisplayName(item);
-
-        html += '<div style="margin-bottom:1em;">';
-        var logoHeight = isSmallItem || isMiniItem ? 20 : 26;
-        var imgUrl;
-
-        if (parentName && item.ParentLogoItemId) {
-
-            imgUrl = ApiClient.getScaledImageUrl(item.ParentLogoItemId, {
-                maxHeight: logoHeight,
-                type: 'logo',
-                tag: item.ParentLogoImageTag
-            });
-
-            html += '<img src="' + imgUrl + '" style="max-height:' + logoHeight + 'px;max-width:100%;" />';
-
-        }
-        else if (item.ImageTags.Logo) {
-
-            imgUrl = ApiClient.getScaledImageUrl(item.Id, {
-                maxHeight: logoHeight,
-                type: 'logo',
-                tag: item.ImageTags.Logo
-            });
-
-            html += '<img src="' + imgUrl + '" style="max-height:' + logoHeight + 'px;max-width:100%;" />';
-        }
-        else {
-            html += parentName || name;
-        }
-        html += '</div>';
-
-        if (parentName) {
-            html += '<p>';
-            html += name;
-            html += '</p>';
-        } else if (!isSmallItem && !isMiniItem) {
-            html += '<div class="itemMiscInfo">';
-            html += mediaInfo.getPrimaryMediaInfoHtml(item, {
-                endsAt: false
-            });
-            html += '</div>';
-        }
-
-        if (!isMiniItem) {
-            html += '<div style="margin:1em 0 .75em;">';
-
-            if (isPortrait) {
-                html += '<div class="userDataIcons" style="margin:.5em 0 0em;">';
-                html += LibraryBrowser.getUserDataIconsHtml(item);
-                html += '</div>';
-            } else {
-
-                html += '<span class="userDataIcons" style="vertical-align:middle;">';
-                html += LibraryBrowser.getUserDataIconsHtml(item);
-                html += '</span>';
-            }
-            html += '</div>';
-        }
-
-        html += '<div>';
-
-        var buttonCount = 0;
-
-        if (MediaController.canPlay(item)) {
-
-            var resumePosition = (item.UserData || {}).PlaybackPositionTicks || 0;
-
-            html += '<button is="paper-icon-button-light" class="btnPlayItem autoSize" data-itemid="' + item.Id + '" data-itemtype="' + item.Type + '" data-isfolder="' + item.IsFolder + '" data-mediatype="' + item.MediaType + '" data-resumeposition="' + resumePosition + '"><i class="md-icon">play_circle_outline</i></button>';
-            buttonCount++;
-        }
-
-        if (item.LocalTrailerCount) {
-            html += '<button is="paper-icon-button-light" class="btnPlayTrailer autoSize" data-itemid="' + item.Id + '"><i class="md-icon">videocam</i></button>';
-            buttonCount++;
-        }
-
-        html += '<button is="paper-icon-button-light" class="btnMoreCommands autoSize"><i class="md-icon">more_vert</i></button>';
-        buttonCount++;
-
-        html += '</div>';
-
-        html += '</div>';
-
-        return html;
-    }
-
-    function onTrailerButtonClick(e) {
-
-        var id = this.getAttribute('data-itemid');
-
-        ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), id).then(function (trailers) {
-            MediaController.play({ items: trailers });
-        });
-
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-    }
-
-    function onPlayItemButtonClick(e) {
-
-        var target = this;
-
-        var id = target.getAttribute('data-itemid');
-        var type = target.getAttribute('data-itemtype');
-        var isFolder = target.getAttribute('data-isfolder') == 'true';
-        var mediaType = target.getAttribute('data-mediatype');
-        var resumePosition = parseInt(target.getAttribute('data-resumeposition'));
-
-        LibraryBrowser.showPlayMenu(this, id, type, isFolder, mediaType, resumePosition);
-
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-    }
-
-    function onMoreButtonClick(e) {
-
-        var card = parentWithClass(this, 'card');
-
-        showContextMenu(card, {
-            shuffle: false,
-            instantMix: false,
-            play: false,
-            playAllFromHere: false,
-            queue: false,
-            queueAllFromHere: false
-        });
-
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-    }
-
-    function onContextMenu(e) {
-
-        var card = parentWithClass(e.target, 'card');
-
-        if (card) {
-            var itemSelectionPanel = card.querySelector('.itemSelectionPanel');
-
-            if (!itemSelectionPanel) {
-                showContextMenu(card, {});
-            }
-
-            e.preventDefault();
-            return false;
-        }
-    }
-
-    function deleteTimer(id, itemsContainer) {
-
-        require(['confirm'], function (confirm) {
-
-            confirm(Globalize.translate('MessageConfirmRecordingCancellation'), Globalize.translate('HeaderConfirmRecordingCancellation')).then(function () {
-
-                Dashboard.showLoadingMsg();
-
-                ApiClient.cancelLiveTvTimer(id).then(function () {
-
-                    require(['toast'], function (toast) {
-                        toast(Globalize.translate('MessageRecordingCancelled'));
-                    });
-
-                    Dashboard.hideLoadingMsg();
-                    itemsContainer.dispatchEvent(new CustomEvent('timercancelled', {
-                        bubbles: true
-                    }));
-                });
-            });
-        });
-    }
-
-    function showContextMenu(card, options) {
-
-        var displayContextItem = card;
-
-        card = parentWithClass(card, 'card');
-
-        if (!card) {
-            return;
-        }
-
-        var itemId = card.getAttribute('data-itemid');
-        var serverId = ApiClient.serverInfo().Id;
-        var type = card.getAttribute('data-itemtype');
-
-        var apiClient = ConnectionManager.getApiClient(serverId);
-
-        var promise = type == 'Timer' ? apiClient.getLiveTvTimer(itemId) : apiClient.getItem(apiClient.getCurrentUserId(), itemId);
-
-        promise.then(function (item) {
-
-            require(['itemContextMenu'], function (itemContextMenu) {
-
-                itemContextMenu.show(Object.assign(options || {}, {
-                    item: item,
-                    positionTo: displayContextItem
-                }));
-            });
-        });
-    }
-
-    function onListViewPlayButtonClick(e, playButton) {
-
-        var card = e.target;
-
-        if (!card.classList.contains('card') && !card.classList.contains('listItem')) {
-            card = parentWithAnyClass(card, ['listItem', 'card']);
-        }
-
-        var id = card.getAttribute('data-itemid');
-        var type = card.getAttribute('data-itemtype');
-        var isFolder = card.getAttribute('data-isfolder') == 'true';
-        var mediaType = card.getAttribute('data-mediatype');
-        var resumePosition = parseInt(card.getAttribute('data-positionticks'));
-
-        if (type == 'MusicAlbum' || type == 'MusicArtist' || type == 'MusicGenre' || type == 'Playlist') {
-            isFolder = true;
-        }
-
-        if (type == 'Program') {
-            id = card.getAttribute('data-channelid');
-        }
-
-        LibraryBrowser.showPlayMenu(playButton, id, type, isFolder, mediaType, resumePosition);
-
-        e.preventDefault();
-        return false;
-    }
+define(['appSettings', 'appStorage', 'libraryBrowser', 'apphost', 'itemHelper'], function (appSettings, appStorage, LibraryBrowser, appHost, itemHelper) {

    function isClickable(target) {

@ -330,12 +17,6 @@

    function onCardClick(e) {

-        var playButton = parentWithClass(e.target, 'cardOverlayPlayButton');
-
-        if (playButton) {
-            return onListViewPlayButtonClick(e, playButton);
-        }
-
        var card = parentWithClass(e.target, 'card');

        if (card) {
@ -352,7 +33,7 @@

    function onGroupedCardClick(e, card) {

-        var itemId = card.getAttribute('data-itemid');
+        var itemId = card.getAttribute('data-id');
        var context = card.getAttribute('data-context');

        var userId = Dashboard.getCurrentUserId();
@ -392,25 +73,6 @@
        return false;
    }

-    function hasAnyClass(elem, classNames) {
-        return classNames.filter(function (c) {
-            return elem.classList.contains(c);
-        }).length > 0;
-    }
-
-    function parentWithAnyClass(elem, classNames) {
-
-        while (!elem.classList || !hasAnyClass(elem, classNames)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
    function parentWithClass(elem, className) {

        while (!elem.classList || !elem.classList.contains(className)) {
@ -426,125 +88,10 @@

    LibraryBrowser.createCardMenus = function (curr, options) {

-        var preventHover = false;
-
-        function onShowTimerExpired(elem) {
-
-            elem = elem.querySelector('a');
-
-            if (elem.querySelector('.itemSelectionPanel')) {
-                return;
-            }
-
-            var innerElem = elem.querySelector('.cardOverlayTarget');
-
-            if (!innerElem) {
-                innerElem = document.createElement('div');
-                innerElem.classList.add('hide');
-                innerElem.classList.add('cardOverlayTarget');
-                parentWithClass(elem, 'cardContent').appendChild(innerElem);
-            }
-
-            var dataElement = elem;
-            while (dataElement && !dataElement.getAttribute('data-itemid')) {
-                dataElement = dataElement.parentNode;
-            }
-
-            var id = dataElement.getAttribute('data-itemid');
-            var type = dataElement.getAttribute('data-itemtype');
-
-            if (type == 'Timer') {
-                return;
-            }
-
-            var promise1 = ApiClient.getItem(Dashboard.getCurrentUserId(), id);
-            var promise2 = Dashboard.getCurrentUser();
-
-            Promise.all([promise1, promise2]).then(function (responses) {
-
-                var item = responses[0];
-                var user = responses[1];
-
-                var card = elem;
-
-                while (!card.classList.contains('card')) {
-                    card = card.parentNode;
-                }
-
-                innerElem.innerHTML = getOverlayHtml(item, user, card);
-
-                var btnPlayItem = innerElem.querySelector('.btnPlayItem');
-                if (btnPlayItem) {
-                    btnPlayItem.addEventListener('click', onPlayItemButtonClick);
-                }
-                var btnPlayTrailer = innerElem.querySelector('.btnPlayTrailer');
-                if (btnPlayTrailer) {
-                    btnPlayTrailer.addEventListener('click', onTrailerButtonClick);
-                }
-                var btnMoreCommands = innerElem.querySelector('.btnMoreCommands');
-                if (btnMoreCommands) {
-                    btnMoreCommands.addEventListener('click', onMoreButtonClick);
-                }
-            });
-
-            slideUpToShow(innerElem);
-        }
-
-        function onHoverIn(e) {
-
-            var elem = e.target;
-
-            if (!elem.classList.contains('cardImage')) {
-                return;
-            }
-
-            if (preventHover === true) {
-                preventHover = false;
-                return;
-            }
-
-            if (showOverlayTimeout) {
-                clearTimeout(showOverlayTimeout);
-                showOverlayTimeout = null;
-            }
-
-            while (!elem.classList.contains('card')) {
-                elem = elem.parentNode;
-            }
-
-            showOverlayTimeout = setTimeout(function () {
-                onShowTimerExpired(elem);
-
-            }, 1200);
-        }
-
-        function preventTouchHover() {
-            preventHover = true;
-        }
-
        curr.removeEventListener('click', onCardClick);
        curr.addEventListener('click', onCardClick);

-        if (AppInfo.isTouchPreferred) {
-
-            curr.removeEventListener('contextmenu', disableEvent);
-            curr.addEventListener('contextmenu', disableEvent);
-        }
-        else {
-            curr.removeEventListener('contextmenu', onContextMenu);
-            curr.addEventListener('contextmenu', onContextMenu);
-
-            curr.removeEventListener('mouseenter', onHoverIn);
-            curr.addEventListener('mouseenter', onHoverIn, true);
-
-            curr.removeEventListener('mouseleave', onHoverOut);
-            curr.addEventListener('mouseleave', onHoverOut, true);
-
-            curr.removeEventListener("touchstart", preventTouchHover);
-            curr.addEventListener("touchstart", preventTouchHover);
-        }
-
-        initTapHoldMenus(curr);
+        //initTapHoldMenus(curr);
    };

    function initTapHoldMenus(elem) {
@ -616,12 +163,6 @@
        });
    }

-    function disableEvent(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-    }
-
    function onTapHold(e) {

        var card = parentWithClass(e.target, 'card');
@ -781,7 +322,7 @@
    var selectedItems = [];
    function updateItemSelection(chkItemSelect, selected) {

-        var id = parentWithClass(chkItemSelect, 'card').getAttribute('data-itemid');
+        var id = parentWithClass(chkItemSelect, 'card').getAttribute('data-id');

        if (selected) {

@ -989,80 +530,6 @@
        });
    }

-    function onItemWithActionClick(e) {
-
-        var elem = parentWithClass(e.target, 'itemWithAction');
-
-        if (!elem) {
-            return;
-        }
-
-        var action = elem.getAttribute('data-action');
-        var elemWithAttributes = elem;
-
-        if (action) {
-            while (!elemWithAttributes.getAttribute('data-itemid')) {
-                elemWithAttributes = elemWithAttributes.parentNode;
-            }
-        }
-
-        var index;
-        var itemsContainer;
-
-        var itemId = elemWithAttributes.getAttribute('data-itemid');
-
-        if (action == 'play') {
-            MediaController.play(itemId);
-        }
-        else if (action == 'playallfromhere') {
-
-            index = elemWithAttributes.getAttribute('data-index');
-
-            itemsContainer = parentWithClass(elem, 'itemsContainer');
-
-            playAllFromHere(index, itemsContainer, 'play');
-        }
-        else if (action == 'instantmix') {
-
-            MediaController.instantMix(itemId);
-        }
-
-        e.stopPropagation();
-        e.preventDefault();
-        return false;
-    }
-
-    function playAllFromHere(index, itemsContainer, method) {
-
-        var ids = [];
-
-        var mediaItems = itemsContainer.querySelectorAll('.mediaItem');
-        for (var i = 0, length = mediaItems.length; i < length; i++) {
-            var node = mediaItems[i];
-            var id = node.getAttribute('data-itemid');
-            while (!id) {
-                node = node.parentNode;
-                id = node.getAttribute('data-itemid');
-            }
-            ids.push(id);
-        }
-
-        ids = ids.slice(index);
-
-        ApiClient.getItems(Dashboard.getCurrentUserId(), {
-
-            Ids: ids.join(','),
-            Fields: 'MediaSources,Chapters',
-            Limit: 100
-
-        }).then(function (result) {
-
-            MediaController[method]({
-                items: result.Items
-            });
-        });
-    }
-
    function showSyncButtonsPerUser(page) {

        var apiClient = window.ApiClient;
@ -1106,16 +573,8 @@

        var page = this;

-        page.addEventListener('click', onItemWithActionClick);
-
-        var itemsContainers = page.querySelectorAll('.itemsContainer:not(.noautoinit)');
-        var i, length;
-        for (i = 0, length = itemsContainers.length; i < length; i++) {
-            LibraryBrowser.createCardMenus(itemsContainers[i]);
-        }
-
        var categorySyncButtons = page.querySelectorAll('.categorySyncButton');
-        for (i = 0, length = categorySyncButtons.length; i < length; i++) {
+        for (var i = 0, length = categorySyncButtons.length; i < length; i++) {
            categorySyncButtons[i].addEventListener('click', onCategorySyncButtonClick);
        }
    });
@ -1136,105 +595,4 @@
        hideSelections();
    });

-    function renderUserDataChanges(card, userData) {
-
-        if (userData.Played) {
-
-            var playedIndicator = card.querySelector('.playedIndicator');
-
-            if (!playedIndicator) {
-
-                playedIndicator = document.createElement('div');
-                playedIndicator.classList.add('playedIndicator');
-                card.querySelector('.cardContent').appendChild(playedIndicator);
-            }
-            playedIndicator.innerHTML = '<i class="md-icon">check</i>';
-        }
-        else if (userData.UnplayedItemCount) {
-
-            var playedIndicator = card.querySelector('.playedIndicator');
-
-            if (!playedIndicator) {
-
-                playedIndicator = document.createElement('div');
-                playedIndicator.classList.add('playedIndicator');
-                card.querySelector('.cardContent').appendChild(playedIndicator);
-            }
-            playedIndicator.innerHTML = userData.UnplayedItemCount;
-        }
-
-        var progressHtml = LibraryBrowser.getItemProgressBarHtml(userData);
-        var cardProgress;
-
-        if (progressHtml) {
-            cardProgress = card.querySelector('.cardProgress');
-
-            if (!cardProgress) {
-                cardProgress = document.createElement('div');
-                cardProgress.classList.add('cardProgress');
-
-                var cardFooter = card.querySelector('.cardFooter');
-                if (cardFooter) {
-                    cardFooter.appendChild(cardProgress);
-                }
-            }
-
-            cardProgress.innerHTML = progressHtml;
-        }
-        else {
-            cardProgress = card.querySelector('.cardProgress');
-            if (cardProgress) {
-                cardProgress.parentNode.removeChild(cardProgress);
-            }
-        }
-    }
-
-    function onUserDataChanged(userData) {
-
-        var elems = document.querySelectorAll("*[data-itemid='" + userData.ItemId + "']");
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-
-            var elem = elems[i];
-            var mediaType = elem.getAttribute('data-mediatype');
-
-            if (mediaType == 'Video') {
-                elem.setAttribute('data-positionticks', (userData.PlaybackPositionTicks || 0));
-
-                if (elem.classList.contains('card')) {
-                    renderUserDataChanges(elem, userData);
-                }
-            }
-        }
-    }
-
-    function onWebSocketMessage(e, data) {
-
-        var msg = data;
-
-        if (msg.MessageType === "UserDataChanged") {
-
-            if (msg.Data.UserId == Dashboard.getCurrentUserId()) {
-
-                for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
-                    onUserDataChanged(msg.Data.UserDataList[i]);
-                }
-            }
-        }
-
-    }
-
-    function initializeApiClient(apiClient) {
-        Events.off(apiClient, "websocketmessage", onWebSocketMessage);
-        Events.on(apiClient, "websocketmessage", onWebSocketMessage);
-    }
-
-    if (window.ApiClient) {
-        initializeApiClient(window.ApiClient);
-    }
-
-    Events.on(ConnectionManager, 'apiclientcreated', function (e, apiClient) {
-        initializeApiClient(apiClient);
-    });
-
 });
--- a/dashboard-ui/scripts/livetvchannels.js
+++ b/dashboard-ui/scripts/livetvchannels.js
@ -1,4 +1,4 @@
-define([], function () {
+define(['emby-itemscontainer'], function () {

    return function (view, params, tabContent) {

--- a/dashboard-ui/scripts/livetvcomponents.js
+++ b/dashboard-ui/scripts/livetvcomponents.js
@ -89,7 +89,6 @@
                showChannelName: true,
                lazy: true,
                cardLayout: true,
-                showDetailsMenu: true,
                defaultAction: 'edit'

            });
--- a/dashboard-ui/scripts/livetvitems.js
+++ b/dashboard-ui/scripts/livetvitems.js
@ -1,4 +1,4 @@
-define([], function () {
+define(['emby-itemscontainer'], function () {

    var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');

--- a/dashboard-ui/scripts/livetvrecordings.js
+++ b/dashboard-ui/scripts/livetvrecordings.js
@ -149,7 +149,6 @@
            elem.querySelector('.recordingItems').innerHTML = html;

            ImageLoader.lazyChildren(elem);
-            LibraryBrowser.createCardMenus(elem);
        });
    }

--- a/dashboard-ui/scripts/livetvsuggested.js
+++ b/dashboard-ui/scripts/livetvsuggested.js
@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {

    function enableScrollX() {
        return browserInfo.mobile && AppInfo.enableAppLayouts;
@ -133,7 +133,6 @@
                } else {
                    containers[i].classList.remove('hiddenScrollX');
                }
-                LibraryBrowser.createCardMenus(containers[i]);
            }
        };

--- a/dashboard-ui/scripts/mediacontroller.js
+++ b/dashboard-ui/scripts/mediacontroller.js
@ -585,12 +585,23 @@

        self.shuffle = function (id) {

+            // accept both id and item being passed in
+            if (id.Id) {
+                id = id.Id;
+            }
+
            doWithPlaybackValidation(currentPlayer, function () {
                currentPlayer.shuffle(id);
            });
        };

        self.instantMix = function (id) {
+
+            // accept both id and item being passed in
+            if (id.Id) {
+                id = id.Id;
+            }
+
            doWithPlaybackValidation(currentPlayer, function () {
                currentPlayer.instantMix(id);
            });
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {

    function getView() {

@ -167,9 +167,9 @@
        html += '<h1 class="listHeader">' + title + '</h1>';

        if (enableScrollX()) {
-            html += '<div class="hiddenScrollX">';
+            html += '<div is="emby-itemscontainer" class="hiddenScrollX">';
        } else {
-            html += '<div>';
+            html += '<div is="emby-itemscontainer">';
        }

        var view = getView();
@ -247,8 +247,6 @@
            } else {
                containers[i].classList.remove('hiddenScrollX');
            }
-
-            libraryBrowser.createCardMenus(containers[i]);
        }
    }

@ -281,8 +279,6 @@
            loadSuggestionsTab(view, params, tabContent);
        };

-        libraryBrowser.createCardMenus(view.querySelector('.recommendations'));
-
        var mdlTabs = view.querySelector('.libraryViewNav');

        var baseUrl = 'movies.html';
--- a/dashboard-ui/scripts/musicrecommended.js
+++ b/dashboard-ui/scripts/musicrecommended.js
@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {

    function itemsPerRow() {

@ -258,8 +258,6 @@
                } else {
                    containers[i].classList.remove('hiddenScrollX');
                }
-
-                LibraryBrowser.createCardMenus(containers[i]);
            }
        };

--- a/dashboard-ui/scripts/playlistedit.js
+++ b/dashboard-ui/scripts/playlistedit.js
@ -93,7 +93,6 @@
                });
            });
            ImageLoader.lazyChildren(elem);
-            LibraryBrowser.createCardMenus(elem);

            $('.btnNextPage', elem).on('click', function () {
                query.StartIndex += query.Limit;
--- a/dashboard-ui/scripts/searchpage.js
+++ b/dashboard-ui/scripts/searchpage.js
@ -1,4 +1,4 @@
-define(['libraryBrowser', 'focusManager', 'embyRouter', 'emby-input', 'paper-icon-button-light', 'material-icons'], function (libraryBrowser, focusManager, embyRouter) {
+define(['libraryBrowser', 'focusManager', 'embyRouter', 'emby-input', 'paper-icon-button-light', 'material-icons', 'emby-itemscontainer'], function (libraryBrowser, focusManager, embyRouter) {

    function loadSuggestions(page) {

@ -121,7 +121,8 @@
                centerImage: true,
                centerText: true,
                textLines: getAdditionalTextLines,
-                overlayPlayButton: true
+                overlayPlayButton: true,
+                serverId: ApiClient.serverInfo().Id
            });

            var itemsContainer = searchResults;
@ -176,8 +177,6 @@
            loadSuggestions(view);
        }

-        libraryBrowser.createCardMenus(searchResults);
-
        view.querySelector('.txtSearch').addEventListener('input', function () {
            onSearchChange(this.value);
        });
--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@ -1,4 +1,4 @@
-define(['libraryBrowser', 'appSettings', 'scrollStyles', 'emby-button', 'paper-icon-button-light'], function (LibraryBrowser, appSettings) {
+define(['libraryBrowser', 'appSettings', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (LibraryBrowser, appSettings) {

    function getUserViews(userId) {

@ -111,7 +111,7 @@

            icon = item.icon || icon;

-            html += '<a' + onclick + ' data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
+            html += '<a' + onclick + ' data-id="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
            html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';

            html += "<div class='cardText' style='padding:8px 10px;color:#fff;'>";
@ -302,7 +302,7 @@

                html += '</div>';

-                html += '<div class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer">';

                html += LibraryBrowser.getPosterViewHtml({
                    items: items,
@ -322,8 +322,6 @@

            elem.innerHTML = html;
            ImageLoader.lazyChildren(elem);
-
-            LibraryBrowser.createCardMenus(elem);
        });
    }

@ -347,9 +345,9 @@
            if (items.length) {
                html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestMovies') + '</h1>';
                if (scrollX) {
-                    html += '<div class="hiddenScrollX itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                } else {
-                    html += '<div class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
                }
                html += LibraryBrowser.getPosterViewHtml({
                    items: items,
@ -366,8 +364,6 @@

            elem.innerHTML = html;
            ImageLoader.lazyChildren(elem);
-
-            LibraryBrowser.createCardMenus(elem);
        });
    }

@ -391,9 +387,9 @@
            if (items.length) {
                html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestEpisodes') + '</h1>';
                if (scrollX) {
-                    html += '<div class="hiddenScrollX itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                } else {
-                    html += '<div class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
                }

                html += LibraryBrowser.getPosterViewHtml({
@ -411,8 +407,6 @@

            elem.innerHTML = html;
            ImageLoader.lazyChildren(elem);
-
-            LibraryBrowser.createCardMenus(elem);
        });
    }

@ -434,7 +428,7 @@

            if (result.Items.length) {
                html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
-                html += '<div class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer">';
                html += LibraryBrowser.getPosterViewHtml({
                    items: result.Items,
                    shape: 'auto',
@ -449,8 +443,6 @@

            elem.innerHTML = html;
            ImageLoader.lazyChildren(elem);
-
-            LibraryBrowser.createCardMenus(elem);
        });
    }

@ -478,9 +470,9 @@
                var scrollX = enableScrollX() && browserInfo.safari && screenWidth > 800;

                if (scrollX) {
-                    html += '<div class="hiddenScrollX itemsContainer homeTopViews">';
+                    html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer homeTopViews">';
                } else {
-                    html += '<div class="itemsContainer homeTopViews">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer homeTopViews">';
                }
                html += LibraryBrowser.getPosterViewHtml({
                    items: items,
@ -506,8 +498,6 @@

                elem.innerHTML = html + infoHtml;
                ImageLoader.lazyChildren(elem);
-
-                LibraryBrowser.createCardMenus(elem, { showDetailsMenu: false });
            });
        });
    }
@ -539,9 +529,9 @@
            if (result.Items.length) {
                html += '<h1 class="listHeader">' + Globalize.translate('HeaderResume') + '</h1>';
                if (enableScrollX()) {
-                    html += '<div class="hiddenScrollX itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                } else {
-                    html += '<div class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
                }
                html += LibraryBrowser.getPosterViewHtml({
                    items: result.Items,
@ -562,7 +552,6 @@
            elem.innerHTML = html;

            ImageLoader.lazyChildren(elem);
-            LibraryBrowser.createCardMenus(elem);
        });
    }

@ -584,9 +573,9 @@
            if (result.Items.length) {
                html += '<h1 class="listHeader">' + Globalize.translate('HeaderNextUp') + '</h1>';
                if (enableScrollX()) {
-                    html += '<div class="hiddenScrollX itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                } else {
-                    html += '<div class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
                }
                html += LibraryBrowser.getPosterViewHtml({
                    items: result.Items,
@ -606,7 +595,6 @@
            elem.innerHTML = html;

            ImageLoader.lazyChildren(elem);
-            LibraryBrowser.createCardMenus(elem);
        });
    }

@ -667,7 +655,7 @@
                html += '<a href="channelitems.html?id=' + channel.Id + '" class="clearLink" style="margin-left:2em;"><button is="emby-button" type="button" class="raised more mini"><span>' + Globalize.translate('ButtonMore') + '</span></button></a>';
                html += '</div>';

-                html += '<div class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer">';
                html += LibraryBrowser.getPosterViewHtml({
                    items: result.Items,
                    shape: 'autohome',
@ -685,8 +673,6 @@
            var elem = page.querySelector('#channel' + channel.Id + '');
            elem.innerHTML = html;
            ImageLoader.lazyChildren(elem);
-
-            LibraryBrowser.createCardMenus(elem);
        });
    }

@ -715,9 +701,9 @@
            }

            if (enableScrollX()) {
-                html += '<div class="hiddenScrollX itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
            } else {
-                html += '<div class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer">';
            }
            html += LibraryBrowser.getPosterViewHtml({
                items: result.Items,
@ -734,7 +720,6 @@

            elem.innerHTML = html;
            ImageLoader.lazyChildren(elem);
-            LibraryBrowser.createCardMenus(elem);
        });
    }

--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@ -1804,6 +1804,7 @@ var AppInfo = {};
        define("emby-collapse", [embyWebComponentsBowerPath + "/emby-collapse/emby-collapse"], returnFirstDependency);
        define("emby-button", [embyWebComponentsBowerPath + "/emby-button/emby-button"], returnFirstDependency);
        define("emby-itemscontainer", [embyWebComponentsBowerPath + "/emby-itemscontainer/emby-itemscontainer"], returnFirstDependency);
+        define("itemHoverMenu", [embyWebComponentsBowerPath + "/itemhovermenu/itemhovermenu"], returnFirstDependency);
        define("alphaPicker", [embyWebComponentsBowerPath + "/alphapicker/alphapicker"], returnFirstDependency);
        define("paper-icon-button-light", [embyWebComponentsBowerPath + "/emby-button/paper-icon-button-light"]);

@ -1820,6 +1821,7 @@ var AppInfo = {};
        define("subtitleEditor", [embyWebComponentsBowerPath + "/subtitleeditor/subtitleeditor"], returnFirstDependency);
        define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
        define("itemContextMenu", [embyWebComponentsBowerPath + "/itemcontextmenu"], returnFirstDependency);
+        define("playMenu", [embyWebComponentsBowerPath + "/playmenu"], returnFirstDependency);
        define("refreshDialog", [embyWebComponentsBowerPath + "/refreshdialog/refreshdialog"], returnFirstDependency);
        define("backdrop", [embyWebComponentsBowerPath + "/backdrop/backdrop"], returnFirstDependency);
        define("fetchHelper", [embyWebComponentsBowerPath + "/fetchhelper"], returnFirstDependency);
@ -2035,6 +2037,12 @@ var AppInfo = {};
                },
                canPlay: function (item) {
                    return MediaController.canPlay(item);
+                },
+                instantMix: function (item) {
+                    return MediaController.instantMix(item);
+                },
+                shuffle: function (item) {
+                    return MediaController.shuffle(item);
                }
            };
        });
@ -2287,7 +2295,7 @@ var AppInfo = {};

        var baseUrl = 'bower_components/emby-webcomponents/strings/';

-        var languages = ['da', 'de', 'en-US', 'es-MX', 'kk', 'nb', 'nl', 'pt-BR', 'pt-PT', 'ru', 'sv', 'zh-TW'];
+        var languages = ['da', 'de', 'en-US', 'es-MX', 'fr', 'kk', 'nb', 'nl', 'pt-BR', 'pt-PT', 'ru', 'sv', 'zh-TW'];

        var translations = languages.map(function (i) {
            return {
@ -3248,7 +3256,7 @@ var AppInfo = {};
    }

    function upgradeLayouts() {
-        if (!AppInfo.enableAppLayouts && browserInfo.mobile) {
+        if (!AppInfo.enableAppLayouts) {
            Dashboard.getPluginSecurityInfo().then(function (info) {
                if (info.IsMBSupporter) {
                    AppInfo.enableAppLayouts = true;
--- a/dashboard-ui/scripts/tvrecommended.js
+++ b/dashboard-ui/scripts/tvrecommended.js
@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {

    return function (view, params) {

@ -165,7 +165,6 @@
            } else {
                tabContent.querySelector('#resumableItems').classList.remove('hiddenScrollX');
            }
-            libraryBrowser.createCardMenus(tabContent.querySelector('#resumableItems'));
        };

        self.renderTab = function () {
@ -273,7 +272,6 @@
        } else {
            view.querySelector('#resumableItems').classList.remove('hiddenScrollX');
        }
-        libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
        libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'), [0, 1, 2, 4, 5, 6]);

        mdlTabs.addEventListener('beforetabchange', function (e) {
--- a/dashboard-ui/scripts/tvupcoming.js
+++ b/dashboard-ui/scripts/tvupcoming.js
@ -1,4 +1,4 @@
-define(['datetime', 'scrollStyles'], function (datetime) {
+define(['datetime', 'scrollStyles', 'emby-itemscontainer'], function (datetime) {

    function getUpcomingPromise(context, params) {

@ -102,9 +102,9 @@
            html += '<h1 class="listHeader">' + group.name + '</h1>';

            if (enableScrollX()) {
-                html += '<div class="itemsContainer hiddenScrollX">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
            } else {
-                html += '<div class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer">';
            }

            html += LibraryBrowser.getPosterViewHtml({
@ -125,7 +125,6 @@
        }

        elem.innerHTML = html;
-        LibraryBrowser.createCardMenus(elem);
        ImageLoader.lazyChildren(elem);
    }
 
    return function (view, params, tabContent) {
--- a/dashboard-ui/search.html
+++ b/dashboard-ui/search.html
@ -43,6 +43,6 @@
            </div>
        </div>

-        <div class="searchResults hide itemsContainer"></div>
+        <div is="emby-itemscontainer" class="searchResults hide itemsContainer"></div>
    </div>
 </div>
--- a/dashboard-ui/tv.html
+++ b/dashboard-ui/tv.html
@ -22,7 +22,7 @@
                </button>
            </div>

-            <div id="resumableItems" class="itemsContainer noautoinit">
+            <div is="emby-itemscontainer" id="resumableItems" class="itemsContainer">
            </div>
        </div>

@ -34,7 +34,7 @@
                    <span>${ButtonSync}</span>
                </button>
            </div>
-            <div id="nextUpItems" class="itemsContainer">
+            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer">
            </div>
        </div>
        <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
@ -48,7 +48,7 @@
                    <span>${ButtonSync}</span>
                </button>
            </div>
-            <div id="latestEpisodes" class="itemsContainer">
+            <div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer">
            </div>
        </div>
    </div>
@ -96,14 +96,14 @@
        <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
        </div>
-        <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
    </div>
    <div class="pageTabContent ehsContent" id="studiosTab" data-index="6">
        <div class="viewSettings">
            <div class="listTopPaging">
            </div>
        </div>
-        <div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
    </div>

    <div data-role="content">