Merge branch 'master' into synchronize-subtitles

src/components/cardbuilder/card.css

@@ -46,9 +46,9 @@ button {
     flex-wrap: wrap;
 }
 
-    .vertical-wrap.centered {
-        justify-content: center;
-    }
+.vertical-wrap.centered {
+    justify-content: center;
+}
 
 .cardScalable {
     position: relative;
@@ -226,10 +226,6 @@ button {
     box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 
-/*.card:focus .cardContent-shadow {
-    box-shadow: 0 .63em 1.26em rgba(0, 0, 0, 0.37);
-}*/
-
 .cardImageContainer {
     display: flex;
 }
@@ -319,6 +315,12 @@ button {
     padding-top: .24em;
 }
 
+.cardText > .textActionButton {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .innerCardFooter > .cardText {
     padding: .3em .5em;
 }
@@ -767,7 +769,7 @@ button {
 }
 
 .cardOverlayContainer {
-    background: radial-gradient(farthest-corner at 50% 50%,rgba(30,30,30,.5) 50%,#2c2c2c 100%);
+    background: rgba(0,0,0,0.5);
     opacity: 0;
     transition: opacity .2s;
     position: absolute;
@@ -810,7 +812,7 @@ button {
     left: 50%;
 }
 
-    .cardOverlayFab-primary i {
-        border: .07em solid rgba(255,255,255,.9);
-        color: #fff;
-    }
+.cardOverlayFab-primary i {
+    border: .07em solid rgba(255,255,255,.9);
+    color: #fff;
+}

src/components/cardbuilder/cardbuilder.js

@@ -1267,13 +1267,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var showTitle = options.showTitle === 'auto' ? true : (options.showTitle || item.Type === 'PhotoAlbum' || item.Type === 'Folder');
             var overlayText = options.overlayText;
 
-            if (forceName && !options.cardLayout) {
-
-                if (overlayText == null) {
-                    overlayText = true;
-                }
-            }
-
             var cardImageContainerClass = 'cardImageContainer';
             var coveredImage = options.coverImage || imgInfo.coverImage;
 
@@ -1537,18 +1530,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction';
 
             if (playbackManager.canPlay(item)) {
-
                 html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>';
             }
 
             html += '<div class="cardOverlayButton-br">';
 
-            //if (itemHelper.canEdit({ Policy: { IsAdministrator: true } }, item)) {
-
-            //    //require(['emby-playstatebutton']);
-            //    html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="edit"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE254;</i></button>';
-            //}
-
             var userData = item.UserData || {};
 
             if (itemHelper.canMarkPlayed(item)) {

src/components/chromecast/chromecasthelpers.js

@@ -187,8 +187,13 @@ define(['events'], function (events) {
         return apiClient.getEndpointInfo().then(function (endpoint) {
             if (endpoint.IsInNetwork) {
                 return apiClient.getPublicSystemInfo().then(function (info) {
-                    addToCache(serverAddress, info.LocalAddress);
-                    return info.LocalAddress;
+                    var localAddress = info.LocalAddress
+                    if (!localAddress) {
+                        console.log("No valid local address returned, defaulting to external one")
+                        localAddress = serverAddress;
+                    }
+                    addToCache(serverAddress, localAddress);
+                    return localAddress;
                 });
             } else {
                 addToCache(serverAddress, serverAddress);

src/components/chromecast/chromecastplayer.js

@@ -220,7 +220,9 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
             this.session = null;
             this.deviceState = DEVICE_STATE.IDLE;
             this.castPlayerState = PLAYER_STATE.IDLE;
-
+            document.removeEventListener("volumeupbutton", onVolumeUpKeyDown, false);
+            document.removeEventListener("volumedownbutton", onVolumeDownKeyDown, false);
+    
             //console.log('sessionUpdateListener: setting currentMediaSession to null');
             this.currentMediaSession = null;
 
@@ -258,6 +260,9 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
         this.session.addMediaListener(this.sessionMediaListener.bind(this));
         this.session.addUpdateListener(this.sessionUpdateListener.bind(this));
 
+        document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
+        document.addEventListener("volumedownbutton", onVolumeDownKeyDown, false);
+
         events.trigger(this, 'connect');
 
         this.sendMessage({
@@ -266,6 +271,14 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
         });
     };
 
+    function onVolumeUpKeyDown() {
+        playbackManager.volumeUp();
+    }
+    
+    function onVolumeDownKeyDown() {
+        playbackManager.volumeDown();
+    }
+
     /**
      * session update listener
      */
@@ -305,6 +318,8 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
         //console.log(message);
         this.deviceState = DEVICE_STATE.IDLE;
         this.castPlayerState = PLAYER_STATE.IDLE;
+        document.removeEventListener("volumeupbutton", onVolumeUpKeyDown, false);
+        document.removeEventListener("volumedownbutton", onVolumeDownKeyDown, false);
 
         //console.log('onStopAppSuccess: setting currentMediaSession to null');
         this.currentMediaSession = null;
@@ -574,8 +589,15 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
             events.trigger(instance, "playbackstop", [state]);
 
+            var state = instance.lastPlayerData.PlayState || {};
+            var volume = state.VolumeLevel || 0.5;
+            var mute = state.IsMuted || false;
+
             // Reset this so the next query doesn't make it appear like content is playing.
             instance.lastPlayerData = {};
+            instance.lastPlayerData.PlayState = {};
+            instance.lastPlayerData.PlayState.VolumeLevel = volume;
+            instance.lastPlayerData.PlayState.IsMuted = mute;
         });
 
         events.on(instance._castPlayer, "playbackprogress", function (e, data) {
@@ -780,11 +802,16 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
     };
 
     ChromecastPlayer.prototype.volumeDown = function () {
+        var vol = this._castPlayer.session.receiver.volume.level;
+        if (vol == null)
+        {
+            vol = 0.5;
+        }
+        vol -= 0.05;
+        vol = Math.max(vol, 0);
+
+        this._castPlayer.session.setReceiverVolumeLevel(vol);
 
-        this._castPlayer.sendMessage({
-            options: {},
-            command: 'VolumeDown'
-        });
     };
 
     ChromecastPlayer.prototype.endSession = function () {
@@ -799,24 +826,24 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
     };
 
     ChromecastPlayer.prototype.volumeUp = function () {
+        var vol = this._castPlayer.session.receiver.volume.level;
+        if (vol == null)
+        {
+            vol = 0.5;
+        }
+        vol += 0.05;
+        vol = Math.min(vol, 1);
 
-        this._castPlayer.sendMessage({
-            options: {},
-            command: 'VolumeUp'
-        });
+        this._castPlayer.session.setReceiverVolumeLevel(vol);
     };
 
     ChromecastPlayer.prototype.setVolume = function (vol) {
 
         vol = Math.min(vol, 100);
         vol = Math.max(vol, 0);
-
-        this._castPlayer.sendMessage({
-            options: {
-                volume: vol
-            },
-            command: 'SetVolume'
-        });
+        vol = vol / 100;
+        
+        this._castPlayer.session.setReceiverVolumeLevel(vol);
     };
 
     ChromecastPlayer.prototype.unpause = function () {

src/components/displaysettings/displaysettings.js

@@ -2,25 +2,19 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
     "use strict";
 
     function fillThemes(select, isDashboard) {
-
         select.innerHTML = skinManager.getThemes().map(function (t) {
-
             var value = t.id;
-
             if (t.isDefault && !isDashboard) {
                 value = '';
-            }
-            else if (t.isDefaultServerDashboard && isDashboard) {
+            } else if (t.isDefaultServerDashboard && isDashboard) {
                 value = '';
             }
 
             return '<option value="' + value + '">' + t.name + '</option>';
-
         }).join('');
     }
 
     function loadScreensavers(context, userSettings) {
-
         var selectScreensaver = context.querySelector('.selectScreensaver');
         var options = pluginManager.ofType('screensaver').map(function (plugin) {
             return {

src/components/emby-slider/emby-slider.css

@@ -158,8 +158,6 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider-background-flex-container {
-    padding-left: 10px;
-    padding-right: 10px;
     width: 100%;
     box-sizing: border-box;
     margin-top: -.05em;

src/components/favoriteitems.js

@@ -111,7 +111,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
             var html = "";
             if (result.Items.length) {
                 if (html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">', !layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
-                    html += '<a is="emby-linkbutton" href="' + ("list/list.html?serverId=" + ApiClient.serverId() + "&type=" + section.types + "&IsFavorite=true") + '" class="more button-flat button-flat-mini sectionTitleTextButton">', html += '<h2 class="sectionTitle sectionTitle-cards">', html += globalize.translate(section.name), html += "</h2>", html += '<i class="md-icon">&#xE5CC;</i>', html += "</a>"
+                    html += '<a is="emby-linkbutton" href="' + ("list.html?serverId=" + ApiClient.serverId() + "&type=" + section.types + "&IsFavorite=true") + '" class="more button-flat button-flat-mini sectionTitleTextButton">', html += '<h2 class="sectionTitle sectionTitle-cards">', html += globalize.translate(section.name), html += "</h2>", html += '<i class="md-icon">&#xE5CC;</i>', html += "</a>"
                 } else html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";
                 if (html += "</div>", enableScrollX()) {
                     var scrollXClass = "scrollX hiddenScrollX";

src/components/globalize.js

@@ -127,12 +127,17 @@ define(['connectionManager', 'userSettings', 'events'], function (connectionMana
 
     function loadStrings(options) {
         var locale = getCurrentLocale();
+        var promises = [];
+        var optionsName;
         if (typeof options === 'string') {
-            return ensureTranslation(allTranslations[options], locale);
+            optionsName = options;
         } else {
+            optionsName = options.name;
             register(options);
-            return ensureTranslation(allTranslations[options.name], locale);
         }
+        promises.push(ensureTranslation(allTranslations[optionsName], locale));
+        promises.push(ensureTranslation(allTranslations[optionsName], fallbackCulture));
+        return Promise.all(promises);
     }
 
     var cacheParam = new Date().getTime();

src/components/homescreensettings/homescreensettings.template.html

@@ -1,10 +1,6 @@
 <form style="margin:0 auto;">
-
     <div class="verticalSection verticalSection-extrabottompadding">
-
-        <h2 class="sectionTitle">
-            ${HeaderHomeScreen}
-        </h2>
+        <h2 class="sectionTitle">${HeaderHome}</h2>
 
         <div class="selectContainer hide selectTVHomeScreenContainer">
             <select is="emby-select" class="selectTVHomeScreen" label="${LabelTVHomeScreen}">

src/components/homesections/homesections.js

@@ -183,28 +183,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getLibraryButtonsHtml(items) {
-
         var html = "";
 
         html += '<div class="verticalSection verticalSection-extrabottompadding">';
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
-
-        if (!layoutManager.tv) {
-            html += '<button type="button" is="paper-icon-button-light" class="sectionTitleIconButton btnHomeScreenSettings"><i class="md-icon">&#xE5D3;</i></button>';
-        }
-
         html += '</div>';
 
         html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">';
 
         // "My Library" backgrounds
         for (var i = 0, length = items.length; i < length; i++) {
-
             var item = items[i];
-
             var icon;
-
             switch (item.CollectionType) {
                 case "movies":
                     icon = "local_movies";
@@ -258,7 +249,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         var html = getLibraryButtonsHtml(userViews);
 
         elem.innerHTML = html;
-        bindHomeScreenSettingsIcon(elem, apiClient, user.Id, userSettings);
         imageLoader.lazyChildren(elem);
     }
 
@@ -410,42 +400,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getRequirePromise(deps) {
-
         return new Promise(function (resolve, reject) {
-
             require(deps, resolve);
         });
     }
 
-    function showHomeScreenSettings(elem, options) {
-        return getRequirePromise(['homescreenSettingsDialog']).then(function (homescreenSettingsDialog) {
-
-            return homescreenSettingsDialog.show(options).then(function () {
-
-                dom.parentWithClass(elem, 'homeSectionsContainer').dispatchEvent(new CustomEvent('settingschange', {
-                    cancelable: false
-                }));
-            });
-        });
-    }
-
-    function bindHomeScreenSettingsIcon(elem, apiClient, userId, userSettings) {
-
-        var btnHomeScreenSettings = elem.querySelector('.btnHomeScreenSettings');
-        if (!btnHomeScreenSettings) {
-            return;
-        }
-
-        btnHomeScreenSettings.addEventListener('click', function () {
-            showHomeScreenSettings(elem, {
-                serverId: apiClient.serverId(),
-                userId: userId,
-                userSettings: userSettings
-
-            });
-        });
-    }
-
     function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
 
         elem.classList.remove('verticalSection');
@@ -460,11 +419,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
             html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
             html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
-
-            if (!layoutManager.tv) {
-                html += '<button type="button" is="paper-icon-button-light" class="sectionTitleIconButton btnHomeScreenSettings"><i class="md-icon">&#xE5D3;</i></button>';
-            }
-
             html += '</div>';
 
             if (scrollX) {
@@ -492,7 +446,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         }
 
         elem.innerHTML = html;
-        bindHomeScreenSettingsIcon(elem, apiClient, user.Id, userSettings);
         imageLoader.lazyChildren(elem);
     }
 

src/components/itemhelper.js

@@ -16,16 +16,13 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
         var name = ((item.Type === 'Program' || item.Type === 'Recording') && (item.IsSeries || item.EpisodeTitle) ? item.EpisodeTitle : item.Name) || '';
 
         if (item.Type === "TvChannel") {
-
             if (item.ChannelNumber) {
                 return item.ChannelNumber + ' ' + name;
             }
             return name;
         }
-        if (/*options.isInlineSpecial &&*/ item.Type === "Episode" && item.ParentIndexNumber === 0) {
-
+        if (item.Type === "Episode" && item.ParentIndexNumber === 0) {
             name = globalize.translate('ValueSpecialEpisodeName', name);
-
         } else if ((item.Type === "Episode" || item.Type === 'Program') && item.IndexNumber != null && item.ParentIndexNumber != null && options.includeIndexNumber !== false) {
 
             var displayIndexNumber = item.IndexNumber;
@@ -104,7 +101,7 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
 
         var itemType = item.Type;
 
-        if (itemType === "UserRootFolder" || /*itemType == "CollectionFolder" ||*/ itemType === "UserView") {
+        if (itemType === "UserRootFolder" || itemType === "UserView") {
             return false;
         }
 

src/components/nowplayingbar/nowplayingbar.css

@@ -119,7 +119,6 @@
     height: 1.2em !important;
 }
 
-
 @media all and (max-width: 70em) {
 
     .nowPlayingBarRight .nowPlayingBarUserDataButtons {
@@ -133,52 +132,32 @@
     }
 }
 
-
 @media all and (max-width: 62em) {
-
     .nowPlayingBarCenter .nowPlayingBarCurrentTime {
         display: none !important;
     }
-
 }
 
 @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: 40em) {
-
-    .nowPlayingBarInfoContainer .nowPlayingImage {
-        display: none;
-    }
-
 }
 
 @media all and (max-width: 36em) {
-
     .nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
         display: none !important;
     }
-
 }
 
 @media all and (max-width: 24em) {
-
-  .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
-    display: none;
-  }
-
+    .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+        display: none;
+    }
 }

src/components/playback/playbackmanager.js

@@ -1771,7 +1771,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
                 var maxBitrate = params.MaxStreamingBitrate || self.getMaxStreamingBitrate(player);
 
-                var currentPlayOptions = currentItem.playOptions || {};
+                var currentPlayOptions = currentItem.playOptions || getDefaultPlayOptions();
 
                 getPlaybackInfo(player, apiClient, currentItem, deviceProfile, maxBitrate, ticks, true, currentMediaSource.Id, audioStreamIndex, subtitleStreamIndex, liveStreamId, params.EnableDirectPlay, params.EnableDirectStream, params.AllowVideoStreamCopy, params.AllowAudioStreamCopy).then(function (result) {
 
@@ -2738,7 +2738,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
             if (newItem) {
 
-                var newItemPlayOptions = newItem.playOptions || {};
+                var newItemPlayOptions = newItem.playOptions || getDefaultPlayOptions();
 
                 playInternal(newItem, newItemPlayOptions, function () {
                     setPlaylistState(newItem.PlaylistItemId, newItemIndex);
@@ -2843,7 +2843,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
                 console.log('playing next track');
 
-                var newItemPlayOptions = newItemInfo.item.playOptions || {};
+                var newItemPlayOptions = newItemInfo.item.playOptions || getDefaultPlayOptions();
 
                 playInternal(newItemInfo.item, newItemPlayOptions, function () {
                     setPlaylistState(newItemInfo.item.PlaylistItemId, newItemInfo.index);
@@ -2866,7 +2866,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
                 if (newItem) {
 
-                    var newItemPlayOptions = newItem.playOptions || {};
+                    var newItemPlayOptions = newItem.playOptions || getDefaultPlayOptions();
                     newItemPlayOptions.startPositionTicks = 0;
 
                     playInternal(newItem, newItemPlayOptions, function () {
@@ -3037,7 +3037,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             var player = this;
             setCurrentPlayerInternal(player);
 
-            var playOptions = item.playOptions || {};
+            var playOptions = item.playOptions || getDefaultPlayOptions();
             var isFirstItem = playOptions.isFirstItem;
             var fullscreen = playOptions.fullscreen;
 

src/components/playback/playersettingsmenu.js

@@ -16,7 +16,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         });
 
         var menuItems = options.map(function (o) {
-
             var opt = {
                 name: o.name,
                 id: o.bitrate,
@@ -39,25 +38,19 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         return actionsheet.show({
             items: menuItems,
             positionTo: btn
-
         }).then(function (id) {
             var bitrate = parseInt(id);
             if (bitrate !== selectedId) {
-
                 playbackManager.setMaxStreamingBitrate({
-
                     enableAutomaticBitrateDetection: bitrate ? false : true,
                     maxBitrate: bitrate
-
                 }, player);
             }
         });
     }
 
     function showRepeatModeMenu(player, btn) {
-
         var menuItems = [];
-
         var currentValue = playbackManager.getRepeatMode(player);
 
         menuItems.push({
@@ -65,6 +58,7 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
             id: 'RepeatAll',
             selected: currentValue === 'RepeatAll'
         });
+
         menuItems.push({
             name: globalize.translate('RepeatOne'),
             id: 'RepeatOne',
@@ -80,9 +74,7 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         return actionsheet.show({
             items: menuItems,
             positionTo: btn
-
         }).then(function (mode) {
-
             if (mode) {
                 playbackManager.setRepeatMode(mode, player);
             }
@@ -90,15 +82,14 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
     }
 
     function getQualitySecondaryText(player) {
-
         var state = playbackManager.getPlayerState(player);
-
         var isAutoEnabled = playbackManager.enableAutomaticBitrateDetection(player);
         var currentMaxBitrate = playbackManager.getMaxStreamingBitrate(player);
 
         var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
             return stream.Type === "Video";
         })[0];
+
         var videoWidth = videoStream ? videoStream.Width : null;
 
         var options = qualityoptions.getVideoQualityOptions({
@@ -109,7 +100,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         });
 
         var menuItems = options.map(function (o) {
-
             var opt = {
                 name: o.name,
                 id: o.bitrate,
@@ -132,7 +122,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         }
 
         selectedOption = selectedOption[0];
-
         var text = selectedOption.name;
 
         if (selectedOption.autoText) {
@@ -196,11 +185,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
             });
         }
 
-        menuItems.push({
-            name: globalize.translate('PlaybackSettings'),
-            id: 'playbacksettings'
-        });
-
         if (user && user.Policy.EnableVideoPlaybackTranscoding) {
             var secondaryQualityText = getQualitySecondaryText(player);
 
@@ -214,7 +198,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         var repeatMode = playbackManager.getRepeatMode(player);
 
         if (supportedCommands.indexOf('SetRepeatMode') !== -1 && playbackManager.currentMediaSource(player).RunTimeTicks) {
-
             menuItems.push({
                 name: globalize.translate('RepeatMode'),
                 id: 'repeatmode',
@@ -223,9 +206,8 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         }
 
         if (options.stats) {
-
             menuItems.push({
-                name: globalize.translate('StatsForNerds'),
+                name: globalize.translate('PlaybackData'),
                 id: 'stats',
                 asideText: null
             });
@@ -240,26 +222,16 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
             });
         }
 
-        menuItems.push({
-            name: globalize.translate('SubtitleSettings'),
-            id: 'subtitlesettings'
-        });
-
         return actionsheet.show({
-
             items: menuItems,
             positionTo: options.positionTo
-
         }).then(function (id) {
-
             return handleSelectedOption(id, options, player);
         });
     }
 
     function show(options) {
-
         var player = options.player;
-
         var currentItem = playbackManager.currentItem(player);
 
         if (!currentItem || !currentItem.ServerId) {
@@ -267,45 +239,19 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         }
 
         var apiClient = connectionManager.getApiClient(currentItem.ServerId);
-
         return apiClient.getCurrentUser().then(function (user) {
             return showWithUser(options, player, user);
         });
     }
 
-    function alertText(text) {
-
-        return new Promise(function (resolve, reject) {
-
-            require(['alert'], function (alert) {
-
-                alert(text).then(resolve);
-            });
-        });
-    }
-
-    function showSubtitleSettings(player, btn) {
-        return alertText(globalize.translate('SubtitleSettingsIntro'));
-    }
-
-    function showPlaybackSettings(player, btn) {
-        return alertText(globalize.translate('PlaybackSettingsIntro'));
-    }
-
     function handleSelectedOption(id, options, player) {
-
         switch (id) {
-
             case 'quality':
                 return showQualityMenu(player, options.positionTo);
             case 'aspectratio':
                 return showAspectRatioMenu(player, options.positionTo);
             case 'repeatmode':
                 return showRepeatModeMenu(player, options.positionTo);
-            case 'subtitlesettings':
-                return showSubtitleSettings(player, options.positionTo);
-            case 'playbacksettings':
-                return showPlaybackSettings(player, options.positionTo);
             case 'stats':
                 if (options.onOption) {
                     options.onOption('stats');

src/components/recordingcreator/recordingfields.js

@@ -38,7 +38,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
         var options = instance.options;
         var apiClient = connectionManager.getApiClient(options.serverId);
 
-        instance.querySelector('.recordingFields').classList.remove('hide');
+        options.parent.querySelector('.recordingFields').classList.remove('hide');
         return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
             instance.TimerId = program.TimerId;
             instance.Status = program.Status;
@@ -254,4 +254,4 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
     };
 
     return RecordingEditor;
-});
+});

src/components/skinManager.js

@@ -7,7 +7,6 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
     function unloadTheme() {
         var elem = themeStyleElement;
         if (elem) {
-
             elem.parentNode.removeChild(elem);
             themeStyleElement = null;
             currentThemeId = null;
@@ -16,7 +15,6 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
 
     function loadUserSkin(options) {
         options = options || {};
-
         if (options.start) {
             Emby.Page.invokeShortcut(options.start);
         } else {
@@ -37,29 +35,38 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
             isDefault: true,
             isDefaultServerDashboard: true
         }, {
-            name: "Dark (green accent)",
+            name: "Dark Classic",
+            id: "dark-classic",
+        }, {
+            name: "Dark (Green Accent)",
             id: "dark-green"
         }, {
-            name: "Dark (red accent)",
+            name: "Dark (Red Accent)",
             id: "dark-red"
         }, {
             name: "Light",
             id: "light"
         }, {
-            name: "Light (blue accent)",
+            name: "Light Classic",
+            id: "light-classic"
+        }, {
+            name: "Light (Blue Accent)",
             id: "light-blue"
         }, {
-            name: "Light (green accent)",
+            name: "Light (Green Accent)",
             id: "light-green"
         }, {
-            name: "Light (pink accent)",
+            name: "Light (Pink Accent)",
             id: "light-pink"
         }, {
-            name: "Light (purple accent)",
+            name: "Light (Purple Accent)",
             id: "light-purple"
         }, {
-            name: "Light (red accent)",
+            name: "Light (Red Accent)",
             id: "light-red"
+        }, {
+            name: "Purple Haze",
+            id: "purple-haze"
         }, {
             name: "Windows Media Center",
             id: "wmc"
@@ -71,7 +78,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
         loadUserSkin: loadUserSkin
     };
 
-    function getThemeStylesheetInfo(id, requiresRegistration, isDefaultProperty) {
+    function getThemeStylesheetInfo(id, isDefaultProperty) {
         var themes = skinManager.getThemes();
         var defaultTheme;
         var selectedTheme;
@@ -122,14 +129,13 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
 
     skinManager.setTheme = function (id, context) {
         return new Promise(function (resolve, reject) {
-            var requiresRegistration = true;
             if (currentThemeId && currentThemeId === id) {
                 resolve();
                 return;
             }
 
             var isDefaultProperty = context === 'serverdashboard' ? 'isDefaultServerDashboard' : 'isDefault';
-            var info = getThemeStylesheetInfo(id, requiresRegistration, isDefaultProperty);
+            var info = getThemeStylesheetInfo(id, isDefaultProperty);
             if (currentThemeId && currentThemeId === info.themeId) {
                 resolve();
                 return;
@@ -181,21 +187,16 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
     document.addEventListener('viewshow', onViewBeforeShow);
 
     function playSound(path, volume) {
-
         lastSound = new Date().getTime();
-
         require(['howler'], function (howler) {
-
             try {
                 var sound = new Howl({
                     src: [path],
                     volume: volume || 0.1
                 });
-
                 sound.play();
                 currentSound = sound;
-            }
-            catch (err) {
+            } catch (err) {
                 console.log('Error playing sound: ' + err);
             }
         });

src/components/themes/purple-haze/theme.css

@@ -0,0 +1,476 @@
+.skinHeader,
+html {
+    color: #ddd;
+    color: rgba(255, 255, 255, .8)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+    background-color: #303030
+}
+
+.emby-collapsible-button {
+    border-color: #383838;
+    border-color: rgba(255, 255, 255, .135)
+}
+
+.skinHeader-withBackground {
+    background: #000420;
+    background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
+    background: -webkit-linear-gradient(left, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
+    background: linear-gradient(to right, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000420', endColorstr='#000420',GradientType=1 );
+}
+
+.skinHeader.semiTransparent {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+    background-color: rgba(0, 0, 0, .3);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
+}
+
+.pageTitleWithDefaultLogo {
+    background-image: url(../logowhite.png)
+}
+
+.dialog,
+html {
+    background-color: #3f2d7a
+}
+
+.backgroundContainer {
+    background: url(bg.jpg) center top no-repeat #030322;
+    -webkit-background-size: cover;
+    background-size: cover
+}
+
+.backgroundContainer.withBackdrop {
+    opacity: .93
+}
+
+@media (orientation:portrait) {
+    .backgroundContainer {
+        background-position: 30% top
+    }
+}
+
+.paper-icon-button-light:focus {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
+}
+
+.fab,
+.raised {
+    background: rgba(0, 0, 0, .5);
+    color: rgba(255, 255, 255, .87)
+}
+
+.fab:focus,
+.raised:focus {
+    background: rgba(0, 0, 0, .7)
+}
+
+.button-submit {
+    background: #00a4dc;
+    color: #fff
+}
+
+.button-submit:focus {
+    background: #0cb0e8;
+    color: #fff
+}
+
+.checkboxLabel {
+    color: inherit
+}
+
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
+    color: #bbb;
+    color: rgba(255, 255, 255, .7)
+}
+
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #00a4dc
+}
+
+.checkboxOutline {
+    border-color: currentColor
+}
+
+.cardContent {
+    border-radius: 1.000em
+}
+
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    background-color: rgba(0, 0, 0, .5);
+    border-radius: 1.000em
+}
+
+.cardOverlayContainer {
+    border-radius: 0.8em;
+}
+.visualCardBox .cardOverlayContainer {
+    border-bottom-right-radius: 0em;
+    border-bottom-left-radius: 0em;
+}
+
+.defaultCardBackground1 {
+    background-color: #d2b019
+}
+
+.defaultCardBackground2 {
+    background-color: #338abb
+}
+
+.defaultCardBackground3 {
+    background-color: #6b689d
+}
+
+.defaultCardBackground4 {
+    background-color: #dd452b
+}
+
+.defaultCardBackground5 {
+    background-color: #5ccea9
+}
+
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
+    color: #999;
+    color: rgba(255, 255, 255, .5)
+}
+
+.actionsheetDivider {
+    background: #444;
+    background: rgba(255, 255, 255, .14)
+}
+
+.cardFooter-vibrant .cardText-secondary {
+    color: inherit;
+    opacity: .5
+}
+
+.actionSheetMenuItem:hover {
+    background-color: rgba(0, 0, 0, .5)
+}
+
+.toast {
+    background: #303030;
+    color: #fff;
+    color: rgba(255, 255, 255, .87)
+}
+
+.appfooter {
+    background: #06256f;
+    color: #ccc;
+    color: rgba(255, 255, 255, .78)
+}
+
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+    .appfooter-blurred {
+        background: rgba(24, 24, 24, .7);
+        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
+    }
+}
+
+.itemSelectionPanel {
+    border: 1px solid #00a4dc
+}
+
+.selectionCommandsPanel {
+    background: #00a4dc;
+    color: #fff
+}
+
+.upNextDialog-countdownText {
+    color: #00a4dc
+}
+
+.alphaPickerButton {
+    color: #999;
+    color: rgba(255, 255, 255, .5);
+    background-color: transparent
+}
+
+.alphaPickerButton-selected {
+    color: #fff
+}
+
+.alphaPickerButton-tv:focus {
+    background-color: #00a4dc;
+    color: #fff !important
+}
+
+.detailTableBodyRow-shaded:nth-child(even) {
+    background: #1c1c1c;
+    background: rgba(30, 30, 30, .9)
+}
+
+.listItem-border {
+    border-color: rgba(255, 255, 255, .1) !important
+}
+
+.listItem:focus {
+    background: rgba(0, 0, 0, .3)
+}
+
+.progressring-spiner {
+    border-color: #00a4dc
+}
+
+.button-flat-accent,
+.button-link {
+    color: #00a4dc
+}
+
+.mediaInfoText {
+    color: #ddd;
+    background: rgba(170, 170, 190, .2)
+}
+
+.mediaInfoTimerIcon,
+.starIcon {
+    color: #f2b01e
+}
+
+.emby-input,
+.emby-textarea {
+    color: inherit;
+    background: rgba(0, 0, 0, .5);
+    border: .07em solid transparent;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
+}
+
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #00a4dc
+}
+
+.emby-select-withcolor {
+    color: inherit;
+    background: rgba(0, 0, 0, .5);
+    border: .07em solid transparent
+}
+
+.emby-select-withcolor>option {
+    color: inherit;
+    background: #222
+}
+
+.emby-select-withcolor:focus {
+    border-color: #00a4dc !important
+}
+
+.emby-select-tv-withcolor:focus {
+    background-color: #00a4dc !important;
+    color: #fff !important
+}
+
+.emby-checkbox:checked+span+span+.checkboxOutline {
+    border-color: #00a4dc
+}
+
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(0,164,220, .26)
+}
+
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.itemProgressBarForeground {
+    background-color: #00a4dc
+}
+
+.itemProgressBarForeground-recording {
+    background-color: #CB272A
+}
+
+.countIndicator,
+.fullSyncIndicator,
+.playedIndicator {
+    background: #00a4dc
+}
+
+.fullSyncIndicator {
+    color: #fff
+}
+
+.mainDrawer {
+    background: rgba(0, 0, 0, .5);
+}
+
+.drawer-open {
+    background-color: #030322
+
+}
+
+.navMenuOption:hover {
+    background: rgba(221, 221, 221, 0.068)
+}
+
+.navMenuOption-selected {
+    background: #6f0765 !important;
+    color: #fff
+}
+
+.emby-button-focusscale:focus {
+    background: #00a4dc;
+    color: #fff
+}
+
+.emby-tab-button {
+    color: #999;
+    color: rgba(255, 255, 255, .4)
+}
+
+.emby-tab-button-active {
+    color: #fff
+}
+
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
+}
+
+.emby-tab-button.emby-button-tv:focus {
+    color: #00a4dc;
+    background: 0 0
+}
+
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(255, 255, 255, .05)
+}
+
+.programCell-sports {
+    background: #3949AB !important
+}
+
+.programCell-movie {
+    background: #5E35B1 !important
+}
+
+.programCell-kids {
+    background: #039BE5 !important
+}
+
+.programCell-news {
+    background: #43A047 !important
+}
+
+.programCell-active {
+    background: rgba(0, 0, 0, .4) !important
+}
+
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #00a4dc !important;
+    color: #fff !important
+}
+
+.guide-programTextIcon {
+    color: #1e1e1e;
+    background: #555
+}
+
+.guide-headerTimeslots {
+    color: inherit
+}
+
+.guide-date-tab-button {
+    color: #555;
+    color: rgba(255, 255, 255, .3)
+}
+
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #00a4dc
+}
+
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #00a4dc;
+    color: #fff
+}
+
+.itemBackdropFader {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818);
+    background: linear-gradient(rgba(0, 0, 0, 0), #181818)
+}
+
+.infoBanner {
+    color: #ddd;
+    background: #111;
+    padding: 1em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
+}
+
+.ratingbutton-icon-withrating {
+    color: #c33
+}
+
+.downloadbutton-icon-complete,
+.downloadbutton-icon-on {
+    color: #4285F4
+}
+
+.playstatebutton-icon-played {
+    color: #c33
+}
+
+.repeatButton-active {
+    color: #4285F4
+}
+
+.card:focus .card-focuscontent {
+    border-color: #00a4dc
+}
+
+.layout-desktop ::-webkit-scrollbar {
+    width: 1em;
+    height: 1em
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: #3b3b3b
+}
+
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
+    -webkit-border-radius: 2px;
+    background: center no-repeat #888
+}
+
+.timeslotHeaders-desktop::-webkit-scrollbar {
+    height: .7em
+}
+
+.mediaInfoOfficialRating {
+    border: .09em solid #583fa0;
+    background-color: #5a1259
+}

src/components/userdatabuttons/emby-playstatebutton.js

@@ -2,14 +2,12 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
     'use strict';
 
     function addNotificationEvent(instance, name, handler) {
-
         var localHandler = handler.bind(instance);
         events.on(serverNotifications, name, localHandler);
         instance[name] = localHandler;
     }
 
     function removeNotificationEvent(instance, name) {
-
         var handler = instance[name];
         if (handler) {
             events.off(serverNotifications, name, handler);
@@ -25,31 +23,22 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         var apiClient = connectionManager.getApiClient(serverId);
 
         if (!button.classList.contains('playstatebutton-played')) {
-
             apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date());
-
             setState(button, true);
-
         } else {
-
             apiClient.markUnplayed(apiClient.getCurrentUserId(), id, new Date());
-
             setState(button, false);
         }
     }
 
     function onUserDataChanged(e, apiClient, userData) {
-
         var button = this;
-
         if (userData.ItemId === button.getAttribute('data-id')) {
-
             setState(button, userData.Played);
         }
     }
 
     function setState(button, played, updateAttribute) {
-
         var icon = button.iconElement;
         if (!icon) {
             button.iconElement = button.querySelector('i');
@@ -57,18 +46,13 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         }
 
         if (played) {
-
             button.classList.add('playstatebutton-played');
-
             if (icon) {
                 icon.classList.add('playstatebutton-icon-played');
                 icon.classList.remove('playstatebutton-icon-unplayed');
             }
-
         } else {
-
             button.classList.remove('playstatebutton-played');
-
             if (icon) {
                 icon.classList.remove('playstatebutton-icon-played');
                 icon.classList.add('playstatebutton-icon-unplayed');