Improve visualizer settings

rekkyrosso · Dec 21, 2024 · 0361324 · 0361324
1 parent a85051f
commit 0361324
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 20 deletions.
diff --git a/app/src/main.js b/app/src/main.js
@@ -174,7 +174,7 @@ async function checkForUpdatesAndNotify() {
 
 app.whenReady().then(async () => {
     const mainWindowState = windowStateKeeper({
-        defaultWidth: 1024,
+        defaultWidth: 1200,
         defaultHeight: 768,
     });
     const splash = await createSplashScreen(mainWindowState);
@@ -187,8 +187,8 @@ app.whenReady().then(async () => {
         createBridge();
 
         await createMainWindow(url, mainWindowState);
-        await checkForUpdatesAndNotify();
         splash.close();
+        await checkForUpdatesAndNotify();
 
         // For mac apparently.
         app.on('activate', async () => {

diff --git a/src/components/Settings/VisualizerSettings/VisualizerRandomness.scss b/src/components/Settings/VisualizerSettings/VisualizerRandomness.scss
@@ -48,4 +48,13 @@
         font-size: 0.75em;
         vertical-align: middle;
     }
+
+    .note {
+        font-size: 0.875em;
+        text-align: center;
+
+        p:last-child {
+            margin-top: 1em;
+        }
+    }
 }
diff --git a/src/components/Settings/VisualizerSettings/VisualizerRandomness.tsx b/src/components/Settings/VisualizerSettings/VisualizerRandomness.tsx
@@ -1,17 +1,20 @@
-import React, {useCallback, useEffect, useId, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useId, useMemo, useRef, useState} from 'react';
 import VisualizerProviderId from 'types/VisualizerProviderId';
 import {getService} from 'services/mediaServices';
+import {getCurrentItem} from 'services/playlist';
 import {isSourceVisible} from 'services/mediaServices/servicesSettings';
 import visualizerSettings from 'services/visualizer/visualizerSettings';
+import ExternalLink from 'components/ExternalLink';
 import useVisualizerRandomness, {Weighting} from './useVisualizerRandomness';
 import './VisualizerRandomness.scss';
 
 export default function VisualizerRandomness() {
     const id = useId();
     const spotify = getService('spotify');
-    const hasSpotify = spotify && visualizerSettings.spotifyEnabled && isSourceVisible(spotify);
+    const hasSpotify = spotify && isSourceVisible(spotify);
     const refSpotify = useRef<HTMLInputElement>(null);
-    const [isSpotify, setIsSpotify] = useState(false);
+    const isSpotifyItem = useMemo(() => getCurrentItem()?.src.startsWith('spotify:'), []);
+    const [isSpotify, setIsSpotify] = useState(isSpotifyItem);
     const {standardWeightings, spotifyWeightings} = useVisualizerRandomness();
 
     const handleRandomnessChange = useCallback((weightings: readonly Weighting[]) => {
@@ -44,7 +47,7 @@ export default function VisualizerRandomness() {
                             id={`${id}-view-standard`}
                             name="weighting-view"
                             type="radio"
-                            defaultChecked={true}
+                            defaultChecked={!isSpotifyItem}
                             onChange={handleSpotifyChange}
                         />
                         <label htmlFor={`${id}-view-standard`}>Standard</label>
@@ -54,7 +57,7 @@ export default function VisualizerRandomness() {
                             id={`${id}-view-spotify`}
                             name="weighting-view"
                             type="radio"
-                            defaultChecked={false}
+                            defaultChecked={isSpotifyItem}
                             onChange={handleSpotifyChange}
                             ref={refSpotify}
                         />
@@ -67,11 +70,20 @@ export default function VisualizerRandomness() {
                 hidden={isSpotify}
                 onChange={handleRandomnessChange}
             />
-            <VisualizerWeightings
-                weightings={spotifyWeightings}
-                hidden={!isSpotify}
-                onChange={handleSpotifyRandomnessChange}
-            />
+            {visualizerSettings.spotifyEnabled ? (
+                <VisualizerWeightings
+                    weightings={spotifyWeightings}
+                    hidden={!isSpotify}
+                    onChange={handleSpotifyRandomnessChange}
+                />
+            ) : (
+                <div className="weightings note" hidden={!isSpotify}>
+                    <p>Spotify visualizers are only supported on the web app.</p>
+                    <p>
+                        <ExternalLink href="https://ampcast.app" />
+                    </p>
+                </div>
+            )}
         </fieldset>
     );
 }

diff --git a/src/components/Splitter/layout.scss b/src/components/Splitter/layout.scss
@@ -12,7 +12,7 @@
 #media-library-layout {
     & > .layout-pane-1 {
         min-width: calc(3rem + 2 * var(--gutter-width));
-        flex-basis: 17%;
+        flex-basis: 22%;
     }
 
     & > .layout-pane-2 {

diff --git a/src/services/visualizer/visualizers.ts b/src/services/visualizer/visualizers.ts
@@ -6,20 +6,15 @@ import butterchurn from './butterchurn';
 import coverart from './coverart';
 import spotifyviz from './spotifyviz';
 import waveform from './waveform';
-import visualizerSettings from './visualizerSettings';
 
 const visualizers: VisualizerProvider[] = [
     ambientvideo,
     ampshader,
     audiomotion,
     butterchurn,
     coverart,
+    spotifyviz,
+    waveform
 ];
 
-if (visualizerSettings.spotifyEnabled) {
-    visualizers.push(spotifyviz);
-}
-
-visualizers.push(waveform);
-
 export default visualizers;