Settings.tsx
1 import { ReactiveStore } from "@luna/core"; 2 import { LunaSettings, LunaSwitchSetting } from "@luna/ui"; 3 import React from "react"; 4 5 export const settings = await ReactiveStore.getPluginStorage("OLEDTheme", { 6 qualityColorMatchedSeekBar: true, 7 oledFriendlyButtons: true, 8 lightMode: false, 9 }); 10 11 export const Settings = () => { 12 const [qualityColorMatchedSeekBar, setQualityColorMatchedSeekBar] = React.useState(settings.qualityColorMatchedSeekBar); 13 const [oledFriendlyButtons, setOledFriendlyButtons] = React.useState(settings.oledFriendlyButtons); 14 const [lightMode, setLightMode] = React.useState(settings.lightMode); 15 16 return ( 17 <LunaSettings> 18 <LunaSwitchSetting 19 title="Quality Color Matched Seek Bar" 20 desc="Color the Seek/Progress Bar based on audio quality" 21 checked={qualityColorMatchedSeekBar} 22 onChange={(_, checked) => { 23 console.log("Quality Color Matched Seek Bar:", checked ? "enabled" : "disabled"); 24 setQualityColorMatchedSeekBar((settings.qualityColorMatchedSeekBar = checked)); 25 // Update styles immediately when setting changes 26 if ((window as any).updateOLEDThemeStyles) { 27 (window as any).updateOLEDThemeStyles(); 28 } 29 }} 30 /> 31 <LunaSwitchSetting 32 title="OLED Friendly Buttons" 33 desc="Remove button styling from OLED theme to keep buttons with original Tidal appearance" 34 checked={oledFriendlyButtons} 35 onChange={(_, checked) => { 36 console.log("OLED Friendly Buttons:", checked ? "enabled" : "disabled"); 37 setOledFriendlyButtons((settings.oledFriendlyButtons = checked)); 38 // Update styles immediately when setting changes 39 if ((window as any).updateOLEDThemeStyles) { 40 (window as any).updateOLEDThemeStyles(); 41 } 42 }} 43 /> 44 <LunaSwitchSetting 45 title="Light Mode | Experimental" 46 desc="Use the light theme instead of the dark theme. This is experimental and may not work as expected." 47 checked={lightMode} 48 onChange={(_, checked) => { 49 console.log("Light Mode:", checked ? "enabled" : "disabled"); 50 setLightMode((settings.lightMode = checked)); 51 // Update styles immediately when setting changes 52 if ((window as any).updateOLEDThemeStyles) { 53 (window as any).updateOLEDThemeStyles(); 54 } 55 }} 56 /> 57 </LunaSettings> 58 ); 59 };