Merge branch 'master' into artworks2

src/components/accessschedule/accessschedule.js

@@ -1,19 +1,33 @@
-define(["dialogHelper", "datetime", "emby-select", "paper-icon-button-light", "formDialogStyle"], function(dialogHelper, datetime) {
+define(["dialogHelper", "datetime", "emby-select", "paper-icon-button-light", "formDialogStyle"], function (dialogHelper, datetime) {
     "use strict";
 
     function getDisplayTime(hours) {
-        var minutes = 0,
-            pct = hours % 1;
-        return pct && (minutes = parseInt(60 * pct)), datetime.getDisplayTime(new Date(2e3, 1, 1, hours, minutes, 0, 0))
+        var minutes = 0;
+        var pct = hours % 1;
+
+        if (pct) {
+            minutes = parseInt(60 * pct);
+        }
+
+        return datetime.getDisplayTime(new Date(2000, 1, 1, hours, minutes, 0, 0));
     }
 
     function populateHours(context) {
-        for (var html = "", i = 0; i < 24; i++) html += '<option value="' + i + '">' + getDisplayTime(i) + "</option>";
-        html += '<option value="24">' + getDisplayTime(0) + "</option>", context.querySelector("#selectStart").innerHTML = html, context.querySelector("#selectEnd").innerHTML = html
+        var html = "";
+
+        for (var i = 0; i < 24; i++) {
+            html += '<option value="' + i + '">' + getDisplayTime(i) + "</option>";
+        }
+
+        html += '<option value="24">' + getDisplayTime(0) + "</option>";
+        context.querySelector("#selectStart").innerHTML = html;
+        context.querySelector("#selectEnd").innerHTML = html;
     }
 
     function loadSchedule(context, schedule) {
-        context.querySelector("#selectDay").value = schedule.DayOfWeek || "Sunday", context.querySelector("#selectStart").value = schedule.StartHour || 0, context.querySelector("#selectEnd").value = schedule.EndHour || 0
+        context.querySelector("#selectDay").value = schedule.DayOfWeek || "Sunday";
+        context.querySelector("#selectStart").value = schedule.StartHour || 0;
+        context.querySelector("#selectEnd").value = schedule.EndHour || 0;
     }
 
     function submitSchedule(context, options) {
@@ -22,30 +36,54 @@ define(["dialogHelper", "datetime", "emby-select", "paper-icon-button-light", "f
             StartHour: context.querySelector("#selectStart").value,
             EndHour: context.querySelector("#selectEnd").value
         };
-        if (parseFloat(updatedSchedule.StartHour) >= parseFloat(updatedSchedule.EndHour)) return void alert(Globalize.translate("ErrorMessageStartHourGreaterThanEnd"));
-        context.submitted = !0, options.schedule = Object.assign(options.schedule, updatedSchedule), dialogHelper.close(context)
+
+        if (parseFloat(updatedSchedule.StartHour) >= parseFloat(updatedSchedule.EndHour)) {
+            return void alert(Globalize.translate("ErrorMessageStartHourGreaterThanEnd"));
+        }
+
+        context.submitted = true;
+        options.schedule = Object.assign(options.schedule, updatedSchedule);
+        dialogHelper.close(context);
     }
+
     return {
-        show: function(options) {
-            return new Promise(function(resolve, reject) {
-                var xhr = new XMLHttpRequest;
-                xhr.open("GET", "components/accessschedule/accessschedule.template.html", !0), xhr.onload = function(e) {
-                    var template = this.response,
-                        dlg = dialogHelper.createDialog({
-                            removeOnClose: !0,
-                            size: "small"
-                        });
+        show: function (options) {
+            return new Promise(function (resolve, reject) {
+                var xhr = new XMLHttpRequest();
+                xhr.open("GET", "components/accessschedule/accessschedule.template.html", true);
+
+                xhr.onload = function (e) {
+                    var template = this.response;
+                    var dlg = dialogHelper.createDialog({
+                        removeOnClose: true,
+                        size: "small"
+                    });
                     dlg.classList.add("formDialog");
                     var html = "";
-                    html += Globalize.translateDocument(template), dlg.innerHTML = html, populateHours(dlg), loadSchedule(dlg, options.schedule), dialogHelper.open(dlg), dlg.addEventListener("close", function() {
-                        dlg.submitted ? resolve(options.schedule) : reject()
-                    }), dlg.querySelector(".btnCancel").addEventListener("click", function(e) {
-                        dialogHelper.close(dlg)
-                    }), dlg.querySelector("form").addEventListener("submit", function(e) {
-                        return submitSchedule(dlg, options), e.preventDefault(), !1
-                    })
-                }, xhr.send()
-            })
+                    html += Globalize.translateDocument(template);
+                    dlg.innerHTML = html;
+                    populateHours(dlg);
+                    loadSchedule(dlg, options.schedule);
+                    dialogHelper.open(dlg);
+                    dlg.addEventListener("close", function () {
+                        if (dlg.submitted) {
+                            resolve(options.schedule);
+                        } else {
+                            reject();
+                        }
+                    });
+                    dlg.querySelector(".btnCancel").addEventListener("click", function (e) {
+                        dialogHelper.close(dlg);
+                    });
+                    dlg.querySelector("form").addEventListener("submit", function (e) {
+                        submitSchedule(dlg, options);
+                        e.preventDefault();
+                        return false;
+                    });
+                };
+
+                xhr.send();
+            });
         }
-    }
-});
+    };
+});

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;
@@ -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/activitylog.js

@@ -1,15 +1,17 @@
-define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotifications", "connectionManager", "emby-button", "listViewStyle"], function(events, globalize, dom, datetime, userSettings, serverNotifications, connectionManager) {
+define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotifications", "connectionManager", "emby-button", "listViewStyle"], function (events, globalize, dom, datetime, userSettings, serverNotifications, connectionManager) {
     "use strict";
 
     function getEntryHtml(entry, apiClient) {
         var html = "";
         html += '<div class="listItem listItem-border">';
         var color = "#00a4dc";
-        var icon =  "notifications";
+        var icon = "notifications";
+
         if ("Error" == entry.Severity || "Fatal" == entry.Severity || "Warn" == entry.Severity) {
             color = "#cc0000";
             icon = "notification_important";
         }
+
         if (entry.UserId && entry.UserPrimaryImageTag) {
             html += '<i class="listItemIcon md-icon" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
                 type: "Primary",
@@ -18,78 +20,138 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific
         } else {
             html += '<i class="listItemIcon md-icon" style="background-color:' + color + '">' + icon + '</i>';
         }
-        html += '<div class="listItemBody three-line">', html += '<div class="listItemBodyText">', html += entry.Name, html += "</div>", html += '<div class="listItemBodyText secondary">';
-        var date = datetime.parseISO8601Date(entry.Date, !0);
-        return html += datetime.toLocaleString(date).toLowerCase(), html += "</div>", html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">', html += entry.ShortOverview || "", html += "</div>", html += "</div>", entry.Overview && (html += '<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="' + entry.Id + '" title="' + globalize.translate("Info") + '"><i class="md-icon">info</i></button>'), html += "</div>"
+
+        html += '<div class="listItemBody three-line">';
+        html += '<div class="listItemBodyText">';
+        html += entry.Name;
+        html += "</div>";
+        html += '<div class="listItemBodyText secondary">';
+        var date = datetime.parseISO8601Date(entry.Date, true);
+        html += datetime.toLocaleString(date).toLowerCase();
+        html += "</div>";
+        html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
+        html += entry.ShortOverview || "";
+        html += "</div>";
+        html += "</div>";
+
+        if (entry.Overview) {
+            html += '<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="' + entry.Id + '" title="' + globalize.translate("Info") + '"><i class="md-icon">info</i></button>';
+        }
+
+        return html += "</div>";
     }
 
     function renderList(elem, apiClient, result, startIndex, limit) {
-        elem.innerHTML = result.Items.map(function(i) {
-            return getEntryHtml(i, apiClient)
-        }).join("")
+        elem.innerHTML = result.Items.map(function (i) {
+            return getEntryHtml(i, apiClient);
+        }).join("");
     }
 
     function reloadData(instance, elem, apiClient, startIndex, limit) {
-        null == startIndex && (startIndex = parseInt(elem.getAttribute("data-activitystartindex") || "0")), limit = limit || parseInt(elem.getAttribute("data-activitylimit") || "7");
-        var minDate = new Date,
-            hasUserId = "false" !== elem.getAttribute("data-useractivity");
-        hasUserId ? minDate.setTime(minDate.getTime() - 864e5) : minDate.setTime(minDate.getTime() - 6048e5), ApiClient.getJSON(ApiClient.getUrl("System/ActivityLog/Entries", {
+        if (null == startIndex) {
+            startIndex = parseInt(elem.getAttribute("data-activitystartindex") || "0");
+        }
+
+        limit = limit || parseInt(elem.getAttribute("data-activitylimit") || "7");
+        var minDate = new Date();
+        var hasUserId = "false" !== elem.getAttribute("data-useractivity");
+
+        if (hasUserId) {
+            minDate.setTime(minDate.getTime() - 24 * 60 * 60 * 1000); // one day back
+        } else {
+            minDate.setTime(minDate.getTime() - 7 * 24 * 60 * 60 * 1000); // one week back
+        }
+
+        ApiClient.getJSON(ApiClient.getUrl("System/ActivityLog/Entries", {
             startIndex: startIndex,
             limit: limit,
             minDate: minDate.toISOString(),
             hasUserId: hasUserId
-        })).then(function(result) {
-            if (elem.setAttribute("data-activitystartindex", startIndex), elem.setAttribute("data-activitylimit", limit), !startIndex) {
+        })).then(function (result) {
+            elem.setAttribute("data-activitystartindex", startIndex);
+            elem.setAttribute("data-activitylimit", limit);
+            if (!startIndex) {
                 var activityContainer = dom.parentWithClass(elem, "activityContainer");
-                activityContainer && (result.Items.length ? activityContainer.classList.remove("hide") : activityContainer.classList.add("hide"))
+
+                if (activityContainer) {
+                    if (result.Items.length) {
+                        activityContainer.classList.remove("hide");
+                    } else {
+                        activityContainer.classList.add("hide");
+                    }
+                }
             }
-            instance.items = result.Items, renderList(elem, apiClient, result, startIndex, limit)
-        })
+
+            instance.items = result.Items;
+            renderList(elem, apiClient, result, startIndex, limit);
+        });
     }
 
     function onActivityLogUpdate(e, apiClient, data) {
         var options = this.options;
-        options && options.serverId === apiClient.serverId() && reloadData(this, options.element, apiClient)
+
+        if (options && options.serverId === apiClient.serverId()) {
+            reloadData(this, options.element, apiClient);
+        }
     }
 
     function onListClick(e) {
         var btnEntryInfo = dom.parentWithClass(e.target, "btnEntryInfo");
+
         if (btnEntryInfo) {
-            var id = btnEntryInfo.getAttribute("data-id"),
-                items = this.items;
+            var id = btnEntryInfo.getAttribute("data-id");
+            var items = this.items;
+
             if (items) {
-                var item = items.filter(function(i) {
-                    return i.Id.toString() === id
+                var item = items.filter(function (i) {
+                    return i.Id.toString() === id;
                 })[0];
-                item && showItemOverview(item)
+
+                if (item) {
+                    showItemOverview(item);
+                }
             }
         }
     }
 
     function showItemOverview(item) {
-        require(["alert"], function(alert) {
+        require(["alert"], function (alert) {
             alert({
                 text: item.Overview
-            })
-        })
+            });
+        });
     }
 
     function ActivityLog(options) {
         this.options = options;
         var element = options.element;
-        element.classList.add("activityLogListWidget"), element.addEventListener("click", onListClick.bind(this));
+        element.classList.add("activityLogListWidget");
+        element.addEventListener("click", onListClick.bind(this));
         var apiClient = connectionManager.getApiClient(options.serverId);
         reloadData(this, element, apiClient);
         var onUpdate = onActivityLogUpdate.bind(this);
-        this.updateFn = onUpdate, events.on(serverNotifications, "ActivityLogEntry", onUpdate), apiClient.sendMessage("ActivityLogEntryStart", "0,1500")
+        this.updateFn = onUpdate;
+        events.on(serverNotifications, "ActivityLogEntry", onUpdate);
+        apiClient.sendMessage("ActivityLogEntryStart", "0,1500");
     }
-    return ActivityLog.prototype.destroy = function() {
+
+    ActivityLog.prototype.destroy = function () {
         var options = this.options;
+
         if (options) {
             options.element.classList.remove("activityLogListWidget");
-            connectionManager.getApiClient(options.serverId).sendMessage("ActivityLogEntryStop", "0,1500")
+            connectionManager.getApiClient(options.serverId).sendMessage("ActivityLogEntryStop", "0,1500");
         }
+
         var onUpdate = this.updateFn;
-        onUpdate && events.off(serverNotifications, "ActivityLogEntry", onUpdate), this.items = null, this.options = null
-    }, ActivityLog
+
+        if (onUpdate) {
+            events.off(serverNotifications, "ActivityLogEntry", onUpdate);
+        }
+
+        this.items = null;
+        this.options = null;
+    };
+
+    return ActivityLog;
 });

src/components/alert.js

@@ -35,7 +35,7 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize)
                 if (result === 'ok') {
                     return Promise.resolve();
                 }
-    
+
                 return Promise.reject();
             });
         }

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');
         }
 
@@ -230,7 +228,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/cardbuilder/card.css

@@ -26,24 +26,12 @@ button {
     font-weight: inherit !important;
 }
 
-.card-nofocustransform {
+.card:not(.show-animation) {
     contain: layout style paint;
 }
 
 .itemsContainer {
     display: flex;
-    margin-left: -0.6em;
-    margin-right: -0.6em;
-}
-
-/* TODO replace this with a proper fix */
-/* doesnt work on mobile devices */
-/* negative margin fixes annoying misalignment with cards and title */
-@media all and (max-width:50em) {
-    .itemsContainer {
-        margin-left: 0;
-        margin-right: 0;
-    }
 }
 
 .vertical-list {
@@ -98,20 +86,21 @@ button {
     contain: layout style;
 }
 
-.cardBox-withfocuscontent-large {
+.card.show-focus:not(.show-animation) .cardBox {
     margin: .4em;
 }
 
-.card-focuscontent-large {
+.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
+.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
     border: .5em solid transparent;
 }
 
-.cardBox-focustransform {
+.card.show-animation .cardBox {
     will-change: transform;
     transition: transform 200ms ease-out;
 }
 
-.card:focus > .cardBox-focustransform {
+.card.show-animation:focus > .cardBox {
     transform: scale(1.18, 1.18);
 }
 
@@ -363,9 +352,6 @@ button {
     vertical-align: middle;
     font-family: inherit;
     font-size: inherit;
-    /*display: flex;
-    align-items: center;
-    justify-content: center;*/
 }
 
 .textActionButton:hover {

src/components/cardbuilder/cardBuilder.js

@@ -3,7 +3,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
         'use strict';
 
         var devicePixelRatio = window.devicePixelRatio || 1;
-        var enableFocusTransfrom = !browser.slow && !browser.edge;
+        var enableFocusTransform = !browser.slow && !browser.edge;
 
         function getCardsHtml(items, options) {
             if (arguments.length === 1) {
@@ -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);
                 }
             }
@@ -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';
             }
 
@@ -1203,6 +1188,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 shape = shape || 'mixedSquare';
             }
 
+            // TODO move card creation code to Card component
+
             var className = 'card';
 
             if (shape) {
@@ -1221,8 +1208,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 className += ' card-hoverable';
             }
 
-            if (!enableFocusTransfrom || !layoutManager.tv) {
-                className += ' card-nofocustransform';
+            if (layoutManager.tv) {
+                className += ' show-focus';
+
+                if (enableFocusTransform) {
+                    className += ' show-animation';
+                }
             }
 
             var imgInfo = getCardImageUrl(item, apiClient, options, shape);
@@ -1250,23 +1241,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
 
-            if (layoutManager.tv) {
-
-                if (enableFocusTransfrom) {
-                    cardBoxClass += ' cardBox-focustransform cardBox-withfocuscontent';
-                } else {
-                    cardBoxClass += ' cardBox-withfocuscontent-large';
-                }
-
-                if (options.cardLayout) {
-                    cardBoxClass += ' card-focuscontent';
-
-                    if (!enableFocusTransfrom) {
-                        cardBoxClass += ' card-focuscontent-large';
-                    }
-                }
-            }
-
             var footerCssClass;
             var progressHtml = indicators.getProgressBarHtml(item);
 
@@ -1283,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,
@@ -1299,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>';
@@ -1385,15 +1357,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             var cardScalableClass = 'cardScalable';
 
-            if (layoutManager.tv && !options.cardLayout) {
-
-                cardScalableClass += ' card-focuscontent';
-
-                if (!enableFocusTransfrom) {
-                    cardScalableClass += ' card-focuscontent-large';
-                }
-            }
-
             cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
             cardBoxClose = '</div>';
             cardScalableClose = '</div>';
@@ -1414,8 +1377,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
                     minCount: 1
                 });
-            }
-            else {
+            } else {
                 indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
             }
 
@@ -1676,8 +1638,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 }
 
                 itemProgressBar.innerHTML = progressHtml;
