fix mpv path save dialog (#930) (#940)

src/main/features/core/settings/index.ts

@@ -1,6 +1,6 @@
 import type { TitleTheme } from '/@/shared/types/types';
 
-import { ipcMain, nativeTheme, safeStorage } from 'electron';
+import { dialog, ipcMain, nativeTheme, OpenDialogOptions, safeStorage } from 'electron';
 import Store from 'electron-store';
 
 export const store = new Store();
@@ -55,3 +55,12 @@ ipcMain.on('theme-set', (_event, theme: TitleTheme) => {
     store.set('theme', theme);
     nativeTheme.themeSource = theme;
 });
+
+ipcMain.handle('open-file-selector', async (_event, options: OpenDialogOptions) => {
+    const result = await dialog.showOpenDialog({
+        ...options,
+        properties: ['openFile'],
+    });
+
+    return result.filePaths[0] || null;
+});

src/preload/local-settings.ts

@@ -1,4 +1,4 @@
-import { ipcRenderer, IpcRendererEvent, webFrame } from 'electron';
+import { ipcRenderer, IpcRendererEvent, OpenDialogOptions, webFrame } from 'electron';
 import Store from 'electron-store';
 
 import { TitleTheme } from '/@/shared/types/types';
@@ -57,6 +57,11 @@ const themeSet = (theme: TitleTheme): void => {
     ipcRenderer.send('theme-set', theme);
 };
 
+const openFileSelector = async (options?: OpenDialogOptions) => {
+    const result = await ipcRenderer.invoke('open-file-selector', options);
+    return result;
+};
+
 export const toServerType = (value?: string): null | string => {
     switch (value?.toLowerCase()) {
         case 'jellyfin':
@@ -87,6 +92,7 @@ export const localSettings = {
     env,
     fontError,
     get,
+    openFileSelector,
     passwordGet,
     passwordRemove,
     passwordSet,

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

@@ -6,12 +6,12 @@ import { RiCloseLine, RiRestartLine } from 'react-icons/ri';
 
 import {
     Button,
-    FileInput,
     NumberInput,
     Select,
     Switch,
     Text,
     Textarea,
+    TextInput,
 } from '/@/renderer/components';
 import {
     SettingOption,
@@ -81,15 +81,23 @@ export const MpvSettings = () => {
 
     const [mpvPath, setMpvPath] = useState('');
 
-    const handleSetMpvPath = (e: File | null) => {
-        if (e === null) {
+    const handleSetMpvPath = async (clear?: boolean) => {
+        if (clear) {
             localSettings?.set('mpv_path', undefined);
             setMpvPath('');
             return;
         }
 
-        localSettings?.set('mpv_path', e.path);
-        setMpvPath(e.path);
+        const result = await localSettings?.openFileSelector();
+
+        if (result === null) {
+            localSettings?.set('mpv_path', undefined);
+            setMpvPath('');
+            return;
+        }
+
+        localSettings?.set('mpv_path', result);
+        setMpvPath(result);
     };
 
     useEffect(() => {
@@ -160,13 +168,13 @@ export const MpvSettings = () => {
                     >
                         <RiRestartLine />
                     </Button>
-                    <FileInput
-                        onChange={handleSetMpvPath}
+                    <TextInput
+                        onClick={() => handleSetMpvPath()}
                         rightSection={
                             mpvPath && (
                                 <Button
                                     compact
-                                    onClick={() => handleSetMpvPath(null)}
+                                    onClick={() => handleSetMpvPath(true)}
                                     tooltip={{
                                         label: t('common.clear', { postProcess: 'titleCase' }),
                                         openDelay: 0,
@@ -177,6 +185,8 @@ export const MpvSettings = () => {
                                 </Button>
                             )
                         }
+                        type="button"
+                        value={mpvPath}
                         width={200}
                     />
                 </Group>