Inject styles to hide native home screen sections from the homescreen script in order to ensure KefinTweaks home sections are running

This commit is contained in:
HighImKevin
2026-10-06 07:18:29 -04:00
parent cde7af64f7
commit 7236912ec4
2 changed files with 28 additions and 82 deletions
-12
View File
@@ -252,18 +252,6 @@ div#discovery-loading-indicator:not(.show)::after {
font-size: 1.5rem !important;
line-height: 1.8rem !important;
}
.section0:not([data-page]),
.section1:not([data-page]),
.section2:not([data-page]),
.section3:not([data-page]),
.section4:not([data-page]),
.section5:not([data-page]),
.section6:not([data-page]),
.section7:not([data-page]),
.section8:not([data-page]),
.section9:not([data-page]) {
display: none !important;
}
.homeSectionsContainer .card[data-type="TvChannel"] a.cardImageContainer:not([style])::after {
content: attr(aria-label);
+28 -70
View File
@@ -24,6 +24,34 @@
return;
}
/**
* Hide native Jellyfin .sectionN rows only once homeScreen3 has successfully
* started (so clients that cannot parse this file keep the native home).
* Persist for the session via a single injected stylesheet.
*/
function ensureNativeHomeSectionsHidden() {
const styleId = 'kefin-hide-native-homesections';
if (document.getElementById(styleId)) return;
const style = document.createElement('style');
style.id = styleId;
style.textContent = [
'.section0:not([data-page]),',
'.section1:not([data-page]),',
'.section2:not([data-page]),',
'.section3:not([data-page]),',
'.section4:not([data-page]),',
'.section5:not([data-page]),',
'.section6:not([data-page]),',
'.section7:not([data-page]),',
'.section8:not([data-page]),',
'.section9:not([data-page]) {',
' display: none !important;',
'}'
].join('\n');
(document.head || document.documentElement).appendChild(style);
}
ensureNativeHomeSectionsHidden();
/**
* Flatten section groups into a flat array of sections
* @param {Array} groups - Array of HomeScreenSectionGroup objects
@@ -509,14 +537,12 @@
filteredHomeSections = userConfig.sections || [];
homeScreen = userConfig.homeScreen;
userDisplayPreferences = await state.getDisplayPrefernces();
//addUserHomeScreenOrderCSS(userDisplayPreferences, homeScreen);
} else {
const mergedHomeSections = await mergeHomeSectionConfigs();
userDisplayPreferences = await state.getDisplayPrefernces();
const customPrefs = userDisplayPreferences?.CustomPrefs || {};
homeScreen = userHomeConfig.parseKefinTweaksHomeScreen(customPrefs);
const pinnedSections = userHomeConfig.buildPinnedSectionConfigs(homeScreen);
//addUserHomeScreenOrderCSS(userDisplayPreferences, homeScreen);
const serverSectionsById = new Map();
mergedHomeSections.forEach(section => {
@@ -1011,74 +1037,6 @@
}
}
/**
* Add CSS for user-defined section ordering
*/
function addUserHomeScreenOrderCSS(userDisplayPreferences, homeScreen = null) {
const customPrefs = userDisplayPreferences?.CustomPrefs || {};
const parsedHomeScreen = homeScreen || window.KefinUserHomeScreenConfig.parseKefinTweaksHomeScreen(customPrefs);
const kefinHomeScreen = window.KefinUserHomeScreenConfig.homeScreenToLegacyArray(parsedHomeScreen);
// Create a homesectionN : order value mapping for the custom CSS orders to be applied
const jellyfinOrders = {};
for (let i = 0; i <= 8; i++) {
const homeSection = customPrefs[`homesection${i}`];
if (!homeSection) {
continue;
}
// Match to homeSection in kefinHomeScreen with .toLowerCase() id
let kefinHomeScreenSection = kefinHomeScreen.find(s => s.id.toLowerCase() === homeSection.toLowerCase() && s.enabled === true);
if (!kefinHomeScreenSection) {
// Check if it's "latestmedia"
if (homeSection.toLowerCase() === 'latestmedia' && !state.kefinLatestMedia) {
kefinHomeScreenSection = kefinHomeScreen.find(s => s.id.toLowerCase().startsWith('recently-added') && s.enabled === true);
}
}
if (kefinHomeScreenSection) {
jellyfinOrders[`homesection${i}`] = kefinHomeScreenSection.order;
} else {
jellyfinOrders[`homesection${i}`] = 999;
}
}
// Remove existing style tag if present
const existingStyle = document.getElementById('kefin-user-homescreen-order-css');
// Create new style tag
const style = document.createElement('style');
style.id = 'kefin-user-homescreen-order-css';
let css = '';
// Add CSS for Jellyfin sections
Object.entries(jellyfinOrders).forEach(([homesectionKey, order]) => {
// Map homesectionN to class selector
const classSelector = `.${homesectionKey.replace('home','')}`;
css += `${classSelector} { order: ${order} !important; }\n`;
});
// Add display: none to all .homeectionN not in jellyfinOrders
for (let i = 0; i <= 8; i++) {
const homesectionKey = `homesection${i}`;
if (jellyfinOrders[homesectionKey] && isNaN(jellyfinOrders[homesectionKey])) {
const classSelector = `.${homesectionKey.replace('home','')}`;
css += `${classSelector} { display: none !important; }\n`;
}
}
style.textContent = css;
if (existingStyle) {
existingStyle.remove();
}
document.head.appendChild(style);
LOG('User home screen order CSS applied');
}
/**
* Filter sections based on user preferences
*/