-            }
-            else {
+            } else {
 
                 itemProgressBar = card.querySelector('.itemProgressBar');
                 if (itemProgressBar) {

src/components/cardbuilder/chaptercardbuilder.js

@@ -1,12 +1,20 @@
 define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browser'], function (datetime, imageLoader, connectionManager, layoutManager, browser) {
     'use strict';
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     function buildChapterCardsHtml(item, chapters, options) {
 
+        // TODO move card creation code to Card component
+
         var className = 'card itemAction chapterCard';
 
-        if (layoutManager.tv && (browser.animate || browser.edge)) {
-            className += ' card-focusscale';
+        if (layoutManager.tv) {
+            className += ' show-focus';
+
+            if (enableFocusTransform) {
+                className += ' show-animation';
+            }
         }
 
         var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
@@ -92,19 +100,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         var cardBoxCssClass = 'cardBox';
         var cardScalableClass = 'cardScalable';
 
-        if (layoutManager.tv) {
-            var enableFocusTransfrom = !browser.slow && !browser.edge;
-
-            cardScalableClass += ' card-focuscontent';
-
-            if (enableFocusTransfrom) {
-                cardBoxCssClass += ' cardBox-focustransform cardBox-withfocuscontent';
-            } else {
-                cardBoxCssClass += ' cardBox-withfocuscontent-large';
-                cardScalableClass += ' card-focuscontent-large';
-            }
-        }
-
         var html = '<button type="button" class="' + className + '"' + dataAttributes + '><div class="' + cardBoxCssClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainer + '</div><div class="innerCardFooter">' + nameHtml + '</div></div></div></button>';
 
         return html;
@@ -137,4 +132,4 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         buildChapterCards: buildChapterCards
     };
 
-});
+});

src/components/channelmapper/channelmapper.js

@@ -1,10 +1,16 @@
-define(["dialogHelper", "loading", "connectionManager", "globalize", "actionsheet", "emby-input", "paper-icon-button-light", "emby-button", "listViewStyle", "material-icons", "formDialogStyle"], function(dialogHelper, loading, connectionManager, globalize, actionsheet) {
+define(["dialogHelper", "loading", "connectionManager", "globalize", "actionsheet", "emby-input", "paper-icon-button-light", "emby-button", "listViewStyle", "material-icons", "formDialogStyle"], function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
     "use strict";
-    return function(options) {
+
+    return function (options) {
         function parentWithClass(elem, className) {
-            for (; !elem.classList || !elem.classList.contains(className);)
-                if (!(elem = elem.parentNode)) return null;
-            return elem
+            while (!elem.classList || !elem.classList.contains(className)) {
+                elem = elem.parentNode;
+                if (!elem) {
+                    return null;
+                }
+            }
+
+            return elem;
         }
 
         function mapChannel(button, channelId, providerChannelId) {
@@ -19,33 +25,35 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
                     providerChannelId: providerChannelId
                 },
                 dataType: "json"
-            }).then(function(mapping) {
+            }).then(function (mapping) {
                 var listItem = parentWithClass(button, "listItem");
-                button.setAttribute("data-providerid", mapping.ProviderChannelId), listItem.querySelector(".secondary").innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName), loading.hide()
-            })
+                button.setAttribute("data-providerid", mapping.ProviderChannelId);
+                listItem.querySelector(".secondary").innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName);
+                loading.hide();
+            });
         }
 
         function onChannelsElementClick(e) {
             var btnMap = parentWithClass(e.target, "btnMap");
+
             if (btnMap) {
                 var channelId = btnMap.getAttribute("data-id");
                 var providerChannelId = btnMap.getAttribute("data-providerid");
-                var menuItems = currentMappingOptions.ProviderChannels.map(function(m) {
+                var menuItems = currentMappingOptions.ProviderChannels.map(function (m) {
                     return {
                         name: m.Name,
                         id: m.Id,
                         selected: m.Id.toLowerCase() === providerChannelId.toLowerCase()
-                    }
+                    };
                 }).sort(function (a, b) {
                     return a.name.localeCompare(b.name);
                 });
-
                 actionsheet.show({
                     positionTo: btnMap,
                     items: menuItems
-                }).then(function(newChannelId) {
-                    mapChannel(btnMap, channelId, newChannelId)
-                })
+                }).then(function (newChannelId) {
+                    mapChannel(btnMap, channelId, newChannelId);
+                });
             }
         }
 
@@ -53,47 +61,87 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
             var apiClient = connectionManager.getApiClient(serverId);
             return apiClient.getJSON(apiClient.getUrl("LiveTv/ChannelMappingOptions", {
                 providerId: providerId
-            }))
+            }));
         }
 
         function getMappingSecondaryName(mapping, providerName) {
-            return (mapping.ProviderChannelName || "") + " - " + providerName
+            return (mapping.ProviderChannelName || "") + " - " + providerName;
         }
 
         function getTunerChannelHtml(channel, providerName) {
             var html = "";
-            return html += '<div class="listItem">', html += '<i class="md-icon listItemIcon">dvr</i>', html += '<div class="listItemBody two-line">', html += '<h3 class="listItemBodyText">', html += channel.Name, html += "</h3>", html += '<div class="secondary listItemBodyText">', channel.ProviderChannelName && (html += getMappingSecondaryName(channel, providerName)), html += "</div>", html += "</div>", html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="md-icon">mode_edit</i></button>', html += "</div>"
+            html += '<div class="listItem">';
+            html += '<i class="md-icon listItemIcon">dvr</i>';
+            html += '<div class="listItemBody two-line">';
+            html += '<h3 class="listItemBodyText">';
+            html += channel.Name;
+            html += "</h3>";
+            html += '<div class="secondary listItemBodyText">';
+
+            if (channel.ProviderChannelName) {
+                html += getMappingSecondaryName(channel, providerName);
+            }
+
+            html += "</div>";
+            html += "</div>";
+            html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="md-icon">mode_edit</i></button>';
+            return html += "</div>";
         }
 
         function getEditorHtml() {
             var html = "";
-            return html += '<div class="formDialogContent">', html += '<div class="dialogContentInner dialog-content-centered">', html += '<form style="margin:auto;">', html += "<h1>" + globalize.translate("HeaderChannels") + "</h1>", html += '<div class="channels paperList">', html += "</div>", html += "</form>", html += "</div>", html += "</div>"
+            html += '<div class="formDialogContent">';
+            html += '<div class="dialogContentInner dialog-content-centered">';
+            html += '<form style="margin:auto;">';
+            html += "<h1>" + globalize.translate("HeaderChannels") + "</h1>";
+            html += '<div class="channels paperList">';
+            html += "</div>";
+            html += "</form>";
+            html += "</div>";
+            return html += "</div>";
         }
 
         function initEditor(dlg, options) {
-            getChannelMappingOptions(options.serverId, options.providerId).then(function(result) {
+            getChannelMappingOptions(options.serverId, options.providerId).then(function (result) {
                 currentMappingOptions = result;
                 var channelsElement = dlg.querySelector(".channels");
-                channelsElement.innerHTML = result.TunerChannels.map(function(channel) {
-                    return getTunerChannelHtml(channel, result.ProviderName)
-                }).join(""), channelsElement.addEventListener("click", onChannelsElementClick)
-            })
+                channelsElement.innerHTML = result.TunerChannels.map(function (channel) {
+                    return getTunerChannelHtml(channel, result.ProviderName);
+                }).join("");
+                channelsElement.addEventListener("click", onChannelsElementClick);
+            });
         }
-        var currentMappingOptions, self = this;
-        self.show = function() {
+
+        var currentMappingOptions;
+        var self = this;
+
+        self.show = function () {
             var dialogOptions = {
-                removeOnClose: !0
+                removeOnClose: true
             };
             dialogOptions.size = "small";
             var dlg = dialogHelper.createDialog(dialogOptions);
-            dlg.classList.add("formDialog"), dlg.classList.add("ui-body-a"), dlg.classList.add("background-theme-a");
-            var html = "",
-                title = globalize.translate("MapChannels");
-            return html += '<div class="formDialogHeader">', html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>', html += '<h3 class="formDialogHeaderTitle">', html += title, html += "</h3>", html += "</div>", html += getEditorHtml(), dlg.innerHTML = html, initEditor(dlg, options), dlg.querySelector(".btnCancel").addEventListener("click", function() {
-                dialogHelper.close(dlg)
-            }), new Promise(function(resolve, reject) {
-                dlg.addEventListener("close", resolve), dialogHelper.open(dlg)
-            })
-        }
-    }
+            dlg.classList.add("formDialog");
+            dlg.classList.add("ui-body-a");
+            dlg.classList.add("background-theme-a");
+            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 += '<h3 class="formDialogHeaderTitle">';
+            html += title;
+            html += "</h3>";
+            html += "</div>";
+            html += getEditorHtml();
+            dlg.innerHTML = html;
+            initEditor(dlg, options);
+            dlg.querySelector(".btnCancel").addEventListener("click", function () {
+                dialogHelper.close(dlg);
+            });
+            return new Promise(function (resolve, reject) {
+                dlg.addEventListener("close", resolve);
+                dialogHelper.open(dlg);
+            });
+        };
+    };
 });

src/components/chromecast/chromecasthelpers.js

