merge remote-tracking branch 'upstream/master' into firefox

.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"]

README.md

@@ -1,16 +1,65 @@
 <h1 align="center">Jellyfin Web</h1>
-<h3 align="center">The Free Software Media System</h3>
+<h3 align="center">Part of the <a href="https://jellyfin.org">Jellyfin Project</a></h3>
 
 ---
 
 <p align="center">
 <img alt="Logo Banner" src="https://raw.githubusercontent.com/jellyfin/jellyfin-ux/master/branding/SVG/banner-logo-solid.svg?sanitize=true"/>
-<br/><br/>
-<a href="https://github.com/jellyfin/jellyfin-web"><img alt="GPL 2.0 License" src="https://img.shields.io/github/license/jellyfin/jellyfin-web.svg"/></a>
-<a href="https://github.com/jellyfin/jellyfin-web/releases"><img alt="Current Release" src="https://img.shields.io/github/release/jellyfin/jellyfin-web.svg"/></a>
-<a href="https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/?utm_source=widget"><img src="https://translate.jellyfin.org/widgets/jellyfin/-/jellyfin-web/svg-badge.svg" alt="Translation status" /></a>
+<br/>
+<br/>
+<a href="https://github.com/jellyfin/jellyfin-web">
+<img alt="GPL 2.0 License" src="https://img.shields.io/github/license/jellyfin/jellyfin-web.svg"/>
+</a>
+<a href="https://github.com/jellyfin/jellyfin-web/releases">
+<img alt="Current Release" src="https://img.shields.io/github/release/jellyfin/jellyfin-web.svg"/>
+</a>
+<a href="https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/?utm_source=widget">
+<img src="https://translate.jellyfin.org/widgets/jellyfin/-/jellyfin-web/svg-badge.svg" alt="Translation Status"/>
+</a>
+</br>
+<a href="https://opencollective.com/jellyfin">
+<img alt="Donate" src="https://img.shields.io/opencollective/all/jellyfin.svg?label=backers"/>
+</a>
+<a href="https://features.jellyfin.org">
+<img alt="Feature Requests" src="https://img.shields.io/badge/fider-vote%20on%20features-success.svg"/>
+</a>
+<a href="https://forum.jellyfin.org">
+<img alt="Discuss on our Forum" src="https://img.shields.io/discourse/https/forum.jellyfin.org/users.svg"/>
+</a>
+<a href="https://matrix.to/#/+jellyfin:matrix.org">
+<img alt="Chat on Matrix" src="https://img.shields.io/matrix/jellyfin:matrix.org.svg?logo=matrix"/>
+</a>
+<a href="https://www.reddit.com/r/jellyfin">
+<img alt="Join our Subreddit" src="https://img.shields.io/badge/reddit-r%2Fjellyfin-%23FF5700.svg"/>
+</a>
 </p>
 
----
+Jellyfin Web is the frontend used for most of the clients available for end users, such as desktop browsers, Android, and iOS. We welcome all contributions and pull requests! If you have a larger feature in mind please open an issue so we can discuss the implementation before you start. Translations can be improved very easily from our <a href="https://translate.jellyfin.org/projects/jellyfin/jellyfin-web">Weblate</a> instance. Look through the following graphic to see if your native language could use some work!
+
+<a href="https://translate.jellyfin.org/engage/jellyfin/?utm_source=widget">
+<img src="https://translate.jellyfin.org/widgets/jellyfin/-/jellyfin-web/multi-auto.svg" alt="Detailed Translation Status"/>
+</a>
+
+## Build Process
+
+### Dependencies
+
+- Yarn 
+
+### Getting Started
+
+1. Clone or download this repository.
+   ```sh
+   git clone https://github.com/jellyfin/jellyfin-web.git
+   cd jellyfin-web
+   ```
+2. Install build dependencies in the project directory via npm.
+   ```sh
+   yarn install
+   ```
+
+3. Run webpack dev server 
+   ```sh
+   yarn serve
+   ```
 
-Jellyfin is a free software media system that puts you in control of managing and streaming your media.

package.json

@@ -10,9 +10,11 @@
     "css-loader": "^2.1.0",
     "eslint": "^5.16.0",
     "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
+    "webpack-concat-plugin": "^3.0.0",
     "webpack-dev-server": "^3.8.1",
     "webpack-merge": "^4.2.2"
   },

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/apphost.js

@@ -313,7 +313,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
     var deviceId;
     var deviceName;
     var appName = "Jellyfin Web";
-    var appVersion = "10.4.0";
+    var appVersion = "10.5.0";
     var visibilityChange;
     var visibilityState;
 

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);
             }
         }
@@ -168,8 +167,8 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
                 close(dlg);
             }
         }, {
-                passive: true
-            });
+            passive: true
+        });
     }
 
     function isHistoryEnabled(dlg) {
@@ -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

@@ -115,7 +115,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
         var readOnlyAttribute = options.pathReadOnly ? " readonly" : "";
         html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + Globalize.translate(labelKey) + '"/>';
         html += "</div>";
-        if (!readOnlyAttribute)  {
+        if (!readOnlyAttribute) {
             html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + Globalize.translate("ButtonRefresh") + '"><i class="md-icon">search</i></button>';
         }
         html += "</div>";
@@ -188,9 +188,9 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                 var path = lnkPath.getAttribute("data-path");
                 if (lnkPath.classList.contains("lnkFile")) {
                     content.querySelector("#txtDirectoryPickerPath").value = path;
-                 } else {
+                } else {
                     refreshDirectoryBrowser(content, path, fileOptions, true)
-                 };
+                }
             }
         });
 
