Merge branch 'master' into scrollmanager

.eslintignore

@@ -0,0 +1 @@
+libraries/

.eslintrc.yml

@@ -2,3 +2,26 @@ env:
   es6: true
   browser: true
   amd: true
+
+rules:
+  block-spacing: ["error"]
+  brace-style: ["error"]
+  comma-dangle: ["error", "never"]
+  comma-spacing: ["error"]
+  eol-last: ["off"]
+  indent: ["error", 4, { "SwitchCase": 1 }]
+  keyword-spacing: ["error"]
+  line-comment-position: ["off"]
+  max-statements-per-line: ["error"]
+  no-empty: ["error"]
+  no-extra-semi: ["error"]
+  no-floating-decimal: ["error"]
+  no-multi-spaces: ["error"]
+  no-multiple-empty-lines: ["error", { "max": 1 }]
+  no-trailing-spaces: ["error"]
+  no-void: ["off"]
+  one-var: ["error", "never"]
+  padding-line-between-statements: ["off"]
+  semi: ["off"]
+  space-before-blocks: ["error"]
+  yoda: ["off"]

src/bundle.js

@@ -6,59 +6,87 @@ var _define = window.define;
 
 // document-register-element
 var docRegister = require("document-register-element");
-_define("document-register-element", function() { return docRegister; });
+_define("document-register-element", function() {
+    return docRegister;
+});
 
 // fetch
 var fetch = require("whatwg-fetch");
-_define("fetch", function() { return fetch });
+_define("fetch", function() {
+    return fetch
+});
 
 // flvjs
 var flvjs = require("flv.js");
-_define("flvjs", function() { return flvjs; });
+_define("flvjs", function() {
+    return flvjs;
+});
 
 // jstree
 var jstree = require("jstree");
 require("jstree/dist/themes/default/style.css");
-_define("jstree", function() { return jstree; });
+_define("jstree", function() {
+    return jstree;
+});
 
 // jquery
 var jquery = require("jquery");
-_define("jQuery", function() { return jquery; });
+_define("jQuery", function() {
+    return jquery;
+});
 
 // hlsjs
 var hlsjs = require("hls.js");
-_define("hlsjs", function() { return hlsjs; });
+_define("hlsjs", function() {
+    return hlsjs;
+});
 
 // howler
 var howler = require("howler");
-_define("howler", function() { return howler; });
+_define("howler", function() {
+    return howler;
+});
 
 // native-promise-only
 var nativePromise = require("native-promise-only");
-_define("native-promise-only", function() { return nativePromise; });
+_define("native-promise-only", function() {
+    return nativePromise;
+});
 
 // resize-observer-polyfill
 var resize = require("resize-observer-polyfill");
-_define("resize-observer-polyfill", function() { return resize; });
+_define("resize-observer-polyfill", function() {
+    return resize;
+});
 
 // shaka
 var shaka = require("shaka-player");
-_define("shaka", function() { return shaka; });
+_define("shaka", function() {
+    return shaka;
+});
 
 // swiper
 var swiper = require("swiper");
 require("swiper/dist/css/swiper.min.css");
-_define("swiper", function() { return swiper; });
+_define("swiper", function() {
+    return swiper;
+});
 
 // sortable
 var sortable = require("sortablejs");
-_define("sortable", function() { return sortable; });
+_define("sortable", function() {
+    return sortable;
+});
 
 // webcomponents
 var webcomponents = require("webcomponents.js-2");
-_define("webcomponents", function() { return webcomponents });
+_define("webcomponents", function() {
+    return webcomponents
+});
 
 // libjass
 var libjass = require("libjass");
 require("libjass/libjass.css");
-_define("libjass", function() { return libjass; });
+_define("libjass", function() {
+    return libjass;
+});

src/components/accessschedule/accessschedule.template.html

@@ -1,5 +1,7 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
+        <i class="md-icon">arrow_back</i>
+    </button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderAccessSchedule}
     </h3>

src/components/actionsheet/actionsheet.js

@@ -139,7 +139,9 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
             style += "min-width:" + minWidth + "px;";
         }
 
-        var i, length, option;
+        var i;
+        var length;
+        var option;
         var renderIcon = false;
         var icons = [];
         var itemIcon;
@@ -156,7 +158,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
         }
 
         if (layoutManager.tv) {
-            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         }
 
         // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
@@ -225,8 +227,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
             if (itemIcon) {
 
                 html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent md-icon">' + itemIcon + '</i>';
-            }
-            else if (renderIcon && !center) {
+            } else if (renderIcon && !center) {
                 html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent md-icon" style="visibility:hidden;">check</i>';
             }
 

src/components/alphapicker/alphapicker.js

@@ -50,9 +50,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
 
         var vertical = element.classList.contains('alphaPicker-vertical');
 
-        if (vertical) {
-
-        } else {
+        if (!vertical) {
             element.classList.add('focuscontainer-x');
         }
 
@@ -69,8 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
 
         html += '<div class="' + rowClassName + '">';
         if (options.mode === 'keyboard') {
-            // space_bar icon
-            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">&#xE256;</i></button>';
+            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">space_bar</i></button>';
         } else {
             letters = ['#'];
             html += mapLetters(letters, vertical).join('');
@@ -80,8 +77,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
         html += mapLetters(letters, vertical).join('');
 
         if (options.mode === 'keyboard') {
-            // backspace icon
-            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">&#xE14A;</i></button>';
+            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">backspace</i></button>';
             html += '</div>';
 
             letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -230,7 +226,8 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
     AlphaPicker.prototype.value = function (value, applyValue) {
 
         var element = this.options.element;
-        var btn, selected;
+        var btn;
+        var selected;
 
         if (value !== undefined) {
             if (value != null) {

src/components/autoFocuser.js

@@ -0,0 +1,101 @@
+define(["focusManager", "layoutManager"], function (focusManager, layoutManager) {
+    "use strict";
+
+    /**
+     * Previously selected element.
+     */
+    var activeElement;
+
+    /**
+     * Returns true if AutoFocuser is enabled.
+     */
+    function isEnabled() {
+        return layoutManager.tv;
+    }
+
+    /**
+     * Start AutoFocuser
+     */
+    function enable() {
+        if (!isEnabled()) {
+            return;
+        }
+
+        window.addEventListener("focusin", function (e) {
+            activeElement = e.target;
+        });
+
+        console.log("AutoFocuser enabled");
+    }
+
+    /**
+     * Create an array from some source.
+     */
+    var arrayFrom = Array.prototype.from || function (src) {
+        return Array.prototype.slice.call(src);
+    }
+
+    /**
+     * Set focus on a suitable element, taking into account the previously selected.
+     */
+    function autoFocus(container) {
+        if (!isEnabled()) {
+            return;
+        }
+
+        container = container || document.body;
+
+        var candidates = [];
+
+        if (activeElement) {
+            // These elements are recreated
+            if (activeElement.classList.contains("btnPreviousPage")) {
+                candidates.push(container.querySelector(".btnPreviousPage"));
+                candidates.push(container.querySelector(".btnNextPage"));
+            } else if (activeElement.classList.contains("btnNextPage")) {
+                candidates.push(container.querySelector(".btnNextPage"));
+                candidates.push(container.querySelector(".btnPreviousPage"));
+            } else if (activeElement.classList.contains("btnSelectView")) {
+                candidates.push(container.querySelector(".btnSelectView"));
+            }
+
+            candidates.push(activeElement);
+        }
+
+        candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnResume")));
+        candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnPlay")));
+
+        var focusedElement;
+
+        candidates.every(function (element) {
+            if (focusManager.isCurrentlyFocusable(element)) {
+                focusManager.focus(element);
+                focusedElement = element;
+                return false;
+            }
+
+            return true;
+        });
+
+        if (!focusedElement) {
+            // FIXME: Multiple itemsContainers
+            var itemsContainer = container.querySelector(".itemsContainer");
+
+            if (itemsContainer) {
+                focusedElement = focusManager.autoFocus(itemsContainer);
+            }
+        }
+
+        if (!focusedElement) {
+            focusedElement = focusManager.autoFocus(container);
+        }
+
+        return focusedElement;
+    }
+
+    return {
+        isEnabled: isEnabled,
+        enable: enable,
+        autoFocus: autoFocus
+    };
+});

src/components/cardbuilder/card.css

@@ -145,7 +145,7 @@ button {
 }
 
 .cardImageContainer {
-    background-size: contain;
+    background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     display: -webkit-flex;

src/components/cardbuilder/cardBuilder.js

@@ -321,7 +321,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var apiClient;
             var lastServerId;
 
-            var i, length;
+            var i;
+            var length;
 
             for (i = 0, length = items.length; i < length; i++) {
 
@@ -339,19 +340,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                     if (options.indexBy === 'PremiereDate') {
                         if (item.PremiereDate) {
                             try {
-
                                 newIndexValue = datetime.toLocaleDateString(datetime.parseISO8601Date(item.PremiereDate), { weekday: 'long', month: 'long', day: 'numeric' });
-
                             } catch (err) {
+                                console.log('error parsing timestamp for premiere date');
                             }
                         }
-                    }
-
-                    else if (options.indexBy === 'ProductionYear') {
+                    } else if (options.indexBy === 'ProductionYear') {
                         newIndexValue = item.ProductionYear;
-                    }
-
-                    else if (options.indexBy === 'CommunityRating') {
+                    } else if (options.indexBy === 'CommunityRating') {
                         newIndexValue = item.CommunityRating ? (Math.floor(item.CommunityRating) + (item.CommunityRating % 1 >= 0.5 ? 0.5 : 0)) + '+' : null;
                     }
 
@@ -571,22 +567,19 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
                     }
                 }
-            }
-            else if (item.ParentPrimaryImageTag) {
+            } else if (item.ParentPrimaryImageTag) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
                     type: "Primary",
                     tag: item.ParentPrimaryImageTag
                 });
-            }
-            else if (item.SeriesPrimaryImageTag) {
+            } else if (item.SeriesPrimaryImageTag) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
                     type: "Primary",
                     tag: item.SeriesPrimaryImageTag
                 });
-            }
-            else if (item.AlbumId && item.AlbumPrimaryImageTag) {
+            } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
 
                 width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
 
@@ -601,16 +594,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
                     }
                 }
-            }
-            else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
+            } else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
                     tag: item.ImageTags.Thumb
                 });
 
-            }
-            else if (item.BackdropImageTags && item.BackdropImageTags.length) {
+            } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Backdrop",
@@ -681,7 +672,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var html = '';
 
             var valid = 0;
-            var i, length;
+            var i;
+            var length;
 
             for (i = 0, length = lines.length; i < length; i++) {
 
@@ -745,8 +737,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         date = datetime.parseISO8601Date(item.EndDate);
                         airTimeText += ' - ' + datetime.getDisplayTime(date);
                     }
-                }
-                catch (e) {
+                } catch (e) {
                     console.log("Error parsing date: " + item.StartDate);
                 }
             }
@@ -767,7 +758,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
 
                 if (options.cardFooterAside !== 'none') {
-                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="md-icon">&#xE5D3;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="md-icon">more_horiz</i></button>';
                 }
             }
 
@@ -794,8 +785,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         } else {
                             lines.push(item.SeriesName);
                         }
-                    }
-                    else {
+                    } else {
 
                         if (isUsingLiveTvNaming(item)) {
 
@@ -976,8 +966,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 if (options.showSeriesTimerChannel) {
                     if (item.RecordAnyChannel) {
                         lines.push(globalize.translate('AllChannels'));
-                    }
-                    else {
+                    } else {
                         lines.push(item.ChannelName || globalize.translate('OneChannel'));
                     }
                 }
@@ -985,8 +974,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 if (options.showPersonRoleOrType) {
                     if (item.Role) {
                         lines.push('as ' + item.Role);
-                    }
-                    else if (item.Type) {
+                    } else if (item.Type) {
                         lines.push(globalize.translate('' + item.Type));
                     } else {
                         lines.push('');
@@ -1060,8 +1048,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 counts.push(childText);
 
-            }
-            else if (item.Type === 'Genre' || item.Type === 'Studio') {
+            } else if (item.Type === 'Genre' || item.Type === 'Studio') {
 
                 if (item.MovieCount) {
 
@@ -1140,8 +1127,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             if (item.IsPremiere) {
                 html += '<div class="premiereTvProgram programAttributeIndicator">' + globalize.translate('Premiere') + '</div>';
-            }
-            else if (item.IsSeries && !item.IsRepeat) {
+            } else if (item.IsSeries && !item.IsRepeat) {
                 html += '<div class="newTvProgram programAttributeIndicator">' + globalize.translate('AttributeNew') + '</div>';
             }
             //else if (item.IsRepeat) {
@@ -1176,8 +1162,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             if (action === 'play' && item.IsFolder) {
                 // If this hard-coding is ever removed make sure to test nested photo albums
                 action = 'link';
-            }
-            else if (item.MediaType === 'Photo') {
+            } else if (item.MediaType === 'Photo') {
                 action = 'play';
             }
 
@@ -1272,8 +1257,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                     height: logoHeight,
                     tag: item.ChannelPrimaryImageTag
                 });
-            }
-            else if (options.showLogo && item.ParentLogoImageTag) {
+            } else if (options.showLogo && item.ParentLogoImageTag) {
                 logoUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
                     type: "Logo",
                     height: logoHeight,
@@ -1288,8 +1272,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
                 innerCardFooter += getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, false);
                 footerOverlayed = true;
-            }
-            else if (progressHtml) {
+            } else if (progressHtml) {
                 innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">';
                 innerCardFooter += progressHtml;
                 innerCardFooter += '</div>';
@@ -1332,15 +1315,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
 
                 if (options.centerPlayButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
                 }
 
                 if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
                 }
 
                 if (options.overlayMoreButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">&#xE5D3;</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">more_horiz</i></button>';
                 }
             }
 
@@ -1394,8 +1377,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
                     minCount: 1
                 });
-            }
-            else {
+            } else {
                 indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
             }
 
@@ -1474,7 +1456,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
 
             if (playbackManager.canPlay(item)) {
-                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE037;</i></button>';
+                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">play_arrow</i></button>';
             }
 
             html += '<div class="cardOverlayButton-br">';
@@ -1483,7 +1465,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             if (itemHelper.canMarkPlayed(item)) {
                 require(['emby-playstatebutton']);
-                html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5CA;</i></button>';
+                html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">check</i></button>';
             }
 
             if (itemHelper.canRate(item)) {
@@ -1491,10 +1473,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var likes = userData.Likes == null ? '' : userData.Likes;
 
                 require(['emby-ratingbutton']);
-                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE87D;</i></button>';
+                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
             }
 
-            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5D3;</i></button>';
+            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">more_horiz</i></button>';
 
             html += '</div>';
             html += '</div>';
@@ -1507,10 +1489,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 return '<i class="cardImageIcon md-icon">' + imageHelper.getLibraryIcon(item.CollectionType) + '</i>'
             }
             if (item.Type === 'MusicAlbum') {
-                return '<i class="cardImageIcon md-icon">&#xE019;</i>';
+                return '<i class="cardImageIcon md-icon">album</i>';
             }
             if (item.Type === 'MusicArtist' || item.Type === 'Person') {
-                return '<i class="cardImageIcon md-icon">&#xE7FD;</i>';
+                return '<i class="cardImageIcon md-icon">person</i>';
             }
             if (options.defaultCardImageIcon) {
                 return '<i class="cardImageIcon md-icon">' + options.defaultCardImageIcon + '</i>';
@@ -1602,7 +1584,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                     indicatorsElem = ensureIndicators(card, indicatorsElem);
                     indicatorsElem.appendChild(playedIndicator);
                 }
-                playedIndicator.innerHTML = '<i class="md-icon indicatorIcon">&#xE5CA;</i>';
+                playedIndicator.innerHTML = '<i class="md-icon indicatorIcon">check</i>';
             } else {
 
                 playedIndicator = card.querySelector('.playedIndicator');
@@ -1656,8 +1638,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 }
 
                 itemProgressBar.innerHTML = progressHtml;
-            }
-            else {
+            } else {
 
                 itemProgressBar = card.querySelector('.itemProgressBar');
                 if (itemProgressBar) {
@@ -1684,7 +1665,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var icon = cell.querySelector('.timerIndicator');
                 if (!icon) {
                     var indicatorsElem = ensureIndicators(cell);
-                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>');
+                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>');
                 }
                 cell.setAttribute('data-timerid', newTimerId);
             }

src/components/cardbuilder/peoplecardbuilder.js

@@ -10,7 +10,7 @@ define(['cardBuilder'], function (cardBuilder) {
             cardFooterAside: 'none',
             showPersonRoleOrType: true,
             cardCssClass: 'personCard',
-            defaultCardImageIcon: ''
+            defaultCardImageIcon: 'person'
         });
         cardBuilder.buildCards(items, options);
     }