@@ -5,7 +5,7 @@ define(['events'], function (events) {
     //
     // https://github.com/ravisorg/LinkParser
     //
-    // Locate and extract almost any URL within a string. Handles protocol-less domains, IPv4 and 
+    // Locate and extract almost any URL within a string. Handles protocol-less domains, IPv4 and
     // IPv6, unrecognised TLDs, and more.
     //
     // This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
@@ -14,26 +14,26 @@ define(['events'], function (events) {
 
         // Original URL regex from the Android android.text.util.Linkify function, found here:
         // http://stackoverflow.com/a/19696443
-        // 
-        // However there were problems with it, most probably related to the fact it was 
+        //
+        // However there were problems with it, most probably related to the fact it was
         // written in 2007, and it's been highly modified.
-        // 
-        // 1) I didn't like the fact that it was tied to specific TLDs, since new ones 
+        //
+        // 1) I didn't like the fact that it was tied to specific TLDs, since new ones
         // are being added all the time it wouldn't be reasonable to expect developer to
         // be continually updating their regular expressions.
-        // 
-        // 2) It didn't allow unicode characters in the domains which are now allowed in 
+        //
+        // 2) It didn't allow unicode characters in the domains which are now allowed in
         // many languages, (including some IDN TLDs). Again these are constantly being
         // added to and it doesn't seem reasonable to hard-code them. Note this ended up
         // not being possible in standard JS due to the way it handles multibyte strings.
         // It is possible using XRegExp, however a big performance hit results. Disabled
         // for now.
-        // 
+        //
         // 3) It didn't allow for IPv6 hostnames
         // IPv6 regex from http://stackoverflow.com/a/17871737
         //
         // 4) It was very poorly commented
-        // 
+        //
         // 5) It wasn't as smart as it could have been about what should be part of a
         // URL and what should be part of human language.
 
@@ -102,8 +102,8 @@ define(['events'], function (events) {
             + "|(?:\\%[a-f0-9]{2})"
             // some characters are much more likely to be used AFTER a url and
             // were not intended to be included in the url itself. Mostly end
-            // of sentence type things. It's also likely that the URL would 
-            // still work if any of these characters were missing from the end 
+            // of sentence type things. It's also likely that the URL would
+            // still work if any of these characters were missing from the end
             // because we parsed it incorrectly. For these characters to be accepted
             // they must be followed by another character that we're reasonably
             // sure is part of the url

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/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");

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-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-scroller/emby-scroller.css

@@ -7,6 +7,17 @@
     margin-right: 3.3%;
 }
 
+/* align first card in scroller to heading */
+.emby-scroller .card:first-of-type > .cardBox {
+    margin-left: 0;
+}
+
+/* align heading for normal item containers */
+/* still not ideal solution but better than the last method */
+.verticalSection > .itemsContainer .cardBox {
+    margin-left: 0;
+}
+
 @media all and (max-width:50em) {
     .emby-scroller {
         padding-left: 3.3%;

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

@@ -87,6 +87,10 @@ _:-ms-input-placeholder {
     transform: scale(1.6);
 }
 
+.mdl-slider.show-focus:focus::-webkit-slider-thumb {
+    transform: scale(1.6);
+}
+
 .slider-no-webkit-thumb::-webkit-slider-thumb {
     opacity: 0 !important;
 }

src/components/emby-slider/emby-slider.js

@@ -19,6 +19,11 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
 
     function updateValues() {
 
+        // Do not update values when dragging with keyboard to keep current progress for reference
+        if (!!this.keyboardDragging) {
+            return;
+        }
+
         var range = this;
         var value = range.value;
 
@@ -82,6 +87,9 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
         if (!layoutManager.mobile) {
             this.classList.add('mdl-slider-hoverthumb');
         }
+        if (layoutManager.tv) {
+            this.classList.add('show-focus');
+        }
 
         var containerElement = this.parentNode;
         containerElement.classList.add('mdl-slider-container');
@@ -177,6 +185,108 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
         }
     };
 
+    /**
+     * Keyboard dragging timeout.
+     * After this delay "change" event will be fired.
+     */
+    var KeyboardDraggingTimeout = 1000;
+
+    /**
+     * Keyboard dragging timer.
+     */
+    var keyboardDraggingTimer;
+
+    /**
+     * Start keyboard dragging.
+     *
+     * @param {Object} elem slider itself
+     */
+    function startKeyboardDragging(elem) {
+        elem.keyboardDragging = true;
+
+        clearTimeout(keyboardDraggingTimer);
+        keyboardDraggingTimer = setTimeout(function () {
+            finishKeyboardDragging(elem);
+        }, KeyboardDraggingTimeout);
+    }
+
+    /**
+     * Finish keyboard dragging.
+     *
+     * @param {Object} elem slider itself
+     */
+    function finishKeyboardDragging(elem) {
+        clearTimeout(keyboardDraggingTimer);
+        keyboardDraggingTimer = undefined;
+
+        elem.keyboardDragging = false;
+
+        var event = new Event('change', {
+            bubbles: true,
+            cancelable: false
+        });
+        elem.dispatchEvent(event);
+    }
+
+    /**
+     * Do step by delta.
+     *
+     * @param {Object} elem slider itself
+     * @param {number} delta step amount
+     */
+    function stepKeyboard(elem, delta) {
+        startKeyboardDragging(elem);
+
+        elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
+
+        var event = new Event('input', {
+            bubbles: true,
+            cancelable: false
+        });
+        elem.dispatchEvent(event);
+    }
+
+    /**
+     * Handle KeyDown event
+     */
+    function onKeyDown(e) {
+        switch (e.key) {
+            case 'ArrowLeft':
+            case 'Left':
+                stepKeyboard(this, -this.keyboardStepDown || -1);
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            case 'ArrowRight':
+            case 'Right':
+                stepKeyboard(this, this.keyboardStepUp || 1);
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+        }
+    }
+
+    /**
+     * Enable keyboard dragging.
+     */
+    EmbySliderPrototype.enableKeyboardDragging = function () {
+        if (!this.keyboardDraggingEnabled) {
+            this.addEventListener('keydown', onKeyDown);
+            this.keyboardDraggingEnabled = true;
+        }
+    }
+
+    /**
+     * Set steps for keyboard input.
+     *
+     * @param {number} stepDown step to reduce
+     * @param {number} stepUp step to increase
+     */
+    EmbySliderPrototype.setKeyboardSteps = function (stepDown, stepUp) {
+        this.keyboardStepDown = stepDown || stepUp || 1;
+        this.keyboardStepUp = stepUp || stepDown || 1;
+    }
+
     function setRange(elem, startPercent, endPercent) {
 
         var style = elem.style;

src/components/emby-tabs/emby-tabs.js

@@ -10,23 +10,6 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
         newButton.classList.add(activeButtonClass);
     }
 
-    function getFocusCallback(tabs, e) {
-        return function () {
-            onClick.call(tabs, e);
-        };
-    }
-
-    function onFocus(e) {
-
-        if (layoutManager.tv) {
-
-            if (this.focusTimeout) {
-                clearTimeout(this.focusTimeout);
-            }
-            this.focusTimeout = setTimeout(getFocusCallback(this, e), 700);
-        }
-    }
-
     function getTabPanel(tabs, index) {
 
         return null;
@@ -87,10 +70,6 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     function onClick(e) {
 
-        if (this.focusTimeout) {
-            clearTimeout(this.focusTimeout);
-        }
-
         var tabs = this;
 
         var current = tabs.querySelector('.' + activeButtonClass);
@@ -163,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 () {
@@ -177,10 +156,6 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
         dom.addEventListener(this, 'click', onClick, {
             passive: true
         });
-        dom.addEventListener(this, 'focus', onFocus, {
-            passive: true,
-            capture: true
-        });
     };
 
     EmbyTabs.focus = function () {
@@ -237,10 +212,6 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
         dom.removeEventListener(this, 'click', onClick, {
             passive: true
         });
-        dom.removeEventListener(this, 'focus', onFocus, {
-            passive: true,
-            capture: true
-        });
     };
 
     function getSelectedTabButton(elem) {

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

@@ -1,20 +1,20 @@
-define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoader", "globalize", "layoutManager", "scrollStyles", "emby-itemscontainer"], function(loading, libraryBrowser, cardBuilder, dom, appHost, imageLoader, globalize, layoutManager) {
+define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoader", "globalize", "layoutManager", "scrollStyles", "emby-itemscontainer"], function (loading, libraryBrowser, cardBuilder, dom, appHost, imageLoader, globalize, layoutManager) {
     "use strict";
 
     function enableScrollX() {
-        return !layoutManager.desktop
+        return !layoutManager.desktop;
     }
 
     function getThumbShape() {
-        return enableScrollX() ? "overflowBackdrop" : "backdrop"
+        return enableScrollX() ? "overflowBackdrop" : "backdrop";
     }
 
     function getPosterShape() {
-        return enableScrollX() ? "overflowPortrait" : "portrait"
+        return enableScrollX() ? "overflowPortrait" : "portrait";
     }
 
     function getSquareShape() {
-        return enableScrollX() ? "overflowSquare" : "square"
+        return enableScrollX() ? "overflowSquare" : "square";
     }
 
     function getSections() {
@@ -23,147 +23,208 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
             types: "Movie",
             id: "favoriteMovies",
             shape: getPosterShape(),
-            showTitle: !1,
-            overlayPlayButton: !0
+            showTitle: false,
+            overlayPlayButton: true
         }, {
             name: "HeaderFavoriteShows",
             types: "Series",
             id: "favoriteShows",
             shape: getPosterShape(),
-            showTitle: !1,
-            overlayPlayButton: !0
+            showTitle: false,
+            overlayPlayButton: true
         }, {
             name: "HeaderFavoriteEpisodes",
             types: "Episode",
             id: "favoriteEpisode",
             shape: getThumbShape(),
-            preferThumb: !1,
-            showTitle: !0,
-            showParentTitle: !0,
-            overlayPlayButton: !0,
-            overlayText: !1,
-            centerText: !0
+            preferThumb: false,
+            showTitle: true,
+            showParentTitle: true,
+            overlayPlayButton: true,
+            overlayText: false,
+            centerText: true
         }, {
             name: "HeaderFavoriteVideos",
             types: "Video,MusicVideo",
             id: "favoriteVideos",
             shape: getThumbShape(),
-            preferThumb: !0,
-            showTitle: !0,
-            overlayPlayButton: !0,
-            overlayText: !1,
-            centerText: !0
+            preferThumb: true,
+            showTitle: true,
+            overlayPlayButton: true,
+            overlayText: false,
+            centerText: true
         }, {
             name: "HeaderFavoriteArtists",
             types: "MusicArtist",
             id: "favoriteArtists",
             shape: getSquareShape(),
-            preferThumb: !1,
-            showTitle: !0,
-            overlayText: !1,
-            showParentTitle: !1,
-            centerText: !0,
-            overlayPlayButton: !0,
-            coverImage: !0
+            preferThumb: false,
+            showTitle: true,
+            overlayText: false,
+            showParentTitle: false,
+            centerText: true,
+            overlayPlayButton: true,
+            coverImage: true
         }, {
             name: "HeaderFavoriteAlbums",
             types: "MusicAlbum",
             id: "favoriteAlbums",
             shape: getSquareShape(),
-            preferThumb: !1,
-            showTitle: !0,
-            overlayText: !1,
-            showParentTitle: !0,
-            centerText: !0,
-            overlayPlayButton: !0,
-            coverImage: !0
+            preferThumb: false,
+            showTitle: true,
+            overlayText: false,
+            showParentTitle: true,
+            centerText: true,
+            overlayPlayButton: true,
+            coverImage: true
         }, {
             name: "HeaderFavoriteSongs",
             types: "Audio",
             id: "favoriteSongs",
             shape: getSquareShape(),
-            preferThumb: !1,
-            showTitle: !0,
-            overlayText: !1,
-            showParentTitle: !0,
-            centerText: !0,
-            overlayMoreButton: !0,
+            preferThumb: false,
+            showTitle: true,
+            overlayText: false,
+            showParentTitle: true,
+            centerText: true,
+            overlayMoreButton: true,
             action: "instantmix",
-            coverImage: !0
-        }]
+            coverImage: true
+        }];
     }
 
     function loadSection(elem, userId, topParentId, section, isSingleSection) {
-        var screenWidth = dom.getWindowSize().innerWidth,
-            options = {
-                SortBy: "SortName",
-                SortOrder: "Ascending",
-                Filters: "IsFavorite",
-                Recursive: !0,
-                Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
-                CollapseBoxSetItems: !1,
-                ExcludeLocationTypes: "Virtual",
-                EnableTotalRecordCount: !1
-            };
-        topParentId && (options.ParentId = topParentId), isSingleSection || (options.Limit = screenWidth >= 1920 ? 10 : screenWidth >= 1440 ? 8 : 6, enableScrollX() && (options.Limit = 20));
+        var screenWidth = dom.getWindowSize().innerWidth;
+        var options = {
+            SortBy: "SortName",
+            SortOrder: "Ascending",
+            Filters: "IsFavorite",
+            Recursive: true,
+            Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
+            CollapseBoxSetItems: false,
+            ExcludeLocationTypes: "Virtual",
+            EnableTotalRecordCount: false
+        };
+
+        if (topParentId) {
+            options.ParentId = topParentId;
+        }
+
+        if (!isSingleSection) {
+            options.Limit = screenWidth >= 1920 ? 10 : screenWidth >= 1440 ? 8 : 6;
+
+            if (enableScrollX()) {
+                options.Limit = 20;
+            }
+        }
+
         var promise;
-        return "MusicArtist" === section.types ? promise = ApiClient.getArtists(userId, options) : (options.IncludeItemTypes = section.types, promise = ApiClient.getItems(userId, options)), promise.then(function(result) {
+
+        if ("MusicArtist" === section.types) {
+            promise = ApiClient.getArtists(userId, options);
+        } else {
+            options.IncludeItemTypes = section.types;
+            promise = ApiClient.getItems(userId, options);
+        }
+
+        return promise.then(function (result) {
             var html = "";
+
             if (result.Items.length) {
                 if (html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">', !layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
-                    html += '<a is="emby-linkbutton" href="' + ("list.html?serverId=" + ApiClient.serverId() + "&type=" + section.types + "&IsFavorite=true") + '" class="more button-flat button-flat-mini sectionTitleTextButton">', html += '<h2 class="sectionTitle sectionTitle-cards">', html += globalize.translate(section.name), html += "</h2>", html += '<i class="md-icon">&#xE5CC;</i>', html += "</a>"
-                } else html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";
-                if (html += "</div>", enableScrollX()) {
+                    html += '<a is="emby-linkbutton" href="' + ("list.html?serverId=" + ApiClient.serverId() + "&type=" + section.types + "&IsFavorite=true") + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
+                    html += '<h2 class="sectionTitle sectionTitle-cards">';
+                    html += globalize.translate(section.name);
+                    html += "</h2>";
+                    html += '<i class="md-icon">&#xE5CC;</i>';
+                    html += "</a>";
+                } else {
+                    html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";
+                }
+
+                html += "</div>";
+                if (enableScrollX()) {
                     var scrollXClass = "scrollX hiddenScrollX";
-                    layoutManager.tv && (scrollXClass += " smoothScrollX"), html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' padded-left padded-right">'
-                } else html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
-                var supportsImageAnalysis = appHost.supports("imageanalysis"),
-                    cardLayout = (appHost.preferVisualCards || supportsImageAnalysis) && section.autoCardLayout && section.showTitle;
-                cardLayout = !1, html += cardBuilder.getCardsHtml(result.Items, {
+                    if (layoutManager.tv) {
+                        scrollXClass += " smoothScrollX";
+                    }
+
+                    html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' padded-left padded-right">';
+                } else {
+                    html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
+                }
+
+                var supportsImageAnalysis = appHost.supports("imageanalysis");
+                var cardLayout = (appHost.preferVisualCards || supportsImageAnalysis) && section.autoCardLayout && section.showTitle;
+                cardLayout = false;
+                html += cardBuilder.getCardsHtml(result.Items, {
                     preferThumb: section.preferThumb,
                     shape: section.shape,
                     centerText: section.centerText && !cardLayout,
-                    overlayText: !1 !== section.overlayText,
+                    overlayText: false !== section.overlayText,
                     showTitle: section.showTitle,
                     showParentTitle: section.showParentTitle,
-                    scalable: !0,
+                    scalable: true,
                     coverImage: section.coverImage,
                     overlayPlayButton: section.overlayPlayButton,
                     overlayMoreButton: section.overlayMoreButton && !cardLayout,
                     action: section.action,
                     allowBottomPadding: !enableScrollX(),
                     cardLayout: cardLayout
-                }), html += "</div>"
+                });
+                html += "</div>";
             }
-            elem.innerHTML = html, imageLoader.lazyChildren(elem)
-        })
+
+            elem.innerHTML = html;
+            imageLoader.lazyChildren(elem);
+        });
     }
 
     function loadSections(page, userId, topParentId, types) {
         loading.show();
-        var sections = getSections(),
-            sectionid = getParameterByName("sectionid");
-        sectionid && (sections = sections.filter(function(s) {
-            return s.id === sectionid
-        })), types && (sections = sections.filter(function(s) {
-            return -1 !== types.indexOf(s.id)
-        }));
-        var i, length, elem = page.querySelector(".favoriteSections");
+        var sections = getSections();
+        var sectionid = getParameterByName("sectionid");
+
+        if (sectionid) {
+            sections = sections.filter(function (s) {
+                return s.id === sectionid;
+            });
+        }
+
+        if (types) {
+            sections = sections.filter(function (s) {
+                return -1 !== types.indexOf(s.id);
+            });
+        }
+
+        var i;
+        var length;
+        var elem = page.querySelector(".favoriteSections");
+
         if (!elem.innerHTML) {
             var html = "";
-            for (i = 0, length = sections.length; i < length; i++) html += '<div class="verticalSection section' + sections[i].id + '"></div>';
-            elem.innerHTML = html
+
+            for (i = 0, length = sections.length; i < length; i++) {
+                html += '<div class="verticalSection section' + sections[i].id + '"></div>';
+            }
+
+            elem.innerHTML = html;
         }
+
         var promises = [];
+
         for (i = 0, length = sections.length; i < length; i++) {
             var section = sections[i];
-            elem = page.querySelector(".section" + section.id), promises.push(loadSection(elem, userId, topParentId, section, 1 === sections.length))
+            elem = page.querySelector(".section" + section.id);
+            promises.push(loadSection(elem, userId, topParentId, section, 1 === sections.length));
         }
-        Promise.all(promises).then(function() {
-            loading.hide()
-        })
+
+        Promise.all(promises).then(function () {
+            loading.hide();
+        });
     }
+
     return {
         render: loadSections
-    }
+    };
 });

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

src/components/focusManager.js

@@ -99,7 +99,7 @@ define(['dom'], function (dom) {
         return normalizeFocusable(elem, originalElement);
     }
 
-    // Determines if a focusable element can be focused at a given point in time 
+    // Determines if a focusable element can be focused at a given point in time
     function isCurrentlyFocusableInternal(elem) {
 
         // http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
@@ -110,7 +110,7 @@ define(['dom'], function (dom) {
         return true;
     }
 
-    // Determines if a focusable element can be focused at a given point in time 
+    // Determines if a focusable element can be focused at a given point in time
     function isCurrentlyFocusable(elem) {
 
         if (elem.disabled) {
@@ -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/groupedcards.js

@@ -1,32 +1,45 @@
-define(["dom", "appRouter", "connectionManager"], function(dom, appRouter, connectionManager) {
+define(["dom", "appRouter", "connectionManager"], function (dom, appRouter, connectionManager) {
     "use strict";
 
     function onGroupedCardClick(e, card) {
-        var itemId = card.getAttribute("data-id"),
-            serverId = card.getAttribute("data-serverid"),
-            apiClient = connectionManager.getApiClient(serverId),
-            userId = apiClient.getCurrentUserId(),
-            playedIndicator = card.querySelector(".playedIndicator"),
-            playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null,
-            options = {
-                Limit: parseInt(playedIndicatorHtml || "10"),
-                Fields: "PrimaryImageAspectRatio,DateCreated",
-                ParentId: itemId,
-                GroupItems: !1
-            },
-            actionableParent = dom.parentWithTag(e.target, ["A", "BUTTON", "INPUT"]);
-        if (!actionableParent || actionableParent.classList.contains("cardContent")) return apiClient.getJSON(apiClient.getUrl("Users/" + userId + "/Items/Latest", options)).then(function(items) {
-            if (1 === items.length) return void appRouter.showItem(items[0]);
-            var url = "itemdetails.html?id=" + itemId + "&serverId=" + serverId;
-            Dashboard.navigate(url)
-        }), e.stopPropagation(), e.preventDefault(), !1
+        var itemId = card.getAttribute("data-id");
+        var serverId = card.getAttribute("data-serverid");
+        var apiClient = connectionManager.getApiClient(serverId);
+        var userId = apiClient.getCurrentUserId();
+        var playedIndicator = card.querySelector(".playedIndicator");
+        var playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;
+        var options = {
+            Limit: parseInt(playedIndicatorHtml || "10"),
+            Fields: "PrimaryImageAspectRatio,DateCreated",
+            ParentId: itemId,
+            GroupItems: false
+        };
+        var actionableParent = dom.parentWithTag(e.target, ["A", "BUTTON", "INPUT"]);
+
+        if (!actionableParent || actionableParent.classList.contains("cardContent")) {
+            apiClient.getJSON(apiClient.getUrl("Users/" + userId + "/Items/Latest", options)).then(function (items) {
+                if (1 === items.length) {
+                    return void appRouter.showItem(items[0]);
+                }
+
+                var url = "itemdetails.html?id=" + itemId + "&serverId=" + serverId;
+                Dashboard.navigate(url);
+            });
+            e.stopPropagation();
+            e.preventDefault();
+            return false;
+        }
     }
 
     function onItemsContainerClick(e) {
         var groupedCard = dom.parentWithClass(e.target, "groupedCard");
-        groupedCard && onGroupedCardClick(e, groupedCard)
+
+        if (groupedCard) {
+            onGroupedCardClick(e, groupedCard);
+        }
     }
+
     return {
         onItemsContainerClick: onItemsContainerClick
-    }
-});
+    };
+});

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

@@ -277,7 +277,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             var nextDay = new Date(date.getTime() + msPerDay - 2000);
 
             // Normally we'd want to just let responsive css handle this,
-            // but since mobile browsers are often underpowered, 
+            // but since mobile browsers are often underpowered,
             // it can help performance to get them out of the markup
             var allowIndicators = dom.getWindowSize().innerWidth >= 600;
 
@@ -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;
@@ -424,16 +417,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
             if (item.Type === 'SeriesTimer') {
                 return '<i class="md-icon programIcon seriesTimerIcon">&#xE062;</i>';
-            }
-            else if (item.TimerId || item.SeriesTimerId) {
+            } 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 '';
             }
 
@@ -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;
                 }
 
@@ -569,14 +557,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                     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) {
@@ -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/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'),
@@ -256,7 +253,6 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
             html += '</div>';
         }
 
-
         return html;
     }
 
@@ -330,6 +326,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                     if (next) {
                         viewItem.parentNode.removeChild(viewItem);
                         next.parentNode.insertBefore(viewItem, next.nextSibling);
+                        focusManager.focus(e.target);
                     }
 
                 } else {
@@ -339,6 +336,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                     if (prev) {
                         viewItem.parentNode.removeChild(viewItem);
                         prev.parentNode.insertBefore(viewItem, prev);
+                        focusManager.focus(e.target);
                     }
                 }
             }
@@ -382,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++) {
@@ -560,31 +561,31 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
                 if (enableScrollX()) {
                     html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true" data-scrollbuttons="false">';
-                    html += '<div class="padded-left padded-right padded-top padded-bottom scrollSlider focuscontainer-x">';
+                    html += '<div class="padded-top padded-bottom scrollSlider focuscontainer-x">';
                 } else {
-                    html += '<div class="padded-left padded-right padded-top padded-bottom focuscontainer-x">';
+                    html += '<div class="padded-top padded-bottom focuscontainer-x">';
                 }
 
-                html += '<a style="margin-left:.8em;margin-right:0;" is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+                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 style="margin-left:.5em;margin-right:0;" is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+                html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
                     serverId: apiClient.serverId(),
                     section: 'guide'
                 }) + '" class="raised"><span>' + globalize.translate('Guide') + '</span></a>';
 
-                html += '<a style="margin-left:.5em;margin-right:0;" is="emby-linkbutton" href="' + appRouter.getRouteUrl('recordedtv', {
+                html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('recordedtv', {
                     serverId: apiClient.serverId()
                 }) + '" class="raised"><span>' + globalize.translate('Recordings') + '</span></a>';
 
-                html += '<a style="margin-left:.5em;margin-right:0;" is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+                html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
                     serverId: apiClient.serverId(),
                     section: 'dvrschedule'
                 }) + '" class="raised"><span>' + globalize.translate('Schedule') + '</span></a>';
 
