Merge remote-tracking branch 'upstream/master' into es6

With conflicts

src/components/actionSheet/actionSheet.js

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

src/components/appRouter.js

@@ -222,46 +222,13 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
     }
 
     function normalizeImageOptions(options) {
-        var scaleFactor = browser.tv ? 0.8 : 1;
-
         var setQuality;
-        if (options.maxWidth) {
-            options.maxWidth = Math.round(options.maxWidth * scaleFactor);
+        if (options.maxWidth || options.width || options.maxHeight || options.height) {
             setQuality = true;
         }
 
-        if (options.width) {
-            options.width = Math.round(options.width * scaleFactor);
-            setQuality = true;
-        }
-
-        if (options.maxHeight) {
-            options.maxHeight = Math.round(options.maxHeight * scaleFactor);
-            setQuality = true;
-        }
-
-        if (options.height) {
-            options.height = Math.round(options.height * scaleFactor);
-            setQuality = true;
-        }
-
-        if (setQuality) {
-            var quality;
-            var type = options.type || 'Primary';
-
-            if (browser.tv || browser.slow) {
-                // TODO: wtf
-                if (browser.chrome) {
-                    // webp support
-                    quality = type === 'Primary' ? 40 : 50;
-                } else {
-                    quality = type === 'Backdrop' ? 60 : 50;
-                }
-            } else {
-                quality = type === 'Backdrop' ? 70 : 90;
-            }
-
-            options.quality = quality;
+        if (setQuality && !options.quality) {
+            options.quality = 90;
         }
     }
 

src/components/cardbuilder/card.css

@@ -167,8 +167,9 @@ button::-moz-focus-inner {
     position: relative;
     background-clip: content-box !important;
     color: inherit;
+}
 
-    /* This is only needed for scalable cards */
+.cardScalable .cardImageContainer {
     height: 100%;
     contain: strict;
 }

src/components/cardbuilder/cardBuilder.js

@@ -1310,7 +1310,7 @@ import 'programStyles';
             }
 
             const mediaSourceCount = item.MediaSourceCount || 1;
-            if (mediaSourceCount > 1) {
+            if (mediaSourceCount > 1 && options.disableIndicators !== true) {
                 innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
             }
 
@@ -1391,34 +1391,44 @@ import 'programStyles';
             cardBoxClose = '</div>';
             cardScalableClose = '</div>';
 
-            let indicatorsHtml = '';
+            if (options.disableIndicators !== true) {
+                let indicatorsHtml = '';
 
-            if (options.missingIndicator !== false) {
-                indicatorsHtml += indicators.getMissingIndicator(item);
-            }
+                if (options.missingIndicator !== false) {
+                    indicatorsHtml += indicators.getMissingIndicator(item);
+                }
 
-            indicatorsHtml += indicators.getSyncIndicator(item);
-            indicatorsHtml += indicators.getTimerIndicator(item);
+                indicatorsHtml += indicators.getSyncIndicator(item);
+                indicatorsHtml += indicators.getTimerIndicator(item);
 
-            indicatorsHtml += indicators.getTypeIndicator(item);
+                indicatorsHtml += indicators.getTypeIndicator(item);
 
-            if (options.showGroupCount) {
+                if (options.showGroupCount) {
 
-                indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
-                    minCount: 1
-                });
-            } else {
-                indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
-            }
+                    indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
+                        minCount: 1
+                    });
+                } else {
+                    indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
+                }
 
+<<<<<<< HEAD
             if (item.Type === 'CollectionFolder' || item.CollectionType) {
                 const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
                 indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
                 importRefreshIndicator();
             }
+=======
+                if (item.Type === 'CollectionFolder' || item.CollectionType) {
+                    const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
+                    indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
+                    requireRefreshIndicator();
+                }
+>>>>>>> upstream/master
 
-            if (indicatorsHtml) {
-                cardImageContainerOpen += '<div class="cardIndicators">' + indicatorsHtml + '</div>';
+                if (indicatorsHtml) {
+                    cardImageContainerOpen += '<div class="cardIndicators">' + indicatorsHtml + '</div>';
+                }
             }
 
             if (!imgUrl) {
@@ -1466,8 +1476,8 @@ import 'programStyles';
 
             let additionalCardContent = '';
 
-            if (layoutManager.desktop) {
-                additionalCardContent += getHoverMenuHtml(item, action);
+            if (layoutManager.desktop && !options.disableHoverMenu) {
+                additionalCardContent += getHoverMenuHtml(item, action, options);
             }
 
             return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + ' data-prefix="' + prefix + '" class="' + className + '">' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
@@ -1477,9 +1487,10 @@ import 'programStyles';
          * Generates HTML markup for the card overlay.
          * @param {object} item - Item used to generate the card overlay.
          * @param {string} action - Action assigned to the overlay.
+         * @param {Array} options - Card builder options.
          * @returns {string} HTML markup of the card overlay.
          */
-        function getHoverMenuHtml(item, action) {
+        function getHoverMenuHtml(item, action, options) {
             let html = '';
 
             html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
@@ -1508,7 +1519,6 @@ import 'programStyles';
             }
 
             html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert"></span></button>';
-
             html += '</div>';
             html += '</div>';
 
@@ -1532,6 +1542,8 @@ import 'programStyles';
                 case 'MusicArtist':
                 case 'Person':
                     return '<span class="cardImageIcon material-icons person"></span>';
+                case 'Audio':
+                    return '<span class="cardImageIcon material-icons audiotrack"></span>';
                 case 'Movie':
                     return '<span class="cardImageIcon material-icons movie"></span>';
                 case 'Series':
@@ -1540,6 +1552,12 @@ import 'programStyles';
                     return '<span class="cardImageIcon material-icons book"></span>';
                 case 'Folder':
                     return '<span class="cardImageIcon material-icons folder"></span>';
+                case 'BoxSet':
+                    return '<span class="cardImageIcon material-icons collections"></span>';
+                case 'Playlist':
+                    return '<span class="cardImageIcon material-icons view_list"></span>';
+                case 'PhotoAlbum':
+                    return '<span class="cardImageIcon material-icons photo_album"></span>';
             }
 
             if (options && options.defaultCardImageIcon) {

src/components/groupedcards.js

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

src/components/guide/guide.js

@@ -1,4 +1,4 @@
-define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-programcell', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'registerElement'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) {
+define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-programcell', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'webcomponents'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) {
     'use strict';
 
     function showViewSettings(instance) {

src/components/images/imageLoader.js

@@ -12,7 +12,7 @@ import 'css!./style';
         fillImageElement(elem, source);
     }
 
-    async function itemBlurhashing(target, blurhashstr) {
+    function itemBlurhashing(target, blurhashstr) {
         if (blurhash.isBlurhashValid(blurhashstr)) {
             // Although the default values recommended by Blurhash developers is 32x32, a size of 18x18 seems to be the sweet spot for us,
             // improving the performance and reducing the memory usage, while retaining almost full blur quality.
@@ -36,24 +36,18 @@ import 'css!./style';
             imgData.data.set(pixels);
             ctx.putImageData(imgData, 0, 0);
 
-            let child = target.appendChild(canvas);
-            child.classList.add('blurhash-canvas');
-            child.style.opacity = 1;
-            if (userSettings.enableFastFadein()) {
-                child.classList.add('lazy-blurhash-fadein-fast');
-            } else {
-                child.classList.add('lazy-blurhash-fadein');
-            }
+            requestAnimationFrame(() => {
+                canvas.classList.add('blurhash-canvas');
+                if (userSettings.enableFastFadein()) {
+                    canvas.classList.add('lazy-blurhash-fadein-fast');
+                } else {
+                    canvas.classList.add('lazy-blurhash-fadein');
+                }
 
-            target.classList.add('blurhashed');
-            target.removeAttribute('data-blurhash');
-        }
-    }
-
-    function switchCanvas(elem) {
-        let child = elem.getElementsByClassName('blurhash-canvas')[0];
-        if (child) {
-            child.style.opacity = elem.getAttribute('data-src') ? 1 : 0;
+                target.parentNode.insertBefore(canvas, target);
+                target.classList.add('blurhashed');
+                target.removeAttribute('data-blurhash');
+            });
         }
     }
 
@@ -66,23 +60,16 @@ import 'css!./style';
 
         if (target) {
             source = target.getAttribute('data-src');
-            var blurhashstr = target.getAttribute('data-blurhash');
         } else {
             source = entry;
         }
 
-        if (userSettings.enableBlurhash()) {
-            if (!target.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
-                itemBlurhashing(target, blurhashstr);
-            } else if (!blurhashstr && !target.classList.contains('blurhashed')) {
-                target.classList.add('non-blurhashable');
-            }
-        }
-
         if (entry.intersectionRatio > 0) {
             if (source) fillImageElement(target, source);
         } else if (!source) {
-            emptyImageElement(target);
+            requestAnimationFrame(() => {
+                emptyImageElement(target);
+            });
         }
     }
 
@@ -94,29 +81,24 @@ import 'css!./style';
         let preloaderImg = new Image();
         preloaderImg.src = url;
 
-        // This is necessary here, so changing blurhash settings without reloading the page works
-        if (!userSettings.enableBlurhash() || elem.classList.contains('non-blurhashable')) {
-            elem.classList.add('lazy-hidden');
-        }
+        elem.classList.add('lazy-hidden');
 
         preloaderImg.addEventListener('load', () => {
-            if (elem.tagName !== 'IMG') {
-                elem.style.backgroundImage = "url('" + url + "')";
-            } else {
-                elem.setAttribute('src', url);
-            }
-            elem.removeAttribute('data-src');
+            requestAnimationFrame(() => {
+                if (elem.tagName !== 'IMG') {
+                    elem.style.backgroundImage = "url('" + url + "')";
+                } else {
+                    elem.setAttribute('src', url);
+                }
+                elem.removeAttribute('data-src');
 
-            if (elem.classList.contains('non-blurhashable') || !userSettings.enableBlurhash()) {
                 elem.classList.remove('lazy-hidden');
                 if (userSettings.enableFastFadein()) {
                     elem.classList.add('lazy-image-fadein-fast');
                 } else {
                     elem.classList.add('lazy-image-fadein');
                 }
-            } else {
-                switchCanvas(elem);
-            }
+            });
         });
     }
 
@@ -132,15 +114,21 @@ import 'css!./style';
         }
         elem.setAttribute('data-src', url);
 
-        if (elem.classList.contains('non-blurhashable') || !userSettings.enableBlurhash()) {
-            elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
-            elem.classList.add('lazy-hidden');
-        } else {
-            switchCanvas(elem);
-        }
+        elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
+        elem.classList.add('lazy-hidden');
     }
 
     export function lazyChildren(elem) {
+        if (userSettings.enableBlurhash()) {
+            for (const lazyElem of elem.querySelectorAll('.lazy')) {
+                const blurhashstr = lazyElem.getAttribute('data-blurhash');
+                if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
+                    itemBlurhashing(lazyElem, blurhashstr);
+                } else if (!blurhashstr && !lazyElem.classList.contains('blurhashed')) {
+                    lazyElem.classList.add('non-blurhashable');
+                }
+            }
+        }
         lazyLoader.lazyChildren(elem, fillImage);
     }
 
@@ -212,8 +200,15 @@ import 'css!./style';
         }
     }
 
+    export function setLazyImage(element, url) {
+        element.classList.add('lazy');
+        element.setAttribute('data-src', url);
+        lazyImage(element);
+    }
+
 /* eslint-enable indent */
 export default {
+    serLazyImage: setLazyImage,
     fillImages: fillImages,
     fillImage: fillImage,
     lazyImage: lazyImage,

src/components/images/style.css

@@ -12,12 +12,22 @@
     opacity: 0;
 }
 
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
 .lazy-blurhash-fadein-fast {
-    transition: opacity 0.2s;
+    animation: fadein 0.1s;
 }
 
 .lazy-blurhash-fadein {
-    transition: opacity 0.7s;
+    animation: fadein 0.4s;
 }
 
 .blurhash-canvas {
@@ -28,6 +38,5 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 100;
     pointer-events: none;
 }