src/components/channelmapper/channelmapper.js

@@ -127,7 +127,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
             var html = "";
             var title = globalize.translate("MapChannels");
             html += '<div class="formDialogHeader">';
-            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
             html += '<h3 class="formDialogHeaderTitle">';
             html += title;
             html += "</h3>";

src/components/chromecast/chromecastplayer.js

@@ -479,8 +479,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
                     TotalRecordCount: 1
                 };
             });
-        }
-        else {
+        } else {
 
             query.Limit = query.Limit || 100;
             query.ExcludeLocationTypes = "Virtual";
@@ -752,8 +751,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
     ChromecastPlayer.prototype.volumeDown = function () {
         var vol = this._castPlayer.session.receiver.volume.level;
-        if (vol == null)
-        {
+        if (vol == null) {
             vol = 0.5;
         }
         vol -= 0.05;
@@ -776,8 +774,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
     ChromecastPlayer.prototype.volumeUp = function () {
         var vol = this._castPlayer.session.receiver.volume.level;
-        if (vol == null)
-        {
+        if (vol == null) {
             vol = 0.5;
         }
         vol += 0.05;

src/components/collectioneditor/collectioneditor.js

@@ -243,13 +243,13 @@ define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManage
         var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
 
         html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';
 
         if (appHost.supports('externallinks')) {
-            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="md-icon">&#xE88E;</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
+            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="md-icon">info</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
         }
 
         html += '</div>';

src/components/dialog/dialog.js

@@ -51,7 +51,8 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
             dlg.querySelector('.dialogContentInner').classList.add('hide');
         }
 
-        var i, length;
+        var i;
+        var length;
         var html = '';
         var hasDescriptions = false;
 

src/components/dialogHelper/dialogHelper.js

@@ -18,8 +18,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         if (layoutManager.tv) {
             if (dlg.classList.contains('scrollX')) {
                 centerFocus(dlg, true, false);
-            }
-            else if (dlg.classList.contains('smoothScrollY')) {
+            } else if (dlg.classList.contains('smoothScrollY')) {
                 centerFocus(dlg, false, false);
             }
         }
@@ -433,8 +432,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             if (layoutManager.tv) {
                 centerFocus(dlg, true, true);
             }
-        }
-        else if (options.scrollY !== false) {
+        } else if (options.scrollY !== false) {
             dlg.classList.add('smoothScrollY');
 
             if (layoutManager.tv) {

src/components/directorybrowser/directorybrowser.js

@@ -190,7 +190,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                     content.querySelector("#txtDirectoryPickerPath").value = path;
                 } else {
                     refreshDirectoryBrowser(content, path, fileOptions, true)
-                 };
+                }
             }
         });
 
@@ -265,7 +265,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
 
                     var html = "";
                     html += '<div class="formDialogHeader">';
-                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
                     html += '<h3 class="formDialogHeaderTitle">';
                     html += options.header || Globalize.translate("HeaderSelectPath");
                     html += "</h3>";

src/components/dom.js

@@ -68,7 +68,9 @@ define([], function () {
             }
         });
         window.addEventListener("test", null, opts);
-    } catch (e) { }
+    } catch (e) {
+        console.log('error checking capture support');
+    }
 
     function addEventListenerWithOptions(target, type, handler, options) {
         var optionsOrCapture = options;
@@ -116,8 +118,8 @@ define([], function () {
             return _animationEvent;
         }
 
-        var t,
-            el = document.createElement("div");
+        var t;
+        var el = document.createElement("div");
         var animations = {
             "animation": "animationend",
             "OAnimation": "oAnimationEnd",
@@ -146,8 +148,8 @@ define([], function () {
             return _transitionEvent;
         }
 
-        var t,
-            el = document.createElement("div");
+        var t;
+        var el = document.createElement("div");
         var transitions = {
             "transition": "transitionend",
             "OTransition": "oTransitionEnd",

src/components/emby-checkbox/emby-checkbox.js

@@ -54,7 +54,7 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
             outlineClass += ' ' + customClass;
         }
 
-        var checkedIcon = this.getAttribute('data-checkedicon') || '';
+        var checkedIcon = this.getAttribute('data-checkedicon') || 'check';
         var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
         var checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>';
         var uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>';

src/components/emby-input/emby-input.js

@@ -28,11 +28,12 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'
     }
 
     EmbyInputPrototype.createdCallback = function () {
-
         if (!this.id) {
             this.id = 'embyinput' + inputId;
             inputId++;
-        } if (this.classList.contains('emby-input')) {
+        }
+
+        if (this.classList.contains('emby-input')) {
             return;
         }
 

src/components/emby-progressring/emby-progressring.js

@@ -47,8 +47,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
             this.querySelector('.animate-25-50-b').style.transform = 'rotate(-90deg)';
             this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
             this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
-        }
-        else if (progress >= 25 && progress < 50) {
+        } else if (progress >= 25 && progress < 50) {
 
             angle = -90 + ((progress - 25) / 100) * 360;
 
@@ -57,8 +56,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
 
             this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
             this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
-        }
-        else if (progress >= 50 && progress < 75) {
+        } else if (progress >= 50 && progress < 75) {
             angle = -90 + ((progress - 50) / 100) * 360;
 
             this.querySelector('.animate-0-25-b').style.transform = 'none';
@@ -66,8 +64,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
             this.querySelector('.animate-50-75-b').style.transform = 'rotate(' + angle + 'deg)';
 
             this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
-        }
-        else if (progress >= 75 && progress <= 100) {
+        } else if (progress >= 75 && progress <= 100) {
             angle = -90 + ((progress - 75) / 100) * 360;
 
             this.querySelector('.animate-0-25-b').style.transform = 'none';
@@ -85,7 +82,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
 
     EmbyProgressRing.detachedCallback = function () {
 
-
         var observer = this.observer;
 
         if (observer) {

src/components/emby-scrollbuttons/emby-scrollbuttons.js

@@ -7,7 +7,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
 
     function getScrollButtonHtml(direction) {
         var html = '';
-        var icon = direction === 'left' ? '' : '';
+        var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
 
         html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
         html += '<i class="md-icon">' + icon + '</i>';

src/components/emby-select/emby-select.js

@@ -144,7 +144,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
         this.parentNode.insertBefore(label, this);
 
         if (this.classList.contains('emby-select-withcolor')) {
-            this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow md-icon">&#xE313;</i></div>');
+            this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow md-icon">keyboard_arrow_down</i></div>');
         }
     };
 

src/components/emby-textarea/emby-textarea.js

@@ -14,9 +14,9 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
          * @returns {number}
          */
         self.getOffset = function (textarea) {
-            var style = window.getComputedStyle(textarea, null),
-                props = ['paddingTop', 'paddingBottom'],
-                offset = 0;
+            var style = window.getComputedStyle(textarea, null);
+            var props = ['paddingTop', 'paddingBottom'];
+            var offset = 0;
 
             for (var i = 0; i < props.length; i++) {
                 offset += parseInt(style[props[i]]);
@@ -43,13 +43,13 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
                 textarea.rows = 3;
                 return;
             }
-            var newHeight = 0, hasGrown = false;
+            var newHeight = 0;
+            var hasGrown = false;
 
             if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
                 textarea.style.overflowY = 'scroll';
                 newHeight = self.maxAllowedHeight;
-            }
-            else {
+            } else {
                 textarea.style.overflowY = 'hidden';
                 textarea.style.height = 'auto';
                 newHeight = textarea.scrollHeight/* - offset*/;

src/components/favoriteitems.js

@@ -136,7 +136,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate(section.name);
                     html += "</h2>";
-                    html += '<i class="md-icon">&#xE5CC;</i>';
+                    html += '<i class="md-icon">chevron_right</i>';
                     html += "</a>";
                 } else {
                     html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";

src/components/filtermenu/filtermenu.js

@@ -94,7 +94,8 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
         context.querySelector('form').addEventListener('submit', onSubmit);
 
         var elems = context.querySelectorAll('.simpleFilter');
-        var i, length;
+        var i;
+        var length;
 
         for (i = 0, length = elems.length; i < length; i++) {
 
@@ -137,7 +138,8 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
     function saveValues(context, settings, settingsKey) {
 
         var elems = context.querySelectorAll('.simpleFilter');
-        var i, length;
+        var i;
+        var length;
         for (i = 0, length = elems.length; i < length; i++) {
 
             if (elems[i].tagName === 'INPUT') {
@@ -277,7 +279,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 var html = '';
 
                 html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
 
                 html += '</div>';

src/components/focusManager.js

@@ -181,21 +181,18 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
             if (classList.contains('focuscontainer-left')) {
                 return true;
             }
-        }
-        else if (direction === 1) {
+        } else if (direction === 1) {
             if (classList.contains('focuscontainer-x')) {
                 return true;
             }
             if (classList.contains('focuscontainer-right')) {
                 return true;
             }
-        }
-        else if (direction === 2) {
+        } else if (direction === 2) {
             if (classList.contains('focuscontainer-y')) {
                 return true;
             }
-        }
-        else if (direction === 3) {
+        } else if (direction === 3) {
             if (classList.contains('focuscontainer-y')) {
                 return true;
             }
@@ -275,14 +272,14 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
         var rect = getOffset(activeElement);
 
         // Get elements and work out x/y points
-        var cache = [],
-            point1x = parseFloat(rect.left) || 0,
-            point1y = parseFloat(rect.top) || 0,
-            point2x = parseFloat(point1x + rect.width - 1) || point1x,
-            point2y = parseFloat(point1y + rect.height - 1) || point1y,
+        var cache = [];
+        var point1x = parseFloat(rect.left) || 0;
+        var point1y = parseFloat(rect.top) || 0;
+        var point2x = parseFloat(point1x + rect.width - 1) || point1x;
+        var point2y = parseFloat(point1y + rect.height - 1) || point1y;
         // Shortcuts to help with compression
-            min = Math.min,
-            max = Math.max;
+        var min = Math.min;
+        var max = Math.max;
 
         var sourceMidX = rect.left + (rect.width / 2);
         var sourceMidY = rect.top + (rect.height / 2);
@@ -357,10 +354,10 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
                     break;
             }
 
-            var x = elementRect.left,
-                y = elementRect.top,
-                x2 = x + elementRect.width - 1,
-                y2 = y + elementRect.height - 1;
+            var x = elementRect.left;
+            var y = elementRect.top;
+            var x2 = x + elementRect.width - 1;
+            var y2 = y + elementRect.height - 1;
 
             var intersectX = intersects(point1x, point2x, x, x2);
             var intersectY = intersects(point1y, point2y, y, y2);
@@ -470,7 +467,9 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
 
         var elems = container.querySelectorAll(focusableSelector);
         var list = [];
-        var i, length, elem;
+        var i;
+        var length;
+        var elem;
 
         for (i = 0, length = elems.length; i < length; i++) {
 
@@ -513,32 +512,24 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
         focusableParent: focusableParent,
         getFocusableElements: getFocusableElements,
         moveLeft: function (sourceElement, options) {
-
             var container = options ? options.container : null;
             var focusableElements = options ? options.focusableElements : null;
             nav(sourceElement, 0, container, focusableElements);
-
         },
         moveRight: function (sourceElement, options) {
-
             var container = options ? options.container : null;
             var focusableElements = options ? options.focusableElements : null;
             nav(sourceElement, 1, container, focusableElements);
-
         },
         moveUp: function (sourceElement, options) {
-
             var container = options ? options.container : null;
             var focusableElements = options ? options.focusableElements : null;
             nav(sourceElement, 2, container, focusableElements);
-
         },
         moveDown: function (sourceElement, options) {
-
             var container = options ? options.container : null;
             var focusableElements = options ? options.focusableElements : null;
             nav(sourceElement, 3, container, focusableElements);
-
         },
         sendText: sendText,
         isCurrentlyFocusable: isCurrentlyFocusable,

src/components/guide/guide-settings.js

@@ -39,7 +39,8 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
 
     function save(context) {
 
-        var i, length;
+        var i;
+        var length;
 
         var chkIndicators = context.querySelectorAll('.chkIndicator');
         for (i = 0, length = chkIndicators.length; i < length; i++) {
@@ -62,7 +63,8 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
 
     function load(context) {
 
-        var i, length;
+        var i;
+        var length;
 
         var chkIndicators = context.querySelectorAll('.chkIndicator');
         for (i = 0, length = chkIndicators.length; i < length; i++) {

src/components/guide/guide-settings.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Settings}
     </h3>

src/components/guide/guide.js

@@ -392,27 +392,20 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         }
 
         function parseDates(program) {
-
             if (!program.StartDateLocal) {
                 try {
-
                     program.StartDateLocal = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
-
                 } catch (err) {
-
+                    console.log('error parsing timestamp for start date');
                 }
-
             }
 
             if (!program.EndDateLocal) {
                 try {
-
                     program.EndDateLocal = datetime.parseISO8601Date(program.EndDate, { toLocal: true });
-
                 } catch (err) {
-
+                    console.log('error parsing timestamp for end date');
                 }
-
             }
 
             return null;
@@ -423,30 +416,27 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             var status;
 
             if (item.Type === 'SeriesTimer') {
-                return '<i class="md-icon programIcon seriesTimerIcon">&#xE062;</i>';
-            }
-            else if (item.TimerId || item.SeriesTimerId) {
+                return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</i>';
+            } else if (item.TimerId || item.SeriesTimerId) {
 
                 status = item.Status || 'Cancelled';
-            }
-            else if (item.Type === 'Timer') {
+            } else if (item.Type === 'Timer') {
 
                 status = item.Status;
-            }
-            else {
+            } else {
                 return '';
             }
 
             if (item.SeriesTimerId) {
 
                 if (status !== 'Cancelled') {
-                    return '<i class="md-icon programIcon seriesTimerIcon">&#xE062;</i>';
+                    return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</i>';
                 }
 
-                return '<i class="md-icon programIcon seriesTimerIcon seriesTimerIcon-inactive">&#xE062;</i>';
+                return '<i class="md-icon programIcon seriesTimerIcon seriesTimerIcon-inactive">fiber_smart_record</i>';
             }
 
-            return '<i class="md-icon programIcon timerIcon">&#xE061;</i>';
+            return '<i class="md-icon programIcon timerIcon">fiber_manual_record</i>';
         }
 
         function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
@@ -529,11 +519,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 } else if (program.IsMovie) {
                     displayInnerContent = displayMovieContent;
                     accentCssClass = 'movie';
-                }
-                else if (program.IsSeries) {
+                } else if (program.IsSeries) {
                     displayInnerContent = displaySeriesContent;
-                }
-                else {
+                } else {
                     displayInnerContent = displayMovieContent && displayNewsContent && displaySportsContent && displayKidsContent && displaySeriesContent;
                 }
 
@@ -562,21 +550,18 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                     html += '<div class="' + guideProgramNameClass + '">';
 
-                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon md-icon">&#xE314;</i></div>';
+                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon md-icon">keyboard_arrow_left</i></div>';
 
                     html += '<div class="guideProgramNameText">' + program.Name;
 
                     var indicatorHtml = null;
                     if (program.IsLive && options.showLiveIndicator) {
                         indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('Live') + '</span>';
-                    }
-                    else if (program.IsPremiere && options.showPremiereIndicator) {
+                    } else if (program.IsPremiere && options.showPremiereIndicator) {
                         indicatorHtml = '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('Premiere') + '</span>';
-                    }
-                    else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
+                    } else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
                         indicatorHtml = '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('AttributeNew') + '</span>';
-                    }
-                    else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
+                    } else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
                         indicatorHtml = '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('Repeat') + '</span>';
                     }
                     html += indicatorHtml || '';
@@ -614,7 +599,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             return html;
         }
 
-
         function renderChannelHeaders(context, channels, apiClient) {
 
             var html = '';
@@ -1079,17 +1063,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                     scrollHelper.toStart(programGrid, programCell, true, true);
                 }
-            }
-
-            else if (lastFocusDirection === 'right') {
+            } else if (lastFocusDirection === 'right') {
 
                 if (programCell) {
 
                     scrollHelper.toCenter(programGrid, programCell, true, true);
                 }
-            }
-
-            else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
+            } else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
 
                 var verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller');
                 if (verticalScroller) {
@@ -1126,7 +1106,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                 var icon = cell.querySelector('.timerIcon');
                 if (!icon) {
-                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon md-icon programIcon">&#xE061;</i>');
+                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon md-icon programIcon">fiber_manual_record</i>');
                 }
 
                 if (newTimerId) {

src/components/guide/tvguide.template.html

@@ -10,7 +10,7 @@
     <div class="guide-headerTimeslots">
         <div class="guide-channelTimeslotHeader">
             <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
-                <i class="md-icon btnGuideViewSettingsIcon">&#xE5D3;</i>
+                <i class="md-icon btnGuideViewSettingsIcon">more_horiz</i>
             </button>
         </div>
         <div class="timeslotHeaders scrollX guideScroller"></div>
@@ -30,9 +30,9 @@
 
 <div class="guideOptions hide">
     <button is="paper-icon-button-light" type="button" class="btnPreviousPage">
-        <i class="md-icon">&#xE5C4;</i>
+        <i class="md-icon">arrow_back</i>
     </button>
     <button is="paper-icon-button-light" type="button" class="btnNextPage">
-        <i class="md-icon">&#xE5C8;</i>
+        <i class="md-icon">arrow_forward</i>
     </button>
 </div>

src/components/headroom/headroom.js

@@ -255,8 +255,8 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
          * @return {bool} true if should unpin, false otherwise
          */
         this.shouldUnpin = function (currentScrollY) {
-            var scrollingDown = currentScrollY > this.lastKnownScrollY,
-                pastOffset = currentScrollY >= this.offset;
+            var scrollingDown = currentScrollY > this.lastKnownScrollY;
+            var pastOffset = currentScrollY >= this.offset;
 
             return scrollingDown && pastOffset;
         };
@@ -267,8 +267,8 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
          * @return {bool} true if should pin, false otherwise
          */
         this.shouldPin = function (currentScrollY) {
-            var scrollingUp = currentScrollY < this.lastKnownScrollY,
-                pastOffset = currentScrollY <= this.offset;
+            var scrollingUp = currentScrollY < this.lastKnownScrollY;
+            var pastOffset = currentScrollY <= this.offset;
 
             return scrollingUp || pastOffset;
         };
@@ -290,11 +290,9 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
 
             if (currentScrollY <= (isTv ? 120 : 10)) {
                 this.clear();
-            }
-            else if (this.shouldUnpin(currentScrollY)) {
+            } else if (this.shouldUnpin(currentScrollY)) {
                 this.unpin();
-            }
-            else if (this.shouldPin(currentScrollY)) {
+            } else if (this.shouldPin(currentScrollY)) {
 
                 var toleranceExceeded = Math.abs(currentScrollY - lastKnownScrollY) >= 14;
 
@@ -310,7 +308,6 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
             this.lastKnownScrollY = currentScrollY;
         };
 
-      
         if (browser.supportsCssAnimation()) {
             for (var i = 0, length = this.elems.length; i < length; i++) {
                 this.elems[i].classList.add(this.initialClass);

src/components/homescreensettings/homescreensettings.js

@@ -57,8 +57,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 name: globalize.translate('Collections'),
                 value: 'collections'
             });
-        }
-        else if (type === 'tvshows') {
+        } else if (type === 'tvshows') {
 
             list.push({
                 name: globalize.translate('Shows'),
@@ -78,8 +77,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 name: globalize.translate('Favorites'),
                 value: 'favorites'
             });
-        }
-        else if (type === 'music') {
+        } else if (type === 'music') {
 
             list.push({
                 name: globalize.translate('Suggestions'),
@@ -111,8 +109,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 name: globalize.translate('Genres'),
                 value: 'genres'
             });
-        }
-        else if (type === 'livetv') {
+        } else if (type === 'livetv') {
 
             list.push({
                 name: globalize.translate('Suggestions'),
@@ -152,7 +149,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
 
-            currentHtml += '<i class="md-icon listItemIcon">&#xE2C8;</i>';
+            currentHtml += '<i class="md-icon listItemIcon">folder_open</i>';
 
             currentHtml += '<div class="listItemBody">';
 
@@ -162,8 +159,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '</div>';
 
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="md-icon">&#xE316;</i></button>';
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="md-icon">&#xE313;</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="md-icon">keyboard_arrow_up</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="md-icon">keyboard_arrow_down</i></button>';
 
             currentHtml += '</div>';
 
@@ -256,7 +253,6 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
             html += '</div>';
         }
 
-
         return html;
     }
 
@@ -384,7 +380,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
         var viewItems = context.querySelectorAll('.viewItem');
         var orderedViews = [];
-        var i, length;
+        var i;
+        var length;
         for (i = 0, length = viewItems.length; i < length; i++) {
             orderedViews.push(viewItems[i].getAttribute('data-viewid'));
         }

src/components/homesections/homesections.js

@@ -83,7 +83,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function resume(elem, options) {
         var elems = elem.querySelectorAll('.itemsContainer');
-        var i, length;
+        var i;
+        var length;
         var promises = [];
 
         for (i = 0, length = elems.length; i < length; i++) {
@@ -259,7 +260,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('LatestFromLibrary', parent.Name);
             html += '</h2>';
-            html += '<i class="md-icon">&#xE5CC;</i>';
+            html += '<i class="md-icon">chevron_right</i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
@@ -607,7 +608,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate('HeaderOnNow');
                     html += '</h2>';
-                    html += '<i class="md-icon">&#xE5CC;</i>';
+                    html += '<i class="md-icon">chevron_right</i>';
                     html += '</a>';
 
                 } else {
@@ -682,7 +683,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('HeaderNextUp');
             html += '</h2>';
-            html += '<i class="md-icon">&#xE5CC;</i>';
+            html += '<i class="md-icon">chevron_right</i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';

src/components/htmlMediaHelper.js

@@ -12,7 +12,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
     }
 
     function getCrossOriginValue(mediaSource) {
-
         if (mediaSource.IsRemote) {
             return null;
         }
@@ -97,7 +96,8 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         return true;
     }
 
-    var recoverDecodingErrorDate, recoverSwapAudioCodecDate;
+    var recoverDecodingErrorDate;
+    var recoverSwapAudioCodecDate;
     function handleHlsJsMediaError(instance, reject) {
 
         var hlsPlayer = instance._hlsPlayer;
@@ -144,7 +144,8 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         events.trigger(instance, 'error', [
             {
                 type: type
-            }]);
+            }
+        ]);
     }
 
     function isValidDuration(duration) {
@@ -156,7 +157,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
     }
 
     function setCurrentTimeIfNeeded(element, seconds) {
-
         if (Math.abs(element.currentTime || 0, seconds) <= 1) {
             element.currentTime = seconds;
         }
@@ -354,9 +354,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                             } else {
                                 onErrorInternal(instance, 'network');
                             }
-                        }
-
-                        else {
+                        } else {
                             console.log("fatal network error encountered, try to recover");
                             hls.startLoad();
                         }

src/components/htmlaudioplayer/plugin.js

@@ -168,7 +168,6 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
                     });
                 });
 
