Added Settings for Clean-View + Fixed Bugs with Player Bar song title

plugins/clean-view-luna/src/Settings.tsx

@@ -0,0 +1,40 @@
+import { ReactiveStore } from "@luna/core";
+import { LunaSettings, LunaSwitchSetting } from "@luna/ui";
+import React from "react";
+
+export const settings = await ReactiveStore.getPluginStorage("CleanView", {
+	hideUIEnabled: false,
+	playerBarVisible: true,
+});
+
+export const Settings = () => {
+	const [hideUIEnabled, setHideUIEnabled] = React.useState(settings.hideUIEnabled);
+	const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
+	
+	return (
+		<LunaSettings>
+			<LunaSwitchSetting
+				title="Hide UI Feature"
+				desc="Enable hide/unhide UI functionality with toggle buttons"
+				checked={hideUIEnabled}
+				onChange={(_, checked) => {
+					console.log("Hide UI Feature:", checked ? "enabled" : "disabled");
+					setHideUIEnabled((settings.hideUIEnabled = checked));
+				}}
+			/>
+			<LunaSwitchSetting
+				title="Player Bar Visibility in Hide UI Mode"
+				desc="Keep player bar visible when UI is hidden"
+				checked={playerBarVisible}
+				onChange={(_, checked) => {
+					console.log("Player Bar Visibility:", checked ? "visible" : "hidden");
+					setPlayerBarVisible((settings.playerBarVisible = checked));
+					// Update styles immediately when setting changes
+					if ((window as any).updateCleanViewStyles) {
+						(window as any).updateCleanViewStyles();
+					}
+				}}
+			/>
+		</LunaSettings>
+	);
+}; 

plugins/clean-view-luna/src/index.ts

@@ -1,7 +1,8 @@
 import { LunaUnload, Tracer, ftch } from "@luna/core";
+import { settings, Settings } from "./Settings";
 
 export const { trace } = Tracer("[Clean View]");
-
+export { Settings };
 
 // clean up resources
 export const unloads = new Set<LunaUnload>();
@@ -25,6 +26,15 @@ const styles = `
     margin: -40px;
 }
 
+/* Only prevent specific text elements in player bar from being affected by margin adjustments */
+[data-test="footer-player"] [class*="_trackTitle"],
+[data-test="footer-player"] [class*="_artistName"],
+[data-test="footer-player"] [class*="_trackInfo"],
+[data-test="footer-player"] [class*="_trackContainer"] {
+    margin-top: 0 !important;
+    transform: none !important;
+}
+
 [class*="_nowPlayingContainer"] {
     padding-left: 6%;
     padding-top: 20px !important;
@@ -153,13 +163,54 @@ const updateButtonStates = function(): void {
     const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
     
     if (hideButton) {
-        hideButton.style.display = isCleanView ? 'none' : 'flex';
+        hideButton.style.display = (settings.hideUIEnabled && !isCleanView) ? 'flex' : 'none';
     }
     if (unhideButton) {
-        unhideButton.style.display = isCleanView ? 'flex' : 'none';
+        unhideButton.style.display = (settings.hideUIEnabled && isCleanView) ? 'flex' : 'none';
     }
 };
 
+// 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());
+    }
+};
+
+// Make this function available globally so Settings can call it
+(window as any).updateCleanViewStyles = updateCleanViewStyles;
+
 const toggleCleanView = function(): void {
     if (isCleanView) {
         if (appliedStyle) {
@@ -167,7 +218,7 @@ const toggleCleanView = function(): void {
             appliedStyle = null;
         }
     } else {
-        appliedStyle = ApplyCSS(styles);
+        appliedStyle = ApplyCSS(getDynamicStyles());
         // Debug: Log bottom-left buttons to help identify selectors
         //debugBottomLeftButtons();
     }
@@ -194,6 +245,9 @@ const toggleCleanView = function(): void {
 
 const createHideUIButton = function(): void {
     setTimeout(() => {
+        // Only create button if Hide UI is enabled in settings
+        if (!settings.hideUIEnabled) return;
+        
         // Look for the fullscreen button's parent container
         const fullscreenButton = document.querySelector('[data-test="request-fullscreen"]');
         if (!fullscreenButton || !fullscreenButton.parentElement) {
@@ -254,6 +308,9 @@ const createHideUIButton = function(): void {
 
 const createUnhideUIButton = function(): void {
     setTimeout(() => {
+        // Only create button if Hide UI is enabled in settings
+        if (!settings.hideUIEnabled) return;
+        
         // Check if our button already exists
         if (document.querySelector('.unhide-ui-button')) return;
 
@@ -358,14 +415,17 @@ function observeTrackTitle(): void {
 // Also observe for the buttons to appear so we can add our buttons
 function observeForButtons(): void {
     const observer = new MutationObserver(() => {
-        const fullscreenButton = document.querySelector('[data-test="request-fullscreen"]');
-        if (fullscreenButton && !document.querySelector('.hide-ui-button')) {
-            createHideUIButton();
-        }
-        
-        // Create unhide button if it doesn't exist
-        if (!document.querySelector('.unhide-ui-button')) {
-            createUnhideUIButton();
+        // Only observe for buttons if Hide UI is enabled
+        if (settings.hideUIEnabled) {
+            const fullscreenButton = document.querySelector('[data-test="request-fullscreen"]');
+            if (fullscreenButton && !document.querySelector('.hide-ui-button')) {
+                createHideUIButton();
+            }
+            
+            // Create unhide button if it doesn't exist
+            if (!document.querySelector('.unhide-ui-button')) {
+                createUnhideUIButton();
+            }
         }
     });