src/components/itemContextMenu.js

@@ -38,6 +38,23 @@ import actionsheet from 'actionsheet';
             }
         }
 
+        if (playbackManager.getCurrentPlayer() !== null) {
+            if (options.stopPlayback) {
+                commands.push({
+                    name: globalize.translate('StopPlayback'),
+                    id: 'stopPlayback',
+                    icon: 'stop'
+                });
+            }
+            if (options.clearQueue) {
+                commands.push({
+                    name: globalize.translate('ClearQueue'),
+                    id: 'clearQueue',
+                    icon: 'clear_all'
+                });
+            }
+        }
+
         if (playbackManager.canQueue(item)) {
             if (options.queue !== false) {
                 commands.push({
@@ -54,13 +71,6 @@ import actionsheet from 'actionsheet';
                     icon: 'playlist_add'
                 });
             }
-
-            //if (options.queueAllFromHere) {
-            //    commands.push({
-            //        name: globalize.translate("QueueAllFromHere"),
-            //        id: "queueallfromhere"
-            //    });
-            //}
         }
 
         if (item.IsFolder || item.Type === 'MusicArtist' || item.Type === 'MusicGenre') {
@@ -298,10 +308,11 @@ import actionsheet from 'actionsheet';
                 icon: 'album'
             });
         }