-
             }, function () {
 
                 elem.autoplay = true;

src/components/htmlvideoplayer/plugin.js

@@ -532,12 +532,8 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             } else*/ if (browser.chromecast && val.indexOf('.m3u8') !== -1 && options.mediaSource.RunTimeTicks) {
 
                 return setCurrentSrcChromecast(self, elem, options, val);
-            }
-
-            else if (htmlMediaHelper.enableHlsJsPlayer(options.mediaSource.RunTimeTicks, 'Video') && val.indexOf('.m3u8') !== -1) {
-                
+            } else if (htmlMediaHelper.enableHlsJsPlayer(options.mediaSource.RunTimeTicks, 'Video') && val.indexOf('.m3u8') !== -1) {
                 return setSrcWithHlsJs(self, elem, options, val);
-
             } else if (options.playMethod !== 'Transcode' && options.mediaSource.Container === 'flv') {
 
                 return setSrcWithFlvJs(self, elem, options, val);
@@ -650,7 +646,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             return profiles.filter(function (p) {
 
-
                 if (p.Type === 'Video') {
 
                     if (!p.AudioCodec) {
@@ -683,7 +678,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             }
 
             var audioIndex = -1;
-            var i, length, stream;
+            var i;
+            var length;
+            var stream;
 
             for (i = 0, length = streams.length; i < length; i++) {
                 stream = streams[i];
@@ -1029,8 +1026,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             if (browser.ps4) {
                 // Text outlines are not rendering very well
                 rendererSettings.enableSvg = false;
-            }
-            else if (browser.edge || browser.msie) {
+            } else if (browser.edge || browser.msie) {
                 // svg not rendering at all
                 rendererSettings.enableSvg = false;
             }
@@ -1481,6 +1477,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         }
 
         list.push('SetBrightness');
+        list.push("SetAspectRatio")
 
         return list;
     }
@@ -1561,8 +1558,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             this.isPip = isEnabled;
             if (isEnabled) {
                 Windows.UI.ViewManagement.ApplicationView.getForCurrentView().tryEnterViewModeAsync(Windows.UI.ViewManagement.ApplicationViewMode.compactOverlay);
-            }
-            else {
+            } else {
                 Windows.UI.ViewManagement.ApplicationView.getForCurrentView().tryEnterViewModeAsync(Windows.UI.ViewManagement.ApplicationViewMode.default);
             }
         } else {
@@ -1709,7 +1705,15 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
     };
 
     HtmlVideoPlayer.prototype.setAspectRatio = function (val) {
-
+        var mediaElement = this._mediaElement;
+        if (mediaElement) {
+            if ("auto" === val) {
+                mediaElement.style.removeProperty("object-fit")
+            } else {
+                mediaElement.style["object-fit"] = val
+            }
+        }
+        this._currentAspectRatio = val
     };
 
     HtmlVideoPlayer.prototype.getAspectRatio = function () {
@@ -1717,7 +1721,16 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
     };
 
     HtmlVideoPlayer.prototype.getSupportedAspectRatios = function () {
-        return [];
+        return [{
+            name: "Auto",
+            id: "auto"
+        }, {
+            name: "Cover",
+            id: "cover"
+        }, {
+            name: "Fill",
+            id: "fill"
+        }]
     };
 
     HtmlVideoPlayer.prototype.togglePictureInPicture = function () {

src/components/imagedownloader/imagedownloader.js

@@ -116,7 +116,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (showControls) {
             html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
 
-            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="md-icon">arrow_back</i></button>';
             html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="md-icon">arrow_forward</i></button>';
             html += '</div>';
         }
@@ -176,22 +176,17 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         var shape = 'backdrop';
         if (imageType === "Backdrop" || imageType === "Art" || imageType === "Thumb" || imageType === "Logo") {
             shape = 'backdrop';
-        }
-        else if (imageType === "Banner") {
+        } else if (imageType === "Banner") {
             shape = 'banner';
-        }
-        else if (imageType === "Disc") {
+        } else if (imageType === "Disc") {
             shape = 'square';
-        }
-        else {
+        } else {
 
             if (currentItemType === "Episode") {
                 shape = 'backdrop';
-            }
-            else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
+            } else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
                 shape = 'square';
-            }
-            else {
+            } else {
                 shape = 'portrait';
             }
         }
@@ -224,8 +219,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
 
         if (layoutManager.tv || !appHost.supports('externallinks')) {
             html += '<div class="cardImageContainer lazy" data-src="' + getDisplayUrl(image.Url, apiClient) + '" style="background-position:center bottom;"></div>';
-        }
-        else {
+        } else {
             html += '<a is="emby-linkbutton" target="_blank" href="' + getDisplayUrl(image.Url, apiClient) + '" class="button-link cardImageContainer lazy" data-src="' + getDisplayUrl(image.Url, apiClient) + '" style="background-position:center bottom;"></a>';
         }
 
@@ -283,7 +277,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (enableFooterButtons) {
             html += '<div class="cardText cardTextCentered">';
 
-            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="md-icon">&#xE2C0;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="md-icon">cloud_download</i></button>';
             html += '</div>';
         }
 

src/components/imagedownloader/imagedownloader.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Search}
     </h3>

src/components/imageeditor/imageeditor.js

@@ -24,8 +24,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
         if (item) {
             apiClient = connectionManager.getApiClient(item.ServerId);
             reloadItem(page, item, apiClient, focusContext);
-        }
-        else {
+        } else {
 
             apiClient = connectionManager.getApiClient(currentItem.ServerId);
             apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) {
@@ -60,7 +59,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                 }
             }
 
-
             apiClient.getItemImageInfos(currentItem.Id).then(function (imageInfos) {
 
                 renderStandardImages(page, apiClient, item, imageInfos, providers);
@@ -167,8 +165,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                 } else {
                     html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
                 }
-            }
-            else {
+            } else {
                 if (imageProviders.length) {
                     html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><i class="md-icon">search</i></button>';
                 }

src/components/imageeditor/imageeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderEditImages}
     </h3>
@@ -12,10 +12,10 @@
             <div class="imageEditor-buttons first-imageEditor-buttons">
                 <h2 style="margin:0;">${Images}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
-                    <i class="md-icon">&#xE8B6;</i>
+                    <i class="md-icon">search</i>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
             </div>
             <div id="images" class="itemsContainer vertical-wrap">
@@ -27,10 +27,10 @@
             <div class="imageEditor-buttons">
                 <h2 style="margin:0;">${Backdrops}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
-                    <i class="md-icon">&#xE8B6;</i>
+                    <i class="md-icon">search</i>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
             </div>
             <div id="backdrops" class="itemsContainer vertical-wrap">
@@ -42,10 +42,10 @@
             <div class="imageEditor-buttons">
                 <h2 style="margin: 0;">${Screenshots}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
-                    <i class="md-icon">&#xE8B6;</i>
+                    <i class="md-icon">search</i>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Screenshot">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
             </div>
             <div id="screenshots" class="itemsContainer vertical-wrap">

src/components/imageoptionseditor/imageoptionseditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderImageOptions}
     </h3>

src/components/images/imageLoader.js

@@ -70,7 +70,9 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
         }
 
         // Use the median
-        values.sort(function (a, b) { return a - b; });
+        values.sort(function (a, b) {
+            return a - b;
+        });
 
         var half = Math.floor(values.length / 2);
 
@@ -78,8 +80,7 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
 
         if (values.length % 2) {
             result = values[half];
-        }
-        else {
+        } else {
             result = (values[half - 1] + values[half]) / 2.0;
         }
 

src/components/imageuploader/imageuploader.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderUploadImage}
     </h3>
@@ -14,7 +14,7 @@
                 <h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
 
                 <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
-                    <i class="md-icon">&#xE2C7;</i>
+                    <i class="md-icon">folder</i>
                     <span>${Browse}</span>
                 </button>
             </div>

src/components/indicators/indicators.js

@@ -90,7 +90,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
             }
 
             if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
-                return '<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">&#xE5CA;</i></div>';
+                return '<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">check</i></div>';
             }
         }
 
@@ -119,7 +119,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
+            return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
         } else if (item.TimerId || item.SeriesTimerId) {
             status = item.Status || 'Cancelled';
         } else if (item.Type === 'Timer') {
@@ -130,20 +130,20 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
 
         if (item.SeriesTimerId) {
             if (status !== 'Cancelled') {
-                return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
+                return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
             }
 
-            return '<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">&#xE062;</i>';
+            return '<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">fiber_smart_record</i>';
         }
 
-        return '<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>';
+        return '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>';
     }
 
     function getSyncIndicator(item) {
         if (item.SyncPercent === 100) {
-            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>';
+            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
         } else if (item.SyncPercent != null) {
-            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>';
+            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
         }
 
         return '';
@@ -151,13 +151,13 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
 
     function getTypeIndicator(item) {
         if (item.Type === 'Video') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE04B;</i></div>';
+            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">videocam</i></div>';
         }
         if (item.Type === 'Folder' || item.Type === 'PhotoAlbum') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE2C7;</i></div>';
+            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">folder</i></div>';
         }
         if (item.Type === 'Photo') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE410;</i></div>';
+            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">photo</i></div>';
         }
 
         return '';

src/components/itemMediaInfo/itemMediaInfo.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderMediaInfo}
     </h3>

src/components/itemcontextmenu.js

@@ -52,8 +52,6 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
             //}
         }
 
