1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Finish web UI

This commit is contained in:
Matt Montgomery 2020-04-12 00:44:30 -05:00
parent b43adb7406
commit fa9e2b476b
12 changed files with 248 additions and 9 deletions

View file

@ -0,0 +1,65 @@
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) {
"use strict";
function authorizeRequest(event) {
var lookup = event.data.lookup;
var apiClient = event.data.apiClient;
var url = ApiClient.getUrl("/QuickConnect/Authorize");
apiClient.ajax({
type: "POST",
url: url,
data: {
"Lookup": lookup
}
}, true);
}
function list(apiClient) {
var elem = $("#quickConnectIncoming");
elem.html("");
apiClient.getJSON("/QuickConnect/List").then(json => {
console.debug("raw json", json);
for(var i = 0; i < json.length; i++) {
var current = json[i];
var html = "<li>" + current.Code + " - " + current.FriendlyName + " - ";
if(!current.Authenticated) {
html += "<a href=\"#\" id=\"qc" + current.Lookup + "\">authorize</a>";
}
else {
html += " (already authorized)";
}
html += "</li>";
elem.append(html);
$("#qc" + current.Lookup).click({ lookup: current.Lookup, apiClient: apiClient}, authorizeRequest);
}
});
}
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();
};
QuickConnectSettings.prototype.submit = function () {
return false;
};
QuickConnectSettings.prototype.destroy = function () {
this.options = null;
};
return QuickConnectSettings;
});

View file

@ -152,10 +152,11 @@ 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 => {
var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
apiClient.getJSON(url)
.then(json => {
if (!json.Secret || !json.Code) {
Dashboard.alert({
message: json.Error,
@ -171,11 +172,12 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
loading.show();
identifier = json.Secret;
interval = setInterval(() => {
$.get('/QuickConnect/Connect?Secret=' + identifier).then(x => {
if(x.Authenticated) {
apiClient.quickConnect(x.Authentication).then((result) => {
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;

View file

@ -0,0 +1,57 @@
define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, libraryMenu) {
"use strict";
function loadPage(page, status) {
var active = (status == "Active");
var available = (status == "Available") || active;
$("#quickConnectStatus").text(status.toLocaleLowerCase());
$("#chkQuickConnectAvailable").checked(available);
$("#chkQuickConnectActive").checked(active);
loading.hide();
}
function onSubmit() {
loading.show();
var available = $("#chkQuickConnectAvailable").is(":checked") ? "Available" : "Unavailable";
var url = ApiClient.getUrl("/QuickConnect/Available");
ApiClient.ajax({
type: "POST",
data: {
"Status": available
},
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"
});
});
loading.hide();
return false;
}
$(document).on("pageinit", "#quickConnectPage", function () {
$("#quickConnectPage").off("submit", onSubmit).on("submit", onSubmit);
$("#btnQuickConnectSubmit").click(onSubmit);
}).on("pageshow", "#quickConnectPage", function () {
loading.show();
var page = this;
var promise1 = ApiClient.getQuickConnect("Status");
Promise.all([promise1]).then(function (responses) {
loadPage(page, responses[0]);
});
});
});

View file

@ -24,6 +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);
if (window.NativeShell && window.NativeShell.AppHost.supports("clientsettings")) {
page.querySelector(".clientSettings").classList.remove("hide");

View file

@ -0,0 +1,41 @@
define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (QuickConnectSettings, dom, globalize, loading, userSettings, autoFocuser) {
"use strict";
return function (view, params) {
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");
quickConnectSettingsInstance = new QuickConnectSettings({
serverId: ApiClient.serverId(),
userId: userId,
element: view.querySelector(".quickConnectSettingsContainer"),
userSettings: currentSettings,
enableSaveButton: false,
enableSaveConfirmation: false,
autoFocus: autoFocuser.isEnabled()
});
quickConnectSettingsInstance.loadData();
});
view.addEventListener("change", function () {
hasChanges = true;
});
view.addEventListener("viewbeforehide", function () {
hasChanges = false;
if (quickConnectSettingsInstance) {
quickConnectSettingsInstance.submit();
}
});
view.addEventListener("viewdestroy", function () {
if (quickConnectSettingsInstance) {
quickConnectSettingsInstance.destroy();
quickConnectSettingsInstance = null;
}
});
};
});

View file

@ -377,6 +377,9 @@ define(["events", "appStorage"], function(events, appStorage) {
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()

View file

@ -48,6 +48,16 @@
</div>
</a>
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkQuickConnectPreferences listItem-border">
<div class="listItem">
<i class="material-icons listItemIcon listItemIcon-transparent"></i>
<div class="listItemBody">
<div class="listItemBodyText">Quick Connect</div>
</div>
</div>
</a>
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="clientSettings listItem-border">
<div class="listItem">
<i class="material-icons listItemIcon listItemIcon-transparent devices_other"></i>

View file

@ -0,0 +1,12 @@
<div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true">
<button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block" disabled>
<span>Activate</span>
</button>
Incoming login requests:
<div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
<ul id="quickConnectIncoming">
<li>Failed to load incoming requests</li>
</ul>
</div>
</div>

29
src/quickconnect.html Normal file
View file

@ -0,0 +1,29 @@
<div id="quickConnectPage" data-role="page" class="page type-interior advancedConfigurationPage">
<div>
<div class="content-primary">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">Quick Connect</h2>
</div>
</div>
Quick connect is: <span id="quickConnectStatus">Failed to load status</span>
<div class="checkboxList paperList" style="padding:.5em 1em;">
<label>
<input type="checkbox" is="emby-checkbox" id="chkQuickConnectAvailable" />
<span>Enable quick connect on this server</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkQuickConnectActive" />
<span>Always accept quick connect login requests</span>
</label>
<div class="fieldDescription checkboxFieldDescription">If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.</div>
</div>
<button is="emby-button" id="btnQuickConnectSubmit" type="submit" class="raised button-submit block">
<span>${ButtonSave}</span>
</button>
</div>
</div>
</div>

View file

@ -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"),

View file

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

View file

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