mirror of
https://github.com/ranaldsgift/KefinTweaks.git
synced 2026-11-05 07:42:47 +01:00
3332 lines
122 KiB
JavaScript
3332 lines
122 KiB
JavaScript
// KefinTweaks Utilities
|
||
// Provides standardized functionality for hooking into Emby.Page.onViewShow
|
||
// while maintaining original Jellyfin functionality
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
// Common logging function
|
||
const LOG = (...args) => console.log('[KefinTweaks Utils]', ...args);
|
||
const WARN = (...args) => console.warn('[KefinTweaks Utils]', ...args);
|
||
const ERR = (...args) => console.error('[KefinTweaks Utils]', ...args);
|
||
|
||
LOG('Initializing');
|
||
|
||
// Store the original onViewShow function
|
||
let originalOnViewShow = null;
|
||
const state = {
|
||
previousHash: null,
|
||
previousHref: null,
|
||
hookAttempts: 0,
|
||
maxHookAttempts: 60,
|
||
historyBridgeInstalled: false,
|
||
embyViewHookInstalled: false,
|
||
}
|
||
|
||
/**
|
||
* Notify onViewPage handlers (shared by Emby onViewShow + History bridge).
|
||
* No cross-source dedupe: history and Emby each always invoke handlers for the same
|
||
* navigation. Handlers may run 2–3 times (pushState/hashchange/onViewShow), sometimes
|
||
* before the new page DOM is visible; they must be idempotent. On a repeat call for the
|
||
* same URL, previousHash often equals the current hash.
|
||
*/
|
||
function notifyViewChange(view, element) {
|
||
const hash = window.location.hash;
|
||
const href = window.location.href;
|
||
const previousHash = state.previousHash;
|
||
notifyHandlers(view ?? getCurrentView(), element || document, hash, previousHash);
|
||
state.previousHash = hash;
|
||
state.previousHref = href;
|
||
}
|
||
|
||
function installHistoryViewBridge() {
|
||
if (state.historyBridgeInstalled) return;
|
||
state.historyBridgeInstalled = true;
|
||
|
||
const fire = () => {
|
||
notifyViewChange(getCurrentView(), document);
|
||
};
|
||
|
||
const wrap = (method) => {
|
||
const orig = history[method];
|
||
if (typeof orig !== 'function' || orig.__kefinViewBridge) return;
|
||
function wrapped(...args) {
|
||
const ret = orig.apply(this, args);
|
||
queueMicrotask(fire);
|
||
return ret;
|
||
}
|
||
wrapped.__kefinViewBridge = true;
|
||
history[method] = wrapped;
|
||
};
|
||
|
||
wrap('pushState');
|
||
wrap('replaceState');
|
||
window.addEventListener('popstate', fire);
|
||
window.addEventListener('hashchange', fire);
|
||
LOG('Installed History API view bridge (pushState/replaceState/popstate/hashchange)');
|
||
}
|
||
|
||
// Initialize the utils by hooking into Emby.Page.onViewShow
|
||
async function initialize() {
|
||
installHistoryViewBridge();
|
||
|
||
// Store the original onViewShow if it exists
|
||
if (window.Emby && window.Emby.Page && window.Emby.Page.onViewShow && !state.embyViewHookInstalled) {
|
||
originalOnViewShow = window.Emby.Page.onViewShow;
|
||
LOG('Stored original Emby.Page.onViewShow');
|
||
|
||
window.Emby.Page.onViewShow = function (...args) {
|
||
if (originalOnViewShow) {
|
||
try {
|
||
originalOnViewShow.apply(this, args);
|
||
} catch (err) {
|
||
ERR('Error in original onViewShow handler:', err);
|
||
}
|
||
}
|
||
|
||
const view = getCurrentView() ?? args[0];
|
||
notifyViewChange(view, args[1]);
|
||
};
|
||
state.embyViewHookInstalled = true;
|
||
LOG('Hooked into Emby.Page.onViewShow');
|
||
} else if (!window.Emby || !window.Emby.Page) {
|
||
WARN('Emby.Page.onViewShow not found - using History bridge; retrying Emby hook');
|
||
state.hookAttempts++;
|
||
if (state.hookAttempts < state.maxHookAttempts) {
|
||
setTimeout(initialize, 1000);
|
||
} else {
|
||
WARN('Failed to hook into Emby.Page.onViewShow after ' + state.maxHookAttempts + ' attempts');
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Build MediaBrowser Authorization header
|
||
* @returns {string} - Authorization header
|
||
*/
|
||
function getAuthHeader() {
|
||
const token = ApiClient.accessToken();
|
||
const client = typeof ApiClient.applicationName === 'function' ? ApiClient.applicationName() : 'Jellyfin Web';
|
||
const device = typeof ApiClient.deviceName === 'function' ? ApiClient.deviceName() : (navigator.userAgent.includes('Chrome') ? 'Chrome' : 'Browser');
|
||
const deviceId = typeof ApiClient.deviceId === 'function' ? ApiClient.deviceId() : '';
|
||
const version = ApiClient._appVersion || ApiClient._serverVersion || '';
|
||
const parts = [
|
||
`Client="${encodeURIComponent(client)}"`,
|
||
`Device="${encodeURIComponent(device)}"`,
|
||
`DeviceId="${encodeURIComponent(deviceId)}"`,
|
||
`Version="${encodeURIComponent(version)}"`,
|
||
`Token="${encodeURIComponent(token)}"`
|
||
];
|
||
return `MediaBrowser ${parts.join(', ')}`;
|
||
}
|
||
|
||
// Array to store registered handlers
|
||
const handlers = [];
|
||
|
||
// Cache item per page view to avoid multiple fetches
|
||
let cachedItem = null;
|
||
let cachedItemId = null;
|
||
let fetchInProgress = null; // Track the promise of an in-progress fetch
|
||
let fetchItemId = null; // Track which item ID is currently being fetched
|
||
|
||
/**
|
||
* Register a callback to be called when page view changes
|
||
* @param {Function} callback - Function to call when page view changes
|
||
* @param {Object} options - Options for the handler
|
||
*/
|
||
function onViewPage(callback, options = {}) {
|
||
if (typeof callback !== 'function') {
|
||
ERR('Callback must be a function');
|
||
return;
|
||
}
|
||
|
||
const handlerConfig = {
|
||
callback,
|
||
options: {
|
||
pages: [], // Specific pages to watch (empty = all pages)
|
||
...options
|
||
}
|
||
};
|
||
|
||
handlers.push(handlerConfig);
|
||
LOG(`Registered onViewPage handler (total: ${handlers.length})`);
|
||
|
||
// Test if this is causing issues
|
||
const currentView = getCurrentView();
|
||
if (currentView && shouldCallHandler(handlerConfig, currentView)) {
|
||
try {
|
||
// Pass the promise (not awaited) for consistency with notifyHandlers
|
||
const itemPromise = getCurrentItem();
|
||
callback(currentView, document, window.location.hash, itemPromise);
|
||
} catch (err) {
|
||
ERR('Error in immediate handler call:', err);
|
||
}
|
||
}
|
||
|
||
// Return a function to unregister this handler
|
||
return () => {
|
||
const index = handlers.indexOf(handlerConfig);
|
||
if (index !== -1) {
|
||
handlers.splice(index, 1);
|
||
LOG(`Unregistered onViewPage handler (remaining: ${handlers.length})`);
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* Get item ID from URL parameters
|
||
* Works with both hash-based routing and traditional query strings
|
||
* @returns {string|null} Item ID or null if not found
|
||
*/
|
||
function getItemIdFromUrl() {
|
||
try {
|
||
const match = window.location.href.match(/[\?&]id=([^&]+)/);
|
||
return match ? match[1] : null;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Fetch item by ID
|
||
* @param {string} itemId - The item ID
|
||
* @returns {Promise<Object|null>} The item object or null if not found
|
||
*/
|
||
async function fetchItemById(itemId) {
|
||
if (!itemId || !window.ApiClient || !window.ApiClient.getItem || !window.ApiClient.getCurrentUserId || !window.ApiClient._loggedIn) {
|
||
return null;
|
||
}
|
||
|
||
try {
|
||
const userId = window.ApiClient.getCurrentUserId();
|
||
const item = await window.ApiClient.getItem(userId, itemId);
|
||
return item;
|
||
} catch (error) {
|
||
WARN('Error fetching item:', error);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Get current item from URL, using cache if available
|
||
* @returns {Promise<Object|null>} The item object or null if not found
|
||
*/
|
||
async function getCurrentItem() {
|
||
const itemId = getItemIdFromUrl();
|
||
|
||
// If no item ID, return null
|
||
if (!itemId) {
|
||
return null;
|
||
}
|
||
|
||
// If we have a cached item for this ID, return it
|
||
if (cachedItem && cachedItemId === itemId) {
|
||
return cachedItem;
|
||
}
|
||
|
||
// If a fetch is already in progress for this item, wait for it
|
||
if (fetchInProgress && fetchItemId === itemId) {
|
||
LOG('Fetch already in progress for this item, waiting for it to complete');
|
||
return await fetchInProgress;
|
||
}
|
||
|
||
// Start a new fetch and store the promise
|
||
fetchItemId = itemId;
|
||
fetchInProgress = (async () => {
|
||
try {
|
||
LOG('Fetching item:', itemId);
|
||
const item = await fetchItemById(itemId);
|
||
cachedItem = item;
|
||
cachedItemId = itemId;
|
||
return item;
|
||
} finally {
|
||
// Clear the in-progress flag when done (only if still for this item)
|
||
if (fetchItemId === itemId) {
|
||
fetchInProgress = null;
|
||
fetchItemId = null;
|
||
}
|
||
}
|
||
})();
|
||
|
||
LOG('Fetch in progress for item:', itemId);
|
||
return await fetchInProgress;
|
||
}
|
||
|
||
/**
|
||
* Notify all registered handlers of a view change
|
||
* @param {string} view - The view name
|
||
* @param {Element} element - The view element
|
||
*/
|
||
function notifyHandlers(view, element, hash, previousHash) {
|
||
// Clear cache when view changes to ensure fresh data
|
||
const currentItemId = getItemIdFromUrl();
|
||
if (cachedItemId !== currentItemId) {
|
||
LOG('Clearing cache for new item:', currentItemId);
|
||
cachedItem = null;
|
||
cachedItemId = null;
|
||
fetchInProgress = null; // Clear any in-progress fetch for previous item
|
||
fetchItemId = null;
|
||
}
|
||
|
||
// Get the item promise once - will be shared across all handlers
|
||
// The promise is cached/fetched by getCurrentItem(), ensuring only one API call
|
||
const itemPromise = getCurrentItem();
|
||
|
||
handlers.forEach((config) => {
|
||
if (shouldCallHandler(config, view)) {
|
||
try {
|
||
// Pass the promise as third parameter - handlers can await if needed
|
||
config.callback(view, element, hash, itemPromise, previousHash);
|
||
} catch (err) {
|
||
ERR('Error in onViewPage handler:', err);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Check if a handler should be called for a given view
|
||
* @param {Object} config - Handler configuration
|
||
* @param {string} view - The view name
|
||
* @returns {boolean} Whether the handler should be called
|
||
*/
|
||
function shouldCallHandler(config, view) {
|
||
const { pages, triggerOnSameHash = true } = config.options;
|
||
|
||
if (state.previousHash === window.location.hash && !triggerOnSameHash) {
|
||
return false;
|
||
}
|
||
|
||
// If no specific pages are specified, call for all pages
|
||
if (pages.length === 0) return true;
|
||
|
||
// Get current URL hash to determine actual page
|
||
const currentUrl = window.location.hash;
|
||
|
||
// Check if the current URL matches any of the specified pages
|
||
return pages.some(page => {
|
||
if (typeof page === 'string') {
|
||
// Check if URL hash contains the page pattern
|
||
return currentUrl.includes(`/${page}.html`) || currentUrl.includes(`/${page}`) || currentUrl.includes(page);
|
||
} else if (page instanceof RegExp) {
|
||
return page.test(currentUrl);
|
||
}
|
||
return false;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Get the current view name
|
||
* @returns {string|null} Current view name or null if not available
|
||
*/
|
||
function getCurrentView() {
|
||
const hash = window.location.hash;
|
||
if (hash) {
|
||
// Extract page name from hash - match part after #/ and before ? or /
|
||
// This handles both .html pages (old) and pages without .html (Jellyfin 10.11+)
|
||
const pageMatch = hash.match(/#\/([^\/\?]+)/);
|
||
if (pageMatch) {
|
||
return pageMatch[1];
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* Get the number of registered handlers
|
||
* @returns {number} Number of registered handlers
|
||
*/
|
||
function getHandlerCount() {
|
||
return handlers.length;
|
||
}
|
||
|
||
/**
|
||
* Clear all handlers
|
||
*/
|
||
function clearHandlers() {
|
||
handlers.length = 0;
|
||
LOG('Cleared all onViewPage handlers');
|
||
}
|
||
|
||
// Initialize when DOM is ready
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initialize);
|
||
} else {
|
||
initialize();
|
||
}
|
||
|
||
// ----- Custom menu links (placements: side / top main|right / userMenu) -----
|
||
const customMenuLinkRegistry = [];
|
||
let customMenuLinkObserver = null;
|
||
let customMenuLinkReapplyDepth = 0;
|
||
const FAVORITES_HREF = '#/home?tab=1';
|
||
const DEFAULT_CUSTOM_MENU_SELECTOR = '.customMenuOptions';
|
||
const ADMIN_MENU_SELECTOR = '.adminMenuOptions';
|
||
const USER_MENU_SELECTOR = '.userMenuOptions';
|
||
const KEFIN_CUSTOM_MENU_OWNED_SEL = [
|
||
'[data-kefin-custom-menu-link]',
|
||
'[data-kefin-custom-menu-top-link]',
|
||
'[data-kefin-custom-menu-top-right]',
|
||
'[data-kefin-custom-menu-more]',
|
||
'[data-kefin-custom-overflow-menu]',
|
||
'.kefin-custom-menu-top-divider'
|
||
].join(', ');
|
||
|
||
function withCustomMenuReapplySuppressed(fn) {
|
||
customMenuLinkReapplyDepth += 1;
|
||
try {
|
||
return fn();
|
||
} finally {
|
||
customMenuLinkReapplyDepth -= 1;
|
||
}
|
||
}
|
||
|
||
function findByDataAttr(root, attr, value) {
|
||
if (!root) return null;
|
||
return Array.from(root.querySelectorAll(`[${attr}]`)).find(
|
||
(el) => el.getAttribute(attr) === value
|
||
) || null;
|
||
}
|
||
|
||
function customMenuLinkKey(name, url, action) {
|
||
const n = String(name || '').trim();
|
||
const u = String(url || '').trim();
|
||
if (u) return `${n}||${u}`;
|
||
const a = String(action || '').trim();
|
||
return `${n}||action:${a}`;
|
||
}
|
||
|
||
function entryKey(entry) {
|
||
return customMenuLinkKey(entry?.name, entry?.url, entry?.action);
|
||
}
|
||
|
||
function normalizeTopNavigation(value) {
|
||
const v = String(value || 'none').toLowerCase().trim();
|
||
if (v === 'main' || v === 'right') return v;
|
||
return 'none';
|
||
}
|
||
|
||
function parseVersionParts(version) {
|
||
return String(version || '')
|
||
.split(/[.+-]/)
|
||
.filter(Boolean)
|
||
.map((p) => {
|
||
const n = parseInt(p, 10);
|
||
return Number.isFinite(n) ? n : 0;
|
||
});
|
||
}
|
||
|
||
function isJellyfinWebAtLeast12() {
|
||
const version = window.ApiClient?._appVersion;
|
||
if (version) {
|
||
const parts = parseVersionParts(version);
|
||
const major = parts[0] ?? 0;
|
||
return major >= 12;
|
||
}
|
||
return !!(
|
||
document.querySelector('.MuiDrawer-paper')
|
||
|| document.getElementById('app-user-menu')
|
||
|| document.querySelector(`.MuiStack-root a[href="${FAVORITES_HREF}"]`)
|
||
);
|
||
}
|
||
|
||
function resolveWindowAction(path) {
|
||
const parts = String(path || '').split('.').filter(Boolean);
|
||
let cur = window;
|
||
for (const part of parts) {
|
||
if (cur == null) return null;
|
||
cur = cur[part];
|
||
}
|
||
return typeof cur === 'function' ? cur : null;
|
||
}
|
||
|
||
function getCustomMenuLinkHref(entry) {
|
||
if (entry?.action && String(entry.action).trim()) return '#';
|
||
return String(entry?.url || '').trim() || '#';
|
||
}
|
||
|
||
function bindCustomMenuLinkActivation(el, entry) {
|
||
if (!el || el.__kefinCmlBound) return;
|
||
const actionPath = entry?.action && String(entry.action).trim();
|
||
if (!actionPath) return;
|
||
|
||
el.__kefinCmlBound = true;
|
||
el.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const fn = resolveWindowAction(actionPath);
|
||
if (!fn) {
|
||
WARN(`Custom menu link action not found or not a function: ${actionPath}`);
|
||
return;
|
||
}
|
||
try {
|
||
fn.call(null, e);
|
||
} catch (err) {
|
||
ERR(`Error running custom menu link action ${actionPath}:`, err);
|
||
}
|
||
});
|
||
}
|
||
|
||
function parseCustomMenuLinkOrder(value) {
|
||
if (value == null || value === '') return undefined;
|
||
const n = Number(value);
|
||
return Number.isFinite(n) ? n : undefined;
|
||
}
|
||
|
||
function parseCustomMenuLinkOptions(fifthArg) {
|
||
if (fifthArg && typeof fifthArg === 'object' && !Array.isArray(fifthArg)) {
|
||
const action = fifthArg.action != null ? String(fifthArg.action).trim() : '';
|
||
let containerSelector = DEFAULT_CUSTOM_MENU_SELECTOR;
|
||
|
||
if (fifthArg.containerSelector) {
|
||
containerSelector = fifthArg.containerSelector;
|
||
} else if (fifthArg.isAdminLink) {
|
||
containerSelector = ADMIN_MENU_SELECTOR;
|
||
} else if (fifthArg.isUserLink) {
|
||
containerSelector = USER_MENU_SELECTOR;
|
||
}
|
||
|
||
return {
|
||
containerSelector: containerSelector,
|
||
collapsed: !!fifthArg.collapsed,
|
||
sideMenu: fifthArg.sideMenu !== false,
|
||
topNavigation: normalizeTopNavigation(fifthArg.topNavigation),
|
||
userMenu: !!fifthArg.userMenu,
|
||
isAdminLink: !!fifthArg.isAdminLink,
|
||
isUserLink: !!fifthArg.isUserLink,
|
||
action: action || '',
|
||
order: parseCustomMenuLinkOrder(fifthArg.order)
|
||
};
|
||
}
|
||
|
||
return {
|
||
containerSelector: typeof fifthArg === 'string' ? fifthArg : DEFAULT_CUSTOM_MENU_SELECTOR,
|
||
collapsed: false,
|
||
sideMenu: true,
|
||
topNavigation: 'none',
|
||
userMenu: false,
|
||
isAdminLink: false,
|
||
isUserLink: false,
|
||
action: '',
|
||
order: undefined
|
||
};
|
||
}
|
||
|
||
async function isCurrentUserAdmin() {
|
||
try {
|
||
if (window.apiHelper && typeof window.apiHelper.isAdmin === 'function') {
|
||
return !!(await window.apiHelper.isAdmin());
|
||
}
|
||
if (window.ApiClient && typeof window.ApiClient.getCurrentUser === 'function') {
|
||
const user = await window.ApiClient.getCurrentUser();
|
||
return !!(user && user.Policy && user.Policy.IsAdministrator === true);
|
||
}
|
||
} catch (err) {
|
||
WARN('Could not determine admin status for custom menu link:', err);
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function upsertCustomMenuLinkRegistry(entry) {
|
||
const key = entryKey(entry);
|
||
const idx = customMenuLinkRegistry.findIndex(e => entryKey(e) === key);
|
||
if (idx >= 0) {
|
||
customMenuLinkRegistry[idx] = entry;
|
||
} else {
|
||
customMenuLinkRegistry.push(entry);
|
||
}
|
||
}
|
||
|
||
function findFavoritesDrawerLi() {
|
||
const drawer = document.querySelector('.MuiDrawer-paper');
|
||
if (!drawer) return null;
|
||
const fav = drawer.querySelector(`a[href="${FAVORITES_HREF}"]`);
|
||
if (!fav) return null;
|
||
return fav.closest('li') || fav.parentElement;
|
||
}
|
||
|
||
function findTopNavStack() {
|
||
const fav = document.querySelector(`.MuiStack-root a[href="${FAVORITES_HREF}"]`);
|
||
if (!fav) return null;
|
||
return fav.closest('.MuiStack-root');
|
||
}
|
||
|
||
function applyOpenInNewTab(anchor, openInNewTab) {
|
||
if (!openInNewTab) return;
|
||
anchor.setAttribute('rel', 'noopener noreferrer');
|
||
anchor.setAttribute('target', '_blank');
|
||
}
|
||
|
||
function getNativeTopNavAnchor(stack) {
|
||
if (!stack) return null;
|
||
const fav = stack.querySelector(`a[href="${FAVORITES_HREF}"]`);
|
||
if (fav && !fav.hasAttribute('data-kefin-custom-menu-top-link')) return fav;
|
||
return Array.from(stack.querySelectorAll(':scope > a')).find(
|
||
(a) => !a.hasAttribute('data-kefin-custom-menu-top-link')
|
||
&& !a.hasAttribute('data-kefin-custom-menu-more')
|
||
) || null;
|
||
}
|
||
|
||
function sanitizeClonedNavItem(root) {
|
||
if (!root) return;
|
||
const clear = (el) => {
|
||
if (!el || !el.classList) return;
|
||
el.classList.remove('Mui-selected', 'Mui-focusVisible', 'selected', 'Mui-disabled');
|
||
el.removeAttribute('aria-current');
|
||
el.removeAttribute('aria-selected');
|
||
};
|
||
clear(root);
|
||
root.querySelectorAll('.Mui-selected, .Mui-focusVisible, [aria-current], [aria-selected]')
|
||
.forEach(clear);
|
||
}
|
||
|
||
function applyMaterialIcon(root, iconName) {
|
||
const icon = iconName || 'link';
|
||
const existingMaterial = root.querySelector('.material-icons');
|
||
if (existingMaterial) {
|
||
existingMaterial.textContent = icon;
|
||
return true;
|
||
}
|
||
|
||
const svg = root.querySelector('svg');
|
||
if (svg) {
|
||
const span = document.createElement('span');
|
||
const svgClass = svg.getAttribute('class') || '';
|
||
span.className = svgClass;
|
||
if (!span.classList.contains('material-icons')) {
|
||
span.classList.add('material-icons');
|
||
}
|
||
span.setAttribute('aria-hidden', svg.getAttribute('aria-hidden') || 'true');
|
||
span.textContent = icon;
|
||
svg.replaceWith(span);
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
function applyAnchorLabel(anchor, name) {
|
||
const primary = anchor.querySelector(
|
||
'.MuiListItemText-primary, .MuiTypography-root, .navMenuOptionText'
|
||
);
|
||
if (primary) {
|
||
primary.textContent = name;
|
||
return;
|
||
}
|
||
|
||
const textNodes = [];
|
||
const walker = document.createTreeWalker(anchor, NodeFilter.SHOW_TEXT);
|
||
let node;
|
||
while ((node = walker.nextNode())) {
|
||
const parent = node.parentElement;
|
||
if (!parent) continue;
|
||
if (parent.closest('svg, .material-icons')) continue;
|
||
if (!String(node.textContent || '').trim()) continue;
|
||
textNodes.push(node);
|
||
}
|
||
if (!textNodes.length) {
|
||
anchor.appendChild(document.createTextNode(name));
|
||
return;
|
||
}
|
||
textNodes[textNodes.length - 1].textContent = name;
|
||
for (let i = 0; i < textNodes.length - 1; i++) {
|
||
textNodes[i].textContent = '';
|
||
}
|
||
}
|
||
|
||
function retargetClonedAnchor(anchor, entry, dataAttr, key) {
|
||
if (!anchor || !entry) return false;
|
||
sanitizeClonedNavItem(anchor);
|
||
anchor.href = getCustomMenuLinkHref(entry);
|
||
anchor.setAttribute(dataAttr, key);
|
||
anchor.removeAttribute('target');
|
||
anchor.removeAttribute('rel');
|
||
if (!entry.action) {
|
||
applyOpenInNewTab(anchor, entry.openInNewTab);
|
||
}
|
||
applyMaterialIcon(anchor, entry.icon);
|
||
applyAnchorLabel(anchor, entry.name);
|
||
bindCustomMenuLinkActivation(anchor, entry);
|
||
return true;
|
||
}
|
||
|
||
/**
|
||
* Clone Favorites drawer <li> and retarget for a custom link.
|
||
* @returns {HTMLElement|null}
|
||
*/
|
||
function createMuiDrawerListItem(entry, referenceLi) {
|
||
if (!referenceLi || !entry) return null;
|
||
const referenceAnchor = referenceLi.querySelector('a');
|
||
if (!referenceAnchor) return null;
|
||
|
||
const key = entryKey(entry);
|
||
const li = referenceLi.cloneNode(true);
|
||
sanitizeClonedNavItem(li);
|
||
li.setAttribute('data-kefin-custom-menu-link', key);
|
||
|
||
const a = li.querySelector('a');
|
||
if (!retargetClonedAnchor(a, entry, 'data-kefin-custom-menu-link', key)) {
|
||
return null;
|
||
}
|
||
return li;
|
||
}
|
||
|
||
function injectIntoV12Drawer(entry) {
|
||
const favLi = findFavoritesDrawerLi();
|
||
if (!favLi || !favLi.parentElement) return false;
|
||
|
||
const key = entryKey(entry);
|
||
if (findByDataAttr(favLi.parentElement, 'data-kefin-custom-menu-link', key)) {
|
||
return true;
|
||
}
|
||
|
||
let insertAfter = favLi;
|
||
let next = favLi.nextElementSibling;
|
||
while (next && next.querySelector?.('[data-kefin-custom-menu-link]')) {
|
||
insertAfter = next;
|
||
next = next.nextElementSibling;
|
||
}
|
||
|
||
const li = createMuiDrawerListItem(entry, favLi);
|
||
if (!li) return false;
|
||
insertAfter.insertAdjacentElement('afterend', li);
|
||
return true;
|
||
}
|
||
|
||
/**
|
||
* Clone a native top-nav <a> and retarget for a custom link.
|
||
* @returns {HTMLElement|null}
|
||
*/
|
||
function createMuiTopNavButton(entry, referenceAnchor) {
|
||
if (!referenceAnchor || !entry) return null;
|
||
|
||
const key = entryKey(entry);
|
||
const a = referenceAnchor.cloneNode(true);
|
||
if (!retargetClonedAnchor(a, entry, 'data-kefin-custom-menu-top-link', key)) {
|
||
return null;
|
||
}
|
||
a.classList.add('kefin-custom-menu-top-link');
|
||
return a;
|
||
}
|
||
|
||
function ensureTopNavDivider(stack) {
|
||
let divider = stack.querySelector('[data-kefin-custom-menu-top-divider]');
|
||
if (divider) return divider;
|
||
|
||
divider = document.createElement('div');
|
||
divider.className = 'kefin-custom-menu-top-divider';
|
||
divider.setAttribute('data-kefin-custom-menu-top-divider', 'true');
|
||
divider.setAttribute('role', 'separator');
|
||
divider.setAttribute('aria-hidden', 'true');
|
||
|
||
const anchors = Array.from(stack.querySelectorAll(':scope > a')).filter(
|
||
a => !a.hasAttribute('data-kefin-custom-menu-top-link')
|
||
&& !a.hasAttribute('data-kefin-custom-menu-more')
|
||
);
|
||
const lastNative = anchors[anchors.length - 1];
|
||
if (lastNative) {
|
||
lastNative.insertAdjacentElement('afterend', divider);
|
||
} else {
|
||
stack.appendChild(divider);
|
||
}
|
||
return divider;
|
||
}
|
||
|
||
const USER_VIEW_OVERFLOW_MENU_ID = 'user-view-overflow-menu';
|
||
|
||
function findNativeTopNavMoreButton(stack) {
|
||
if (!stack) return null;
|
||
const byAria = Array.from(
|
||
stack.querySelectorAll(`button[aria-controls="${USER_VIEW_OVERFLOW_MENU_ID}"]`)
|
||
).find((btn) => !btn.hasAttribute('data-kefin-custom-menu-more'));
|
||
if (byAria) return byAria;
|
||
return Array.from(stack.querySelectorAll(':scope > button')).find(
|
||
(btn) => !btn.hasAttribute('data-kefin-custom-menu-more')
|
||
&& /more/i.test((btn.textContent || '').trim())
|
||
) || null;
|
||
}
|
||
|
||
function findTopNavMoreButton(stack) {
|
||
return findNativeTopNavMoreButton(stack)
|
||
|| stack?.querySelector('[data-kefin-custom-menu-more]')
|
||
|| null;
|
||
}
|
||
|
||
function getUserViewOverflowMenu() {
|
||
return document.getElementById(USER_VIEW_OVERFLOW_MENU_ID);
|
||
}
|
||
|
||
function getUserViewOverflowMenuList(menuRoot = getUserViewOverflowMenu()) {
|
||
if (!menuRoot) return null;
|
||
return menuRoot.querySelector('ul[role="menu"]');
|
||
}
|
||
|
||
function isUserViewOverflowMenuOpen(menuRoot = getUserViewOverflowMenu()) {
|
||
return !!(menuRoot && !menuRoot.classList.contains('MuiModal-hidden'));
|
||
}
|
||
|
||
function closeUserViewOverflowMenu() {
|
||
const menu = getUserViewOverflowMenu();
|
||
if (!menu) return;
|
||
menu.classList.add('MuiModal-hidden');
|
||
const kefinMore = document.querySelector('[data-kefin-custom-menu-more]');
|
||
if (kefinMore) kefinMore.setAttribute('aria-expanded', 'false');
|
||
}
|
||
|
||
function openUserViewOverflowMenu(anchorBtn) {
|
||
const menu = ensureUserViewOverflowMenu();
|
||
if (!menu) return;
|
||
menu.classList.remove('MuiModal-hidden');
|
||
|
||
const paper = menu.querySelector('.MuiPopover-paper, .MuiMenu-paper');
|
||
if (paper && anchorBtn) {
|
||
const rect = anchorBtn.getBoundingClientRect();
|
||
paper.style.top = `${Math.round(rect.bottom + 4)}px`;
|
||
paper.style.left = `${Math.round(rect.left)}px`;
|
||
paper.style.transformOrigin = '0px 0px 0px';
|
||
}
|
||
|
||
if (anchorBtn?.hasAttribute('data-kefin-custom-menu-more')) {
|
||
anchorBtn.setAttribute('aria-expanded', 'true');
|
||
}
|
||
}
|
||
|
||
function ensureUserViewOverflowMenu() {
|
||
let menu = getUserViewOverflowMenu();
|
||
if (menu) return menu;
|
||
|
||
menu = document.createElement('div');
|
||
menu.id = USER_VIEW_OVERFLOW_MENU_ID;
|
||
menu.setAttribute('role', 'presentation');
|
||
menu.className = 'MuiPopover-root MuiMenu-root MuiModal-root MuiModal-hidden';
|
||
menu.setAttribute('data-kefin-custom-overflow-menu', 'true');
|
||
|
||
const backdrop = document.createElement('div');
|
||
backdrop.setAttribute('aria-hidden', 'true');
|
||
backdrop.className = 'MuiBackdrop-root MuiBackdrop-invisible MuiModal-backdrop';
|
||
|
||
const sentinelStart = document.createElement('div');
|
||
sentinelStart.tabIndex = 0;
|
||
sentinelStart.setAttribute('data-testid', 'sentinelStart');
|
||
|
||
const paper = document.createElement('div');
|
||
paper.className = 'MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation8 MuiPopover-paper MuiMenu-paper';
|
||
paper.tabIndex = -1;
|
||
|
||
const list = document.createElement('ul');
|
||
list.className = 'MuiList-root MuiList-padding MuiMenu-list';
|
||
list.setAttribute('role', 'menu');
|
||
list.tabIndex = -1;
|
||
paper.appendChild(list);
|
||
|
||
const sentinelEnd = document.createElement('div');
|
||
sentinelEnd.tabIndex = 0;
|
||
sentinelEnd.setAttribute('data-testid', 'sentinelEnd');
|
||
|
||
menu.appendChild(backdrop);
|
||
menu.appendChild(sentinelStart);
|
||
menu.appendChild(paper);
|
||
menu.appendChild(sentinelEnd);
|
||
document.body.appendChild(menu);
|
||
|
||
backdrop.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
closeUserViewOverflowMenu();
|
||
});
|
||
|
||
return menu;
|
||
}
|
||
|
||
function bindKefinMoreButtonToggle(moreBtn) {
|
||
if (!moreBtn || moreBtn.__kefinMoreToggleBound) return;
|
||
moreBtn.__kefinMoreToggleBound = true;
|
||
|
||
moreBtn.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const menu = ensureUserViewOverflowMenu();
|
||
if (isUserViewOverflowMenuOpen(menu)) {
|
||
closeUserViewOverflowMenu();
|
||
} else {
|
||
openUserViewOverflowMenu(moreBtn);
|
||
}
|
||
});
|
||
|
||
if (!window.__kefinCustomMenuMoreDocClickBound) {
|
||
window.__kefinCustomMenuMoreDocClickBound = true;
|
||
document.addEventListener('click', (e) => {
|
||
const menu = getUserViewOverflowMenu();
|
||
if (!menu || !menu.hasAttribute('data-kefin-custom-overflow-menu')) return;
|
||
if (!isUserViewOverflowMenuOpen(menu)) return;
|
||
const btn = document.querySelector('[data-kefin-custom-menu-more]');
|
||
if (menu.contains(e.target) || (btn && btn.contains(e.target))) return;
|
||
closeUserViewOverflowMenu();
|
||
});
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key !== 'Escape') return;
|
||
const menu = getUserViewOverflowMenu();
|
||
if (!menu || !menu.hasAttribute('data-kefin-custom-overflow-menu')) return;
|
||
if (!isUserViewOverflowMenuOpen(menu)) return;
|
||
closeUserViewOverflowMenu();
|
||
});
|
||
}
|
||
}
|
||
|
||
function createKefinTopNavMoreButton(stack) {
|
||
// Prefer class list from Favorites top-nav link (includes emotion css-* tokens).
|
||
const favAnchor = (stack && stack.querySelector(`a[href="${FAVORITES_HREF}"]`))
|
||
|| document.querySelector(`.MuiStack-root a[href="${FAVORITES_HREF}"]`)
|
||
|| getNativeTopNavAnchor(stack);
|
||
|
||
const moreBtn = document.createElement('button');
|
||
moreBtn.type = 'button';
|
||
moreBtn.tabIndex = 0;
|
||
if (favAnchor?.className) {
|
||
moreBtn.className = favAnchor.className;
|
||
sanitizeClonedNavItem(moreBtn);
|
||
} else {
|
||
moreBtn.className = 'MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit';
|
||
}
|
||
moreBtn.setAttribute('data-kefin-custom-menu-more', 'true');
|
||
moreBtn.setAttribute('aria-controls', USER_VIEW_OVERFLOW_MENU_ID);
|
||
moreBtn.setAttribute('aria-haspopup', 'true');
|
||
moreBtn.setAttribute('aria-expanded', 'false');
|
||
moreBtn.appendChild(document.createTextNode('More'));
|
||
|
||
const endIcon = document.createElement('span');
|
||
endIcon.className = 'MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium';
|
||
endIcon.innerHTML = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowDropDownIcon"><path d="m7 10 5 5 5-5z"></path></svg>';
|
||
moreBtn.appendChild(endIcon);
|
||
|
||
const ripple = document.createElement('span');
|
||
ripple.className = 'MuiTouchRipple-root';
|
||
moreBtn.appendChild(ripple);
|
||
|
||
return moreBtn;
|
||
}
|
||
|
||
function removeLegacyKefinMorePopover() {
|
||
const legacy = document.getElementById('kefin-custom-menu-more-popover');
|
||
if (legacy) legacy.remove();
|
||
}
|
||
|
||
function ensureTopNavMoreButton(stack, divider) {
|
||
removeLegacyKefinMorePopover();
|
||
ensureCustomMenuLinkStyles();
|
||
|
||
const nativeMore = findNativeTopNavMoreButton(stack);
|
||
if (nativeMore) {
|
||
// Native React More owns open/close and usually mounts the menu on demand.
|
||
return nativeMore;
|
||
}
|
||
|
||
ensureUserViewOverflowMenu();
|
||
|
||
let moreBtn = stack.querySelector('[data-kefin-custom-menu-more]');
|
||
if (moreBtn) {
|
||
bindKefinMoreButtonToggle(moreBtn);
|
||
return moreBtn;
|
||
}
|
||
|
||
moreBtn = createKefinTopNavMoreButton(stack);
|
||
bindKefinMoreButtonToggle(moreBtn);
|
||
|
||
if (divider) {
|
||
divider.insertAdjacentElement('beforebegin', moreBtn);
|
||
} else {
|
||
stack.appendChild(moreBtn);
|
||
}
|
||
return moreBtn;
|
||
}
|
||
|
||
function createOverflowMenuItem(entry, menuList, stack) {
|
||
const key = entryKey(entry);
|
||
const nativeItem = menuList.querySelector('a[role="menuitem"]:not([data-kefin-custom-menu-top-link])');
|
||
if (nativeItem) {
|
||
const item = nativeItem.cloneNode(true);
|
||
if (!retargetClonedAnchor(item, entry, 'data-kefin-custom-menu-top-link', key)) {
|
||
return null;
|
||
}
|
||
item.addEventListener('click', () => {
|
||
closeUserViewOverflowMenu();
|
||
});
|
||
return item;
|
||
}
|
||
|
||
const stackRef = getNativeTopNavAnchor(stack);
|
||
if (stackRef) {
|
||
const item = stackRef.cloneNode(true);
|
||
if (!retargetClonedAnchor(item, entry, 'data-kefin-custom-menu-top-link', key)) {
|
||
return null;
|
||
}
|
||
item.setAttribute('role', 'menuitem');
|
||
item.classList.add('MuiMenuItem-root', 'MuiMenuItem-gutters');
|
||
item.addEventListener('click', () => {
|
||
closeUserViewOverflowMenu();
|
||
});
|
||
return item;
|
||
}
|
||
|
||
const item = document.createElement('a');
|
||
item.className = 'MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters';
|
||
item.setAttribute('role', 'menuitem');
|
||
item.tabIndex = -1;
|
||
item.href = getCustomMenuLinkHref(entry);
|
||
item.setAttribute('data-kefin-custom-menu-top-link', key);
|
||
if (!entry.action) {
|
||
applyOpenInNewTab(item, entry.openInNewTab);
|
||
}
|
||
|
||
const icon = document.createElement('div');
|
||
icon.className = 'MuiListItemIcon-root';
|
||
const iconSpan = document.createElement('span');
|
||
iconSpan.className = 'material-icons MuiSvgIcon-root MuiSvgIcon-fontSizeMedium';
|
||
iconSpan.setAttribute('aria-hidden', 'true');
|
||
iconSpan.textContent = entry.icon || 'link';
|
||
icon.appendChild(iconSpan);
|
||
|
||
const text = document.createElement('div');
|
||
text.className = 'MuiListItemText-root';
|
||
const span = document.createElement('span');
|
||
span.className = 'MuiTypography-root MuiTypography-body1 MuiListItemText-primary';
|
||
span.textContent = entry.name;
|
||
text.appendChild(span);
|
||
|
||
item.appendChild(icon);
|
||
item.appendChild(text);
|
||
bindCustomMenuLinkActivation(item, entry);
|
||
item.addEventListener('click', () => {
|
||
closeUserViewOverflowMenu();
|
||
});
|
||
return item;
|
||
}
|
||
|
||
function insertByMainOrder(parent, el, order) {
|
||
const idx = Math.max(0, Math.floor(order));
|
||
const siblings = Array.from(parent.children).filter((c) => c !== el);
|
||
const ref = siblings[idx] || null;
|
||
if (el.parentNode === parent && el.nextSibling === ref) return;
|
||
if (ref) parent.insertBefore(el, ref);
|
||
else parent.appendChild(el);
|
||
}
|
||
|
||
function insertByRightOrder(parent, el, order) {
|
||
const n = Math.max(0, Math.floor(order));
|
||
const siblings = Array.from(parent.children).filter((c) => c !== el);
|
||
let ref = null;
|
||
|
||
if (isModernUI()) {
|
||
if (n === 0) {
|
||
ref = null; // append → last
|
||
} else {
|
||
const idx = Math.max(0, siblings.length - n);
|
||
ref = siblings[idx] || null;
|
||
}
|
||
} else {
|
||
// Legacy headerRight: last two children are cast/user controls — keep them rightmost
|
||
const reserved = 2;
|
||
const idx = siblings.length - reserved - n;
|
||
if (idx <= 0) {
|
||
ref = siblings[0] || null;
|
||
} else {
|
||
ref = siblings[idx] || siblings[0] || null;
|
||
}
|
||
}
|
||
|
||
if (el.parentNode === parent && el.nextSibling === ref) return;
|
||
if (ref) parent.insertBefore(el, ref);
|
||
else parent.appendChild(el);
|
||
}
|
||
|
||
function injectIntoTopNavV12(entry) {
|
||
const stack = findTopNavStack();
|
||
if (!stack) return false;
|
||
|
||
const key = entryKey(entry);
|
||
const hasOrder = Number.isFinite(entry.order);
|
||
|
||
const divider = ensureTopNavDivider(stack);
|
||
|
||
if (entry.collapsed) {
|
||
ensureTopNavMoreButton(stack, divider);
|
||
let menu = getUserViewOverflowMenu();
|
||
if (!menu) {
|
||
// Create shell only when we own the More button; otherwise wait for React.
|
||
if (stack.querySelector('[data-kefin-custom-menu-more]')) {
|
||
menu = ensureUserViewOverflowMenu();
|
||
} else {
|
||
return false;
|
||
}
|
||
}
|
||
const menuList = getUserViewOverflowMenuList(menu);
|
||
if (!menuList) return false;
|
||
|
||
if (findByDataAttr(menuList, 'data-kefin-custom-menu-top-link', key)
|
||
|| findByDataAttr(menu, 'data-kefin-custom-menu-top-link', key)) {
|
||
return true;
|
||
}
|
||
|
||
const item = createOverflowMenuItem(entry, menuList, stack);
|
||
if (!item) return false;
|
||
menuList.appendChild(item);
|
||
return true;
|
||
}
|
||
|
||
if (findByDataAttr(stack, 'data-kefin-custom-menu-top-link', key)) {
|
||
return true;
|
||
}
|
||
|
||
const btn = createMuiTopNavButton(entry, getNativeTopNavAnchor(stack));
|
||
if (!btn) return false;
|
||
|
||
if (hasOrder) {
|
||
insertByMainOrder(stack, btn, entry.order);
|
||
return true;
|
||
}
|
||
|
||
const moreBtn = findTopNavMoreButton(stack);
|
||
if (moreBtn) {
|
||
moreBtn.insertAdjacentElement('beforebegin', btn);
|
||
} else {
|
||
let insertAfter = divider;
|
||
let next = divider.nextElementSibling;
|
||
while (next && next.hasAttribute?.('data-kefin-custom-menu-top-link')) {
|
||
insertAfter = next;
|
||
next = next.nextElementSibling;
|
||
}
|
||
insertAfter.insertAdjacentElement('afterend', btn);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function findLegacyTabsSlider() {
|
||
return document.querySelector('.headerTabs.sectionTabs .emby-tabs-slider');
|
||
}
|
||
|
||
function removeLegacyTopNavCustomTabLinks() {
|
||
document.querySelectorAll(
|
||
'.headerTabs.sectionTabs [data-kefin-custom-menu-top-link], .emby-tabs-slider > [data-kefin-custom-menu-top-link]'
|
||
).forEach((el) => el.remove());
|
||
}
|
||
|
||
function getNativeLegacyTabButton(slider) {
|
||
if (!slider) return null;
|
||
return Array.from(slider.querySelectorAll('.emby-tab-button')).find(
|
||
(btn) => !btn.hasAttribute('data-kefin-custom-menu-top-link')
|
||
) || null;
|
||
}
|
||
|
||
function injectIntoTopNavLegacyTabs(entry) {
|
||
if (!document.querySelector('.homePage:not(.hide)')) {
|
||
removeLegacyTopNavCustomTabLinks();
|
||
return false;
|
||
}
|
||
|
||
const slider = findLegacyTabsSlider();
|
||
if (!slider) return false;
|
||
|
||
const key = entryKey(entry);
|
||
if (findByDataAttr(slider, 'data-kefin-custom-menu-top-link', key)) {
|
||
return true;
|
||
}
|
||
|
||
const reference = getNativeLegacyTabButton(slider);
|
||
if (!reference) return false;
|
||
|
||
const btn = reference.cloneNode(true);
|
||
sanitizeClonedNavItem(btn);
|
||
btn.classList.remove('emby-tab-button-active');
|
||
btn.removeAttribute('href');
|
||
btn.setAttribute('data-kefin-custom-menu-top-link', key);
|
||
btn.classList.add('kefin-custom-menu-top-link');
|
||
|
||
let nextIndex = slider.children.length;
|
||
let maxIndex = -1;
|
||
for (const child of slider.children) {
|
||
const v = parseInt(child.getAttribute('data-index'), 10);
|
||
if (Number.isFinite(v) && v > maxIndex) maxIndex = v;
|
||
}
|
||
if (maxIndex >= 0) nextIndex = maxIndex + 1;
|
||
btn.setAttribute('data-index', String(nextIndex));
|
||
|
||
const foreground = btn.querySelector('.emby-button-foreground') || btn;
|
||
if (foreground === btn) {
|
||
btn.textContent = entry.name;
|
||
} else {
|
||
foreground.textContent = entry.name;
|
||
}
|
||
|
||
if (btn.tagName === 'A') {
|
||
btn.href = getCustomMenuLinkHref(entry);
|
||
if (!entry.action) {
|
||
applyOpenInNewTab(btn, entry.openInNewTab);
|
||
}
|
||
bindCustomMenuLinkActivation(btn, entry);
|
||
} else {
|
||
bindCustomMenuLinkActivation(btn, entry);
|
||
if (!entry.action) {
|
||
btn.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const href = String(entry.url || '').trim();
|
||
if (!href) return;
|
||
if (entry.openInNewTab) {
|
||
window.open(href, '_blank', 'noopener,noreferrer');
|
||
} else if (href.startsWith('#')) {
|
||
window.location.hash = href.slice(1);
|
||
} else {
|
||
window.location.href = href;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
if (Number.isFinite(entry.order)) {
|
||
insertByMainOrder(slider, btn, entry.order);
|
||
} else {
|
||
slider.appendChild(btn);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function isModernUI() {
|
||
return !!document.querySelector('main.MuiBox-root') || (localStorage.getItem('layout')?.length === 0 && isJellyfinWebAtLeast12());
|
||
}
|
||
|
||
function injectIntoTopNavMain(entry) {
|
||
if (isModernUI()) {
|
||
return injectIntoTopNavV12(entry);
|
||
}
|
||
return injectIntoTopNavLegacyTabs(entry);
|
||
}
|
||
|
||
function injectIntoTopNavRightLegacy(entry) {
|
||
const headerRight = document.querySelector('.headerRight');
|
||
if (!headerRight) return false;
|
||
|
||
const key = entryKey(entry);
|
||
if (findByDataAttr(headerRight, 'data-kefin-custom-menu-top-right', key)) {
|
||
return true;
|
||
}
|
||
|
||
const button = document.createElement('button');
|
||
button.type = 'button';
|
||
button.setAttribute('is', 'paper-icon-button-light');
|
||
button.className = 'headerButton headerButtonRight paper-icon-button-light kefin-custom-menu-top-right';
|
||
button.title = entry.name;
|
||
button.setAttribute('aria-label', entry.name);
|
||
button.setAttribute('data-kefin-custom-menu-top-right', key);
|
||
|
||
const iconSpan = document.createElement('span');
|
||
iconSpan.className = `material-icons ${entry.icon || 'link'}`;
|
||
iconSpan.setAttribute('aria-hidden', 'true');
|
||
button.appendChild(iconSpan);
|
||
|
||
bindCustomMenuLinkActivation(button, entry);
|
||
if (!entry.action) {
|
||
button.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const href = String(entry.url || '').trim();
|
||
if (!href) return;
|
||
if (entry.openInNewTab) {
|
||
window.open(href, '_blank', 'noopener,noreferrer');
|
||
} else if (href.startsWith('#')) {
|
||
window.location.hash = href.slice(1);
|
||
} else {
|
||
window.location.href = href;
|
||
}
|
||
});
|
||
}
|
||
|
||
const searchButton = headerRight.querySelector('.headerSearchButton');
|
||
if (Number.isFinite(entry.order)) {
|
||
insertByRightOrder(headerRight, button, entry.order);
|
||
} else if (searchButton) {
|
||
if (button.parentNode === headerRight && button.nextSibling === searchButton) {
|
||
return true;
|
||
}
|
||
headerRight.insertBefore(button, searchButton);
|
||
} else if (button.parentNode !== headerRight || headerRight.lastElementChild !== button) {
|
||
headerRight.appendChild(button);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function injectIntoTopNavRightV12(entry) {
|
||
const search = document.querySelector('.headerRight a[href*="#/search"]')
|
||
|| document.querySelector('.MuiToolbar-root a[href*="#/search"]')
|
||
|| document.querySelector('a[href*="#/search"]');
|
||
if (!search || !search.parentElement) return false;
|
||
|
||
const parent = search.parentElement;
|
||
const key = entryKey(entry);
|
||
if (findByDataAttr(parent, 'data-kefin-custom-menu-top-right', key)
|
||
|| findByDataAttr(document, 'data-kefin-custom-menu-top-right', key)) {
|
||
return true;
|
||
}
|
||
|
||
let el;
|
||
if (search.tagName === 'A' || search.querySelector?.('a')) {
|
||
const ref = search.tagName === 'A' ? search : search.querySelector('a');
|
||
el = ref.cloneNode(true);
|
||
sanitizeClonedNavItem(el);
|
||
el.href = getCustomMenuLinkHref(entry);
|
||
el.setAttribute('data-kefin-custom-menu-top-right', key);
|
||
el.classList.add('kefin-custom-menu-top-right');
|
||
el.title = entry.name;
|
||
el.setAttribute('aria-label', entry.name);
|
||
el.removeAttribute('target');
|
||
el.removeAttribute('rel');
|
||
if (!entry.action) {
|
||
applyOpenInNewTab(el, entry.openInNewTab);
|
||
}
|
||
applyMaterialIcon(el, entry.icon || 'link');
|
||
bindCustomMenuLinkActivation(el, entry);
|
||
} else {
|
||
el = document.createElement('button');
|
||
el.type = 'button';
|
||
el.className = search.className || '';
|
||
el.classList.add('kefin-custom-menu-top-right');
|
||
el.title = entry.name;
|
||
el.setAttribute('aria-label', entry.name);
|
||
el.setAttribute('data-kefin-custom-menu-top-right', key);
|
||
const iconSpan = document.createElement('span');
|
||
iconSpan.className = 'material-icons';
|
||
iconSpan.setAttribute('aria-hidden', 'true');
|
||
iconSpan.textContent = entry.icon || 'link';
|
||
el.appendChild(iconSpan);
|
||
bindCustomMenuLinkActivation(el, entry);
|
||
if (!entry.action) {
|
||
el.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const href = String(entry.url || '').trim();
|
||
if (!href) return;
|
||
if (entry.openInNewTab) {
|
||
window.open(href, '_blank', 'noopener,noreferrer');
|
||
} else if (href.startsWith('#')) {
|
||
window.location.hash = href.slice(1);
|
||
} else {
|
||
window.location.href = href;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
if (Number.isFinite(entry.order)) {
|
||
insertByRightOrder(parent, el, entry.order);
|
||
} else if (el.parentNode !== parent || el !== parent.firstElementChild) {
|
||
// Default: as first child of the parent element
|
||
parent.insertBefore(el, parent.firstChild);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function injectIntoTopNavRight(entry) {
|
||
if (isModernUI()) {
|
||
return injectIntoTopNavRightV12(entry);
|
||
}
|
||
return injectIntoTopNavRightLegacy(entry);
|
||
}
|
||
|
||
function closeAppUserMenu() {
|
||
const menu = document.getElementById('app-user-menu');
|
||
if (!menu) return;
|
||
const backdrop = menu.querySelector('.MuiBackdrop-root, .MuiModal-backdrop');
|
||
if (backdrop) {
|
||
backdrop.click();
|
||
return;
|
||
}
|
||
document.dispatchEvent(new KeyboardEvent('keydown', {
|
||
key: 'Escape',
|
||
code: 'Escape',
|
||
keyCode: 27,
|
||
which: 27,
|
||
bubbles: true
|
||
}));
|
||
}
|
||
|
||
function getNativeUserMenuAnchor(menuList) {
|
||
if (!menuList) return null;
|
||
return Array.from(menuList.querySelectorAll('a[role="menuitem"]')).find(
|
||
(a) => !a.hasAttribute('data-kefin-custom-user-menu-link')
|
||
&& !a.hasAttribute('data-kefintweaks-user-menu-config-button')
|
||
) || null;
|
||
}
|
||
|
||
function createAppUserMenuLink(entry, referenceAnchor) {
|
||
if (!entry || !referenceAnchor) return null;
|
||
|
||
const key = entryKey(entry);
|
||
const link = referenceAnchor.cloneNode(true);
|
||
if (!retargetClonedAnchor(link, entry, 'data-kefin-custom-user-menu-link', key)) {
|
||
return null;
|
||
}
|
||
|
||
link.addEventListener('click', () => {
|
||
closeAppUserMenu();
|
||
});
|
||
return link;
|
||
}
|
||
|
||
function getUserMenuDividers(menuList) {
|
||
if (!menuList) return [];
|
||
return Array.from(menuList.children).filter(
|
||
(el) => el.matches && (el.matches('hr') || el.classList.contains('MuiDivider-root'))
|
||
);
|
||
}
|
||
|
||
function injectIntoUserMenuV12(entry) {
|
||
const appUserMenu = document.getElementById('app-user-menu');
|
||
if (!appUserMenu) return false;
|
||
|
||
const menuList = appUserMenu.querySelector('ul[role="menu"]');
|
||
if (!menuList) return false;
|
||
|
||
const key = entryKey(entry);
|
||
const existing = findByDataAttr(menuList, 'data-kefin-custom-user-menu-link', key);
|
||
if (existing) {
|
||
// Upgrade hand-built items that lack MUI emotion classes
|
||
if (/\bcss-/.test(existing.className)) {
|
||
return true;
|
||
}
|
||
existing.remove();
|
||
}
|
||
|
||
const dividers = getUserMenuDividers(menuList);
|
||
let insertBefore = null;
|
||
let insertAfter = null;
|
||
if (entry.isAdminLink) {
|
||
// Admin section: before the second divider (fallback: last divider / Dashboard-adjacent)
|
||
insertBefore = dividers[1] || dividers[dividers.length - 1] || null;
|
||
if (!insertBefore) {
|
||
const dashboardLink = menuList.querySelector('a[href="#/dashboard"]')
|
||
|| menuList.querySelector('a[href*="#/dashboard"]');
|
||
if (!dashboardLink) return false;
|
||
let divider = dashboardLink.nextElementSibling;
|
||
while (divider && !(divider.matches('hr') || divider.classList.contains('MuiDivider-root'))) {
|
||
divider = divider.nextElementSibling;
|
||
}
|
||
insertBefore = divider;
|
||
}
|
||
} else if (entry.isUserLink) {
|
||
// User section: after the last divider
|
||
insertAfter = dividers[dividers.length - 1] || null;
|
||
if (!insertAfter) {
|
||
const signOutButton = menuList.querySelector('a[href="#/signout"]')
|
||
|| menuList.querySelector('a[href*="#/signout"]');
|
||
if (!signOutButton) return false;
|
||
insertAfter = signOutButton.previousElementSibling;
|
||
}
|
||
} else {
|
||
// User section: before the first divider
|
||
insertBefore = dividers[0] || null;
|
||
}
|
||
if (!insertBefore && !insertAfter) return false;
|
||
|
||
const reference = getNativeUserMenuAnchor(menuList)
|
||
|| menuList.querySelector('a[role="menuitem"]');
|
||
const link = createAppUserMenuLink(entry, reference);
|
||
if (!link) return false;
|
||
|
||
if (insertAfter) {
|
||
insertAfter.after(link);
|
||
} else {
|
||
menuList.insertBefore(link, insertBefore);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function findPreferencesAdminSection() {
|
||
return document.querySelector('.userPreferencesPage:not(.hide) .adminSection');
|
||
}
|
||
|
||
function findPreferencesDefaultSection() {
|
||
const page = document.querySelector('.userPreferencesPage:not(.hide)')
|
||
|| document.querySelector('.userPreferencesPage');
|
||
if (!page) return null;
|
||
const withUsername = Array.from(page.querySelectorAll('.verticalSection')).find(
|
||
(section) => section.querySelector('.headerUsername')
|
||
);
|
||
return withUsername || null;
|
||
}
|
||
|
||
function findPreferencesUserSection() {
|
||
return document.querySelector('.userPreferencesPage:not(.hide) .userSection');
|
||
}
|
||
|
||
function createPreferencesUserMenuLink(entry) {
|
||
const key = entryKey(entry);
|
||
const link = document.createElement('a');
|
||
link.setAttribute('data-ripple', 'false');
|
||
link.href = getCustomMenuLinkHref(entry);
|
||
link.style.cssText = 'display:block;padding:0;margin:0';
|
||
link.className = 'listItem-border emby-button';
|
||
link.setAttribute('data-kefin-custom-user-menu-link', key);
|
||
|
||
if (!entry.action) {
|
||
applyOpenInNewTab(link, entry.openInNewTab);
|
||
}
|
||
|
||
const iconName = entry.icon || 'link';
|
||
link.innerHTML = `
|
||
<div class="listItem">
|
||
<span class="material-icons listItemIcon listItemIcon-transparent ${iconName}" aria-hidden="true"></span>
|
||
<div class="listItemBody">
|
||
<div class="listItemBodyText"></div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
const titleEl = link.querySelector('.listItemBodyText');
|
||
if (titleEl) titleEl.textContent = entry.name;
|
||
|
||
bindCustomMenuLinkActivation(link, entry);
|
||
return link;
|
||
}
|
||
|
||
function injectIntoUserMenuLegacy(entry) {
|
||
const section = entry.isUserLink ? findPreferencesUserSection() : entry.isAdminLink ? findPreferencesAdminSection() : findPreferencesDefaultSection();
|
||
if (!section) return false;
|
||
|
||
const key = entryKey(entry);
|
||
if (findByDataAttr(section, 'data-kefin-custom-user-menu-link', key)) {
|
||
return true;
|
||
}
|
||
|
||
const link = createPreferencesUserMenuLink(entry);
|
||
const header = section.querySelector('.headerUsername');
|
||
if (header) {
|
||
header.after(link);
|
||
} else {
|
||
section.appendChild(link);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function injectIntoUserMenu(entry) {
|
||
if (isModernUI()) {
|
||
return injectIntoUserMenuV12(entry);
|
||
}
|
||
return injectIntoUserMenuLegacy(entry);
|
||
}
|
||
|
||
function injectSideMenuOnly(entry) {
|
||
if (!entry || entry.sideMenu === false) return false;
|
||
const drawerOk = injectIntoV12Drawer(entry);
|
||
const legacyContainer = document.querySelector(entry.containerSelector || DEFAULT_CUSTOM_MENU_SELECTOR);
|
||
const legacyOk = legacyContainer ? addLinkToContainer(legacyContainer, entry) : false;
|
||
return drawerOk || legacyOk;
|
||
}
|
||
|
||
function injectUserMenuOnly(entry) {
|
||
if (!entry?.userMenu) return false;
|
||
return injectIntoUserMenu(entry);
|
||
}
|
||
|
||
function injectTopNavOnly(entry) {
|
||
if (!entry) return false;
|
||
if (entry.topNavigation === 'main') return injectIntoTopNavMain(entry);
|
||
if (entry.topNavigation === 'right') return injectIntoTopNavRight(entry);
|
||
return false;
|
||
}
|
||
|
||
function injectOneCustomMenuLink(entry) {
|
||
let anyOk = false;
|
||
|
||
if (entry.sideMenu !== false) {
|
||
anyOk = injectSideMenuOnly(entry) || anyOk;
|
||
}
|
||
|
||
if (entry.topNavigation === 'main' || entry.topNavigation === 'right') {
|
||
anyOk = injectTopNavOnly(entry) || anyOk;
|
||
}
|
||
|
||
if (entry.userMenu) {
|
||
anyOk = injectUserMenuOnly(entry) || anyOk;
|
||
}
|
||
|
||
if (entry.topNavigation === 'main') {
|
||
syncCustomTopNavActiveState();
|
||
}
|
||
|
||
return anyOk;
|
||
}
|
||
|
||
function reapplyAllCustomMenuLinks() {
|
||
withCustomMenuReapplySuppressed(() => {
|
||
if (!document.querySelector('.homePage:not(.hide)')) {
|
||
removeLegacyTopNavCustomTabLinks();
|
||
}
|
||
customMenuLinkRegistry.forEach((entry) => {
|
||
try {
|
||
injectOneCustomMenuLink(entry);
|
||
} catch (err) {
|
||
ERR('Error re-applying custom menu link:', entry?.name, err);
|
||
}
|
||
});
|
||
syncCustomTopNavActiveState();
|
||
});
|
||
}
|
||
|
||
function parseNavHashParts(hash) {
|
||
const raw = String(hash || '#/').replace(/^#/, '') || '/';
|
||
const qIndex = raw.indexOf('?');
|
||
const path = (qIndex >= 0 ? raw.slice(0, qIndex) : raw) || '/';
|
||
const query = qIndex >= 0 ? raw.slice(qIndex + 1) : '';
|
||
const params = new URLSearchParams(query);
|
||
return { path: path.startsWith('/') ? path : `/${path}`, params };
|
||
}
|
||
|
||
function customTopNavHrefMatchScore(href, currentHash) {
|
||
if (!href || /^https?:/i.test(href)) return -1;
|
||
const targetHash = href.startsWith('#') ? href : `#${href}`;
|
||
const current = parseNavHashParts(currentHash);
|
||
const target = parseNavHashParts(targetHash);
|
||
|
||
if (
|
||
targetHash === currentHash
|
||
|| decodeURIComponent(targetHash) === decodeURIComponent(currentHash)
|
||
) {
|
||
return 1000 + targetHash.length;
|
||
}
|
||
|
||
if (target.path !== current.path) return -1;
|
||
|
||
for (const [key, value] of target.params.entries()) {
|
||
if (current.params.get(key) !== value) return -1;
|
||
}
|
||
|
||
let score = 100 + targetHash.length;
|
||
score += [...target.params.keys()].length * 10;
|
||
|
||
if (target.path === '/home' && !target.params.has('tab') && current.params.has('tab')) {
|
||
return -1;
|
||
}
|
||
|
||
return score;
|
||
}
|
||
|
||
function resolveCustomTopNavHref(el) {
|
||
if (!el) return '';
|
||
const attrHref = el.getAttribute('href');
|
||
if (attrHref) return attrHref;
|
||
const key = el.getAttribute('data-kefin-custom-menu-top-link');
|
||
if (!key) return '';
|
||
const entry = customMenuLinkRegistry.find((e) => entryKey(e) === key);
|
||
return entry ? getCustomMenuLinkHref(entry) : '';
|
||
}
|
||
|
||
function syncCustomTopNavActiveState() {
|
||
const links = Array.from(document.querySelectorAll('[data-kefin-custom-menu-top-link]'));
|
||
if (!links.length) return;
|
||
|
||
const currentHash = window.location.hash || '#/';
|
||
const normalizedHash = currentHash.startsWith('#') ? currentHash : `#${currentHash}`;
|
||
let bestScore = -1;
|
||
const winners = [];
|
||
|
||
links.forEach((el) => {
|
||
el.classList.remove('active');
|
||
const score = customTopNavHrefMatchScore(resolveCustomTopNavHref(el), normalizedHash);
|
||
if (score < 0) return;
|
||
if (score > bestScore) {
|
||
bestScore = score;
|
||
winners.length = 0;
|
||
winners.push(el);
|
||
} else if (score === bestScore) {
|
||
winners.push(el);
|
||
}
|
||
});
|
||
|
||
winners.forEach((el) => el.classList.add('active'));
|
||
}
|
||
|
||
let customTopNavActiveSyncBound = false;
|
||
function ensureCustomTopNavActiveSync() {
|
||
if (customTopNavActiveSyncBound) return;
|
||
customTopNavActiveSyncBound = true;
|
||
window.addEventListener('hashchange', syncCustomTopNavActiveState);
|
||
onViewPage(() => {
|
||
syncCustomTopNavActiveState();
|
||
}, { pages: [] });
|
||
syncCustomTopNavActiveState();
|
||
}
|
||
|
||
const ANY_CUSTOM_MENU_HOST_SEL = [
|
||
// top nav
|
||
'.skinHeader',
|
||
'.headerTabs',
|
||
'.headerRight',
|
||
'.MuiToolbar-root',
|
||
'.MuiStack-root',
|
||
// side
|
||
'.MuiDrawer-paper',
|
||
'.mainDrawer',
|
||
'.navDrawer',
|
||
'.customMenuOptions',
|
||
'.adminMenuOptions',
|
||
'.userMenuOptions',
|
||
// user menus (modern + legacy)
|
||
'#app-user-menu',
|
||
'.userPreferencesPage',
|
||
'.userPreferencesPage .userSection',
|
||
'.userPreferencesPage .adminSection',
|
||
'.userPreferencesPage .verticalSection'
|
||
].join(', ');
|
||
|
||
function isKefinCustomMenuOwnedNode(node) {
|
||
if (!node) return false;
|
||
const el = node.nodeType === 1 ? node : node.parentElement;
|
||
if (!el || typeof el.closest !== 'function') return false;
|
||
if (el.matches?.(KEFIN_CUSTOM_MENU_OWNED_SEL)) return true;
|
||
return !!el.closest(KEFIN_CUSTOM_MENU_OWNED_SEL);
|
||
}
|
||
|
||
function addedNodeMatchesHost(node, hostSel) {
|
||
if (!node || node.nodeType !== 1) return false;
|
||
return !!(node.matches?.(hostSel) || node.querySelector?.(hostSel));
|
||
}
|
||
|
||
function mutationShouldTriggerCustomMenuReapply(mutation) {
|
||
const addedEls = Array.from(mutation.addedNodes).filter((n) => n.nodeType === 1);
|
||
if (!addedEls.length) return false;
|
||
if (addedEls.every((n) => isKefinCustomMenuOwnedNode(n))) return false;
|
||
return addedEls.some((n) => addedNodeMatchesHost(n, ANY_CUSTOM_MENU_HOST_SEL));
|
||
}
|
||
|
||
function disconnectCustomMenuLinkObserver() {
|
||
if (!customMenuLinkObserver) return;
|
||
customMenuLinkObserver.disconnect();
|
||
customMenuLinkObserver = null;
|
||
}
|
||
|
||
/**
|
||
* Persistent MO: any custom-menu host remount → idempotent reapplyAll.
|
||
* No host is assumed stable (drawer, prefs, #app-user-menu, top-nav).
|
||
*/
|
||
function ensureCustomMenuLinkObserver() {
|
||
if (!customMenuLinkRegistry.length) {
|
||
disconnectCustomMenuLinkObserver();
|
||
return;
|
||
}
|
||
if (customMenuLinkObserver || typeof MutationObserver === 'undefined' || !document.body) {
|
||
return;
|
||
}
|
||
|
||
let scheduled = false;
|
||
customMenuLinkObserver = new MutationObserver((mutations) => {
|
||
if (customMenuLinkReapplyDepth > 0) return;
|
||
if (!customMenuLinkRegistry.length) {
|
||
disconnectCustomMenuLinkObserver();
|
||
return;
|
||
}
|
||
if (!mutations.some(mutationShouldTriggerCustomMenuReapply)) return;
|
||
if (scheduled) return;
|
||
scheduled = true;
|
||
requestAnimationFrame(() => {
|
||
scheduled = false;
|
||
reapplyAllCustomMenuLinks();
|
||
});
|
||
});
|
||
|
||
customMenuLinkObserver.observe(document.body, {
|
||
childList: true,
|
||
subtree: true
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Inject top-nav custom menu link styles once.
|
||
*/
|
||
function ensureCustomMenuLinkStyles() {
|
||
if (!document.getElementById('kefin-custom-menu-links-styles')) {
|
||
const style = document.createElement('style');
|
||
style.id = 'kefin-custom-menu-links-styles';
|
||
style.textContent = `
|
||
.kefin-custom-menu-top-divider {
|
||
width: 1px;
|
||
align-self: stretch;
|
||
margin: 0.5em 0.35em;
|
||
flex-shrink: 0;
|
||
background: currentColor;
|
||
opacity: 0.25;
|
||
height: 30px;
|
||
align-self: center;
|
||
}
|
||
.kefin-custom-menu-top-divider:not(:has(+ *)) {
|
||
display: none;
|
||
}
|
||
.kefin-custom-menu-top-link {
|
||
text-transform: none;
|
||
white-space: nowrap;
|
||
}
|
||
[data-kefin-custom-menu-top-link].active {
|
||
display: inline-flex;
|
||
-moz-box-align: center;
|
||
align-items: center;
|
||
-moz-box-pack: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
outline: 0;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
vertical-align: middle;
|
||
appearance: none;
|
||
text-decoration: none;
|
||
font-family: "Noto Sans", sans-serif;
|
||
font-weight: 500;
|
||
font-size: 0.875rem;
|
||
line-height: 1.75;
|
||
text-transform: none;
|
||
min-width: 64px;
|
||
border: 0;
|
||
border-radius: var(--jf-shape-borderRadius);
|
||
padding: 6px 8px;
|
||
color: var(--variant-textColor);
|
||
background-color: var(--variant-textBg);
|
||
--variant-textColor: var(--jf-palette-primary-main);
|
||
--variant-outlinedColor: var(--jf-palette-primary-main);
|
||
--variant-outlinedBorder: rgba(var(--jf-palette-primary-mainChannel) / 0.5);
|
||
--variant-containedColor: var(--jf-palette-primary-contrastText);
|
||
--variant-containedBg: var(--jf-palette-primary-main);
|
||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.userPreferencesPage .readOnlyContent > * {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.userPreferencesPage .readOnlyContent > *:not(.userSection) > :not([data-kefin-custom-user-menu-link]) {
|
||
order: -1;
|
||
}
|
||
`;
|
||
(document.head || document.documentElement).appendChild(style);
|
||
}
|
||
|
||
// Explicit More-button styles (native emotion classes unavailable when More is absent)
|
||
if (!document.getElementById('kefin-custom-menu-more-styles')) {
|
||
const moreStyle = document.createElement('style');
|
||
moreStyle.id = 'kefin-custom-menu-more-styles';
|
||
moreStyle.textContent = `
|
||
button[data-kefin-custom-menu-more].MuiButtonBase-root {
|
||
display: inline-flex;
|
||
-moz-box-align: center;
|
||
align-items: center;
|
||
-moz-box-pack: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
outline: 0;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
vertical-align: middle;
|
||
appearance: none;
|
||
text-decoration: none;
|
||
font-family: "Noto Sans", sans-serif;
|
||
font-weight: 500;
|
||
font-size: 0.875rem;
|
||
line-height: 1.75;
|
||
text-transform: none;
|
||
min-width: 64px;
|
||
border: 0;
|
||
border-radius: var(--jf-shape-borderRadius);
|
||
padding: 6px 8px;
|
||
background-color: var(--variant-textBg);
|
||
color: inherit;
|
||
--variant-containedBg: var(--jf-palette-Button-inheritContainedBg);
|
||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
button[data-kefin-custom-menu-more] .MuiButton-icon {
|
||
display: inherit;
|
||
margin-right: -4px;
|
||
margin-left: 8px;
|
||
}
|
||
button[data-kefin-custom-menu-more] .MuiTouchRipple-root {
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
position: absolute;
|
||
z-index: 0;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
}
|
||
button[data-kefin-custom-menu-more] .MuiSvgIcon-root {
|
||
user-select: none;
|
||
width: 1em;
|
||
height: 1em;
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
transition: fill 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
fill: currentcolor;
|
||
font-size: 20px;
|
||
}
|
||
`;
|
||
(document.head || document.documentElement).appendChild(moreStyle);
|
||
}
|
||
|
||
// Kefin-owned overflow menu styles (only when we created #user-view-overflow-menu)
|
||
if (!document.getElementById('kefin-custom-overflow-menu-styles')) {
|
||
const overflowStyle = document.createElement('style');
|
||
overflowStyle.id = 'kefin-custom-overflow-menu-styles';
|
||
overflowStyle.textContent = `
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] {
|
||
position: fixed;
|
||
z-index: var(--jf-zIndex-modal);
|
||
inset: 0;
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu].MuiModal-hidden {
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] .MuiBackdrop-root {
|
||
position: fixed;
|
||
display: flex;
|
||
-moz-box-align: center;
|
||
align-items: center;
|
||
-moz-box-pack: center;
|
||
justify-content: center;
|
||
inset: 0;
|
||
background-color: transparent;
|
||
z-index: -1;
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] .MuiPaper-root {
|
||
background-color: var(--jf-palette-background-paper);
|
||
color: var(--jf-palette-text-primary);
|
||
border-radius: 4px;
|
||
box-shadow: var(--Paper-shadow);
|
||
background-image: var(--Paper-overlay);
|
||
position: absolute;
|
||
overflow: hidden auto;
|
||
min-width: 16px;
|
||
min-height: 16px;
|
||
max-width: calc(100% - 32px);
|
||
outline: 0;
|
||
max-height: calc(100% - 96px);
|
||
--Paper-shadow: var(--jf-shadows-8);
|
||
--Paper-overlay: var(--jf-overlays-8);
|
||
opacity: 0;
|
||
transform: scale(0.75, 0.5625);
|
||
transition: opacity 299ms cubic-bezier(0.4, 0, 0.2, 1), transform 199ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
|
||
transform-origin: 0 0 0;
|
||
visibility: hidden;
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu]:not(.MuiModal-hidden) .MuiPaper-root {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: none;
|
||
transition: opacity 299ms cubic-bezier(0.4, 0, 0.2, 1), transform 199ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] .MuiList-root {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 8px 0;
|
||
position: relative;
|
||
outline: 0;
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] .MuiButtonBase-root {
|
||
background-color: transparent;
|
||
outline: 0;
|
||
border: 0;
|
||
margin: 0;
|
||
border-radius: 0;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
vertical-align: middle;
|
||
appearance: none;
|
||
color: inherit;
|
||
font-family: "Noto Sans", sans-serif;
|
||
font-weight: 400;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
-moz-box-pack: start;
|
||
justify-content: flex-start;
|
||
-moz-box-align: center;
|
||
align-items: center;
|
||
position: relative;
|
||
text-decoration: none;
|
||
min-height: 48px;
|
||
padding: 6px 16px;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] .MuiListItemIcon-root {
|
||
color: var(--jf-palette-action-active);
|
||
flex-shrink: 0;
|
||
display: inline-flex;
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] .MuiSvgIcon-root,
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] .material-icons.MuiSvgIcon-root {
|
||
user-select: none;
|
||
width: 1em;
|
||
height: 1em;
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
transition: fill 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
fill: currentcolor;
|
||
font-size: 1.5rem;
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] .MuiTypography-root {
|
||
margin: 0;
|
||
font-family: "Noto Sans", sans-serif;
|
||
font-weight: 400;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
}
|
||
#user-view-overflow-menu[data-kefin-custom-overflow-menu] .MuiTouchRipple-root {
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
position: absolute;
|
||
z-index: 0;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
}
|
||
`;
|
||
(document.head || document.documentElement).appendChild(overflowStyle);
|
||
}
|
||
|
||
removeLegacyKefinMorePopover();
|
||
}
|
||
|
||
/**
|
||
* Add a custom menu link with per-link placements.
|
||
* @param {string} name - Display name for the menu item
|
||
* @param {string} icon - Material icon name
|
||
* @param {string} [url] - URL to navigate to (optional when options.action is set)
|
||
* @param {boolean} openInNewTab - Whether to open in new tab (default: false)
|
||
* @param {string|Object} [containerSelectorOrOptions] - Legacy selector string, or options:
|
||
* { containerSelector, collapsed, sideMenu, topNavigation, userMenu, isAdminLink, isUserLink, action, order }
|
||
* @returns {Promise<boolean>}
|
||
*/
|
||
async function addCustomMenuLink(name, icon, url, openInNewTab = false, containerSelectorOrOptions = DEFAULT_CUSTOM_MENU_SELECTOR) {
|
||
ensureCustomMenuLinkStyles();
|
||
ensureCustomTopNavActiveSync();
|
||
const options = parseCustomMenuLinkOptions(containerSelectorOrOptions);
|
||
const trimmedUrl = url != null ? String(url).trim() : '';
|
||
const action = options.action || '';
|
||
|
||
if (!name || (!trimmedUrl && !action)) {
|
||
WARN('addCustomMenuLink requires name and either url or action');
|
||
return false;
|
||
}
|
||
|
||
if (options.isAdminLink) {
|
||
const admin = await isCurrentUserAdmin();
|
||
if (!admin) {
|
||
LOG(`Skipping admin-only custom menu link (not admin): ${name}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
let containerSelector = DEFAULT_CUSTOM_MENU_SELECTOR;
|
||
if (options.containerSelector) {
|
||
containerSelector = options.containerSelector;
|
||
} else if (options.isAdminLink) {
|
||
containerSelector = ADMIN_MENU_SELECTOR;
|
||
} else if (options.isUserLink) {
|
||
containerSelector = USER_MENU_SELECTOR;
|
||
}
|
||
|
||
const entry = {
|
||
name,
|
||
icon: icon || 'link',
|
||
url: trimmedUrl,
|
||
action,
|
||
openInNewTab: !!openInNewTab,
|
||
collapsed: !!options.collapsed,
|
||
sideMenu: options.sideMenu !== false,
|
||
topNavigation: options.topNavigation || 'none',
|
||
userMenu: !!options.userMenu,
|
||
isAdminLink: !!options.isAdminLink,
|
||
isUserLink: !!options.isUserLink,
|
||
order: options.order,
|
||
containerSelector: containerSelector
|
||
};
|
||
|
||
// Explicit legacy selector (e.g. Configure → .adminMenuOptions): side-only path
|
||
if (typeof containerSelectorOrOptions === 'string'
|
||
&& containerSelectorOrOptions !== DEFAULT_CUSTOM_MENU_SELECTOR) {
|
||
entry.sideMenu = true;
|
||
entry.topNavigation = 'none';
|
||
entry.userMenu = false;
|
||
}
|
||
|
||
upsertCustomMenuLinkRegistry(entry);
|
||
|
||
const ok = withCustomMenuReapplySuppressed(() => !!injectOneCustomMenuLink(entry));
|
||
ensureCustomMenuLinkObserver();
|
||
|
||
return ok;
|
||
}
|
||
|
||
/**
|
||
* Add the link to the existing container
|
||
* @param {Element} container - The custom menu options container
|
||
* @param {Object} entry - Link entry
|
||
* @returns {boolean} - True if successfully added
|
||
*/
|
||
function addLinkToContainer(container, entry) {
|
||
try {
|
||
const name = entry.name;
|
||
const icon = entry.icon || 'link';
|
||
const key = entryKey(entry);
|
||
|
||
if (findByDataAttr(container, 'data-kefin-custom-menu-link', key)) {
|
||
return true;
|
||
}
|
||
|
||
const existingByText = Array.from(container.querySelectorAll('.navMenuOptionText'))
|
||
.find(el => el.textContent === name);
|
||
if (existingByText) {
|
||
return true;
|
||
}
|
||
|
||
const link = document.createElement('a');
|
||
link.className = 'emby-button navMenuOption lnkMediaFolder';
|
||
link.dataset.name = String(name).toLowerCase().replace(/\s+/g, '-');
|
||
|
||
const href = getCustomMenuLinkHref(entry);
|
||
link.href = href;
|
||
|
||
link.setAttribute('data-kefin-custom-menu-link', key);
|
||
|
||
if (!entry.action) {
|
||
applyOpenInNewTab(link, entry.openInNewTab);
|
||
if (isNativeJellyfinMenuHref(href)) {
|
||
link.setAttribute('is', 'emby-linkbutton');
|
||
}
|
||
}
|
||
|
||
const iconSpan = document.createElement('span');
|
||
iconSpan.className = `material-icons navMenuOptionIcon ${icon}`;
|
||
iconSpan.setAttribute('aria-hidden', 'true');
|
||
|
||
const textSpan = document.createElement('span');
|
||
textSpan.className = 'navMenuOptionText';
|
||
textSpan.textContent = name;
|
||
|
||
link.appendChild(iconSpan);
|
||
link.appendChild(textSpan);
|
||
bindCustomMenuLinkActivation(link, entry);
|
||
container.appendChild(link);
|
||
|
||
LOG(`Successfully added custom menu link: ${name}`);
|
||
return true;
|
||
} catch (err) {
|
||
ERR(`Error adding custom menu link ${entry?.name}:`, err);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Waits for ApiClient to be available
|
||
* @param {number} maxWaitMs - Maximum time to wait in milliseconds (default: 10000 = 10 seconds)
|
||
* @param {number} checkInterval - Interval between checks in milliseconds (default: 100)
|
||
* @returns {Promise<Object|null>} - ApiClient object or null if timeout
|
||
*/
|
||
async function waitForApiClient(maxWaitMs = 5000, checkInterval = 100) {
|
||
const startTime = Date.now();
|
||
while (Date.now() - startTime < maxWaitMs) {
|
||
await new Promise(resolve => setTimeout(resolve, checkInterval));
|
||
if (window.ApiClient) {
|
||
return window.ApiClient;
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* Waits for user to be logged in
|
||
* @param {number} maxWaitMs - Maximum time to wait in milliseconds (default: 10000 = 10 seconds)
|
||
* @param {number} checkInterval - Interval between checks in milliseconds (default: 500)
|
||
* @returns {Promise<boolean>} - True if logged in, false if timeout
|
||
*/
|
||
async function waitForLogin(maxWaitMs = 10000, checkInterval = 500) {
|
||
const startTime = Date.now();
|
||
|
||
while (Date.now() - startTime < maxWaitMs) {
|
||
if (window.ApiClient &&
|
||
window.ApiClient._loggedIn &&
|
||
window.ApiClient.accessToken &&
|
||
window.ApiClient.serverAddress) {
|
||
try {
|
||
const token = window.ApiClient.accessToken();
|
||
if (token) {
|
||
LOG('User is logged in');
|
||
return true;
|
||
}
|
||
} catch (e) {
|
||
// Token not available yet
|
||
}
|
||
}
|
||
|
||
await new Promise(resolve => setTimeout(resolve, checkInterval));
|
||
}
|
||
|
||
WARN('Timeout waiting for user login');
|
||
return false;
|
||
}
|
||
|
||
// Page-lifetime cache: normalized name/guid key → plugin Id
|
||
const pluginIdCache = new Map();
|
||
const JS_INJECTOR_ALIASES = ['JavaScript Injector', 'JS Injector'];
|
||
|
||
function normalizePluginKey(value) {
|
||
return String(value || '').trim().toLowerCase();
|
||
}
|
||
|
||
function looksLikeGuid(value) {
|
||
return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(String(value || '').trim());
|
||
}
|
||
|
||
/**
|
||
* Clear cached plugin id(s). Omit argument to clear all.
|
||
* @param {string|string[]} [nameOrGuid]
|
||
*/
|
||
function clearPluginIdCache(nameOrGuid) {
|
||
if (nameOrGuid == null) {
|
||
pluginIdCache.clear();
|
||
return;
|
||
}
|
||
|
||
const keys = Array.isArray(nameOrGuid) ? nameOrGuid : [nameOrGuid];
|
||
const idsToClear = new Set();
|
||
|
||
for (const key of keys) {
|
||
const normalized = normalizePluginKey(key);
|
||
const cachedId = pluginIdCache.get(normalized);
|
||
pluginIdCache.delete(normalized);
|
||
if (cachedId) idsToClear.add(cachedId);
|
||
if (looksLikeGuid(key)) idsToClear.add(String(key).trim());
|
||
}
|
||
|
||
if (idsToClear.size === 0) return;
|
||
|
||
for (const [k, v] of [...pluginIdCache.entries()]) {
|
||
if (idsToClear.has(v) || idsToClear.has(k)) {
|
||
pluginIdCache.delete(k);
|
||
}
|
||
}
|
||
for (const id of idsToClear) {
|
||
pluginIdCache.delete(normalizePluginKey(id));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Resolve a Jellyfin plugin Id by name or GUID (cached for the page lifetime).
|
||
* @param {string|string[]} nameOrGuid - Plugin name, GUID, or alias list tried in order
|
||
* @returns {Promise<string|null>}
|
||
*/
|
||
async function resolvePluginId(nameOrGuid) {
|
||
const aliases = (Array.isArray(nameOrGuid) ? nameOrGuid : [nameOrGuid])
|
||
.filter(a => a != null && String(a).trim() !== '');
|
||
|
||
if (aliases.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
for (const alias of aliases) {
|
||
const cached = pluginIdCache.get(normalizePluginKey(alias));
|
||
if (cached) return cached;
|
||
}
|
||
|
||
const api = window.apiHelper;
|
||
if (!api || typeof api.getPlugins !== 'function') {
|
||
throw new Error('apiHelper.getPlugins is not available');
|
||
}
|
||
|
||
const pluginsData = await api.getPlugins();
|
||
const pluginsList = Array.isArray(pluginsData) ? pluginsData : (pluginsData.Items || []);
|
||
|
||
for (const alias of aliases) {
|
||
const normalized = normalizePluginKey(alias);
|
||
const isGuid = looksLikeGuid(alias);
|
||
const plugin = pluginsList.find(p => {
|
||
if (isGuid) return normalizePluginKey(p.Id) === normalized;
|
||
return normalizePluginKey(p.Name) === normalized;
|
||
});
|
||
|
||
if (plugin && plugin.Id) {
|
||
pluginIdCache.set(normalizePluginKey(plugin.Id), plugin.Id);
|
||
for (const a of aliases) {
|
||
pluginIdCache.set(normalizePluginKey(a), plugin.Id);
|
||
}
|
||
return plugin.Id;
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
async function fetchPluginConfigurationResponse(pluginId) {
|
||
const server = ApiClient._serverAddress;
|
||
return fetch(`${server}/Plugins/${pluginId}/Configuration`, {
|
||
headers: { 'Authorization': getAuthHeader() }
|
||
});
|
||
}
|
||
|
||
/**
|
||
* GET /Plugins/{id}/Configuration for a plugin resolved by name or GUID.
|
||
* On 404, clears cached id(s), re-resolves once, and retries once.
|
||
* @param {string|string[]} nameOrGuid
|
||
* @returns {Promise<Object>}
|
||
*/
|
||
async function getPluginConfiguration(nameOrGuid) {
|
||
let pluginId = await resolvePluginId(nameOrGuid);
|
||
if (!pluginId) {
|
||
throw new Error('Plugin not found');
|
||
}
|
||
|
||
let response = await fetchPluginConfigurationResponse(pluginId);
|
||
|
||
if (response.status === 404) {
|
||
clearPluginIdCache(nameOrGuid);
|
||
clearPluginIdCache(pluginId);
|
||
pluginId = await resolvePluginId(nameOrGuid);
|
||
if (!pluginId) {
|
||
throw new Error('Plugin not found after cache clear');
|
||
}
|
||
response = await fetchPluginConfigurationResponse(pluginId);
|
||
}
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`Failed to get plugin config: ${response.status} ${response.statusText}`);
|
||
}
|
||
|
||
return response.json();
|
||
}
|
||
|
||
/**
|
||
* Saves the current KefinTweaksConfig back to JS Injector plugin
|
||
* @param {Object} config - Optional config object to save. If not provided, uses window.KefinTweaksConfig
|
||
* @param {Object} options - Options for saving
|
||
* @param {boolean} options.waitForLogin - Whether to wait for login if not logged in (default: true)
|
||
* @param {number} options.loginWaitTime - Maximum time to wait for login in ms (default: 10000)
|
||
* @returns {Promise<boolean>} - Success status
|
||
*/
|
||
async function saveConfigToJavaScriptInjector(config = null, options = {}) {
|
||
try {
|
||
const { waitForLogin: shouldWaitForLogin = true, loginWaitTime = 10000 } = options;
|
||
|
||
// Check if ApiClient is available
|
||
if (!window.ApiClient) {
|
||
if (shouldWaitForLogin) {
|
||
LOG('ApiClient not available, waiting for initialization...');
|
||
const apiClient = await waitForApiClient(loginWaitTime);
|
||
if (!apiClient) {
|
||
WARN('ApiClient not available after waiting, cannot save config');
|
||
return false;
|
||
}
|
||
} else {
|
||
throw new Error('ApiClient not available');
|
||
}
|
||
}
|
||
|
||
// Check if user is logged in
|
||
const isLoggedIn = window.ApiClient._loggedIn &&
|
||
window.ApiClient.accessToken &&
|
||
window.ApiClient.serverAddress;
|
||
|
||
if (!isLoggedIn) {
|
||
if (shouldWaitForLogin) {
|
||
LOG('User not logged in, waiting for login...');
|
||
const loggedIn = await waitForLogin(loginWaitTime);
|
||
if (!loggedIn) {
|
||
WARN('User not logged in after waiting, cannot save config');
|
||
return false;
|
||
}
|
||
} else {
|
||
throw new Error('User not logged in');
|
||
}
|
||
}
|
||
|
||
// Use provided config or fall back to window.KefinTweaksConfig
|
||
const configToSave = config || window.KefinTweaksConfig;
|
||
if (!configToSave) {
|
||
throw new Error('No config provided and window.KefinTweaksConfig is not available');
|
||
}
|
||
|
||
const pluginId = await resolvePluginId(JS_INJECTOR_ALIASES);
|
||
if (!pluginId) {
|
||
WARN('JavaScript Injector plugin not found, cannot save config');
|
||
return false;
|
||
}
|
||
|
||
const injectorConfig = await getPluginConfiguration(pluginId);
|
||
const server = ApiClient._serverAddress;
|
||
const configUrl = `${server}/Plugins/${pluginId}/Configuration`;
|
||
|
||
// Ensure CustomJavaScripts array exists
|
||
if (!injectorConfig.CustomJavaScripts) {
|
||
injectorConfig.CustomJavaScripts = [];
|
||
}
|
||
|
||
// Create the script content
|
||
const scriptContent = `// KefinTweaks Configuration
|
||
// This file is automatically generated by KefinTweaks Configuration UI
|
||
// Do not edit manually unless you know what you're doing
|
||
|
||
window.KefinTweaksConfig = ${JSON.stringify(configToSave, null, 2)};`;
|
||
|
||
// Build / refresh KefinTweaks-injector preload entry (same POST)
|
||
let injectorScriptContent = null;
|
||
try {
|
||
const resolvedOrSymbolic = configToSave.kefinTweaksRootResolved || configToSave.kefinTweaksRoot || '';
|
||
const root = resolvedOrSymbolic.endsWith('/')
|
||
? resolvedOrSymbolic
|
||
: resolvedOrSymbolic + '/';
|
||
if (root && root !== '/') {
|
||
if (!window.KefinTweaksLoader) {
|
||
await new Promise((resolve, reject) => {
|
||
const url = `${root}scripts/kefinTweaks-loader.js`;
|
||
const existing = document.querySelector(`script[src="${url}"]`);
|
||
if (existing && window.KefinTweaksLoader) {
|
||
resolve();
|
||
return;
|
||
}
|
||
const script = document.createElement('script');
|
||
script.src = url;
|
||
script.async = false;
|
||
script.onload = () => resolve();
|
||
script.onerror = () => reject(new Error('Failed to load kefinTweaks-loader.js'));
|
||
document.head.appendChild(script);
|
||
});
|
||
}
|
||
const Loader = window.KefinTweaksLoader;
|
||
if (Loader) {
|
||
Loader.ensureKefinTweaksApi(Loader.SCRIPT_DEFINITIONS);
|
||
const major = await window.KefinTweaks.getJellyfinMajorVersion();
|
||
const planRoot = Loader.getResolvedKefinRoot
|
||
? Loader.getResolvedKefinRoot(configToSave)
|
||
: root;
|
||
const plan = Loader.buildLoadPlan(configToSave, major, {
|
||
root: planRoot,
|
||
configOnly: configToSave.enabled === false
|
||
});
|
||
injectorScriptContent = Loader.buildInjectorScript(plan);
|
||
LOG(`Built KefinTweaks-injector (${plan.assets.length} assets, major=${major})`);
|
||
}
|
||
}
|
||
} catch (loaderErr) {
|
||
WARN('Could not build KefinTweaks-injector entry:', loaderErr);
|
||
}
|
||
|
||
injectorConfig.CustomJavaScripts = (window.KefinTweaksLoader
|
||
? window.KefinTweaksLoader.upsertInjectorEntries(injectorConfig.CustomJavaScripts, {
|
||
configScriptContent: scriptContent,
|
||
injectorScriptContent: injectorScriptContent
|
||
})
|
||
: (() => {
|
||
// Fallback: Config-only upsert if loader unavailable
|
||
const list = injectorConfig.CustomJavaScripts || [];
|
||
const idx = list.findIndex((s) => s.Name === 'KefinTweaks-Config');
|
||
const entry = {
|
||
Name: 'KefinTweaks-Config',
|
||
Script: scriptContent,
|
||
Enabled: true,
|
||
RequiresAuthentication: false
|
||
};
|
||
if (idx !== -1) list[idx] = { ...list[idx], ...entry };
|
||
else list.push(entry);
|
||
return list;
|
||
})());
|
||
|
||
// Save the updated configuration
|
||
const saveResponse = await fetch(configUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Authorization': getAuthHeader(),
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(injectorConfig)
|
||
});
|
||
|
||
if (!saveResponse.ok) {
|
||
throw new Error(`Failed to save plugin config: ${saveResponse.statusText}`);
|
||
}
|
||
|
||
LOG('Successfully saved config (+ injector preload) to JS Injector plugin');
|
||
return true;
|
||
} catch (err) {
|
||
ERR('Error saving config to JS Injector:', err);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
const KEFIN_CONFIG_ENTRY_NAME = 'KefinTweaks-Config';
|
||
const KEFIN_CONFIG_SCRIPT_MARKER = 'window.KefinTweaksConfig = {';
|
||
const DEFAULT_BACKUP_KEEP_COUNT = 5;
|
||
|
||
function isKefinConfigScriptEntry(entry) {
|
||
return !!(entry?.Script && String(entry.Script).includes(KEFIN_CONFIG_SCRIPT_MARKER));
|
||
}
|
||
|
||
function parseConfigFromScript(script) {
|
||
if (!script || typeof script !== 'string') return null;
|
||
const prefix = 'window.KefinTweaksConfig = ';
|
||
const idx = script.indexOf(prefix);
|
||
if (idx < 0) return null;
|
||
let jsonText = script.slice(idx + prefix.length).trim();
|
||
if (jsonText.endsWith(';')) jsonText = jsonText.slice(0, -1).trim();
|
||
try {
|
||
return JSON.parse(jsonText);
|
||
} catch (e) {
|
||
WARN('Failed to parse KefinTweaksConfig from script:', e);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function parseBackupTimestamp(name, script) {
|
||
const createdMatch = String(script || '').match(/Created:\s*(\d{4}-\d{2}-\d{2}T[^\s\n]+)/i);
|
||
if (createdMatch) {
|
||
const d = new Date(createdMatch[1]);
|
||
if (!Number.isNaN(d.getTime())) return d;
|
||
}
|
||
const nameMatch = String(name || '').match(/(\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2})/);
|
||
if (nameMatch) {
|
||
const iso = nameMatch[1].replace(/T(\d{2})-(\d{2})-(\d{2})/, 'T$1:$2:$3') + 'Z';
|
||
const d = new Date(iso);
|
||
if (!Number.isNaN(d.getTime())) return d;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function buildConfigBackupScript(config, reason) {
|
||
const reasonLine = reason ? `// Reason: ${reason}\n` : '';
|
||
return `// KefinTweaks Configuration Backup
|
||
${reasonLine}// Created: ${new Date().toISOString()}
|
||
// Do not edit manually
|
||
|
||
window.KefinTweaksConfig = ${JSON.stringify(config, null, 2)};`;
|
||
}
|
||
|
||
function makeBackupName(kind = 'manual') {
|
||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
|
||
if (kind === 'scheduled') {
|
||
return `KefinTweaks-Config-ScheduledBackup-${timestamp}`;
|
||
}
|
||
return `KefinTweaks-Config-Backup-${timestamp}`;
|
||
}
|
||
|
||
function getBackupKindFromName(name) {
|
||
const n = String(name || '');
|
||
if (n.includes('ScheduledBackup')) return 'scheduled';
|
||
if (n.includes('SkinConflictsRemoved')) return 'skin-conflict';
|
||
return 'manual';
|
||
}
|
||
|
||
function getBackupKindLabel(kind) {
|
||
if (kind === 'scheduled') return 'Scheduled';
|
||
if (kind === 'skin-conflict') return 'Skin conflict';
|
||
return 'Manual';
|
||
}
|
||
|
||
async function fetchInjectorConfigForBackups() {
|
||
const pluginId = await resolvePluginId(JS_INJECTOR_ALIASES);
|
||
if (!pluginId) throw new Error('JavaScript Injector plugin not found');
|
||
const injectorConfig = await getPluginConfiguration(pluginId);
|
||
if (!injectorConfig.CustomJavaScripts) injectorConfig.CustomJavaScripts = [];
|
||
return { pluginId, injectorConfig };
|
||
}
|
||
|
||
async function postInjectorConfig(pluginId, injectorConfig) {
|
||
const server = ApiClient._serverAddress;
|
||
const configUrl = `${server}/Plugins/${pluginId}/Configuration`;
|
||
const saveResponse = await fetch(configUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
Authorization: getAuthHeader(),
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(injectorConfig)
|
||
});
|
||
if (!saveResponse.ok) {
|
||
throw new Error(`Failed to save injector config: ${saveResponse.statusText}`);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
async function listKefinConfigBackups() {
|
||
try {
|
||
const { injectorConfig } = await fetchInjectorConfigForBackups();
|
||
const backups = (injectorConfig.CustomJavaScripts || [])
|
||
.filter((entry) => isKefinConfigScriptEntry(entry) && entry.Name !== KEFIN_CONFIG_ENTRY_NAME)
|
||
.map((entry) => {
|
||
const date = parseBackupTimestamp(entry.Name, entry.Script);
|
||
const kind = getBackupKindFromName(entry.Name);
|
||
return {
|
||
name: entry.Name,
|
||
date,
|
||
dateLabel: date ? date.toLocaleString() : 'Unknown date',
|
||
kind,
|
||
kindLabel: getBackupKindLabel(kind),
|
||
enabled: entry.Enabled === true,
|
||
script: entry.Script
|
||
};
|
||
});
|
||
backups.sort((a, b) => {
|
||
const at = a.date ? a.date.getTime() : 0;
|
||
const bt = b.date ? b.date.getTime() : 0;
|
||
return bt - at;
|
||
});
|
||
return backups;
|
||
} catch (err) {
|
||
ERR('Error listing config backups:', err);
|
||
return [];
|
||
}
|
||
}
|
||
|
||
async function createKefinConfigBackup(config = null, options = {}) {
|
||
const { reason = 'manual', kind } = options;
|
||
try {
|
||
const configToBackup = config || window.KefinTweaksConfig;
|
||
if (!configToBackup) throw new Error('No config available to backup');
|
||
|
||
const backupKind = kind
|
||
|| (reason === 'scheduled-daily' ? 'scheduled' : 'manual');
|
||
const { pluginId, injectorConfig } = await fetchInjectorConfigForBackups();
|
||
const backupName = makeBackupName(backupKind);
|
||
injectorConfig.CustomJavaScripts.push({
|
||
Name: backupName,
|
||
Script: buildConfigBackupScript(configToBackup, reason),
|
||
Enabled: false,
|
||
RequiresAuthentication: false
|
||
});
|
||
await postInjectorConfig(pluginId, injectorConfig);
|
||
LOG(`Created config backup: ${backupName}`);
|
||
return { ok: true, name: backupName };
|
||
} catch (err) {
|
||
ERR('Error creating config backup:', err);
|
||
return { ok: false, error: err };
|
||
}
|
||
}
|
||
|
||
async function deleteKefinConfigBackup(name) {
|
||
return deleteKefinConfigBackups(name ? [name] : []);
|
||
}
|
||
|
||
async function deleteKefinConfigBackups(names) {
|
||
try {
|
||
const nameList = (Array.isArray(names) ? names : [])
|
||
.map((n) => String(n || '').trim())
|
||
.filter((n) => n && n !== KEFIN_CONFIG_ENTRY_NAME);
|
||
if (!nameList.length) {
|
||
throw new Error('No backups selected');
|
||
}
|
||
const removeSet = new Set(nameList);
|
||
const { pluginId, injectorConfig } = await fetchInjectorConfigForBackups();
|
||
const before = injectorConfig.CustomJavaScripts.length;
|
||
injectorConfig.CustomJavaScripts = injectorConfig.CustomJavaScripts.filter(
|
||
(entry) => !removeSet.has(entry.Name)
|
||
);
|
||
const removed = before - injectorConfig.CustomJavaScripts.length;
|
||
if (removed === 0) {
|
||
throw new Error('No matching backups found to delete');
|
||
}
|
||
await postInjectorConfig(pluginId, injectorConfig);
|
||
LOG(`Deleted ${removed} config backup(s)`);
|
||
return { ok: true, removed };
|
||
} catch (err) {
|
||
ERR('Error deleting config backup(s):', err);
|
||
return { ok: false, removed: 0, error: err };
|
||
}
|
||
}
|
||
|
||
async function pruneKefinConfigBackups(keepCount = DEFAULT_BACKUP_KEEP_COUNT) {
|
||
try {
|
||
const keep = Math.max(1, Math.floor(Number(keepCount) || DEFAULT_BACKUP_KEEP_COUNT));
|
||
const { pluginId, injectorConfig } = await fetchInjectorConfigForBackups();
|
||
const backups = (injectorConfig.CustomJavaScripts || [])
|
||
.filter((entry) => isKefinConfigScriptEntry(entry) && entry.Name !== KEFIN_CONFIG_ENTRY_NAME)
|
||
.map((entry) => ({
|
||
entry,
|
||
date: parseBackupTimestamp(entry.Name, entry.Script)
|
||
}));
|
||
backups.sort((a, b) => {
|
||
const at = a.date ? a.date.getTime() : 0;
|
||
const bt = b.date ? b.date.getTime() : 0;
|
||
return bt - at;
|
||
});
|
||
if (backups.length <= keep) return { pruned: 0 };
|
||
|
||
const toRemove = new Set(backups.slice(keep).map((b) => b.entry.Name));
|
||
injectorConfig.CustomJavaScripts = injectorConfig.CustomJavaScripts.filter(
|
||
(entry) => !toRemove.has(entry.Name)
|
||
);
|
||
await postInjectorConfig(pluginId, injectorConfig);
|
||
LOG(`Pruned ${toRemove.size} config backup(s); kept ${keep}`);
|
||
return { pruned: toRemove.size };
|
||
} catch (err) {
|
||
ERR('Error pruning config backups:', err);
|
||
return { pruned: 0, error: err };
|
||
}
|
||
}
|
||
|
||
async function restoreKefinConfigBackup(name, options = {}) {
|
||
const { backupCurrentFirst = false } = options;
|
||
try {
|
||
if (!name || name === KEFIN_CONFIG_ENTRY_NAME) {
|
||
throw new Error('Invalid backup name');
|
||
}
|
||
const { injectorConfig } = await fetchInjectorConfigForBackups();
|
||
const entry = (injectorConfig.CustomJavaScripts || []).find((e) => e.Name === name);
|
||
if (!entry || !isKefinConfigScriptEntry(entry)) {
|
||
throw new Error(`Backup not found: ${name}`);
|
||
}
|
||
const restoredConfig = parseConfigFromScript(entry.Script);
|
||
if (!restoredConfig || typeof restoredConfig !== 'object') {
|
||
throw new Error('Backup script does not contain a valid KefinTweaksConfig');
|
||
}
|
||
|
||
if (backupCurrentFirst) {
|
||
const current = window.KefinTweaksConfig || null;
|
||
if (current) {
|
||
const backupResult = await createKefinConfigBackup(current, {
|
||
reason: 'before-restore'
|
||
});
|
||
if (!backupResult.ok) {
|
||
throw new Error('Failed to backup current config before restore');
|
||
}
|
||
}
|
||
}
|
||
|
||
window.KefinTweaksConfig = restoredConfig;
|
||
const ok = await saveConfigToJavaScriptInjector(restoredConfig);
|
||
if (!ok) throw new Error('Failed to save restored config');
|
||
LOG(`Restored config from backup: ${name}`);
|
||
return true;
|
||
} catch (err) {
|
||
ERR('Error restoring config backup:', err);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
function normalizeBackupsSettings(config) {
|
||
const raw = config?.backups && typeof config.backups === 'object' ? config.backups : {};
|
||
return {
|
||
scheduledEnabled: raw.scheduledEnabled === true,
|
||
keepCount: Math.max(1, Math.floor(Number(raw.keepCount) || DEFAULT_BACKUP_KEEP_COUNT)),
|
||
lastScheduledAt: raw.lastScheduledAt || null
|
||
};
|
||
}
|
||
|
||
function sameCalendarDay(isoA, dateB = new Date()) {
|
||
if (!isoA) return false;
|
||
const a = new Date(isoA);
|
||
if (Number.isNaN(a.getTime())) return false;
|
||
return (
|
||
a.getUTCFullYear() === dateB.getUTCFullYear() &&
|
||
a.getUTCMonth() === dateB.getUTCMonth() &&
|
||
a.getUTCDate() === dateB.getUTCDate()
|
||
);
|
||
}
|
||
|
||
async function maybeRunScheduledBackup(config = null) {
|
||
try {
|
||
const cfg = config || window.KefinTweaksConfig;
|
||
if (!cfg) return { ran: false, reason: 'no-config' };
|
||
const settings = normalizeBackupsSettings(cfg);
|
||
if (!settings.scheduledEnabled) return { ran: false, reason: 'disabled' };
|
||
if (sameCalendarDay(settings.lastScheduledAt)) {
|
||
return { ran: false, reason: 'already-today' };
|
||
}
|
||
|
||
const created = await createKefinConfigBackup(cfg, {
|
||
reason: 'scheduled-daily',
|
||
kind: 'scheduled'
|
||
});
|
||
if (!created.ok) return { ran: false, reason: 'create-failed' };
|
||
|
||
await pruneKefinConfigBackups(settings.keepCount);
|
||
|
||
cfg.backups = {
|
||
...settings,
|
||
lastScheduledAt: new Date().toISOString()
|
||
};
|
||
window.KefinTweaksConfig = cfg;
|
||
await saveConfigToJavaScriptInjector(cfg);
|
||
LOG('Scheduled daily config backup completed');
|
||
return { ran: true, name: created.name };
|
||
} catch (err) {
|
||
ERR('Error running scheduled backup:', err);
|
||
return { ran: false, reason: 'error', error: err };
|
||
}
|
||
}
|
||
|
||
// Once per page load: run scheduled backup after login if enabled
|
||
(async () => {
|
||
try {
|
||
const loggedIn = await waitForLogin(20000);
|
||
if (!loggedIn || !window.KefinTweaksConfig) return;
|
||
await maybeRunScheduledBackup(window.KefinTweaksConfig);
|
||
} catch (e) {
|
||
/* ignore */
|
||
}
|
||
})();
|
||
|
||
|
||
let _watchlistTabIndex = null;
|
||
|
||
async function fetchWatchlistTabIndex() {
|
||
// Fetch the tab index as we do in addCustomMenuLink
|
||
try {
|
||
const response = await fetch(`${ApiClient._serverAddress}/CustomTabs/Config`, {
|
||
method: "GET",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
"Authorization": getAuthHeader(),
|
||
},
|
||
});
|
||
const data = await response.json();
|
||
let tabIndex = null;
|
||
data.forEach((tab, index) => {
|
||
if (tab.ContentHtml.indexOf('sections watchlist') !== -1) {
|
||
tabIndex = index + 2;
|
||
}
|
||
});
|
||
return tabIndex;
|
||
} catch (err) {
|
||
WARN('CustomTabs plugin not found.');
|
||
return null;
|
||
}
|
||
}
|
||
|
||
async function getWatchlistUrl() {
|
||
if (window.KefinTweaksUtils._watchlistUrl) {
|
||
return window.KefinTweaksUtils._watchlistUrl;
|
||
}
|
||
const isModernUI = window.KefinTweaksUtils.isModernUI();
|
||
const watchlistTabIndex = await getWatchlistTabIndex() || null;
|
||
|
||
let watchlistUrl = '#/watchlist';
|
||
|
||
if (watchlistTabIndex !== null && watchlistTabIndex !== undefined) {
|
||
watchlistUrl = `#/home?tab=${watchlistTabIndex}`;
|
||
}
|
||
window.KefinTweaksUtils._watchlistUrl = watchlistUrl;
|
||
return watchlistUrl;
|
||
}
|
||
|
||
/**
|
||
* Get watchlist tab index, fetching if not yet set
|
||
* @returns {number|null} The watchlist tab index or null if not found
|
||
*/
|
||
async function getWatchlistTabIndex() {
|
||
if (_watchlistTabIndex !== null) {
|
||
return _watchlistTabIndex;
|
||
}
|
||
|
||
_watchlistTabIndex = await fetchWatchlistTabIndex();
|
||
return _watchlistTabIndex;
|
||
}
|
||
|
||
// ----- Custom pages (hash routes → .customPage in skinBody) -----
|
||
const DISALLOWED_CUSTOM_PAGE_SEGMENTS = new Set([
|
||
'home', 'shows', 'movies', 'list', 'playlists', 'collections', 'books', 'livetv', 'music'
|
||
]);
|
||
/** @type {Map<string, { hrefPath: string, title: string, contentHtml: string, pageEl: HTMLElement|null, safeTitle: string, onShow: Function|null }>} */
|
||
const customPageRegistry = new Map();
|
||
let customPageViewHandlerUnregister = null;
|
||
let customPageHashChangeBound = false;
|
||
let navigationChromeHandlerInstalled = false;
|
||
/** @type {string|null} */
|
||
let activeCustomPageTitle = null;
|
||
let customPageTitleGuardObserver = null;
|
||
let customPageTitleGuardApplying = false;
|
||
let fallbackReadyTimer = null;
|
||
const FALLBACK_READY_MS = 3000;
|
||
/** @type {string|null} */
|
||
let activePageWatchlistUrl = null;
|
||
|
||
function normalizeCustomPageHref(href) {
|
||
let raw = String(href || '').trim();
|
||
if (!raw) return null;
|
||
if (!raw.startsWith('#')) raw = `#${raw}`;
|
||
if (!raw.startsWith('#/')) raw = `#/${raw.slice(1).replace(/^\//, '')}`;
|
||
// Path only (no query)
|
||
const path = raw.split('?')[0];
|
||
// Collapse trailing slash except "#/"
|
||
const normalized = path.length > 2 && path.endsWith('/') ? path.slice(0, -1) : path;
|
||
return normalized;
|
||
}
|
||
|
||
function getCustomPagePathFromHash(hash = window.location.hash) {
|
||
const h = String(hash || '').split('?')[0];
|
||
if (!h.startsWith('#/')) return null;
|
||
const normalized = h.length > 2 && h.endsWith('/') ? h.slice(0, -1) : h;
|
||
return normalized;
|
||
}
|
||
|
||
function getCustomPageSegment(hrefPath) {
|
||
const match = String(hrefPath || '').match(/^#\/([^\/\?]+)/);
|
||
return match ? match[1].toLowerCase() : null;
|
||
}
|
||
|
||
function isNativeJellyfinMenuHref(url) {
|
||
const path = normalizeCustomPageHref(url);
|
||
let segment = getCustomPageSegment(path);
|
||
if (!segment) return false;
|
||
if (segment.endsWith('.html')) segment = segment.slice(0, -5);
|
||
return DISALLOWED_CUSTOM_PAGE_SEGMENTS.has(segment);
|
||
}
|
||
|
||
function slugifyCustomPageTitle(title) {
|
||
const slug = String(title || 'page')
|
||
.trim()
|
||
.toLowerCase()
|
||
.replace(/[^a-z0-9]+/g, '-')
|
||
.replace(/^-+|-+$/g, '');
|
||
return slug || 'page';
|
||
}
|
||
|
||
/** Re-apply plugin SoT custom-page CSS (window.KefinTweaksCustomPageStyles). No local CSS blob. */
|
||
function ensureCustomPageStyles() {
|
||
const css = window.KefinTweaksCustomPageStyles;
|
||
if (typeof css !== 'string' || !css) return;
|
||
let style = document.getElementById('kefin-custom-page-styles');
|
||
if (!style) {
|
||
style = document.createElement('style');
|
||
style.id = 'kefin-custom-page-styles';
|
||
(document.head || document.documentElement).appendChild(style);
|
||
}
|
||
style.textContent = css;
|
||
}
|
||
|
||
function syncCustomPageActiveClass(active) {
|
||
const root = document.getElementById('reactRoot') || document.documentElement;
|
||
if (!root) return;
|
||
root.classList.toggle('kefin-custom-page-active', !!active);
|
||
}
|
||
|
||
function clearFallbackReadyTimer() {
|
||
if (fallbackReadyTimer != null) {
|
||
clearTimeout(fallbackReadyTimer);
|
||
fallbackReadyTimer = null;
|
||
}
|
||
}
|
||
|
||
function setFallbackReadyAttr(ready) {
|
||
const fallbackPage = document.getElementById('fallbackPage');
|
||
if (!fallbackPage) return;
|
||
if (ready) {
|
||
fallbackPage.setAttribute('data-kefin-fallback-ready', 'true');
|
||
} else {
|
||
fallbackPage.removeAttribute('data-kefin-fallback-ready');
|
||
}
|
||
}
|
||
|
||
/** Reset attr on nav; if no custom page active, show native fallback after 3s. */
|
||
function syncFallbackPageReadyState(customPageActive) {
|
||
clearFallbackReadyTimer();
|
||
setFallbackReadyAttr(false);
|
||
if (customPageActive) return;
|
||
fallbackReadyTimer = setTimeout(() => {
|
||
fallbackReadyTimer = null;
|
||
const root = document.getElementById('reactRoot') || document.documentElement;
|
||
if (root && !root.classList.contains('kefin-custom-page-active')) {
|
||
setFallbackReadyAttr(true);
|
||
}
|
||
}, FALLBACK_READY_MS);
|
||
}
|
||
|
||
function updateActivePage() {
|
||
const hash = String(window.location.hash || '');
|
||
let watchlistUrl = activePageWatchlistUrl || window.KefinTweaksUtils?._watchlistUrl || null;
|
||
|
||
if (!watchlistUrl) {
|
||
getWatchlistUrl().then((url) => {
|
||
activePageWatchlistUrl = url;
|
||
updateActivePage();
|
||
}).catch(() => { /* ignore */ });
|
||
}
|
||
|
||
let page = '';
|
||
const tabMatch = hash.match(/[?&]tab=(\d+)/);
|
||
const tabIndex = tabMatch ? tabMatch[1] : null;
|
||
|
||
if (hash.includes('/home') && tabIndex === '1') {
|
||
page = 'favorites';
|
||
} else if (watchlistUrl && hash.includes(watchlistUrl)) {
|
||
page = 'watchlist';
|
||
} else if (hash === '#/' || hash === '#' || hash === '' || (hash.includes('#/home') && (tabIndex === 0 || tabIndex === null))) {
|
||
page = 'home';
|
||
} else if (hash.includes('#/tv')) {
|
||
page = 'tv';
|
||
} else if (hash.includes('#/movies')) {
|
||
page = 'movies';
|
||
} else if (hash.includes('#/playlists')) {
|
||
page = 'playlists';
|
||
} else if (hash.includes('#/collections')) {
|
||
page = 'collections';
|
||
} else if (hash.includes('#/music')) {
|
||
page = 'music';
|
||
} else if (hash.includes('#/games')) {
|
||
page = 'games';
|
||
}
|
||
|
||
if (document.documentElement.dataset.activePage !== page) {
|
||
document.documentElement.dataset.activePage = page;
|
||
}
|
||
}
|
||
|
||
function emitCustomPageShow(entry, page) {
|
||
try {
|
||
if (typeof entry.onShow === 'function') {
|
||
entry.onShow(page);
|
||
}
|
||
} catch (err) {
|
||
WARN('custom page onShow failed', entry.hrefPath, err);
|
||
}
|
||
try {
|
||
document.dispatchEvent(new CustomEvent('kefin:custompage-show', {
|
||
detail: {
|
||
hrefPath: entry.hrefPath,
|
||
title: entry.title,
|
||
page
|
||
}
|
||
}));
|
||
} catch (err) {
|
||
WARN('kefin:custompage-show dispatch failed', err);
|
||
}
|
||
}
|
||
|
||
function findCustomPageHost() {
|
||
const candidates = Array.from(document.querySelectorAll('.skinBody:not(.mainAnimatedPages)'));
|
||
const withVisiblePage = candidates.find((body) => body.querySelector('.page:not(.hide)'));
|
||
return withVisiblePage || candidates[0] || null;
|
||
}
|
||
|
||
function applyCustomPageTitles(title) {
|
||
const t = String(title || '').trim();
|
||
if (!t) return;
|
||
customPageTitleGuardApplying = true;
|
||
try {
|
||
try {
|
||
document.title = t;
|
||
} catch (_) { /* ignore */ }
|
||
document.querySelectorAll('h3.pageTitle').forEach((el) => {
|
||
if (el.textContent !== t) el.textContent = t;
|
||
});
|
||
} finally {
|
||
customPageTitleGuardApplying = false;
|
||
}
|
||
}
|
||
|
||
function customPageTitlesNeedSync(expected) {
|
||
if (!expected) return false;
|
||
if (document.title !== expected) return true;
|
||
const pageTitles = document.querySelectorAll('h3.pageTitle');
|
||
for (const el of pageTitles) {
|
||
if (el.textContent !== expected) return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function stopCustomPageTitleGuard() {
|
||
if (customPageTitleGuardObserver) {
|
||
customPageTitleGuardObserver.disconnect();
|
||
customPageTitleGuardObserver = null;
|
||
}
|
||
activeCustomPageTitle = null;
|
||
}
|
||
|
||
function ensureCustomPageTitleGuard(title) {
|
||
const t = String(title || '').trim();
|
||
if (!t) {
|
||
stopCustomPageTitleGuard();
|
||
return;
|
||
}
|
||
activeCustomPageTitle = t;
|
||
applyCustomPageTitles(t);
|
||
|
||
if (customPageTitleGuardObserver) return;
|
||
|
||
const syncIfNeeded = () => {
|
||
if (customPageTitleGuardApplying || !activeCustomPageTitle) return;
|
||
if (customPageTitlesNeedSync(activeCustomPageTitle)) {
|
||
applyCustomPageTitles(activeCustomPageTitle);
|
||
}
|
||
};
|
||
|
||
customPageTitleGuardObserver = new MutationObserver(() => {
|
||
syncIfNeeded();
|
||
});
|
||
|
||
const titleEl = document.querySelector('head > title') || (() => {
|
||
const el = document.createElement('title');
|
||
(document.head || document.documentElement).appendChild(el);
|
||
return el;
|
||
})();
|
||
customPageTitleGuardObserver.observe(titleEl, {
|
||
childList: true,
|
||
characterData: true,
|
||
subtree: true
|
||
});
|
||
|
||
// childList only: Jellyfin typically replaces pageTitle text via textContent (childList)
|
||
const root = document.getElementById('reactRoot') || document.body || document.documentElement;
|
||
if (root) {
|
||
customPageTitleGuardObserver.observe(root, {
|
||
childList: true,
|
||
subtree: true
|
||
});
|
||
}
|
||
|
||
document.querySelectorAll('h3.pageTitle').forEach((el) => {
|
||
customPageTitleGuardObserver.observe(el, {
|
||
childList: true,
|
||
characterData: true,
|
||
subtree: true
|
||
});
|
||
});
|
||
}
|
||
|
||
function reviveScriptsInRoot(root) {
|
||
if (!root || root.getAttribute('data-kefin-scripts-revived') === 'true') return;
|
||
const scripts = Array.from(root.querySelectorAll('script'));
|
||
scripts.forEach((oldScript) => {
|
||
const neo = document.createElement('script');
|
||
Array.from(oldScript.attributes).forEach((attr) => {
|
||
neo.setAttribute(attr.name, attr.value);
|
||
});
|
||
if (!oldScript.src) {
|
||
neo.textContent = oldScript.textContent;
|
||
}
|
||
oldScript.parentNode.replaceChild(neo, oldScript);
|
||
});
|
||
root.setAttribute('data-kefin-scripts-revived', 'true');
|
||
}
|
||
|
||
function ensureCustomPageElement(entry) {
|
||
if (entry.pageEl && document.body.contains(entry.pageEl)) {
|
||
return entry.pageEl;
|
||
}
|
||
|
||
const existing = document.getElementById(`customPage-${entry.safeTitle}`);
|
||
if (existing) {
|
||
entry.pageEl = existing;
|
||
return existing;
|
||
}
|
||
|
||
const host = findCustomPageHost();
|
||
if (!host) return null;
|
||
|
||
const page = document.createElement('div');
|
||
page.id = `customPage-${entry.safeTitle}`;
|
||
page.setAttribute('data-role', 'page');
|
||
page.className = 'page customPage mainAnimatedPage libraryPage hide';
|
||
page.setAttribute('data-title', entry.title);
|
||
page.setAttribute('data-backbutton', 'true');
|
||
page.setAttribute('data-menubutton', 'false');
|
||
page.setAttribute('data-kefin-custom-page', entry.hrefPath);
|
||
|
||
const padded = document.createElement('div');
|
||
padded.className = 'padded-left padded-right';
|
||
padded.innerHTML = entry.contentHtml || '';
|
||
page.appendChild(padded);
|
||
|
||
host.appendChild(page);
|
||
// innerHTML does not execute scripts — re-create them in order once
|
||
reviveScriptsInRoot(padded);
|
||
entry.pageEl = page;
|
||
return page;
|
||
}
|
||
|
||
function showCustomPageEntry(entry) {
|
||
ensureCustomPageStyles();
|
||
const page = ensureCustomPageElement(entry);
|
||
if (!page) return false;
|
||
page.classList.remove('hide');
|
||
page.setAttribute('data-title', entry.title);
|
||
ensureCustomPageTitleGuard(entry.title);
|
||
syncCustomPageActiveClass(true);
|
||
emitCustomPageShow(entry, page);
|
||
return true;
|
||
}
|
||
|
||
function hideCustomPageEntry(entry) {
|
||
let page = entry.pageEl;
|
||
if (!page || !document.body.contains(page)) {
|
||
page = document.getElementById(`customPage-${entry.safeTitle}`);
|
||
}
|
||
if (!page) {
|
||
page = Array.from(document.querySelectorAll('[data-kefin-custom-page]')).find(
|
||
(el) => el.getAttribute('data-kefin-custom-page') === entry.hrefPath
|
||
) || null;
|
||
}
|
||
if (!page) return;
|
||
page.classList.add('hide');
|
||
entry.pageEl = page;
|
||
}
|
||
|
||
function syncAllCustomPages() {
|
||
const currentPath = getCustomPagePathFromHash();
|
||
let matched = null;
|
||
customPageRegistry.forEach((entry) => {
|
||
if (currentPath && currentPath === entry.hrefPath) {
|
||
matched = entry;
|
||
showCustomPageEntry(entry);
|
||
} else {
|
||
hideCustomPageEntry(entry);
|
||
}
|
||
});
|
||
syncCustomPageActiveClass(!!matched);
|
||
if (!matched) {
|
||
stopCustomPageTitleGuard();
|
||
}
|
||
syncFallbackPageReadyState(!!matched);
|
||
}
|
||
|
||
function syncCustomPagesAndTopNavActive() {
|
||
syncAllCustomPages();
|
||
syncCustomTopNavActiveState();
|
||
}
|
||
|
||
function ensureNavigationChromeHandler() {
|
||
if (navigationChromeHandlerInstalled) return;
|
||
navigationChromeHandlerInstalled = true;
|
||
const sync = () => {
|
||
updateActivePage();
|
||
syncCustomPagesAndTopNavActive();
|
||
};
|
||
onViewPage(() => {
|
||
sync();
|
||
}, { pages: [] });
|
||
window.addEventListener('hashchange', sync);
|
||
customPageHashChangeBound = true;
|
||
sync();
|
||
LOG('Navigation chrome handler installed (active-page + custom pages + fallback)');
|
||
}
|
||
|
||
function ensureCustomPageViewHandler() {
|
||
ensureNavigationChromeHandler();
|
||
}
|
||
|
||
/**
|
||
* Register a custom hash-route page rendered into .skinBody.
|
||
* @param {string} href - e.g. "#/watchlist" (exact path match; query ignored)
|
||
* @param {string} title - document / page title
|
||
* @param {string} contentHtml - HTML string for the padded content area
|
||
* @param {function(HTMLElement): void} [onShow] - called each time the page is shown
|
||
* @returns {Function|null} unregister function, or null if rejected
|
||
*/
|
||
function addCustomPage(href, title, contentHtml, onShow) {
|
||
const hrefPath = normalizeCustomPageHref(href);
|
||
if (!hrefPath) {
|
||
WARN('addCustomPage: invalid href');
|
||
return null;
|
||
}
|
||
|
||
const segment = getCustomPageSegment(hrefPath);
|
||
if (!segment || DISALLOWED_CUSTOM_PAGE_SEGMENTS.has(segment)) {
|
||
WARN(`addCustomPage: disallowed route "${hrefPath}"`);
|
||
return null;
|
||
}
|
||
|
||
if (contentHtml == null || typeof contentHtml !== 'string') {
|
||
WARN('addCustomPage: contentHtml must be a string');
|
||
return null;
|
||
}
|
||
|
||
const pageTitle = String(title || segment).trim() || segment;
|
||
const safeTitle = slugifyCustomPageTitle(pageTitle);
|
||
const onShowFn = typeof onShow === 'function' ? onShow : null;
|
||
|
||
const existing = customPageRegistry.get(hrefPath);
|
||
if (existing) {
|
||
existing.title = pageTitle;
|
||
existing.contentHtml = contentHtml;
|
||
existing.safeTitle = safeTitle;
|
||
if (onShowFn) existing.onShow = onShowFn;
|
||
// Do not rewrite innerHTML on update if page already mounted (JS may have rendered into it)
|
||
if (existing.pageEl) {
|
||
existing.pageEl.setAttribute('data-title', pageTitle);
|
||
}
|
||
ensureCustomPageViewHandler();
|
||
syncAllCustomPages();
|
||
return () => {
|
||
const entry = customPageRegistry.get(hrefPath);
|
||
if (!entry) return;
|
||
hideCustomPageEntry(entry);
|
||
customPageRegistry.delete(hrefPath);
|
||
if (customPageRegistry.size === 0) {
|
||
syncCustomPageActiveClass(false);
|
||
stopCustomPageTitleGuard();
|
||
syncFallbackPageReadyState(false);
|
||
} else {
|
||
syncAllCustomPages();
|
||
}
|
||
};
|
||
}
|
||
|
||
const entry = {
|
||
hrefPath,
|
||
title: pageTitle,
|
||
contentHtml,
|
||
pageEl: null,
|
||
safeTitle,
|
||
onShow: onShowFn
|
||
};
|
||
customPageRegistry.set(hrefPath, entry);
|
||
ensureCustomPageStyles();
|
||
ensureCustomPageViewHandler();
|
||
syncAllCustomPages();
|
||
|
||
LOG(`Registered custom page: ${hrefPath} ("${pageTitle}")`);
|
||
|
||
return () => {
|
||
const current = customPageRegistry.get(hrefPath);
|
||
if (!current) return;
|
||
hideCustomPageEntry(current);
|
||
customPageRegistry.delete(hrefPath);
|
||
if (customPageRegistry.size === 0) {
|
||
syncCustomPageActiveClass(false);
|
||
stopCustomPageTitleGuard();
|
||
syncFallbackPageReadyState(false);
|
||
} else {
|
||
syncAllCustomPages();
|
||
}
|
||
};
|
||
}
|
||
|
||
// Expose utilities to global scope
|
||
window.KefinTweaksUtils = {
|
||
onViewPage,
|
||
notifyHandlers,
|
||
getCurrentView,
|
||
getHandlerCount,
|
||
clearHandlers,
|
||
addCustomMenuLink,
|
||
ensureCustomMenuLinkStyles,
|
||
addCustomPage,
|
||
updateActivePage,
|
||
saveConfigToJavaScriptInjector,
|
||
resolvePluginId,
|
||
getPluginConfiguration,
|
||
clearPluginIdCache,
|
||
listKefinConfigBackups,
|
||
createKefinConfigBackup,
|
||
deleteKefinConfigBackup,
|
||
deleteKefinConfigBackups,
|
||
restoreKefinConfigBackup,
|
||
pruneKefinConfigBackups,
|
||
maybeRunScheduledBackup,
|
||
normalizeBackupsSettings,
|
||
KEFIN_CONFIG_ENTRY_NAME,
|
||
KEFIN_CONFIG_SCRIPT_MARKER,
|
||
getWatchlistTabIndex,
|
||
waitForApiClient,
|
||
waitForLogin,
|
||
isModernUI,
|
||
getWatchlistUrl
|
||
};
|
||
|
||
ensureNavigationChromeHandler();
|
||
LOG('Initialized successfully');
|
||
LOG('Available at window.KefinTweaksUtils');
|
||
})();
|