@@ -254,10 +254,10 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                     var systemInfo = responses[0];
                     var initialPath = responses[1];
                     var dlg = dialogHelper.createDialog({
-                            size: "medium-tall",
-                            removeOnClose: true,
-                            scrollY: false
-                        });
+                        size: "medium-tall",
+                        removeOnClose: true,
+                        scrollY: false
+                    });
                     dlg.classList.add("ui-body-a");
                     dlg.classList.add("background-theme-a");
                     dlg.classList.add("directoryPicker");
@@ -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-tabs/emby-tabs.js

@@ -142,7 +142,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
             tabs.classList.add('scrollX');
             tabs.classList.add('hiddenScrollX');
             tabs.classList.add('smoothScrollX');
-       }
+        }
     }
 
     EmbyTabs.createdCallback = function () {

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

@@ -1,4 +1,4 @@
-define(['dom'], function (dom) {
+define(['dom', 'scrollManager'], function (dom, scrollManager) {
     'use strict';
 
     var scopes = [];
@@ -40,7 +40,7 @@ define(['dom'], function (dom) {
 
         try {
             element.focus({
-                preventScroll: false
+                preventScroll: scrollManager.isEnabled()
             });
         } catch (err) {
             console.log('Error in focusManager.autoFocus: ' + err);
@@ -181,21 +181,18 @@ define(['dom'], function (dom) {
             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'], function (dom) {
         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,
-            // Shortcuts to help with compression
-            min = Math.min,
-            max = Math.max;
+        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
+        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'], function (dom) {
                     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'], function (dom) {
 
         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'], function (dom) {
         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/fullscreenManager.js

@@ -55,7 +55,7 @@ define(['events', 'dom', 'apphost', 'browser'], function (events, dom, appHost,
         return document.fullscreen ||
             document.mozFullScreen ||
             document.webkitIsFullScreen ||
-            document.msFullscreenElement ||  /* IE/Edge syntax */
+            document.msFullscreenElement || /* IE/Edge syntax */
             document.fullscreenElement || /* Standard syntax */
             document.webkitFullscreenElement || /* Chrome, Safari and Opera syntax */
             document.mozFullScreenElement; /* Firefox syntax */

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) {
@@ -1195,14 +1175,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             dom.addEventListener(programGrid, 'scroll', function (e) {
                 onProgramGridScroll(context, this, timeslotHeaders);
             }, {
-                    passive: true
-                });
+                passive: true
+            });
 
             dom.addEventListener(timeslotHeaders, 'scroll', function () {
                 onTimeslotHeadersScroll(context, this);
             }, {
-                    passive: true
-                });
+                passive: true
+            });
 
             programGrid.addEventListener('click', onProgramGridClick);
 

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

@@ -1,4 +1,4 @@
-define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'layoutManager', 'imageLoader', 'globalize', 'itemShortcuts', 'itemHelper', 'appRouter', 'scripts/imagehelper','paper-icon-button-light', 'emby-itemscontainer', 'emby-scroller', 'emby-button', 'css!./homesections'], function (connectionManager, cardBuilder, appSettings, dom, appHost, layoutManager, imageLoader, globalize, itemShortcuts, itemHelper, appRouter, imageHelper) {
+define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'layoutManager', 'imageLoader', 'globalize', 'itemShortcuts', 'itemHelper', 'appRouter', 'scripts/imagehelper', 'paper-icon-button-light', 'emby-itemscontainer', 'emby-scroller', 'emby-button', 'css!./homesections'], function (connectionManager, cardBuilder, appSettings, dom, appHost, layoutManager, imageLoader, globalize, itemShortcuts, itemHelper, appRouter, imageHelper) {
     'use strict';
 
     function getDefaultSection(index) {
@@ -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>';
@@ -567,7 +568,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
                 html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
                     serverId: apiClient.serverId(),
-					section: 'programs'
+                    section: 'programs'
                 }) + '" class="raised"><span>' + globalize.translate('Programs') + '</span></a>';
 
                 html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
@@ -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

@@ -298,10 +298,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                         type: 'flv',
                         url: url
                     },
-                        {
-                            seekType: 'range',
-                            lazyLoad: false
-                        });
+                    {
+                        seekType: 'range',
+                        lazyLoad: false
+                    });
 
                     flvPlayer.attachMediaElement(elem);
                     flvPlayer.load();
@@ -420,7 +420,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         function onMediaManagerLoadMedia(event) {
 
             if (self._castPlayer) {
-                self._castPlayer.unload();    // Must unload before starting again.
+                self._castPlayer.unload(); // Must unload before starting again.
             }
             self._castPlayer = null;
 
@@ -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);
@@ -577,7 +573,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             var offsetValue = parseFloat(offset);
 
             // if .ass currently rendering
-            if (currentAssRenderer){
+            if (currentAssRenderer) {
                 updateCurrentTrackOffset(offsetValue);
             } else {
                 var videoElement = self._mediaElement;
@@ -586,22 +582,22 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 Array.from(videoElement.textTracks)
                     .filter(function(trackElement) {
                     // get showing .vtt textTacks
-                    return trackElement.mode === 'showing';
-                })
-                .forEach(function(trackElement) {
+                        return trackElement.mode === 'showing';
+                    })
+                    .forEach(function(trackElement) {
 
-                    var track = customTrackIndex === -1 ? null : mediaStreamTextTracks.filter(function (t) {
-                        return t.Index === customTrackIndex;
-                    })[0];
+                        var track = customTrackIndex === -1 ? null : mediaStreamTextTracks.filter(function (t) {
+                            return t.Index === customTrackIndex;
+                        })[0];
 
-                    if (track) {
-                        offsetValue = updateCurrentTrackOffset(offsetValue);
-                        setVttSubtitleOffset(trackElement, offsetValue);
-                    } else {
-                        console.log("No available track, cannot apply offset : " + offsetValue);
-                    }
+                        if (track) {
+                            offsetValue = updateCurrentTrackOffset(offsetValue);
+                            setVttSubtitleOffset(trackElement, offsetValue);
+                        } else {
+                            console.log("No available track, cannot apply offset : " + offsetValue);
+                        }
 
-                });
+                    });
             }
         };
 
@@ -609,7 +605,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             var relativeOffset = offsetValue;
             var newTrackOffset = offsetValue;
-            if(currentTrackOffset){
+            if (currentTrackOffset) {
                 relativeOffset -= currentTrackOffset;
             }
             currentTrackOffset = newTrackOffset;
@@ -619,12 +615,12 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         function setVttSubtitleOffset(currentTrack, offsetValue) {
 
-            if(currentTrack.cues) {
+            if (currentTrack.cues) {
                 Array.from(currentTrack.cues)
-                .forEach(function(cue) {
-                    cue.startTime -= offsetValue;
-                    cue.endTime -= offsetValue;
-                });
+                    .forEach(function(cue) {
+                        cue.startTime -= offsetValue;
+                        cue.endTime -= offsetValue;
+                    });
             }
 
         }
@@ -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;
             }
@@ -1232,7 +1228,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         function updateSubtitleText(timeMs) {
 
             // handle offset for ass tracks
-            if(currentTrackOffset) {
+            if (currentTrackOffset) {
                 timeMs += (currentTrackOffset * 1000);
             }
 
@@ -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

@@ -8,20 +8,20 @@ define(['inputManager', 'focusManager'], function(inputManager, focusManager) {
             var capture = true;
 
             switch (e.keyCode) {
-            case 37: // ArrowLeft
-                inputManager.handle('left');
-                break;
-            case 38: // ArrowUp
-                inputManager.handle('up');
-                break;
-            case 39: // ArrowRight
-                inputManager.handle('right');
-                break;
-            case 40: // ArrowDown
-                inputManager.handle('down');
-                break;
-            default:
-                capture = false;
+                case 37: // ArrowLeft
+                    inputManager.handle('left');
+                    break;
+                case 38: // ArrowUp
+                    inputManager.handle('up');
+                    break;
+                case 39: // ArrowRight
+                    inputManager.handle('right');
+                    break;
+                case 40: // ArrowDown
+                    inputManager.handle('down');
+                    break;
+                default:
+                    capture = false;
             }
             if (capture) {
                 console.log("Disabling default event handling");
@@ -31,6 +31,6 @@ define(['inputManager', 'focusManager'], function(inputManager, focusManager) {
 
     }
     return {
-        enable: enable,
+        enable: enable
     };
 });

src/components/lazyloader/lazyloader-intersectionobserver.js

@@ -45,7 +45,7 @@ define(['require', 'browser'], function (require, browser) {
                 }
             }
         },
-            observerOptions
+        observerOptions
         );
 
         this.observer = observer;

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,13 +151,13 @@ 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({
-                            size: "medium-tall",
-                            modal: false,
-                            removeOnClose: true,
-                            scrollY: false
-                        });
+                    var template = this.response;
+                    var dlg = dialogHelper.createDialog({
+                        size: "medium-tall",
+                        modal: false,
+                        removeOnClose: true,
+                        scrollY: false
+                    });
                     dlg.classList.add("ui-body-a");
                     dlg.classList.add("background-theme-a");
                     dlg.classList.add("dlg-librarycreator");

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

@@ -19,8 +19,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         setTimeout(function () {
             if (notification.close) {
                 notification.close();
-            }
-            else if (notification.cancel) {
+            } else if (notification.cancel) {
                 notification.cancel();
             }
         }, timeoutMs);
@@ -176,15 +175,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

@@ -158,7 +158,7 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
 
         lastUpdateTime = now;
 
-        if (navigator.mediaSession){
+        if (navigator.mediaSession) {
             navigator.mediaSession.metadata = new MediaMetadata({
                 title: title,
                 artist: artist,
@@ -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
@@ -1674,7 +1668,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
         self.canHandleOffsetOnCurrentSubtitle = function(player) {
             var index = self.getSubtitleStreamIndex(player);
-            return index !== -1  && self.isSubtitleStreamExternal(index, player);
+            return index !== -1 && self.isSubtitleStreamExternal(index, player);
         }
 
         self.seek = function (ticks, player) {
@@ -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

@@ -58,15 +58,15 @@ define([], function () {
 
     function arrayInsertAt(destArray, pos, arrayToInsert) {
         var args = [];
-        args.push(pos);                           // where to insert
-        args.push(0);                             // nothing to remove
-        args = args.concat(arrayToInsert);        // add on array to insert
-        destArray.splice.apply(destArray, args);  // splice it in
+        args.push(pos); // where to insert
+        args.push(0); // nothing to remove
+        args = args.concat(arrayToInsert); // add on array to insert
+        destArray.splice.apply(destArray, args); // splice it in
     }
 
     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/polyfills/focusPreventScroll.js

@@ -0,0 +1,41 @@
+// Polyfill to add support for preventScroll by focus function
+
+if (HTMLElement.prototype.nativeFocus === undefined) {
+    (function () {
+        var supportsPreventScrollOption = false;
+        try {
+            var focusElem = document.createElement("div");
+
+            focusElem.addEventListener("focus", function(event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }, true);
+
+            var opts = Object.defineProperty({}, "preventScroll", {
+                get: function () {
+                    supportsPreventScrollOption = true;
+                }
+            });
+
+            focusElem.focus(opts);
+        } catch (e) {
+            console.log("error checking preventScroll support");
+        }
+
+        if (!supportsPreventScrollOption) {
+            HTMLElement.prototype.nativeFocus = HTMLElement.prototype.focus;
+
+            HTMLElement.prototype.focus = function(options) {
+                var scrollX = window.scrollX;
+                var scrollY = window.scrollY;
+
+                this.nativeFocus();
+
+                // Restore window scroll if preventScroll
+                if (options && options.preventScroll) {
+                    window.scroll(scrollX, scrollY);
+                }
+            };
+        }
+    })();
+}

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();
@@ -179,15 +179,15 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
             if (player) {
                 switch (playbackManager.getRepeatMode(player)) {
                     case "RepeatNone":
-                    playbackManager.setRepeatMode("RepeatAll", player);
-                    break;
+                        playbackManager.setRepeatMode("RepeatAll", player);
+                        break;
 
                     case "RepeatAll":
-                    playbackManager.setRepeatMode("RepeatOne", player);
-                    break;
+                        playbackManager.setRepeatMode("RepeatOne", player);
+                        break;
 
                     case "RepeatOne":
-                    playbackManager.setRepeatMode("RepeatNone", player);
+                        playbackManager.setRepeatMode("RepeatNone", player);
                 }
             }
         }
@@ -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);
             }
         }
@@ -89,11 +84,11 @@ define([], function () {
     return {
         sanitize: function (input, replacement) {
             var sanitized = input
-              .replace(illegalRe, replacement)
-              .replace(controlRe, replacement)
-              .replace(reservedRe, replacement)
-              .replace(windowsReservedRe, replacement)
-              .replace(windowsTrailingRe, replacement);
+                .replace(illegalRe, replacement)
+                .replace(controlRe, replacement)
+                .replace(reservedRe, replacement)
+                .replace(windowsReservedRe, replacement)
+                .replace(windowsTrailingRe, replacement);
             return truncate(sanitized, 255);
         }
     };

src/components/scrollManager.js

@@ -0,0 +1,499 @@
+define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManager) {
+    "use strict";
+
+    /**
+     * Scroll time in ms.
+     */
+    var ScrollTime = 270;
+
+    /**
+     * Epsilon for comparing values.
+     */
+    var Epsilon = 1e-6;
+
+    // FIXME: Need to scroll to top of page to fully show the top menu. This can be solved by some marker of top most elements or their containers
+    /**
+     * Returns minimum vertical scroll.
+     * Scroll less than that value will be zeroed.
+     *
+     * @return {number} minimum vertical scroll
+     */
+    function minimumScrollY() {
+        var topMenu = document.querySelector(".headerTop");
+        if (topMenu) {
+            return topMenu.clientHeight;
+        }
+        return 0;
+    }
+
+    var supportsSmoothScroll = "scrollBehavior" in document.documentElement.style;
+
+    var supportsScrollToOptions = false;
+    try {
+        var elem = document.createElement("div");
+
+        var opts = Object.defineProperty({}, "behavior", {
+            get: function () {
+                supportsScrollToOptions = true;
+            }
+        });
+
+        elem.scrollTo(opts);
+    } catch (e) {
+        console.log("error checking ScrollToOptions support");
+    }
+
+    /**
+     * Returns value clamped by range [min, max].
+     *
+     * @param {number} value clamped value
+     * @param {number} min begining of range
+     * @param {number} max ending of range
+     * @return {number} clamped value
+     */
+    function clamp(value, min, max) {
+        return value <= min ? min : value >= max ? max : value;
+    }
+
+    /**
+     * Returns the required delta to fit range 1 into range 2.
+     * In case of range 1 is bigger than range 2 returns delta to fit most out of range part.
+     *
+     * @param {number} begin1 begining of range 1
+     * @param {number} end1 ending of range 1
+     * @param {number} begin2 begining of range 2
+     * @param {number} end2 ending of range 2
+     * @return {number} delta: <0 move range1 to the left, >0 - to the right
+     */
+    function fitRange(begin1, end1, begin2, end2) {
+        var delta1 = begin1 - begin2;
+        var delta2 = end2 - end1;
+        if (delta1 < 0 && delta1 < delta2) {
+            return -delta1;
+        } else if (delta2 < 0) {
+            return delta2;
+        }
+        return 0;
+    }
+
+    /**
+     * Ease value.
+     *
+     * @param {number} t value in range [0, 1]
+     * @return {number} eased value in range [0, 1]
+     */
+    function ease(t) {
+        return t*(2 - t); // easeOutQuad === ease-out
+    }
+
+    /**
+     * Document scroll wrapper helps to unify scrolling and fix issues of some browsers.
+     *
+     * webOS 2 Browser: scrolls documentElement (and window), but body has a scroll size
+     *
+     * webOS 3 Browser: scrolls body (and window)
+     *
+     * webOS 4 Native: scrolls body (and window); has a document.scrollingElement
+     *
+     * Tizen 4 Browser/Native: scrolls body (and window); has a document.scrollingElement
+     *
+     * Tizen 5 Browser/Native: scrolls documentElement (and window); has a document.scrollingElement
+     */
+    function DocumentScroller() {
+    }
+
+    DocumentScroller.prototype = {
+        get scrollLeft() {
+            return window.pageXOffset;
+        },
+        set scrollLeft(val) {
+            window.scroll(val, window.pageYOffset);
+        },
+
+        get scrollTop() {
+            return window.pageYOffset;
+        },
+        set scrollTop(val) {
+            window.scroll(window.pageXOffset, val);
+        },
+
+        get scrollWidth() {
+            return Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
+        },
+
+        get scrollHeight() {
+            return Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+        },
+
+        get clientWidth() {
+            return Math.min(document.documentElement.clientWidth, document.body.clientWidth);
+        },
+
+        get clientHeight() {
+            return Math.min(document.documentElement.clientHeight, document.body.clientHeight);
+        },
+
+        getBoundingClientRect: function() {
+            // Make valid viewport coordinates: documentElement.getBoundingClientRect returns rect of entire document relative to viewport
+            return {
+                left: 0,
+                top: 0,
+                width: this.clientWidth,
+                height: this.clientHeight
+            };
+        },
+
+        scrollTo: function() {
+            window.scrollTo.apply(window, arguments);
+        }
+    };
+
+    var documentScroller = new DocumentScroller();
+
+    /**
+     * Returns parent element that can be scrolled. If no such, returns documentElement.
+     *
+     * @param {HTMLElement} element element for which parent is being searched
+     * @param {boolean} vertical search for vertical scrollable parent
+     */
+    function getScrollableParent(element, vertical) {
+        if (element) {
+            var parent = element.parentElement;
+
+            while (parent) {
+                if ((!vertical && parent.scrollWidth > parent.clientWidth && parent.classList.contains("scrollX")) ||
+                    (vertical && parent.scrollHeight > parent.clientHeight && parent.classList.contains("scrollY"))) {
+                    return parent;
+                }
+
+                parent = parent.parentElement;
+            }
+        }
+
+        return documentScroller;
+    }
+
+    /**
+     * @typedef {Object} ScrollerData
+     * @property {number} scrollPos current scroll position
+     * @property {number} scrollSize scroll size
+     * @property {number} clientSize client size
+     */
+
+    /**
+     * Returns scroll data for specified orientation.
+     *
+     * @param {HTMLElement} scroller scroller
+     * @param {boolean} vertical vertical scroll data
+     * @return {ScrollerData} scroll data
+     */
+    function getScrollerData(scroller, vertical) {
+        var data = {};
+
+        if (!vertical) {
+            data.scrollPos = scroller.scrollLeft;
+            data.scrollSize = scroller.scrollWidth;
+            data.clientSize = scroller.clientWidth;
+        } else {
+            data.scrollPos = scroller.scrollTop;
+            data.scrollSize = scroller.scrollHeight;
+            data.clientSize = scroller.clientHeight;
+        }
+
+        return data;
+    }
+
+    /**
+     * Returns position of child of scroller for specified orientation.
+     *
+     * @param {HTMLElement} scroller scroller
+     * @param {HTMLElement} element child of scroller
+     * @param {boolean} vertical vertical scroll
+     * @return {number} child position
+     */
+    function getScrollerChildPos(scroller, element, vertical) {
+        var elementRect = element.getBoundingClientRect();
+        var scrollerRect = scroller.getBoundingClientRect();
+
+        if (!vertical) {
+            return scroller.scrollLeft + elementRect.left - scrollerRect.left;
+        } else {
+            return scroller.scrollTop + elementRect.top - scrollerRect.top;
+        }
+    }
+
+    /**
+     * Returns scroll position for element.
+     *
+     * @param {ScrollerData} scrollerData scroller data
+     * @param {number} elementPos child element position
+     * @param {number} elementSize child element size
+     * @param {boolean} centered scroll to center
+     * @return {number} scroll position
+     */
+    function calcScroll(scrollerData, elementPos, elementSize, centered) {
+        var maxScroll = scrollerData.scrollSize - scrollerData.clientSize;
+
+        var scroll;
+
+        if (centered) {
+            scroll = elementPos + (elementSize - scrollerData.clientSize) / 2;
+        } else {
+            var delta = fitRange(elementPos, elementPos + elementSize - 1, scrollerData.scrollPos, scrollerData.scrollPos + scrollerData.clientSize - 1);
+            scroll = scrollerData.scrollPos - delta;
+        }
+
+        return clamp(Math.round(scroll), 0, maxScroll);
+    }
+
+    /**
+     * Calls scrollTo function in proper way.
+     *
+     * @param {HTMLElement} scroller scroller
+     * @param {ScrollToOptions} options scroll options
+     */
+    function scrollToHelper(scroller, options) {
+        if ("scrollTo" in scroller) {
+            if (!supportsScrollToOptions) {
+                var scrollX = (options.left !== undefined ? options.left : scroller.scrollLeft);
+                var scrollY = (options.top !== undefined ? options.top : scroller.scrollTop);
+                scroller.scrollTo(scrollX, scrollY);
+            } else {
+                scroller.scrollTo(options);
+            }
+        } else if ("scrollLeft" in scroller) {
+            if (options.left !== undefined) {
+                scroller.scrollLeft = options.left;
+            }
+            if (options.top !== undefined) {
+                scroller.scrollTop = options.top;
+            }
+        }
+    }
+
+    /**
+     * Performs built-in scroll.
+     *
+     * @param {HTMLElement} xScroller horizontal scroller
+     * @param {number} scrollX horizontal coordinate
+     * @param {HTMLElement} yScroller vertical scroller
+     * @param {number} scrollY vertical coordinate
+     * @param {boolean} smooth smooth scrolling
+     */
+    function builtinScroll(xScroller, scrollX, yScroller, scrollY, smooth) {
+        var scrollBehavior = smooth ? "smooth" : "instant";
+
+        if (xScroller !== yScroller) {
+            scrollToHelper(xScroller, {left: scrollX, behavior: scrollBehavior});
+            scrollToHelper(yScroller, {top: scrollY, behavior: scrollBehavior});
+        } else {
+            scrollToHelper(xScroller, {left: scrollX, top: scrollY, behavior: scrollBehavior});
+        }
+    }
+
+    var scrollTimer;
+
+    /**
+     * Resets scroll timer to stop scrolling.
+     */
+    function resetScrollTimer() {
+        cancelAnimationFrame(scrollTimer);
+        scrollTimer = undefined;
+    }
+
+    /**
+     * Performs animated scroll.
+     *
+     * @param {HTMLElement} xScroller horizontal scroller
+     * @param {number} scrollX horizontal coordinate
+     * @param {HTMLElement} yScroller vertical scroller
+     * @param {number} scrollY vertical coordinate
+     */
+    function animateScroll(xScroller, scrollX, yScroller, scrollY) {
+
+        var ox = xScroller.scrollLeft;
+        var oy = yScroller.scrollTop;
+        var dx = scrollX - ox;
+        var dy = scrollY - oy;
+
+        if (Math.abs(dx) < Epsilon && Math.abs(dy) < Epsilon) {
+            return;
+        }
+
+        var start;
+
+        function scrollAnim(currentTimestamp) {
+
+            start = start || currentTimestamp;
+
+            var k = Math.min(1, (currentTimestamp - start) / ScrollTime);
+
+            if (k === 1) {
+                resetScrollTimer();
+                builtinScroll(xScroller, scrollX, yScroller, scrollY, false);
+                return;
+            }
+
+            k = ease(k);
+
+            var x = ox + dx*k;
+            var y = oy + dy*k;
+
+            builtinScroll(xScroller, x, yScroller, y, false);
+
+            scrollTimer = requestAnimationFrame(scrollAnim);
+        }
+
+        scrollTimer = requestAnimationFrame(scrollAnim);
+    }
+
+    /**
+     * Performs scroll.
+     *
+     * @param {HTMLElement} xScroller horizontal scroller
+     * @param {number} scrollX horizontal coordinate
+     * @param {HTMLElement} yScroller vertical scroller
+     * @param {number} scrollY vertical coordinate
+     * @param {boolean} smooth smooth scrolling
+     */
+    function doScroll(xScroller, scrollX, yScroller, scrollY, smooth) {
+
+        resetScrollTimer();
+
+        if (smooth && useAnimatedScroll()) {
+            animateScroll(xScroller, scrollX, yScroller, scrollY);
+        } else {
+            builtinScroll(xScroller, scrollX, yScroller, scrollY, smooth);
+        }
+    }
+
+    /**
+     * Returns true if smooth scroll must be used.
+     */
+    function useSmoothScroll() {
+
+        if (browser.tizen) {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Returns true if animated implementation of smooth scroll must be used.
+     */
+    function useAnimatedScroll() {
+        // Add block to force using (or not) of animated implementation
+
+        return !supportsSmoothScroll;
+    }
+
+    /**
+     * Returns true if scroll manager is enabled.
+     */
+    var isEnabled = function() {
+
+        if (!layoutManager.tv) {
+            return false;
+        }
+
+        if (browser.tizen) {
+            return true;
+        }
+
+        if (browser.web0s) {
+            return true;
+        }
+
+        return false;
+    };
+
+    /**
+     * Scrolls the document to a given position.
+     *
+     * @param {number} scrollX horizontal coordinate
+     * @param {number} scrollY vertical coordinate
+     * @param {boolean} [smooth=false] smooth scrolling
+     */
+    var scrollTo = function(scrollX, scrollY, smooth) {
+
+        smooth = !!smooth;
+
+        // Scroller is document itself by default
+        var scroller = getScrollableParent(null, false);
+
+        var xScrollerData = getScrollerData(scroller, false);
+        var yScrollerData = getScrollerData(scroller, true);
+
+        scrollX = clamp(Math.round(scrollX), 0, xScrollerData.scrollSize - xScrollerData.clientSize);
+        scrollY = clamp(Math.round(scrollY), 0, yScrollerData.scrollSize - yScrollerData.clientSize);
+
+        doScroll(scroller, scrollX, scroller, scrollY, smooth);
+    }
+
+    /**
+     * Scrolls the document to a given element.
+     *
+     * @param {HTMLElement} element target element of scroll task
+     * @param {boolean} [smooth=false] smooth scrolling
+     */
+    var scrollToElement = function(element, smooth) {
+
+        smooth = !!smooth;
+
+        var scrollCenterX = true;
+        var scrollCenterY = true;
+
+        var offsetParent = element.offsetParent;
+
+        // In Firefox offsetParent.offsetParent is BODY
+        var isFixed = offsetParent && (!offsetParent.offsetParent || window.getComputedStyle(offsetParent).position === "fixed");
+
+        // Scroll fixed elements to nearest edge (or do not scroll at all)
+        if (isFixed) {
+            scrollCenterX = scrollCenterY = false;
+        }
+
+        var xScroller = getScrollableParent(element, false);
+        var yScroller = getScrollableParent(element, true);
+
+        var elementRect = element.getBoundingClientRect();
+
+        var xScrollerData = getScrollerData(xScroller, false);
+        var yScrollerData = getScrollerData(yScroller, true);
+
+        var xPos = getScrollerChildPos(xScroller, element, false);
+        var yPos = getScrollerChildPos(yScroller, element, true);
+
+        var scrollX = calcScroll(xScrollerData, xPos, elementRect.width, scrollCenterX);
+        var scrollY = calcScroll(yScrollerData, yPos, elementRect.height, scrollCenterY);
+
+        // HACK: Scroll to top for top menu because it is hidden
+        // FIXME: Need a marker to scroll top/bottom
+        if (isFixed && elementRect.bottom < 0) {
+            scrollY = 0;
+        }
+
+        // HACK: Ensure we are at the top
+        // FIXME: Need a marker to scroll top/bottom
+        if (scrollY < minimumScrollY() && yScroller === documentScroller) {
+            scrollY = 0;
+        }
+
+        doScroll(xScroller, scrollX, yScroller, scrollY, smooth);
+    }
+
+    if (isEnabled()) {
+        dom.addEventListener(window, "focusin", function(e) {
+            setTimeout(function() {
+                scrollToElement(e.target, useSmoothScroll());
+            }, 0);
+        }, {capture: true});
+    }
+
+    return {
+        isEnabled: isEnabled,
+        scrollTo: scrollTo,
+        scrollToElement: scrollToElement
+    };
+});

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' ||
@@ -179,19 +172,19 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
             }, context, '.movieResults', {
 
-                    preferThumb: true,
-                    inheritThumb: false,
-                    shape: (enableScrollX() ? 'overflowPortrait' : 'portrait'),
-                    showParentTitleOrTitle: true,
-                    showTitle: false,
-                    centerText: true,
-                    coverImage: true,
-                    overlayText: false,
-                    overlayMoreButton: true,
-                    showAirTime: true,
-                    showAirDateTime: true,
-                    showChannelName: true
-                });
+                preferThumb: true,
+                inheritThumb: false,
+                shape: (enableScrollX() ? 'overflowPortrait' : 'portrait'),
+                showParentTitleOrTitle: true,
+                showTitle: false,
+                centerText: true,
+                coverImage: true,
+                overlayText: false,
+                overlayMoreButton: true,
+                showAirTime: true,
+                showAirDateTime: true,
+                showChannelName: true
+            });
         } else {
 
             searchType(instance, apiClient, {
@@ -205,11 +198,11 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
             }, context, '.movieResults', {
 
-                    showTitle: true,
-                    overlayText: false,
-                    centerText: true,
-                    showYear: true
-                });
+                showTitle: true,
+                overlayText: false,
+                centerText: true,
+                showYear: true
+            });
         }
 
         searchType(instance, apiClient, {
@@ -223,11 +216,11 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.seriesResults', {
 
-                showTitle: true,
-                overlayText: false,
-                centerText: true,
-                showYear: true
-            });
+            showTitle: true,
+            overlayText: false,
+            centerText: true,
+            showYear: true
+        });
 
         if (instance.options.collectionType === 'livetv') {
 
@@ -246,19 +239,19 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
             }, context, '.episodeResults', {
 
-                    preferThumb: true,
-                    inheritThumb: false,
-                    shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-                    showParentTitleOrTitle: true,
-                    showTitle: false,
-                    centerText: true,
-                    coverImage: true,
-                    overlayText: false,
-                    overlayMoreButton: true,
-                    showAirTime: true,
-                    showAirDateTime: true,
-                    showChannelName: true
-                });
+                preferThumb: true,
+                inheritThumb: false,
+                shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
+                showParentTitleOrTitle: true,
+                showTitle: false,
+                centerText: true,
+                coverImage: true,
+                overlayText: false,
+                overlayMoreButton: true,
+                showAirTime: true,
+                showAirDateTime: true,
+                showChannelName: true
+            });
 
         } else {
 
@@ -273,10 +266,10 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
             }, context, '.episodeResults', {
 
-                    coverImage: true,
-                    showTitle: true,
-                    showParentTitle: true
-                });
+                coverImage: true,
+                showTitle: true,
+                showParentTitle: true
+            });
         }
 
         searchType(instance, apiClient, {
@@ -292,20 +285,20 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.sportsResults', {
 
-                preferThumb: true,
-                inheritThumb: false,
-                shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-                showParentTitleOrTitle: true,
-                showTitle: false,
-                centerText: true,
-                coverImage: true,
-                overlayText: false,
-                overlayMoreButton: true,
-                showAirTime: true,
-                showAirDateTime: true,
-                showChannelName: true
+            preferThumb: true,
+            inheritThumb: false,
+            shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
+            showParentTitleOrTitle: true,
+            showTitle: false,
+            centerText: true,
+            coverImage: true,
+            overlayText: false,
+            overlayMoreButton: true,
+            showAirTime: true,
+            showAirDateTime: true,
+            showChannelName: true
 
-            });
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -320,20 +313,20 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.kidsResults', {
 
