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

improve the user avatar interface

Browse source
This commit is contained in:
dkanada 2019-09-26 01:15:36 +09:00
parent 0286cc60d5
commit c679336b87
4 changed files with 40 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/controllers/myprofile.js
View file

@ -1,4 +1,4 @@
define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "emby-button"], function (Userpasswordpage, loading, libraryMenu, appHost) {
define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "emby-button"], function (UserPasswordPage, loading, libraryMenu, appHost) {
"use strict";
function reloadUser(page) {
@ -6,10 +6,8 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
loading.show();
ApiClient.getUser(userId).then(function (user) {
page.querySelector(".username").innerHTML = user.Name;
var uploadUserImage = page.querySelector("#uploadUserImage");
uploadUserImage.value = "";
uploadUserImage.dispatchEvent(new CustomEvent("change", {}));
libraryMenu.setTitle(user.Name);
var imageUrl = "img/logindefault.png";
if (user.PrimaryImageTag) {
imageUrl = ApiClient.getUserImageUrl(user.Id, {
@ -18,21 +16,17 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
type: "Primary"
});
}
var fldImage = page.querySelector("#fldImage");
fldImage.classList.remove("hide");
fldImage.innerHTML = "<img width='140px' src='" + imageUrl + "' />";
Dashboard.getCurrentUser().then(function (loggedInUser) {
if (appHost.supports("fileinput") && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
page.querySelector(".newImageForm").classList.remove("hide");
if (user.PrimaryImageTag) {
page.querySelector("#btnDeleteImage").classList.remove("hide");
} else {
page.querySelector("#btnDeleteImage").classList.add("hide");
}
} else {
page.querySelector(".newImageForm").classList.add("hide");
var userImage = page.querySelector("#image");
userImage.src = imageUrl;
Dashboard.getCurrentUser().then(function (loggedInUser) {
if (user.PrimaryImageTag) {
page.querySelector("#btnAddImage").classList.add("hide");
page.querySelector("#btnDeleteImage").classList.remove("hide");
} else if (appHost.supports("fileinput") && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
page.querySelector("#btnDeleteImage").classList.add("hide");
page.querySelector("#btnAddImage").classList.remove("hide");
}
});
loading.hide();
@ -47,13 +41,10 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
toast(Globalize.translate("FileNotFound"));
});
break;
case evt.target.error.NOT_READABLE_ERR:
require(["toast"], function (toast) {
toast(Globalize.translate("FileReadError"));
});
break;
case evt.target.error.ABORT_ERR:
onFileReaderAbort();
break;
case evt.target.error.NOT_READABLE_ERR:
default:
require(["toast"], function (toast) {
toast(Globalize.translate("FileReadError"));
@ -63,51 +54,37 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
function onFileReaderAbort(evt) {
loading.hide();
require(["toast"], function (toast) {
toast(Globalize.translate("FileReadCancelled"));
});
}
function setFiles(page, files) {
var userImage = page.querySelector("#image");
var file = files[0];
if (!file || !file.type.match("image.*")) {
page.querySelector("#userImageOutput").innerHTML = "";
page.querySelector("#fldUpload").classList.add("hide");
return void (currentFile = null);
return false;
}
currentFile = file;
var reader = new FileReader();
reader.onerror = onFileReaderError;
reader.onloadstart = function () {
page.querySelector("#fldUpload").classList.add("hide");
};
reader.onabort = onFileReaderAbort;
reader.onload = function (evt) {
var html = ['<img style="max-width:100%;max-height:100%;" src="', evt.target.result, '" title="', escape(file.name), '"/>'].join("");
page.querySelector("#userImageOutput").innerHTML = html;
page.querySelector("#fldUpload").classList.remove("hide");
userImage.src = evt.target.result;
var userId = getParameterByName("userId");
ApiClient.uploadUserImage(userId, "Primary", file).then(function () {
loading.hide();
reloadUser(page);
});
};
reader.readAsDataURL(file);
}
function onImageDragOver(evt) {
evt.preventDefault();
evt.originalEvent.dataTransfer.dropEffect = "Copy";
return false;
}
var currentFile;
return function (view, params) {
reloadUser(view);
new Userpasswordpage(view, params);
view.querySelector("#userImageDropZone").addEventListener("dragOver", onImageDragOver);
new UserPasswordPage(view, params);
view.querySelector("#btnDeleteImage").addEventListener("click", function () {
require(["confirm"], function (confirm) {
confirm(Globalize.translate("DeleteImageConfirmation"), Globalize.translate("DeleteImage")).then(function () {
@ -120,25 +97,10 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
});
});
});
view.querySelector(".btnBrowse").addEventListener("click", function () {
view.querySelector("#uploadUserImage").click();
view.querySelector("#btnAddImage").addEventListener("click", function (evt) {
view.querySelector("#uploadImage").click();
});
view.querySelector(".newImageForm").addEventListener("submit", function (evt) {
var file = currentFile;
if (!file || "image/png" != file.type && "image/jpeg" != file.type && "image/jpeg" != file.type) {
return false;
}
loading.show();
var userId = getParameterByName("userId");
ApiClient.uploadUserImage(userId, "Primary", file).then(function () {
loading.hide();
reloadUser(view);
});
evt.preventDefault();
return false;
});
view.querySelector("#uploadUserImage").addEventListener("change", function (evt) {
view.querySelector("#uploadImage").addEventListener("change", function (evt) {
setFiles(view, evt.target.files);
});
};