-
-        if (options.openArtist !== false && item.ArtistItems && item.ArtistItems.length) {
+        // Show Album Artist by default, as a song can have multiple artists, which specific one would this option refer to?
+        // Although some albums can have multiple artists, it's not as common as songs.
+        if (options.openArtist !== false && item.AlbumArtists && item.AlbumArtists.length) {
             commands.push({
-                name: globalize.translate('ViewArtist'),
+                name: globalize.translate('ViewAlbumArtist'),
                 id: 'artist',
                 icon: 'person'
             });
@@ -441,6 +452,12 @@ import actionsheet from 'actionsheet';
                     play(item, false, true, true);
                     getResolveFunction(resolve, id)();
                     break;
+                case 'stopPlayback':
+                    playbackManager.stop();
+                    break;
+                case 'clearQueue':
+                    playbackManager.clearQueue();
+                    break;
                 case 'record':
                     import('recordingCreator').then(({default: recordingCreator}) => {
                         recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
@@ -469,7 +486,7 @@ import actionsheet from 'actionsheet';
                     getResolveFunction(resolve, id)();
                     break;
                 case 'artist':
-                    appRouter.showItem(item.ArtistItems[0].Id, item.ServerId);
+                    appRouter.showItem(item.AlbumArtists[0].Id, item.ServerId);
                     getResolveFunction(resolve, id)();
                     break;
                 case 'playallfromhere':

src/components/itemHelper.js

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

src/components/itemidentifier/itemidentifier.js

@@ -240,13 +240,19 @@ import 'cardStyle';
         html += '</div>';
         html += '</div>';
 
+<<<<<<< HEAD
         let numLines = 2;
+=======
+        var numLines = 3;
+>>>>>>> upstream/master
         if (currentItemType === 'MusicAlbum') {
             numLines++;
         }
 
         const lines = [result.Name];
 
+        lines.push(result.SearchProviderName);
+
         if (result.AlbumArtist) {
             lines.push(result.AlbumArtist.Name);
         }

src/components/listview/listview.js

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 /* eslint-disable indent */
 
 /**
@@ -15,6 +16,10 @@ import datetime from 'datetime';
 import 'css!./listview';
 import 'emby-ratingbutton';
 import 'emby-playstatebutton';
+=======
+define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'cardBuilder', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, cardBuilder) {
+    'use strict';
+>>>>>>> upstream/master
 
     function getIndex(item, options) {
 
@@ -106,11 +111,8 @@ import 'emby-playstatebutton';
             itemId = item.ParentPrimaryImageItemId;
         }
 
-        let blurHashes = item.ImageBlurHashes || {};
-        let blurhashstr = (blurHashes[options.type] || {})[options.tag];
-
         if (itemId) {
-            return { url: apiClient.getScaledImageUrl(itemId, options), blurhash: blurhashstr };
+            return apiClient.getScaledImageUrl(itemId, options);
         }
         return null;
     }
@@ -126,24 +128,30 @@ import 'emby-playstatebutton';
         if (item.ChannelId && item.ChannelPrimaryImageTag) {
             options.tag = item.ChannelPrimaryImageTag;
         }
-        let blurHashes = item.ImageBlurHashes || {};
-        let blurhashstr = (blurHashes[options.type])[options.tag];
 
         if (item.ChannelId) {
-            return { url: apiClient.getScaledImageUrl(item.ChannelId, options), blurhash: blurhashstr };
+            return apiClient.getScaledImageUrl(item.ChannelId, options);
         }
     }
 
     function getTextLinesHtml(textlines, isLargeStyle) {
+<<<<<<< HEAD
 
         let html = '';
+=======
+        var html = '';
+>>>>>>> upstream/master
 
         const largeTitleTagName = layoutManager.tv ? 'h2' : 'div';
 
+<<<<<<< HEAD
         for (let i = 0, length = textlines.length; i < length; i++) {
 
             const text = textlines[i];
 
+=======
+        for (const [i, text] of textlines.entries()) {
+>>>>>>> upstream/master
             if (!text) {
                 continue;
             }
@@ -284,10 +292,8 @@ import 'emby-playstatebutton';
             }
 
             if (options.image !== false) {
-                let imgData = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
-                let imgUrl = imgData.url;
-                let blurhash = imgData.blurhash;
-                let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
+                var imgUrl = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
+                var imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
 
                 if (isLargeStyle && layoutManager.tv) {
                     imageClass += ' listItemImage-large-tv';
@@ -299,6 +305,7 @@ import 'emby-playstatebutton';
                     imageClass += ' itemAction';
                 }
 
+<<<<<<< HEAD
                 const imageAction = playOnImageClick ? 'resume' : action;
 
                 let blurhashAttrib = '';
@@ -310,6 +317,14 @@ import 'emby-playstatebutton';
                     html += `<div data-action="${imageAction}" class="${imageClass} lazy" data-src="${imgUrl}" ${blurhashAttrib} item-icon>`;
                 } else {
                     html += `<div class="${imageClass}">`;
+=======
+                var imageAction = playOnImageClick ? 'link' : action;
+
+                if (imgUrl) {
+                    html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>';
+                } else {
+                    html += '<div class="' + imageClass + ' cardImageContainer ' + cardBuilder.getDefaultBackgroundClass(item.Name) + '">' + cardBuilder.getDefaultText(item, options);
+>>>>>>> upstream/master
                 }
 
                 let indicatorsHtml = '';
@@ -449,8 +464,6 @@ import 'emby-playstatebutton';
 
             html += `<div class="${cssClass}">`;
 
-            const moreIcon = 'more_vert';
-
             html += getTextLinesHtml(textlines, isLargeStyle);
 
             if (options.mediaInfo !== false) {
@@ -505,10 +518,13 @@ import 'emby-playstatebutton';
                     html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><span class="material-icons playlist_add"></span></button>';
                 }
 
+<<<<<<< HEAD
                 if (options.moreButton !== false) {
                     html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons ${moreIcon}"></span></button>`;
                 }
 
+=======
+>>>>>>> upstream/master
                 if (options.infoButton) {
                     html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><span class="material-icons info_outline"></span></button>';
                 }
@@ -522,13 +538,26 @@ import 'emby-playstatebutton';
                     const userData = item.UserData || {};
                     const likes = userData.Likes == null ? '' : userData.Likes;
 
+<<<<<<< HEAD
                     if (itemHelper.canMarkPlayed(item)) {
                         html += `<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="${item.Id}" data-serverid="${item.ServerId}" data-itemtype="${item.Type}" data-played="${userData.Played}"><span class="material-icons check"></span></button>`;
                     }
 
                     if (itemHelper.canRate(item)) {
                         html += `<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="${item.Id}" data-serverid="${item.ServerId}" data-itemtype="${item.Type}" data-likes="${likes}" data-isfavorite="${userData.IsFavorite}"><span class="material-icons favorite"></span></button>`;
+=======
+                    if (itemHelper.canMarkPlayed(item) && options.enablePlayedButton !== false) {
+                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons check"></span></button>';
                     }
+
+                    if (itemHelper.canRate(item) && options.enableRatingButton !== false) {
+                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>';
+>>>>>>> upstream/master
+                    }
+                }
+
+                if (options.moreButton !== false) {
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons more_vert"></span></button>';
                 }
             }
             html += '</div>';

src/components/loading/loading.js

@@ -1,10 +1,6 @@
-define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], function (loadingLegacy, browser) {
+define(['css!./loading'], function () {
     'use strict';
 
-    if (browser.tizen || browser.operaTv || browser.chromecast || browser.orsay || browser.web0s || browser.ps4) {
-        return loadingLegacy;
-    }
-
     var loadingElem;
     var layer1;
     var layer2;

src/components/loading/loadingLegacy.css

@@ -1,10 +0,0 @@
-.loading-spinner {
-    margin-top: -3em;
-    margin-left: -3em;
-    width: 6em;
-    height: 6em;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 9999999;
-}

src/components/loading/loadingLegacy.js

@@ -1,28 +0,0 @@
-define(['require', 'css!./loadingLegacy'], function (require) {
-    'use strict';
-
-    var loadingElem;
-
-    return {
-        show: function () {
-            var elem = loadingElem;
-            if (!elem) {
-                elem = document.createElement('img');
-                elem.src = require.toUrl('.').split('?')[0] + '/loader.gif';
-
-                loadingElem = elem;
-                elem.classList.add('loading-spinner');
-
-                document.body.appendChild(elem);
-            }
-
-            elem.classList.remove('hide');
-        },
-        hide: function () {
-            var elem = loadingElem;
-            if (elem) {
-                elem.classList.add('hide');
-            }
-        }
-    };
-});

src/components/mediainfo/mediainfo.css

@@ -41,6 +41,8 @@
     width: auto !important;
     height: auto !important;
     font-size: 1.4em;
+    margin-right: 0.125em;
+    color: #f2b01e;
 }
 
 .mediaInfoCriticRating {

src/components/metadataEditor/metadataEditor.js

@@ -266,6 +266,43 @@ import 'flexStyles';
         });
     }
 
+    function afterDeleted(context, item) {
+        var parentId = item.ParentId || item.SeasonId || item.SeriesId;
+
+        if (parentId) {
+            reload(context, parentId, item.ServerId);
+        } else {
+            require(['appRouter'], function (appRouter) {
+                appRouter.goHome();
+            });
+        }
+    }
+
+    function showMoreMenu(context, button, user) {
+        require(['itemContextMenu'], function (itemContextMenu) {
+            var item = currentItem;
+
+            itemContextMenu.show({
+                item: item,
+                positionTo: button,
+                edit: false,
+                editImages: true,
+                editSubtitles: true,
+                sync: false,
+                share: false,
+                play: false,
+                queue: false,
+                user: user
+            }).then(function (result) {
+                if (result.deleted) {
+                    afterDeleted(context, item);
+                } else if (result.updated) {
+                    reload(context, item.Id, item.ServerId);
+                }
+            });
+        });
+    }
+
     function onEditorClick(e) {
 
         const btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
@@ -291,7 +328,6 @@ import 'flexStyles';
     }
 
     function init(context, apiClient) {
-
         context.querySelector('.externalIds').addEventListener('click', function (e) {
             const btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId');
             if (btnOpenExternalId) {
@@ -315,13 +351,17 @@ import 'flexStyles';
             closeDialog(false);
         });
 
-        context.querySelector('.btnHeaderSave').addEventListener('click', function (e) {
+        context.querySelector('.btnMore').addEventListener('click', function (e) {
+            getApiClient().getCurrentUser().then(function (user) {
+                showMoreMenu(context, e.target, user);
+            });
+        });
 
+        context.querySelector('.btnHeaderSave').addEventListener('click', function (e) {
             context.querySelector('.btnSave').click();
         });
 
         context.querySelector('#chkLockData').addEventListener('click', function (e) {
-
             if (!e.target.checked) {
                 showElement('.providerSettingsContainer');
             } else {
@@ -1107,6 +1147,7 @@ import 'flexStyles';
                     elem.innerHTML = globalize.translateHtml(template, 'core');
 
                     elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter');
+                    elem.querySelector('.btnClose').classList.add('hide');
                     elem.querySelector('.btnHeaderSave').classList.remove('hide');
                     elem.querySelector('.btnCancel').classList.add('hide');
 

src/components/metadataEditor/metadataEditor.template.html

@@ -8,6 +8,9 @@
             <span class="material-icons check"></span>
             <span>${Save}</span>
         </button>
+        <button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
+            <span class="material-icons more_vert"></span>
+        </button>
         <button is="paper-icon-button-light" class="btnCancel btnClose autoSize" tabindex="-1">
             <span class="material-icons close"></span>
         </button>

src/components/nowPlayingBar/nowPlayingBar.css

@@ -56,8 +56,8 @@
     text-align: left;
     flex-grow: 1;
     font-size: 92%;
-    margin-right: 2.4em;
-    margin-left: 1em;
+    margin-right: 1em;
+    margin-left: 0.5em;
 }
 
 .nowPlayingBarCenter {
@@ -114,8 +114,6 @@
 
 .nowPlayingBarUserDataButtons {
     display: inline-block;
-    margin-left: 1em;
-    margin-right: 1em;
 }
 
 .nowPlayingBarPositionSlider::-webkit-slider-thumb {
@@ -133,33 +131,50 @@
     .toggleRepeatButton {
         display: none !important;
     }
-}
 
-@media all and (max-width: 62em) {
-    .nowPlayingBarCenter .nowPlayingBarCurrentTime {
+    .nowPlayingBar .btnShuffleQueue {
         display: none !important;
     }
 }
 
+@media all and (max-width: 80em) {
+    .nowPlayingBarCenter .nowPlayingBarCurrentTime,
+    .nowPlayingBarCenter .stopButton {
+        display: none !important;
+    }
+
+    .nowPlayingBarInfoContainer {
+        width: 45%;
+    }
+}
+
+.layout-mobile .nowPlayingBarRight button:not(.playPauseButton, .nextTrackButton) {
+    display: none;
+}
+
+.layout-desktop .nowPlayingBarRight .playPauseButton,
+.layout-tv .nowPlayingBarRight .playPauseButton {
+    display: none;
+}
+
+.layout-mobile .nowPlayingBarRight input,
+.layout-mobile .nowPlayingBarRight div {
+    display: none;
+}
+
 @media all and (max-width: 56em) {
     .nowPlayingBarCenter {
         display: none !important;
     }
 }
 
-@media all and (min-width: 56em) {
-    .nowPlayingBarRight .playPauseButton {
-        display: none;
-    }
-}
-
-@media all and (max-width: 36em) {
+@media all and (max-width: 60em) {
     .nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
         display: none !important;
     }
 
     .nowPlayingBarInfoContainer {
-        width: 70%;
+        width: 100%;
     }
 }
 

src/components/nowPlayingBar/nowPlayingBar.js

@@ -62,7 +62,9 @@ import 'emby-ratingbutton';
         html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>';
 
         html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><span class="material-icons stop"></span></button>';
-        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
+        if (!layoutManager.mobile) {
+            html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
+        }
 
         html += '<div class="nowPlayingBarCurrentTime"></div>';
         html += '</div>';
@@ -76,12 +78,17 @@ import 'emby-ratingbutton';
         html += '</div>';
 
         html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><span class="material-icons repeat"></span></button>';
+        html += '<button is="paper-icon-button-light" class="btnShuffleQueue mediaButton"><span class="material-icons shuffle"></span></button>';
 
         html += '<div class="nowPlayingBarUserDataButtons">';
         html += '</div>';
 
         html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>';
-        html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>';
+        if (layoutManager.mobile) {
+            html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
+        } else {
+            html += '<button is="paper-icon-button-light" class="btnToggleContextMenu mediaButton"><span class="material-icons more_vert"></span></button>';
+        }
 
         html += '</div>';
         html += '</div>';
@@ -132,8 +139,13 @@ import 'emby-ratingbutton';
         nowPlayingImageElement = elem.querySelector('.nowPlayingImage');
         nowPlayingTextElement = elem.querySelector('.nowPlayingBarText');
         nowPlayingUserData = elem.querySelector('.nowPlayingBarUserDataButtons');
-
+        positionSlider = elem.querySelector('.nowPlayingBarPositionSlider');
         muteButton = elem.querySelector('.muteButton');
+        playPauseButtons = elem.querySelectorAll('.playPauseButton');
+        toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
+        volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider');
+        volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer');
+
         muteButton.addEventListener('click', function () {
 
             if (currentPlayer) {
@@ -149,7 +161,6 @@ import 'emby-ratingbutton';
             }
         });
 
-        playPauseButtons = elem.querySelectorAll('.playPauseButton');
         playPauseButtons.forEach((button) => {
             button.addEventListener('click', onPlayPauseClick);
         });
@@ -161,54 +172,59 @@ import 'emby-ratingbutton';
             }
         });
 
-        elem.querySelector('.previousTrackButton').addEventListener('click', function () {
+        elem.querySelector('.previousTrackButton').addEventListener('click', function (e) {
+            if (currentPlayer) {
+                if (lastPlayerState.NowPlayingItem.MediaType === 'Audio' && (currentPlayer._currentTime >= 5 || !playbackManager.previousTrack(currentPlayer))) {
+                    // Cancel this event if doubleclick is fired
+                    if (e.detail > 1 && playbackManager.previousTrack(currentPlayer)) {
+                        return;
+                    }
+                    playbackManager.seekPercent(0, currentPlayer);
+                    // This is done automatically by playbackManager, however, setting this here gives instant visual feedback.
+                    // TODO: Check why seekPercentage doesn't reflect the changes inmmediately, so we can remove this workaround.
+                    positionSlider.value = 0;
+                } else {
+                    playbackManager.previousTrack(currentPlayer);
+                }
+            }
+        });
 
+        elem.querySelector('.previousTrackButton').addEventListener('dblclick', function () {
             if (currentPlayer) {
                 playbackManager.previousTrack(currentPlayer);
             }
         });
 
+        elem.querySelector('.btnShuffleQueue').addEventListener('click', function () {
+            if (currentPlayer) {
+                playbackManager.toggleQueueShuffleMode();
+            }
+        });
+
         toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
         toggleRepeatButton.addEventListener('click', function () {
-
-            if (currentPlayer) {
-
-                switch (playbackManager.getRepeatMode(currentPlayer)) {
-                    case 'RepeatAll':
-                        playbackManager.setRepeatMode('RepeatOne', currentPlayer);
-                        break;
-                    case 'RepeatOne':
-                        playbackManager.setRepeatMode('RepeatNone', currentPlayer);
-                        break;
-                    default:
-                        playbackManager.setRepeatMode('RepeatAll', currentPlayer);
-                        break;
-                }
+            switch (playbackManager.getRepeatMode()) {
+                case 'RepeatAll':
+                    playbackManager.setRepeatMode('RepeatOne');
+                    break;
+                case 'RepeatOne':
+                    playbackManager.setRepeatMode('RepeatNone');
+                    break;
+                case 'RepeatNone':
+                    playbackManager.setRepeatMode('RepeatAll');
             }
         });
 
         toggleRepeatButtonIcon = toggleRepeatButton.querySelector('.material-icons');
 
-        volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider');
-        volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer');
+        volumeSliderContainer.classList.toggle('hide', appHost.supports('physicalvolumecontrol'));
 
-        if (appHost.supports('physicalvolumecontrol')) {
-            volumeSliderContainer.classList.add('hide');
-        } else {
-            volumeSliderContainer.classList.remove('hide');
-        }
-
-        function setVolume() {
+        volumeSlider.addEventListener('input', (e) => {
             if (currentPlayer) {
-                currentPlayer.setVolume(this.value);
+                currentPlayer.setVolume(e.target.value);
             }
-        }
+        });
 
-        volumeSlider.addEventListener('change', setVolume);
-        volumeSlider.addEventListener('mousemove', setVolume);
-        volumeSlider.addEventListener('touchmove', setVolume);
-
-        positionSlider = elem.querySelector('.nowPlayingBarPositionSlider');
         positionSlider.addEventListener('change', function () {
 
             if (currentPlayer) {
@@ -277,6 +293,11 @@ import 'emby-ratingbutton';
                 parentContainer.insertAdjacentHTML('afterbegin', getNowPlayingBarHtml());
                 nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
 
+                if (layoutManager.mobile) {
+                    hideButton(nowPlayingBarElement.querySelector('.btnShuffleQueue'));
+                    hideButton(nowPlayingBarElement.querySelector('.nowPlayingBarCenter'));
+                }
+
                 if (browser.safari && browser.slow) {
                     // Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.
                     nowPlayingBarElement.classList.add('noMediaProgress');
@@ -329,7 +350,8 @@ import 'emby-ratingbutton';
             toggleRepeatButton.classList.remove('hide');
         }
 
-        updateRepeatModeDisplay(playState.RepeatMode);
+        updateRepeatModeDisplay(playbackManager.getRepeatMode());
+        onQueueShuffleModeChange();
 
         updatePlayerVolumeState(playState.IsMuted, playState.VolumeLevel);
 
@@ -349,32 +371,39 @@ import 'emby-ratingbutton';
 
     function updateRepeatModeDisplay(repeatMode) {
         toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one');
+        const cssClass = 'buttonActive';
 
-        if (repeatMode === 'RepeatAll') {
-            toggleRepeatButtonIcon.classList.add('repeat');
-            toggleRepeatButton.classList.add('repeatButton-active');
-        } else if (repeatMode === 'RepeatOne') {
-            toggleRepeatButtonIcon.classList.add('repeat_one');
-            toggleRepeatButton.classList.add('repeatButton-active');
-        } else {
-            toggleRepeatButtonIcon.classList.add('repeat');
-            toggleRepeatButton.classList.remove('repeatButton-active');
+        switch (repeatMode) {
+            case 'RepeatAll':
+                toggleRepeatButtonIcon.classList.add('repeat');
+                toggleRepeatButton.classList.add(cssClass);
+                break;
+            case 'RepeatOne':
+                toggleRepeatButtonIcon.classList.add('repeat_one');
+                toggleRepeatButton.classList.add(cssClass);
+                break;
+            case 'RepeatNone':
+            default:
+                toggleRepeatButtonIcon.classList.add('repeat');
+                toggleRepeatButton.classList.remove(cssClass);
+                break;
         }
     }
 
     function updateTimeDisplay(positionTicks, runtimeTicks, bufferedRanges) {
-
         // See bindEvents for why this is necessary
         if (positionSlider && !positionSlider.dragging) {
             if (runtimeTicks) {
+<<<<<<< HEAD
 
                 let pct = positionTicks / runtimeTicks;
+=======
+                var pct = positionTicks / runtimeTicks;
+>>>>>>> upstream/master
                 pct *= 100;
 
                 positionSlider.value = pct;
-
             } else {
-
                 positionSlider.value = 0;
             }
         }
@@ -384,9 +413,13 @@ import 'emby-ratingbutton';
         }
 
         if (currentTimeElement) {
+<<<<<<< HEAD
 
             let timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
 
+=======
+            var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
+>>>>>>> upstream/master
             if (runtimeTicks) {
                 timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks);
             }
@@ -428,11 +461,7 @@ import 'emby-ratingbutton';
         // See bindEvents for why this is necessary
         if (volumeSlider) {
 
-            if (showVolumeSlider) {
-                volumeSliderContainer.classList.remove('hide');
-            } else {
-                volumeSliderContainer.classList.add('hide');
-            }
+            volumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
 
             if (!volumeSlider.dragging) {
                 volumeSlider.value = volumeLevel || 0;
@@ -440,15 +469,6 @@ import 'emby-ratingbutton';
         }
     }
 
-    function getTextActionButton(item, text) {
-
-        if (!text) {
-            text = itemHelper.getDisplayName(item);
-        }
-
-        return `<a>${text}</a>`;
-    }
-
     function seriesImageUrl(item, options) {
 
         if (!item) {
@@ -520,6 +540,7 @@ import 'emby-ratingbutton';
 
         const nowPlayingItem = state.NowPlayingItem;
 
+<<<<<<< HEAD
         const textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : [];
         if (textLines.length > 1) {
             textLines[1].secondary = true;
@@ -536,6 +557,31 @@ import 'emby-ratingbutton';
             return `<div ${cssClass}>${nowPlayingText}</div>`;
 
         }).join('');
+=======
+        var textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : [];
+        nowPlayingTextElement.innerHTML = '';
+        if (textLines) {
+            let itemText = document.createElement('div');
+            let secondaryText = document.createElement('div');
+            secondaryText.classList.add('nowPlayingBarSecondaryText');
+            if (textLines.length > 1) {
+                textLines[1].secondary = true;
+                if (textLines[1].text) {
+                    let text = document.createElement('a');
+                    text.innerHTML = textLines[1].text;
+                    secondaryText.appendChild(text);
+                }
+            }
+
+            if (textLines[0].text) {
+                let text = document.createElement('a');
+                text.innerHTML = textLines[0].text;
+                itemText.appendChild(text);
+            }
+            nowPlayingTextElement.appendChild(itemText);
+            nowPlayingTextElement.appendChild(secondaryText);
+        }
+>>>>>>> upstream/master
 
         const imgHeight = 70;
 
@@ -553,8 +599,12 @@ import 'emby-ratingbutton';
 
             if (url) {
                 imageLoader.lazyImage(nowPlayingImageElement, url);
+                nowPlayingImageElement.style.display = null;
+                nowPlayingTextElement.style.marginLeft = null;
             } else {
                 nowPlayingImageElement.style.backgroundImage = '';
+                nowPlayingImageElement.style.display = 'none';
+                nowPlayingTextElement.style.marginLeft = '1em';
             }
         }
 
@@ -563,6 +613,7 @@ import 'emby-ratingbutton';
 
                 const apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
                 apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
+<<<<<<< HEAD
                     const userData = item.UserData || {};
                     const likes = userData.Likes == null ? '' : userData.Likes;
                     const contextButton = document.querySelector('.btnToggleContextMenu');
@@ -578,8 +629,32 @@ import 'emby-ratingbutton';
                                 item: item,
                                 user: user
                             }, options ));
+=======
+                    var userData = item.UserData || {};
+                    var likes = userData.Likes == null ? '' : userData.Likes;
+                    if (!layoutManager.mobile) {
+                        let contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
+                        // We remove the previous event listener by replacing the item in each update event
+                        let contextButtonClone = contextButton.cloneNode(true);
+                        contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
+                        contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
+                        let options = {
+                            play: false,
+                            queue: false,
+                            clearQueue: true,
+                            positionTo: contextButton
+                        };
+                        apiClient.getCurrentUser().then(function (user) {
+                            contextButton.addEventListener('click', function () {
+                                itemContextMenu.show(Object.assign({
+                                    item: item,
+                                    user: user
+                                }, options));
+                            });
+>>>>>>> upstream/master
                         });
-                    });
+                    }
+                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>';
                 });
             }
         } else {
@@ -589,25 +664,49 @@ import 'emby-ratingbutton';
 
     function onPlaybackStart(e, state) {
         console.debug('nowplaying event: ' + e.type);
+<<<<<<< HEAD
 
         const player = this;
 
+=======
+        var player = this;
+>>>>>>> upstream/master
         onStateChanged.call(player, e, state);
     }
 
-    function onRepeatModeChange(e) {
-
+    function onRepeatModeChange() {
         if (!isEnabled) {
             return;
         }
 
+<<<<<<< HEAD
         const player = this;
+=======
+        updateRepeatModeDisplay(playbackManager.getRepeatMode());
+    }
 
-        updateRepeatModeDisplay(playbackManager.getRepeatMode(player));
+    function onQueueShuffleModeChange() {
+        if (!isEnabled) {
+            return;
+        }
+>>>>>>> upstream/master
+
+        let shuffleMode = playbackManager.getQueueShuffleMode();
+        let context = nowPlayingBarElement;
+        const cssClass = 'buttonActive';
+        let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
+        switch (shuffleMode) {
+            case 'Shuffle':
+                toggleShuffleButton.classList.add(cssClass);
+                break;
+            case 'Sorted':
+            default:
+                toggleShuffleButton.classList.remove(cssClass);
+                break;
+        }
     }
 
     function showNowPlayingBar() {
-
         if (!isVisibilityAllowed) {
             hideNowPlayingBar();
             return;
@@ -711,6 +810,7 @@ import 'emby-ratingbutton';
             events.off(player, 'playbackstart', onPlaybackStart);
             events.off(player, 'statechange', onPlaybackStart);
             events.off(player, 'repeatmodechange', onRepeatModeChange);
+            events.off(player, 'shufflequeuemodechange', onQueueShuffleModeChange);
             events.off(player, 'playbackstop', onPlaybackStopped);
             events.off(player, 'volumechange', onVolumeChanged);
             events.off(player, 'pause', onPlayPauseStateChanged);
@@ -759,6 +859,7 @@ import 'emby-ratingbutton';
         events.on(player, 'playbackstart', onPlaybackStart);
         events.on(player, 'statechange', onPlaybackStart);
         events.on(player, 'repeatmodechange', onRepeatModeChange);
+        events.on(player, 'shufflequeuemodechange', onQueueShuffleModeChange);
         events.on(player, 'playbackstop', onPlaybackStopped);
         events.on(player, 'volumechange', onVolumeChanged);
         events.on(player, 'pause', onPlayPauseStateChanged);

src/components/playback/playbackmanager.js

@@ -1,9 +1,6 @@
 define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'playQueueManager', 'userSettings', 'globalize', 'connectionManager', 'loading', 'apphost', 'screenfull'], function (events, datetime, appSettings, itemHelper, pluginManager, PlayQueueManager, userSettings, globalize, connectionManager, loading, apphost, screenfull) {
     'use strict';
 
-    /** Delay time in ms for reportPlayback logging */
-    const reportPlaybackLogDelay = 1e3;
-
     function enableLocalPlaylistManagement(player) {
 
         if (player.getPlaylist) {
@@ -43,12 +40,6 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         events.trigger(playbackManagerInstance, 'playerchange', [newPlayer, newTarget, previousPlayer]);
     }
 
-    /** Last invoked method */
-    let reportPlaybackLastMethod;
-
-    /** Last invoke time of method */
-    let reportPlaybackLastTime;
-
     function reportPlayback(playbackManagerInstance, state, player, reportPlaylist, serverId, method, progressEventName) {
 
         if (!serverId) {
@@ -69,14 +60,6 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             addPlaylistToPlaybackReport(playbackManagerInstance, info, player, serverId);
         }
 
-        const now = (new Date).getTime();
-
-        if (method !== reportPlaybackLastMethod || now - (reportPlaybackLastTime || 0) >= reportPlaybackLogDelay) {
-            console.debug(method + '-' + JSON.stringify(info));
-            reportPlaybackLastMethod = method;
-            reportPlaybackLastTime = now;
-        }
-
         var apiClient = connectionManager.getApiClient(serverId);
         var reportPlaybackPromise = apiClient[method](info);
         // Notify that report has been sent
@@ -2097,6 +2080,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 state.PlayState.IsMuted = player.isMuted();
                 state.PlayState.IsPaused = player.paused();
                 state.PlayState.RepeatMode = self.getRepeatMode(player);
+                state.PlayState.ShuffleMode = self.getQueueShuffleMode(player);
                 state.PlayState.MaxStreamingBitrate = self.getMaxStreamingBitrate(player);
 
                 state.PlayState.PositionTicks = getCurrentTicks(player);
@@ -2877,11 +2861,11 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             }
         };
 
-        self.queue = function (options, player) {
+        self.queue = function (options, player = this._currentPlayer) {
             queue(options, '', player);
         };
 
-        self.queueNext = function (options, player) {
+        self.queueNext = function (options, player = this._currentPlayer) {
             queue(options, 'next', player);
         };
 
@@ -2969,6 +2953,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             } else {
                 self._playQueueManager.queue(items);
             }
+            events.trigger(player, 'playlistitemadd');
         }
 
         function onPlayerProgressInterval() {
@@ -3304,6 +3289,11 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             sendProgressUpdate(player, 'repeatmodechange');
         }
 
+        function onShuffleQueueModeChange() {
+            var player = this;
+            sendProgressUpdate(player, 'shufflequeuemodechange');
+        }
+
         function onPlaylistItemMove(e) {
             var player = this;
             sendProgressUpdate(player, 'playlistitemmove', true);
@@ -3358,6 +3348,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 events.on(player, 'unpause', onPlaybackUnpause);
                 events.on(player, 'volumechange', onPlaybackVolumeChange);
                 events.on(player, 'repeatmodechange', onRepeatModeChange);
+                events.on(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
                 events.on(player, 'playlistitemmove', onPlaylistItemMove);
                 events.on(player, 'playlistitemremove', onPlaylistItemRemove);
                 events.on(player, 'playlistitemadd', onPlaylistItemAdd);
@@ -3370,6 +3361,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 events.on(player, 'unpause', onPlaybackUnpause);
                 events.on(player, 'volumechange', onPlaybackVolumeChange);
                 events.on(player, 'repeatmodechange', onRepeatModeChange);
+                events.on(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
                 events.on(player, 'playlistitemmove', onPlaylistItemMove);
                 events.on(player, 'playlistitemremove', onPlaylistItemRemove);
                 events.on(player, 'playlistitemadd', onPlaylistItemAdd);
@@ -3655,6 +3647,14 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         this.seek(parseInt(ticks), player);
     };
 
+    PlaybackManager.prototype.seekMs = function (ms, player) {
+
+        player = player || this._currentPlayer;
+
+        var ticks = ms * 10000;
+        this.seek(ticks, player);
+    };
+
     PlaybackManager.prototype.playTrailers = function (item) {
 
         var player = this._currentPlayer;
@@ -3702,7 +3702,6 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
     };
 
     PlaybackManager.prototype.stop = function (player) {
-
         player = player || this._currentPlayer;
 
         if (player) {
@@ -3811,7 +3810,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         });
     };
 
-    PlaybackManager.prototype.shuffle = function (shuffleItem, player, queryOptions) {
+    PlaybackManager.prototype.shuffle = function (shuffleItem, player) {
 
         player = player || this._currentPlayer;
         if (player && player.shuffle) {
@@ -3878,6 +3877,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 'GoToSearch',
                 'DisplayMessage',
                 'SetRepeatMode',
+                'SetShuffleQueue',
                 'PlayMediaSource',
                 'PlayTrailers'
             ];
@@ -3911,9 +3911,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         return info ? info.supportedCommands : [];
     };
 
-    PlaybackManager.prototype.setRepeatMode = function (value, player) {
-
-        player = player || this._currentPlayer;
+    PlaybackManager.prototype.setRepeatMode = function (value, player = this._currentPlayer) {
         if (player && !enableLocalPlaylistManagement(player)) {
             return player.setRepeatMode(value);
         }
@@ -3922,9 +3920,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         events.trigger(player, 'repeatmodechange');
     };
 
-    PlaybackManager.prototype.getRepeatMode = function (player) {
-
-        player = player || this._currentPlayer;
+    PlaybackManager.prototype.getRepeatMode = function (player = this._currentPlayer) {
         if (player && !enableLocalPlaylistManagement(player)) {
             return player.getRepeatMode();
         }
@@ -3932,6 +3928,52 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         return this._playQueueManager.getRepeatMode();
     };
 
+    PlaybackManager.prototype.setQueueShuffleMode = function (value, player = this._currentPlayer) {
+        if (player && !enableLocalPlaylistManagement(player)) {
+            return player.setQueueShuffleMode(value);
+        }
+
+        this._playQueueManager.setShuffleMode(value);
+        events.trigger(player, 'shufflequeuemodechange');
+    };
+
+    PlaybackManager.prototype.getQueueShuffleMode = function (player = this._currentPlayer) {
+        if (player && !enableLocalPlaylistManagement(player)) {
+            return player.getQueueShuffleMode();
+        }
+
+        return this._playQueueManager.getShuffleMode();
+    };
+
+    PlaybackManager.prototype.toggleQueueShuffleMode = function (player = this._currentPlayer) {
+        let currentvalue;
+        if (player && !enableLocalPlaylistManagement(player)) {
+            currentvalue = player.getQueueShuffleMode();
+            switch (currentvalue) {
+                case 'Shuffle':
+                    player.setQueueShuffleMode('Sorted');
+                    break;
+                case 'Sorted':
+                    player.setQueueShuffleMode('Shuffle');
+                    break;
+                default:
+                    throw new TypeError('current value for shufflequeue is invalid');
+            }
+        } else {
+            this._playQueueManager.toggleShuffleMode();
+        }
+        events.trigger(player, 'shufflequeuemodechange');
+    };
+
+    PlaybackManager.prototype.clearQueue = function (clearCurrentItem = false, player = this._currentPlayer) {
+        if (player && !enableLocalPlaylistManagement(player)) {
+            return player.clearQueue(clearCurrentItem);
+        }
+
+        this._playQueueManager.clearPlaylist(clearCurrentItem);
+        events.trigger(player, 'playlistitemremove');
+    };
+
     PlaybackManager.prototype.trySetActiveDeviceName = function (name) {
 
         name = normalizeName(name);
@@ -4000,6 +4042,9 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             case 'SetRepeatMode':
                 this.setRepeatMode(cmd.Arguments.RepeatMode, player);
                 break;
+            case 'SetShuffleQueue':
+                this.setQueueShuffleMode(cmd.Arguments.ShuffleMode, player);
+                break;
             case 'VolumeUp':
                 this.volumeUp(player);
                 break;

src/components/playback/playqueuemanager.js

@@ -24,8 +24,10 @@ define([], function () {
 
     function PlayQueueManager() {
 
+        this._sortedPlaylist = [];
         this._playlist = [];
         this._repeatMode = 'RepeatNone';
+        this._shuffleMode = 'Sorted';
     }
 
     PlayQueueManager.prototype.getPlaylist = function () {
@@ -56,6 +58,40 @@ define([], function () {
         }
     };
 
+    PlayQueueManager.prototype.shufflePlaylist = function () {
+        this._sortedPlaylist = [];
+        for (const item of this._playlist) {
+            this._sortedPlaylist.push(item);
+        }
+        const currentPlaylistItem = this._playlist.splice(this.getCurrentPlaylistIndex(), 1)[0];
+
+        for (let i = this._playlist.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * i);
+            const temp = this._playlist[i];
+            this._playlist[i] = this._playlist[j];
+            this._playlist[j] = temp;
+        }
+        this._playlist.unshift(currentPlaylistItem);
+        this._shuffleMode = 'Shuffle';
+    };
+
+    PlayQueueManager.prototype.sortShuffledPlaylist = function () {
+        this._playlist = [];
+        for (let item of this._sortedPlaylist) {
+            this._playlist.push(item);
+        }
+        this._sortedPlaylist = [];
+        this._shuffleMode = 'Sorted';
+    };
+
+    PlayQueueManager.prototype.clearPlaylist = function (clearCurrentItem = false) {
+        const currentPlaylistItem = this._playlist.splice(this.getCurrentPlaylistIndex(), 1)[0];
+        this._playlist = [];
+        if (!clearCurrentItem) {
+            this._playlist.push(currentPlaylistItem);
+        }
+    };
+
     function arrayInsertAt(destArray, pos, arrayToInsert) {
         var args = [];
         args.push(pos); // where to insert
@@ -116,9 +152,7 @@ define([], function () {
 
     PlayQueueManager.prototype.removeFromPlaylist = function (playlistItemIds) {
 
-        var playlist = this.getPlaylist();
-
-        if (playlist.length <= playlistItemIds.length) {
+        if (this._playlist.length <= playlistItemIds.length) {
             return {
                 result: 'empty'
             };
@@ -127,8 +161,12 @@ define([], function () {
         var currentPlaylistItemId = this.getCurrentPlaylistItemId();
         var isCurrentIndex = playlistItemIds.indexOf(currentPlaylistItemId) !== -1;
 
-        this._playlist = playlist.filter(function (item) {
-            return playlistItemIds.indexOf(item.PlaylistItemId) === -1;
+        this._sortedPlaylist = this._sortedPlaylist.filter(function (item) {
+            return !playlistItemIds.includes(item.PlaylistItemId);
+        });
+
+        this._playlist = this._playlist.filter(function (item) {
+            return !playlistItemIds.includes(item.PlaylistItemId);
         });
 
         return {
@@ -176,21 +214,56 @@ define([], function () {
 
     PlayQueueManager.prototype.reset = function () {
 
+        this._sortedPlaylist = [];
         this._playlist = [];
         this._currentPlaylistItemId = null;
         this._repeatMode = 'RepeatNone';
+        this._shuffleMode = 'Sorted';
     };
 
     PlayQueueManager.prototype.setRepeatMode = function (value) {
-
-        this._repeatMode = value;
+        const repeatModes = ['RepeatOne', 'RepeatAll', 'RepeatNone'];
+        if (repeatModes.includes(value)) {
+            this._repeatMode = value;
+        } else {
+            throw new TypeError('invalid value provided for setRepeatMode');
+        }
     };
 
     PlayQueueManager.prototype.getRepeatMode = function () {
-
         return this._repeatMode;
     };
 
+    PlayQueueManager.prototype.setShuffleMode = function (value) {
+        switch (value) {
+            case 'Shuffle':
+                this.shufflePlaylist();
+                break;
+            case 'Sorted':
+                this.sortShuffledPlaylist();
+                break;
+            default:
+                throw new TypeError('invalid value provided to setShuffleMode');
+        }
+    };
+
+    PlayQueueManager.prototype.toggleShuffleMode = function () {
+        switch (this._shuffleMode) {
+            case 'Shuffle':
+                this.setShuffleMode('Sorted');
+                break;
+            case 'Sorted':
+                this.setShuffleMode('Shuffle');
+                break;
+            default:
+                throw new TypeError('current value for shufflequeue is invalid');
+        }
+    };
+
+    PlayQueueManager.prototype.getShuffleMode = function () {
+        return this._shuffleMode;
+    };
+
     PlayQueueManager.prototype.getNextItemInfo = function () {
 
         var newIndex;

src/components/playerstats/playerstats.js

@@ -415,7 +415,8 @@ import 'css!./playerstats';
                 name: 'Original Media Info'
             });
 
-            if (syncPlayManager.isSyncPlayEnabled()) {
+            var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
+            if (syncPlayManager.isSyncPlayEnabled() && apiClient.isMinServerVersion('10.6.0')) {
                 categories.push({
                     stats: getSyncPlayStats(),
                     name: 'SyncPlay Info'

src/components/remotecontrol/remotecontrol.css

@@ -157,43 +157,110 @@
 }
 
 .nowPlayingSecondaryButtons {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
     justify-content: flex-end;
     z-index: 0;
 }
 
+.layout-mobile .playlistSectionButtonTransparent {
+    background: rgba(0, 0, 0, 0) !important;
+}
+
+.layout-mobile .playlistSection .playlist,
+.layout-mobile .playlistSection .contextMenu {
+    position: absolute;
+    top: 12.2em;
+    bottom: 4.2em;
+    overflow: scroll;
+    padding: 0 1em;
+    display: inline-block;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.layout-mobile .playlistSectionButton {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    height: 4.2em;
+    right: 0;
+    padding-left: 7.3%;
+    padding-right: 7.3%;
+}
+
+.layout-desktop .playlistSectionButton,
+.layout-tv .playlistSectionButton {
+    background: none;
+}
+
+.layout-desktop .nowPlayingPlaylist,
+.layout-tv .nowPlayingPlaylist {
+    background: none;
+}
+
+.layout-mobile .playlistSectionButton .btnTogglePlaylist {
+    font-size: larger;
+    margin: 0;
+}
+
+.layout-mobile .playlistSectionButton .btnSavePlaylist {
+    margin: 0;
+    border-radius: 0;
+}
+
+.layout-mobile .playlistSectionButton .volumecontrol {
+    margin: 0;
+    padding-right: 0;
+    border-radius: 0;
+}
+
+.layout-mobile .playlistSectionButton .btnToggleContextMenu {
+    font-size: larger;
+    margin: 0;
+}
+
+.layout-mobile .nowPlayingSecondaryButtons .btnShuffleQueue {
+    display: none;
+}
+
+.layout-mobile .nowPlayingSecondaryButtons .volumecontrol {
+    display: none;
+}
+
+.layout-mobile .nowPlayingSecondaryButtons .btnRepeat {
+    display: none;
+}
+
+.layout-desktop .nowPlayingInfoButtons .btnRepeat,
+.layout-tv .nowPlayingInfoButtons .btnRepeat {
+    display: none;
+}
+
+.layout-desktop .nowPlayingInfoButtons .btnShuffleQueue,
+.layout-tv .nowPlayingInfoButtons .btnShuffleQueue {
+    display: none;
+}
+
+.layout-desktop .playlistSectionButton .volumecontrol,
+.layout-tv .playlistSectionButton .volumecontrol {
+    display: none;
+}
+
+.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
+    display: none;
+}
+
+.layout-mobile .nowPlayingPageUserDataButtons {
+    display: none;
+}
+
 @media all and (min-width: 63em) {
     .nowPlayingPage {
         padding: 8em 0 0 0 !important;
     }
-
-    .nowPlayingSecondaryButtons {
-        -webkit-box-flex: 1;
-        -webkit-flex-grow: 1;
-        flex-grow: 1;
-        -webkit-box-pack: end;
-        -webkit-justify-content: flex-end;
-        justify-content: flex-end;
-    }
-
-    .nowPlayingPageUserDataButtonsTitle {
-        display: none !important;
-    }
-
-    .playlistSectionButton,
-    .nowPlayingPlaylist,
-    .nowPlayingContextMenu {
-        background: unset !important;
-    }
 }
 
 @media all and (min-width: 80em) {
@@ -202,7 +269,7 @@
     }
 }
 
-@media all and (orientation: portrait) and (max-width: 47em) {
+@media all and (orientation: portrait) and (max-width: 43em) {
     .remoteControlContent {
         padding-left: 7.3% !important;
         padding-right: 7.3% !important;
@@ -211,6 +278,10 @@
         flex-direction: column;
     }
 
+    .layout-desktop .nowPlayingPageUserDataButtons {
+        display: none;
+    }
+
     .nowPlayingInfoContainer {
         -webkit-box-orient: vertical !important;
         -webkit-box-direction: normal !important;
@@ -280,6 +351,7 @@
     .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
         width: 20%;
         font-size: large;
+        display: unset;
     }
 
     .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
@@ -290,7 +362,7 @@
         border-radius: 0;
     }
 
-    .nowPlayingInfoButtons .btnRewind {
+    .nowPlayingInfoButtons .btnRepeat {
         position: absolute;
         left: 0;
         margin-left: 0;
@@ -298,7 +370,7 @@
         font-size: smaller;
     }
 
-    .nowPlayingInfoButtons .btnFastForward {
+    .nowPlayingInfoButtons .btnShuffleQueue {
         position: absolute;
         right: 0;
         margin-right: 0;
@@ -342,250 +414,6 @@
         width: auto;
     }
 
-    #nowPlayingPage .playlistSection .playlist,
-    #nowPlayingPage .playlistSection .contextMenu {
-        position: absolute;
-        top: 12.2em;
-        bottom: 4.2em;
-        overflow: scroll;
-        padding: 0 1em;
-        display: inline-block;
-        left: 0;
-        right: 0;
-        z-index: 1000;
-    }
-
-    .playlistSectionButton {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        height: 4.2em;
-        right: 0;
-        padding-left: 7.3%;
-        padding-right: 7.3%;
-    }
-
-    .playlistSectionButton .btnTogglePlaylist {
-        font-size: larger;
-        margin: 0;
-        padding-left: 0;
-    }
-
-    .playlistSectionButton .btnSavePlaylist {
-        margin: 0;
-        padding-right: 0;
-        -webkit-box-flex: 1;
-        -webkit-flex-grow: 1;
-        flex-grow: 1;
-        -webkit-box-pack: end;
-        -webkit-justify-content: flex-end;
-        justify-content: flex-end;
-        border-radius: 0;
-    }
-
-    .playlistSectionButton .btnToggleContextMenu {
-        font-size: larger;
-        margin: 0;
-        padding-right: 0;
-        -webkit-box-flex: 1;
-        -webkit-flex-grow: 1;
-        flex-grow: 1;
-        -webkit-box-pack: end;
-        -webkit-justify-content: flex-end;
-        justify-content: flex-end;
-        border-radius: 0;
-    }
-
-    .playlistSectionButton .volumecontrol {
-        width: 100%;
-    }
-
-    .remoteControlSection {
-        margin: 0;
-        padding: 0 0 4.2em 0;
-    }
-
-    .nowPlayingButtonsContainer {
-        display: flex;
-        height: 100%;
-        flex-direction: column;
-    }
-}
-
-@media all and (orientation: landscape) and (max-width: 63em) {
-    .remoteControlContent {
-        padding-left: 4.3% !important;
-        padding-right: 4.3% !important;
-        display: flex;
-        height: 100%;
-        flex-direction: column;
-    }
-
-    .nowPlayingInfoContainer {
-        -webkit-box-orient: horizontal !important;
-        -webkit-box-direction: normal !important;
-        -webkit-flex-direction: row !important;
-        flex-direction: row !important;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
-        align-items: center;
-        width: 100%;
-        height: calc(100% - 4.2em);
-    }
-
-    .nowPlayingPageTitle {
-        /* text-align: center; */
-        margin: 0;
-    }
-
-    .nowPlayingInfoContainerMedia {
-        text-align: left !important;
-        width: 80%;
-    }
-
-    .nowPlayingPositionSliderContainer {
-        margin: 0.2em 1em 0.2em 1em;
-    }
-
-    .nowPlayingInfoButtons {
-        /* margin: 1.5em 0 0 0; */
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        justify-content: center;
-        font-size: x-large;
-        height: 100%;
-    }
-
-    .nowPlayingPageImageContainer {
-        width: 30%;
-        margin: auto 1em auto auto;
-    }
-
-    .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
-        font-size: 12em;
-        color: inherit;
-    }
-
-    .nowPlayingInfoControls {
-        margin: 0.5em 0 1em 0;
-        width: 100%;
-        -webkit-box-pack: start !important;
-        -webkit-justify-content: start !important;
-        justify-content: start !important;
-    }
-
-    .nowPlayingSecondaryButtons {
-        -webkit-box-flex: 1;
-        -webkit-flex-grow: 1;
-        flex-grow: 1;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        justify-content: center;
-    }
-
-    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
-        width: 20%;
-        font-size: large;
-    }
-
-    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
-        padding-top: 0;
-        padding-right: 0;
-        margin-right: 0;
-        float: right;
-        border-radius: 0;
-    }
-
-    .paper-icon-button-light:hover {
-        color: #fff !important;
-        background-color: transparent !important;
-    }
-
-    .btnPlayPause {
-        padding: 0;
-        margin: 0;
-        font-size: 1.7em;
-    }
-
-    .btnPlayPause:hover {
-        background-color: transparent !important;
-    }
-
-    .nowPlayingPageImage {
-        /* width: inherit; */
-        overflow-y: hidden;
-        overflow: hidden;
-        margin: 0 auto;
-    }
-
-    .nowPlayingPageImage.nowPlayingPageImageAudio {
-        width: 100%;
-    }
-
-    .nowPlayingPageImageContainer.nowPlayingPageImagePoster {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
-        height: 100%;
-        width: auto;
-    }
-
-    #nowPlayingPage .playlistSection .playlist,
-    #nowPlayingPage .playlistSection .contextMenu {
-        position: absolute;
-        top: 7.2em;
-        bottom: 4.2em;
-        overflow: scroll;
-        padding: 0 1em;
-        display: inline-block;
-        left: 0;
-        right: 0;
-        z-index: 1000;
-    }
-
-    .playlistSectionButton {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        height: 4.2em;
-        right: 0;
-        padding-left: 4.3%;
-        padding-right: 4.3%;
-    }
-
-    .playlistSectionButton .btnTogglePlaylist {
-        font-size: larger;
-        margin: 0;
-        padding-left: 0;
-    }
-
-    .playlistSectionButton .btnSavePlaylist {
-        margin: 0;
-        padding-right: 0;
-        -webkit-box-flex: 1;
-        -webkit-flex-grow: 1;
-        flex-grow: 1;
-        -webkit-box-pack: end;
-        -webkit-justify-content: flex-end;
-        justify-content: flex-end;
-        border-radius: 0;
-    }
-
-    .playlistSectionButton .btnToggleContextMenu {
-        font-size: larger;
-        margin: 0;
-        padding-right: 0;
-        -webkit-box-flex: 1;
-        -webkit-flex-grow: 1;
-        flex-grow: 1;
-        -webkit-box-pack: end;
-        -webkit-justify-content: flex-end;
-        justify-content: flex-end;
-        border-radius: 0;
-    }
-
     .playlistSectionButton .volumecontrol {
         width: 100%;
     }
@@ -627,6 +455,10 @@
     background-image: url(../../assets/img/equalizer.gif) !important;
 }
 
+.playlistIndexIndicatorImage > * {
+    display: none;
+}
+
 .hideVideoButtons .videoButton {
     display: none;
 }
@@ -636,7 +468,6 @@
 }
 
 @media all and (max-width: 63em) {
-    .nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons,
     .nowPlayingSecondaryButtons .repeatToggleButton,
     .nowPlayingInfoButtons .playlist .listItemMediaInfo,
     .nowPlayingInfoButtons .btnStop {

src/components/remotecontrol/remotecontrol.js

@@ -1,5 +1,7 @@
-define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'layoutManager', 'userSettings', 'cardBuilder', 'cardStyle', 'emby-itemscontainer', 'css!./remotecontrol.css', 'emby-ratingbutton'], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder) {
+define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'layoutManager', 'userSettings', 'cardBuilder', 'itemContextMenu', 'cardStyle', 'emby-itemscontainer', 'css!./remotecontrol.css', 'emby-ratingbutton'], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder, itemContextMenu) {
     'use strict';
+    var showMuteButton = true;
+    var showVolumeSlider = true;
 
     function showAudioMenu(context, player, button, item) {
         var currentIndex = playbackManager.getAudioStreamIndex(player);
@@ -118,30 +120,41 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') {
                 var songName = item.Name;
                 if (item.Album != null && item.Artists != null) {
+                    var artistsSeries = '';
                     var albumName = item.Album;
-                    var artistName;
                     if (item.ArtistItems != null) {
-                        artistName = item.ArtistItems[0].Name;
-                        context.querySelector('.nowPlayingAlbum').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}">${albumName}</a>`;
-                        context.querySelector('.nowPlayingArtist').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}">${artistName}</a>`;
-                        context.querySelector('.contextMenuAlbum').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}"><span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons album"></span> ` + globalize.translate('ViewAlbum') + '</a>';
-                        context.querySelector('.contextMenuArtist').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}"><span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons person"></span> ` + globalize.translate('ViewArtist') + '</a>';
-                    } else {
-                        artistName = item.Artists;
-                        context.querySelector('.nowPlayingAlbum').innerHTML = albumName;
-                        context.querySelector('.nowPlayingArtist').innerHTML = artistName;
+                        for (const artist of item.ArtistItems) {
+                            let artistName = artist.Name;
+                            let artistId = artist.Id;
+                            artistsSeries += `<a class="button-link emby-button" is="emby-linkbutton" href="details?id=${artistId}&serverId=${nowPlayingServerId}">${artistName}</a>`;
+                            if (artist !== item.ArtistItems.slice(-1)[0]) {
+                                artistsSeries += ', ';
+                            }
+                        }
+                    } else if (item.Artists) {
+                        // For some reason, Chromecast Player doesn't return a item.ArtistItems object, so we need to fallback
+                        // to normal item.Artists item.
+                        // TODO: Normalise fields returned by all the players
+                        for (const artist of item.Artists) {
+                            artistsSeries += `<a>${artist}</a>`;
+                            if (artist !== item.Artists.slice(-1)[0]) {
+                                artistsSeries += ', ';
+                            }
+                        }
                     }
+                    context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries;
+                    context.querySelector('.nowPlayingAlbum').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.AlbumId + `&serverId=${nowPlayingServerId}">${albumName}</a>`;
                 }
                 context.querySelector('.nowPlayingSongName').innerHTML = songName;
             } else if (item.Type == 'Episode') {
                 if (item.SeasonName != null) {
                     var seasonName = item.SeasonName;
-                    context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeasonId + `&amp;serverId=${nowPlayingServerId}">${seasonName}</a>`;
+                    context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeasonId + `&serverId=${nowPlayingServerId}">${seasonName}</a>`;
                 }
                 if (item.SeriesName != null) {
                     var seriesName = item.SeriesName;
                     if (item.SeriesId != null) {
-                        context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeriesId + `&amp;serverId=${nowPlayingServerId}">${seriesName}</a>`;
+                        context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeriesId + `&serverId=${nowPlayingServerId}">${seriesName}</a>`;
                     } else {
                         context.querySelector('.nowPlayingSerie').innerHTML = seriesName;
                     }
@@ -163,11 +176,38 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 maxHeight: 300 * 2
             }) : null;
 
-            console.debug('updateNowPlayingInfo');
+            let contextButton = context.querySelector('.btnToggleContextMenu');
+            // We remove the previous event listener by replacing the item in each update event
+            const autoFocusContextButton = document.activeElement === contextButton;
+            let contextButtonClone = contextButton.cloneNode(true);
+            contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
+            contextButton = context.querySelector('.btnToggleContextMenu');
+            if (autoFocusContextButton) {
+                contextButton.focus();
+            }
+            const stopPlayback = !!layoutManager.mobile;
+            var options = {
+                play: false,
+                queue: false,
+                stopPlayback: stopPlayback,
+                clearQueue: true,
+                openAlbum: false,
+                positionTo: contextButton
+            };
+            var apiClient = connectionManager.getApiClient(item.ServerId);
+            apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
+                apiClient.getCurrentUser().then(function (user) {
+                    contextButton.addEventListener('click', function () {
+                        itemContextMenu.show(Object.assign({
+                            item: fullItem,
+                            user: user
+                        }, options));
+                    });
+                });
+            });
             setImageUrl(context, state, url);
             if (item) {
                 backdrop.setBackdrops([item]);
-                var apiClient = connectionManager.getApiClient(item.ServerId);
                 apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
                     var userData = fullItem.UserData || {};
                     var likes = null == userData.Likes ? '' : userData.Likes;
@@ -219,20 +259,16 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
     var currentImgUrl;
     return function () {
-        function toggleRepeat(player) {
-            if (player) {
-                switch (playbackManager.getRepeatMode(player)) {
-                    case 'RepeatNone':
-                        playbackManager.setRepeatMode('RepeatAll', player);
-                        break;
-
-                    case 'RepeatAll':
-                        playbackManager.setRepeatMode('RepeatOne', player);
-                        break;
-
-                    case 'RepeatOne':
-                        playbackManager.setRepeatMode('RepeatNone', player);
-                }
+        function toggleRepeat() {
+            switch (playbackManager.getRepeatMode()) {
+                case 'RepeatAll':
+                    playbackManager.setRepeatMode('RepeatOne');
+                    break;
+                case 'RepeatOne':
+                    playbackManager.setRepeatMode('RepeatNone');
+                    break;
+                case 'RepeatNone':
+                    playbackManager.setRepeatMode('RepeatAll');
             }
         }
 
@@ -275,8 +311,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             buttonVisible(context.querySelector('.btnStop'), null != item);
             buttonVisible(context.querySelector('.btnNextTrack'), null != item);
             buttonVisible(context.querySelector('.btnPreviousTrack'), null != item);
-            buttonVisible(context.querySelector('.btnRewind'), null != item);
-            buttonVisible(context.querySelector('.btnFastForward'), null != item);
+            if (layoutManager.mobile) {
+                buttonVisible(context.querySelector('.btnRewind'), false);
+                buttonVisible(context.querySelector('.btnFastForward'), false);
+            } else {
+                buttonVisible(context.querySelector('.btnRewind'), null != item);
+                buttonVisible(context.querySelector('.btnFastForward'), null != item);
+            }
             var positionSlider = context.querySelector('.nowPlayingPositionSlider');
 
             if (positionSlider && item && item.RunTimeTicks) {
@@ -300,7 +341,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 context.classList.add('hideVideoButtons');
             }
 
-            updateRepeatModeDisplay(playState.RepeatMode);
+            updateRepeatModeDisplay(playbackManager.getRepeatMode());
+            onShuffleQueueModeChange(false);
             updateNowPlayingInfo(context, state);
         }
 
@@ -316,25 +358,32 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
         function updateRepeatModeDisplay(repeatMode) {
             var context = dlg;
-            var toggleRepeatButton = context.querySelector('.repeatToggleButton');
+            let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
+            const cssClass = 'buttonActive';
+            let innHtml = '<span class="material-icons repeat"></span>';
+            let repeatOn = true;
 
-            if ('RepeatAll' == repeatMode) {
-                toggleRepeatButton.innerHTML = "<span class='material-icons repeat'></span>";
-                toggleRepeatButton.classList.add('repeatButton-active');
-            } else if ('RepeatOne' == repeatMode) {
-                toggleRepeatButton.innerHTML = "<span class='material-icons repeat_one'></span>";
-                toggleRepeatButton.classList.add('repeatButton-active');
-            } else {
-                toggleRepeatButton.innerHTML = "<span class='material-icons repeat'></span>";
-                toggleRepeatButton.classList.remove('repeatButton-active');
+            switch (repeatMode) {
+                case 'RepeatAll':
+                    break;
+                case 'RepeatOne':
+                    innHtml = '<span class="material-icons repeat_one"></span>';
+                    break;
+                case 'RepeatNone':
+                default:
+                    repeatOn = false;
+                    break;
+            }
+
+            for (const toggleRepeatButton of toggleRepeatButtons) {
+                toggleRepeatButton.classList.toggle(cssClass, repeatOn);
+                toggleRepeatButton.innerHTML = innHtml;
             }
         }
 
         function updatePlayerVolumeState(context, isMuted, volumeLevel) {
             var view = context;
             var supportedCommands = currentPlayerSupportedCommands;
-            var showMuteButton = true;
-            var showVolumeSlider = true;
 
             if (-1 === supportedCommands.indexOf('Mute')) {
                 showMuteButton = false;
@@ -362,24 +411,21 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 buttonMuteIcon.classList.add('volume_up');
             }
 
-            if (showMuteButton) {
-                buttonMute.classList.remove('hide');
+            if (!showMuteButton && !showVolumeSlider) {
+                context.querySelector('.volumecontrol').classList.add('hide');
             } else {
-                buttonMute.classList.add('hide');
-            }
+                buttonMute.classList.toggle('hide', !showMuteButton);
 
-            var nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
-            var nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
+                var nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
+                var nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
 
-            if (nowPlayingVolumeSlider) {
-                if (showVolumeSlider) {
-                    nowPlayingVolumeSliderContainer.classList.remove('hide');
-                } else {
-                    nowPlayingVolumeSliderContainer.classList.add('hide');
-                }
+                if (nowPlayingVolumeSlider) {
 
-                if (!nowPlayingVolumeSlider.dragging) {
-                    nowPlayingVolumeSlider.value = volumeLevel || 0;
+                    nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
+
+                    if (!nowPlayingVolumeSlider.dragging) {
+                        nowPlayingVolumeSlider.value = volumeLevel || 0;
+                    }
                 }
             }
         }
@@ -420,11 +466,21 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         function loadPlaylist(context, player) {
             getPlaylistItems(player).then(function (items) {
                 var html = '';
+                let favoritesEnabled = true;
+                if (layoutManager.mobile) {
+                    if (items.length > 0) {
+                        context.querySelector('.btnTogglePlaylist').classList.remove('hide');
+                    } else {
+                        context.querySelector('.btnTogglePlaylist').classList.add('hide');
+                    }
+                    favoritesEnabled = false;
+                }
+
                 html += listView.getListViewHtml({
                     items: items,
                     smallIcon: true,
                     action: 'setplaylistindex',
-                    enableUserDataButtons: false,
+                    enableUserDataButtons: favoritesEnabled,
                     rightButtons: [{
                         icon: 'remove_circle_outline',
                         title: globalize.translate('ButtonRemove'),
@@ -433,18 +489,21 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                     dragHandle: true
                 });
 
-                if (items.length) {
-                    context.querySelector('.btnTogglePlaylist').classList.remove('hide');
-                } else {
-                    context.querySelector('.btnTogglePlaylist').classList.add('hide');
+                var itemsContainer = context.querySelector('.playlist');
+                let focusedItemPlaylistId = itemsContainer.querySelector('button:focus');
+                itemsContainer.innerHTML = html;
+                if (focusedItemPlaylistId !== null) {
+                    focusedItemPlaylistId = focusedItemPlaylistId.getAttribute('data-playlistitemid');
+                    const newFocusedItem = itemsContainer.querySelector(`button[data-playlistitemid="${focusedItemPlaylistId}"]`);
+                    if (newFocusedItem !== null) {
+                        newFocusedItem.focus();
+                    }
                 }
 
-                var itemsContainer = context.querySelector('.playlist');
-                itemsContainer.innerHTML = html;
                 var playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
 
                 if (playlistItemId) {
-                    var img = itemsContainer.querySelector('.listItem[data-playlistItemId="' + playlistItemId + '"] .listItemImage');
+                    var img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
 
                     if (img) {
                         img.classList.remove('lazy');
@@ -453,9 +512,6 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 }
 
                 imageLoader.lazyChildren(itemsContainer);
-                context.querySelector('.playlist').classList.add('hide');
-                context.querySelector('.contextMenu').classList.add('hide');
-                context.querySelector('.btnSavePlaylist').classList.add('hide');
             });
         }
 
@@ -465,9 +521,31 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             onStateChanged.call(player, e, state);
         }
 
-        function onRepeatModeChange(e) {
-            var player = this;
-            updateRepeatModeDisplay(playbackManager.getRepeatMode(player));
+        function onRepeatModeChange() {
+            updateRepeatModeDisplay(playbackManager.getRepeatMode());
+        }
+
+        function onShuffleQueueModeChange(updateView = true) {
+            let shuffleMode = playbackManager.getQueueShuffleMode(this);
+            let context = dlg;
+            const cssClass = 'buttonActive';
+            let shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
+
+            for (let shuffleButton of shuffleButtons) {
+                switch (shuffleMode) {
+                    case 'Shuffle':
+                        shuffleButton.classList.add(cssClass);
+                        break;
+                    case 'Sorted':
+                    default:
+                        shuffleButton.classList.remove(cssClass);
+                        break;
+                }
+            }
+
+            if (updateView) {
+                onPlaylistUpdate();
+            }
         }
 
         function onPlaylistUpdate(e) {
@@ -476,14 +554,18 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
         function onPlaylistItemRemoved(e, info) {
             var context = dlg;
-            var playlistItemIds = info.playlistItemIds;
+            if (info !== undefined) {
+                var playlistItemIds = info.playlistItemIds;
 
-            for (var i = 0, length = playlistItemIds.length; i < length; i++) {
-                var listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
+                for (var i = 0, length = playlistItemIds.length; i < length; i++) {
+                    var listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
 
-                if (listItem) {
-                    listItem.parentNode.removeChild(listItem);
+                    if (listItem) {
+                        listItem.parentNode.removeChild(listItem);
+                    }
                 }
+            } else {
+                onPlaylistUpdate();
             }
         }
 
@@ -493,7 +575,6 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
             if (!state.NextMediaType) {
                 updatePlayerState(player, dlg, {});
-                loadPlaylist(dlg);
                 Emby.Page.back();
             }
         }
@@ -505,7 +586,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         function onStateChanged(event, state) {
             var player = this;
             updatePlayerState(player, dlg, state);
-            loadPlaylist(dlg, player);
+            onPlaylistUpdate();
         }
 
         function onTimeUpdate(e) {
@@ -531,8 +612,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 events.off(player, 'playbackstart', onPlaybackStart);
                 events.off(player, 'statechange', onStateChanged);
                 events.off(player, 'repeatmodechange', onRepeatModeChange);
-                events.off(player, 'playlistitemremove', onPlaylistUpdate);
+                events.off(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
+                events.off(player, 'playlistitemremove', onPlaylistItemRemoved);
                 events.off(player, 'playlistitemmove', onPlaylistUpdate);
+                events.off(player, 'playlistitemadd', onPlaylistUpdate);
                 events.off(player, 'playbackstop', onPlaybackStopped);
                 events.off(player, 'volumechange', onVolumeChanged);
                 events.off(player, 'pause', onPlayPauseStateChanged);
@@ -551,8 +634,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 events.on(player, 'playbackstart', onPlaybackStart);
                 events.on(player, 'statechange', onStateChanged);
                 events.on(player, 'repeatmodechange', onRepeatModeChange);
+                events.on(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
                 events.on(player, 'playlistitemremove', onPlaylistItemRemoved);
                 events.on(player, 'playlistitemmove', onPlaylistUpdate);
+                events.on(player, 'playlistitemadd', onPlaylistUpdate);
                 events.on(player, 'playbackstop', onPlaybackStopped);
                 events.on(player, 'volumechange', onVolumeChanged);
                 events.on(player, 'pause', onPlayPauseStateChanged);
@@ -568,7 +653,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         function onBtnCommandClick() {
             if (currentPlayer) {
                 if (this.classList.contains('repeatToggleButton')) {
-                    toggleRepeat(currentPlayer);
+                    toggleRepeat();
                 } else {
                     playbackManager.sendCommand({
                         Name: this.getAttribute('data-command')
@@ -603,6 +688,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
         function bindEvents(context) {
             var btnCommand = context.querySelectorAll('.btnCommand');
+            var positionSlider = context.querySelector('.nowPlayingPositionSlider');
 
             for (var i = 0, length = btnCommand.length; i < length; i++) {
                 btnCommand[i].addEventListener('click', onBtnCommandClick);
@@ -650,12 +736,37 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                     playbackManager.fastForward(currentPlayer);
                 }
             });
-            context.querySelector('.btnPreviousTrack').addEventListener('click', function () {
+            for (const shuffleButton of context.querySelectorAll('.btnShuffleQueue')) {
+                shuffleButton.addEventListener('click', function () {
+                    if (currentPlayer) {
+                        playbackManager.toggleQueueShuffleMode(currentPlayer);
+                    }
+                });
+            }
+
+            context.querySelector('.btnPreviousTrack').addEventListener('click', function (e) {
+                if (currentPlayer) {
+                    if (lastPlayerState.NowPlayingItem.MediaType === 'Audio' && (currentPlayer._currentTime >= 5 || !playbackManager.previousTrack(currentPlayer))) {
+                        // Cancel this event if doubleclick is fired
+                        if (e.detail > 1 && playbackManager.previousTrack(currentPlayer)) {
+                            return;
+                        }
+                        playbackManager.seekPercent(0, currentPlayer);
+                        // This is done automatically by playbackManager. However, setting this here gives instant visual feedback.
+                        // TODO: Check why seekPercentage doesn't reflect the changes inmmediately, so we can remove this workaround.
+                        positionSlider.value = 0;
+                    } else {
+                        playbackManager.previousTrack(currentPlayer);
+                    }
+                }
+            });
+
+            context.querySelector('.btnPreviousTrack').addEventListener('dblclick', function () {
                 if (currentPlayer) {
                     playbackManager.previousTrack(currentPlayer);
                 }
             });
-            context.querySelector('.nowPlayingPositionSlider').addEventListener('change', function () {
+            positionSlider.addEventListener('change', function () {
                 var value = this.value;
 
                 if (currentPlayer) {
@@ -664,7 +775,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 }
             });
 
-            context.querySelector('.nowPlayingPositionSlider').getBubbleText = function (value) {
+            positionSlider.getBubbleText = function (value) {
                 var state = lastPlayerState;
 
                 if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
@@ -677,13 +788,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 return datetime.getDisplayRunningTime(ticks);
             };
 
-            function setVolume() {
-                playbackManager.setVolume(this.value, currentPlayer);
-            }
+            context.querySelector('.nowPlayingVolumeSlider').addEventListener('input', (e) => {
+                playbackManager.setVolume(e.target.value, currentPlayer);
+            });
 
-            context.querySelector('.nowPlayingVolumeSlider').addEventListener('change', setVolume);
-            context.querySelector('.nowPlayingVolumeSlider').addEventListener('mousemove', setVolume);
-            context.querySelector('.nowPlayingVolumeSlider').addEventListener('touchmove', setVolume);
             context.querySelector('.buttonMute').addEventListener('click', function () {
                 playbackManager.toggleMute(currentPlayer);
             });
@@ -701,21 +809,19 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 if (context.querySelector('.playlist').classList.contains('hide')) {
                     context.querySelector('.playlist').classList.remove('hide');
                     context.querySelector('.btnSavePlaylist').classList.remove('hide');
-                    context.querySelector('.contextMenu').classList.add('hide');
                     context.querySelector('.volumecontrol').classList.add('hide');
+                    if (layoutManager.mobile) {
+                        context.querySelector('.playlistSectionButton').classList.remove('playlistSectionButtonTransparent');
+                    }
                 } else {
                     context.querySelector('.playlist').classList.add('hide');
                     context.querySelector('.btnSavePlaylist').classList.add('hide');
-                    context.querySelector('.volumecontrol').classList.remove('hide');
-                }
-            });
-            context.querySelector('.btnToggleContextMenu').addEventListener('click', function () {
-                if (context.querySelector('.contextMenu').classList.contains('hide')) {
-                    context.querySelector('.contextMenu').classList.remove('hide');
-                    context.querySelector('.btnSavePlaylist').classList.add('hide');
-                    context.querySelector('.playlist').classList.add('hide');
-                } else {
-                    context.querySelector('.contextMenu').classList.add('hide');
+                    if (showMuteButton || showVolumeSlider) {
+                        context.querySelector('.volumecontrol').classList.remove('hide');
+                    }
+                    if (layoutManager.mobile) {
+                        context.querySelector('.playlistSectionButton').classList.add('playlistSectionButtonTransparent');
+                    }
                 }
             });
         }
@@ -764,16 +870,24 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         }
 
         function init(ownerView, context) {
-            let contextmenuHtml = `<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=${globalize.translate('ButtonToggleContextMenu')}><span class="material-icons more_vert"></span></button>`;
             let volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">';
             volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`;
             volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
             volumecontrolHtml += '</div>';
+            let optionsSection = context.querySelector('.playlistSectionButton');
             if (!layoutManager.mobile) {
-                context.querySelector('.nowPlayingSecondaryButtons').innerHTML += volumecontrolHtml;
-                context.querySelector('.playlistSectionButton').innerHTML += contextmenuHtml;
+                context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
+                optionsSection.classList.remove('align-items-center', 'justify-content-center');
+                optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
+                context.querySelector('.playlist').classList.remove('hide');
+                context.querySelector('.btnSavePlaylist').classList.remove('hide');
+                context.classList.add('padded-bottom');
             } else {
-                context.querySelector('.playlistSectionButton').innerHTML += volumecontrolHtml + contextmenuHtml;
+                optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
+                optionsSection.classList.add('playlistSectionButtonTransparent');
+                context.querySelector('.btnTogglePlaylist').classList.remove('hide');
+                context.querySelector('.playlistSectionButton').classList.remove('justify-content-center');
+                context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between');
             }
 
             bindEvents(context);

src/components/search/searchresults.js

@@ -474,7 +474,7 @@ import 'emby-button';
             showTitle: true,
             overlayText: false,
             centerText: true,
-            action: 'play'
+            overlayPlayButton: true
 
         });
 

src/components/slideshow/slideshow.js

@@ -224,6 +224,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             });
 
             inputManager.on(window, onInputCommand);
+            /* eslint-disable-next-line compat/compat */
             document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
 
             dialog.addEventListener('close', onDialogClosed);
@@ -489,6 +490,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             }
 
             inputManager.off(window, onInputCommand);
+            /* eslint-disable-next-line compat/compat */
             document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
             // Shows page scrollbar
             document.body.classList.remove('hide-scroll');

src/components/subtitlesync/subtitlesync.css

@@ -1,12 +1,18 @@
+.subtitleSync {
+    position: absolute;
+    width: 100%;
+}
+
 .subtitleSyncContainer {
     width: 40%;
-    margin-left: 30%;
-    margin-right: 30%;
+    min-width: 18em;
+    margin-left: auto;
+    margin-right: auto;
     height: 4.2em;
     background: rgba(28, 28, 28, 0.8);
     border-radius: 0.3em;
     color: #fff;
-    position: absolute;
+    position: relative;
 }
 
 .subtitleSync-closeButton {

src/components/subtitlesync/subtitlesync.js

@@ -65,6 +65,9 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
                     event.preventDefault();
                 }
             }
+
+            // FIXME: TV layout will require special handling for navigation keys. But now field is not focusable
+            event.stopPropagation();
         });
 
         subtitleSyncTextField.blur = function() {
@@ -87,14 +90,6 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
                 getOffsetFromPercentage(this.value));
         });
 
-        subtitleSyncSlider.addEventListener('touchmove', function () {
-            // set new offset
-            playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
-            // synchronize with textField value
-            subtitleSyncTextField.updateOffset(
-                getOffsetFromPercentage(this.value));
-        });
-
         subtitleSyncSlider.getBubbleHtml = function (value) {
             var newOffset = getOffsetFromPercentage(value);
             return '<h1 class="sliderBubbleText">' +

src/components/subtitlesync/subtitlesync.template.html

@@ -1,7 +1,9 @@
-<div class="subtitleSyncContainer">
-    <button type="button" is="paper-icon-button-light" class="subtitleSync-closeButton"><span class="material-icons close"></span></button>
-    <div class="subtitleSyncTextField" contenteditable="true" spellcheck="false">0s</div>
-    <div class="sliderContainer subtitleSyncSliderContainer">
-        <input is="emby-slider" type="range" step="1" min="0" max="100" value="50" class="subtitleSyncSlider" />
+<div class="subtitleSync">
+    <div class="subtitleSyncContainer">
+        <button type="button" is="paper-icon-button-light" class="subtitleSync-closeButton"><span class="material-icons close"></span></button>
+        <div class="subtitleSyncTextField" contenteditable="true" spellcheck="false">0s</div>
+        <div class="sliderContainer subtitleSyncSliderContainer">
+            <input is="emby-slider" type="range" step="1" min="0" max="100" value="50" class="subtitleSyncSlider" data-slider-keep-progress="true" />
+        </div>
     </div>
 </div>

src/components/syncPlay/groupSelectionMenu.js

@@ -37,7 +37,7 @@ function showNewJoinGroupSelection (button, user, apiClient) {
         console.debug('No item is currently playing.');
     }
 
-    apiClient.sendSyncPlayCommand(sessionId, 'ListGroups').then(function (response) {
+    apiClient.getSyncPlayGroups().then(function (response) {
         response.json().then(function (groups) {
             var menuItems = groups.map(function (group) {
                 return {
@@ -83,9 +83,9 @@ function showNewJoinGroupSelection (button, user, apiClient) {
 
             actionsheet.show(menuOptions).then(function (id) {
                 if (id == 'new-group') {
-                    apiClient.sendSyncPlayCommand(sessionId, 'NewGroup');
-                } else {
-                    apiClient.sendSyncPlayCommand(sessionId, 'JoinGroup', {
+                    apiClient.createSyncPlayGroup();
+                } else if (id) {
+                    apiClient.joinSyncPlayGroup({
                         GroupId: id,
                         PlayingItemId: playingItemId
                     });
@@ -140,7 +140,7 @@ function showLeaveGroupSelection (button, user, apiClient) {
 
     actionsheet.show(menuOptions).then(function (id) {
         if (id == 'leave-group') {
-            apiClient.sendSyncPlayCommand(sessionId, 'LeaveGroup');
+            apiClient.leaveSyncPlayGroup();
         }
     }).catch((error) => {
         console.error('SyncPlay: unexpected error showing group menu:', error);

src/components/syncPlay/syncPlayManager.js

@@ -139,7 +139,7 @@ class SyncPlayManager {
                     return;
                 }
 
-                apiClient.sendSyncPlayCommand(sessionId, 'UpdatePing', {
+                apiClient.sendSyncPlayPing({
                     Ping: ping
                 });
             }
@@ -212,6 +212,7 @@ class SyncPlayManager {
         if (!this.lastPlaybackWaiting) {
             this.lastPlaybackWaiting = new Date();
         }
+
         events.trigger(this, 'waiting');
     }
 
@@ -288,6 +289,7 @@ class SyncPlayManager {
                 player.setPlaybackRate(this.localPlayerPlaybackRate);
                 this.localPlayerPlaybackRate = 1.0;
             }
+
             this.currentPlayer = null;
             this.playbackRateSupported = false;
         }
@@ -433,6 +435,7 @@ class SyncPlayManager {
                     });
                     return;
                 }
+
                 // Get playing item id
                 let playingItemId;
                 try {
@@ -447,7 +450,7 @@ class SyncPlayManager {
                     if (!success) {
                         console.warning('Error reporting playback state to server. Joining group will fail.');
                     }
-                    apiClient.sendSyncPlayCommand(sessionId, 'JoinGroup', {
+                    apiClient.joinSyncPlayGroup({
                         GroupId: groupId,
                         PlayingItemId: playingItemId
                     });
@@ -619,6 +622,7 @@ class SyncPlayManager {
         if (this.currentPlayer) {
             this.currentPlayer.setPlaybackRate(1);
         }
+
         this.clearSyncIcon();
     }
 
@@ -658,8 +662,7 @@ class SyncPlayManager {
      */
     playRequest (player) {
         var apiClient = connectionManager.currentApiClient();
-        var sessionId = getActivePlayerId();
-        apiClient.sendSyncPlayCommand(sessionId, 'PlayRequest');
+        apiClient.requestSyncPlayStart();
     }
 
     /**
@@ -667,8 +670,7 @@ class SyncPlayManager {
      */
     pauseRequest (player) {
         var apiClient = connectionManager.currentApiClient();
-        var sessionId = getActivePlayerId();
-        apiClient.sendSyncPlayCommand(sessionId, 'PauseRequest');
+        apiClient.requestSyncPlayPause();
         // Pause locally as well, to give the user some little control
         playbackManager._localUnpause(player);
     }
@@ -678,8 +680,7 @@ class SyncPlayManager {
      */
     seekRequest (PositionTicks, player) {
         var apiClient = connectionManager.currentApiClient();
-        var sessionId = getActivePlayerId();
-        apiClient.sendSyncPlayCommand(sessionId, 'SeekRequest', {
+        apiClient.requestSyncPlaySeek({
             PositionTicks: PositionTicks
         });
     }