-                preferThumb: true,
-                inheritThumb: false,
-                shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-                showParentTitleOrTitle: true,
-                showTitle: false,
-                centerText: true,
-                coverImage: true,
-                overlayText: false,
-                overlayMoreButton: true,
-                showAirTime: true,
-                showAirDateTime: true,
-                showChannelName: true
+            preferThumb: true,
+            inheritThumb: false,
+            shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
+            showParentTitleOrTitle: true,
+            showTitle: false,
+            centerText: true,
+            coverImage: true,
+            overlayText: false,
+            overlayMoreButton: true,
+            showAirTime: true,
+            showAirDateTime: true,
+            showChannelName: true
 
-            });
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -348,20 +341,20 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.newsResults', {
 
-                preferThumb: true,
-                inheritThumb: false,
-                shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-                showParentTitleOrTitle: true,
-                showTitle: false,
-                centerText: true,
-                coverImage: true,
-                overlayText: false,
-                overlayMoreButton: true,
-                showAirTime: true,
-                showAirDateTime: true,
-                showChannelName: true
+            preferThumb: true,
+            inheritThumb: false,
+            shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
+            showParentTitleOrTitle: true,
+            showTitle: false,
+            centerText: true,
+            coverImage: true,
+            overlayText: false,
+            overlayMoreButton: true,
+            showAirTime: true,
+            showAirDateTime: true,
+            showChannelName: true
 