-
-
         if (item.IsFolder || item.Type === "MusicArtist" || item.Type === "MusicGenre") {
             if (item.CollectionType !== "livetv") {
                 if (options.shuffle !== false) {

src/components/itemhelper.js

@@ -250,9 +250,7 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
                 if (item.Type !== 'TvChannel') {
                     return true;
                 }
-            }
-
-            else if (item.MediaType === 'Audio') {
+            } else if (item.MediaType === 'Audio') {
                 if (item.Type === 'AudioPodcast') {
                     return true;
                 }
@@ -274,7 +272,13 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
 
         canRate: function (item) {
 
-            if (item.Type === 'Program' || item.Type === 'Timer' || item.Type === 'SeriesTimer' || item.Type === 'CollectionFolder' || item.Type === 'UserView' || item.Type === 'Channel') {
+            if (item.Type === 'Program'
+                || item.Type === 'Timer'
+                || item.Type === 'SeriesTimer'
+                || item.Type === 'CollectionFolder'
+                || item.Type === 'UserView'
+                || item.Type === 'Channel'
+                || !item.UserData) {
                 return false;
             }
 

src/components/itemidentifier/itemidentifier.js

@@ -21,7 +21,8 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
             ProviderIds: {}
         };
 
-        var i, length;
+        var i;
+        var length;
         var identifyField = page.querySelectorAll(".identifyField");
         var value;
         for (i = 0, length = identifyField.length; i < length; i++) {
@@ -64,8 +65,7 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
         if (currentItem && currentItem.Id) {
             lookupInfo.ItemId = currentItem.Id;
-        }
-        else {
+        } else {
             lookupInfo.IncludeDisabledProviders = true;
         }
 
@@ -97,7 +97,8 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
         page.querySelector(".dialogContentInner").classList.remove("dialog-content-centered");
 
         var html = "";
-        var i, length;
+        var i;
+        var length;
         for (i = 0, length = results.length; i < length; i++) {
 
             var result = results[i];
@@ -184,12 +185,10 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
         if (currentItemType === "Episode") {
             cssClass += " backdropCard backdropCard-scalable";
             padderClass = "cardPadder-backdrop";
-        }
-        else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
+        } else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
             cssClass += " squareCard squareCard-scalable";
             padderClass = "cardPadder-square";
-        }
-        else {
+        } else {
             cssClass += " portraitCard portraitCard-scalable";
             padderClass = "cardPadder-portrait";
         }
@@ -452,8 +451,6 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
                 scrollHelper.centerFocus.on(dlg.querySelector(".formDialogContent"), false);
             }
 
-
-
             dialogHelper.open(dlg);
 
             dlg.querySelector(".btnCancel").addEventListener("click", function (e) {

src/components/itemidentifier/itemidentifier.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="md-icon">&#xE5C4;</i>
+        <i class="md-icon">arrow_back</i>
     </button>
     <h3 class="formDialogHeaderTitle">
         ${Identify}

src/components/itemsrefresher.js

@@ -11,8 +11,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         if (eventsToMonitor.indexOf('markfavorite') !== -1) {
 
             instance.notifyRefreshNeeded();
-        }
-        else if (eventsToMonitor.indexOf('markplayed') !== -1) {
+        } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
 
             instance.notifyRefreshNeeded();
         }
@@ -115,9 +114,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
                 instance.notifyRefreshNeeded(true);
                 return;
             }
-        }
-
-        else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
+        } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
 
             if (eventsToMonitor.indexOf('audioplayback') !== -1) {
 

src/components/keyboardnavigation.js

@@ -31,6 +31,6 @@ define(['inputManager', 'focusManager'], function(inputManager, focusManager) {
 
     }
     return {
-        enable: enable,
+        enable: enable
     };
 });

src/components/listview/listview.js

@@ -9,7 +9,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         }
 
         var sortBy = (options.sortBy || '').toLowerCase();
-        var code, name;
+        var code;
+        var name;
 
         if (sortBy.indexOf('sortname') === 0) {
 
@@ -85,15 +86,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             options.tag = item.AlbumPrimaryImageTag;
             return apiClient.getScaledImageUrl(item.AlbumId, options);
-        }
-
-        else if (item.SeriesId && item.SeriesPrimaryImageTag) {
+        } else if (item.SeriesId && item.SeriesPrimaryImageTag) {
 
             options.tag = item.SeriesPrimaryImageTag;
             return apiClient.getScaledImageUrl(item.SeriesId, options);
 
-        }
-        else if (item.ParentPrimaryImageTag) {
+        } else if (item.ParentPrimaryImageTag) {
 
             options.tag = item.ParentPrimaryImageTag;
             return apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, options);
@@ -209,8 +207,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
                     if (i === 0) {
                         html += '<h2 class="listGroupHeader listGroupHeader-first">';
-                    }
-                    else {
+                    } else {
                         html += '<h2 class="listGroupHeader">';
                     }
                     html += itemGroupTitle;
@@ -265,9 +262,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
 
             if (!clickEntireItem && options.dragHandle) {
-                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="md-icon">&#xE25D;</i></button>';
+                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="md-icon">drag_handle</i></button>';
                 // Firefox and Edge are not allowing the button to be draggable
-                html += '<i class="listViewDragHandle md-icon listItemIcon listItemIcon-transparent">&#xE25D;</i>';
+                html += '<i class="listViewDragHandle md-icon listItemIcon listItemIcon-transparent">drag_handle</i>';
             }
 
             if (options.image !== false) {
@@ -301,7 +298,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (playOnImageClick) {
-                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="md-icon listItemImageButton-icon">&#xE037;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="md-icon listItemImageButton-icon">play_arrow</i></button>';
                 }
 
                 var progressHtml = indicators.getProgressBarHtml(item, {
@@ -349,9 +346,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             if (options.showParentTitle) {
                 if (item.Type === 'Episode') {
                     parentTitle = item.SeriesName;
-                }
-
-                else if (item.IsSeries || (item.EpisodeTitle && item.Name)) {
+                } else if (item.IsSeries || (item.EpisodeTitle && item.Name)) {
                     parentTitle = item.Name;
                 }
             }
@@ -375,8 +370,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 textlines.push(parentTitle || '');
-            }
-            else if (options.showParentTitle) {
+            } else if (options.showParentTitle) {
                 textlines.push(parentTitle || '');
             }
 
@@ -400,8 +394,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
                     if (!artistItems || !artistItems.length) {
                         showArtist = true;
-                    }
-                    else if (artistItems.length > 1 || containerAlbumArtistIds.indexOf(artistItems[0].Id) === -1) {
+                    } else if (artistItems.length > 1 || containerAlbumArtistIds.indexOf(artistItems[0].Id) === -1) {
                         showArtist = true;
                     }
                 }
@@ -434,7 +427,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             html += '<div class="' + cssClass + '">';
 
-            var moreIcon = '&#xE5D3;';
+            var moreIcon = 'more_horiz';
 
             html += getTextLinesHtml(textlines, isLargeStyle);
 
@@ -481,7 +474,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             if (!clickEntireItem) {
 
                 if (options.addToListButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="md-icon">&#xE03B;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="md-icon">playlist_add</i></button>';
                 }
 
                 if (options.moreButton !== false) {
@@ -489,7 +482,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (options.infoButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="md-icon">&#xE88F;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="md-icon">info_outline</i></button>';
                 }
 
                 if (options.rightButtons) {
@@ -504,11 +497,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
                     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) + '"><i class="md-icon">&#xE5CA;</i></button>';
+                        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) + '"><i class="md-icon">check</i></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) + '"><i class="md-icon">&#xE87D;</i></button>';
+                        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) + '"><i class="md-icon">favorite</i></button>';
                     }
 
                     html += '</span>';

src/components/loading/loading.js

@@ -45,7 +45,8 @@ define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], functio
             layer3.classList.add('mdl-spinner__layer-3-active');
             layer4.classList.add('mdl-spinner__layer-4-active');
 
-            var i, length;
+            var i;
+            var length;
 
             for (i = 0, length = circleLefts.length; i < length; i++) {
                 circleLefts[i].classList.add('mdl-spinner__circleLeft-active');
@@ -67,7 +68,8 @@ define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], functio
                 elem.classList.remove('mdl-spinner__layer-3-active');
                 elem.classList.remove('mdl-spinner__layer-4-active');
 
-                var i, length;
+                var i;
+                var length;
 
                 for (i = 0, length = circleLefts.length; i < length; i++) {
                     circleLefts[i].classList.remove('mdl-spinner__circleLeft-active');

src/components/mediainfo/mediainfo.js

@@ -6,37 +6,35 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE062;</i>';
-        }
-        else if (item.TimerId || item.SeriesTimerId) {
+            return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
+        } else if (item.TimerId || item.SeriesTimerId) {
 
             status = item.Status || 'Cancelled';
-        }
-        else if (item.Type === 'Timer') {
+        } else if (item.Type === 'Timer') {
 
             status = item.Status;
-        }
-        else {
+        } else {
             return '';
         }
 
         if (item.SeriesTimerId) {
 
             if (status !== 'Cancelled') {
-                return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE062;</i>';
+                return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
             }
 
-            return '<i class="md-icon mediaInfoItem mediaInfoIconItem">&#xE062;</i>';
+            return '<i class="md-icon mediaInfoItem mediaInfoIconItem">fiber_smart_record</i>';
         }
 
-        return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE061;</i>';
+        return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_manual_record</i>';
     }
 
     function getProgramInfoHtml(item, options) {
         var html = '';
 
         var miscInfo = [];
-        var text, date;
+        var text;
+        var date;
 
         if (item.StartDate && options.programTime !== false) {
 
@@ -58,8 +56,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 }
 
                 miscInfo.push(text);
-            }
-            catch (e) {
+            } catch (e) {
                 console.log("Error parsing date: " + item.StartDate);
             }
         }
@@ -107,7 +104,9 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
         var miscInfo = [];
         options = options || {};
-        var text, date, minutes;
+        var text;
+        var date;
+        var minutes;
         var count;
 
         var showFolderRuntime = item.Type === "MusicAlbum" || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre';
@@ -124,9 +123,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             if (item.RunTimeTicks) {
                 miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
             }
-        }
-
-        else if (item.Type === "PhotoAlbum" || item.Type === "BoxSet") {
+        } else if (item.Type === "PhotoAlbum" || item.Type === "BoxSet") {
 
             count = item.ChildCount;
 
@@ -145,8 +142,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
                     text = datetime.toLocaleDateString(date);
                     miscInfo.push(text);
-                }
-                catch (e) {
+                } catch (e) {
                     console.log("Error parsing date: " + item.PremiereDate);
                 }
             }
@@ -162,8 +158,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
             if (item.RecordAnyChannel) {
                 miscInfo.push(globalize.translate('AllChannels'));
-            }
-            else {
+            } else {
                 miscInfo.push(item.ChannelName || globalize.translate('OneChannel'));
             }
         }
@@ -180,8 +175,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     text = datetime.getDisplayTime(date);
                     miscInfo.push(text);
                 }
-            }
-            catch (e) {
+            } catch (e) {
                 console.log("Error parsing date: " + item.StartDate);
             }
         }
@@ -191,8 +185,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             if (item.Status === "Continuing") {
                 miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear));
 
-            }
-            else if (item.ProductionYear) {
+            } else if (item.ProductionYear) {
 
                 text = item.ProductionYear;
 
@@ -206,8 +199,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                             text += "-" + datetime.parseISO8601Date(item.EndDate).getFullYear();
                         }
 
-                    }
-                    catch (e) {
+                    } catch (e) {
                         console.log("Error parsing date: " + item.EndDate);
                     }
                 }
@@ -223,18 +215,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     miscInfo.push({
                         html: '<div class="mediaInfoProgramAttribute mediaInfoItem liveTvProgram">' + globalize.translate('Live') + '</div>'
                     });
-                }
-                else if (item.IsPremiere) {
+                } else if (item.IsPremiere) {
                     miscInfo.push({
                         html: '<div class="mediaInfoProgramAttribute mediaInfoItem premiereTvProgram">' + globalize.translate('Premiere') + '</div>'
                     });
-                }
-                else if (item.IsSeries && !item.IsRepeat) {
+                } else if (item.IsSeries && !item.IsRepeat) {
                     miscInfo.push({
                         html: '<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">' + globalize.translate('AttributeNew') + '</div>'
                     });
-                }
-                else if (item.IsSeries && item.IsRepeat) {
+                } else if (item.IsSeries && item.IsRepeat) {
                     miscInfo.push({
                         html: '<div class="mediaInfoProgramAttribute mediaInfoItem repeatTvProgram">' + globalize.translate('Repeat') + '</div>'
                     });
@@ -250,20 +239,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 if (text) {
                     miscInfo.push(text);
                 }
-            }
-
-            else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) {
+            } else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) {
                 miscInfo.push(item.ProductionYear);
-            }
-
-            else if (item.PremiereDate && options.originalAirDate !== false) {
+            } else if (item.PremiereDate && options.originalAirDate !== false) {
 
                 try {
                     date = datetime.parseISO8601Date(item.PremiereDate);
                     text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date));
                     miscInfo.push(text);
