Add settings button on video/subtitle selector dialogs

- Helps especially on mobile where there is no obvious way to open the settings
killergerbah · Oct 25, 2024 · 704c7f3 · 704c7f3
1 parent 7c321cc
commit 704c7f3
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 1 deletion.
diff --git a/extension/src/controllers/video-data-sync-controller.ts b/extension/src/controllers/video-data-sync-controller.ts
@@ -1,6 +1,7 @@
 import {
     ConfirmedVideoDataSubtitleTrack,
     ExtensionSyncMessage,
+    OpenAsbplayerSettingsMessage,
     SerializedSubtitleFile,
     VideoData,
     VideoDataSubtitleTrack,
@@ -292,6 +293,16 @@ export default class VideoDataSyncController {
                             await this._reportError(e.message);
                         }
                     }
+                } else if ('openSettings' === message.command) {
+                    const openSettingsCommand: VideoToExtensionCommand<OpenAsbplayerSettingsMessage> = {
+                        sender: 'asbplayer-video',
+                        message: {
+                            command: 'open-asbplayer-settings',
+                        },
+                        src: this._context.video.src,
+                    };
+                    chrome.runtime.sendMessage(openSettingsCommand);
+                    return;
                 }
 
                 if (dataWasSynced) {

diff --git a/extension/src/controllers/video-select-controller.ts b/extension/src/controllers/video-select-controller.ts
@@ -1,4 +1,10 @@
-import { CaptureVisibleTabMessage, ForegroundToExtensionCommand, VideoSelectModeConfirmMessage } from '@project/common';
+import {
+    CaptureVisibleTabMessage,
+    ForegroundToExtensionCommand,
+    OpenAsbplayerSettingsMessage,
+    TabToExtensionCommand,
+    VideoSelectModeConfirmMessage,
+} from '@project/common';
 import { SettingsProvider } from '@project/common/settings';
 import { VideoElement } from '../ui/components/VideoSelectUi';
 import Binding from '../services/binding';
@@ -138,6 +144,14 @@ export default class VideoSelectController {
                     this._bindings
                         .find((b) => b.video.src === (message as VideoSelectModeConfirmMessage).selectedVideoElementSrc)
                         ?.showVideoDataDialog(false);
+                } else if (message.command === 'openSettings') {
+                    const openSettingsCommand: TabToExtensionCommand<OpenAsbplayerSettingsMessage> = {
+                        sender: 'asbplayer-video-tab',
+                        message: {
+                            command: 'open-asbplayer-settings',
+                        },
+                    };
+                    chrome.runtime.sendMessage(openSettingsCommand);
                 } else if (message.command === 'cancel') {
                     client.updateState({ open: false });
                     this._frame.hide();

diff --git a/extension/src/ui/components/VideoDataSyncDialog.tsx b/extension/src/ui/components/VideoDataSyncDialog.tsx
@@ -7,6 +7,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
+import SettingsIcon from '@material-ui/icons/Settings';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -58,6 +59,7 @@ interface Props {
     openReason: VideoDataUiOpenReason;
     onCancel: () => void;
     onOpenFile: () => void;
+    onOpenSettings: () => void;
     onConfirm: (track: ConfirmedVideoDataSubtitleTrack[], shouldRememberTrackChoices: boolean) => void;
 }
 
@@ -74,6 +76,7 @@ export default function VideoDataSyncDialog({
     openReason,
     onCancel,
     onOpenFile,
+    onOpenSettings,
     onConfirm,
 }: Props) {
     const { t } = useTranslation();
@@ -212,6 +215,11 @@ export default function VideoDataSyncDialog({
                 <Typography variant="h6" style={{ flexGrow: 1 }}>
                     {t('extension.videoDataSync.selectSubtitles')}
                 </Typography>
+                {onOpenSettings && (
+                    <IconButton edge="end" onClick={onOpenSettings}>
+                        <SettingsIcon />
+                    </IconButton>
+                )}
                 {onCancel && (
                     <IconButton edge="end" onClick={() => onCancel()}>
                         <CloseIcon />

diff --git a/extension/src/ui/components/VideoDataSyncUi.tsx b/extension/src/ui/components/VideoDataSyncUi.tsx
@@ -45,6 +45,9 @@ export default function VideoDataSyncUi({ bridge }: Props) {
 
     const theme = useMemo(() => createTheme((themeType || 'dark') as PaletteType), [themeType]);
 
+    const handleOpenSettings = useCallback(() => {
+        bridge.sendMessageFromServer({ command: 'openSettings' });
+    }, [bridge]);
     const handleCancel = useCallback(() => {
         setOpen(false);
         bridge.sendMessageFromServer({ command: 'cancel' });
@@ -174,6 +177,7 @@ export default function VideoDataSyncUi({ bridge }: Props) {
                 error={error}
                 onCancel={handleCancel}
                 onOpenFile={handleOpenFile}
+                onOpenSettings={handleOpenSettings}
                 onConfirm={handleConfirm}
             />
             <input

diff --git a/extension/src/ui/components/VideoSelectUi.tsx b/extension/src/ui/components/VideoSelectUi.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import CloseIcon from '@material-ui/icons/Close';
+import SettingsIcon from '@material-ui/icons/Settings';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -80,6 +81,9 @@ export default function VideoSelectUi({ bridge }: Props) {
         setOpen(false);
     }, [bridge, selectedVideoElementSrc]);
 
+    const handleOpenSettings = useCallback(() => {
+        bridge.sendMessageFromServer({ command: 'openSettings' });
+    }, [bridge]);
     const handleCancel = useCallback(() => {
         const message: VideoSelectModeCancelMessage = {
             command: 'cancel',
@@ -97,6 +101,9 @@ export default function VideoSelectUi({ bridge }: Props) {
                             <Typography variant="h6" style={{ flexGrow: 1 }}>
                                 {t('extension.videoSelect.multipleVideoElements')}
                             </Typography>
+                            <IconButton edge="end" onClick={() => handleOpenSettings()}>
+                                <SettingsIcon />
+                            </IconButton>
                             <IconButton edge="end" onClick={() => handleCancel()}>
                                 <CloseIcon />
                             </IconButton>