-            });
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -379,20 +372,20 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.programResults', {
 
-                preferThumb: true,
-                inheritThumb: false,
-                shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-                showParentTitleOrTitle: true,
-                showTitle: false,
-                centerText: true,
-                coverImage: true,
-                overlayText: false,
-                overlayMoreButton: true,
-                showAirTime: true,
-                showAirDateTime: true,
-                showChannelName: true
+            preferThumb: true,
+            inheritThumb: false,
+            shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
+            showParentTitleOrTitle: true,
+            showTitle: false,
+            centerText: true,
+            coverImage: true,
+            overlayText: false,
+            overlayMoreButton: true,
+            showAirTime: true,
+            showAirDateTime: true,
+            showChannelName: true
 
-            });
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -406,11 +399,11 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.videoResults', {
 
-                showParentTitle: true,
-                showTitle: true,
-                overlayText: false,
-                centerText: true
-            });
+            showParentTitle: true,
+            showTitle: true,
+            overlayText: false,
+            centerText: true
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -422,9 +415,9 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.peopleResults', {
 
-                coverImage: true,
-                showTitle: true
-            });
+            coverImage: true,
+            showTitle: true
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -435,9 +428,9 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
             IncludeArtists: true
 
         }, context, '.artistResults', {
-                coverImage: true,
-                showTitle: true
-            });
+            coverImage: true,
+            showTitle: true
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -450,11 +443,11 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.albumResults', {
 