-                html += '<a style="margin-left:.5em;margin-right:0;" is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
+                html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
                     serverId: apiClient.serverId(),
                     section: 'seriesrecording'
                 }) + '" class="raised"><span>' + globalize.translate('Series') + '</span></a>';

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

@@ -52,7 +52,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     function supportsFade() {
 
         if (browser.tv) {
-            // Not working on tizen. 
+            // Not working on tizen.
             // We could possibly enable on other tv's, but all smart tv browsers tend to be pretty primitive
             return false;
         }
@@ -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);
@@ -575,43 +571,41 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         self.setSubtitleOffset = function(offset) {
 
             var offsetValue = parseFloat(offset);
-            var videoElement = self._mediaElement;
-            var mediaStreamTextTracks = getMediaStreamTextTracks(self._currentPlayOptions.mediaSource);
 
-            Array.from(videoElement.textTracks)
-            .filter(function(trackElement) {
-                if (customTrackIndex === -1 ) {
+            // if .ass currently rendering
+            if (currentAssRenderer) {
+                updateCurrentTrackOffset(offsetValue);
+            } else {
+                var videoElement = self._mediaElement;
+                var mediaStreamTextTracks = getMediaStreamTextTracks(self._currentPlayOptions.mediaSource);
+
+                Array.from(videoElement.textTracks)
+                    .filter(function(trackElement) {
                     // get showing .vtt textTacks
-                    return trackElement.mode === 'showing';
-                } else {
-                    // get current .ass textTrack
-                    return ("textTrack" + customTrackIndex) === trackElement.id;
-                }
-            })
-            .forEach(function(trackElement) {
+                        return trackElement.mode === 'showing';
+                    })
+                    .forEach(function(trackElement) {
 
-                var track = mediaStreamTextTracks.filter(function(stream) {
-                    return ("textTrack" + stream.Index) === trackElement.id;
-                })[0];
+                        var track = customTrackIndex === -1 ? null : mediaStreamTextTracks.filter(function (t) {
+                            return t.Index === customTrackIndex;
+                        })[0];
 
-                if(track) {
-                    offsetValue = updateCurrentTrackOffset(offsetValue);
-                    var format = (track.Codec || '').toLowerCase();
-                    if (format !== 'ass' && format !== 'ssa') {
-                        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);
+                        }
 
-            });
+                    });
+            }
         };
 
         function updateCurrentTrackOffset(offsetValue) {
 
             var relativeOffset = offsetValue;
             var newTrackOffset = offsetValue;
-            if(currentTrackOffset){
+            if (currentTrackOffset) {
                 relativeOffset -= currentTrackOffset;
             }
             currentTrackOffset = newTrackOffset;
@@ -621,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;
+                    });
             }
 
         }
@@ -652,7 +646,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             return profiles.filter(function (p) {
 
-
                 if (p.Type === 'Video') {
 
                     if (!p.AudioCodec) {
@@ -685,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];
@@ -1031,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;
             }
@@ -1192,50 +1186,49 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             }
 
             var trackElement = null;
-            var expectedId = 'manualTrack' + track.Index;
+            if (videoElement.textTracks && videoElement.textTracks.length > 0) {
+                trackElement = videoElement.textTracks[0];
 
-            // get list of tracks
-            var allTracks = videoElement.textTracks;
-            for (var i = 0; i < allTracks.length; i++) {
-
-                var currentTrack = allTracks[i];
-
-                if (currentTrack.label === expectedId) {
-                    trackElement = currentTrack;
-                    break;
-                } else {
-                    currentTrack.mode = 'disabled';
-                }
-            }
-
-            if (!trackElement) {
-                trackElement = videoElement.addTextTrack('subtitles', 'manualTrack' + track.Index, track.Language || 'und');
-
-                // download the track json
-                fetchSubtitles(track, item).then(function (data) {
-
-                    // show in ui
-                    console.log('downloaded ' + data.TrackEvents.length + ' track events');
-                    // add some cues to show the text
-                    // in safari, the cues need to be added before setting the track mode to showing
-                    data.TrackEvents.forEach(function (trackEvent) {
-
-                        var trackCueObject = window.VTTCue || window.TextTrackCue;
-                        var cue = new trackCueObject(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text));
-
-                        trackElement.addCue(cue);
-                    });
+                // This throws an error in IE, but is fine in chrome
+                // In IE it's not necessary anyway because changing the src seems to be enough
+                try {
                     trackElement.mode = 'showing';
-                });
+                    while (trackElement.cues.length) {
+                        trackElement.removeCue(trackElement.cues[0]);
+                    }
+                } catch (e) {
+                    console.log('Error removing cue from textTrack');
+                }
+
+                trackElement.mode = 'disabled';
             } else {
-                trackElement.mode = 'showing';
+                // There is a function addTextTrack but no function for removeTextTrack
+                // Therefore we add ONE element and replace its cue data
+                trackElement = videoElement.addTextTrack('subtitles', 'manualTrack', 'und');
             }
+
+            // download the track json
+            fetchSubtitles(track, item).then(function (data) {
+
+                // show in ui
+                console.log('downloaded ' + data.TrackEvents.length + ' track events');
+                // add some cues to show the text
+                // in safari, the cues need to be added before setting the track mode to showing
+                data.TrackEvents.forEach(function (trackEvent) {
+
+                    var trackCueObject = window.VTTCue || window.TextTrackCue;
+                    var cue = new trackCueObject(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text));
+
+                    trackElement.addCue(cue);
+                });
+                trackElement.mode = 'showing';
+            });
         }
 
         function updateSubtitleText(timeMs) {
 
             // handle offset for ass tracks
-            if(currentTrackOffset) {
+            if (currentTrackOffset) {
                 timeMs += (currentTrackOffset * 1000);
             }
 
@@ -1484,6 +1477,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         }
 
         list.push('SetBrightness');
+        list.push("SetAspectRatio")
 
         return list;
     }
@@ -1564,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 {
@@ -1712,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 () {
@@ -1720,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/humanedate.js

@@ -1,28 +1,45 @@
-define(["datetime"], function(datetime) {
+define(["datetime"], function (datetime) {
     "use strict";
 
     function humaneDate(date_str) {
-        var format, time_formats = [
-                [90, "a minute"],
-                [3600, "minutes", 60],
-                [5400, "an hour"],
-                [86400, "hours", 3600],
-                [129600, "a day"],
-                [604800, "days", 86400],
-                [907200, "a week"],
-                [2628e3, "weeks", 604800],
-                [3942e3, "a month"],
-                [31536e3, "months", 2628e3],
-                [47304e3, "a year"],
-                [31536e5, "years", 31536e3]
-            ],
-            dt = new Date,
-            date = datetime.parseISO8601Date(date_str, !0),
-            seconds = (dt - date) / 1e3,
-            i = 0;
-        for (seconds < 0 && (seconds = Math.abs(seconds)); format = time_formats[i++];)
-            if (seconds < format[0]) return 2 == format.length ? format[1] + " ago" : Math.round(seconds / format[2]) + " " + format[1] + " ago";
-        return seconds > 47304e5 ? Math.round(seconds / 47304e5) + " centuries ago" : date_str
+        var format;
+        var time_formats = [
+            [90, "a minute"],
+            [3600, "minutes", 60],
+            [5400, "an hour"],
+            [86400, "hours", 3600],
+            [129600, "a day"],
+            [604800, "days", 86400],
+            [907200, "a week"],
+            [2628e3, "weeks", 604800],
+            [3942e3, "a month"],
+            [31536e3, "months", 2628e3],
+            [47304e3, "a year"],
+            [31536e5, "years", 31536e3]
+        ];
+        var dt = new Date();
+        var date = datetime.parseISO8601Date(date_str, true);
+        var seconds = (dt - date) / 1000.0;
+        var i = 0;
+
+        if (seconds < 0) {
+            seconds = Math.abs(seconds);
+        }
+        for (; format = time_formats[i++];) {
+            if (seconds < format[0]) {
+                if (2 == format.length) {
+                    return format[1] + " ago";
+                }
+
+                return Math.round(seconds / format[2]) + " " + format[1] + " ago";
+            }
+        }
+
+        if (seconds > 47304e5) {
+            return Math.round(seconds / 47304e5) + " centuries ago";
+        }
+
+        return date_str;
     }
 
     function humaneElapsed(firstDateStr, secondDateStr) {
@@ -30,12 +47,10 @@ define(["datetime"], function(datetime) {
         var dateOne = new Date(firstDateStr);
         var dateTwo = new Date(secondDateStr);
         var delta = (dateTwo.getTime() - dateOne.getTime()) / 1e3;
-
         var days = Math.floor(delta % 31536e3 / 86400);
         var hours = Math.floor(delta % 31536e3 % 86400 / 3600);
         var minutes = Math.floor(delta % 31536e3 % 86400 % 3600 / 60);
         var seconds = Math.round(delta % 31536e3 % 86400 % 3600 % 60);
-
         var elapsed = "";
         elapsed += 1 == days ? days + " day " : "";
         elapsed += days > 1 ? days + " days " : "";
@@ -46,15 +61,13 @@ define(["datetime"], function(datetime) {
         elapsed += elapsed.length > 0 ? "and " : "";
         elapsed += 1 == seconds ? seconds + " second" : "";
         elapsed += 0 == seconds || seconds > 1 ? seconds + " seconds" : "";
-
         return elapsed;
     }
 
     window.humaneDate = humaneDate;
     window.humaneElapsed = humaneElapsed;
-
     return {
         humaneDate: humaneDate,
         humaneElapsed: humaneElapsed
-    }
-});
+    };
+});

src/components/imagedownloader/imagedownloader.js

@@ -1,6 +1,8 @@
 define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) {
     'use strict';
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     var currentItemId;
     var currentItemType;
     var currentResolve;
@@ -164,6 +166,8 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         var tagName = layoutManager.tv ? 'button' : 'div';
         var enableFooterButtons = !layoutManager.tv;
 
+        // TODO move card creation code to Card component
+
         var html = '';
 
         var cssClass = "card scalableCard imageEditorCard";
@@ -172,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';
             }
         }
@@ -196,12 +195,12 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (tagName === 'button') {
             cssClass += ' btnImageCard';
 
-            if (layoutManager.tv && !browser.slow) {
-                cardBoxCssClass += ' cardBox-focustransform';
-            }
-
             if (layoutManager.tv) {
-                cardBoxCssClass += ' card-focuscontent cardBox-withfocuscontent';
+                cssClass += ' show-focus';
+
+                if (enableFocusTransform) {
+                    cssClass += ' show-animation';
+                }
             }
 
             html += '<button type="button" class="' + cssClass + '"';
@@ -220,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>';
         }
 
@@ -413,4 +411,4 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
             });
         }
     };
-});
+});

src/components/imageeditor/imageeditor.js

@@ -1,6 +1,8 @@
 define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'focusManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'browser', 'apphost', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light', 'css!./imageeditor'], function (dialogHelper, connectionManager, loading, dom, layoutManager, focusManager, globalize, scrollHelper, imageLoader, require, browser, appHost) {
     'use strict';
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     var currentItem;
     var hasChanges = false;
 
@@ -22,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) {
@@ -58,7 +59,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                 }
             }
 
