diff --git a/plugins/clean-view-luna/src/index.ts b/plugins/clean-view-luna/src/index.ts index a2a3dab..a4ebbd2 100644 --- a/plugins/clean-view-luna/src/index.ts +++ b/plugins/clean-view-luna/src/index.ts @@ -1,8 +1,11 @@ import { LunaUnload, Tracer, ftch } from "@luna/core"; +import { StyleTag } from "@luna/lib"; import { settings, Settings } from "./Settings"; -// Import CSS directly using Luna's file:// syntax -import styles from "file://styles.css?minify"; +// Import CSS files directly using Luna's file:// syntax +import baseStyles from "file://styles.css?minify"; +import separatedLyrics from "file://separated-lyrics.css?minify"; +import playerBarHidden from "file://player-bar-hidden.css?minify"; export const { trace } = Tracer("[Clean View]"); export { Settings }; @@ -10,28 +13,12 @@ export { Settings }; // clean up resources export const unloads = new Set(); -const themeUrl = "https://raw.githubusercontent.com/itzzexcel/neptune-projects/refs/heads/main/plugins/plugins/not-actual-fullscreen/src/separated-lyrics.css"; - -function ApplyCSS(style: string): HTMLStyleElement { - const styleElement = document.createElement("style"); - styleElement.type = "text/css"; - styleElement.textContent = style; - document.head.appendChild(styleElement); - return styleElement; -} - -async function HttpGet(url: string): Promise { - try { - const content = await ftch.text(url); - return content; - } catch (error) { - trace.msg.err(`Failed to fetch URL: ${error instanceof Error ? error.message : String(error)}`); - return null; - } -} +// StyleTag instances for different CSS modules +const lyricsStyleTag = new StyleTag("CleanView-lyrics", unloads); +const baseStyleTag = new StyleTag("CleanView-base", unloads); +const playerBarStyleTag = new StyleTag("CleanView-player-bar", unloads); var isCleanView = false; -var appliedStyle: HTMLStyleElement | null = null; var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates const updateButtonStates = function(): void { @@ -46,41 +33,19 @@ const updateButtonStates = function(): void { } }; -// Function to get dynamic styles including player bar visibility -const getDynamicStyles = function(): string { - let dynamicStyles = styles; - - // Add player bar hiding with hover reveal if setting is disabled - if (!settings.playerBarVisible) { - dynamicStyles += ` -/* Hide player bar when setting is disabled, but show on hover */ -[data-test="footer-player"] { - opacity: 0 !important; - transition: opacity 0.3s ease-in-out !important; - pointer-events: auto !important; -} - -[data-test="footer-player"]:hover { - opacity: 1 !important; -} - -/* Also show player bar when hovering over the bottom area */ -body:has([data-test="footer-player"]:hover) [data-test="footer-player"], -body [data-test="footer-player"]:hover { - opacity: 1 !important; -} -`; - } - - return dynamicStyles; -}; - // Function to update styles when settings change const updateCleanViewStyles = function(): void { - if (isCleanView && appliedStyle) { - // Remove old styles and apply new ones with updated settings - appliedStyle.remove(); - appliedStyle = ApplyCSS(getDynamicStyles()); + if (isCleanView) { + // Apply all clean view styles + lyricsStyleTag.css = separatedLyrics; + baseStyleTag.css = baseStyles; + + // Apply player bar styles based on setting + if (!settings.playerBarVisible) { + playerBarStyleTag.css = playerBarHidden; + } else { + playerBarStyleTag.css = undefined; + } } }; @@ -89,36 +54,18 @@ const updateCleanViewStyles = function(): void { const toggleCleanView = function(): void { if (isCleanView) { - if (appliedStyle) { - appliedStyle.remove(); - appliedStyle = null; - } + // Remove all clean view styles + lyricsStyleTag.css = undefined; + baseStyleTag.css = undefined; + playerBarStyleTag.css = undefined; } else { - appliedStyle = ApplyCSS(getDynamicStyles()); - // Debug: Log bottom-left buttons to help identify selectors - //debugBottomLeftButtons(); + // Apply clean view styles + updateCleanViewStyles(); } isCleanView = !isCleanView; updateButtonStates(); }; -// const debugBottomLeftButtons = function(): void { -// setTimeout(() => { -// const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]'); -// if (nowPlayingContainer) { -// const buttons = nowPlayingContainer.querySelectorAll('button'); -// //trace.msg.log(`Found ${buttons.length} buttons in now playing container:`); -// buttons.forEach((button, index) => { -// const classes = button.className; -// const dataTest = button.getAttribute('data-test'); -// const title = button.getAttribute('title'); -// const ariaLabel = button.getAttribute('aria-label'); -// //trace.msg.log(`Button ${index}: classes="${classes}", data-test="${dataTest}", title="${title}", aria-label="${ariaLabel}"`); -// }); -// } -// }, 1000); -// }; - const createHideUIButton = function(): void { setTimeout(() => { // Only create button if Hide UI is enabled in settings @@ -412,10 +359,6 @@ const cleanUpDynamicArt = function (): void { currentTrackSrc = null; // Reset current track source }; -// STYLES FOR THE LYRICS - Added Top-level async since Luna plugins are modules <3 -const style = await HttpGet(themeUrl); -const styleElement = style ? ApplyCSS(style) : null; - // Initialize the button creation and observers observeForButtons(); observeTrackTitle(); @@ -423,14 +366,6 @@ onTrackChanged(1); // Add cleanup to unloads unloads.add(() => { - if (styleElement && styleElement.parentNode) { - styleElement.parentNode.removeChild(styleElement); - } - - if (appliedStyle && appliedStyle.parentNode) { - appliedStyle.parentNode.removeChild(appliedStyle); - } - cleanUpDynamicArt(); // Clean up our custom buttons diff --git a/plugins/clean-view-luna/src/player-bar-hidden.css b/plugins/clean-view-luna/src/player-bar-hidden.css new file mode 100644 index 0000000..553a6f4 --- /dev/null +++ b/plugins/clean-view-luna/src/player-bar-hidden.css @@ -0,0 +1,16 @@ +/* Hide player bar when setting is disabled, but show on hover */ +[data-test="footer-player"] { + opacity: 0 !important; + transition: opacity 0.3s ease-in-out !important; + pointer-events: auto !important; +} + +[data-test="footer-player"]:hover { + opacity: 1 !important; +} + +/* Also show player bar when hovering over the bottom area */ +body:has([data-test="footer-player"]:hover) [data-test="footer-player"], +body [data-test="footer-player"]:hover { + opacity: 1 !important; +} \ No newline at end of file diff --git a/plugins/clean-view-luna/src/separated-lyrics.css b/plugins/clean-view-luna/src/separated-lyrics.css new file mode 100644 index 0000000..ae9976a --- /dev/null +++ b/plugins/clean-view-luna/src/separated-lyrics.css @@ -0,0 +1,48 @@ +[class*="tabItems"] { + opacity: 0 !important; + transition: opacity 0.3s ease-in-out; +} + +[class*="_imageContainer"] { + margin-top: 40px !important; +} + +[class*="_tabItems"]:hover { + opacity: 1 !important; +} + +[data-test="header-container"] { + opacity: 0; + margin: -40px; +} + +/* Lyrics text styling */ +[class^="_lyricsText"] { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; +} + +[class^="_lyricsText"] > div > span { + transition: all 0.3s ease; +} + +[class^="_lyricsText"] > div > span[data-current="true"] { + font-weight: 600; + transform: scale(1.05); +} + +/* Smooth scrolling for lyrics */ +[class^="_lyricsContainer"] { + scroll-behavior: smooth; +} + +/* Enhanced lyrics visibility */ +[class^="_lyricsText"] > div { + padding: 8px 0; + border-radius: 4px; + transition: all 0.2s ease; +} + +[class^="_lyricsText"] > div:hover { + background-color: rgba(255, 255, 255, 0.05); +} \ No newline at end of file diff --git a/plugins/copy-lyrics-luna/src/index.ts b/plugins/copy-lyrics-luna/src/index.ts index 9997d5a..bf45cd0 100644 --- a/plugins/copy-lyrics-luna/src/index.ts +++ b/plugins/copy-lyrics-luna/src/index.ts @@ -1,4 +1,5 @@ import { LunaUnload, Tracer } from "@luna/core"; +import { StyleTag } from "@luna/lib"; // Import CSS directly using Luna's file:// syntax import unlockSelection from "file://styles.css?minify"; @@ -8,13 +9,8 @@ export const { trace } = Tracer("[Copy Lyrics]"); // clean up resources export const unloads = new Set(); -function ApplyCSS(style: string): HTMLStyleElement { - const styleElement = document.createElement("style"); - styleElement.type = "text/css"; - styleElement.textContent = style; - document.head.appendChild(styleElement); - return styleElement; -} +// StyleTag for lyrics selection styling +const lyricsStyleTag = new StyleTag("Copy-Lyrics", unloads, unlockSelection); function SetClipboard(text: string): void { const textarea = document.createElement("textarea"); @@ -33,8 +29,6 @@ function SetClipboard(text: string): void { } } -const styleElement = ApplyCSS(unlockSelection); - let isSelecting = false; const onMouseDown = function (): void { @@ -117,10 +111,6 @@ document.addEventListener("mouseup", onMouseUp); // Add cleanup to unloads unloads.add(() => { - if (styleElement.parentNode) { - styleElement.parentNode.removeChild(styleElement); - } - // Remove event listeners document.removeEventListener("click", onClickHooked, true); document.removeEventListener("mousedown", onMouseDown); diff --git a/plugins/oled-theme-luna/src/index.ts b/plugins/oled-theme-luna/src/index.ts index 98ed1e9..0752d93 100644 --- a/plugins/oled-theme-luna/src/index.ts +++ b/plugins/oled-theme-luna/src/index.ts @@ -1,4 +1,5 @@ import { LunaUnload, Tracer } from "@luna/core"; +import { StyleTag } from "@luna/lib"; import { settings, Settings } from "./Settings"; // Import CSS files directly using Luna's file:// syntax @@ -13,16 +14,11 @@ export { Settings }; // clean up resources export const unloads = new Set(); -let appliedStyleElement: HTMLStyleElement | null = null; +// StyleTag instance for theme management +const themeStyleTag = new StyleTag("OLED-Theme", unloads); // Function to apply theme styles based on current settings const applyThemeStyles = function(): void { - - // Remove existing style element if it exists - if (appliedStyleElement && appliedStyleElement.parentNode) { - appliedStyleElement.parentNode.removeChild(appliedStyleElement); - } - // Choose the appropriate CSS file based on settings let selectedStyle: string; @@ -39,21 +35,12 @@ const applyThemeStyles = function(): void { selectedStyle = selectedStyle.replace(/\[class\^="_progressBarWrapper"\]\s*\{[^}]*\}/g, ''); } - appliedStyleElement = document.createElement("style"); - appliedStyleElement.type = "text/css"; - appliedStyleElement.textContent = selectedStyle; - document.head.appendChild(appliedStyleElement); + // Apply the selected theme using StyleTag + themeStyleTag.css = selectedStyle; }; // Make this function available globally so Settings can call it (window as any).updateOLEDThemeStyles = applyThemeStyles; -// Apply the OLED theme -applyThemeStyles(); - -// Add cleanup to unloads -unloads.add(() => { - if (appliedStyleElement && appliedStyleElement.parentNode) { - appliedStyleElement.parentNode.removeChild(appliedStyleElement); - } -}); \ No newline at end of file +// Apply the OLED theme initially +applyThemeStyles(); \ No newline at end of file