[enhancement]: Support disabling MPV entirely

Supports running Feishin solely using web audio (useful for clients with problems with MPV).
Also moves save/restore queue to utils, as MPV object is now optional

src/i18n/locales/en.json

@@ -428,6 +428,8 @@
         "customFontPath_description": "sets the path to the custom font to use for the application",
         "disableAutomaticUpdates": "disable automatic updates",
         "disableLibraryUpdateOnStartup": "disable checking for new versions on startup",
+        "disableMpv": "Disable MPV",
+        "disableMpv_description": "If checked, prevent MPV from starting and bypass MPV requirement.",
         "discordApplicationId": "{{discord}} application id",
         "discordApplicationId_description": "the application id for {{discord}} rich presence (defaults to {{defaultId}})",
         "discordIdleStatus": "show rich presence idle status",

src/main/main.ts

@@ -316,7 +316,7 @@ const createWindow = async () => {
                         }
 
                         const queue = JSON.parse(data.toString());
-                        getMainWindow()?.webContents.send('renderer-player-restore-queue', queue);
+                        getMainWindow()?.webContents.send('renderer-restore-queue', queue);
                     });
                 });
             });
@@ -362,7 +362,7 @@ const createWindow = async () => {
             event.preventDefault();
             saved = true;
 
-            getMainWindow()?.webContents.send('renderer-player-save-queue');
+            getMainWindow()?.webContents.send('renderer-save-queue');
 
             ipcMain.once('player-save-queue', async (_event, data: Record<string, any>) => {
                 const queueLocation = join(app.getPath('userData'), 'queue');

src/main/preload.ts

@@ -9,6 +9,8 @@ import { mpvPlayer, mpvPlayerListener } from './preload/mpv-player';
 import { remote } from './preload/remote';
 import { utils } from './preload/utils';
 
+const disableMpv = localSettings.get('disable_mpv');
+
 contextBridge.exposeInMainWorld('electron', {
     browser,
     discordRpc,
@@ -16,8 +18,8 @@ contextBridge.exposeInMainWorld('electron', {
     localSettings,
     lyrics,
     mpris,
-    mpvPlayer,
+    mpvPlayer: disableMpv ? undefined : mpvPlayer,
-    mpvPlayerListener,
+    mpvPlayerListener: disableMpv ? undefined : mpvPlayerListener,
     remote,
     utils,
 });

src/main/preload/mpv-player.ts

@@ -1,5 +1,5 @@
 import { ipcRenderer, IpcRendererEvent } from 'electron';
-import { PlayerData, PlayerState } from '/@/renderer/store';
+import { PlayerData } from '/@/renderer/store';
 
 const initialize = (data: { extraParameters?: string[]; properties?: Record<string, any> }) => {
     return ipcRenderer.invoke('player-initialize', data);
@@ -50,14 +50,6 @@ const previous = () => {
     ipcRenderer.send('player-previous');
 };
 
-const restoreQueue = () => {
-    ipcRenderer.send('player-restore-queue');
-};
-
-const saveQueue = (data: Record<string, any>) => {
-    ipcRenderer.send('player-save-queue', data);
-};
-
 const seek = (seconds: number) => {
     ipcRenderer.send('player-seek', seconds);
 };
@@ -154,16 +146,6 @@ const rendererQuit = (cb: (event: IpcRendererEvent) => void) => {
     ipcRenderer.on('renderer-player-quit', cb);
 };
 
-const rendererSaveQueue = (cb: (event: IpcRendererEvent) => void) => {
-    ipcRenderer.on('renderer-player-save-queue', cb);
-};
-
-const rendererRestoreQueue = (
-    cb: (event: IpcRendererEvent, data: Partial<PlayerState>) => void,
-) => {
-    ipcRenderer.on('renderer-player-restore-queue', cb);
-};
-
 const rendererError = (cb: (event: IpcRendererEvent, data: string) => void) => {
     ipcRenderer.on('renderer-player-error', cb);
 };
@@ -182,8 +164,6 @@ export const mpvPlayer = {
     previous,
     quit,
     restart,
-    restoreQueue,
-    saveQueue,
     seek,
     seekTo,
     setProperties,
@@ -203,8 +183,6 @@ export const mpvPlayerListener = {
     rendererPlayPause,
     rendererPrevious,
     rendererQuit,
-    rendererRestoreQueue,
-    rendererSaveQueue,
     rendererSkipBackward,
     rendererSkipForward,
     rendererStop,

src/main/preload/utils.ts

@@ -1,9 +1,31 @@
+import { IpcRendererEvent, ipcRenderer } from 'electron';
 import { isMacOS, isWindows, isLinux } from '../utils';
+import { PlayerState } from '/@/renderer/store';
+
+const saveQueue = (data: Record<string, any>) => {
+    ipcRenderer.send('player-save-queue', data);
+};
+
+const restoreQueue = () => {
+    ipcRenderer.send('player-restore-queue');
+};
+
+const onSaveQueue = (cb: (event: IpcRendererEvent) => void) => {
+    ipcRenderer.on('renderer-save-queue', cb);
+};
+
+const onRestoreQueue = (cb: (event: IpcRendererEvent, data: Partial<PlayerState>) => void) => {
+    ipcRenderer.on('renderer-restore-queue', cb);
+};
 
 export const utils = {
     isLinux,
     isMacOS,
     isWindows,
+    onRestoreQueue,
+    onSaveQueue,
+    restoreQueue,
+    saveQueue,
 };
 
 export type Utils = typeof utils;

src/renderer/app.tsx

@@ -33,9 +33,9 @@ ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule
 initSimpleImg({ threshold: 0.05 }, true);
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
-const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
 const ipc = isElectron() ? window.electron.ipc : null;
 const remote = isElectron() ? window.electron.remote : null;
+const utils = isElectron() ? window.electron.utils : null;
 
 export const App = () => {
     const theme = useTheme();
@@ -97,28 +97,31 @@ export const App = () => {
     // Start the mpv instance on startup
     useEffect(() => {
         const initializeMpv = async () => {
-            const isRunning: boolean | undefined = await mpvPlayer?.isRunning();
+            if (playbackType === PlaybackType.LOCAL) {
+                const isRunning: boolean | undefined = await mpvPlayer?.isRunning();
 
-            mpvPlayer?.stop();
+                mpvPlayer?.stop();
 
-            if (!isRunning) {
+                if (!isRunning) {
-                const extraParameters = useSettingsStore.getState().playback.mpvExtraParameters;
+                    const extraParameters = useSettingsStore.getState().playback.mpvExtraParameters;
-                const properties: Record<string, any> = {
+                    const properties: Record<string, any> = {
-                    speed: usePlayerStore.getState().current.speed,
+                        speed: usePlayerStore.getState().current.speed,
-                    ...getMpvProperties(useSettingsStore.getState().playback.mpvProperties),
+                        ...getMpvProperties(useSettingsStore.getState().playback.mpvProperties),
-                };
+                    };
 
-                await mpvPlayer?.initialize({
+                    await mpvPlayer?.initialize({
-                    extraParameters,
+                        extraParameters,
-                    properties,
+                        properties,
-                });
+                    });
 
-                mpvPlayer?.volume(properties.volume);
+                    mpvPlayer?.volume(properties.volume);
+                }
             }
-            mpvPlayer?.restoreQueue();
+
+            utils?.restoreQueue();
         };
 
-        if (isElectron() && playbackType === PlaybackType.LOCAL) {
+        if (isElectron()) {
             initializeMpv();
         }
 
@@ -136,8 +139,8 @@ export const App = () => {
     }, [bindings]);
 
     useEffect(() => {
-        if (isElectron()) {
+        if (utils) {
-            mpvPlayerListener!.rendererSaveQueue(() => {
+            utils.onSaveQueue(() => {
                 const { current, queue } = usePlayerStore.getState();
                 const stateToSave: Partial<Pick<PlayerState, 'current' | 'queue'>> = {
                     current: {
@@ -146,10 +149,10 @@ export const App = () => {
                     },
                     queue,
                 };
-                mpvPlayer!.saveQueue(stateToSave);
+                utils.saveQueue(stateToSave);
             });
 
-            mpvPlayerListener!.rendererRestoreQueue((_event: any, data) => {
+            utils.onRestoreQueue((_event: any, data) => {
                 const playerData = restoreQueue(data);
                 if (playbackType === PlaybackType.LOCAL) {
                     mpvPlayer!.setQueue(playerData, true);
@@ -158,8 +161,8 @@ export const App = () => {
         }
 
         return () => {
-            ipc?.removeAllListeners('renderer-player-restore-queue');
+            ipc?.removeAllListeners('renderer-restore-queue');
-            ipc?.removeAllListeners('renderer-player-save-queue');
+            ipc?.removeAllListeners('renderer-save-queue');
         };
     }, [playbackType, restoreQueue]);
 

src/renderer/features/action-required/components/mpv-required.tsx

@@ -1,23 +1,36 @@
 import { useEffect, useState } from 'react';
 import isElectron from 'is-electron';
-import { FileInput, Text, Button } from '/@/renderer/components';
+import { FileInput, Text, Button, Checkbox } from '/@/renderer/components';
+import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
+import { PlaybackType } from '/@/renderer/types';
+import { useTranslation } from 'react-i18next';
 
 const localSettings = isElectron() ? window.electron.localSettings : null;
 
 export const MpvRequired = () => {
     const [mpvPath, setMpvPath] = useState('');
+    const settings = usePlaybackSettings();
+    const { setSettings } = useSettingsStoreActions();
+    const [disabled, setDisabled] = useState(false);
+    const { t } = useTranslation();
+
     const handleSetMpvPath = (e: File) => {
         localSettings?.set('mpv_path', e.path);
     };
 
-    useEffect(() => {
+    const handleSetDisableMpv = (disabled: boolean) => {
-        const getMpvPath = async () => {
+        setDisabled(disabled);
-            if (!localSettings) return setMpvPath('');
+        localSettings?.set('disable_mpv', disabled);
-            const mpvPath = localSettings.get('mpv_path') as string;
-            return setMpvPath(mpvPath);
-        };
 
-        getMpvPath();
+        setSettings({
+            playback: { ...settings, type: disabled ? PlaybackType.WEB : PlaybackType.LOCAL },
+        });
+    };
+
+    useEffect(() => {
+        if (!localSettings) return setMpvPath('');
+        const mpvPath = localSettings.get('mpv_path') as string;
+        return setMpvPath(mpvPath);
     }, []);
 
     return (
@@ -34,9 +47,15 @@ export const MpvRequired = () => {
                 </a>
             </Text>
             <FileInput
+                disabled={disabled}
                 placeholder={mpvPath}
                 onChange={handleSetMpvPath}
             />
+            <Text>{t('setting.disable_mpv', { context: 'description' })}</Text>
+            <Checkbox
+                label={t('setting.disableMpv')}
+                onChange={(e) => handleSetDisableMpv(e.currentTarget.checked)}
+            />
             <Button onClick={() => localSettings?.restart()}>Restart</Button>
         </>
     );

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useMemo } from 'react';
 import { Center, Group, Stack } from '@mantine/core';
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
@@ -18,23 +18,19 @@ const localSettings = isElectron() ? window.electron.localSettings : null;
 const ActionRequiredRoute = () => {
     const { t } = useTranslation();
     const currentServer = useCurrentServer();
-    const [isMpvRequired, setIsMpvRequired] = useState(false);
     const isServerRequired = !currentServer;
     const isCredentialRequired = false;
 
-    useEffect(() => {
+    const isMpvRequired = useMemo(() => {
-        const getMpvPath = async () => {
+        if (!localSettings) return false;
-            if (!localSettings) return setIsMpvRequired(false);
-            const mpvPath = await localSettings.get('mpv_path');
 
-            if (mpvPath) {
+        const mpvPath = localSettings.get('mpv_path');
-                return setIsMpvRequired(false);
+        if (mpvPath) {
-            }
+            return false;
+        }
 
-            return setIsMpvRequired(true);
+        const mpvDisabled = localSettings.get('disable_mpv');
-        };
+        return !mpvDisabled;
-
-        getMpvPath();
     }, []);
 
     const checks = [

src/renderer/features/settings/components/playback/audio-settings.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { SelectItem } from '@mantine/core';
 import isElectron from 'is-electron';
-import { Select, Slider, toast } from '/@/renderer/components';
+import { Checkbox, Select, Slider, toast } from '/@/renderer/components';
 import {
     SettingsSection,
     SettingOption,
@@ -12,12 +12,15 @@ import { PlaybackType, PlayerStatus, PlaybackStyle, CrossfadeStyle } from '/@/re
 import { useTranslation } from 'react-i18next';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
+const localSettings = isElectron() ? window.electron.localSettings : null;
 
 const getAudioDevice = async () => {
     const devices = await navigator.mediaDevices.enumerateDevices();
     return (devices || []).filter((dev: MediaDeviceInfo) => dev.kind === 'audiooutput');
 };
 
+const initialDisable = (localSettings?.get('disable_mpv') as boolean | undefined) ?? false;
+
 export const AudioSettings = () => {
     const { t } = useTranslation();
     const settings = usePlaybackSettings();
@@ -25,6 +28,18 @@ export const AudioSettings = () => {
     const status = useCurrentStatus();
 
     const [audioDevices, setAudioDevices] = useState<SelectItem[]>([]);
+    const [disableMpv, setDisableMpv] = useState(initialDisable);
+
+    const handleSetDisableMpv = (disabled: boolean) => {
+        setDisableMpv(disabled);
+        localSettings?.set('disable_mpv', disabled);
+
+        if (disabled) {
+            setSettings({
+                playback: { ...settings, type: disabled ? PlaybackType.WEB : PlaybackType.LOCAL },
+            });
+        }
+    };
 
     useEffect(() => {
         const getAudioDevices = () => {
@@ -45,6 +60,18 @@ export const AudioSettings = () => {
     }, [settings.type, t]);
 
     const audioOptions: SettingOption[] = [
+        {
+            control: (
+                <Checkbox
+                    defaultChecked={disableMpv}
+                    onChange={(e) => handleSetDisableMpv(e.currentTarget.checked)}
+                />
+            ),
+            description: t('setting.disableMpv', { context: 'description' }),
+            isHidden: !isElectron(),
+            note: t('common.restartRequired', { postProcess: 'sentenceCase' }),
+            title: t('setting.disableMpv'),
+        },
         {
             control: (
                 <Select
@@ -71,7 +98,7 @@ export const AudioSettings = () => {
                 context: 'description',
                 postProcess: 'sentenceCase',
             }),
-            isHidden: !isElectron(),
+            isHidden: !isElectron() || initialDisable || disableMpv,
             note:
                 status === PlayerStatus.PLAYING
                     ? t('common.playerMustBePaused', { postProcess: 'sentenceCase' })

src/renderer/router/app-outlet.tsx

@@ -13,8 +13,12 @@ export const AppOutlet = () => {
         const isMpvRequired = () => {
             if (!localSettings) return false;
             const mpvPath = localSettings.get('mpv_path');
-            if (mpvPath) return false;
+            if (mpvPath) {
-            return true;
+                return false;
+            }
+
+            const mpvDisabled = localSettings.get('disable_mpv');
+            return !mpvDisabled;
         };
 
         const isServerRequired = !currentServer;