-                showParentTitle: true,
-                showTitle: true,
-                overlayText: false,
-                centerText: true
-            });
+            showParentTitle: true,
+            showTitle: true,
+            overlayText: false,
+            centerText: true
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -467,13 +460,13 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.songResults', {
 
-                showParentTitle: true,
-                showTitle: true,
-                overlayText: false,
-                centerText: true,
-                action: 'play'
+            showParentTitle: true,
+            showTitle: true,
+            overlayText: false,
+            centerText: true,
+            action: 'play'
 
-            });
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -486,11 +479,11 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.photoResults', {
 
-                showParentTitle: false,
-                showTitle: true,
-                overlayText: false,
-                centerText: true
-            });
+            showParentTitle: false,
+            showTitle: true,
+            overlayText: false,
+            centerText: true
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -503,10 +496,10 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.photoAlbumResults', {
 
-                showTitle: true,
-                overlayText: false,
-                centerText: true
-            });
+            showTitle: true,
+            overlayText: false,
+            centerText: true
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -519,11 +512,11 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.bookResults', {
 
-                showTitle: true,
-                overlayText: false,
-                centerText: true
+            showTitle: true,
+            overlayText: false,
+            centerText: true
 
-            });
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -536,10 +529,10 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.audioBookResults', {
 
-                showTitle: true,
-                overlayText: false,
-                centerText: true
-            });
+            showTitle: true,
+            overlayText: false,
+            centerText: true
+        });
 
         searchType(instance, apiClient, {
             searchTerm: value,
@@ -552,10 +545,10 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
         }, context, '.playlistResults', {
 
-                showTitle: true,
-                overlayText: false,
-                centerText: true
-            });
+            showTitle: true,
+            overlayText: false,
+            centerText: true
+        });
     }
 
     function searchType(instance, apiClient, query, context, section, cardOptions) {

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) {