-                }
-                catch (e) {
+                } catch (e) {
                     console.log("Error parsing date: " + item.PremiereDate);
                 }
             } else if (item.ProductionYear) {
@@ -277,14 +261,12 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 if (item.ProductionYear) {
 
                     miscInfo.push(item.ProductionYear);
-                }
-                else if (item.PremiereDate) {
+                } else if (item.PremiereDate) {
 
                     try {
                         text = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
                         miscInfo.push(text);
-                    }
-                    catch (e) {
+                    } catch (e) {
                         console.log("Error parsing date: " + item.PremiereDate);
                     }
                 }
@@ -411,7 +393,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         if (rating) {
             html += '<div class="starRatingContainer mediaInfoItem">';
 
-            html += '<i class="md-icon starIcon">&#xE838;</i>';
+            html += '<i class="md-icon starIcon">star</i>';
             html += rating;
             html += '</div>';
         }

src/components/medialibrarycreator/medialibrarycreator.js

@@ -151,8 +151,8 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
                 var xhr = new XMLHttpRequest;
                 xhr.open("GET", "components/medialibrarycreator/medialibrarycreator.template.html", true);
                 xhr.onload = function(e) {
-                    var template = this.response,
-                        dlg = dialogHelper.createDialog({
+                    var template = this.response;
+                    var dlg = dialogHelper.createDialog({
                         size: "medium-tall",
                         modal: false,
                         removeOnClose: true,

src/components/medialibrarycreator/medialibrarycreator.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
 </div>
 

src/components/medialibraryeditor/medialibraryeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 

src/components/metadataeditor/metadataeditor.js

@@ -144,7 +144,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             AirTime: form.querySelector('#txtAirTime').value,
             Genres: getListValues(form.querySelector("#listGenres")),
             Tags: getListValues(form.querySelector("#listTags")),
-            Studios: getListValues(form.querySelector("#listStudios")).map(function (element) { return { Name: element }; }),
+            Studios: getListValues(form.querySelector("#listStudios")).map(function (element) {
+                return { Name: element };
+            }),
 
             PremiereDate: getDateValue(form, '#txtPremiereDate', 'PremiereDate'),
             DateCreated: getDateValue(form, '#txtDateAdded', 'DateCreated'),
@@ -202,7 +204,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function getListValues(list) {
-        return Array.prototype.map.call(list.querySelectorAll('.textValue'), function (el) { return el.textContent; });
+        return Array.prototype.map.call(list.querySelectorAll('.textValue'), function (el) {
+            return el.textContent;
+        });
     }
 
     function addElementToList(source, sortCallback) {
@@ -439,7 +443,6 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         var html = metadataInfo.ContentTypeOptions.map(function (i) {
 
-
             return '<option value="' + i.Value + '">' + i.Name + '</option>';
 
         }).join('');
@@ -744,7 +747,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         populateListView(context.querySelector('#listGenres'), item.Genres);
         populatePeople(context, item.People || []);
 
-        populateListView(context.querySelector('#listStudios'), (item.Studios || []).map(function (element) { return element.Name || ''; }));
+        populateListView(context.querySelector('#listStudios'), (item.Studios || []).map(function (element) {
+            return element.Name || '';
+        }));
 
         populateListView(context.querySelector('#listTags'), item.Tags);
 
@@ -783,8 +788,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         if (item.Type === 'Series') {
             context.querySelector('#selectDisplayOrder').value = item.DisplayOrder || '';
-        }
-        else {
+        } else {
             context.querySelector('#selectDisplayOrder').value = item.DisplayOrder || '';
         }
 
@@ -859,7 +863,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         html += "<option value=''></option>";
 
         var ratings = [];
-        var i, length, rating;
+        var i;
+        var length;
+        var rating;
 
         var currentValueFound = false;
 
@@ -901,7 +907,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         items = items || [];
         if (typeof (sortCallback) === 'undefined') {
-            items.sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); });
+            items.sort(function (a, b) {
+                return a.toLowerCase().localeCompare(b.toLowerCase());
+            });
         } else {
             items = sortCallback(items);
         }

src/components/metadataeditor/metadataeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
@@ -184,7 +184,7 @@
                     ${Genres}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div class="paperList" id="listGenres"></div>
             </div>
@@ -193,7 +193,7 @@
                     ${People}
                 </h2>
                 <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div id="peopleList" class="paperList">
                 </div>
@@ -203,7 +203,7 @@
                     ${Studios}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div class="paperList" id="listStudios"></div>
             </div>
@@ -212,7 +212,7 @@
                     ${Tags}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div class="paperList" id="listTags"></div>
             </div>

src/components/metadataeditor/personeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>

src/components/multiselect/multiselect.js

@@ -1,5 +1,5 @@
-define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'appRouter', 'dom', 'css!./multiselect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) {
-    'use strict';
+define(["browser", "appStorage", "apphost", "loading", "connectionManager", "globalize", "appRouter", "dom", "css!./multiselect"], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) {
+    "use strict";
 
     var selectedItems = [];
     var selectedElements = [];
@@ -15,12 +15,12 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
             selectedItems = [];
             selectedElements = [];
-            var elems = document.querySelectorAll('.itemSelectionPanel');
+            var elems = document.querySelectorAll(".itemSelectionPanel");
             for (var i = 0, length = elems.length; i < length; i++) {
 
                 var parent = elems[i].parentNode;
                 parent.removeChild(elems[i]);
-                parent.classList.remove('withMultiSelect');
+                parent.classList.remove("withMultiSelect");
             }
         }
     }
@@ -28,13 +28,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
     function onItemSelectionPanelClick(e, itemSelectionPanel) {
 
         // toggle the checkbox, if it wasn't clicked on
-        if (!dom.parentWithClass(e.target, 'chkItemSelect')) {
-            var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
+        if (!dom.parentWithClass(e.target, "chkItemSelect")) {
+            var chkItemSelect = itemSelectionPanel.querySelector(".chkItemSelect");
 
             if (chkItemSelect) {
 
-                if (chkItemSelect.classList.contains('checkedInitial')) {
-                    chkItemSelect.classList.remove('checkedInitial');
+                if (chkItemSelect.classList.contains("checkedInitial")) {
+                    chkItemSelect.classList.remove("checkedInitial");
                 } else {
                     var newValue = !chkItemSelect.checked;
                     chkItemSelect.checked = newValue;
@@ -50,7 +50,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function updateItemSelection(chkItemSelect, selected) {
 
-        var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
+        var id = dom.parentWithAttribute(chkItemSelect, "data-id").getAttribute("data-id");
 
         if (selected) {
 
@@ -73,7 +73,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         }
 
         if (selectedItems.length) {
-            var itemSelectionCount = document.querySelector('.itemSelectionCount');
+            var itemSelectionCount = document.querySelector(".itemSelectionCount");
             if (itemSelectionCount) {
                 itemSelectionCount.innerHTML = selectedItems.length;
             }
@@ -88,27 +88,27 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function showSelection(item, isChecked) {
 
-        var itemSelectionPanel = item.querySelector('.itemSelectionPanel');
+        var itemSelectionPanel = item.querySelector(".itemSelectionPanel");
 
         if (!itemSelectionPanel) {
 
-            itemSelectionPanel = document.createElement('div');
-            itemSelectionPanel.classList.add('itemSelectionPanel');
+            itemSelectionPanel = document.createElement("div");
+            itemSelectionPanel.classList.add("itemSelectionPanel");
 
-            var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent');
-            parent.classList.add('withMultiSelect');
+            var parent = item.querySelector(".cardBox") || item.querySelector(".cardContent");
+            parent.classList.add("withMultiSelect");
             parent.appendChild(itemSelectionPanel);
 
-            var cssClass = 'chkItemSelect';
+            var cssClass = "chkItemSelect";
             if (isChecked && !browser.firefox) {
                 // In firefox, the initial tap hold doesnt' get treated as a click
                 // In other browsers it does, so we need to make sure that initial click is ignored
-                cssClass += ' checkedInitial';
+                cssClass += " checkedInitial";
             }
-            var checkedAttribute = isChecked ? ' checked' : '';
+            var checkedAttribute = isChecked ? " checked" : "";
             itemSelectionPanel.innerHTML = '<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="' + cssClass + '"' + checkedAttribute + '/><span></span></label>';
-            var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
-            chkItemSelect.addEventListener('change', onSelectionChange);
+            var chkItemSelect = itemSelectionPanel.querySelector(".chkItemSelect");
+            chkItemSelect.addEventListener("change", onSelectionChange);
         }
     }
 
@@ -118,27 +118,27 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         if (!selectionCommandsPanel) {
 
-            selectionCommandsPanel = document.createElement('div');
-            selectionCommandsPanel.classList.add('selectionCommandsPanel');
+            selectionCommandsPanel = document.createElement("div");
+            selectionCommandsPanel.classList.add("selectionCommandsPanel");
 
             document.body.appendChild(selectionCommandsPanel);
             currentSelectionCommandsPanel = selectionCommandsPanel;
 
-            var html = '';
+            var html = "";
 
             html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><i class="md-icon">close</i></button>';
             html += '<h1 class="itemSelectionCount"></h1>';
 
-            var moreIcon = '&#xE5D3;';
+            var moreIcon = "more_horiz";
             html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="md-icon">' + moreIcon + '</i></button>';
 
             selectionCommandsPanel.innerHTML = html;
 
-            selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections);
+            selectionCommandsPanel.querySelector(".btnCloseSelectionPanel").addEventListener("click", hideSelections);
 
-            var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
+            var btnSelectionPanelOptions = selectionCommandsPanel.querySelector(".btnSelectionPanelOptions");
 
-            dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true });
+            dom.addEventListener(btnSelectionPanelOptions, "click", showMenuForSelectedItems, { passive: true });
         }
     }
 
@@ -146,7 +146,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         return new Promise(function (resolve, reject) {
 
-            require(['alert'], function (alert) {
+            require(["alert"], function (alert) {
                 alert(options).then(resolve, resolve);
             });
         });
@@ -156,15 +156,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         return new Promise(function (resolve, reject) {
 
-            var msg = globalize.translate('ConfirmDeleteItem');
-            var title = globalize.translate('HeaderDeleteItem');
+            var msg = globalize.translate("ConfirmDeleteItem");
+            var title = globalize.translate("HeaderDeleteItem");
 
             if (itemIds.length > 1) {
-                msg = globalize.translate('ConfirmDeleteItems');
-                title = globalize.translate('HeaderDeleteItems');
+                msg = globalize.translate("ConfirmDeleteItems");
+                title = globalize.translate("HeaderDeleteItems");
             }
 
-            require(['confirm'], function (confirm) {
+            require(["confirm"], function (confirm) {
 
                 confirm(msg, title).then(function () {
                     var promises = itemIds.map(function (itemId) {
@@ -173,7 +173,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
                     Promise.all(promises).then(resolve, function () {
 
-                        alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject);
+                        alertText(globalize.translate("ErrorDeletingItem")).then(reject, reject);
                     });
                 }, reject);
 
@@ -190,59 +190,60 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
             var menuItems = [];
 
             menuItems.push({
-                name: globalize.translate('AddToCollection'),
-                id: 'addtocollection',
-                ironIcon: 'add'
+                name: globalize.translate("AddToCollection"),
+                id: "addtocollection",
+                icon: "add"
             });
 
             menuItems.push({
-                name: globalize.translate('AddToPlaylist'),
-                id: 'playlist',
-                ironIcon: 'playlist-add'
+                name: globalize.translate("AddToPlaylist"),
+                id: "playlist",
+                icon: "playlist_add"
             });
 
             // TODO: Be more dynamic based on what is selected
             if (user.Policy.EnableContentDeletion) {
                 menuItems.push({
-                    name: globalize.translate('Delete'),
-                    id: 'delete',
-                    ironIcon: 'delete'
+                    name: globalize.translate("Delete"),
+                    id: "delete",
+                    icon: "delete"
                 });
             }
 
-            if (user.Policy.EnableContentDownloading && appHost.supports('filedownload')) {
+            if (user.Policy.EnableContentDownloading && appHost.supports("filedownload")) {
                 menuItems.push({
-                    name: Globalize.translate('ButtonDownload'),
-                    id: 'download',
-                    ironIcon: 'file-download'
+                    name: Globalize.translate("ButtonDownload"),
+                    id: "download",
+                    icon: "file_download"
                 });
             }
 
             if (user.Policy.IsAdministrator) {
                 menuItems.push({
-                    name: globalize.translate('GroupVersions'),
-                    id: 'groupvideos',
-                    ironIcon: 'call-merge'
+                    name: globalize.translate("GroupVersions"),
+                    id: "groupvideos",
+                    icon: "call_merge"
                 });
             }
 
             menuItems.push({
-                name: globalize.translate('MarkPlayed'),
-                id: 'markplayed'
+                name: globalize.translate("MarkPlayed"),
+                id: "markplayed",
+                icon: "check_box"
             });
 
             menuItems.push({
-                name: globalize.translate('MarkUnplayed'),
-                id: 'markunplayed'
+                name: globalize.translate("MarkUnplayed"),
+                id: "markunplayed",
+                icon: "check_box_outline_blank"
             });
 
             menuItems.push({
-                name: globalize.translate('RefreshMetadata'),
-                id: 'refresh'
+                name: globalize.translate("RefreshMetadata"),
+                id: "refresh",
+                icon: "refresh"
             });
 
-
-
             require(['actionsheet'], function (actionsheet) {
                 actionsheet.show({
                     items: menuItems,
@@ -252,8 +253,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                         var serverId = apiClient.serverInfo().Id;
 
                         switch (id) {
-                            case 'addtocollection':
-                                require(['collectionEditor'], function (collectionEditor) {
+                            case "addtocollection":
+                                require(["collectionEditor"], function (collectionEditor) {
                                     new collectionEditor().show({
                                         items: items,
                                         serverId: serverId
@@ -262,8 +263,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'playlist':
-                                require(['playlistEditor'], function (playlistEditor) {
+                            case "playlist":
+                                require(["playlistEditor"], function (playlistEditor) {
                                     new playlistEditor().show({
                                         items: items,
                                         serverId: serverId
@@ -272,30 +273,30 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'delete':
+                            case "delete":
                                 deleteItems(apiClient, items).then(dispatchNeedsRefresh);
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'groupvideos':
+                            case "groupvideos":
                                 combineVersions(apiClient, items);
                                 break;
-                            case 'markplayed':
+                            case "markplayed":
                                 items.forEach(function (itemId) {
                                     apiClient.markPlayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'markunplayed':
+                            case "markunplayed":
                                 items.forEach(function (itemId) {
                                     apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'refresh':
-                                require(['refreshDialog'], function (refreshDialog) {
+                            case "refresh":
+                                require(["refreshDialog"], function (refreshDialog) {
                                     new refreshDialog({
                                         itemIds: items,
                                         serverId: serverId
@@ -320,7 +321,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         [].forEach.call(selectedElements, function (i) {
 
-            var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
+            var container = dom.parentWithAttribute(i, "is", "emby-itemscontainer");
 
             if (container && elems.indexOf(container) === -1) {
                 elems.push(container);
@@ -336,9 +337,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         if (selection.length < 2) {
 
-            require(['alert'], function (alert) {
+            require(["alert"], function (alert) {
                 alert({
-                    text: globalize.translate('PleaseSelectTwoItems')
+                    text: globalize.translate("PleaseSelectTwoItems")
                 });
             });
             return;
@@ -349,7 +350,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         apiClient.ajax({
 
             type: "POST",
-            url: apiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(',') })
+            url: apiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(",") })
 
         }).then(function () {
 
@@ -361,8 +362,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function showSelections(initialCard) {
 
-        require(['emby-checkbox'], function () {
-            var cards = document.querySelectorAll('.card');
+        require(["emby-checkbox"], function () {
+            var cards = document.querySelectorAll(".card");
             for (var i = 0, length = cards.length; i < length; i++) {
                 showSelection(cards[i], initialCard === cards[i]);
             }
@@ -378,9 +379,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         if (selectedItems.length) {
 
-            var card = dom.parentWithClass(target, 'card');
+            var card = dom.parentWithClass(target, "card");
             if (card) {
-                var itemSelectionPanel = card.querySelector('.itemSelectionPanel');
+                var itemSelectionPanel = card.querySelector(".itemSelectionPanel");
                 if (itemSelectionPanel) {
                     return onItemSelectionPanelClick(e, itemSelectionPanel);
                 }
@@ -392,7 +393,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         }
     }
 
-    document.addEventListener('viewbeforehide', hideSelections);
+    document.addEventListener("viewbeforehide", hideSelections);
 
     return function (options) {
 
@@ -402,7 +403,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         function onTapHold(e) {
 
-            var card = dom.parentWithClass(e.target, 'card');
+            var card = dom.parentWithClass(e.target, "card");
 
             if (card) {
 
@@ -439,7 +440,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                 var element = touch.target;
 
                 if (element) {
-                    var card = dom.parentWithClass(element, 'card');
+                    var card = dom.parentWithClass(element, "card");
 
                     if (card) {
 
@@ -508,7 +509,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                 return;
             }
 
-            var card = dom.parentWithClass(touchTarget, 'card');
+            var card = dom.parentWithClass(touchTarget, "card");
             touchTarget = null;
 
             if (card) {
@@ -521,27 +522,27 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
             // mobile safari doesn't allow contextmenu override
             if (browser.touch && !browser.safari) {
-                element.addEventListener('contextmenu', onTapHold);
+                element.addEventListener("contextmenu", onTapHold);
             } else {
-                dom.addEventListener(element, 'touchstart', onTouchStart, {
+                dom.addEventListener(element, "touchstart", onTouchStart, {
                     passive: true
                 });
-                dom.addEventListener(element, 'touchmove', onTouchMove, {
+                dom.addEventListener(element, "touchmove", onTouchMove, {
                     passive: true
                 });
-                dom.addEventListener(element, 'touchend', onTouchEnd, {
+                dom.addEventListener(element, "touchend", onTouchEnd, {
                     passive: true
                 });
-                dom.addEventListener(element, 'touchcancel', onTouchEnd, {
+                dom.addEventListener(element, "touchcancel", onTouchEnd, {
                     passive: true
                 });
-                dom.addEventListener(element, 'mousedown', onMouseDown, {
+                dom.addEventListener(element, "mousedown", onMouseDown, {
                     passive: true
                 });
-                dom.addEventListener(element, 'mouseleave', onMouseOut, {
+                dom.addEventListener(element, "mouseleave", onMouseOut, {
                     passive: true
                 });
-                dom.addEventListener(element, 'mouseup', onMouseOut, {
+                dom.addEventListener(element, "mouseup", onMouseOut, {
                     passive: true
                 });
             }
@@ -550,38 +551,38 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         initTapHold(container);
 
         if (options.bindOnClick !== false) {
-            container.addEventListener('click', onContainerClick);
+            container.addEventListener("click", onContainerClick);
         }
 
         self.onContainerClick = onContainerClick;
 
         self.destroy = function () {
 
-            container.removeEventListener('click', onContainerClick);
-            container.removeEventListener('contextmenu', onTapHold);
+            container.removeEventListener("click", onContainerClick);
+            container.removeEventListener("contextmenu", onTapHold);
 
             var element = container;
 
-            dom.removeEventListener(element, 'touchstart', onTouchStart, {
+            dom.removeEventListener(element, "touchstart", onTouchStart, {
                 passive: true
             });
-            dom.removeEventListener(element, 'touchmove', onTouchMove, {
+            dom.removeEventListener(element, "touchmove", onTouchMove, {
                 passive: true
             });
-            dom.removeEventListener(element, 'touchend', onTouchEnd, {
+            dom.removeEventListener(element, "touchend", onTouchEnd, {
                 passive: true
             });
             // this fires in safari due to magnifying class
-            //dom.removeEventListener(element, 'touchcancel', onTouchEnd, {
+            //dom.removeEventListener(element, "touchcancel", onTouchEnd, {
             //    passive: true
             //});
-            dom.removeEventListener(element, 'mousedown', onMouseDown, {
+            dom.removeEventListener(element, "mousedown", onMouseDown, {
                 passive: true
             });
-            dom.removeEventListener(element, 'mouseleave', onMouseOut, {
+            dom.removeEventListener(element, "mouseleave", onMouseOut, {
                 passive: true
             });
-            dom.removeEventListener(element, 'mouseup', onMouseOut, {
+            dom.removeEventListener(element, "mouseup", onMouseOut, {
                 passive: true
             });
         };

src/components/navdrawer/navdrawer.js

@@ -21,13 +21,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         }
 
         function onMenuTouchMove(e) {
-            var isOpen = self.visible,
-                touches = getTouches(e),
-                touch = touches[0] || {},
-                endX = touch.clientX || 0,
-                endY = touch.clientY || 0,
-                deltaX = endX - (menuTouchStartX || 0),
-                deltaY = endY - (menuTouchStartY || 0);
+            var isOpen = self.visible;
+            var touches = getTouches(e);
+            var touch = touches[0] || {};
+            var endX = touch.clientX || 0;
+            var endY = touch.clientY || 0;
+            var deltaX = endX - (menuTouchStartX || 0);
+            var deltaY = endY - (menuTouchStartY || 0);
             setVelocity(deltaX), isOpen && 1 !== dragMode && deltaX > 0 && (dragMode = 2), 0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5 ? (dragMode = 1, scrollContainer.addEventListener("scroll", disableEvent), self.showMask()) : 0 === dragMode && Math.abs(deltaY) >= 5 && (dragMode = 2), 1 === dragMode && (newPos = currentPos + deltaX, self.changeMenuPos())
         }
 
@@ -36,12 +36,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
             scrollContainer.removeEventListener("scroll", disableEvent);
             dragMode = 0;
 
-            var touches = getTouches(e),
-                touch = touches[0] || {},
-                endX = touch.clientX || 0,
-                endY = touch.clientY || 0,
-                deltaX = endX - (menuTouchStartX || 0),
-                deltaY = endY - (menuTouchStartY || 0);
+            var touches = getTouches(e);
+            var touch = touches[0] || {};
+            var endX = touch.clientX || 0;
+            var endY = touch.clientY || 0;
+            var deltaX = endX - (menuTouchStartX || 0);
+            var deltaY = endY - (menuTouchStartY || 0);
 
             currentPos = deltaX;
             self.checkMenuState(deltaX, deltaY);
@@ -78,15 +78,15 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         }
 
         function onBackgroundTouchStart(e) {
-            var touches = getTouches(e),
-                touch = touches[0] || {};
+            var touches = getTouches(e);
+            var touch = touches[0] || {};
             backgroundTouchStartX = touch.clientX, backgroundTouchStartTime = (new Date).getTime()
         }
 
         function onBackgroundTouchMove(e) {
-            var touches = getTouches(e),
-                touch = touches[0] || {},
-                endX = touch.clientX || 0;
+            var touches = getTouches(e);
+            var touch = touches[0] || {};
+            var endX = touch.clientX || 0;
             if (endX <= options.width && self.isVisible) {
                 countStart++;
                 var deltaX = endX - (backgroundTouchStartX || 0);
@@ -100,10 +100,10 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         }
 
         function onBackgroundTouchEnd(e) {
-            var touches = getTouches(e),
-                touch = touches[0] || {},
-                endX = touch.clientX || 0,
-                deltaX = endX - (backgroundTouchStartX || 0);
+            var touches = getTouches(e);
+            var touch = touches[0] || {};
+            var endX = touch.clientX || 0;
+            var deltaX = endX - (backgroundTouchStartX || 0);
             self.checkMenuState(deltaX), countStart = 0
         }
 
@@ -111,21 +111,24 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
             var classList = mask.classList;
             classList.contains("backdrop") || classList.add("hide")
         }
-        var self, defaults, mask, newPos = 0,
-            currentPos = 0,
-            startPoint = 0,
-            countStart = 0,
-            velocity = 0;
+        var self;
+        var defaults;
+        var mask;
+        var newPos = 0;
+        var currentPos = 0;
+        var startPoint = 0;
+        var countStart = 0;
+        var velocity = 0;
         options.target.classList.add("transition");
-        var dragMode = 0,
-            scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
+        var dragMode = 0;
+        var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
         scrollContainer.classList.add("scrollY");
         var TouchMenuLA = function() {
             self = this, defaults = {
                 width: 260,
                 handleSize: 10,
                 disableMask: !1,
-                maxMaskOpacity: .5
+                maxMaskOpacity: 0.5
             }, this.isVisible = !1, this.initialize()
         };
         TouchMenuLA.prototype.initElements = function() {
@@ -133,8 +136,11 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
                 passive: !0
             }))
         };
-        var menuTouchStartX, menuTouchStartY, menuTouchStartTime, edgeContainer = document.querySelector(".mainDrawerHandle"),
-            isPeeking = !1;
+        var menuTouchStartX;
+        var menuTouchStartY;
+        var menuTouchStartTime;
+        var edgeContainer = document.querySelector(".mainDrawerHandle");
+        var isPeeking = false;
         TouchMenuLA.prototype.animateToPosition = function(pos) {
             requestAnimationFrame(function() {
                 options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none"
@@ -146,7 +152,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
                 self.close()
             })
         }, TouchMenuLA.prototype.checkMenuState = function(deltaX, deltaY) {
-            velocity >= .4 ? deltaX >= 0 || Math.abs(deltaY || 0) >= 70 ? self.open() : self.close() : newPos >= 100 ? self.open() : newPos && self.close()
+            velocity >= 0.4 ? deltaX >= 0 || Math.abs(deltaY || 0) >= 70 ? self.open() : self.close() : newPos >= 100 ? self.open() : newPos && self.close()
         }, TouchMenuLA.prototype.open = function() {
             this.animateToPosition(options.width), currentPos = options.width, this.isVisible = !0, options.target.classList.add("drawer-open"), self.showMask(), self.invoke(options.onChange)
         }, TouchMenuLA.prototype.close = function() {
@@ -154,7 +160,8 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         }, TouchMenuLA.prototype.toggle = function() {
             self.isVisible ? self.close() : self.open()
         };
-        var backgroundTouchStartX, backgroundTouchStartTime;
+        var backgroundTouchStartX;
+        var backgroundTouchStartTime;
         TouchMenuLA.prototype.showMask = function() {
             mask.classList.remove("hide"), mask.offsetWidth, mask.classList.add("backdrop")
         }, TouchMenuLA.prototype.hideMask = function() {

src/components/notifications/notifications.js

@@ -21,8 +21,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 
             if (notification.close) {
                 notification.close();
-            }
-            else if (notification.cancel) {
+            } else if (notification.cancel) {
                 notification.cancel();
             }
         }, timeoutMs);
@@ -180,15 +179,12 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             if (status === 'completed') {
                 notification.title = globalize.translate('PackageInstallCompleted').replace('{0}', installation.Name + ' ' + installation.Version);
                 notification.vibrate = true;
-            }
-            else if (status === 'cancelled') {
+            } else if (status === 'cancelled') {
                 notification.title = globalize.translate('PackageInstallCancelled').replace('{0}', installation.Name + ' ' + installation.Version);
-            }
-            else if (status === 'failed') {
+            } else if (status === 'failed') {
                 notification.title = globalize.translate('PackageInstallFailed').replace('{0}', installation.Name + ' ' + installation.Version);
                 notification.vibrate = true;
-            }
-            else if (status === 'progress') {
+            } else if (status === 'progress') {
                 notification.title = globalize.translate('InstallingPackage').replace('{0}', installation.Name + ' ' + installation.Version);
 
                 notification.actions =

src/components/nowplayingbar/nowplayingbar.js

@@ -42,31 +42,31 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         // The onclicks are needed due to the return false above
         html += '<div class="nowPlayingBarCenter">';
 
-        html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="md-icon">&#xE045;</i></button>';
+        html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="md-icon">skip_previous</i></button>';
 
-        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">&#xE034;</i></button>';
+        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">pause</i></button>';
 
         html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><i class="md-icon">stop</i></button>';
-        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="md-icon">&#xE044;</i></button>';
+        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="md-icon">skip_next</i></button>';
 
         html += '<div class="nowPlayingBarCurrentTime"></div>';
         html += '</div>';
 
         html += '<div class="nowPlayingBarRight">';
 
-        html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="md-icon">&#xE050;</i></button>';
+        html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="md-icon">volume_up</i></button>';
 
         html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:9em;vertical-align:middle;display:inline-flex;">';
         html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>';
         html += '</div>';
 
-        html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><i class="md-icon">&#xE040;</i></button>';
+        html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><i class="md-icon">repeat</i></button>';
 
         html += '<div class="nowPlayingBarUserDataButtons">';
         html += '</div>';
 
-        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">&#xE034;</i></button>';
-        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="md-icon">&#xE05F;</i></button>';
+        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">pause</i></button>';
+        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="md-icon">playlist_play</i></button>';
 
         html += '</div>';
         html += '</div>';
@@ -134,7 +134,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             }
         });
 
-        var i, length;
+        var i;
+        var length;
         playPauseButtons = elem.querySelectorAll('.playPauseButton');
         for (i = 0, length = playPauseButtons.length; i < length; i++) {
             playPauseButtons[i].addEventListener('click', onPlayPauseClick);
@@ -195,7 +196,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         volumeSlider.addEventListener('mousemove', setVolume);
         volumeSlider.addEventListener('touchmove', setVolume);
 
-
         positionSlider = elem.querySelector('.nowPlayingBarPositionSlider');
         positionSlider.addEventListener('change', function () {
 
@@ -282,8 +282,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
     }
 
     function updatePlayPauseState(isPaused) {
-
-        var i, length;
+        var i;
+        var length;
 
         if (playPauseButtons) {
             if (isPaused) {
@@ -345,8 +345,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         if (repeatMode === 'RepeatAll') {
             toggleRepeatButtonIcon.innerHTML = "repeat";
             toggleRepeatButton.classList.add('repeatButton-active');
-        }
-        else if (repeatMode === 'RepeatOne') {
+        } else if (repeatMode === 'RepeatOne') {
             toggleRepeatButtonIcon.innerHTML = "repeat_one";
             toggleRepeatButton.classList.add('repeatButton-active');
         } else {
@@ -401,9 +400,9 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         }
 
         if (isMuted) {
-            muteButton.querySelector('i').innerHTML = '&#xE04F;';
+            muteButton.querySelector('i').innerHTML = 'volume_off';
         } else {
-            muteButton.querySelector('i').innerHTML = '&#xE050;';
+            muteButton.querySelector('i').innerHTML = 'volume_up';
         }
 
         if (progressElement) {
@@ -572,7 +571,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
                     var userData = item.UserData || {};
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
-                    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) + '"><i class="md-icon">&#xE87D;</i></button>';
+                    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) + '"><i class="md-icon">favorite</i></button>';
                 });
 
             }

src/components/playback/autoplaydetect.js

@@ -48,9 +48,7 @@ define([], function () {
                 }
 
                 timeout = setTimeout(testAutoplay, 500);
-            }
-
-            catch (e) {
+            } catch (e) {
                 reject();
                 return;
             }

src/components/playback/brightnessosd.js

@@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     function getOsdElementHtml() {
         var html = '';
 
-        html += '<i class="md-icon iconOsdIcon">&#xE1AC;</i>';
+        html += '<i class="md-icon iconOsdIcon">brightness_high</i>';
 
         html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
 
@@ -102,12 +102,11 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
 
         if (iconElement) {
             if (brightness >= 80) {
-                iconElement.innerHTML = '&#xE1AC;';
-            }
-            else if (brightness >= 20) {
-                iconElement.innerHTML = '&#xE1AE;';
+                iconElement.innerHTML = 'brightness_high';
+            } else if (brightness >= 20) {
+                iconElement.innerHTML = 'brightness_medium';
             } else {
-                iconElement.innerHTML = '&#xE1AD;';
+                iconElement.innerHTML = 'brightness_low';
             }
         }
         if (progressElement) {

src/components/playback/mediasession.js

@@ -278,7 +278,6 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
     }
     if (navigator.mediaSession) {
 
-
         navigator.mediaSession.setActionHandler('previoustrack', function () {
             execute('previousTrack');
         });

src/components/playback/nowplayinghelper.js

@@ -43,8 +43,7 @@ define([], function () {
         } else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
 
             bottomText = nowPlayingItem.Artists.join(', ');
-        }
-        else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
+        } else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
             bottomText = topText;
             topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
 
@@ -60,8 +59,7 @@ define([], function () {
             } else {
                 topItem = null;
             }
-        }
-        else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) {
+        } else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) {
             bottomText = nowPlayingItem.ProductionYear;
         }
 

src/components/playback/playbackmanager.js

@@ -107,8 +107,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     TotalRecordCount: 1
                 };
             });
-        }
-        else {
+        } else {
 
             query.Limit = query.Limit || 300;
             query.Fields = "Chapters";
@@ -182,8 +181,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             if (container === 'm4a') {
                 return 'audio/mp4';
             }
-        }
-        else if (type === 'video') {
+        } else if (type === 'video') {
             if (container === 'mkv') {
                 return 'video/x-matroska';
             }
@@ -212,8 +210,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         var results = regex.exec(url);
         if (results == null) {
             return "";
-        }
-        else {
+        } else {
             return decodeURIComponent(results[1].replace(/\+/g, " "));
         }
     }
@@ -649,13 +646,10 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 // If this is the only way it can be played, then allow it
                 if (!mediaSource.SupportsDirectStream && !mediaSource.SupportsTranscoding) {
                     return Promise.resolve(true);
-                }
-                else {
+                } else {
                     return isHostReachable(mediaSource, apiClient);
                 }
-            }
-
-            else if (mediaSource.Protocol === 'File') {
+            } else if (mediaSource.Protocol === 'File') {
 
                 return new Promise(function (resolve, reject) {
 
@@ -1272,7 +1266,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
             var currentMediaSource = self.currentMediaSource(player);
             var mediaStreams = [];
-            var i, length;
+            var i;
+            var length;
             for (i = 0, length = currentMediaSource.MediaStreams.length; i < length; i++) {
                 if (currentMediaSource.MediaStreams[i].Type === 'Audio') {
                     mediaStreams.push(currentMediaSource.MediaStreams[i]);
@@ -1316,7 +1311,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
             var currentMediaSource = self.currentMediaSource(player);
             var mediaStreams = [];
-            var i, length;
+            var i;
+            var length;
             for (i = 0, length = currentMediaSource.MediaStreams.length; i < length; i++) {
                 if (currentMediaSource.MediaStreams[i].Type === 'Subtitle') {
                     mediaStreams.push(currentMediaSource.MediaStreams[i]);
@@ -1360,7 +1356,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         function isAudioStreamSupported(mediaSource, index, deviceProfile) {
 
             var mediaStream;
-            var i, length;
+            var i;
+            var length;
             var mediaStreams = mediaSource.MediaStreams;
 
             for (i = 0, length = mediaStreams.length; i < length; i++) {
@@ -1423,8 +1420,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     if (isAudioStreamSupported(self.currentMediaSource(player), index, profile)) {
                         player.setAudioStreamIndex(index);
                         getPlayerData(player).audioStreamIndex = index;
-                    }
-                    else {
+                    } else {
                         changeStream(player, getCurrentTicks(player), { AudioStreamIndex: index });
                         getPlayerData(player).audioStreamIndex = index;
                     }
@@ -1595,8 +1591,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     // Need to change the transcoded stream to remove subs
                     changeStream(player, getCurrentTicks(player), { SubtitleStreamIndex: -1 });
                 }
-            }
-            else if (!currentStream && newStream) {
+            } else if (!currentStream && newStream) {
 
                 if (getDeliveryMethod(newStream) === 'External') {
                     selectedTrackElementIndex = index;
@@ -1607,8 +1602,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     // Need to change the transcoded stream to add subs
                     changeStream(player, getCurrentTicks(player), { SubtitleStreamIndex: index });
                 }
-            }
-            else if (currentStream && newStream) {
+            } else if (currentStream && newStream) {
 
                 // Switching tracks
                 // We can handle this clientside if the new track is external or the new track is embedded and we're not transcoding
@@ -1865,17 +1859,15 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             if (firstItem.Type === "Program") {
 
                 promise = getItemsForPlayback(serverId, {
-                    Ids: firstItem.ChannelId,
+                    Ids: firstItem.ChannelId
                 });
-            }
-            else if (firstItem.Type === "Playlist") {
+            } else if (firstItem.Type === "Playlist") {
 
                 promise = getItemsForPlayback(serverId, {
                     ParentId: firstItem.Id,
                     SortBy: options.shuffle ? 'Random' : null
                 });
-            }
-            else if (firstItem.Type === "MusicArtist") {
+            } else if (firstItem.Type === "MusicArtist") {
 
                 promise = getItemsForPlayback(serverId, {
                     ArtistIds: firstItem.Id,
@@ -1885,8 +1877,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     MediaTypes: "Audio"
                 });
 
-            }
-            else if (firstItem.MediaType === "Photo") {
+            } else if (firstItem.MediaType === "Photo") {
 
                 promise = getItemsForPlayback(serverId, {
                     ParentId: firstItem.ParentId,
@@ -1915,8 +1906,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     return Promise.resolve(result);
 
                 });
-            }
-            else if (firstItem.Type === "PhotoAlbum") {
+            } else if (firstItem.Type === "PhotoAlbum") {
 
                 promise = getItemsForPlayback(serverId, {
                     ParentId: firstItem.Id,
@@ -1928,8 +1918,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     Limit: 1000
 
                 });
-            }
-            else if (firstItem.Type === "MusicGenre") {
+            } else if (firstItem.Type === "MusicGenre") {
 
                 promise = getItemsForPlayback(serverId, {
                     GenreIds: firstItem.Id,
@@ -1938,8 +1927,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     SortBy: options.shuffle ? 'Random' : 'SortName',
                     MediaTypes: "Audio"
                 });
-            }
-            else if (firstItem.IsFolder) {
+            } else if (firstItem.IsFolder) {
 
                 promise = getItemsForPlayback(serverId, mergePlaybackQueries({
 
@@ -1951,8 +1939,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     MediaTypes: "Audio,Video"
 
                 }, queryOptions));
-            }
-            else if (firstItem.Type === "Episode" && items.length === 1 && getPlayer(firstItem, options).supportsProgress !== false) {
+            } else if (firstItem.Type === "Episode" && items.length === 1 && getPlayer(firstItem, options).supportsProgress !== false) {
 
                 promise = new Promise(function (resolve, reject) {
                     var apiClient = connectionManager.getApiClient(firstItem.ServerId);
@@ -2537,16 +2524,12 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
                     playMethod = 'DirectPlay';
 
-                }
-
-                else if (mediaSource.StreamUrl) {
+                } else if (mediaSource.StreamUrl) {
 
                     // Only used for audio
                     playMethod = 'Transcode';
                     mediaUrl = mediaSource.StreamUrl;
-                }
-
-                else if (mediaSource.SupportsDirectStream) {
+                } else if (mediaSource.SupportsDirectStream) {
 
                     directOptions = {
                         Static: true,
@@ -2706,9 +2689,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                             return p.canPlayItem(item, playOptions);
                         }
                         return true;
-                    }
-
-                    else if (item.Url && p.canPlayUrl) {
+                    } else if (item.Url && p.canPlayUrl) {
                         return p.canPlayUrl(item.Url);
                     }
                 }
@@ -3222,8 +3203,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
             if (displayErrorCode && typeof (displayErrorCode) === 'string') {
                 showPlaybackInfoErrorMessage(self, displayErrorCode, nextItem);
-            }
-            else if (nextItem) {
+            } else if (nextItem) {
                 self.nextTrack();
             }
         }

src/components/playback/playbackorientation.js

@@ -29,8 +29,7 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
                         // returns a boolean
                         orientationLocked = promise;
                     }
-                }
-                catch (err) {
+                } catch (err) {
                     onOrientationChangeError(err);
                 }
             }
@@ -46,8 +45,7 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
             if (unlockOrientation) {
                 try {
                     unlockOrientation();
-                }
-                catch (err) {
+                } catch (err) {
                     console.log('error unlocking orientation: ' + err);
                 }
                 orientationLocked = false;

src/components/playback/playerSelectionMenu.js

@@ -63,17 +63,17 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         switch (deviceType) {
 
             case 'smartphone':
-                return '';
+                return 'smartphone';
             case 'tablet':
-                return '';
+                return 'tablet';
             case 'tv':
-                return '';
+                return 'tv';
             case 'cast':
-                return '';
+                return 'cast';
             case 'desktop':
-                return '';
+                return 'computer';
             default:
-                return '';
+                return 'tv';
         }
     }
 
@@ -153,7 +153,6 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         });
     }
 
-
     function disconnectFromPlayer(currentDeviceName) {
 
         if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
@@ -193,7 +192,6 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
 
             });
 
-
         } else {
 
             playbackManager.setDefaultPlayerActive();
@@ -275,8 +273,7 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         dialogHelper.open(dlg).then(function () {
             if (destination === 'nowplaying') {
                 appRouter.showNowPlaying();
-            }
-            else if (destination === 'disconnectFromPlayer') {
+            } else if (destination === 'disconnectFromPlayer') {
                 disconnectFromPlayer(currentDeviceName);
             }
         }, emptyCallback);

src/components/playback/playmethodhelper.js

@@ -9,14 +9,11 @@ define([], function () {
 
         if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) {
             return 'DirectStream';
-        }
-        else if (session.PlayState.PlayMethod === 'Transcode') {
+        } else if (session.PlayState.PlayMethod === 'Transcode') {
             return 'Transcode';
-        }
-        else if (session.PlayState.PlayMethod === 'DirectStream') {
+        } else if (session.PlayState.PlayMethod === 'DirectStream') {
             return 'DirectPlay';
-        }
-        else if (session.PlayState.PlayMethod === 'DirectPlay') {
+        } else if (session.PlayState.PlayMethod === 'DirectPlay') {
             return 'DirectPlay';
         }
     }

src/components/playback/playqueuemanager.js

@@ -65,8 +65,8 @@ define([], function () {
     }
 
     PlayQueueManager.prototype.queueNext = function (items) {
-
-        var i, length;
+        var i;
+        var length;
 
         for (i = 0, length = items.length; i < length; i++) {
 

src/components/playback/volumeosd.js

@@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     function getOsdElementHtml() {
         var html = '';
 
-        html += '<i class="md-icon iconOsdIcon">&#xE050;</i>';
+        html += '<i class="md-icon iconOsdIcon">volume_up</i>';
 
         html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
 
@@ -101,7 +101,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     function updatePlayerVolumeState(isMuted, volume) {
 
         if (iconElement) {
-            iconElement.innerHTML = isMuted ? '&#xE04F;' : '&#xE050;';
+            iconElement.innerHTML = isMuted ? 'volume_off' : 'volume_up';
         }
         if (progressElement) {
             progressElement.style.width = (volume || 0) + '%';

src/components/playerstats/playerstats.js

@@ -364,8 +364,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMeth
                 var category = playerStats[i];
                 if (category.type === 'audio') {
                     category.name = 'Audio Info';
-                }
-                else if (category.type === 'video') {
+                } else if (category.type === 'video') {
                     category.name = 'Video Info';
                 }
                 categories.push(category);

src/components/playlisteditor/playlisteditor.js

@@ -258,7 +258,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
         var title = globalize.translate('HeaderAddToPlaylist');
 
         html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';

src/components/prompt/prompt.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="md-icon">&#xE5C4;</i>
+        <i class="md-icon">arrow_back</i>
     </button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>

src/components/recordingcreator/recordingbutton.js

@@ -30,7 +30,7 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
             this.refresh(options.itemId, options.serverId);
         }
         var button = options.button;
-        button.querySelector('i').innerHTML = '';
+        button.querySelector('i').innerHTML = 'fiber_manual_record';
 
         var clickFn = onRecordingButtonClick.bind(this);
         this.clickFn = clickFn;
@@ -45,28 +45,25 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '';
-        }
-        else if (item.TimerId || item.SeriesTimerId) {
+            return 'fiber_smart_record';
+        } else if (item.TimerId || item.SeriesTimerId) {
 
             status = item.Status || 'Cancelled';
-        }
-        else if (item.Type === 'Timer') {
+        } else if (item.Type === 'Timer') {
 
             status = item.Status;
-        }
-        else {
-            return '';
+        } else {
+            return 'fiber_manual_record';
         }
 
         if (item.SeriesTimerId) {
 
             if (status !== 'Cancelled') {
-                return '';
+                return 'fiber_smart_record';
             }
         }
 
-        return '';
+        return 'fiber_manual_record';
     }
 
     RecordingButton.prototype.refresh = function (serverId, itemId) {

src/components/recordingcreator/recordingcreator.js

@@ -40,8 +40,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
                 maxHeight: imageHeight,
                 tag: item.ImageTags.Primary
             });
-        }
-        else if (imageTags.Thumb) {
+        } else if (imageTags.Thumb) {
 
             return apiClient.getScaledImageUrl(item.Id, {
                 type: "Thumb",

src/components/recordingcreator/recordingcreator.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 <div class="formDialogContent smoothScrollY">

src/components/recordingcreator/recordingeditor.js

@@ -95,7 +95,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
             currentResolve = resolve;
 
             require(['text!./recordingeditor.template.html'], function (template) {
-
                 var dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
@@ -103,7 +102,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
                 if (layoutManager.tv) {
                     dialogOptions.size = 'fullscreen';
-                } else {
                 }
 
                 var dlg = dialogHelper.createDialog(dialogOptions);

src/components/recordingcreator/recordingeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderRecordingOptions}
     </h3>

src/components/recordingcreator/recordingfields.template.html

@@ -2,7 +2,7 @@
     <div class="recordSeriesContainer recordingFields-buttons flex align-items-center hide">
         <div>
             <button is="emby-button" type="button" class="raised recordingButton seriesRecordingButton">
-                <i class="md-icon recordingIcon">&#xE062;</i>
+                <i class="md-icon recordingIcon">fiber_smart_record</i>
                 <span class="buttonText">${RecordSeries}</span>
             </button>
         </div>
@@ -14,7 +14,7 @@
     <div class="recordingFields-buttons flex align-items-center">
         <div>
             <button is="emby-button" type="button" class="raised recordingButton singleRecordingButton">
-                <i class="md-icon recordingIcon">&#xE061;</i>
+                <i class="md-icon recordingIcon">fiber_manual_record</i>
                 <span class="buttonText">${Record}</span>
             </button>
         </div>

src/components/recordingcreator/recordinghelper.js

@@ -166,8 +166,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
                         loading.show();
 
                         cancelTimer(apiClient, timerId, true).then(resolve, reject);
-                    }
-                    else if (result === 'cancelseriestimer') {
+                    } else if (result === 'cancelseriestimer') {
 
                         loading.show();
 

src/components/recordingcreator/seriesrecordingeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderSeriesOptions}
     </h3>

src/components/refreshdialog/refreshdialog.js

@@ -123,7 +123,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager'
         var title = globalize.translate('RefreshMetadata');
 
         html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';

src/components/remotecontrol/remotecontrol.js

@@ -135,7 +135,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
             apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
                 var userData = fullItem.UserData || {};
                 var likes = null == userData.Likes ? "" : userData.Likes;
-                context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="md-icon">&#xE87D;</i></button>';
+                context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="md-icon">favorite</i></button>';
             });
         } else {
             backdrop.clear();
@@ -291,10 +291,10 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
 
             if (isMuted) {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute"));
-                view.querySelector(".buttonMute i").innerHTML = "&#xE04F;";
+                view.querySelector(".buttonMute i").innerHTML = "volume_off";
             } else {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute"));
-                view.querySelector(".buttonMute i").innerHTML = "&#xE050;";
+                view.querySelector(".buttonMute i").innerHTML = "volume_up";
             }
 
             if (progressElement) {
@@ -361,7 +361,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                     action: "setplaylistindex",
                     enableUserDataButtons: false,
                     rightButtons: [{
-                        icon: "&#xE15D;",
+                        icon: "remove_circle_outline",
                         title: globalize.translate("ButtonRemove"),
                         id: "remove"
                     }],

src/components/sanitizefilename.js

@@ -34,18 +34,14 @@ define([], function () {
                 // when parsing previous hi-surrogate, 3 is added to byteLength
                 if (prevCodePoint != null && isHighSurrogate(prevCodePoint)) {
                     byteLength += 1;
-                }
-                else {
+                } else {
                     byteLength += 3;
                 }
-            }
-            else if (codePoint <= 0x7f) {
+            } else if (codePoint <= 0x7f) {
                 byteLength += 1;
-            }
-            else if (codePoint >= 0x80 && codePoint <= 0x7ff) {
+            } else if (codePoint >= 0x80 && codePoint <= 0x7ff) {
                 byteLength += 2;
-            }
-            else if (codePoint >= 0x800 && codePoint <= 0xffff) {
+            } else if (codePoint >= 0x800 && codePoint <= 0xffff) {
                 byteLength += 3;
             }
             prevCodePoint = codePoint;
@@ -77,8 +73,7 @@ define([], function () {
 
             if (curByteLength === byteLength) {
                 return string.slice(0, i + 1);
-            }
-            else if (curByteLength > byteLength) {
+            } else if (curByteLength > byteLength) {
                 return string.slice(0, i - segment.length + 1);
             }
         }

src/components/scroller.js

@@ -82,7 +82,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             intervactive: null, // Selector for special interactive elements.
 
             // Mixed options
-            speed: 0, // Animations speed in milliseconds. 0 to disable animations.
+            speed: 0 // Animations speed in milliseconds. 0 to disable animations.
 
         }, options);
 
@@ -93,17 +93,14 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         // in cases with firefox, if the smooth scroll api is supported then use that because their implementation is very good
         if (options.allowNativeScroll === false) {
             options.enableNativeScroll = false;
-        }
-        else if (isSmoothScrollSupported && ((browser.firefox && !layoutManager.tv) || options.allowNativeSmoothScroll)) {
+        } else if (isSmoothScrollSupported && ((browser.firefox && !layoutManager.tv) || options.allowNativeSmoothScroll)) {
             // native smooth scroll
             options.enableNativeScroll = true;
-        }
-        else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) {
+        } else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) {
 
             // transform is the only way to guarantee animation
             options.enableNativeScroll = false;
-        }
-        else if (!layoutManager.tv || !browser.animate) {
+        } else if (!layoutManager.tv || !browser.animate) {
 
             options.enableNativeScroll = true;
         }
@@ -211,7 +208,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             self.frameResizeObserver.observe(frame);
         }
 
-        self.reload = function () { load(); };
+        self.reload = function () {
+            load();
+        };
 
         self.getScrollEventName = function () {
             return transform ? 'scrollanimate' : 'scroll';
@@ -227,7 +226,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
 
         function nativeScrollTo(container, pos, immediate) {
 
-
             if (container.scroll) {
                 if (o.horizontal) {
 
@@ -242,8 +240,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
                         behavior: immediate ? 'instant' : 'smooth'
                     });
                 }
-            }
-            else if (!immediate && container.scrollTo) {
+            } else if (!immediate && container.scrollTo) {
                 if (o.horizontal) {
                     container.scrollTo(Math.round(pos), 0);
                 } else {

src/components/search/searchfields.template.html

@@ -1,5 +1,5 @@
 <div class="searchFieldsInner flex align-items-center justify-content-center">
-    <i class="searchfields-icon md-icon">&#xE8B6;</i>
+    <i class="searchfields-icon md-icon">search</i>
     <div class="inputContainer flex-grow" style="margin-bottom: 0;">
         <input is="emby-input" class="searchfields-txtSearch" type="text" data-keyboard="false" placeholder="${Search}" autocomplete="off" maxlength="40" autofocus />
     </div>

src/components/search/searchresults.js

@@ -56,8 +56,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
         if (instance.options.collectionType === 'tvshows') {
             if (query.IncludeArtists) {
                 allowSearch = false;
-            }
-            else if (queryIncludeItemTypes === 'Movie' ||
+            } else if (queryIncludeItemTypes === 'Movie' ||
                 queryIncludeItemTypes === 'LiveTvProgram' ||
                 queryIncludeItemTypes === 'MusicAlbum' ||
                 queryIncludeItemTypes === 'Audio' ||
@@ -69,12 +68,10 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
                 query.MediaTypes === 'Photo') {
                 allowSearch = false;
             }
-        }
-        else if (instance.options.collectionType === 'movies') {
+        } else if (instance.options.collectionType === 'movies') {
             if (query.IncludeArtists) {
                 allowSearch = false;
-            }
-            else if (queryIncludeItemTypes === 'Series' ||
+            } else if (queryIncludeItemTypes === 'Series' ||
                 queryIncludeItemTypes === 'Episode' ||
                 queryIncludeItemTypes === 'LiveTvProgram' ||
                 queryIncludeItemTypes === 'MusicAlbum' ||
@@ -87,23 +84,19 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
                 query.MediaTypes === 'Photo') {
                 allowSearch = false;
             }
-        }
-        else if (instance.options.collectionType === 'music') {
+        } else if (instance.options.collectionType === 'music') {
             if (query.People) {
                 allowSearch = false;
-            }
-            else if (queryIncludeItemTypes === 'Series' ||
+            } else if (queryIncludeItemTypes === 'Series' ||
                 queryIncludeItemTypes === 'Episode' ||
                 queryIncludeItemTypes === 'LiveTvProgram' ||
                 queryIncludeItemTypes === 'Movie') {
                 allowSearch = false;
             }
-        }
-        else if (instance.options.collectionType === 'livetv') {
+        } else if (instance.options.collectionType === 'livetv') {
             if (query.IncludeArtists || query.IncludePeople) {
                 allowSearch = false;
-            }
-            else if (queryIncludeItemTypes === 'Series' ||
+            } else if (queryIncludeItemTypes === 'Series' ||
                 queryIncludeItemTypes === 'Episode' ||
                 queryIncludeItemTypes === 'MusicAlbum' ||
                 queryIncludeItemTypes === 'Audio' ||

src/components/serverNotifications/gamepadtokey.js

@@ -22,44 +22,44 @@
 require(['apphost'], function (appHost) {
     "use strict";
 
-    var _GAMEPAD_A_BUTTON_INDEX = 0,
-    _GAMEPAD_B_BUTTON_INDEX = 1,
-    _GAMEPAD_DPAD_UP_BUTTON_INDEX = 12,
-    _GAMEPAD_DPAD_DOWN_BUTTON_INDEX = 13,
-    _GAMEPAD_DPAD_LEFT_BUTTON_INDEX = 14,
-    _GAMEPAD_DPAD_RIGHT_BUTTON_INDEX = 15,
-    _GAMEPAD_A_KEY = "GamepadA",
-    _GAMEPAD_B_KEY = "GamepadB",
-    _GAMEPAD_DPAD_UP_KEY = "GamepadDPadUp",
-    _GAMEPAD_DPAD_DOWN_KEY = "GamepadDPadDown",
-    _GAMEPAD_DPAD_LEFT_KEY = "GamepadDPadLeft",
-    _GAMEPAD_DPAD_RIGHT_KEY = "GamepadDPadRight",
-    _GAMEPAD_LEFT_THUMBSTICK_UP_KEY = "GamepadLeftThumbStickUp",
-    _GAMEPAD_LEFT_THUMBSTICK_DOWN_KEY = "GamepadLeftThumbStickDown",
-    _GAMEPAD_LEFT_THUMBSTICK_LEFT_KEY = "GamepadLeftThumbStickLeft",
-    _GAMEPAD_LEFT_THUMBSTICK_RIGHT_KEY = "GamepadLeftThumbStickRight",
-    _GAMEPAD_A_KEYCODE = 0,
-    _GAMEPAD_B_KEYCODE = 27,
-    _GAMEPAD_DPAD_UP_KEYCODE = 38,
-    _GAMEPAD_DPAD_DOWN_KEYCODE = 40,
-    _GAMEPAD_DPAD_LEFT_KEYCODE = 37,
-    _GAMEPAD_DPAD_RIGHT_KEYCODE = 39,
-    _GAMEPAD_LEFT_THUMBSTICK_UP_KEYCODE = 38,
-    _GAMEPAD_LEFT_THUMBSTICK_DOWN_KEYCODE = 40,
-    _GAMEPAD_LEFT_THUMBSTICK_LEFT_KEYCODE = 37,
-    _GAMEPAD_LEFT_THUMBSTICK_RIGHT_KEYCODE = 39,
-    _THUMB_STICK_THRESHOLD = 0.75;
+    var _GAMEPAD_A_BUTTON_INDEX = 0;
+    var _GAMEPAD_B_BUTTON_INDEX = 1;
+    var _GAMEPAD_DPAD_UP_BUTTON_INDEX = 12;
+    var _GAMEPAD_DPAD_DOWN_BUTTON_INDEX = 13;
+    var _GAMEPAD_DPAD_LEFT_BUTTON_INDEX = 14;
+    var _GAMEPAD_DPAD_RIGHT_BUTTON_INDEX = 15;
+    var _GAMEPAD_A_KEY = "GamepadA";
+    var _GAMEPAD_B_KEY = "GamepadB";
+    var _GAMEPAD_DPAD_UP_KEY = "GamepadDPadUp";
+    var _GAMEPAD_DPAD_DOWN_KEY = "GamepadDPadDown";
+    var _GAMEPAD_DPAD_LEFT_KEY = "GamepadDPadLeft";
+    var _GAMEPAD_DPAD_RIGHT_KEY = "GamepadDPadRight";
+    var _GAMEPAD_LEFT_THUMBSTICK_UP_KEY = "GamepadLeftThumbStickUp";
+    var _GAMEPAD_LEFT_THUMBSTICK_DOWN_KEY = "GamepadLeftThumbStickDown";
+    var _GAMEPAD_LEFT_THUMBSTICK_LEFT_KEY = "GamepadLeftThumbStickLeft";
+    var _GAMEPAD_LEFT_THUMBSTICK_RIGHT_KEY = "GamepadLeftThumbStickRight";
+    var _GAMEPAD_A_KEYCODE = 0;
+    var _GAMEPAD_B_KEYCODE = 27;
+    var _GAMEPAD_DPAD_UP_KEYCODE = 38;
+    var _GAMEPAD_DPAD_DOWN_KEYCODE = 40;
+    var _GAMEPAD_DPAD_LEFT_KEYCODE = 37;
+    var _GAMEPAD_DPAD_RIGHT_KEYCODE = 39;
+    var _GAMEPAD_LEFT_THUMBSTICK_UP_KEYCODE = 38;
+    var _GAMEPAD_LEFT_THUMBSTICK_DOWN_KEYCODE = 40;
+    var _GAMEPAD_LEFT_THUMBSTICK_LEFT_KEYCODE = 37;
+    var _GAMEPAD_LEFT_THUMBSTICK_RIGHT_KEYCODE = 39;
+    var _THUMB_STICK_THRESHOLD = 0.75;
 
-    var _leftThumbstickUpPressed = false,
-    _leftThumbstickDownPressed = false,
-    _leftThumbstickLeftPressed = false,
-    _leftThumbstickRightPressed = false,
-    _dPadUpPressed = false,
-    _dPadDownPressed = false,
-    _dPadLeftPressed = false,
-    _dPadRightPressed = false,
-    _gamepadAPressed = false,
-    _gamepadBPressed = false;
+    var _leftThumbstickUpPressed = false;
+    var _leftThumbstickDownPressed = false;
+    var _leftThumbstickLeftPressed = false;
+    var _leftThumbstickRightPressed = false;
+    var _dPadUpPressed = false;
+    var _dPadDownPressed = false;
+    var _dPadLeftPressed = false;
+    var _dPadRightPressed = false;
+    var _gamepadAPressed = false;
+    var _gamepadBPressed = false;
 
     // The set of buttons on the gamepad we listen for.
     var ProcessedButtons = [
@@ -260,7 +260,9 @@ require(['apphost'], function (appHost) {
             gamepads = navigator.webkitGetGamepads();
         }
         gamepads = gamepads || [];
-        var i, j, len;
+        var i;
+        var j;
+        var len;
         for (i = 0, len = gamepads.length; i < len; i++) {
             var gamepad = gamepads[i];
             if (gamepad) {

src/components/serverNotifications/serverNotifications.js

@@ -18,8 +18,7 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
                 toast({ title: args.Header, text: args.Text });
             });
 
-        }
-        else {
+        } else {
             require(['alert'], function (alert) {
                 alert({ title: args.Header, text: args.Text });
             });
@@ -157,11 +156,9 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
 
             if (msg.Data.PlayCommand === "PlayNext") {
                 playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
-            }
-            else if (msg.Data.PlayCommand === "PlayLast") {
+            } else if (msg.Data.PlayCommand === "PlayLast") {
                 playbackManager.queue({ ids: msg.Data.ItemIds, serverId: serverId });
-            }
-            else {
+            } else {
                 playbackManager.play({
                     ids: msg.Data.ItemIds,
                     startPositionTicks: msg.Data.StartPositionTicks,
@@ -173,38 +170,29 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
                 });
             }
 
-        }
-        else if (msg.MessageType === "Playstate") {
+        } else if (msg.MessageType === "Playstate") {
 
             if (msg.Data.Command === 'Stop') {
                 inputManager.trigger('stop');
-            }
-            else if (msg.Data.Command === 'Pause') {
+            } else if (msg.Data.Command === 'Pause') {
                 inputManager.trigger('pause');
-            }
-            else if (msg.Data.Command === 'Unpause') {
+            } else if (msg.Data.Command === 'Unpause') {
                 inputManager.trigger('play');
-            }
-            else if (msg.Data.Command === 'PlayPause') {
+            } else if (msg.Data.Command === 'PlayPause') {
                 inputManager.trigger('playpause');
-            }
-            else if (msg.Data.Command === 'Seek') {
+            } else if (msg.Data.Command === 'Seek') {
                 playbackManager.seek(msg.Data.SeekPositionTicks);
-            }
-            else if (msg.Data.Command === 'NextTrack') {
+            } else if (msg.Data.Command === 'NextTrack') {
                 inputManager.trigger('next');
-            }
-            else if (msg.Data.Command === 'PreviousTrack') {
+            } else if (msg.Data.Command === 'PreviousTrack') {
                 inputManager.trigger('previous');
             } else {
                 notifyApp();
             }
-        }
-        else if (msg.MessageType === "GeneralCommand") {
+        } else if (msg.MessageType === "GeneralCommand") {
             var cmd = msg.Data;
             processGeneralCommand(cmd, apiClient);
-        }
-        else if (msg.MessageType === "UserDataChanged") {
+        } else if (msg.MessageType === "UserDataChanged") {
 
             if (msg.Data.UserId === apiClient.getCurrentUserId()) {
 
@@ -212,8 +200,7 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
                     events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
                 }
             }
-        }
-        else {
+        } else {
 
             events.trigger(serverNotifications, msg.MessageType, [apiClient, msg.Data]);
         }

src/components/serverRestartDialog.js

@@ -6,9 +6,7 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     var currentInstance;
 
     function reloadPageWhenServerAvailable(retryCount) {
-
         var apiClient = currentApiClient;
-
         if (!apiClient) {
             return;
         }
@@ -31,7 +29,6 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
 
     function retryReload(retryCount) {
         setTimeout(function () {
-
             retryCount = retryCount || 0;
             retryCount++;
 
@@ -42,15 +39,12 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     }
 
     function startRestart(instance, apiClient, dlg) {
-
         currentApiClient = apiClient;
         currentDlg = dlg;
         currentInstance = instance;
 
         apiClient.restartServer().then(function () {
-
             setTimeout(reloadPageWhenServerAvailable, 250);
-
         });
     }
 
@@ -94,7 +88,8 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
 
         dlg.querySelector('.text').innerHTML = globalize.translate('RestartPleaseWaitMessage');
 
-        var i, length;
+        var i;
+        var length;
         var html = '';
         for (i = 0, length = configuredButtons.length; i < length; i++) {
             var item = configuredButtons[i];
@@ -138,12 +133,10 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     }
 
     function ServerRestartDialog(options) {
-
         this.options = options;
     }
 
     ServerRestartDialog.prototype.show = function () {
-
         var instance = this;
         loading.show();
 
@@ -155,7 +148,6 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     };
 
     ServerRestartDialog.prototype.destroy = function () {
-
         currentApiClient = null;
         currentDlg = null;
         currentInstance = null;

src/components/shortcuts.js

@@ -128,8 +128,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
 
                         if (result.command === 'playallfromhere' || result.command === 'queueallfromhere') {
                             executeAction(card, options.positionTo, result.command);
-                        }
-                        else if (result.updated || result.deleted) {
+                        } else if (result.updated || result.deleted) {
                             notifyRefreshNeeded(card, options.itemsContainer);
                         }
                     });
@@ -204,21 +203,15 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
                 context: card.getAttribute('data-context'),
                 parentId: card.getAttribute('data-parentid')
             });
-        }
-
-        else if (action === 'programdialog') {
+        } else if (action === 'programdialog') {
 
             showProgramDialog(item);
-        }
-
-        else if (action === 'instantmix') {
+        } else if (action === 'instantmix') {
             playbackManager.instantMix({
                 Id: playableItemId,
                 ServerId: serverId
             });
-        }
-
-        else if (action === 'play' || action === 'resume') {
+        } else if (action === 'play' || action === 'resume') {
 
             var startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0');
 
@@ -227,9 +220,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
                 startPositionTicks: startPositionTicks,
                 serverId: serverId
             });
-        }
-
-        else if (action === 'queue') {
+        } else if (action === 'queue') {
 
             if (playbackManager.isPlaying()) {
                 playbackManager.queue({
@@ -243,25 +234,15 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
                     serverId: serverId
                 });
             }
-        }
-
-        else if (action === 'playallfromhere') {
+        } else if (action === 'playallfromhere') {
             playAllFromHere(card, serverId);
-        }
-
-        else if (action === 'queueallfromhere') {
+        } else if (action === 'queueallfromhere') {
             playAllFromHere(card, serverId, true);
-        }
-
-        else if (action === 'setplaylistindex') {
+        } else if (action === 'setplaylistindex') {
             playbackManager.setCurrentPlaylistItem(card.getAttribute('data-playlistitemid'));
-        }
-
-        else if (action === 'record') {
+        } else if (action === 'record') {
             onRecordCommand(serverId, id, type, card.getAttribute('data-timerid'), card.getAttribute('data-seriestimerid'));
-        }
-
-        else if (action === 'menu') {
+        } else if (action === 'menu') {
 
             var options = target.getAttribute('data-playoptions') === 'false' ?
                 {
@@ -277,27 +258,17 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
             options.positionTo = target;
 
             showContextMenu(card, options);
-        }
-
-        else if (action === 'playmenu') {
+        } else if (action === 'playmenu') {
             showPlayMenu(card, target);
-        }
-
-        else if (action === 'edit') {
+        } else if (action === 'edit') {
             getItem(target).then(function (item) {
                 editItem(item, serverId);
             });
-        }
-
-        else if (action === 'playtrailer') {
+        } else if (action === 'playtrailer') {
             getItem(target).then(playTrailer);
-        }
-
-        else if (action === 'addtoplaylist') {
+        } else if (action === 'addtoplaylist') {
             getItem(target).then(addToPlaylist);
-        }
-
-        else if (action === 'custom') {
+        } else if (action === 'custom') {
 
             var customAction = target.getAttribute('data-customaction');
 

src/components/skinManager.js

@@ -20,7 +20,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
         } else {
             Emby.Page.goHome();
         }
-    };
+    }
 
     function getThemes() {
         return [{
@@ -36,7 +36,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
             isDefaultServerDashboard: true
         }, {
             name: "Emby",
-            id: "emby",
+            id: "emby"
         }, {
             name: "Light",
             id: "light"
@@ -47,7 +47,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
             name: "Windows Media Center",
             id: "wmc"
         }];
-    };
+    }
 
     var skinManager = {
         getThemes: getThemes,

src/components/slideshow/slideshow.js

@@ -77,8 +77,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         try {
             appHost.setUserScalable(scalable);
-        }
-        catch (err) {
+        } catch (err) {
             console.log('error in appHost.setUserScalable: ' + err);
         }
     }

src/components/sortmenu/sortmenu.js

@@ -66,7 +66,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                 var html = '';
 
                 html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Sort}</h3>';
 
                 html += '</div>';

src/components/subtitleeditor/subtitleeditor.js

@@ -192,8 +192,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         var lastLanguage = userSettings.get('subtitleeditor-language');
         if (lastLanguage) {
             selectLanguage.value = lastLanguage;
-        }
-        else {
+        } else {
 
             apiClient.getCurrentUser().then(function (user) {
 
@@ -282,7 +281,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             html += '</div>';
 
             if (!layoutManager.tv) {
-                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><i class="md-icon">&#xE2C4;</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><i class="md-icon">file_download</i></button>';
             }
 
             html += '</' + tagName + '>';
@@ -347,8 +346,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
         if (typeof itemId === 'string') {
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
-        }
-        else {
+        } else {
             onGetItem(itemId);
         }
     }

src/components/subtitleeditor/subtitleeditor.template.html

@@ -1,8 +1,8 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">${Subtitles}</h3>
 
-    <a is="emby-linkbutton" data-autohide="true" class="button-link btnHelp flex align-items-center" href="https://docs.jellyfin.org/general/server/media/subtitles.html" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="${Help}"><i class="md-icon">&#xE88E;</i><span style="margin-left:.25em;">${Help}</span></a>
+    <a is="emby-linkbutton" data-autohide="true" class="button-link btnHelp flex align-items-center" href="https://docs.jellyfin.org/general/server/media/subtitles.html" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="${Help}"><i class="md-icon">info</i><span style="margin-left:.25em;">${Help}</span></a>
 
 </div>
 <div class="formDialogContent smoothScrollY">