Initial jellyfin-multilang rewrite
This commit is contained in:
ajp_anton
@@ -0,0 +1,443 @@
|
||||
(() => {
|
||||
const BASE_PATH = window.location.pathname.split("/web/")[0] || "";
|
||||
const MENU_ID = "mlUserRulesMenuItem";
|
||||
const USER_RULES_ROUTE = "multilang/user-rules";
|
||||
let lastMenuItemId = "";
|
||||
let userRulesRenderRun = 0;
|
||||
|
||||
function getClientToken() {
|
||||
try {
|
||||
return window.ApiClient?.accessToken?.() || "";
|
||||
} catch (_) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function hashParts() {
|
||||
const raw = (location.hash || "").replace(/^#\/?/, "");
|
||||
const queryIndex = raw.indexOf("?");
|
||||
const path = (queryIndex >= 0 ? raw.slice(0, queryIndex) : raw).toLowerCase();
|
||||
const query = queryIndex >= 0 ? raw.slice(queryIndex + 1) : "";
|
||||
return { path, params: new URLSearchParams(query) };
|
||||
}
|
||||
|
||||
function getCurrentUserId() {
|
||||
const fromHash = hashParts().params.get("userId");
|
||||
if (fromHash) return fromHash;
|
||||
try {
|
||||
return window.ApiClient?.getCurrentUserId?.() || "";
|
||||
} catch (_) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function userRulesHref() {
|
||||
const params = new URLSearchParams();
|
||||
const userId = getCurrentUserId();
|
||||
if (userId) params.set("userId", userId);
|
||||
params.set("multilang", "1");
|
||||
return `${BASE_PATH}/web/#/${USER_RULES_ROUTE}?${params.toString()}`;
|
||||
}
|
||||
|
||||
function isUserRulesRoute() {
|
||||
const parts = hashParts();
|
||||
return parts.path === USER_RULES_ROUTE && parts.params.get("multilang") === "1";
|
||||
}
|
||||
|
||||
function pathSegments(pathname) {
|
||||
return String(pathname || "")
|
||||
.toLowerCase()
|
||||
.split("/")
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function looksLikeItemId(value) {
|
||||
return /^[0-9a-f]{32}$/.test(value) || /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(value);
|
||||
}
|
||||
|
||||
function isUserItemsEndpoint(segments) {
|
||||
const usersIndex = segments.lastIndexOf("users");
|
||||
if (usersIndex < 0 || segments[usersIndex + 2] !== "items") return false;
|
||||
|
||||
const tail = segments.slice(usersIndex + 3);
|
||||
if (tail.length === 0) return true;
|
||||
if (tail.length !== 1) return false;
|
||||
return looksLikeItemId(tail[0]) || tail[0] === "latest" || tail[0] === "resume" || tail[0] === "nextup";
|
||||
}
|
||||
|
||||
function isRootItemsEndpoint(segments) {
|
||||
const itemsIndex = segments.lastIndexOf("items");
|
||||
if (itemsIndex < 0) return false;
|
||||
|
||||
const tail = segments.slice(itemsIndex + 1);
|
||||
if (tail.length === 0) return true;
|
||||
if (tail.length !== 1) return false;
|
||||
return looksLikeItemId(tail[0]) || tail[0] === "latest" || tail[0] === "resume" || tail[0] === "nextup";
|
||||
}
|
||||
|
||||
function isShowsListEndpoint(segments) {
|
||||
const showsIndex = segments.lastIndexOf("shows");
|
||||
if (showsIndex < 0) return false;
|
||||
|
||||
const tail = segments.slice(showsIndex + 1);
|
||||
if (tail.length === 1) return tail[0] === "nextup";
|
||||
if (tail.length === 2 && looksLikeItemId(tail[0])) return tail[1] === "episodes" || tail[1] === "seasons";
|
||||
return false;
|
||||
}
|
||||
|
||||
function isGenresEndpoint(segments) {
|
||||
const genresIndex = segments.lastIndexOf("genres");
|
||||
if (genresIndex < 0) return false;
|
||||
|
||||
const tail = segments.slice(genresIndex + 1);
|
||||
return tail.length === 0 || (tail.length === 1 && looksLikeItemId(tail[0]));
|
||||
}
|
||||
|
||||
function shouldProxyEndpoint(pathname) {
|
||||
const segments = pathSegments(pathname);
|
||||
return isUserItemsEndpoint(segments) ||
|
||||
isRootItemsEndpoint(segments) ||
|
||||
isShowsListEndpoint(segments) ||
|
||||
isGenresEndpoint(segments);
|
||||
}
|
||||
|
||||
function getItemsProxyUrl(urlInput) {
|
||||
const url = urlInput instanceof Request ? urlInput.url : String(urlInput || "");
|
||||
if (!url) return null;
|
||||
const u = new URL(url, window.location.origin);
|
||||
if (u.origin !== window.location.origin) return null;
|
||||
const lower = u.pathname.toLowerCase();
|
||||
if (lower.includes("/multilang/")) return null;
|
||||
if (lower.includes("/images/") || lower.endsWith("/images")) return null;
|
||||
if (!shouldProxyEndpoint(u.pathname)) return null;
|
||||
|
||||
const locale = document.documentElement?.lang?.trim() || navigator.language || "";
|
||||
const token = getClientToken();
|
||||
const tokenParam = token ? `&token=${encodeURIComponent(token)}` : "";
|
||||
const localeParam = locale ? `&mlLocale=${encodeURIComponent(locale)}` : "";
|
||||
return `${BASE_PATH}/Multilang/ItemsProxy?url=${encodeURIComponent(`${u.pathname}${u.search}`)}${localeParam}${tokenParam}`;
|
||||
}
|
||||
|
||||
function ensureUserRulesLink() {
|
||||
let menuItem = document.getElementById(MENU_ID);
|
||||
if (!(location.hash || "").toLowerCase().includes("mypreferences")) {
|
||||
menuItem?.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
const href = userRulesHref();
|
||||
if (menuItem) {
|
||||
menuItem.href = href;
|
||||
wireUserRulesLink(menuItem);
|
||||
return;
|
||||
}
|
||||
|
||||
const links = [...document.querySelectorAll('a[href^="#/mypreferences"]')];
|
||||
const insertAfter = links[links.length - 1];
|
||||
if (!insertAfter) return;
|
||||
|
||||
const cloned = insertAfter.cloneNode(true);
|
||||
cloned.id = MENU_ID;
|
||||
cloned.dataset.mlUserRulesLink = "1";
|
||||
cloned.href = href;
|
||||
cloned.removeAttribute("title");
|
||||
cloned.removeAttribute("aria-label");
|
||||
[...cloned.classList]
|
||||
.filter((c) => c.startsWith("lnk"))
|
||||
.forEach((c) => cloned.classList.remove(c));
|
||||
const textEl = cloned.querySelector(".listItemBodyText");
|
||||
if (textEl) textEl.textContent = "Metadata language rules";
|
||||
cloned.querySelectorAll(".material-icons").forEach((el) => el.remove());
|
||||
const iconEl = document.createElement("span");
|
||||
iconEl.className = "material-icons listItemIcon listItemIcon-transparent translate";
|
||||
iconEl.setAttribute("aria-hidden", "true");
|
||||
(cloned.querySelector(".listItemBody") || cloned).before(iconEl);
|
||||
wireUserRulesLink(cloned);
|
||||
insertAfter.parentElement.insertBefore(cloned, insertAfter.nextSibling);
|
||||
}
|
||||
|
||||
function wireUserRulesLink(link) {
|
||||
if (link.dataset.mlUserRulesClick === "1") return;
|
||||
link.dataset.mlUserRulesClick = "1";
|
||||
link.addEventListener("click", (event) => {
|
||||
openUserRulesPage(event);
|
||||
}, true);
|
||||
}
|
||||
|
||||
function visiblePage() {
|
||||
const pages = [...document.querySelectorAll(".mainAnimatedPage, .page")];
|
||||
return pages.reverse().find((page) => {
|
||||
if (page.closest("#ml-user") || page.classList.contains("hide")) return false;
|
||||
const style = window.getComputedStyle(page);
|
||||
return style.display !== "none" && style.visibility !== "hidden";
|
||||
});
|
||||
}
|
||||
|
||||
function userRulesHost() {
|
||||
return ensureUserRulesShell().querySelector("#ml-user-host");
|
||||
}
|
||||
|
||||
function ensureUserRulesShell() {
|
||||
let shell = document.getElementById("ml-user-shell");
|
||||
if (shell) {
|
||||
positionUserRulesShell(shell);
|
||||
shell.hidden = false;
|
||||
return shell;
|
||||
}
|
||||
|
||||
shell = document.createElement("div");
|
||||
shell.id = "ml-user-shell";
|
||||
shell.className = "mainAnimatedPage type-interior page";
|
||||
shell.style.position = "fixed";
|
||||
shell.style.left = "0";
|
||||
shell.style.right = "0";
|
||||
shell.style.bottom = "0";
|
||||
shell.style.zIndex = "100";
|
||||
shell.style.overflow = "auto";
|
||||
shell.style.background = "var(--theme-body-bg, var(--background-color, #101010))";
|
||||
shell.style.color = "inherit";
|
||||
|
||||
const host = document.createElement("div");
|
||||
host.id = "ml-user-host";
|
||||
host.className = "content-primary";
|
||||
shell.appendChild(host);
|
||||
document.body.appendChild(shell);
|
||||
positionUserRulesShell(shell);
|
||||
return shell;
|
||||
}
|
||||
|
||||
function positionUserRulesShell(shell) {
|
||||
const header = document.querySelector(".skinHeader, .headerTop, header");
|
||||
const top = header ? Math.max(0, Math.round(header.getBoundingClientRect().bottom)) : 0;
|
||||
shell.style.top = `${top}px`;
|
||||
}
|
||||
|
||||
function closeUserRulesShellIfInactive() {
|
||||
if (isUserRulesRoute()) return;
|
||||
document.getElementById("ml-user-shell")?.remove();
|
||||
}
|
||||
|
||||
function openUserRulesPage(event) {
|
||||
event?.preventDefault?.();
|
||||
event?.stopPropagation?.();
|
||||
event?.stopImmediatePropagation?.();
|
||||
history.pushState({}, "", userRulesHref());
|
||||
scheduleUserRulesPageRender();
|
||||
}
|
||||
|
||||
function handleUserRulesClick(event) {
|
||||
const link = event.target?.closest?.(`#${MENU_ID}, [data-ml-user-rules-link='1'], a[href*="multilang=1"]`);
|
||||
if (!link) return;
|
||||
openUserRulesPage(event);
|
||||
}
|
||||
|
||||
function executeScript(script) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const next = document.createElement("script");
|
||||
[...script.attributes].forEach((attr) => next.setAttribute(attr.name, attr.value));
|
||||
if (script.src) {
|
||||
next.onload = () => resolve();
|
||||
next.onerror = () => reject(new Error(`Failed to load ${script.src}`));
|
||||
next.src = script.src;
|
||||
} else {
|
||||
next.text = script.textContent || "";
|
||||
}
|
||||
document.body.appendChild(next);
|
||||
if (!script.src) resolve();
|
||||
});
|
||||
}
|
||||
|
||||
async function renderUserRulesPage(run) {
|
||||
if (!isUserRulesRoute() || run !== userRulesRenderRun) return;
|
||||
|
||||
const host = userRulesHost();
|
||||
if (!host) return;
|
||||
if (host.dataset.mlUserRulesRendered === "1" && document.getElementById("ml-user")) return;
|
||||
|
||||
host.dataset.mlUserRulesRendered = "1";
|
||||
host.innerHTML = "<div class=\"fieldDescription\">Loading Multilang settings...</div>";
|
||||
|
||||
const response = await fetch(`${BASE_PATH}/web/configurationpage?name=MultilangUser`, { cache: "no-store" });
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
|
||||
const fragment = await response.text();
|
||||
if (run !== userRulesRenderRun || !isUserRulesRoute()) return;
|
||||
|
||||
const parsed = new DOMParser().parseFromString(fragment, "text/html");
|
||||
const sourcePage = parsed.getElementById("ml-user");
|
||||
const sourceContent = sourcePage?.querySelector?.(".content-primary");
|
||||
if (!sourceContent) throw new Error("Multilang user page fragment missing");
|
||||
|
||||
const scripts = [...sourceContent.querySelectorAll("script")];
|
||||
scripts.forEach((script) => script.remove());
|
||||
|
||||
const page = document.createElement("div");
|
||||
page.id = "ml-user";
|
||||
page.className = "ml-root";
|
||||
while (sourceContent.firstChild) page.appendChild(sourceContent.firstChild);
|
||||
host.replaceChildren(page);
|
||||
|
||||
for (const script of scripts) {
|
||||
if (run !== userRulesRenderRun || !isUserRulesRoute()) return;
|
||||
await executeScript(script);
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleUserRulesPageRender() {
|
||||
userRulesRenderRun++;
|
||||
if (!isUserRulesRoute()) {
|
||||
closeUserRulesShellIfInactive();
|
||||
return;
|
||||
}
|
||||
|
||||
const run = userRulesRenderRun;
|
||||
[0, 100, 350].forEach((delay) => {
|
||||
setTimeout(() => {
|
||||
renderUserRulesPage(run).catch((err) => console.error("[Multilang] failed to render user rules page", err));
|
||||
}, delay);
|
||||
});
|
||||
}
|
||||
|
||||
function captureLastItemId(target) {
|
||||
const el = target?.closest?.("[data-id]");
|
||||
const id = (el?.getAttribute("data-id") || "").match(/[0-9a-f]{32}/i)?.[0];
|
||||
if (id) lastMenuItemId = id;
|
||||
}
|
||||
|
||||
function collectDialogItemIds(form) {
|
||||
const scan = (value) => String(value || "").match(/[0-9a-f]{32}/ig) || [];
|
||||
return [...new Set([...scan(form?.querySelector?.(".fldSelectedItemIds")?.value), ...scan(lastMenuItemId), ...scan(location.hash)])];
|
||||
}
|
||||
|
||||
function refreshItems(itemIds) {
|
||||
const token = getClientToken();
|
||||
const headers = token ? { "X-Emby-Token": token, "X-MediaBrowser-Token": token } : {};
|
||||
itemIds.forEach((itemId) => {
|
||||
fetch(`${BASE_PATH}/Multilang/RefreshItem/${itemId}?includeChildren=true${token ? `&token=${encodeURIComponent(token)}` : ""}`, { method: "POST", headers });
|
||||
});
|
||||
}
|
||||
|
||||
function openDebugItem(itemIds) {
|
||||
const itemId = itemIds[0];
|
||||
if (!itemId) return;
|
||||
const token = getClientToken();
|
||||
const tokenParam = token ? `?token=${encodeURIComponent(token)}` : "";
|
||||
window.open(`${BASE_PATH}/Multilang/DebugUi/${encodeURIComponent(itemId)}${tokenParam}`, "_blank", "noopener");
|
||||
}
|
||||
|
||||
function ensureRefreshDialogOption(root) {
|
||||
const container = root?.closest?.(".formDialog") || root?.querySelector?.(".formDialog");
|
||||
const title = container?.querySelector?.(".formDialogHeaderTitle");
|
||||
const select = container?.querySelector?.("#selectMetadataRefreshMode");
|
||||
if (!container || !title || !/refresh metadata/i.test(title.textContent || "") || !select || select.querySelector("option[value='multilang']")) return;
|
||||
|
||||
const option = document.createElement("option");
|
||||
option.value = "multilang";
|
||||
option.textContent = "Refresh Multilang metadata";
|
||||
select.appendChild(option);
|
||||
|
||||
if (!container.querySelector("[data-ml-debug-item]")) {
|
||||
const debugButton = document.createElement("button");
|
||||
debugButton.type = "button";
|
||||
debugButton.className = "raised button-submit emby-button";
|
||||
debugButton.dataset.mlDebugItem = "1";
|
||||
debugButton.textContent = "Debug Multilang";
|
||||
debugButton.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
openDebugItem(collectDialogItemIds(container));
|
||||
}, true);
|
||||
(select.closest(".inputContainer") || select.parentElement || container).appendChild(debugButton);
|
||||
}
|
||||
|
||||
const form = container.querySelector("form");
|
||||
if (!form || form.dataset.mlHooked === "1") return;
|
||||
form.dataset.mlHooked = "1";
|
||||
form.addEventListener("submit", (event) => {
|
||||
if (select.value !== "multilang") return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.stopImmediatePropagation();
|
||||
refreshItems(collectDialogItemIds(form));
|
||||
(container.closest(".dialogContainer") || container).remove();
|
||||
document.querySelectorAll(".dialogBackdrop,.dialog-overlay,.dialog-backdrop").forEach((el) => el.remove());
|
||||
}, true);
|
||||
}
|
||||
|
||||
function mlUrlFromImageUrl(rawUrl) {
|
||||
const urlText = String(rawUrl || "").replace(/&/gi, "&");
|
||||
if (!/tag=ml(?::|%3a|%253a)/i.test(urlText)) return "";
|
||||
const u = new URL(urlText, window.location.origin);
|
||||
const tag = u.searchParams.get("tag") || "";
|
||||
if (!tag.startsWith("ml:")) return "";
|
||||
let url = decodeURIComponent(tag.slice(3)).trim();
|
||||
if (!url) return "";
|
||||
if (!url.startsWith("http://") && !url.startsWith("https://")) {
|
||||
if (!url.startsWith("/")) url = "/" + url;
|
||||
if (BASE_PATH && !url.toLowerCase().startsWith(BASE_PATH.toLowerCase() + "/")) url = BASE_PATH + url;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
function rewriteElementImages(el) {
|
||||
if (!el || el.nodeType !== 1) return;
|
||||
["src", "data-src"].forEach((attr) => {
|
||||
const current = el.getAttribute(attr);
|
||||
const next = mlUrlFromImageUrl(current);
|
||||
if (next) el.setAttribute(attr, next);
|
||||
});
|
||||
const style = el.getAttribute("style");
|
||||
if (style) {
|
||||
const next = style.replace(/url\((['"]?)([^'")]+)\1\)/g, (match, quote, url) => {
|
||||
const ml = mlUrlFromImageUrl(url);
|
||||
return ml ? `url("${ml}")` : match;
|
||||
});
|
||||
if (next !== style) el.setAttribute("style", next);
|
||||
}
|
||||
}
|
||||
|
||||
function scanNode(node) {
|
||||
if (!node || node.nodeType !== 1) return;
|
||||
rewriteElementImages(node);
|
||||
node.querySelectorAll("[style],[src],[data-src]").forEach(rewriteElementImages);
|
||||
ensureRefreshDialogOption(node);
|
||||
}
|
||||
|
||||
const originalFetch = window.fetch.bind(window);
|
||||
window.fetch = function (input, init) {
|
||||
const method = (init && init.method) || (input instanceof Request ? input.method : "GET");
|
||||
if (String(method).toUpperCase() !== "GET") return originalFetch(input, init);
|
||||
const proxyUrl = getItemsProxyUrl(input);
|
||||
if (!proxyUrl) return originalFetch(input, init);
|
||||
if (input instanceof Request) return originalFetch(new Request(proxyUrl, input));
|
||||
return originalFetch(proxyUrl, init);
|
||||
};
|
||||
|
||||
const originalXhrOpen = XMLHttpRequest.prototype.open;
|
||||
XMLHttpRequest.prototype.open = function (method, url) {
|
||||
const proxyUrl = typeof method === "string" && method.toUpperCase() === "GET" ? getItemsProxyUrl(url) : null;
|
||||
return proxyUrl ? originalXhrOpen.call(this, method, proxyUrl, arguments[2], arguments[3], arguments[4]) : originalXhrOpen.apply(this, arguments);
|
||||
};
|
||||
|
||||
const observer = new MutationObserver((mutations) => mutations.forEach((m) => {
|
||||
if (m.type === "childList") m.addedNodes.forEach(scanNode);
|
||||
if (m.type === "attributes") rewriteElementImages(m.target);
|
||||
}));
|
||||
observer.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["style", "src", "data-src"] });
|
||||
|
||||
document.addEventListener("pointerdown", (event) => captureLastItemId(event.target));
|
||||
document.addEventListener("click", handleUserRulesClick, true);
|
||||
document.addEventListener("viewshow", () => requestAnimationFrame(() => {
|
||||
ensureUserRulesLink();
|
||||
scheduleUserRulesPageRender();
|
||||
}));
|
||||
window.addEventListener("hashchange", () => requestAnimationFrame(() => {
|
||||
ensureUserRulesLink();
|
||||
scheduleUserRulesPageRender();
|
||||
}));
|
||||
requestAnimationFrame(() => {
|
||||
scanNode(document.documentElement);
|
||||
ensureUserRulesLink();
|
||||
scheduleUserRulesPageRender();
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user