move mpv initialization into player implementation

src/renderer/app.tsx

@@ -18,33 +18,24 @@ import i18n from '/@/i18n/i18n';
 import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
 import { PlayerProvider } from '/@/renderer/features/player/context/player-context';
 import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
-import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
 import { useServerVersion } from '/@/renderer/hooks/use-server-version';
 import { IsUpdatedDialog } from '/@/renderer/is-updated-dialog';
 import { AppRouter } from '/@/renderer/router/app-router';
-import {
-    useCssSettings,
-    useHotkeySettings,
-    usePlaybackSettings,
-    useSettingsStore,
-} from '/@/renderer/store';
+import { useCssSettings, useHotkeySettings, useSettingsStore } from '/@/renderer/store';
 import { useAppTheme } from '/@/renderer/themes/use-app-theme';
 import { sanitizeCss } from '/@/renderer/utils/sanitize';
 import '/styles/overlayscrollbars.css';
-import { PlayerType, WebAudio } from '/@/shared/types/types';
+import { WebAudio } from '/@/shared/types/types';
 
 ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]);
 
-const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 const ipc = isElectron() ? window.api.ipc : null;
-const utils = isElectron() ? window.api.utils : null;
 
 export const App = () => {
     const { mode, theme } = useAppTheme();
     const language = useSettingsStore((store) => store.general.language);
 
     const { content, enabled } = useCssSettings();
-    const { type: playbackType } = usePlaybackSettings();
     const { bindings } = useHotkeySettings();
     const cssRef = useRef<HTMLStyleElement | null>(null);
     useDiscordRpc();
@@ -76,43 +67,6 @@ export const App = () => {
         return { setWebAudio, webAudio };
     }, [webAudio]);
 
-    // Start the mpv instance on startup
-    useEffect(() => {
-        const initializeMpv = async () => {
-            if (playbackType === PlayerType.LOCAL) {
-                const isRunning: boolean | undefined = await mpvPlayer?.isRunning();
-
-                mpvPlayer?.stop();
-
-                if (!isRunning) {
-                    const extraParameters = useSettingsStore.getState().playback.mpvExtraParameters;
-                    const properties: Record<string, any> = {
-                        // speed: usePlayerStore.getState().speed,
-                        ...getMpvProperties(useSettingsStore.getState().playback.mpvProperties),
-                    };
-
-                    await mpvPlayer?.initialize({
-                        extraParameters,
-                        properties,
-                    });
-
-                    mpvPlayer?.volume(properties.volume);
-                }
-            }
-
-            utils?.restoreQueue();
-        };
-
-        if (isElectron()) {
-            initializeMpv();
-        }
-
-        return () => {
-            mpvPlayer?.stop();
-            mpvPlayer?.cleanup();
-        };
-    }, [playbackType]);
-
     useEffect(() => {
         if (isElectron()) {
             ipc?.send('set-global-shortcuts', bindings);

src/renderer/features/player/audio-player/engine/mpv-player-engine.tsx

@@ -4,6 +4,8 @@ import isElectron from 'is-electron';
 import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 
 import { AudioPlayer, PlayerOnProgressProps } from '/@/renderer/features/player/audio-player/types';
+import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
+import { useSettingsStore } from '/@/renderer/store';
 import { PlayerStatus } from '/@/shared/types/types';
 
 export interface MpvPlayerEngineHandle extends AudioPlayer {}
@@ -24,6 +26,7 @@ interface MpvPlayerEngineProps {
 const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 const mpvPlayerListener = isElectron() ? window.api.mpvPlayerListener : null;
 const ipc = isElectron() ? window.api.ipc : null;
+const utils = isElectron() ? window.api.utils : null;
 
 const PROGRESS_UPDATE_INTERVAL = 250;
 const TRANSITION_PROGRESS_INTERVAL = 10;
@@ -48,6 +51,41 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
 
     const progressIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
+    const mpvExtraParameters = useSettingsStore((store) => store.playback.mpvExtraParameters);
+    const mpvProperties = useSettingsStore((store) => store.playback.mpvProperties);
+
+    // Start the mpv instance on startup
+    useEffect(() => {
+        const initializeMpv = async () => {
+            const isRunning: boolean | undefined = await mpvPlayer?.isRunning();
+
+            mpvPlayer?.stop();
+
+            if (!isRunning) {
+                const properties: Record<string, any> = {
+                    // speed: usePlayerStore.getState().speed,
+                    ...getMpvProperties(mpvProperties),
+                };
+
+                await mpvPlayer?.initialize({
+                    extraParameters: mpvExtraParameters,
+                    properties,
+                });
+
+                mpvPlayer?.volume(properties.volume);
+            }
+
+            utils?.restoreQueue();
+        };
+
+        initializeMpv();
+
+        return () => {
+            mpvPlayer?.stop();
+            mpvPlayer?.cleanup();
+        };
+    }, [mpvExtraParameters, mpvProperties]);
+
     // Update volume
     useEffect(() => {
         if (!mpvPlayer) {