-
             apiClient.getItemImageInfos(currentItem.Id).then(function (imageInfos) {
 
                 renderStandardImages(page, apiClient, item, imageInfos, providers);
@@ -95,6 +95,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
 
     function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
 
+        // TODO move card creation code to Card component
+
         var html = '';
 
         var cssClass = "card scalableCard imageEditorCard";
@@ -105,12 +107,12 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
         if (tagName === 'button') {
             cssClass += ' btnImageCard';
 
-            if (layoutManager.tv && !browser.slow) {
-                cardBoxCssClass += ' cardBox-focustransform';
-            }
-
             if (layoutManager.tv) {
-                cardBoxCssClass += ' card-focuscontent cardBox-withfocuscontent';
+                cssClass += ' show-focus';
+
+                if (enableFocusTransform) {
+                    cssClass += ' show-animation';
+                }
             }
 
             html += '<button type="button" class="' + cssClass + '"';
@@ -163,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/imageoptionseditor/imageoptionseditor.js

@@ -1,4 +1,4 @@
-define(["globalize", "dom", "dialogHelper", "emby-checkbox", "emby-select", "emby-input"], function(globalize, dom, dialogHelper) {
+define(["globalize", "dom", "dialogHelper", "emby-checkbox", "emby-select", "emby-input"], function (globalize, dom, dialogHelper) {
     "use strict";
 
     function getDefaultImageConfig(itemType, type) {
@@ -6,72 +6,107 @@ define(["globalize", "dom", "dialogHelper", "emby-checkbox", "emby-select", "emb
             Type: type,
             MinWidth: 0,
             Limit: "Primary" === type ? 1 : 0
-        }
+        };
     }
 
     function findImageOptions(imageOptions, type) {
-        return imageOptions.filter(function(i) {
-            return i.Type == type
-        })[0]
+        return imageOptions.filter(function (i) {
+            return i.Type == type;
+        })[0];
     }
 
     function getImageConfig(options, availableOptions, imageType, itemType) {
-        return findImageOptions(options.ImageOptions || [], imageType) || findImageOptions(availableOptions.DefaultImageOptions || [], imageType) || getDefaultImageConfig(itemType, imageType)
+        return findImageOptions(options.ImageOptions || [], imageType) || findImageOptions(availableOptions.DefaultImageOptions || [], imageType) || getDefaultImageConfig(itemType, imageType);
     }
 
     function setVisibilityOfBackdrops(elem, visible) {
-        visible ? (elem.classList.remove("hide"), elem.querySelector("input").setAttribute("required", "required")) : (elem.classList.add("hide"), elem.querySelector("input").setAttribute("required", ""), elem.querySelector("input").removeAttribute("required"))
+        if (visible) {
+            elem.classList.remove("hide");
+            elem.querySelector("input").setAttribute("required", "required");
+        } else {
+            elem.classList.add("hide");
+            elem.querySelector("input").setAttribute("required", "");
+            elem.querySelector("input").removeAttribute("required");
+        }
     }
 
     function loadValues(context, itemType, options, availableOptions) {
         var supportedImageTypes = availableOptions.SupportedImageTypes || [];
-        setVisibilityOfBackdrops(context.querySelector(".backdropFields"), -1 != supportedImageTypes.indexOf("Backdrop")), setVisibilityOfBackdrops(context.querySelector(".screenshotFields"), -1 != supportedImageTypes.indexOf("Screenshot")), Array.prototype.forEach.call(context.querySelectorAll(".imageType"), function(i) {
-            var imageType = i.getAttribute("data-imagetype"),
-                container = dom.parentWithTag(i, "LABEL"); - 1 == supportedImageTypes.indexOf(imageType) ? container.classList.add("hide") : container.classList.remove("hide"), getImageConfig(options, availableOptions, imageType, itemType).Limit ? i.checked = !0 : i.checked = !1
+        setVisibilityOfBackdrops(context.querySelector(".backdropFields"), -1 != supportedImageTypes.indexOf("Backdrop"));
+        setVisibilityOfBackdrops(context.querySelector(".screenshotFields"), -1 != supportedImageTypes.indexOf("Screenshot"));
+        Array.prototype.forEach.call(context.querySelectorAll(".imageType"), function (i) {
+            var imageType = i.getAttribute("data-imagetype");
+            var container = dom.parentWithTag(i, "LABEL");
+
+            if (-1 == supportedImageTypes.indexOf(imageType)) {
+                container.classList.add("hide");
+            } else {
+                container.classList.remove("hide");
+            }
+
+            if (getImageConfig(options, availableOptions, imageType, itemType).Limit) {
+                i.checked = true;
+            } else {
+                i.checked = false;
+            }
         });
         var backdropConfig = getImageConfig(options, availableOptions, "Backdrop", itemType);
-        context.querySelector("#txtMaxBackdrops").value = backdropConfig.Limit, context.querySelector("#txtMinBackdropDownloadWidth").value = backdropConfig.MinWidth;
+        context.querySelector("#txtMaxBackdrops").value = backdropConfig.Limit;
+        context.querySelector("#txtMinBackdropDownloadWidth").value = backdropConfig.MinWidth;
         var screenshotConfig = getImageConfig(options, availableOptions, "Screenshot", itemType);
-        context.querySelector("#txtMaxScreenshots").value = screenshotConfig.Limit, context.querySelector("#txtMinScreenshotDownloadWidth").value = screenshotConfig.MinWidth
+        context.querySelector("#txtMaxScreenshots").value = screenshotConfig.Limit;
+        context.querySelector("#txtMinScreenshotDownloadWidth").value = screenshotConfig.MinWidth;
     }
 
     function saveValues(context, options) {
-        options.ImageOptions = Array.prototype.map.call(context.querySelectorAll(".imageType:not(.hide)"), function(c) {
+        options.ImageOptions = Array.prototype.map.call(context.querySelectorAll(".imageType:not(.hide)"), function (c) {
             return {
                 Type: c.getAttribute("data-imagetype"),
                 Limit: c.checked ? 1 : 0,
                 MinWidth: 0
-            }
-        }), options.ImageOptions.push({
+            };
+        });
+        options.ImageOptions.push({
             Type: "Backdrop",
             Limit: context.querySelector("#txtMaxBackdrops").value,
             MinWidth: context.querySelector("#txtMinBackdropDownloadWidth").value
-        }), options.ImageOptions.push({
+        });
+        options.ImageOptions.push({
             Type: "Screenshot",
             Limit: context.querySelector("#txtMaxScreenshots").value,
             MinWidth: context.querySelector("#txtMinScreenshotDownloadWidth").value
-        })
+        });
     }
 
     function editor() {
-        this.show = function(itemType, options, availableOptions) {
-            return new Promise(function(resolve, reject) {
-                var xhr = new XMLHttpRequest;
-                xhr.open("GET", "components/imageoptionseditor/imageoptionseditor.template.html", !0), xhr.onload = function(e) {
-                    var template = this.response,
-                        dlg = dialogHelper.createDialog({
-                            size: "medium-tall",
-                            removeOnClose: !0,
-                            scrollY: !1
-                        });
-                    dlg.classList.add("formDialog"), dlg.innerHTML = globalize.translateDocument(template), dlg.addEventListener("close", function() {
-                        saveValues(dlg, options)
-                    }), loadValues(dlg, itemType, options, availableOptions), dialogHelper.open(dlg).then(resolve, resolve), dlg.querySelector(".btnCancel").addEventListener("click", function() {
-                        dialogHelper.close(dlg)
-                    })
-                }, xhr.send()
-            })
-        }
+        this.show = function (itemType, options, availableOptions) {
+            return new Promise(function (resolve, reject) {
+                var xhr = new XMLHttpRequest();
+                xhr.open("GET", "components/imageoptionseditor/imageoptionseditor.template.html", true);
+
+                xhr.onload = function (e) {
+                    var template = this.response;
+                    var dlg = dialogHelper.createDialog({
+                        size: "medium-tall",
+                        removeOnClose: true,
+                        scrollY: false
+                    });
+                    dlg.classList.add("formDialog");
+                    dlg.innerHTML = globalize.translateDocument(template);
+                    dlg.addEventListener("close", function () {
+                        saveValues(dlg, options);
+                    });
+                    loadValues(dlg, itemType, options, availableOptions);
+                    dialogHelper.open(dlg).then(resolve, resolve);
+                    dlg.querySelector(".btnCancel").addEventListener("click", function () {
+                        dialogHelper.close(dlg);
+                    });
+                };
+
+                xhr.send();
+            });
+        };
     }
-    return editor
-});
+
+    return editor;
+});

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

@@ -150,7 +150,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
                 scrollHelper.centerFocus.on(dlg, false);
             }
 
-            // Has to be assigned a z-index after the call to .open() 
+            // Has to be assigned a z-index after the call to .open()
             dlg.addEventListener('close', function () {
 
                 if (layoutManager.tv) {

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

@@ -1,5 +1,7 @@
-define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', 'scrollHelper', 'layoutManager', 'focusManager', 'browser', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'cardStyle'], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) {
-    'use strict';
+define(["dialogHelper", "loading", "connectionManager", "require", "globalize", "scrollHelper", "layoutManager", "focusManager", "browser", "emby-input", "emby-checkbox", "paper-icon-button-light", "css!./../formdialog", "material-icons", "cardStyle"], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) {
+    "use strict";
+
+    var enableFocusTransform = !browser.slow && !browser.edge;
 
     var currentItem;
     var currentItemType;
@@ -19,8 +21,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
             ProviderIds: {}
         };
 
-        var i, length;
-        var identifyField = page.querySelectorAll('.identifyField');
+        var i;
+        var length;
+        var identifyField = page.querySelectorAll(".identifyField");
         var value;
         for (i = 0, length = identifyField.length; i < length; i++) {
 
@@ -28,17 +31,17 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
             if (value) {
 
-                if (identifyField[i].type === 'number') {
+                if (identifyField[i].type === "number") {
                     value = parseInt(value);
                 }
 
-                lookupInfo[identifyField[i].getAttribute('data-lookup')] = value;
+                lookupInfo[identifyField[i].getAttribute("data-lookup")] = value;
             }
         }
 
         var hasId = false;
 
-        var txtLookupId = page.querySelectorAll('.txtLookupId');
+        var txtLookupId = page.querySelectorAll(".txtLookupId");
         for (i = 0, length = txtLookupId.length; i < length; i++) {
 
             value = txtLookupId[i].value;
@@ -46,12 +49,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
             if (value) {
                 hasId = true;
             }
-            lookupInfo.ProviderIds[txtLookupId[i].getAttribute('data-providerkey')] = value;
+            lookupInfo.ProviderIds[txtLookupId[i].getAttribute("data-providerkey")] = value;
         }
 
         if (!hasId && !lookupInfo.Name) {
-            require(['toast'], function (toast) {
-                toast(globalize.translate('PleaseEnterNameOrId'));
+            require(["toast"], function (toast) {
+                toast(globalize.translate("PleaseEnterNameOrId"));
             });
             return;
         }
@@ -62,8 +65,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
         if (currentItem && currentItem.Id) {
             lookupInfo.ItemId = currentItem.Id;
-        }
-        else {
+        } else {
             lookupInfo.IncludeDisabledProviders = true;
         }
 
@@ -76,7 +78,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
             url: apiClient.getUrl("Items/RemoteSearch/" + currentItemType),
             data: JSON.stringify(lookupInfo),
             contentType: "application/json",
-            dataType: 'json'
+            dataType: "json"
 
         }).then(function (results) {
 
@@ -87,26 +89,27 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
     function showIdentificationSearchResults(page, results) {
 
-        var identificationSearchResults = page.querySelector('.identificationSearchResults');
+        var identificationSearchResults = page.querySelector(".identificationSearchResults");
 
-        page.querySelector('.popupIdentifyForm').classList.add('hide');
-        identificationSearchResults.classList.remove('hide');
-        page.querySelector('.identifyOptionsForm').classList.add('hide');
-        page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered');
+        page.querySelector(".popupIdentifyForm").classList.add("hide");
+        identificationSearchResults.classList.remove("hide");
+        page.querySelector(".identifyOptionsForm").classList.add("hide");
+        page.querySelector(".dialogContentInner").classList.remove("dialog-content-centered");
 
-        var html = '';
-        var i, length;
+        var html = "";
+        var i;
+        var length;
         for (i = 0, length = results.length; i < length; i++) {
 
             var result = results[i];
             html += getSearchResultHtml(result, i);
         }
 
-        var elem = page.querySelector('.identificationSearchResultList');
+        var elem = page.querySelector(".identificationSearchResultList");
         elem.innerHTML = html;
 
         function onSearchImageClick() {
-            var index = parseInt(this.getAttribute('data-index'));
+            var index = parseInt(this.getAttribute("data-index"));
 
             var currentResult = results[index];
 
@@ -119,10 +122,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
             }
         }
 
-        var searchImages = elem.querySelectorAll('.card');
+        var searchImages = elem.querySelectorAll(".card");
         for (i = 0, length = searchImages.length; i < length; i++) {
 
-            searchImages[i].addEventListener('click', onSearchImageClick);
+            searchImages[i].addEventListener("click", onSearchImageClick);
         }
 
         if (layoutManager.tv) {
@@ -140,13 +143,13 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
     function showIdentifyOptions(page, identifyResult) {
 
-        var identifyOptionsForm = page.querySelector('.identifyOptionsForm');
+        var identifyOptionsForm = page.querySelector(".identifyOptionsForm");
 
-        page.querySelector('.popupIdentifyForm').classList.add('hide');
-        page.querySelector('.identificationSearchResults').classList.add('hide');
-        identifyOptionsForm.classList.remove('hide');
-        page.querySelector('#chkIdentifyReplaceImages').checked = true;
-        page.querySelector('.dialogContentInner').classList.add('dialog-content-centered');
+        page.querySelector(".popupIdentifyForm").classList.add("hide");
+        page.querySelector(".identificationSearchResults").classList.add("hide");
+        identifyOptionsForm.classList.remove("hide");
+        page.querySelector("#chkIdentifyReplaceImages").checked = true;
+        page.querySelector(".dialogContentInner").classList.add("dialog-content-centered");
 
         currentSearchResult = identifyResult;
 
@@ -157,49 +160,49 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
             lines.push(identifyResult.ProductionYear);
         }
 
-        var resultHtml = lines.join('<br/>');
+        var resultHtml = lines.join("<br/>");
 
         if (identifyResult.ImageUrl) {
             var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName);
 
-            resultHtml = '<div style="display:flex;align-items:center;"><img src="' + displayUrl + '" style="max-height:240px;" /><div style="margin-left:1em;">' + resultHtml + '</div>';
+            resultHtml = '<div style="display:flex;align-items:center;"><img src="' + displayUrl + '" style="max-height:240px;" /><div style="margin-left:1em;">' + resultHtml + "</div>";
         }
 
-        page.querySelector('.selectedSearchResult').innerHTML = resultHtml;
+        page.querySelector(".selectedSearchResult").innerHTML = resultHtml;
 
-        focusManager.focus(identifyOptionsForm.querySelector('.btnSubmit'));
+        focusManager.focus(identifyOptionsForm.querySelector(".btnSubmit"));
     }
 
     function getSearchResultHtml(result, index) {
 
-        var html = '';
+        // TODO move card creation code to Card component
+
+        var html = "";
         var cssClass = "card scalableCard";
-        var cardBoxCssClass = 'cardBox';
+        var cardBoxCssClass = "cardBox";
         var padderClass;
 
         if (currentItemType === "Episode") {
             cssClass += " backdropCard backdropCard-scalable";
-            padderClass = 'cardPadder-backdrop';
-        }
-        else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
+            padderClass = "cardPadder-backdrop";
+        } else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
             cssClass += " squareCard squareCard-scalable";
-            padderClass = 'cardPadder-square';
-        }
-        else {
+            padderClass = "cardPadder-square";
+        } else {
             cssClass += " portraitCard portraitCard-scalable";
-            padderClass = 'cardPadder-portrait';
+            padderClass = "cardPadder-portrait";
         }
 
-        if (layoutManager.tv && !browser.slow) {
-            cardBoxCssClass += ' cardBox-focustransform';
-        }
-
-        cardBoxCssClass += ' cardBox-bottompadded';
-
         if (layoutManager.tv) {
-            cardBoxCssClass += ' card-focuscontent cardBox-withfocuscontent';
+            cssClass += " show-focus";
+
+            if (enableFocusTransform) {
+                cssClass += " show-animation";
+            }
         }
 
+        cardBoxCssClass += " cardBox-bottompadded";
+
         html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
         html += '<div class="' + cardBoxCssClass + '">';
         html += '<div class="cardScalable">';
@@ -215,8 +218,8 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
             html += '<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">' + result.Name + '</div></div>';
         }
-        html += '</div>';
-        html += '</div>';
+        html += "</div>";
+        html += "</div>";
 
         var numLines = 2;
         if (currentItemType === "MusicAlbum") {
@@ -239,12 +242,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
             } else {
                 html += '<div class="cardText cardText-secondary cardTextCentered">';
             }
-            html += lines[i] || '&nbsp;';
-            html += '</div>';
+            html += lines[i] || "&nbsp;";
+            html += "</div>";
         }
 
-        html += '</div>';
-        html += '</button>';
+        html += "</div>";
+        html += "</button>";
         return html;
     }
 
@@ -259,7 +262,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
         loading.show();
 
         var options = {
-            ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
+            ReplaceAllImages: page.querySelector("#chkIdentifyReplaceImages").checked
         };
 
         var apiClient = getApiClient();
@@ -291,7 +294,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
         apiClient.getJSON(apiClient.getUrl("Items/" + item.Id + "/ExternalIdInfos")).then(function (idList) {
 
-            var html = '';
+            var html = "";
 
             var providerIds = item.ProviderIds || {};
 
@@ -303,30 +306,30 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
                 html += '<div class="inputContainer">';
 
-                var idLabel = globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
+                var idLabel = globalize.translate("LabelDynamicExternalId").replace("{0}", idInfo.Name);
 
-                var value = providerIds[idInfo.Key] || '';
+                var value = providerIds[idInfo.Key] || "";
 
                 html += '<input is="emby-input" class="txtLookupId" data-providerkey="' + idInfo.Key + '" id="' + id + '" label="' + idLabel + '"/>';
 
-                html += '</div>';
+                html += "</div>";
             }
 
-            page.querySelector('#txtLookupName').value = '';
+            page.querySelector("#txtLookupName").value = "";
 
             if (item.Type === "Person" || item.Type === "BoxSet") {
 
-                page.querySelector('.fldLookupYear').classList.add('hide');
-                page.querySelector('#txtLookupYear').value = '';
+                page.querySelector(".fldLookupYear").classList.add("hide");
+                page.querySelector("#txtLookupYear").value = "";
             } else {
 
-                page.querySelector('.fldLookupYear').classList.remove('hide');
-                page.querySelector('#txtLookupYear').value = '';
+                page.querySelector(".fldLookupYear").classList.remove("hide");
+                page.querySelector("#txtLookupYear").value = "";
             }
 
-            page.querySelector('.identifyProviderIds').innerHTML = html;
+            page.querySelector(".identifyProviderIds").innerHTML = html;
 
-            page.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Identify');
+            page.querySelector(".formDialogHeaderTitle").innerHTML = globalize.translate("Identify");
         });
     }
 
@@ -334,7 +337,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
         loading.show();
 
-        require(['text!./itemidentifier.template.html'], function (template) {
+        require(["text!./itemidentifier.template.html"], function (template) {
 
             var apiClient = getApiClient();
 
@@ -344,54 +347,62 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
                 currentItemType = currentItem.Type;
 
                 var dialogOptions = {
-                    size: 'fullscreen-border',
+                    size: "fullscreen-border",
                     removeOnClose: true,
                     scrollY: false
                 };
 
                 if (layoutManager.tv) {
-                    dialogOptions.size = 'fullscreen';
+                    dialogOptions.size = "fullscreen";
                 }
 
                 var dlg = dialogHelper.createDialog(dialogOptions);
 
-                dlg.classList.add('formDialog');
-                dlg.classList.add('recordingDialog');
+                dlg.classList.add("formDialog");
+                dlg.classList.add("recordingDialog");
 
-                var html = '';
-                html += globalize.translateDocument(template, 'core');
+                var html = "";
+                html += globalize.translateDocument(template, "core");
 
                 dlg.innerHTML = html;
 
                 // Has to be assigned a z-index after the call to .open()
-                dlg.addEventListener('close', onDialogClosed);
+                dlg.addEventListener("close", onDialogClosed);
 
                 if (layoutManager.tv) {
-                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+                    scrollHelper.centerFocus.on(dlg.querySelector(".formDialogContent"), false);
                 }
 
+                if (item.Path) {
+                    dlg.querySelector('.fldPath').classList.remove('hide');
+                } else {
+                    dlg.querySelector('.fldPath').classList.add('hide');
+                }
+
+                dlg.querySelector('.txtPath').innerHTML = item.Path || '';
+
                 dialogHelper.open(dlg);
 
-                dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
+                dlg.querySelector(".popupIdentifyForm").addEventListener("submit", function (e) {
 
                     e.preventDefault();
                     searchForIdentificationResults(dlg);
                     return false;
                 });
 
-                dlg.querySelector('.identifyOptionsForm').addEventListener('submit', function (e) {
+                dlg.querySelector(".identifyOptionsForm").addEventListener("submit", function (e) {
 
                     e.preventDefault();
                     submitIdentficationResult(dlg);
                     return false;
                 });
 
-                dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
+                dlg.querySelector(".btnCancel").addEventListener("click", function (e) {
 
                     dialogHelper.close(dlg);
                 });
 
-                dlg.classList.add('identifyDialog');
+                dlg.classList.add("identifyDialog");
 
                 showIdentificationForm(dlg, item);
                 loading.hide();
@@ -414,47 +425,47 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
         currentItem = null;
         currentItemType = itemType;
 
-        require(['text!./itemidentifier.template.html'], function (template) {
+        require(["text!./itemidentifier.template.html"], function (template) {
 
             var dialogOptions = {
-                size: 'fullscreen-border',
+                size: "fullscreen-border",
                 removeOnClose: true,
                 scrollY: false
             };
 
             if (layoutManager.tv) {
-                dialogOptions.size = 'fullscreen';
+                dialogOptions.size = "fullscreen";
             }
 
             var dlg = dialogHelper.createDialog(dialogOptions);
 
-            dlg.classList.add('formDialog');
-            dlg.classList.add('recordingDialog');
+            dlg.classList.add("formDialog");
+            dlg.classList.add("recordingDialog");
 
-            var html = '';
-            html += globalize.translateDocument(template, 'core');
+            var html = "";
+            html += globalize.translateDocument(template, "core");
 
             dlg.innerHTML = html;
 
             if (layoutManager.tv) {
-                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+                scrollHelper.centerFocus.on(dlg.querySelector(".formDialogContent"), false);
             }
 
             dialogHelper.open(dlg);
 
-            dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
+            dlg.querySelector(".btnCancel").addEventListener("click", function (e) {
 
                 dialogHelper.close(dlg);
             });
 
-            dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
+            dlg.querySelector(".popupIdentifyForm").addEventListener("submit", function (e) {
 
                 e.preventDefault();
                 searchForIdentificationResults(dlg);
                 return false;
             });
 
-            dlg.addEventListener('close', function () {
+            dlg.addEventListener("close", function () {
 
                 loading.hide();
                 var foundItem = hasChanges ? currentSearchResult : null;
@@ -462,7 +473,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
                 resolveFunc(foundItem);
             });
 
-            dlg.classList.add('identifyDialog');
+            dlg.classList.add("identifyDialog");
 
             showIdentificationFormFindNew(dlg, itemName, itemYear, itemType);
         });
@@ -470,20 +481,20 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
     function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) {
 
-        dlg.querySelector('#txtLookupName').value = itemName;
+        dlg.querySelector("#txtLookupName").value = itemName;
 
         if (itemType === "Person" || itemType === "BoxSet") {
 
-            dlg.querySelector('.fldLookupYear').classList.add('hide');
-            dlg.querySelector('#txtLookupYear').value = '';
+            dlg.querySelector(".fldLookupYear").classList.add("hide");
+            dlg.querySelector("#txtLookupYear").value = "";
 
         } else {
 
-            dlg.querySelector('.fldLookupYear').classList.remove('hide');
-            dlg.querySelector('#txtLookupYear').value = itemYear;
+            dlg.querySelector(".fldLookupYear").classList.remove("hide");
+            dlg.querySelector("#txtLookupYear").value = itemYear;
         }
 
-        dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search');
+        dlg.querySelector(".formDialogHeaderTitle").innerHTML = globalize.translate("Search");
     }
 
     return {

src/components/itemidentifier/itemidentifier.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">&#xE5C4;</i>
+    </button>
     <h3 class="formDialogHeaderTitle">
         ${Identify}
     </h3>
@@ -10,11 +12,17 @@
         <form class="popupIdentifyForm" style="margin:auto;">
 
             <p>${HeaderIdentifyItemHelp}</p>
+            <div class="padded-bottom fldPath hide">
+                <div>${LabelPath}</div>
+                <div class="txtPath fieldDescription"></div>
+            </div>
             <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtLookupName" class="identifyField" data-lookup="Name" label="${LabelName}" />
+                <input is="emby-input" type="text" id="txtLookupName" class="identifyField" data-lookup="Name"
+                    label="${LabelName}" />
             </div>
             <div class="fldLookupYear inputContainer">
-                <input is="emby-input" type="number" id="txtLookupYear" class="identifyField" data-lookup="Year" pattern="[0-9]*" min="1800" label="${LabelYear}" />
+                <input is="emby-input" type="number" id="txtLookupYear" class="identifyField" data-lookup="Year"
+                    pattern="[0-9]*" min="1800" label="${LabelYear}" />
             </div>
 
             <div class="identifyProviderIds">
@@ -43,10 +51,11 @@
             </label>
 
             <div class="formDialogFooter">
-                <button is="emby-button" type="submit" class="raised button-submit block btnSubmit formDialogFooterItem">
+                <button is="emby-button" type="submit"
+                    class="raised button-submit block btnSubmit formDialogFooterItem">
                     <span>${ButtonOk}</span>
                 </button>
             </div>
         </form>
     </div>
-</div>
+</div>

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;
@@ -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;
                     }
                 }

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

@@ -7,16 +7,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
         if (item.Type === 'SeriesTimer') {
             return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE062;</i>';
-        }
-        else if (item.TimerId || item.SeriesTimerId) {
+        } 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 '';
         }
 
@@ -36,7 +33,8 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         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);
                     }
                 }

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/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/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 = "&#xE5D3;";
             html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="md-icon">' + moreIcon + '</i></button>';
 
             selectionCommandsPanel.innerHTML = html;
 
-            selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections);
+            selectionCommandsPanel.querySelector(".btnCloseSelectionPanel").addEventListener("click", hideSelections);
 
-            var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
+            var btnSelectionPanelOptions = selectionCommandsPanel.querySelector(".btnSelectionPanelOptions");
 
-            dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true });
+            dom.addEventListener(btnSelectionPanelOptions, "click", showMenuForSelectedItems, { passive: true });
         }
     }
 
@@ -146,7 +146,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         return new Promise(function (resolve, reject) {
 
-            require(['alert'], function (alert) {
+            require(["alert"], function (alert) {
                 alert(options).then(resolve, resolve);
             });
         });
@@ -156,15 +156,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         return new Promise(function (resolve, reject) {
 
-            var msg = globalize.translate('ConfirmDeleteItem');
-            var title = globalize.translate('HeaderDeleteItem');
+            var msg = globalize.translate("ConfirmDeleteItem");
+            var title = globalize.translate("HeaderDeleteItem");
 
             if (itemIds.length > 1) {
-                msg = globalize.translate('ConfirmDeleteItems');
-                title = globalize.translate('HeaderDeleteItems');
+                msg = globalize.translate("ConfirmDeleteItems");
+                title = globalize.translate("HeaderDeleteItems");
             }
 
-            require(['confirm'], function (confirm) {
+            require(["confirm"], function (confirm) {
 
                 confirm(msg, title).then(function () {
                     var promises = itemIds.map(function (itemId) {
@@ -173,7 +173,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
                     Promise.all(promises).then(resolve, function () {
 
-                        alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject);
+                        alertText(globalize.translate("ErrorDeletingItem")).then(reject, reject);
                     });
                 }, reject);
 
@@ -190,59 +190,60 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
             var menuItems = [];
 
             menuItems.push({
-                name: globalize.translate('AddToCollection'),
-                id: 'addtocollection',
-                ironIcon: 'add'
+                name: globalize.translate("AddToCollection"),
+                id: "addtocollection",
+                icon: "add"
             });
 
             menuItems.push({
-                name: globalize.translate('AddToPlaylist'),
-                id: 'playlist',
-                ironIcon: 'playlist-add'
+                name: globalize.translate("AddToPlaylist"),
+                id: "playlist",
+                icon: "playlist_add"
             });
 
             // TODO: Be more dynamic based on what is selected
             if (user.Policy.EnableContentDeletion) {
                 menuItems.push({
-                    name: globalize.translate('Delete'),
-                    id: 'delete',
-                    ironIcon: 'delete'
+                    name: globalize.translate("Delete"),
+                    id: "delete",
+                    icon: "delete"
                 });
             }
 
-            if (user.Policy.EnableContentDownloading && appHost.supports('filedownload')) {
+            if (user.Policy.EnableContentDownloading && appHost.supports("filedownload")) {
                 menuItems.push({
-                    name: Globalize.translate('ButtonDownload'),
-                    id: 'download',
-                    ironIcon: 'file-download'
+                    name: Globalize.translate("ButtonDownload"),
+                    id: "download",
+                    icon: "file_download"
                 });
             }
 
             if (user.Policy.IsAdministrator) {
                 menuItems.push({
-                    name: globalize.translate('GroupVersions'),
-                    id: 'groupvideos',
-                    ironIcon: 'call-merge'
+                    name: globalize.translate("GroupVersions"),
+                    id: "groupvideos",
+                    icon: "call_merge"
                 });
             }
 
             menuItems.push({
-                name: globalize.translate('MarkPlayed'),
-                id: 'markplayed'
+                name: globalize.translate("MarkPlayed"),
+                id: "markplayed",
+                icon: "check_box"
             });
 
             menuItems.push({
-                name: globalize.translate('MarkUnplayed'),
-                id: 'markunplayed'
+                name: globalize.translate("MarkUnplayed"),
+                id: "markunplayed",
+                icon: "check_box_outline_blank"
             });
 
             menuItems.push({
-                name: globalize.translate('RefreshMetadata'),
-                id: 'refresh'
+                name: globalize.translate("RefreshMetadata"),
+                id: "refresh",
+                icon: "refresh"
             });
 
-
-
             require(['actionsheet'], function (actionsheet) {
                 actionsheet.show({
                     items: menuItems,
@@ -252,8 +253,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                         var serverId = apiClient.serverInfo().Id;
 
                         switch (id) {
-                            case 'addtocollection':
-                                require(['collectionEditor'], function (collectionEditor) {
+                            case "addtocollection":
+                                require(["collectionEditor"], function (collectionEditor) {
                                     new collectionEditor().show({
                                         items: items,
                                         serverId: serverId
@@ -262,8 +263,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'playlist':
-                                require(['playlistEditor'], function (playlistEditor) {
+                            case "playlist":
+                                require(["playlistEditor"], function (playlistEditor) {
                                     new playlistEditor().show({
                                         items: items,
                                         serverId: serverId
@@ -272,30 +273,30 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'delete':
+                            case "delete":
                                 deleteItems(apiClient, items).then(dispatchNeedsRefresh);
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'groupvideos':
+                            case "groupvideos":
                                 combineVersions(apiClient, items);
                                 break;
-                            case 'markplayed':
+                            case "markplayed":
                                 items.forEach(function (itemId) {
                                     apiClient.markPlayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'markunplayed':
+                            case "markunplayed":
                                 items.forEach(function (itemId) {
                                     apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'refresh':
-                                require(['refreshDialog'], function (refreshDialog) {
+                            case "refresh":
+                                require(["refreshDialog"], function (refreshDialog) {
                                     new refreshDialog({
                                         itemIds: items,
                                         serverId: serverId
@@ -320,7 +321,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         [].forEach.call(selectedElements, function (i) {
 
-            var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
+            var container = dom.parentWithAttribute(i, "is", "emby-itemscontainer");
 
             if (container && elems.indexOf(container) === -1) {
                 elems.push(container);
@@ -336,9 +337,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         if (selection.length < 2) {
 
-            require(['alert'], function (alert) {
+            require(["alert"], function (alert) {
                 alert({
-                    text: globalize.translate('PleaseSelectTwoItems')
+                    text: globalize.translate("PleaseSelectTwoItems")
                 });
             });
             return;
@@ -349,7 +350,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         apiClient.ajax({
 
             type: "POST",
-            url: apiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(',') })
+            url: apiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(",") })
 
         }).then(function () {
 
@@ -361,8 +362,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function showSelections(initialCard) {
 
-        require(['emby-checkbox'], function () {
-            var cards = document.querySelectorAll('.card');
+        require(["emby-checkbox"], function () {
+            var cards = document.querySelectorAll(".card");
             for (var i = 0, length = cards.length; i < length; i++) {
                 showSelection(cards[i], initialCard === cards[i]);
             }
@@ -378,9 +379,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         if (selectedItems.length) {
 
-            var card = dom.parentWithClass(target, 'card');
+            var card = dom.parentWithClass(target, "card");
             if (card) {
-                var itemSelectionPanel = card.querySelector('.itemSelectionPanel');
+                var itemSelectionPanel = card.querySelector(".itemSelectionPanel");
                 if (itemSelectionPanel) {
                     return onItemSelectionPanelClick(e, itemSelectionPanel);
                 }
@@ -392,7 +393,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         }
     }
 
-    document.addEventListener('viewbeforehide', hideSelections);
+    document.addEventListener("viewbeforehide", hideSelections);
 
     return function (options) {
 
@@ -402,7 +403,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         function onTapHold(e) {
 
-            var card = dom.parentWithClass(e.target, 'card');
+            var card = dom.parentWithClass(e.target, "card");
 
             if (card) {
 
@@ -439,7 +440,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                 var element = touch.target;
 
                 if (element) {
-                    var card = dom.parentWithClass(element, 'card');
+                    var card = dom.parentWithClass(element, "card");
 
                     if (card) {
 
@@ -508,7 +509,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                 return;
             }
 
-            var card = dom.parentWithClass(touchTarget, 'card');
+            var card = dom.parentWithClass(touchTarget, "card");
             touchTarget = null;
 
             if (card) {
@@ -521,27 +522,27 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
             // mobile safari doesn't allow contextmenu override
             if (browser.touch && !browser.safari) {
-                element.addEventListener('contextmenu', onTapHold);
+                element.addEventListener("contextmenu", onTapHold);
             } else {
-                dom.addEventListener(element, 'touchstart', onTouchStart, {
+                dom.addEventListener(element, "touchstart", onTouchStart, {
                     passive: true
                 });
-                dom.addEventListener(element, 'touchmove', onTouchMove, {
+                dom.addEventListener(element, "touchmove", onTouchMove, {
                     passive: true
                 });
-                dom.addEventListener(element, 'touchend', onTouchEnd, {
+                dom.addEventListener(element, "touchend", onTouchEnd, {
                     passive: true
                 });
-                dom.addEventListener(element, 'touchcancel', onTouchEnd, {
+                dom.addEventListener(element, "touchcancel", onTouchEnd, {
                     passive: true
                 });
-                dom.addEventListener(element, 'mousedown', onMouseDown, {
+                dom.addEventListener(element, "mousedown", onMouseDown, {
                     passive: true
                 });
-                dom.addEventListener(element, 'mouseleave', onMouseOut, {
+                dom.addEventListener(element, "mouseleave", onMouseOut, {
                     passive: true
                 });
-                dom.addEventListener(element, 'mouseup', onMouseOut, {
+                dom.addEventListener(element, "mouseup", onMouseOut, {
                     passive: true
                 });
             }
@@ -550,38 +551,38 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         initTapHold(container);
 
         if (options.bindOnClick !== false) {
-            container.addEventListener('click', onContainerClick);
+            container.addEventListener("click", onContainerClick);
         }
 
         self.onContainerClick = onContainerClick;
 
         self.destroy = function () {
 
-            container.removeEventListener('click', onContainerClick);
-            container.removeEventListener('contextmenu', onTapHold);
+            container.removeEventListener("click", onContainerClick);
+            container.removeEventListener("contextmenu", onTapHold);
 
             var element = container;
 
-            dom.removeEventListener(element, 'touchstart', onTouchStart, {
+            dom.removeEventListener(element, "touchstart", onTouchStart, {
                 passive: true
             });
-            dom.removeEventListener(element, 'touchmove', onTouchMove, {
+            dom.removeEventListener(element, "touchmove", onTouchMove, {
                 passive: true
             });
-            dom.removeEventListener(element, 'touchend', onTouchEnd, {
+            dom.removeEventListener(element, "touchend", onTouchEnd, {
                 passive: true
             });
             // this fires in safari due to magnifying class
-            //dom.removeEventListener(element, 'touchcancel', onTouchEnd, {
+            //dom.removeEventListener(element, "touchcancel", onTouchEnd, {
             //    passive: true
             //});
-            dom.removeEventListener(element, 'mousedown', onMouseDown, {
+            dom.removeEventListener(element, "mousedown", onMouseDown, {
                 passive: true
             });
-            dom.removeEventListener(element, 'mouseleave', onMouseOut, {
+            dom.removeEventListener(element, "mouseleave", onMouseOut, {
                 passive: true
             });
-            dom.removeEventListener(element, 'mouseup', onMouseOut, {
+            dom.removeEventListener(element, "mouseup", onMouseOut, {
                 passive: true
             });
         };

src/components/navdrawer/navdrawer.js

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

src/components/notifications/notifications.js

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

src/components/nowplayingbar/nowplayingbar.js

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

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

@@ -103,8 +103,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
         if (iconElement) {
             if (brightness >= 80) {
                 iconElement.innerHTML = '';
-            }
-            else if (brightness >= 20) {
+            } else if (brightness >= 20) {
                 iconElement.innerHTML = '';
             } else {
                 iconElement.innerHTML = '';

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
@@ -1645,7 +1639,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             player = player || self._currentPlayer;
             if (player.disableShowingSubtitleOffset) {
                 player.disableShowingSubtitleOffset();
-            }            
+            }
         }
 
         self.isShowingSubtitleOffsetEnabled = function(player) {
@@ -1667,14 +1661,14 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
         self.getPlayerSubtitleOffset = function(player) {
             player = player || self._currentPlayer;
-            if (player.getPlayerSubtitleOffset) {
+            if (player.getSubtitleOffset) {
                 return player.getSubtitleOffset();
             }
         }
 
         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

@@ -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/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/recordingcreator/recordingbutton.js

@@ -46,16 +46,13 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
 
         if (item.Type === 'SeriesTimer') {
             return '';
-        }
-        else if (item.TimerId || item.SeriesTimerId) {
+        } 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 '';
         }
 

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

@@ -139,7 +139,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
         context.querySelector('.selectKeepUpTo').innerHTML = html;
     }
-    
+
     function onFieldChange(e) {
         this.querySelector('.btnSubmit').click();
     }

src/components/remotecontrol/remotecontrol.js

@@ -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);
                 }
             }
         }

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/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/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' ||
@@ -142,7 +135,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
 
                 } else if (query.IncludeArtists) {
                     methodName = 'getArtists';
-                } 
+                }
             }
 
             return apiClient[methodName](apiClient.getCurrentUserId(), query);
@@ -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) {

src/components/serverNotifications/serverNotifications.js

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

src/components/serverRestartDialog.js

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

src/components/shell.js

@@ -8,7 +8,7 @@ define([], function () {
             } else {
                 window.open(url, target || '_blank');
             }
-            
+
         },
         canExec: false,
         exec: function (options) {

src/components/shortcuts.js

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

src/components/skinManager.js

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

src/components/slideshow/slideshow.js

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

src/components/subtitleeditor/subtitleeditor.js

@@ -192,8 +192,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         var lastLanguage = userSettings.get('subtitleeditor-language');
         if (lastLanguage) {
             selectLanguage.value = lastLanguage;
-        }
-        else {
+        } else {
 
             apiClient.getCurrentUser().then(function (user) {
 
@@ -347,8 +346,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
         if (typeof itemId === 'string') {
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
-        }
-        else {
+        } else {
             onGetItem(itemId);
         }
     }

src/components/subtitlesettings/subtitleappearancehelper.js

@@ -33,7 +33,7 @@ define([], function () {
                 case 'smaller':
                     list.push({ name: 'font-size', value: '.8em' });
                     break;
-               case 'small':
+                case 'small':
                     list.push({ name: 'font-size', value: 'inherit' });
                     break;
                 case 'larger':
@@ -132,7 +132,6 @@ define([], function () {
 
     function applyStyleList(styles, elem) {
 
-
         for (var i = 0, length = styles.length; i < length; i++) {
 
             var style = styles[i];

src/components/subtitlesync/subtitlesync.js

@@ -25,10 +25,10 @@ define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitles
 
         subtitleSyncTextField.addEventListener("keypress", function(event) {
 
-            if(event.key === "Enter"){
+            if (event.key === "Enter") {
                 // if input key is enter search for float pattern
                 var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
-                if(inputOffset) {
+                if (inputOffset) {
                     inputOffset = inputOffset[0];
 
                     // replace current text by considered offset
@@ -48,7 +48,7 @@ define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitles
             } else {
                 // keep focus to prevent fade with bottom layout
                 this.hasFocus = true;
-                if(event.key.match(/[+-\d.s]/) === null) {
+                if (event.key.match(/[+-\d.s]/) === null) {
                     event.preventDefault();
                 }
             }
@@ -92,14 +92,13 @@ define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitles
         instance.element = parent;
     }
 
-
     function getOffsetFromPercentage(value) {
         // convert percent to fraction
         var offset = (value - 50) / 50;
         // multiply by offset min/max range value (-x to +x) :
         offset *= 30;
         return offset.toFixed(1);
-    };
+    }
 
     function getPercentageFromOffset(value) {
         // divide by offset min/max range value (-x to +x) :
@@ -108,16 +107,16 @@ define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitles
         percentValue *= 50;
         percentValue += 50;
         return Math.min(100, Math.max(0, percentValue.toFixed()));
-    };
+    }
 
     function SubtitleSync(currentPlayer) {
         player = currentPlayer;
         init(this);
     }
 
-    SubtitleSync.prototype.destroy = function(){
+    SubtitleSync.prototype.destroy = function() {
         SubtitleSync.prototype.toggle("forceToHide");
-        if(player){
+        if (player) {
             playbackManager.disableShowingSubtitleOffset(player);
             playbackManager.setSubtitleOffset(0, player);
         }
@@ -130,27 +129,30 @@ define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitles
 
     SubtitleSync.prototype.toggle = function(action) {
 
-        if(player && playbackManager.supportSubtitleOffset(player)){
+        if (player && playbackManager.supportSubtitleOffset(player)) {
 
-            switch(action) {
+            switch (action) {
                 case undefined:
                     // if showing subtitle sync is enabled
-                    if(playbackManager.isShowingSubtitleOffsetEnabled(player) && 
+                    if (playbackManager.isShowingSubtitleOffsetEnabled(player) &&
                         // if there is an external subtitle stream enabled
-                        playbackManager.canHandleOffsetOnCurrentSubtitle(player)){
-                            // if no subtitle offset is defined
-                            if(!playbackManager.getPlayerSubtitleOffset(player)) {
-                                // set default offset to '0' = 50%
-                                subtitleSyncSlider.value = "50";
-                                subtitleSyncTextField.textContent = "0s";
-                                playbackManager.setSubtitleOffset(0, player);
-                            }
-                            // show subtitle sync
-                            subtitleSyncContainer.classList.remove("hide");
-                            break; // stop here
+                        playbackManager.canHandleOffsetOnCurrentSubtitle(player)) {
+                        // if no subtitle offset is defined
+                        if (!playbackManager.getPlayerSubtitleOffset(player)) {
+                            // set default offset to '0' = 50%
+                            subtitleSyncSlider.value = "50";
+                            subtitleSyncTextField.textContent = "0s";
+                            playbackManager.setSubtitleOffset(0, player);
+                        }
+                        // show subtitle sync
+                        subtitleSyncContainer.classList.remove("hide");
+                        break; // stop here
                     } // else continue and hide
                 case "hide":
-                    if(subtitleSyncTextField.hasFocus){break;} // else continue and hide
+                    // only break if element has focus
+                    if (subtitleSyncTextField.hasFocus) {
+                        break;
+                    }
                 case "forceToHide":
                     subtitleSyncContainer.classList.add("hide");
                     break;

src/components/tabbedview/itemstab.js

@@ -246,7 +246,8 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
             this.itemsContainer.setAttribute('data-parentid', params.parentId);
         }
 
-        var i, length;
+        var i;
+        var length;
 
         var btnViewSettings = view.querySelectorAll('.btnViewSettings');
         for (i = 0, length = btnViewSettings.length; i < length; i++) {
@@ -559,7 +560,6 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
     };
 
     ItemsTab.prototype.onPause = function () {
-
         var scroller = this.scroller;
         if (scroller && scroller.pause) {
             scroller.pause();
@@ -573,7 +573,6 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
     };
 
     ItemsTab.prototype.destroy = function () {
-
         this.view = null;
         this.itemsContainer = null;
         this.params = null;
@@ -585,6 +584,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
             this.alphaPicker.destroy();
             this.alphaPicker = null;
         }
+
         this.sortButtons = null;
         this.btnSortText = null;
         this.btnSortIcon = null;

src/components/tabbedview/tabbedview.js

@@ -101,8 +101,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
 
         if (!currentTabController) {
             mainTabsManager.selectedTabIndex(this.initialTabIndex);
-        }
-        else if (currentTabController && currentTabController.onResume) {
+        } else if (currentTabController && currentTabController.onResume) {
             currentTabController.onResume({});
         }
     };

src/components/thememediaplayer.js

@@ -94,8 +94,7 @@ define(['playbackManager', 'userSettings', 'connectionManager'], function (playb
 
         if (viewOptions.supportsThemeMedia) {
             // Do nothing here, allow it to keep playing
-        }
-        else {
+        } else {
             playThemeMedia([], null);
         }
 

src/components/themes/appletv/theme.css

@@ -455,8 +455,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #00a4dc
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #00a4dc !important
 }
 
 .metadataSidebarIcon {

src/components/themes/blueradiance/theme.css

@@ -440,8 +440,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #00a4dc
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #00a4dc !important
 }
 
 .layout-desktop ::-webkit-scrollbar {

src/components/themes/dark/theme.css

@@ -417,8 +417,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #00a4dc
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #00a4dc !important
 }
 
 .layout-desktop ::-webkit-scrollbar {

src/components/themes/emby/theme.css

@@ -417,8 +417,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #52b54b
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #52b54b !important
 }
 
 .layout-desktop ::-webkit-scrollbar {

src/components/themes/light/theme.css

@@ -436,8 +436,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #00a4dc
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #00a4dc !important
 }
 
 .metadataSidebarIcon {

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

@@ -533,8 +533,9 @@ a[data-role=button] {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #ff77f1
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #ff77f1 !important
 }
 
 .layout-desktop,

src/components/themes/wmc/theme.css

@@ -439,8 +439,9 @@ html {
     color: #4285F4
 }
 
-.card:focus .card-focuscontent {
-    border-color: #fff
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-color: #fff !important
 }
 
 .layout-desktop ::-webkit-scrollbar {

src/components/touchhelper.js

@@ -78,11 +78,9 @@ define(['dom', 'events'], function (dom, events) {
 
                 if (deltaX > swipeXThreshold && Math.abs(deltaY) < swipeXMaxY) {
                     events.trigger(self, 'swiperight', [touchTarget]);
-                }
-                else if (deltaX < (0 - swipeXThreshold) && Math.abs(deltaY) < swipeXMaxY) {
+                } else if (deltaX < (0 - swipeXThreshold) && Math.abs(deltaY) < swipeXMaxY) {
                     events.trigger(self, 'swipeleft', [touchTarget]);
-                }
-                else if ((deltaY < (0 - swipeYThreshold) || thresholdYMet) && Math.abs(deltaX) < swipeXMaxY) {
+                } else if ((deltaY < (0 - swipeYThreshold) || thresholdYMet) && Math.abs(deltaX) < swipeXMaxY) {
 
                     thresholdYMet = true;
 
@@ -94,8 +92,7 @@ define(['dom', 'events'], function (dom, events) {
                         currentDeltaX: currentDeltaX,
                         currentDeltaY: currentDeltaY
                     }]);
-                }
-                else if ((deltaY > swipeYThreshold || thresholdYMet) && Math.abs(deltaX) < swipeXMaxY) {
+                } else if ((deltaY > swipeYThreshold || thresholdYMet) && Math.abs(deltaX) < swipeXMaxY) {
                     thresholdYMet = true;
 
                     events.trigger(self, 'swipedown', [touchTarget, {

src/components/tunerpicker.js

@@ -1,78 +1,177 @@
-define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize", "loading", "material-icons", "formDialogStyle", "emby-button", "emby-itemscontainer", "cardStyle"], function(dialogHelper, dom, layoutManager, connectionManager, globalize, loading) {
+define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize", "loading", "browser", "material-icons", "formDialogStyle", "emby-button", "emby-itemscontainer", "cardStyle"], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser) {
     "use strict";
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     function getEditorHtml() {
         var html = "";
-        return html += '<div class="formDialogContent scrollY">', html += '<div class="dialogContentInner dialog-content-centered">', html += '<div class="loadingContent hide">', html += "<h1>" + globalize.translate("DetectingDevices") + "...</h1>", html += "<p>" + globalize.translate("MessagePleaseWait") + "</p>", html += "</div>", html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate("HeaderNewDevices") + "</h1>", html += '<div is="emby-itemscontainer" class="results vertical-wrap">', html += "</div>", html += "</div>", html += "</div>"
+        html += '<div class="formDialogContent scrollY">';
+        html += '<div class="dialogContentInner dialog-content-centered">';
+        html += '<div class="loadingContent hide">';
+        html += "<h1>" + globalize.translate("DetectingDevices") + "...</h1>";
+        html += "<p>" + globalize.translate("MessagePleaseWait") + "</p>";
+        html += "</div>";
+        html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate("HeaderNewDevices") + "</h1>";
+        html += '<div is="emby-itemscontainer" class="results vertical-wrap">';
+        html += "</div>";
+        html += "</div>";
+        return html += "</div>";
     }
 
     function getDeviceHtml(device) {
-        var padderClass, html = "",
-            cssClass = "card scalableCard",
-            cardBoxCssClass = "cardBox visualCardBox";
-        return cssClass += " backdropCard backdropCard-scalable", padderClass = "cardPadder-backdrop", layoutManager.tv && (cssClass += " card-focusscale", cardBoxCssClass += " cardBox-focustransform"), cardBoxCssClass += " card-focuscontent", html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">', html += '<div class="' + cardBoxCssClass + '">', html += '<div class="cardScalable visualCardBox-cardScalable">', html += '<div class="' + padderClass + '"></div>', html += '<div class="cardContent searchImage">', html += '<div class="cardImageContainer coveredImage"><i class="cardImageIcon md-icon">dvr</i></div>', html += "</div>", html += "</div>", html += '<div class="cardFooter visualCardBox-cardFooter">', html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + "</div>", html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + "</div>", html += '<div class="cardText cardText-secondary cardTextCentered">', html += device.Url || "&nbsp;", html += "</div>", html += "</div>", html += "</div>", html += "</button>"
+        var padderClass;
+        var html = "";
+        var cssClass = "card scalableCard";
+        var cardBoxCssClass = "cardBox visualCardBox";
+        cssClass += " backdropCard backdropCard-scalable";
+        padderClass = "cardPadder-backdrop";
+
+        // TODO move card creation code to Card component
+
+        if (layoutManager.tv) {
+            cssClass += " show-focus";
+
+            if (enableFocusTransform) {
+                cssClass += " show-animation";
+            }
+        }
+
+        html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
+        html += '<div class="' + cardBoxCssClass + '">';
+        html += '<div class="cardScalable visualCardBox-cardScalable">';
+        html += '<div class="' + padderClass + '"></div>';
+        html += '<div class="cardContent searchImage">';
+        html += '<div class="cardImageContainer coveredImage"><i class="cardImageIcon md-icon">dvr</i></div>';
+        html += "</div>";
+        html += "</div>";
+        html += '<div class="cardFooter visualCardBox-cardFooter">';
+        html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + "</div>";
+        html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + "</div>";
+        html += '<div class="cardText cardText-secondary cardTextCentered">';
+        html += device.Url || "&nbsp;";
+        html += "</div>";
+        html += "</div>";
+        html += "</div>";
+        return html += "</button>";
     }
 
     function getTunerName(providerId) {
         switch (providerId = providerId.toLowerCase()) {
             case "m3u":
                 return "M3U";
+
             case "hdhomerun":
                 return "HDHomerun";
+
             case "hauppauge":
                 return "Hauppauge";
+
             case "satip":
                 return "DVB";
+
             default:
-                return "Unknown"
+                return "Unknown";
         }
     }
 
     function renderDevices(view, devices) {
-        var i, length, html = "";
-        for (i = 0, length = devices.length; i < length; i++) html += getDeviceHtml(devices[i]);
-        devices.length ? view.querySelector(".devicesHeader").classList.remove("hide") : (html = "<p><br/>" + globalize.translate("NoNewDevicesFound") + "</p>", view.querySelector(".devicesHeader").classList.add("hide"));
+        var i;
+        var length;
+        var html = "";
+
+        for (i = 0, length = devices.length; i < length; i++) {
+            html += getDeviceHtml(devices[i]);
+        }
+
+        if (devices.length) {
+            view.querySelector(".devicesHeader").classList.remove("hide");
+        } else {
+            html = "<p><br/>" + globalize.translate("NoNewDevicesFound") + "</p>";
+            view.querySelector(".devicesHeader").classList.add("hide");
+        }
+
         var elem = view.querySelector(".results");
-        elem.innerHTML = html, layoutManager.tv && focusManager.autoFocus(elem)
+        elem.innerHTML = html;
+
+        if (layoutManager.tv) {
+            focusManager.autoFocus(elem);
+        }
     }
 
     function discoverDevices(view, apiClient) {
-        return loading.show(), view.querySelector(".loadingContent").classList.remove("hide"), ApiClient.getJSON(ApiClient.getUrl("LiveTv/Tuners/Discvover", {
-            NewDevicesOnly: !0
-        })).then(function(devices) {
-            currentDevices = devices, renderDevices(view, devices), view.querySelector(".loadingContent").classList.add("hide"), loading.hide()
-        })
+        loading.show();
+        view.querySelector(".loadingContent").classList.remove("hide");
+        return ApiClient.getJSON(ApiClient.getUrl("LiveTv/Tuners/Discvover", {
+            NewDevicesOnly: true
+        })).then(function (devices) {
+            currentDevices = devices;
+            renderDevices(view, devices);
+            view.querySelector(".loadingContent").classList.add("hide");
+            loading.hide();
+        });
     }
 
     function tunerPicker() {
-        this.show = function(options) {
+        this.show = function (options) {
             var dialogOptions = {
-                removeOnClose: !0,
-                scrollY: !1
+                removeOnClose: true,
+                scrollY: false
             };
-            layoutManager.tv ? dialogOptions.size = "fullscreen" : dialogOptions.size = "small";
+
+            if (layoutManager.tv) {
+                dialogOptions.size = "fullscreen";
+            } else {
+                dialogOptions.size = "small";
+            }
+
             var dlg = dialogHelper.createDialog(dialogOptions);
             dlg.classList.add("formDialog");
             var html = "";
-            html += '<div class="formDialogHeader">', html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>', html += '<h3 class="formDialogHeaderTitle">', html += globalize.translate("HeaderLiveTvTunerSetup"), html += "</h3>", html += "</div>", html += getEditorHtml(), dlg.innerHTML = html, dlg.querySelector(".btnCancel").addEventListener("click", function() {
-                dialogHelper.close(dlg)
+            html += '<div class="formDialogHeader">';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<h3 class="formDialogHeaderTitle">';
+            html += globalize.translate("HeaderLiveTvTunerSetup");
+            html += "</h3>";
+            html += "</div>";
+            html += getEditorHtml();
+            dlg.innerHTML = html;
+            dlg.querySelector(".btnCancel").addEventListener("click", function () {
+                dialogHelper.close(dlg);
             });
             var deviceResult;
-            dlg.querySelector(".results").addEventListener("click", function(e) {
+            dlg.querySelector(".results").addEventListener("click", function (e) {
                 var tunerCard = dom.parentWithClass(e.target, "card");
+
                 if (tunerCard) {
                     var deviceId = tunerCard.getAttribute("data-id");
-                    deviceResult = currentDevices.filter(function(d) {
-                        return d.DeviceId === deviceId
-                    })[0], dialogHelper.close(dlg)
+                    deviceResult = currentDevices.filter(function (d) {
+                        return d.DeviceId === deviceId;
+                    })[0];
+                    dialogHelper.close(dlg);
                 }
-            }), layoutManager.tv && centerFocus(dlg.querySelector(".formDialogContent"), !1, !0);
+            });
+
+            if (layoutManager.tv) {
+                centerFocus(dlg.querySelector(".formDialogContent"), false, true);
+            }
+
             var apiClient = connectionManager.getApiClient(options.serverId);
-            return discoverDevices(dlg, apiClient), layoutManager.tv && centerFocus(dlg.querySelector(".formDialogContent"), !1, !1), dialogHelper.open(dlg).then(function() {
-                return deviceResult ? Promise.resolve(deviceResult) : Promise.reject()
-            })
-        }
+            discoverDevices(dlg, apiClient);
+
+            if (layoutManager.tv) {
+                centerFocus(dlg.querySelector(".formDialogContent"), false, false);
+            }
+
+            return dialogHelper.open(dlg).then(function () {
+                if (deviceResult) {
+                    return Promise.resolve(deviceResult);
+                }
+
+                return Promise.reject();
+            });
+        };
     }
+
     var currentDevices = [];
-    return tunerPicker
-});
+    return tunerPicker;
+});

src/components/tvproviders/schedulesdirect.js

@@ -1,119 +1,196 @@
-define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "emby-select", "emby-button", "flexStyles"], function($, loading) {
+define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "emby-select", "emby-button", "flexStyles"], function ($, loading) {
     "use strict";
-    return function(page, providerId, options) {
+
+    return function (page, providerId, options) {
         function reload() {
-            loading.show(), ApiClient.getNamedConfiguration("livetv").then(function(config) {
-                var info = config.ListingProviders.filter(function(i) {
-                    return i.Id === providerId
+            loading.show();
+            ApiClient.getNamedConfiguration("livetv").then(function (config) {
+                var info = config.ListingProviders.filter(function (i) {
+                    return i.Id === providerId;
                 })[0] || {};
-                listingsId = info.ListingsId, $("#selectListing", page).val(info.ListingsId || ""), page.querySelector(".txtUser").value = info.Username || "", page.querySelector(".txtPass").value = "", page.querySelector(".txtZipCode").value = info.ZipCode || "", info.Username && info.Password ? page.querySelector(".listingsSection").classList.remove("hide") : page.querySelector(".listingsSection").classList.add("hide"), page.querySelector(".chkAllTuners").checked = info.EnableAllTuners, page.querySelector(".chkAllTuners").checked ? page.querySelector(".selectTunersSection").classList.add("hide") : page.querySelector(".selectTunersSection").classList.remove("hide"), setCountry(info), refreshTunerDevices(page, info, config.TunerHosts)
-            })
+                listingsId = info.ListingsId;
+                $("#selectListing", page).val(info.ListingsId || "");
+                page.querySelector(".txtUser").value = info.Username || "";
+                page.querySelector(".txtPass").value = "";
+                page.querySelector(".txtZipCode").value = info.ZipCode || "";
+
+                if (info.Username && info.Password) {
+                    page.querySelector(".listingsSection").classList.remove("hide");
+                } else {
+                    page.querySelector(".listingsSection").classList.add("hide");
+                }
+
+                page.querySelector(".chkAllTuners").checked = info.EnableAllTuners;
+
+                if (info.EnableAllTuners) {
+                    page.querySelector(".selectTunersSection").classList.add("hide");
+                } else {
+                    page.querySelector(".selectTunersSection").classList.remove("hide");
+                }
+
+                setCountry(info);
+                refreshTunerDevices(page, info, config.TunerHosts);
+            });
         }
 
         function setCountry(info) {
-            ApiClient.getJSON(ApiClient.getUrl("LiveTv/ListingProviders/SchedulesDirect/Countries")).then(function(result) {
-                var i, length, countryList = [];
+            ApiClient.getJSON(ApiClient.getUrl("LiveTv/ListingProviders/SchedulesDirect/Countries")).then(function (result) {
+                var i;
+                var length;
+                var countryList = [];
+
                 for (var region in result) {
                     var countries = result[region];
-                    if (countries.length && "ZZZ" !== region)
-                        for (i = 0, length = countries.length; i < length; i++) countryList.push({
-                            name: countries[i].fullName,
-                            value: countries[i].shortName
-                        })
+
+                    if (countries.length && "ZZZ" !== region) {
+                        for (i = 0, length = countries.length; i < length; i++) {
+                            countryList.push({
+                                name: countries[i].fullName,
+                                value: countries[i].shortName
+                            });
+                        }
+                    }
                 }
-                countryList.sort(function(a, b) {
-                    return a.name > b.name ? 1 : a.name < b.name ? -1 : 0
-                }), $("#selectCountry", page).html(countryList.map(function(c) {
-                    return '<option value="' + c.value + '">' + c.name + "</option>"
-                }).join("")).val(info.Country || ""), $(page.querySelector(".txtZipCode")).trigger("change")
-            }, function() {
+
+                countryList.sort(function (a, b) {
+                    if (a.name > b.name) {
+                        return 1;
+                    }
+
+                    if (a.name < b.name) {
+                        return -1;
+                    }
+
+                    return 0;
+                });
+                $("#selectCountry", page).html(countryList.map(function (c) {
+                    return '<option value="' + c.value + '">' + c.name + "</option>";
+                }).join("")).val(info.Country || "");
+                $(page.querySelector(".txtZipCode")).trigger("change");
+            }, function () { // ApiClient.getJSON() error handler
                 Dashboard.alert({
                     message: Globalize.translate("ErrorGettingTvLineups")
-                })
-            }), loading.hide()
+                });
+            });
+            loading.hide();
         }
 
         function sha256(str) {
-            if (!self.TextEncoder) return Promise.resolve("");
+            if (!self.TextEncoder) {
+                return Promise.resolve("");
+            }
+
             var buffer = new TextEncoder("utf-8").encode(str);
-            return crypto.subtle.digest("SHA-256", buffer).then(function(hash) {
-                return hex(hash)
-            })
+            return crypto.subtle.digest("SHA-256", buffer).then(function (hash) {
+                return hex(hash);
+            });
         }
 
         function hex(buffer) {
-            for (var hexCodes = [], view = new DataView(buffer), i = 0; i < view.byteLength; i += 4) {
-                var value = view.getUint32(i),
-                    stringValue = value.toString(16),
-                    paddedValue = ("00000000" + stringValue).slice(-"00000000".length);
-                hexCodes.push(paddedValue)
+            var hexCodes = [];
+            var view = new DataView(buffer);
+
+            for (var i = 0; i < view.byteLength; i += 4) {
+                var value = view.getUint32(i);
+                var stringValue = value.toString(16);
+                var paddedValue = ("00000000" + stringValue).slice(-"00000000".length);
+                hexCodes.push(paddedValue);
             }
-            return hexCodes.join("")
+
+            return hexCodes.join("");
         }
 
         function submitLoginForm() {
-            loading.show(), sha256(page.querySelector(".txtPass").value).then(function(passwordHash) {
+            loading.show();
+            sha256(page.querySelector(".txtPass").value).then(function (passwordHash) {
                 var info = {
-                        Type: "SchedulesDirect",
-                        Username: page.querySelector(".txtUser").value,
-                        EnableAllTuners: !0,
-                        Password: passwordHash,
-                        Pw: page.querySelector(".txtPass").value
-                    },
-                    id = providerId;
-                id && (info.Id = id), ApiClient.ajax({
+                    Type: "SchedulesDirect",
+                    Username: page.querySelector(".txtUser").value,
+                    EnableAllTuners: true,
+                    Password: passwordHash,
+                    Pw: page.querySelector(".txtPass").value
+                };
+                var id = providerId;
+
+                if (id) {
+                    info.Id = id;
+                }
+
+                ApiClient.ajax({
                     type: "POST",
                     url: ApiClient.getUrl("LiveTv/ListingProviders", {
-                        ValidateLogin: !0
+                        ValidateLogin: true
                     }),
                     data: JSON.stringify(info),
                     contentType: "application/json",
                     dataType: "json"
-                }).then(function(result) {
-                    Dashboard.processServerConfigurationUpdateResult(), providerId = result.Id, reload()
-                }, function() {
-                    Dashboard.alert({
+                }).then(function (result) {
+                    Dashboard.processServerConfigurationUpdateResult();
+                    providerId = result.Id;
+                    reload();
+                }, function () {
+                    Dashboard.alert({ // ApiClient.ajax() error handler
                         message: Globalize.translate("ErrorSavingTvProvider")
-                    })
-                })
-            })
+                    });
+                });
+            });
         }
 
         function submitListingsForm() {
             var selectedListingsId = $("#selectListing", page).val();
-            if (!selectedListingsId) return void Dashboard.alert({
-                message: Globalize.translate("ErrorPleaseSelectLineup")
-            });
+
+            if (!selectedListingsId) {
+                return void Dashboard.alert({
+                    message: Globalize.translate("ErrorPleaseSelectLineup")
+                });
+            }
+
             loading.show();
             var id = providerId;
-            ApiClient.getNamedConfiguration("livetv").then(function(config) {
-                var info = config.ListingProviders.filter(function(i) {
-                    return i.Id === id
+            ApiClient.getNamedConfiguration("livetv").then(function (config) {
+                var info = config.ListingProviders.filter(function (i) {
+                    return i.Id === id;
                 })[0];
-                info.ZipCode = page.querySelector(".txtZipCode").value, info.Country = $("#selectCountry", page).val(), info.ListingsId = selectedListingsId, info.EnableAllTuners = page.querySelector(".chkAllTuners").checked, info.EnabledTuners = info.EnableAllTuners ? [] : $(".chkTuner", page).get().filter(function(i) {
-                    return i.checked
-                }).map(function(i) {
-                    return i.getAttribute("data-id")
-                }), ApiClient.ajax({
+                info.ZipCode = page.querySelector(".txtZipCode").value;
+                info.Country = $("#selectCountry", page).val();
+                info.ListingsId = selectedListingsId;
+                info.EnableAllTuners = page.querySelector(".chkAllTuners").checked;
+                info.EnabledTuners = info.EnableAllTuners ? [] : $(".chkTuner", page).get().filter(function (i) {
+                    return i.checked;
+                }).map(function (i) {
+                    return i.getAttribute("data-id");
+                });
+                ApiClient.ajax({
                     type: "POST",
                     url: ApiClient.getUrl("LiveTv/ListingProviders", {
-                        ValidateListings: !0
+                        ValidateListings: true
                     }),
                     data: JSON.stringify(info),
                     contentType: "application/json"
-                }).then(function(result) {
-                    loading.hide(), !1 !== options.showConfirmation && Dashboard.processServerConfigurationUpdateResult(), Events.trigger(self, "submitted")
-                }, function() {
-                    loading.hide(), Dashboard.alert({
+                }).then(function (result) {
+                    loading.hide();
+
+                    if (options.showConfirmation) {
+                        Dashboard.processServerConfigurationUpdateResult();
+                    }
+
+                    Events.trigger(self, "submitted");
+                }, function () {
+                    loading.hide();
+                    Dashboard.alert({
                         message: Globalize.translate("ErrorAddingListingsToSchedulesDirect")
-                    })
-                })
-            })
+                    });
+                });
+            });
         }
 
         function refreshListings(value) {
-            if (!value) return void $("#selectListing", page).html("");
-            loading.show(), ApiClient.ajax({
+            if (!value) {
+                return void $("#selectListing", page).html("");
+            }
+
+            loading.show();
+            ApiClient.ajax({
                 type: "GET",
                 url: ApiClient.getUrl("LiveTv/ListingProviders/Lineups", {
                     Id: providerId,
@@ -121,15 +198,23 @@ define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "em
                     Country: $("#selectCountry", page).val()
                 }),
                 dataType: "json"
-            }).then(function(result) {
-                $("#selectListing", page).html(result.map(function(o) {
-                    return '<option value="' + o.Id + '">' + o.Name + "</option>"
-                })), listingsId && $("#selectListing", page).val(listingsId), loading.hide()
-            }, function(result) {
+            }).then(function (result) {
+                $("#selectListing", page).html(result.map(function (o) {
+                    return '<option value="' + o.Id + '">' + o.Name + "</option>";
+                }));
+
+                if (listingsId) {
+                    $("#selectListing", page).val(listingsId);
+                }
+
+                loading.hide();
+            }, function (result) {
                 Dashboard.alert({
                     message: Globalize.translate("ErrorGettingTvLineups")
-                }), refreshListings(""), loading.hide()
-            })
+                });
+                refreshListings("");
+                loading.hide();
+            });
         }
 
         function getTunerName(providerId) {
@@ -141,34 +226,76 @@ define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "em
                 case "satip":
                     return "DVB";
                 default:
-                    return "Unknown"
+                    return "Unknown";
             }
         }
 
         function refreshTunerDevices(page, providerInfo, devices) {
-            for (var html = "", i = 0, length = devices.length; i < length; i++) {
+            var html = "";
+
+            for (var i = 0, length = devices.length; i < length; i++) {
                 var device = devices[i];
                 html += '<div class="listItem">';
-                var enabledTuners = providerInfo.EnabledTuners || [],
-                    isChecked = providerInfo.EnableAllTuners || -1 !== enabledTuners.indexOf(device.Id),
-                    checkedAttribute = isChecked ? " checked" : "";
-                html += '<label class="checkboxContainer listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" data-id="' + device.Id + '" class="chkTuner" ' + checkedAttribute + "/><span></span></label>", html += '<div class="listItemBody two-line">', html += '<div class="listItemBodyText">', html += device.FriendlyName || getTunerName(device.Type), html += "</div>", html += '<div class="listItemBodyText secondary">', html += device.Url, html += "</div>", html += "</div>", html += "</div>"
+                var enabledTuners = providerInfo.EnabledTuners || [];
+                var isChecked = providerInfo.EnableAllTuners || -1 !== enabledTuners.indexOf(device.Id);
+                var checkedAttribute = isChecked ? " checked" : "";
+                html += '<label class="checkboxContainer listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" data-id="' + device.Id + '" class="chkTuner" ' + checkedAttribute + "/><span></span></label>";
+                html += '<div class="listItemBody two-line">';
+                html += '<div class="listItemBodyText">';
+                html += device.FriendlyName || getTunerName(device.Type);
+                html += "</div>";
+                html += '<div class="listItemBodyText secondary">';
+                html += device.Url;
+                html += "</div>";
+                html += "</div>";
+                html += "</div>";
             }
-            page.querySelector(".tunerList").innerHTML = html
+
+            page.querySelector(".tunerList").innerHTML = html;
         }
-        var listingsId, self = this;
-        self.submit = function() {
-            page.querySelector(".btnSubmitListingsContainer").click()
-        }, self.init = function() {
-            options = options || {}, !1 !== options.showCancelButton ? page.querySelector(".btnCancel").classList.remove("hide") : page.querySelector(".btnCancel").classList.add("hide"), !1 !== options.showSubmitButton ? page.querySelector(".btnSubmitListings").classList.remove("hide") : page.querySelector(".btnSubmitListings").classList.add("hide"), $(".formLogin", page).on("submit", function() {
-                return submitLoginForm(), !1
-            }), $(".formListings", page).on("submit", function() {
-                return submitListingsForm(), !1
-            }), $(".txtZipCode", page).on("change", function() {
-                refreshListings(this.value)
-            }), page.querySelector(".chkAllTuners").addEventListener("change", function(e) {
-                e.target.checked ? page.querySelector(".selectTunersSection").classList.add("hide") : page.querySelector(".selectTunersSection").classList.remove("hide")
-            }), $(".createAccountHelp", page).html(Globalize.translate("MessageCreateAccountAt", '<a is="emby-linkbutton" class="button-link" href="http://www.schedulesdirect.org" target="_blank">http://www.schedulesdirect.org</a>')), reload()
-        }
-    }
-});
+
+        var listingsId;
+        var self = this;
+
+        self.submit = function () {
+            page.querySelector(".btnSubmitListingsContainer").click();
+        };
+
+        self.init = function () {
+            options = options || {};
+
+            if (options.showCancelButton) {
+                page.querySelector(".btnCancel").classList.remove("hide");
+            } else {
+                page.querySelector(".btnCancel").classList.add("hide");
+            }
+
+            if (options.showSubmitButton) {
+                page.querySelector(".btnSubmitListings").classList.remove("hide");
+            } else {
+                page.querySelector(".btnSubmitListings").classList.add("hide");
+            }
+
+            $(".formLogin", page).on("submit", function () {
+                submitLoginForm();
+                return false;
+            });
+            $(".formListings", page).on("submit", function () {
+                submitListingsForm();
+                return false;
+            });
+            $(".txtZipCode", page).on("change", function () {
+                refreshListings(this.value);
+            });
+            page.querySelector(".chkAllTuners").addEventListener("change", function (e) {
+                if (e.target.checked) {
+                    page.querySelector(".selectTunersSection").classList.add("hide");
+                } else {
+                    page.querySelector(".selectTunersSection").classList.remove("hide");
+                }
+            });
+            $(".createAccountHelp", page).html(Globalize.translate("MessageCreateAccountAt", '<a is="emby-linkbutton" class="button-link" href="http://www.schedulesdirect.org" target="_blank">http://www.schedulesdirect.org</a>'));
+            reload();
+        };
+    };
+});