From b43adb740625f76304423a6c4e563a290981c07a Mon Sep 17 00:00:00 2001 From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com> Date: Sat, 11 Apr 2020 16:24:40 -0500 Subject: [PATCH 0001/1520] Add quick connect --- src/controllers/auth/login.js | 48 ++++++++++++++++++++++++ src/libraries/apiclient/apiclientcore.js | 23 +++++++++++- src/login.html | 4 ++ 3 files changed, 74 insertions(+), 1 deletion(-) diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js index 4296b8bfb..746384a64 100644 --- a/src/controllers/auth/login.js +++ b/src/controllers/auth/login.js @@ -150,6 +150,53 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout }); } + function loginQuickConnect() { + var apiClient = getApiClient(); + var identifier = "" + var interval = 0; + var friendlyName = "test"; + $.get('/QuickConnect/Initiate?FriendlyName=' + friendlyName).then(json => { + if (!json.Secret || !json.Code) { + Dashboard.alert({ + message: json.Error, + title: "Error" + }); + return; + } + + Dashboard.alert({ + message: "Authorize request " + json.Code + " to continue", + title: "Quick Connect Code" + }); + + loading.show(); + + identifier = json.Secret; + interval = setInterval(() => { + $.get('/QuickConnect/Connect?Secret=' + identifier).then(x => { + if(x.Authenticated) { + apiClient.quickConnect(x.Authentication).then((result) => { + var user = result.User; + var serverId = getParameterByName("serverid"); + var newUrl; + + if (user.Policy.IsAdministrator && !serverId) { + newUrl = "dashboard.html"; + } else { + newUrl = "home.html"; + } + + loading.hide(); + Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient); + Dashboard.navigate(newUrl); + clearInterval(interval); + }); + } + }); + }, 5000); + }); + } + view.querySelector("#divUsers").addEventListener("click", function (e) { var card = dom.parentWithClass(e.target, "card"); var cardContent = card ? card.querySelector(".cardContent") : null; @@ -183,6 +230,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout Dashboard.navigate("forgotpassword.html"); }); view.querySelector(".btnCancel").addEventListener("click", showVisualForm); + view.querySelector(".btnQuick").addEventListener("click", loginQuickConnect); view.querySelector(".btnManual").addEventListener("click", function () { view.querySelector("#txtManualName").value = ""; showManualForm(view, true); diff --git a/src/libraries/apiclient/apiclientcore.js b/src/libraries/apiclient/apiclientcore.js index 557a4e103..80be946a6 100644 --- a/src/libraries/apiclient/apiclientcore.js +++ b/src/libraries/apiclient/apiclientcore.js @@ -356,7 +356,28 @@ define(["events", "appStorage"], function(events, appStorage) { instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated() }, reject) }) - }, ApiClient.prototype.ensureWebSocket = function() { + }, ApiClient.prototype.quickConnect = function (token) { + if (!token) return Promise.reject(); + var url = this.getUrl("Users/AuthenticateWithQuickConnect"), + instance = this; + return new Promise(function(resolve, reject) { + var postData = { + Token: token + }; + instance.ajax({ + type: "POST", + url: url, + data: JSON.stringify(postData), + dataType: "json", + contentType: "application/json" + }).then(function(result) { + var afterOnAuthenticated = function() { + redetectBitrate(instance), resolve(result) + }; + instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated() + }, reject) + }) + }, ApiClient.prototype.ensureWebSocket = function() { if (!this.isWebSocketOpenOrConnecting() && this.isWebSocketSupported()) try { this.openWebSocket() } catch (err) { diff --git a/src/login.html b/src/login.html index 8e48901c1..343b85906 100644 --- a/src/login.html +++ b/src/login.html @@ -42,6 +42,10 @@ + + + + Incoming login requests: +
+ +
+ diff --git a/src/quickconnect.html b/src/quickconnect.html new file mode 100644 index 000000000..770796a10 --- /dev/null +++ b/src/quickconnect.html @@ -0,0 +1,29 @@ +
+
+
+
+
+

Quick Connect

+
+
+ + Quick connect is: Failed to load status + +
+ + +
If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.
+
+ + +
+
+
\ No newline at end of file diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js index 11c89b01d..930df8be4 100644 --- a/src/scripts/librarymenu.js +++ b/src/scripts/librarymenu.js @@ -349,6 +349,12 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", " href: "devices.html", pageIds: ["devicesPage", "devicePage"], icon: "devices" + }); + links.push({ + name: "Quick Connect", + href: "quickconnect.html", + pageIds: ["quickConnectPage", "quickConnectPage"], + icon: "devices" }); links.push({ name: globalize.translate("HeaderActivity"), diff --git a/src/scripts/routes.js b/src/scripts/routes.js index 9c3db58a7..1520e9663 100644 --- a/src/scripts/routes.js +++ b/src/scripts/routes.js @@ -72,6 +72,12 @@ define([ transition: "fade", controller: "user/subtitles" }); + defineRoute({ + path: "/mypreferencesquickconnect.html", + autoFocus: false, + transition: "fade", + controller: "user/quickconnect" + }); defineRoute({ path: "/dashboard.html", @@ -103,6 +109,12 @@ define([ roles: "admin", controller: "device" }); + defineRoute({ + path: "/quickconnect.html", + autoFocus: false, + roles: "admin", + controller: "quickconnect" + }); defineRoute({ path: "/dlnaprofile.html", autoFocus: false, diff --git a/src/scripts/site.js b/src/scripts/site.js index 3b992eaf2..311478c01 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -829,6 +829,7 @@ var AppInfo = {}; define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency); define("playbackSettings", [componentsPath + "/playbacksettings/playbacksettings"], returnFirstDependency); define("homescreenSettings", [componentsPath + "/homescreensettings/homescreensettings"], returnFirstDependency); + define("quickConnectSettings", [componentsPath + "/quickconnectsettings/quickconnectsettings"], returnFirstDependency); define("playbackManager", [componentsPath + "/playback/playbackmanager"], getPlaybackManager); define("layoutManager", [componentsPath + "/layoutManager", "apphost"], getLayoutManager); define("homeSections", [componentsPath + "/homesections/homesections"], returnFirstDependency); From fdfdcd60fe3d7a66cfc334f0692978fc3bb8e27c Mon Sep 17 00:00:00 2001 From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com> Date: Mon, 13 Apr 2020 16:23:16 -0500 Subject: [PATCH 0003/1520] Switch off of jQuery --- CONTRIBUTORS.md | 1 + .../quickconnectsettings/quickconnectsettings.js | 8 +++++--- src/controllers/auth/login.js | 12 ++++++------ src/controllers/quickconnect.js | 16 +++++++++------- src/controllers/user/menu.js | 2 +- src/controllers/user/quickconnect.js | 9 +++++++++ src/mypreferencesquickconnect.html | 6 +++--- src/quickconnect.html | 2 +- 8 files changed, 35 insertions(+), 21 deletions(-) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index aa3ec707e..ffbf05482 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -34,6 +34,7 @@ - [Ryan Hartzell](https://github.com/ryan-hartzell) - [Thibault Nocchi](https://github.com/ThibaultNocchi) - [MrTimscampi](https://github.com/MrTimscampi) + - [ConfusedPolarBear](https://github.com/ConfusedPolarBear) # Emby Contributors diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js index a30db441e..ed7985dcf 100644 --- a/src/components/quickconnectsettings/quickconnectsettings.js +++ b/src/components/quickconnectsettings/quickconnectsettings.js @@ -15,12 +15,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa } function list(apiClient) { - var elem = $("#quickConnectIncoming"); - elem.html(""); + console.debug("getting json"); apiClient.getJSON("/QuickConnect/List").then(json => { - console.debug("raw json", json); + var elem = $("#quickConnectIncoming"); + elem.html(""); + console.debug("raw json", json, "length is", json.length); for(var i = 0; i < json.length; i++) { var current = json[i]; + console.debug("current is", current); var html = "
  • " + current.Code + " - " + current.FriendlyName + " - "; if(!current.Authenticated) { diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js index f5dc9b487..845ae9a38 100644 --- a/src/controllers/auth/login.js +++ b/src/controllers/auth/login.js @@ -153,10 +153,10 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout function loginQuickConnect() { var apiClient = getApiClient(); var friendlyName = "test"; - - var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName); - apiClient.getJSON(url) - .then(json => { + + var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName); + apiClient.getJSON(url) + .then(json => { if (!json.Secret || !json.Code) { Dashboard.alert({ message: json.Error, @@ -173,9 +173,9 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout loading.show(); var interval = setInterval(() => { - var url = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret); + var url = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret); apiClient.getJSON(url) - .then(data => { + .then(data => { if(data.Authenticated) { apiClient.quickConnect(data.Authentication).then((result) => { var user = result.User; diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js index e3d1f7605..5c3c8f9a1 100644 --- a/src/controllers/quickconnect.js +++ b/src/controllers/quickconnect.js @@ -2,13 +2,15 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, "use strict"; function loadPage(page, status) { + console.debug("status is \"" + status + "\""); + var active = (status == "Active"); var available = (status == "Available") || active; - - $("#quickConnectStatus").text(status.toLocaleLowerCase()); - $("#chkQuickConnectAvailable").checked(available); - $("#chkQuickConnectActive").checked(active); - + + page.querySelector("#quickConnectStatus").textContent = status.toLocaleLowerCase(); + page.querySelector("#chkQuickConnectAvailable").checked = available; + page.querySelector("#chkQuickConnectActive").checked = active; + loading.hide(); } @@ -44,8 +46,8 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, } $(document).on("pageinit", "#quickConnectPage", function () { - $("#quickConnectPage").off("submit", onSubmit).on("submit", onSubmit); - $("#btnQuickConnectSubmit").click(onSubmit); + document.querySelector("#quickConnectPage").onsubmit = onSubmit; + document.querySelector("#btnQuickConnectSubmit").onclick = onSubmit; }).on("pageshow", "#quickConnectPage", function () { loading.show(); var page = this; diff --git a/src/controllers/user/menu.js b/src/controllers/user/menu.js index ff8db7268..f5d05c5be 100644 --- a/src/controllers/user/menu.js +++ b/src/controllers/user/menu.js @@ -24,7 +24,7 @@ define(["apphost", "connectionManager", "layoutManager", "listViewStyle", "emby- page.querySelector(".lnkHomePreferences").setAttribute("href", "mypreferenceshome.html?userId=" + userId); page.querySelector(".lnkPlaybackPreferences").setAttribute("href", "mypreferencesplayback.html?userId=" + userId); page.querySelector(".lnkSubtitlePreferences").setAttribute("href", "mypreferencessubtitles.html?userId=" + userId); - page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "mypreferencesquickconnect.html?userId=" + userId); + page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "mypreferencesquickconnect.html?userId=" + userId); if (window.NativeShell && window.NativeShell.AppHost.supports("clientsettings")) { page.querySelector(".clientSettings").classList.remove("hide"); diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js index d6f2ae25c..6e63bcdc0 100644 --- a/src/controllers/user/quickconnect.js +++ b/src/controllers/user/quickconnect.js @@ -2,6 +2,13 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", " "use strict"; return function (view, params) { + function notImplemented() { + Dashboard.alert({ + message: "This button is not implemented yet, you must check the checkbox labeled \"Always accept quick connect login requests\" in the dashboard", + title: "Not implemented" + }); + } + var quickConnectSettingsInstance = null; var hasChanges; var userId = params.userId || ApiClient.getCurrentUserId(); @@ -9,6 +16,8 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", " view.addEventListener("viewshow", function () { console.debug("defining instance"); + $("#btnQuickConnectActivate").click(notImplemented); + quickConnectSettingsInstance = new QuickConnectSettings({ serverId: ApiClient.serverId(), userId: userId, diff --git a/src/mypreferencesquickconnect.html b/src/mypreferencesquickconnect.html index 326ce51b4..b9ffdfacc 100644 --- a/src/mypreferencesquickconnect.html +++ b/src/mypreferencesquickconnect.html @@ -1,12 +1,12 @@
    - Incoming login requests:
      -
    • Failed to load incoming requests
    • -
    +
  • Failed to load incoming requests
  • + diff --git a/src/quickconnect.html b/src/quickconnect.html index 770796a10..875716285 100644 --- a/src/quickconnect.html +++ b/src/quickconnect.html @@ -16,7 +16,7 @@
    If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.
    From c37e8f2f1bcb827893fe32a3fcf77107964a853e Mon Sep 17 00:00:00 2001 From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com> Date: Sat, 18 Apr 2020 19:20:15 -0500 Subject: [PATCH 0004/1520] Implement auto refresh and activate button --- .../quickconnectsettings.js | 85 +++++++++++++------ src/controllers/auth/login.js | 75 ++++++++-------- src/controllers/quickconnect.js | 54 +++++++----- src/controllers/user/quickconnect.js | 63 +++++++------- src/mypreferencesmenu.html | 4 +- src/mypreferencesquickconnect.html | 2 +- src/quickconnect.html | 6 +- src/scripts/librarymenu.js | 2 +- src/scripts/site.js | 2 +- 9 files changed, 170 insertions(+), 123 deletions(-) diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js index ed7985dcf..fc167802d 100644 --- a/src/components/quickconnectsettings/quickconnectsettings.js +++ b/src/components/quickconnectsettings/quickconnectsettings.js @@ -1,11 +1,10 @@ -define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) { +define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager) { "use strict"; function authorizeRequest(event) { var lookup = event.data.lookup; - var apiClient = event.data.apiClient; var url = ApiClient.getUrl("/QuickConnect/Authorize"); - apiClient.ajax({ + ApiClient.ajax({ type: "POST", url: url, data: { @@ -13,46 +12,72 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa } }, true); } - - function list(apiClient) { - console.debug("getting json"); - apiClient.getJSON("/QuickConnect/List").then(json => { - var elem = $("#quickConnectIncoming"); + + QuickConnectSettings.prototype.list = function(argPage) { + ApiClient.getJSON("/QuickConnect/List").then(json => { + var elem = $(argPage.querySelector("#quickConnectIncoming")); elem.html(""); - console.debug("raw json", json, "length is", json.length); - for(var i = 0; i < json.length; i++) { + for (var i = 0; i < json.length; i++) { var current = json[i]; - console.debug("current is", current); var html = "
  • " + current.Code + " - " + current.FriendlyName + " - "; - - if(!current.Authenticated) { + + if (!current.Authenticated) { html += "authorize"; - } - else { + } else { html += " (already authorized)"; } - + html += "
  • "; elem.append(html); - $("#qc" + current.Lookup).click({ lookup: current.Lookup, apiClient: apiClient}, authorizeRequest); + $("#qc" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest); } + + return true; + }).catch((e) => { + console.error("Unable to get quick connect login requests. error:", e); }); - } + }; + + QuickConnectSettings.prototype.activate = function() { + var url = ApiClient.getUrl("/QuickConnect/Activate"); + ApiClient.ajax({ + type: "POST", + url: url, + contentType: "application/json", + dataType: "json" + }).then((json) => { + let message = json.Error; + + console.log("message is \"" + message + "\""); + if (message && message !== "") { + console.error("Error activating quick connect. Error: ", json.Error); + + Dashboard.alert({ + title: "Unable to activate quick connect", + message: message + }); + + return false; + } + + Dashboard.alert({ + message: "Already active" + }); + + return true; + }).catch((e) => { + console.error("Error activating quick connect. Error:", e); + throw e; + }); + }; function QuickConnectSettings(options) { this.options = options; } QuickConnectSettings.prototype.loadData = function () { - loading.show(); - - var apiClient = connectionManager.getApiClient(this.options.serverId); - - list(apiClient); - - console.debug("request list finished"); - - loading.hide(); + this.options.interval = setInterval(this.list, 5000, this.options.page); + this.list(this.options.page); }; QuickConnectSettings.prototype.submit = function () { @@ -60,8 +85,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa }; QuickConnectSettings.prototype.destroy = function () { + console.debug("clearing refresh interval", this.options.interval); + clearInterval(this.options.interval); this.options = null; }; + QuickConnectSettings.prototype.interval = function (interval) { + this.options.interval = interval; + }; + return QuickConnectSettings; }); diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js index 845ae9a38..94fa15d41 100644 --- a/src/controllers/auth/login.js +++ b/src/controllers/auth/login.js @@ -152,51 +152,54 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout function loginQuickConnect() { var apiClient = getApiClient(); - var friendlyName = "test"; - + var friendlyName = navigator.userAgent; // TODO: what should this be changed to? + var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName); apiClient.getJSON(url) - .then(json => { - if (!json.Secret || !json.Code) { + .then(json => { + if (!json.Secret || !json.Code) { + Dashboard.alert({ + message: json.Error, + title: "Error" + }); + + return false; + } + Dashboard.alert({ - message: json.Error, - title: "Error" + message: "Authorize request " + json.Code + " to continue", + title: "Quick Connect Code" }); - return; - } - Dashboard.alert({ - message: "Authorize request " + json.Code + " to continue", - title: "Quick Connect Code" - }); + loading.show(); - loading.show(); + var interval = setInterval(async function() { + let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret); + let data = await apiClient.getJSON(connectUrl); + if (data.Authenticated) { + let result = await apiClient.quickConnect(data.Authentication); + var user = result.User; + var serverId = getParameterByName("serverid"); + var newUrl = "home.html"; - var interval = setInterval(() => { - var url = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret); - apiClient.getJSON(url) - .then(data => { - if(data.Authenticated) { - apiClient.quickConnect(data.Authentication).then((result) => { - var user = result.User; - var serverId = getParameterByName("serverid"); - var newUrl; + if (user.Policy.IsAdministrator && !serverId) { + newUrl = "dashboard.html"; + } - if (user.Policy.IsAdministrator && !serverId) { - newUrl = "dashboard.html"; - } else { - newUrl = "home.html"; - } + loading.hide(); + Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient); + Dashboard.navigate(newUrl); + clearInterval(interval); - loading.hide(); - Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient); - Dashboard.navigate(newUrl); - clearInterval(interval); - }); + return true; } - }); - }, 5000); - }); + return false; + }, 5000); + + return true; + }).catch((e) => { + console.error("Unable to initiate quick connect login request. Error:", e); + }); } view.querySelector("#divUsers").addEventListener("click", function (e) { @@ -240,7 +243,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout view.querySelector(".btnSelectServer").addEventListener("click", function () { Dashboard.selectServer(); }); - view.addEventListener("viewshow", function (e) { + view.addEventListener("viewshow", function () { loading.show(); if (!appHost.supports('multiserver')) { diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js index 5c3c8f9a1..a6ebc381c 100644 --- a/src/controllers/quickconnect.js +++ b/src/controllers/quickconnect.js @@ -1,9 +1,8 @@ -define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, libraryMenu) { +define(["jQuery", "loading", "fnchecked"], function ($, loading) { "use strict"; + var page; function loadPage(page, status) { - console.debug("status is \"" + status + "\""); - var active = (status == "Active"); var available = (status == "Available") || active; @@ -16,44 +15,53 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, function onSubmit() { loading.show(); - - var available = $("#chkQuickConnectAvailable").is(":checked") ? "Available" : "Unavailable"; + + var newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable"; + if (newStatus && page.querySelector("#chkQuickConnectActive").checked) { + newStatus = "Active"; + } + var url = ApiClient.getUrl("/QuickConnect/Available"); - + ApiClient.ajax({ type: "POST", data: { - "Status": available + "Status": newStatus }, url: url }, true).then(() => { - if($("#chkQuickConnectActive").is(":checked")) { - url = ApiClient.getUrl("/QuickConnect/Activate"); - ApiClient.ajax({ - type: "POST", - url: url - }, true); - } - Dashboard.alert({ message: "Settings saved", title: "Saved" }); + + setTimeout(updatePage, 500); + + return true; + }).catch((e) => { + console.error("Unable to set quick connect status. error:", e); }); - + loading.hide(); return false; } - $(document).on("pageinit", "#quickConnectPage", function () { - document.querySelector("#quickConnectPage").onsubmit = onSubmit; - document.querySelector("#btnQuickConnectSubmit").onclick = onSubmit; - }).on("pageshow", "#quickConnectPage", function () { - loading.show(); - var page = this; + function updatePage() { var promise1 = ApiClient.getQuickConnect("Status"); - Promise.all([promise1]).then(function (responses) { + Promise.all([promise1]).then((responses) => { loadPage(page, responses[0]); + return true; + }).catch((e) => { + console.error("Unable to get quick connect status. error:", e); }); + } + + $(document).on("pageshow", "#quickConnectPage", function () { + loading.show(); + page = this; + + page.querySelector("#btnQuickConnectSubmit").onclick = onSubmit; + + updatePage(); }); }); diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js index 6e63bcdc0..fae5d4986 100644 --- a/src/controllers/user/quickconnect.js +++ b/src/controllers/user/quickconnect.js @@ -1,50 +1,55 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (QuickConnectSettings, dom, globalize, loading, userSettings, autoFocuser) { "use strict"; - return function (view, params) { - function notImplemented() { - Dashboard.alert({ - message: "This button is not implemented yet, you must check the checkbox labeled \"Always accept quick connect login requests\" in the dashboard", - title: "Not implemented" - }); - } - + return function (view) { var quickConnectSettingsInstance = null; - var hasChanges; - var userId = params.userId || ApiClient.getCurrentUserId(); - var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings(); + view.addEventListener("viewshow", function () { - console.debug("defining instance"); - - $("#btnQuickConnectActivate").click(notImplemented); - quickConnectSettingsInstance = new QuickConnectSettings({ - serverId: ApiClient.serverId(), - userId: userId, - element: view.querySelector(".quickConnectSettingsContainer"), - userSettings: currentSettings, - enableSaveButton: false, - enableSaveConfirmation: false, - autoFocus: autoFocuser.isEnabled() + page: view, + interval: 0 }); - + + view.querySelector("#btnQuickConnectActivate").addEventListener("click", () => { + quickConnectSettingsInstance.activate(quickConnectSettingsInstance); + }); + quickConnectSettingsInstance.loadData(); - }); - view.addEventListener("change", function () { - hasChanges = true; + + ApiClient.getQuickConnect("Status").then((status) => { + let btn = view.querySelector("#btnQuickConnectActivate"); + + if (status === "Unavailable") { + btn.textContent = "Quick connect is not available on this server"; + btn.disabled = true; + return false; + } + + else if (status === "Available") { + return false; + } + + btn.style.display = "none"; + return true; + }).catch((e) => { + throw e; + }); }); view.addEventListener("viewbeforehide", function () { - hasChanges = false; - if (quickConnectSettingsInstance) { quickConnectSettingsInstance.submit(); } + onDestroy(); }); view.addEventListener("viewdestroy", function () { + onDestroy(); + }); + + function onDestroy() { if (quickConnectSettingsInstance) { quickConnectSettingsInstance.destroy(); quickConnectSettingsInstance = null; } - }); + } }; }); diff --git a/src/mypreferencesmenu.html b/src/mypreferencesmenu.html index c8db1d17f..bfc5e793e 100644 --- a/src/mypreferencesmenu.html +++ b/src/mypreferencesmenu.html @@ -51,13 +51,13 @@
    - +
    Quick Connect
    - +
    diff --git a/src/mypreferencesquickconnect.html b/src/mypreferencesquickconnect.html index b9ffdfacc..d92e49a42 100644 --- a/src/mypreferencesquickconnect.html +++ b/src/mypreferencesquickconnect.html @@ -2,7 +2,7 @@ - + Incoming login requests:
      diff --git a/src/quickconnect.html b/src/quickconnect.html index 875716285..9a7dfdfb3 100644 --- a/src/quickconnect.html +++ b/src/quickconnect.html @@ -6,9 +6,9 @@

      Quick Connect

    - + Quick connect is: Failed to load status - +
    If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.
    - + diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js index 930df8be4..2accf4948 100644 --- a/src/scripts/librarymenu.js +++ b/src/scripts/librarymenu.js @@ -350,7 +350,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", " pageIds: ["devicesPage", "devicePage"], icon: "devices" }); - links.push({ + links.push({ name: "Quick Connect", href: "quickconnect.html", pageIds: ["quickConnectPage", "quickConnectPage"], diff --git a/src/scripts/site.js b/src/scripts/site.js index 311478c01..3b8abf2bf 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -829,7 +829,7 @@ var AppInfo = {}; define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency); define("playbackSettings", [componentsPath + "/playbacksettings/playbacksettings"], returnFirstDependency); define("homescreenSettings", [componentsPath + "/homescreensettings/homescreensettings"], returnFirstDependency); - define("quickConnectSettings", [componentsPath + "/quickconnectsettings/quickconnectsettings"], returnFirstDependency); + define("quickConnectSettings", [componentsPath + "/quickconnectsettings/quickconnectsettings"], returnFirstDependency); define("playbackManager", [componentsPath + "/playback/playbackmanager"], getPlaybackManager); define("layoutManager", [componentsPath + "/layoutManager", "apphost"], getLayoutManager); define("homeSections", [componentsPath + "/homesections/homesections"], returnFirstDependency); From 43d01146a23b9ee9c4044a5d0b545ee6fe6ce692 Mon Sep 17 00:00:00 2001 From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com> Date: Sun, 19 Apr 2020 01:39:05 -0500 Subject: [PATCH 0005/1520] Fix linting --- .../quickconnectsettings/quickconnectsettings.js | 2 +- src/controllers/quickconnect.js | 4 ++-- src/controllers/user/quickconnect.js | 4 +--- src/libraries/apiclient/apiclientcore.js | 7 ++++--- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js index fc167802d..c65782caf 100644 --- a/src/components/quickconnectsettings/quickconnectsettings.js +++ b/src/components/quickconnectsettings/quickconnectsettings.js @@ -61,7 +61,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa } Dashboard.alert({ - message: "Already active" + message: "Successfully activated" }); return true; diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js index a6ebc381c..35e5516f4 100644 --- a/src/controllers/quickconnect.js +++ b/src/controllers/quickconnect.js @@ -2,7 +2,7 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) { "use strict"; var page; - function loadPage(page, status) { + function loadPage(status) { var active = (status == "Active"); var available = (status == "Available") || active; @@ -49,7 +49,7 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) { function updatePage() { var promise1 = ApiClient.getQuickConnect("Status"); Promise.all([promise1]).then((responses) => { - loadPage(page, responses[0]); + loadPage(responses[0]); return true; }).catch((e) => { console.error("Unable to get quick connect status. error:", e); diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js index fae5d4986..2b03dec41 100644 --- a/src/controllers/user/quickconnect.js +++ b/src/controllers/user/quickconnect.js @@ -23,9 +23,7 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", " btn.textContent = "Quick connect is not available on this server"; btn.disabled = true; return false; - } - - else if (status === "Available") { + } else if (status === "Available") { return false; } diff --git a/src/libraries/apiclient/apiclientcore.js b/src/libraries/apiclient/apiclientcore.js index 04421b837..e1892505f 100644 --- a/src/libraries/apiclient/apiclientcore.js +++ b/src/libraries/apiclient/apiclientcore.js @@ -358,8 +358,8 @@ define(["events", "appStorage"], function(events, appStorage) { }) }, ApiClient.prototype.quickConnect = function (token) { if (!token) return Promise.reject(); - var url = this.getUrl("Users/AuthenticateWithQuickConnect"), - instance = this; + var url = this.getUrl("Users/AuthenticateWithQuickConnect"); + var instance = this; return new Promise(function(resolve, reject) { var postData = { Token: token @@ -372,7 +372,8 @@ define(["events", "appStorage"], function(events, appStorage) { contentType: "application/json" }).then(function(result) { var afterOnAuthenticated = function() { - redetectBitrate(instance), resolve(result) + redetectBitrate(instance); + return resolve(result); }; instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated() }, reject) From bf03a7ba57af89f1a38c41457dbe7c70f501a04d Mon Sep 17 00:00:00 2001 From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com> Date: Sat, 25 Apr 2020 15:46:22 -0500 Subject: [PATCH 0006/1520] Improve UI --- .../quickconnectsettings.js | 42 ++++++++++++++----- src/controllers/auth/login.js | 42 ++++++++++++------- src/controllers/quickconnect.js | 12 ++---- src/mypreferencesmenu.html | 2 +- src/mypreferencesquickconnect.html | 5 +-- src/quickconnect.html | 5 --- src/scripts/librarymenu.js | 2 +- 7 files changed, 65 insertions(+), 45 deletions(-) diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js index c65782caf..59250df76 100644 --- a/src/components/quickconnectsettings/quickconnectsettings.js +++ b/src/components/quickconnectsettings/quickconnectsettings.js @@ -11,25 +11,45 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa "Lookup": lookup } }, true); + + require(["toast"], function (toast) { + toast("Request authorized"); + }); + + // prevent bubbling + return false; } QuickConnectSettings.prototype.list = function(argPage) { ApiClient.getJSON("/QuickConnect/List").then(json => { + let found = false; var elem = $(argPage.querySelector("#quickConnectIncoming")); - elem.html(""); - for (var i = 0; i < json.length; i++) { - var current = json[i]; - var html = "
  • " + current.Code + " - " + current.FriendlyName + " - "; + elem.text("No pending login requests"); - if (!current.Authenticated) { - html += "authorize"; - } else { - html += " (already authorized)"; + for (var i = 0; i < json.length; i++) { + if (!found) { + elem.html(""); + found = true; } - html += "
  • "; + var current = json[i]; + + let html = '
    '; + html += '
    ' + current.Code + '
    '; + html += '
    ' + current.FriendlyName + '
    '; + html += '
    '; + + if (!current.Authenticated) { + html += 'authorize'; + } else { + html += " (authorized)"; + } + + html += '
    '; elem.append(html); + $("#qc" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest); + $("#div" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest); } return true; @@ -60,8 +80,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa return false; } - Dashboard.alert({ - message: "Successfully activated" + require(["toast"], function (toast) { + toast("Successfully activated"); }); return true; diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js index 94fa15d41..ff36939fb 100644 --- a/src/controllers/auth/login.js +++ b/src/controllers/auth/login.js @@ -152,7 +152,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout function loginQuickConnect() { var apiClient = getApiClient(); - var friendlyName = navigator.userAgent; // TODO: what should this be changed to? + var friendlyName = navigator.userAgent; var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName); apiClient.getJSON(url) @@ -174,25 +174,37 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout loading.show(); var interval = setInterval(async function() { - let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret); - let data = await apiClient.getJSON(connectUrl); - if (data.Authenticated) { - let result = await apiClient.quickConnect(data.Authentication); - var user = result.User; - var serverId = getParameterByName("serverid"); - var newUrl = "home.html"; + try { + let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret); + let data = await apiClient.getJSON(connectUrl); + if (data.Authenticated) { + let result = await apiClient.quickConnect(data.Authentication); + var user = result.User; + var serverId = getParameterByName("serverid"); + var newUrl = "home.html"; - if (user.Policy.IsAdministrator && !serverId) { - newUrl = "dashboard.html"; + if (user.Policy.IsAdministrator && !serverId) { + newUrl = "dashboard.html"; + } + + loading.hide(); + Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient); + Dashboard.navigate(newUrl); + clearInterval(interval); + + return true; } + } catch (e) { + Dashboard.alert({ + message: "Quick connect was deactivated before the login request could be approved", + title: "Unexpected error" + }); - loading.hide(); - Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient); - Dashboard.navigate(newUrl); + console.error("Unable to login with quick connect", e); clearInterval(interval); - - return true; + loading.hide(); } + return false; }, 5000); diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js index 35e5516f4..3432e7923 100644 --- a/src/controllers/quickconnect.js +++ b/src/controllers/quickconnect.js @@ -3,12 +3,10 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) { var page; function loadPage(status) { - var active = (status == "Active"); - var available = (status == "Available") || active; + var available = status === "Available" || status === "Active"; page.querySelector("#quickConnectStatus").textContent = status.toLocaleLowerCase(); page.querySelector("#chkQuickConnectAvailable").checked = available; - page.querySelector("#chkQuickConnectActive").checked = active; loading.hide(); } @@ -17,9 +15,6 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) { loading.show(); var newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable"; - if (newStatus && page.querySelector("#chkQuickConnectActive").checked) { - newStatus = "Active"; - } var url = ApiClient.getUrl("/QuickConnect/Available"); @@ -30,9 +25,8 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) { }, url: url }, true).then(() => { - Dashboard.alert({ - message: "Settings saved", - title: "Saved" + require(["toast"], function (toast) { + toast("Settings saved"); }); setTimeout(updatePage, 500); diff --git a/src/mypreferencesmenu.html b/src/mypreferencesmenu.html index bfc5e793e..6f753e555 100644 --- a/src/mypreferencesmenu.html +++ b/src/mypreferencesmenu.html @@ -51,7 +51,7 @@
    - + tap_and_play
    Quick Connect
    diff --git a/src/mypreferencesquickconnect.html b/src/mypreferencesquickconnect.html index d92e49a42..b58ca8074 100644 --- a/src/mypreferencesquickconnect.html +++ b/src/mypreferencesquickconnect.html @@ -3,10 +3,9 @@ Activate - Incoming login requests:
    -
      -
    • Failed to load incoming requests
    • +
      +
      Failed to load incoming requests
    diff --git a/src/quickconnect.html b/src/quickconnect.html index 9a7dfdfb3..7d7ec879a 100644 --- a/src/quickconnect.html +++ b/src/quickconnect.html @@ -14,11 +14,6 @@ Enable quick connect on this server - -
    If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.
    -
    Failed to load incoming requests
    +
    ${MessagePleaseWait}
    diff --git a/src/quickconnect.html b/src/quickconnect.html index 7d7ec879a..dff74eb83 100644 --- a/src/quickconnect.html +++ b/src/quickconnect.html @@ -3,16 +3,16 @@
    -

    Quick Connect

    +

    ${QuickConnect}

    - Quick connect is: Failed to load status + ${LabelCurrentStatus}
    diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js index 131dcf747..e3ef65f22 100644 --- a/src/scripts/librarymenu.js +++ b/src/scripts/librarymenu.js @@ -351,7 +351,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", " icon: "devices" }); links.push({ - name: "Quick Connect", + name: globalize.translate("QuickConnect"), href: "quickconnect.html", pageIds: ["quickConnectPage", "quickConnectPage"], icon: "tap_and_play" diff --git a/src/strings/en-us.json b/src/strings/en-us.json index d5fc40ef0..ad390a0fe 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -48,6 +48,7 @@ "AuthProviderHelp": "Select an Authentication Provider to be used to authenticate this user's password.", "Auto": "Auto", "AutoBasedOnLanguageSetting": "Auto (based on language setting)", + "Authorize": "authorize", "Backdrop": "Backdrop", "Backdrops": "Backdrops", "Banner": "Banner", @@ -63,6 +64,7 @@ "Browse": "Browse", "BrowsePluginCatalogMessage": "Browse our plugin catalog to view available plugins.", "BurnSubtitlesHelp": "Determines if the server should burn in subtitles when transcoding videos. Avoiding this will greatly improve performance. Select Auto to burn image based formats (VOBSUB, PGS, SUB, IDX) and certain ASS or SSA subtitles.", + "ButtonActivate": "Activate", "ButtonAdd": "Add", "ButtonAddImage": "Add Image", "ButtonAddMediaLibrary": "Add Media Library", @@ -140,6 +142,7 @@ "ButtonTrailer": "Trailer", "ButtonUninstall": "Uninstall", "ButtonUp": "Up", + "ButtonUseQuickConnect": "Use Quick Connect", "ButtonViewWebsite": "View website", "ButtonWebsite": "Website", "CancelRecording": "Cancel recording", @@ -231,6 +234,7 @@ "EnableNextVideoInfoOverlayHelp": "At the end of a video, display info about the next video coming up in the current playlist.", "EnablePhotos": "Display photos", "EnablePhotosHelp": "Images will be detected and displayed alongside other media files.", + "EnableQuickConnect": "Enable quick connect on this server", "EnableStreamLooping": "Auto-loop live streams", "EnableStreamLoopingHelp": "Enable this if live streams only contain a few seconds of data and need to be continuously requested. Enabling this when not needed may cause problems.", "EnableThemeSongs": "Theme songs", @@ -587,6 +591,7 @@ "LabelCountry": "Country:", "LabelCriticRating": "Critic rating:", "LabelCurrentPassword": "Current password:", + "LabelCurrentStatus": "Current status:", "LabelCustomCertificatePath": "Custom SSL certificate path:", "LabelCustomCertificatePathHelp": "Path to a PKCS #12 file containing a certificate and private key to enable TLS support on a custom domain.", "LabelCustomCss": "Custom CSS:", @@ -1260,6 +1265,11 @@ "Programs": "Programs", "Quality": "Quality", "QueueAllFromHere": "Queue all from here", + "QuickConnect": "Quick Connect", + "QuickConnectActivationSuccessful": "Successfully activated", + "QuickConnectAuthorizeCode": "Authorize request {0} to continue", + "QuickConnectNoPending": "No pending login requests", + "QuickConnectNotAvailable": "Quick connect is not available on this server", "Raised": "Raised", "Rate": "Rate", "RecentlyWatched": "Recently watched", From a6d37e763319c1e65f1a7358a1b8ac0895b6492c Mon Sep 17 00:00:00 2001 From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com> Date: Sun, 26 Apr 2020 17:47:31 -0500 Subject: [PATCH 0008/1520] Change missed var declarations into let --- .../quickconnectsettings/quickconnectsettings.js | 8 ++++---- src/controllers/auth/login.js | 14 +++++++------- src/controllers/quickconnect.js | 10 +++++----- src/controllers/user/quickconnect.js | 2 +- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js index 6010fab5c..45bfe815c 100644 --- a/src/components/quickconnectsettings/quickconnectsettings.js +++ b/src/components/quickconnectsettings/quickconnectsettings.js @@ -23,16 +23,16 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa QuickConnectSettings.prototype.list = function(argPage) { ApiClient.getJSON("/QuickConnect/List").then(json => { let found = false; - var elem = argPage.querySelector('#quickConnectIncoming'); + let elem = argPage.querySelector('#quickConnectIncoming'); elem.innerText = globalize.translate('QuickConnectNoPending'); - for (var i = 0; i < json.length; i++) { + for (let i = 0; i < json.length; i++) { if (!found) { elem.innerHTML = ""; found = true; } - var current = json[i]; + let current = json[i]; let html = '
    '; html += '
    ' + current.Code + '
    '; @@ -57,7 +57,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa }; QuickConnectSettings.prototype.activate = function() { - var url = ApiClient.getUrl("/QuickConnect/Activate"); + let url = ApiClient.getUrl("/QuickConnect/Activate"); ApiClient.ajax({ type: "POST", url: url, diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js index 86e8874e7..8b0bcdd28 100644 --- a/src/controllers/auth/login.js +++ b/src/controllers/auth/login.js @@ -151,10 +151,10 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout } function loginQuickConnect() { - var apiClient = getApiClient(); - var friendlyName = navigator.userAgent; + let apiClient = getApiClient(); + let friendlyName = navigator.userAgent; - var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName); + let url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName); apiClient.getJSON(url) .then(json => { if (!json.Secret || !json.Code) { @@ -173,15 +173,15 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout loading.show(); - var interval = setInterval(async function() { + let interval = setInterval(async function() { try { let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret); let data = await apiClient.getJSON(connectUrl); if (data.Authenticated) { let result = await apiClient.quickConnect(data.Authentication); - var user = result.User; - var serverId = getParameterByName("serverid"); - var newUrl = "home.html"; + let user = result.User; + let serverId = getParameterByName("serverid"); + let newUrl = "home.html"; if (user.Policy.IsAdministrator && !serverId) { newUrl = "dashboard.html"; diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js index 3432e7923..93b74a1b5 100644 --- a/src/controllers/quickconnect.js +++ b/src/controllers/quickconnect.js @@ -1,9 +1,9 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) { "use strict"; - var page; + let page; function loadPage(status) { - var available = status === "Available" || status === "Active"; + let available = status === "Available" || status === "Active"; page.querySelector("#quickConnectStatus").textContent = status.toLocaleLowerCase(); page.querySelector("#chkQuickConnectAvailable").checked = available; @@ -14,9 +14,9 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) { function onSubmit() { loading.show(); - var newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable"; + let newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable"; - var url = ApiClient.getUrl("/QuickConnect/Available"); + let url = ApiClient.getUrl("/QuickConnect/Available"); ApiClient.ajax({ type: "POST", @@ -41,7 +41,7 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) { } function updatePage() { - var promise1 = ApiClient.getQuickConnect("Status"); + let promise1 = ApiClient.getQuickConnect("Status"); Promise.all([promise1]).then((responses) => { loadPage(responses[0]); return true; diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js index 035aef8f2..bee0c1b81 100644 --- a/src/controllers/user/quickconnect.js +++ b/src/controllers/user/quickconnect.js @@ -2,7 +2,7 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", " "use strict"; return function (view) { - var quickConnectSettingsInstance = null; + let quickConnectSettingsInstance = null; view.addEventListener("viewshow", function () { quickConnectSettingsInstance = new QuickConnectSettings({ From 8655de4469c3aade0e1f949169c8f536a43e210b Mon Sep 17 00:00:00 2001 From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com> Date: Fri, 1 May 2020 13:49:06 -0500 Subject: [PATCH 0009/1520] Rename to camel case --- .../quickConnectSettings.js} | 0 src/controllers/{quickconnect.js => quickConnect.js} | 0 src/controllers/user/{quickconnect.js => quickConnect.js} | 0 ...referencesquickconnect.html => myPreferencesQuickConnect.html} | 0 src/{quickconnect.html => quickConnect.html} | 0 5 files changed, 0 insertions(+), 0 deletions(-) rename src/components/{quickconnectsettings/quickconnectsettings.js => quickConnectSettings/quickConnectSettings.js} (100%) rename src/controllers/{quickconnect.js => quickConnect.js} (100%) rename src/controllers/user/{quickconnect.js => quickConnect.js} (100%) rename src/{mypreferencesquickconnect.html => myPreferencesQuickConnect.html} (100%) rename src/{quickconnect.html => quickConnect.html} (100%) diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickConnectSettings/quickConnectSettings.js similarity index 100% rename from src/components/quickconnectsettings/quickconnectsettings.js rename to src/components/quickConnectSettings/quickConnectSettings.js diff --git a/src/controllers/quickconnect.js b/src/controllers/quickConnect.js similarity index 100% rename from src/controllers/quickconnect.js rename to src/controllers/quickConnect.js diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickConnect.js similarity index 100% rename from src/controllers/user/quickconnect.js rename to src/controllers/user/quickConnect.js diff --git a/src/mypreferencesquickconnect.html b/src/myPreferencesQuickConnect.html similarity index 100% rename from src/mypreferencesquickconnect.html rename to src/myPreferencesQuickConnect.html diff --git a/src/quickconnect.html b/src/quickConnect.html similarity index 100% rename from src/quickconnect.html rename to src/quickConnect.html From d8cfe064e60379033fdf61a963efbc27296130af Mon Sep 17 00:00:00 2001 From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com> Date: Fri, 1 May 2020 14:18:04 -0500 Subject: [PATCH 0010/1520] Changed code to camel case --- src/controllers/user/menu.js | 2 +- src/scripts/librarymenu.js | 2 +- src/scripts/routes.js | 8 ++++---- src/scripts/site.js | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/controllers/user/menu.js b/src/controllers/user/menu.js index f5d05c5be..9482b26cb 100644 --- a/src/controllers/user/menu.js +++ b/src/controllers/user/menu.js @@ -24,7 +24,7 @@ define(["apphost", "connectionManager", "layoutManager", "listViewStyle", "emby- page.querySelector(".lnkHomePreferences").setAttribute("href", "mypreferenceshome.html?userId=" + userId); page.querySelector(".lnkPlaybackPreferences").setAttribute("href", "mypreferencesplayback.html?userId=" + userId); page.querySelector(".lnkSubtitlePreferences").setAttribute("href", "mypreferencessubtitles.html?userId=" + userId); - page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "mypreferencesquickconnect.html?userId=" + userId); + page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "myPreferencesQuickConnect.html?userId=" + userId); if (window.NativeShell && window.NativeShell.AppHost.supports("clientsettings")) { page.querySelector(".clientSettings").classList.remove("hide"); diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js index e3ef65f22..d123395ca 100644 --- a/src/scripts/librarymenu.js +++ b/src/scripts/librarymenu.js @@ -352,7 +352,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", " }); links.push({ name: globalize.translate("QuickConnect"), - href: "quickconnect.html", + href: "quickConnect.html", pageIds: ["quickConnectPage", "quickConnectPage"], icon: "tap_and_play" }); diff --git a/src/scripts/routes.js b/src/scripts/routes.js index 1520e9663..f0806f56e 100644 --- a/src/scripts/routes.js +++ b/src/scripts/routes.js @@ -73,10 +73,10 @@ define([ controller: "user/subtitles" }); defineRoute({ - path: "/mypreferencesquickconnect.html", + path: "/myPreferencesQuickConnect.html", autoFocus: false, transition: "fade", - controller: "user/quickconnect" + controller: "user/quickConnect" }); defineRoute({ @@ -110,10 +110,10 @@ define([ controller: "device" }); defineRoute({ - path: "/quickconnect.html", + path: "/quickConnect.html", autoFocus: false, roles: "admin", - controller: "quickconnect" + controller: "quickConnect" }); defineRoute({ path: "/dlnaprofile.html", diff --git a/src/scripts/site.js b/src/scripts/site.js index 3b8abf2bf..ca8a828b0 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -829,7 +829,7 @@ var AppInfo = {}; define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency); define("playbackSettings", [componentsPath + "/playbacksettings/playbacksettings"], returnFirstDependency); define("homescreenSettings", [componentsPath + "/homescreensettings/homescreensettings"], returnFirstDependency); - define("quickConnectSettings", [componentsPath + "/quickconnectsettings/quickconnectsettings"], returnFirstDependency); + define("quickConnectSettings", [componentsPath + "/quickConnectSettings/quickConnectSettings"], returnFirstDependency); define("playbackManager", [componentsPath + "/playback/playbackmanager"], getPlaybackManager); define("layoutManager", [componentsPath + "/layoutManager", "apphost"], getLayoutManager); define("homeSections", [componentsPath + "/homesections/homesections"], returnFirstDependency); From 257ce4974ebee7c0977ae95cba4269805f6f8b77 Mon Sep 17 00:00:00 2001 From: Christoph Potas Date: Sun, 3 May 2020 20:30:35 +0200 Subject: [PATCH 0011/1520] ~ migrate subtitlesettings.js to es6 ~ migrate subtitleappearancehelper.js to es6 ~ replace duplicated "populateLanguages" function ( playbacksettings.js:18 ) ~ replace duplicated "onSubmit" function ( playbacksettings.js:266 ) - remove empty function getWindowStyles Signed-off-by: Christoph Potas --- package.json | 2 + .../subtitleappearancehelper.js | 242 ++++++------- .../subtitlesettings/subtitlesettings.js | 330 +++++++++--------- 3 files changed, 276 insertions(+), 298 deletions(-) diff --git a/package.json b/package.json index 53f3d225a..fda29b810 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,8 @@ "test": [ "src/components/autoFocuser.js", "src/components/cardbuilder/cardBuilder.js", + "src/components/subtitlesettings/subtitlesettings.js", + "src/components/subtitlesettings/subtitleappearancehelper.js", "src/scripts/dom.js", "src/components/filedownloader.js", "src/scripts/filesystem.js", diff --git a/src/components/subtitlesettings/subtitleappearancehelper.js b/src/components/subtitlesettings/subtitleappearancehelper.js index fdc64f0df..7bf473783 100644 --- a/src/components/subtitlesettings/subtitleappearancehelper.js +++ b/src/components/subtitlesettings/subtitleappearancehelper.js @@ -1,159 +1,149 @@ -define([], function () { - "use strict"; +function getTextStyles(settings, isCue) { - function getTextStyles(settings, isCue) { + let list = []; - var list = []; + if (isCue) { + switch (settings.textSize || '') { - if (isCue) { - switch (settings.textSize || '') { - - case 'smaller': - list.push({ name: 'font-size', value: '.5em' }); - break; - case 'small': - list.push({ name: 'font-size', value: '.7em' }); - break; - case 'large': - list.push({ name: 'font-size', value: '1.3em' }); - break; - case 'larger': - list.push({ name: 'font-size', value: '1.72em' }); - break; - case 'extralarge': - list.push({ name: 'font-size', value: '2em' }); - break; - default: - case 'medium': - break; - } - } else { - switch (settings.textSize || '') { - - case 'smaller': - list.push({ name: 'font-size', value: '.8em' }); - break; - case 'small': - list.push({ name: 'font-size', value: 'inherit' }); - break; - case 'larger': - list.push({ name: 'font-size', value: '2em' }); - break; - case 'extralarge': - list.push({ name: 'font-size', value: '2.2em' }); - break; - case 'large': - list.push({ name: 'font-size', value: '1.72em' }); - break; - default: - case 'medium': - list.push({ name: 'font-size', value: '1.36em' }); - break; - } - } - - switch (settings.dropShadow || '') { - - case 'raised': - list.push({ name: 'text-shadow', value: '-1px -1px white, 0px -1px white, -1px 0px white, 1px 1px black, 0px 1px black, 1px 0px black' }); + case 'smaller': + list.push({ name: 'font-size', value: '.5em' }); break; - case 'depressed': - list.push({ name: 'text-shadow', value: '1px 1px white, 0px 1px white, 1px 0px white, -1px -1px black, 0px -1px black, -1px 0px black' }); + case 'small': + list.push({ name: 'font-size', value: '.7em' }); break; - case 'uniform': - list.push({ name: 'text-shadow', value: '-1px 0px #000000, 0px 1px #000000, 1px 0px #000000, 0px -1px #000000' }); + case 'large': + list.push({ name: 'font-size', value: '1.3em' }); break; - case 'none': - list.push({ name: 'text-shadow', value: 'none' }); + case 'larger': + list.push({ name: 'font-size', value: '1.72em' }); + break; + case 'extralarge': + list.push({ name: 'font-size', value: '2em' }); break; default: - case 'dropshadow': - list.push({ name: 'text-shadow', value: '#000000 0px 0px 7px' }); + case 'medium': break; } + } else { + switch (settings.textSize || '') { - var background = settings.textBackground || 'transparent'; - if (background) { - list.push({ name: 'background-color', value: background }); - } - - var textColor = settings.textColor || '#ffffff'; - if (textColor) { - list.push({ name: 'color', value: textColor }); - } - - switch (settings.font || '') { - - case 'typewriter': - list.push({ name: 'font-family', value: '"Courier New",monospace' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'smaller': + list.push({ name: 'font-size', value: '.8em' }); break; - case 'print': - list.push({ name: 'font-family', value: 'Georgia,Times New Roman,Arial,Helvetica,serif' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'small': + list.push({ name: 'font-size', value: 'inherit' }); break; - case 'console': - list.push({ name: 'font-family', value: 'Consolas,Lucida Console,Menlo,Monaco,monospace' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'larger': + list.push({ name: 'font-size', value: '2em' }); break; - case 'cursive': - list.push({ name: 'font-family', value: 'Lucida Handwriting,Brush Script MT,Segoe Script,cursive,Quintessential,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'extralarge': + list.push({ name: 'font-size', value: '2.2em' }); break; - case 'casual': - list.push({ name: 'font-family', value: 'Gabriola,Segoe Print,Comic Sans MS,Chalkboard,Short Stack,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); - list.push({ name: 'font-variant', value: 'none' }); - break; - case 'smallcaps': - list.push({ name: 'font-family', value: 'Copperplate Gothic,Copperplate Gothic Bold,Copperplate,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); - list.push({ name: 'font-variant', value: 'small-caps' }); + case 'large': + list.push({ name: 'font-size', value: '1.72em' }); break; default: - list.push({ name: 'font-family', value: 'inherit' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'medium': + list.push({ name: 'font-size', value: '1.36em' }); break; } - - return list; } - function getWindowStyles(settings) { + switch (settings.dropShadow || '') { - return []; + case 'raised': + list.push({ name: 'text-shadow', value: '-1px -1px white, 0px -1px white, -1px 0px white, 1px 1px black, 0px 1px black, 1px 0px black' }); + break; + case 'depressed': + list.push({ name: 'text-shadow', value: '1px 1px white, 0px 1px white, 1px 0px white, -1px -1px black, 0px -1px black, -1px 0px black' }); + break; + case 'uniform': + list.push({ name: 'text-shadow', value: '-1px 0px #000000, 0px 1px #000000, 1px 0px #000000, 0px -1px #000000' }); + break; + case 'none': + list.push({ name: 'text-shadow', value: 'none' }); + break; + default: + case 'dropshadow': + list.push({ name: 'text-shadow', value: '#000000 0px 0px 7px' }); + break; } - function getStyles(settings, isCue) { - - return { - text: getTextStyles(settings, isCue), - window: getWindowStyles(settings) - }; + const background = settings.textBackground || 'transparent'; + if (background) { + list.push({ name: 'background-color', value: background }); } - function applyStyleList(styles, elem) { - - for (var i = 0, length = styles.length; i < length; i++) { - - var style = styles[i]; - - elem.style[style.name] = style.value; - } + const textColor = settings.textColor || '#ffffff'; + if (textColor) { + list.push({ name: 'color', value: textColor }); } - function applyStyles(elements, appearanceSettings) { + switch (settings.font || '') { - var styles = getStyles(appearanceSettings); - - if (elements.text) { - applyStyleList(styles.text, elements.text); - } - if (elements.window) { - applyStyleList(styles.window, elements.window); - } + case 'typewriter': + list.push({ name: 'font-family', value: '"Courier New",monospace' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'print': + list.push({ name: 'font-family', value: 'Georgia,Times New Roman,Arial,Helvetica,serif' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'console': + list.push({ name: 'font-family', value: 'Consolas,Lucida Console,Menlo,Monaco,monospace' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'cursive': + list.push({ name: 'font-family', value: 'Lucida Handwriting,Brush Script MT,Segoe Script,cursive,Quintessential,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'casual': + list.push({ name: 'font-family', value: 'Gabriola,Segoe Print,Comic Sans MS,Chalkboard,Short Stack,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'smallcaps': + list.push({ name: 'font-family', value: 'Copperplate Gothic,Copperplate Gothic Bold,Copperplate,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); + list.push({ name: 'font-variant', value: 'small-caps' }); + break; + default: + list.push({ name: 'font-family', value: 'inherit' }); + list.push({ name: 'font-variant', value: 'none' }); + break; } + return list; +} + +export function getStyles(settings, isCue) { + return { - getStyles: getStyles, - applyStyles: applyStyles + text: getTextStyles(settings, isCue), + window: [] }; -}); +} + +function applyStyleList(styles, elem) { + + for (let i = 0, length = styles.length; i < length; i++) { + + let style = styles[i]; + + elem.style[style.name] = style.value; + } +} + +export function applyStyles(elements, appearanceSettings) { + + let styles = getStyles(appearanceSettings); + + if (elements.text) { + applyStyleList(styles.text, elements.text); + } + if (elements.window) { + applyStyleList(styles.window, elements.window); + } +} +export default { + getStyles: getStyles, + applyStyles: applyStyles +}; diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index 2c8692919..8f5038fd6 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -1,213 +1,199 @@ -define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loading', 'connectionManager', 'subtitleAppearanceHelper', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-input', 'emby-checkbox', 'flexStyles'], function (require, globalize, appSettings, appHost, focusManager, loading, connectionManager, subtitleAppearanceHelper, dom, events) { - "use strict"; +import require from 'require'; +import globalize from 'globalize'; +import appHost from 'apphost'; +import appSettings from 'appSettings'; +import focusManager from 'focusManager'; +import loading from 'loading'; +import connectionManager from 'connectionmanager'; +import subtitleAppearanceHelper from 'subtitleappearancehelper'; +import playbacksettings from 'playbacksettings'; +import dom from 'dom'; +import events from 'events'; +import 'listViewStyle'; +import 'emby-select'; +import 'emby-input'; +import 'emby-checkbox'; +import 'flexStyles'; - function populateLanguages(select, languages) { - var html = ""; +function getSubtitleAppearanceObject(context) { + let appearanceSettings = {}; - html += ""; - for (var i = 0, length = languages.length; i < length; i++) { - var culture = languages[i]; - html += ""; + appearanceSettings.textSize = context.querySelector('#selectTextSize').value; + appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value; + appearanceSettings.font = context.querySelector('#selectFont').value; + appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value; + appearanceSettings.textColor = context.querySelector('#inputTextColor').value; + + return appearanceSettings; +} + +function loadForm(context, user, userSettings, appearanceSettings, apiClient) { + + apiClient.getCultures().then(function (allCultures) { + + if (appHost.supports('subtitleburnsettings') && user.Policy.EnableVideoPlaybackTranscoding) { + context.querySelector('.fldBurnIn').classList.remove('hide'); } - select.innerHTML = html; - } + let selectSubtitleLanguage = context.querySelector( '#selectSubtitleLanguage' ); - function getSubtitleAppearanceObject(context) { - var appearanceSettings = {}; + playbacksettings.populateLanguages(selectSubtitleLanguage, allCultures); - appearanceSettings.textSize = context.querySelector('#selectTextSize').value; - appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value; - appearanceSettings.font = context.querySelector('#selectFont').value; - appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value; - appearanceSettings.textColor = context.querySelector('#inputTextColor').value; + selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || ""; + context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || ""; - return appearanceSettings; - } + context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {})); - function loadForm(context, user, userSettings, appearanceSettings, apiClient) { + context.querySelector('#selectTextSize').value = appearanceSettings.textSize || ''; + context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || ''; + context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent'; + context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff'; + context.querySelector('#selectFont').value = appearanceSettings.font || ''; - apiClient.getCultures().then(function (allCultures) { + context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || ''; - if (appHost.supports('subtitleburnsettings') && user.Policy.EnableVideoPlaybackTranscoding) { - context.querySelector('.fldBurnIn').classList.remove('hide'); - } + onAppearanceFieldChange({ + target: context.querySelector('#selectTextSize') + }); - var selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage'); + loading.hide(); + }); +} - populateLanguages(selectSubtitleLanguage, allCultures); +function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) { - selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || ""; - context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || ""; + let appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings( appearanceKey ); + appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context)); - context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {})); + userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey); - context.querySelector('#selectTextSize').value = appearanceSettings.textSize || ''; - context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || ''; - context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent'; - context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff'; - context.querySelector('#selectFont').value = appearanceSettings.font || ''; + user.Configuration.SubtitleLanguagePreference = context.querySelector('#selectSubtitleLanguage').value; + user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value; - context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || ''; + return apiClient.updateUserConfiguration(user.Id, user.Configuration); +} - onAppearanceFieldChange({ - target: context.querySelector('#selectTextSize') - }); +export function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { + + loading.show(); + + appSettings.set('subtitleburnin', context.querySelector('#selectSubtitleBurnIn').value); + + apiClient.getUser(userId).then(function (user) { + + saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () { loading.hide(); + if (enableSaveConfirmation) { + require(['toast'], function (toast) { + toast(globalize.translate('SettingsSaved')); + }); + } + + events.trigger(instance, 'saved'); + + }, function () { + loading.hide(); }); + }); +} + +function onSubtitleModeChange(e) { + + let view = dom.parentWithClass( e.target, 'subtitlesettings' ); + + let subtitlesHelp = view.querySelectorAll( '.subtitlesHelp' ); + for (let i = 0, length = subtitlesHelp.length; i < length; i++) { + subtitlesHelp[i].classList.add('hide'); } + view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide'); +} - function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) { +function onAppearanceFieldChange(e) { - var appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey); - appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context)); + let view = dom.parentWithClass( e.target, 'subtitlesettings' ); - userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey); + let appearanceSettings = getSubtitleAppearanceObject( view ); - user.Configuration.SubtitleLanguagePreference = context.querySelector('#selectSubtitleLanguage').value; - user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value; + let elements = { + window: view.querySelector( '.subtitleappearance-preview-window' ), + text: view.querySelector( '.subtitleappearance-preview-text' ) + }; - return apiClient.updateUserConfiguration(user.Id, user.Configuration); - } + subtitleAppearanceHelper.applyStyles(elements, appearanceSettings); +} - function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { +export function embed(options, self) { - loading.show(); + require(['text!./subtitlesettings.template.html'], function (template) { - appSettings.set('subtitleburnin', context.querySelector('#selectSubtitleBurnIn').value); + options.element.classList.add('subtitlesettings'); + options.element.innerHTML = globalize.translateDocument(template, 'core'); - apiClient.getUser(userId).then(function (user) { + options.element.querySelector('form').addEventListener('submit', playbacksettings.OnSubmit.bind(self)); - saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () { + options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); + options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange); - loading.hide(); - if (enableSaveConfirmation) { - require(['toast'], function (toast) { - toast(globalize.translate('SettingsSaved')); - }); - } + if (options.enableSaveButton) { + options.element.querySelector('.btnSave').classList.remove('hide'); + } - events.trigger(instance, 'saved'); + if (appHost.supports('subtitleappearancesettings')) { + options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide'); + } - }, function () { - loading.hide(); - }); - }); - } + self.loadData(); - function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + if (options.autoFocus) { + focusManager.autoFocus(options.element); + } + }); +} +export function SubtitleSettings(options) { + + this.options = options; + + embed(options, this); +} + +SubtitleSettings.prototype.loadData = function () { + + let self = this; + let context = self.options.element; + + loading.show(); + + let userId = self.options.userId; + let apiClient = connectionManager.getApiClient( self.options.serverId ); + let userSettings = self.options.userSettings; + + apiClient.getUser(userId).then(function (user) { userSettings.setUserInfo(userId, apiClient).then(function () { - var enableSaveConfirmation = self.options.enableSaveConfirmation; - save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); + self.dataLoaded = true; + + let appearanceSettings = userSettings.getSubtitleAppearanceSettings( self.options.appearanceKey ); + + loadForm(context, user, userSettings, appearanceSettings, apiClient); }); + }); +}; - // Disable default form submission - if (e) { - e.preventDefault(); - } +SubtitleSettings.prototype.submit = function () { + playbacksettings.onSubmit.call(this); +}; - return false; - } +SubtitleSettings.prototype.destroy = function () { + this.options = null; +}; - function onSubtitleModeChange(e) { - - var view = dom.parentWithClass(e.target, 'subtitlesettings'); - - var subtitlesHelp = view.querySelectorAll('.subtitlesHelp'); - for (var i = 0, length = subtitlesHelp.length; i < length; i++) { - subtitlesHelp[i].classList.add('hide'); - } - view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide'); - } - - function onAppearanceFieldChange(e) { - - var view = dom.parentWithClass(e.target, 'subtitlesettings'); - - var appearanceSettings = getSubtitleAppearanceObject(view); - - var elements = { - window: view.querySelector('.subtitleappearance-preview-window'), - text: view.querySelector('.subtitleappearance-preview-text') - }; - - subtitleAppearanceHelper.applyStyles(elements, appearanceSettings); - } - - function embed(options, self) { - - require(['text!./subtitlesettings.template.html'], function (template) { - - options.element.classList.add('subtitlesettings'); - options.element.innerHTML = globalize.translateDocument(template, 'core'); - - options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); - - options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); - options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange); - - if (options.enableSaveButton) { - options.element.querySelector('.btnSave').classList.remove('hide'); - } - - if (appHost.supports('subtitleappearancesettings')) { - options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide'); - } - - self.loadData(); - - if (options.autoFocus) { - focusManager.autoFocus(options.element); - } - }); - } - - function SubtitleSettings(options) { - - this.options = options; - - embed(options, this); - } - - SubtitleSettings.prototype.loadData = function () { - - var self = this; - var context = self.options.element; - - loading.show(); - - var userId = self.options.userId; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userSettings = self.options.userSettings; - - apiClient.getUser(userId).then(function (user) { - userSettings.setUserInfo(userId, apiClient).then(function () { - self.dataLoaded = true; - - var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey); - - loadForm(context, user, userSettings, appearanceSettings, apiClient); - }); - }); - }; - - SubtitleSettings.prototype.submit = function () { - onSubmit.call(this); - }; - - SubtitleSettings.prototype.destroy = function () { - this.options = null; - }; - - return SubtitleSettings; -}); +export default { + save: save, + embed: embed, + SubtitleSettings: SubtitleSettings +}; From 6f0843cc6d30629c6e8f190558389785b9037e3a Mon Sep 17 00:00:00 2001 From: Christoph Potas Date: Mon, 4 May 2020 03:20:38 +0200 Subject: [PATCH 0012/1520] ~ convert subtitlesettings to class ~ use base import name instead of relative file path ~ fix "new" calling Signed-off-by: Christoph Potas --- package.json | 1 + src/components/settingshelper.js | 24 ++++ .../subtitleappearancehelper.js | 4 + .../subtitlesettings/subtitlesettings.js | 112 +++++++++++------- src/controllers/user/subtitles.js | 2 +- 5 files changed, 97 insertions(+), 46 deletions(-) create mode 100644 src/components/settingshelper.js diff --git a/package.json b/package.json index fda29b810..c11b6db91 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "src/components/cardbuilder/cardBuilder.js", "src/components/subtitlesettings/subtitlesettings.js", "src/components/subtitlesettings/subtitleappearancehelper.js", + "src/components/settingshelper.js", "src/scripts/dom.js", "src/components/filedownloader.js", "src/scripts/filesystem.js", diff --git a/src/components/settingshelper.js b/src/components/settingshelper.js new file mode 100644 index 000000000..0c942ed04 --- /dev/null +++ b/src/components/settingshelper.js @@ -0,0 +1,24 @@ +import globalize from 'globalize'; +/** + * Helper for handling settings + * @module components/settingsHelper + */ +export function populateLanguages(select, languages) { + + let html = ""; + + html += ""; + + for (let i = 0, length = languages.length; i < length; i++) { + + const culture = languages[i]; + + html += ""; + } + + select.innerHTML = html; +} + +export default { + populateLanguages: populateLanguages +}; diff --git a/src/components/subtitlesettings/subtitleappearancehelper.js b/src/components/subtitlesettings/subtitleappearancehelper.js index 7bf473783..d1c55e1ae 100644 --- a/src/components/subtitlesettings/subtitleappearancehelper.js +++ b/src/components/subtitlesettings/subtitleappearancehelper.js @@ -1,3 +1,7 @@ +/** + * Subtitle settings visual helper + * @module components/subtitleSettings/subtitleAppearanceHelper + */ function getTextStyles(settings, isCue) { let list = []; diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index 8f5038fd6..3e41da953 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -4,9 +4,9 @@ import appHost from 'apphost'; import appSettings from 'appSettings'; import focusManager from 'focusManager'; import loading from 'loading'; -import connectionManager from 'connectionmanager'; -import subtitleAppearanceHelper from 'subtitleappearancehelper'; -import playbacksettings from 'playbacksettings'; +import connectionManager from 'connectionManager'; +import subtitleAppearanceHelper from 'subtitleAppearanceHelper'; +import settingsHelper from '../settingshelper'; import dom from 'dom'; import events from 'events'; import 'listViewStyle'; @@ -15,6 +15,11 @@ import 'emby-input'; import 'emby-checkbox'; import 'flexStyles'; +/** + * Subtitle settings + * @module components/subtitleSettings/subtitleSettings + */ + function getSubtitleAppearanceObject(context) { let appearanceSettings = {}; @@ -37,7 +42,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) { let selectSubtitleLanguage = context.querySelector( '#selectSubtitleLanguage' ); - playbacksettings.populateLanguages(selectSubtitleLanguage, allCultures); + settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures); selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || ""; context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || ""; @@ -73,7 +78,7 @@ function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) return apiClient.updateUserConfiguration(user.Id, user.Configuration); } -export function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { +function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { loading.show(); @@ -123,14 +128,14 @@ function onAppearanceFieldChange(e) { subtitleAppearanceHelper.applyStyles(elements, appearanceSettings); } -export function embed(options, self) { +function embed(options, self) { require(['text!./subtitlesettings.template.html'], function (template) { options.element.classList.add('subtitlesettings'); options.element.innerHTML = globalize.translateDocument(template, 'core'); - options.element.querySelector('form').addEventListener('submit', playbacksettings.OnSubmit.bind(self)); + options.element.querySelector('form').addEventListener('submit', self.onSubmit ); options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); @@ -155,45 +160,62 @@ export function embed(options, self) { }); } -export function SubtitleSettings(options) { +export class SubtitleSettings { - this.options = options; + constructor(options) { - embed(options, this); + this.options = options; + + embed(options, this); + } + + loadData() { + let self = this; + let context = self.options.element; + + loading.show(); + + let userId = self.options.userId; + let apiClient = connectionManager.getApiClient( self.options.serverId ); + let userSettings = self.options.userSettings; + + apiClient.getUser(userId).then(function (user) { + userSettings.setUserInfo(userId, apiClient).then(function () { + self.dataLoaded = true; + + let appearanceSettings = userSettings.getSubtitleAppearanceSettings( self.options.appearanceKey ); + + loadForm(context, user, userSettings, appearanceSettings, apiClient); + }); + }); + } + + submit() { + this.onSubmit( null ); + } + + destroy() { + this.options = null; + } + + onSubmit( e ) { + const self = this; + let apiClient = connectionManager.getApiClient(self.options.serverId); + let userId = self.options.userId; + let userSettings = self.options.userSettings; + + userSettings.setUserInfo(userId, apiClient).then(function () { + + let enableSaveConfirmation = self.options.enableSaveConfirmation; + save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); + }); + + // Disable default form submission + if (e) { + e.preventDefault(); + } + return false; + } } -SubtitleSettings.prototype.loadData = function () { - - let self = this; - let context = self.options.element; - - loading.show(); - - let userId = self.options.userId; - let apiClient = connectionManager.getApiClient( self.options.serverId ); - let userSettings = self.options.userSettings; - - apiClient.getUser(userId).then(function (user) { - userSettings.setUserInfo(userId, apiClient).then(function () { - self.dataLoaded = true; - - let appearanceSettings = userSettings.getSubtitleAppearanceSettings( self.options.appearanceKey ); - - loadForm(context, user, userSettings, appearanceSettings, apiClient); - }); - }); -}; - -SubtitleSettings.prototype.submit = function () { - playbacksettings.onSubmit.call(this); -}; - -SubtitleSettings.prototype.destroy = function () { - this.options = null; -}; - -export default { - save: save, - embed: embed, - SubtitleSettings: SubtitleSettings -}; +export default SubtitleSettings; diff --git a/src/controllers/user/subtitles.js b/src/controllers/user/subtitles.js index e2b98dc2d..f449b655c 100644 --- a/src/controllers/user/subtitles.js +++ b/src/controllers/user/subtitles.js @@ -18,7 +18,7 @@ define(["subtitleSettings", "userSettings", "autoFocuser"], function (SubtitleSe if (subtitleSettingsInstance) { subtitleSettingsInstance.loadData(); } else { - subtitleSettingsInstance = new SubtitleSettings({ + subtitleSettingsInstance = new SubtitleSettings.default({ serverId: ApiClient.serverId(), userId: userId, element: view.querySelector(".settingsContainer"), From 2655b4dca3da200f9dc720f37b4d6e7f32b4d839 Mon Sep 17 00:00:00 2001 From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com> Date: Mon, 4 May 2020 17:23:57 -0500 Subject: [PATCH 0013/1520] Migrate API changes to apiclient repo --- src/libraries/apiclient/apiclientcore.js | 25 ------------------------ 1 file changed, 25 deletions(-) diff --git a/src/libraries/apiclient/apiclientcore.js b/src/libraries/apiclient/apiclientcore.js index e1892505f..557a4e103 100644 --- a/src/libraries/apiclient/apiclientcore.js +++ b/src/libraries/apiclient/apiclientcore.js @@ -356,31 +356,6 @@ define(["events", "appStorage"], function(events, appStorage) { instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated() }, reject) }) - }, ApiClient.prototype.quickConnect = function (token) { - if (!token) return Promise.reject(); - var url = this.getUrl("Users/AuthenticateWithQuickConnect"); - var instance = this; - return new Promise(function(resolve, reject) { - var postData = { - Token: token - }; - instance.ajax({ - type: "POST", - url: url, - data: JSON.stringify(postData), - dataType: "json", - contentType: "application/json" - }).then(function(result) { - var afterOnAuthenticated = function() { - redetectBitrate(instance); - return resolve(result); - }; - instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated() - }, reject) - }) - }, ApiClient.prototype.getQuickConnect = function(verb) { - var url = this.getUrl("/QuickConnect/" + verb); - return this.getJSON(url); }, ApiClient.prototype.ensureWebSocket = function() { if (!this.isWebSocketOpenOrConnecting() && this.isWebSocketSupported()) try { this.openWebSocket() From 658710e982db7a435d5396549d5712b955fb320b Mon Sep 17 00:00:00 2001 From: Christoph Potas Date: Sat, 9 May 2020 01:20:32 +0200 Subject: [PATCH 0014/1520] + added settingshelper to site defines ~ convert subtitles controller to es6 module + added support for class controller Signed-off-by: Christoph Potas --- .../subtitlesettings/subtitlesettings.js | 2 +- src/components/viewManager/viewManager.js | 4 + src/controllers/user/subtitles.js | 102 ++++++++++-------- src/scripts/site.js | 1 + 4 files changed, 64 insertions(+), 45 deletions(-) diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index 3e41da953..e03c718fc 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -6,7 +6,7 @@ import focusManager from 'focusManager'; import loading from 'loading'; import connectionManager from 'connectionManager'; import subtitleAppearanceHelper from 'subtitleAppearanceHelper'; -import settingsHelper from '../settingshelper'; +import settingsHelper from 'settingsHelper'; import dom from 'dom'; import events from 'events'; import 'listViewStyle'; diff --git a/src/components/viewManager/viewManager.js b/src/components/viewManager/viewManager.js index a8e514e06..f39c4995f 100644 --- a/src/components/viewManager/viewManager.js +++ b/src/components/viewManager/viewManager.js @@ -25,6 +25,10 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi // Use controller method var controller = new options.controllerFactory(newView, eventDetail.detail.params); + } else if (typeof options.controllerFactory === 'object') { + + // Use controller class + var controller = new options.controllerFactory.default(newView, eventDetail.detail.params); } if (!options.controllerFactory || dispatchPageEvents) { diff --git a/src/controllers/user/subtitles.js b/src/controllers/user/subtitles.js index f449b655c..f1efe0c21 100644 --- a/src/controllers/user/subtitles.js +++ b/src/controllers/user/subtitles.js @@ -1,49 +1,63 @@ -define(["subtitleSettings", "userSettings", "autoFocuser"], function (SubtitleSettings, userSettings, autoFocuser) { - "use strict"; +import subtitleSettings from 'subtitleSettings'; +import * as userSettings from 'userSettings'; +import autoFocuser from 'autoFocuser'; - return function (view, params) { - function onBeforeUnload(e) { - if (hasChanges) { - e.returnValue = "You currently have unsaved changes. Are you sure you wish to leave?"; - } +export class SubtitleController { + constructor(view, params) { + this.userId = params.userId || ApiClient.getCurrentUserId(); + this.currentSettings = this.userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings(); + this.hasChanges = false; + this.subtitleSettingsInstance = null; + this.view = view; + + view.addEventListener("viewshow", this.viewShow.bind(this)); + view.addEventListener("change", this.change.bind(this)); + view.addEventListener("viewbeforehide", this.viewBeforeHide.bind(this)); + view.addEventListener("viewdestroy", this.viewDestroy.bind(this)); + } + + viewShow() { + window.addEventListener("beforeunload", this.beforeUnload.bind(this)); + + if (this.subtitleSettingsInstance) { + this.subtitleSettingsInstance.loadData(); + } else { + this.subtitleSettingsInstance = new subtitleSettings({ + serverId: ApiClient.serverId(), + userId: this.userId, + element: this.view.querySelector(".settingsContainer"), + userSettings: this.currentSettings, + enableSaveButton: false, + enableSaveConfirmation: false, + autoFocus: autoFocuser.isEnabled() + }); } + } - var subtitleSettingsInstance; - var hasChanges; - var userId = params.userId || ApiClient.getCurrentUserId(); - var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings(); - view.addEventListener("viewshow", function () { - window.addEventListener("beforeunload", onBeforeUnload); + viewDestroy() { + if (this.subtitleSettingsInstance) { + this.subtitleSettingsInstance.destroy(); + this.subtitleSettingsInstance = null; + } + } - if (subtitleSettingsInstance) { - subtitleSettingsInstance.loadData(); - } else { - subtitleSettingsInstance = new SubtitleSettings.default({ - serverId: ApiClient.serverId(), - userId: userId, - element: view.querySelector(".settingsContainer"), - userSettings: currentSettings, - enableSaveButton: false, - enableSaveConfirmation: false, - autoFocus: autoFocuser.isEnabled() - }); - } - }); - view.addEventListener("change", function () { - hasChanges = true; - }); - view.addEventListener("viewbeforehide", function () { - hasChanges = false; + viewBeforeHide() { + this.hasChanges = false; - if (subtitleSettingsInstance) { - subtitleSettingsInstance.submit(); - } - }); - view.addEventListener("viewdestroy", function () { - if (subtitleSettingsInstance) { - subtitleSettingsInstance.destroy(); - subtitleSettingsInstance = null; - } - }); - }; -}); + if (this.subtitleSettingsInstance) { + this.subtitleSettingsInstance.submit(); + } + } + + change() { + this.hasChanges = true; + } + + beforeUnload(e) { + if (this.hasChanges) { + e.returnValue = "You currently have unsaved changes. Are you sure you wish to leave?"; + } + } +} + +export default SubtitleController; diff --git a/src/scripts/site.js b/src/scripts/site.js index 5ce093e62..37832af5c 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -831,6 +831,7 @@ var AppInfo = {}; define("upNextDialog", [componentsPath + "/upnextdialog/upnextdialog"], returnFirstDependency); define("subtitleAppearanceHelper", [componentsPath + "/subtitlesettings/subtitleappearancehelper"], returnFirstDependency); define("subtitleSettings", [componentsPath + "/subtitlesettings/subtitlesettings"], returnFirstDependency); + define("settingsHelper", [componentsPath + "/settingshelper"], returnFirstDependency); define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency); define("playbackSettings", [componentsPath + "/playbacksettings/playbacksettings"], returnFirstDependency); define("homescreenSettings", [componentsPath + "/homescreensettings/homescreensettings"], returnFirstDependency); From e5bf9bc074d59af7b5e76c734e0af1c6741add52 Mon Sep 17 00:00:00 2001 From: Christoph Potas Date: Sat, 9 May 2020 01:53:13 +0200 Subject: [PATCH 0015/1520] + add controller to es6 module list Signed-off-by: Christoph Potas --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index c11b6db91..4d3d3047b 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "src/components/subtitlesettings/subtitlesettings.js", "src/components/subtitlesettings/subtitleappearancehelper.js", "src/components/settingshelper.js", + "src/controllers/user/subtitles.js", "src/scripts/dom.js", "src/components/filedownloader.js", "src/scripts/filesystem.js", From 9469c208e19f34b97fda261ca58e7201c1359aed Mon Sep 17 00:00:00 2001 From: Christoph Potas Date: Sat, 9 May 2020 15:42:37 +0200 Subject: [PATCH 0016/1520] ~ switch all strings to single quotes to match ESLint requirements Signed-off-by: Christoph Potas --- src/components/settingshelper.js | 6 +++--- src/controllers/user/subtitles.js | 14 +++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/settingshelper.js b/src/components/settingshelper.js index 0c942ed04..3bbff9d8e 100644 --- a/src/components/settingshelper.js +++ b/src/components/settingshelper.js @@ -5,15 +5,15 @@ import globalize from 'globalize'; */ export function populateLanguages(select, languages) { - let html = ""; + let html = ''; - html += ""; + html += "'; for (let i = 0, length = languages.length; i < length; i++) { const culture = languages[i]; - html += ""; + html += "'; } select.innerHTML = html; diff --git a/src/controllers/user/subtitles.js b/src/controllers/user/subtitles.js index f1efe0c21..e88109cc6 100644 --- a/src/controllers/user/subtitles.js +++ b/src/controllers/user/subtitles.js @@ -10,14 +10,14 @@ export class SubtitleController { this.subtitleSettingsInstance = null; this.view = view; - view.addEventListener("viewshow", this.viewShow.bind(this)); - view.addEventListener("change", this.change.bind(this)); - view.addEventListener("viewbeforehide", this.viewBeforeHide.bind(this)); - view.addEventListener("viewdestroy", this.viewDestroy.bind(this)); + view.addEventListener('viewshow', this.viewShow.bind(this)); + view.addEventListener('change', this.change.bind(this)); + view.addEventListener('viewbeforehide', this.viewBeforeHide.bind(this)); + view.addEventListener('viewdestroy', this.viewDestroy.bind(this)); } viewShow() { - window.addEventListener("beforeunload", this.beforeUnload.bind(this)); + window.addEventListener('beforeunload', this.beforeUnload.bind(this)); if (this.subtitleSettingsInstance) { this.subtitleSettingsInstance.loadData(); @@ -25,7 +25,7 @@ export class SubtitleController { this.subtitleSettingsInstance = new subtitleSettings({ serverId: ApiClient.serverId(), userId: this.userId, - element: this.view.querySelector(".settingsContainer"), + element: this.view.querySelector('.settingsContainer'), userSettings: this.currentSettings, enableSaveButton: false, enableSaveConfirmation: false, @@ -55,7 +55,7 @@ export class SubtitleController { beforeUnload(e) { if (this.hasChanges) { - e.returnValue = "You currently have unsaved changes. Are you sure you wish to leave?"; + e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?'; } } } From 7e7613d5de732bc5b59164613252b680895fba77 Mon Sep 17 00:00:00 2001 From: Guilherme Danno Date: Fri, 8 May 2020 19:06:44 -0300 Subject: [PATCH 0017/1520] Update CONTRIBUTORS.md --- CONTRIBUTORS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 2eae7e693..65bb24e9f 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -35,6 +35,7 @@ - [Thibault Nocchi](https://github.com/ThibaultNocchi) - [MrTimscampi](https://github.com/MrTimscampi) - [Sarab Singh](https://github.com/sarab97) + - [GuilhermeHideki](https://github.com/GuilhermeHideki) # Emby Contributors From 934797e07409e7e56cbed10f67504eaf4f0c9d41 Mon Sep 17 00:00:00 2001 From: Guilherme Danno Date: Sun, 3 May 2020 20:45:14 -0300 Subject: [PATCH 0018/1520] feat: add mixins file --- src/styles/_mixins.scss | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/styles/_mixins.scss diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 000000000..ed23ab083 --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,23 @@ +@mixin background-cover($position) { + background-position: $position; + background-repeat: no-repeat; + background-size: cover; +} + +@mixin circle($size) { + @include square($size); + border-radius: 100%; +} + +@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) { + position: $position; + top: $top; + right: $right; + bottom: $bottom; + left: $left; +} + +@mixin square($size) { + height: $size; + width: $size; +} From 594580ec2d50593f599dea02db4d126ffd75dfb3 Mon Sep 17 00:00:00 2001 From: Guilherme Danno Date: Sat, 16 May 2020 00:32:32 -0300 Subject: [PATCH 0019/1520] move files to scss creating this commit so git don't lose track of the changes --- .../css/{clearbutton.css => clearbutton.scss} | 0 .../css/{detailtable.css => detailtable.scss} | 0 .../css/{flexstyles.css => flexstyles.scss} | 0 src/assets/css/{fonts.css => fonts.scss} | 0 .../css/{fonts.sized.css => fonts.sized.scss} | 0 src/assets/css/{ios.css => ios.scss} | 0 src/assets/css/{livetv.css => livetv.scss} | 0 src/assets/css/{site.css => site.scss} | 63 +++++++++---------- 8 files changed, 29 insertions(+), 34 deletions(-) rename src/assets/css/{clearbutton.css => clearbutton.scss} (100%) rename src/assets/css/{detailtable.css => detailtable.scss} (100%) rename src/assets/css/{flexstyles.css => flexstyles.scss} (100%) rename src/assets/css/{fonts.css => fonts.scss} (100%) rename src/assets/css/{fonts.sized.css => fonts.sized.scss} (100%) rename src/assets/css/{ios.css => ios.scss} (100%) rename src/assets/css/{livetv.css => livetv.scss} (100%) rename src/assets/css/{site.css => site.scss} (76%) diff --git a/src/assets/css/clearbutton.css b/src/assets/css/clearbutton.scss similarity index 100% rename from src/assets/css/clearbutton.css rename to src/assets/css/clearbutton.scss diff --git a/src/assets/css/detailtable.css b/src/assets/css/detailtable.scss similarity index 100% rename from src/assets/css/detailtable.css rename to src/assets/css/detailtable.scss diff --git a/src/assets/css/flexstyles.css b/src/assets/css/flexstyles.scss similarity index 100% rename from src/assets/css/flexstyles.css rename to src/assets/css/flexstyles.scss diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.scss similarity index 100% rename from src/assets/css/fonts.css rename to src/assets/css/fonts.scss diff --git a/src/assets/css/fonts.sized.css b/src/assets/css/fonts.sized.scss similarity index 100% rename from src/assets/css/fonts.sized.css rename to src/assets/css/fonts.sized.scss diff --git a/src/assets/css/ios.css b/src/assets/css/ios.scss similarity index 100% rename from src/assets/css/ios.css rename to src/assets/css/ios.scss diff --git a/src/assets/css/livetv.css b/src/assets/css/livetv.scss similarity index 100% rename from src/assets/css/livetv.css rename to src/assets/css/livetv.scss diff --git a/src/assets/css/site.css b/src/assets/css/site.scss similarity index 76% rename from src/assets/css/site.css rename to src/assets/css/site.scss index 627145abc..db179afb2 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.scss @@ -1,19 +1,19 @@ -body, -html { +@mixin fullpage { margin: 0; padding: 0; height: 100%; } -.clipForScreenReader { - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; +html { + @include fullpage; + line-height: 1.35; +} + +body { + @include fullpage; + overflow-x: hidden; + background-color: transparent !important; + -webkit-font-smoothing: antialiased; } .material-icons { @@ -30,10 +30,6 @@ html { contain: strict; } -html { - line-height: 1.35; -} - .layout-mobile, .layout-tv { -webkit-touch-callout: none; @@ -44,12 +40,6 @@ html { user-select: none; } -body { - overflow-x: hidden; - background-color: transparent !important; - -webkit-font-smoothing: antialiased; -} - .mainAnimatedPage { contain: style size !important; } @@ -62,7 +52,7 @@ body { overflow-y: hidden !important; } -div[data-role=page] { +div[data-role="page"] { outline: 0; } @@ -75,10 +65,10 @@ div[data-role=page] { padding-left: 0.15em; font-weight: 400; white-space: normal !important; -} -.fieldDescription + .fieldDescription { - margin-top: 0.3em; + + .fieldDescription { + margin-top: 0.3em; + } } .content-primary, @@ -89,9 +79,14 @@ div[data-role=page] { padding-bottom: 5em !important; } -@media all and (min-width: 50em) { - .readOnlyContent, - form { +.readOnlyContent { + @media all and (min-width: 50em) { + max-width: 54em; + } +} + +form { + @media all and (min-width: 50em) { max-width: 54em; } } @@ -111,12 +106,12 @@ div[data-role=page] { .headroom { will-change: transform; transition: transform 200ms linear; -} -.headroom--pinned { - transform: translateY(0%); -} + &--pinned { + transform: translateY(0%); + } -.headroom--unpinned { - transform: translateY(-100%); + &--unpinned { + transform: translateY(-100%); + } } From 575dcd8334c9b635bb375eaec1b6d80b941ab380 Mon Sep 17 00:00:00 2001 From: Guilherme Danno Date: Sat, 16 May 2020 00:54:46 -0300 Subject: [PATCH 0020/1520] refactor: use scss features --- src/assets/css/fonts.scss | 23 ++++++++--------- src/assets/css/fonts.sized.scss | 44 ++++++++++++++++----------------- src/assets/css/livetv.scss | 4 +-- src/assets/css/site.scss | 11 +++++++++ 4 files changed, 45 insertions(+), 37 deletions(-) diff --git a/src/assets/css/fonts.scss b/src/assets/css/fonts.scss index cb0da0f80..abffd3a0d 100644 --- a/src/assets/css/fonts.scss +++ b/src/assets/css/fonts.scss @@ -1,5 +1,11 @@ -html { +@mixin font($weight: null, $size: null) { font-family: "Noto Sans", sans-serif; + font-weight: $weight; + font-size: $size; +} + +html { + @include font; font-size: 93%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; @@ -7,25 +13,16 @@ html { text-rendering: optimizeLegibility; } -h1, -h2, -h3 { - font-family: "Noto Sans", sans-serif; -} - h1 { - font-weight: 400; - font-size: 1.8em; + @include font(400, 1.8em); } h2 { - font-weight: 400; - font-size: 1.5em; + @include font(400, 1.5em); } h3 { - font-weight: 400; - font-size: 1.17em; + @include font(400, 1.17em); } .layout-tv { diff --git a/src/assets/css/fonts.sized.scss b/src/assets/css/fonts.sized.scss index f60a94f23..1cec58a4a 100644 --- a/src/assets/css/fonts.sized.scss +++ b/src/assets/css/fonts.sized.scss @@ -1,31 +1,31 @@ -h1 { +@mixin header-font($size: null) { font-weight: 400; - font-size: 1.8em; + font-size: $size; } -.layout-desktop h1 { - font-size: 2em; -} - -h2 { - font-weight: 400; - font-size: 1.5em; -} - -h3 { - font-weight: 400; - font-size: 1.17em; -} - -@media all and (min-height: 720px) { - html { +html { + @media all and (min-height: 720px) { font-size: 20px; } -} -/* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */ -@media all and (min-height: 1000px) { - html { + /* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */ + @media all and (min-height: 1000px) { font-size: 27px; } } + +h1 { + @include header-font(1.8em); + + .layout-desktop & { + font-size: 2em; + } +} + +h2 { + @include header-font(1.8em); +} + +h3 { + @include header-font(1.17em); +} diff --git a/src/assets/css/livetv.scss b/src/assets/css/livetv.scss index 695adff8c..032bcddf4 100644 --- a/src/assets/css/livetv.scss +++ b/src/assets/css/livetv.scss @@ -2,8 +2,8 @@ padding-bottom: 15em; } -@media all and (min-width: 62.5em) { - #guideTab { +#guideTab { + @media all and (min-width: 62.5em) { padding-left: 0.5em; } } diff --git a/src/assets/css/site.scss b/src/assets/css/site.scss index db179afb2..d900a8bb4 100644 --- a/src/assets/css/site.scss +++ b/src/assets/css/site.scss @@ -16,6 +16,17 @@ body { -webkit-font-smoothing: antialiased; } +.clipForScreenReader { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; +} + .material-icons { /* Fix font ligatures on older WebOS versions */ -webkit-font-feature-settings: "liga"; From 0a2f0b770cca47047c33625ae448ef49b93d377a Mon Sep 17 00:00:00 2001 From: ferferga Date: Wed, 27 May 2020 19:30:07 +0200 Subject: [PATCH 0021/1520] Remove download images in advance from library options --- .../libraryoptionseditor/libraryoptionseditor.js | 4 ---- .../libraryoptionseditor.template.html | 8 -------- src/strings/en-us.json | 2 -- 3 files changed, 14 deletions(-) diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js index fec465640..05adeec35 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.js +++ b/src/components/libraryoptionseditor/libraryoptionseditor.js @@ -243,11 +243,9 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct elem.innerHTML = html; if (html) { elem.classList.remove('hide'); - page.querySelector('.chkDownloadImagesInAdvanceContainer').classList.remove('hide'); page.querySelector('.chkSaveLocalContainer').classList.remove('hide'); } else { elem.classList.add('hide'); - page.querySelector('.chkDownloadImagesInAdvanceContainer').classList.add('hide'); page.querySelector('.chkSaveLocalContainer').classList.add('hide'); } return true; @@ -500,7 +498,6 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct EnableRealtimeMonitor: parent.querySelector('.chkEnableRealtimeMonitor').checked, ExtractChapterImagesDuringLibraryScan: parent.querySelector('.chkExtractChaptersDuringLibraryScan').checked, EnableChapterImageExtraction: parent.querySelector('.chkExtractChapterImages').checked, - DownloadImagesInAdvance: parent.querySelector('#chkDownloadImagesInAdvance').checked, EnableInternetProviders: true, ImportMissingEpisodes: parent.querySelector('#chkImportMissingEpisodes').checked, SaveLocalMetadata: parent.querySelector('#chkSaveLocal').checked, @@ -558,7 +555,6 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct parent.querySelector('.chkEnableRealtimeMonitor').checked = options.EnableRealtimeMonitor; parent.querySelector('.chkExtractChaptersDuringLibraryScan').checked = options.ExtractChapterImagesDuringLibraryScan; parent.querySelector('.chkExtractChapterImages').checked = options.EnableChapterImageExtraction; - parent.querySelector('#chkDownloadImagesInAdvance').checked = options.DownloadImagesInAdvance; parent.querySelector('#chkSaveLocal').checked = options.SaveLocalMetadata; parent.querySelector('#chkImportMissingEpisodes').checked = options.ImportMissingEpisodes; parent.querySelector('.chkAutomaticallyGroupSeries').checked = options.EnableAutomaticSeriesGrouping; diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.template.html b/src/components/libraryoptionseditor/libraryoptionseditor.template.html index caa177108..93033032a 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.template.html +++ b/src/components/libraryoptionseditor/libraryoptionseditor.template.html @@ -69,14 +69,6 @@
    ${LabelSaveLocalMetadataHelp}
    -
    - -
    ${OptionDownloadImagesInAdvanceHelp}
    -
    -