Show error dialog on ctrl+shift+f if no videos are detected

killergerbah · Apr 14, 2024 · 7b77100 · 7b77100
1 parent d01df42
commit 7b77100
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 56 deletions.
diff --git a/common/locales/de.json b/common/locales/de.json
@@ -215,7 +215,8 @@
         "disabledRepeatPlayback": "Repeat playback: Off",
         "connectionSucceeded": "Connection succeeded",
         "connectionFailed": "Connection failed",
-        "error": "Error: {{message}}"
+        "error": "Error: {{message}}",
+        "errorNoMessage": "Error"
     },
     "landing": {
         "cta": "Untertitel und Medien hierher ziehen oder <1>suchen</1>",

diff --git a/common/locales/en.json b/common/locales/en.json
@@ -215,7 +215,8 @@
         "disabledRepeatPlayback": "Repeat playback: Off",
         "connectionSucceeded": "Connection succeeded",
         "connectionFailed": "Connection failed",
-        "error": "Error: {{message}}"
+        "error": "Error: {{message}}",
+        "errorNoMessage": "Error"
     },
     "landing": {
         "cta": "Drag and drop subtitle and media files, or <1>browse</1>.",

diff --git a/common/locales/es.json b/common/locales/es.json
@@ -215,7 +215,8 @@
         "disabledRepeatPlayback": "Repeat playback: Off",
         "connectionSucceeded": "Connection succeeded",
         "connectionFailed": "Connection failed",
-        "error": "Error: {{message}}"
+        "error": "Error: {{message}}",
+        "errorNoMessage": "Error"
     },
     "landing": {
         "cta": "Arrastra archivos de medios y subtítulos o <1>explora</1>.",

diff --git a/common/locales/ja.json b/common/locales/ja.json
@@ -215,7 +215,8 @@
         "disabledRepeatPlayback": "リピートプレイバック：オフ",
         "connectionSucceeded": "接続が成功しました",
         "connectionFailed": "接続に失敗しました",
-        "error": "エラー：{{message}}"
+        "error": "エラー：{{message}}",
+        "errorNoMessage": "エラー"
     },
     "landing": {
         "cta": "字幕やメディアファイルをドラッグ＆ドロップ、または<1>ファイルを選択</1>してください。",

diff --git a/common/locales/pl.json b/common/locales/pl.json
@@ -215,7 +215,8 @@
         "disabledRepeatPlayback": "Repeat playback: Off",
         "connectionSucceeded": "Connection succeeded",
         "connectionFailed": "Connection failed",
-        "error": "Error: {{message}}"
+        "error": "Error: {{message}}",
+        "errorNoMessage": "Error"
     },
     "landing": {
         "cta": "Przenieś i upuść napisy i pliki medialne, lub <1>przeglądaj</1>.",

diff --git a/common/locales/pt_BR.json b/common/locales/pt_BR.json
@@ -215,7 +215,8 @@
         "disabledRepeatPlayback": "Repeat playback: Off",
         "connectionSucceeded": "Connection succeeded",
         "connectionFailed": "Connection failed",
-        "error": "Error: {{message}}"
+        "error": "Error: {{message}}",
+        "errorNoMessage": "Error"
     },
     "landing": {
         "cta": "Arraste e solte arquivos de mídia e legenda, ou <1>procure</1>.",

diff --git a/common/locales/ru.json b/common/locales/ru.json
@@ -215,7 +215,8 @@
         "disabledRepeatPlayback": "Repeat playback: Off",
         "connectionSucceeded": "Connection succeeded",
         "connectionFailed": "Connection failed",
-        "error": "Error: {{message}}"
+        "error": "Error: {{message}}",
+        "errorNoMessage": "Error"
     },
     "landing": {
         "cta": "Перетащите медиафайлы и файлы субтитров или <1>выберите</1> их.",

diff --git a/common/locales/zh_CN.json b/common/locales/zh_CN.json
@@ -215,7 +215,8 @@
         "disabledRepeatPlayback": "Repeat mode: Off",
         "connectionSucceeded": "Connection succeeded",
         "connectionFailed": "Connection failed",
-        "error": "Error: {{message}}"
+        "error": "Error: {{message}}",
+        "errorNoMessage": "Error"
     },
     "landing": {
         "cta": "拖放字幕和媒体文件，或<1>浏览</1>。",

diff --git a/extension/src/controllers/video-select-controller.ts b/extension/src/controllers/video-select-controller.ts
@@ -87,6 +87,8 @@ export default class VideoSelectController {
         } else if (this._bindings.length > 1) {
             // Toggle on
             this._showUi(openedFromMiningCommand);
+        } else {
+            this._showNoVideoElementsUi();
         }
     }
 
@@ -110,6 +112,18 @@ export default class VideoSelectController {
             videoElements.push(await p);
         }
 
+        const client = await this._prepareAndShowFrame();
+        const themeType = await this._settings.getSingle('themeType');
+        client.updateState({ open: true, themeType, videoElements, openedFromMiningCommand });
+    }
+
+    private async _showNoVideoElementsUi() {
+        const client = await this._prepareAndShowFrame();
+        const themeType = await this._settings.getSingle('themeType');
+        client.updateState({ open: true, themeType, videoElements: [] });
+    }
+
+    private async _prepareAndShowFrame() {
         this._frame.language = await this._settings.getSingle('language');
         const isNewClient = await this._frame.bind();
         const client = await this._frame.client();
@@ -130,8 +144,7 @@ export default class VideoSelectController {
         }
 
         this._frame.show();
-        const themeType = await this._settings.getSingle('themeType');
-        client.updateState({ open: true, themeType, videoElements, openedFromMiningCommand });
+        return client;
     }
 
     private async _hideUi() {

diff --git a/extension/src/ui/components/VideoSelectUi.tsx b/extension/src/ui/components/VideoSelectUi.tsx
@@ -14,7 +14,6 @@ import TextField from '@material-ui/core/TextField';
 import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import { PaletteType } from '@material-ui/core';
 import Bridge from '../bridge';
 import {
     Message,
@@ -23,6 +22,7 @@ import {
     VideoSelectModeConfirmMessage,
 } from '@project/common';
 import { createTheme } from '@project/common/theme';
+import { PaletteType } from '@material-ui/core';
 
 interface Props {
     bridge: Bridge;
@@ -91,52 +91,77 @@ export default function VideoSelectUi({ bridge }: Props) {
         <ThemeProvider theme={theme}>
             <CssBaseline />
             <Dialog open={open} fullWidth maxWidth="sm">
-                <Toolbar>
-                    <Typography variant="h6" style={{ flexGrow: 1 }}>
-                        {t('extension.videoSelect.multipleVideoElements')}{' '}
-                    </Typography>
-                    <IconButton edge="end" onClick={() => handleCancel()}>
-                        <CloseIcon />
-                    </IconButton>
-                </Toolbar>
-                <DialogContent>
-                    {openedFromMiningCommand ? (
-                        <DialogContentText>{t('extension.videoSelect.syncBeforeMine')}</DialogContentText>
-                    ) : (
-                        <DialogContentText>{t('extension.videoSelect.selectVideo')}</DialogContentText>
-                    )}
-                    <Grid container direction="column" spacing={2}>
-                        <Grid item style={{ maxWidth: '100%' }}>
-                            <TextField
-                                select
-                                fullWidth
-                                color="secondary"
-                                variant="filled"
-                                label={t('extension.videoSelect.videoElement')}
-                                value={selectedVideoElementSrc}
-                                onChange={(e) => setSelectedVideoElementSrc(e.target.value)}
-                            >
-                                {videoElements.map((v) => (
-                                    <MenuItem value={v.src} key={v.src}>
-                                        <img style={{ maxWidth: 20, marginRight: 12 }} src={v.imageDataUrl} />
-                                        {v.src}
-                                    </MenuItem>
-                                ))}
-                            </TextField>
-                        </Grid>
-                        <Grid item style={{ maxWidth: '100%' }}>
-                            {selectedVideoElementSrc !== '' && (
-                                <img
-                                    style={{ width: '100%' }}
-                                    src={videoElements.find((v) => v.src === selectedVideoElementSrc)!.imageDataUrl}
-                                />
+                {videoElements.length > 0 && (
+                    <>
+                        <Toolbar>
+                            <Typography variant="h6" style={{ flexGrow: 1 }}>
+                                {t('extension.videoSelect.multipleVideoElements')}
+                            </Typography>
+                            <IconButton edge="end" onClick={() => handleCancel()}>
+                                <CloseIcon />
+                            </IconButton>
+                        </Toolbar>
+                        <DialogContent>
+                            {openedFromMiningCommand ? (
+                                <DialogContentText>{t('extension.videoSelect.syncBeforeMine')}</DialogContentText>
+                            ) : (
+                                <DialogContentText>{t('extension.videoSelect.selectVideo')}</DialogContentText>
                             )}
-                        </Grid>
-                    </Grid>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={handleConfirm}>{t('action.ok')}</Button>
-                </DialogActions>
+                            <Grid container direction="column" spacing={2}>
+                                <Grid item style={{ maxWidth: '100%' }}>
+                                    <TextField
+                                        select
+                                        fullWidth
+                                        color="secondary"
+                                        variant="filled"
+                                        label={t('extension.videoSelect.videoElement')}
+                                        value={selectedVideoElementSrc}
+                                        onChange={(e) => setSelectedVideoElementSrc(e.target.value)}
+                                    >
+                                        {videoElements.map((v) => (
+                                            <MenuItem value={v.src} key={v.src}>
+                                                <img style={{ maxWidth: 20, marginRight: 12 }} src={v.imageDataUrl} />
+                                                {v.src}
+                                            </MenuItem>
+                                        ))}
+                                    </TextField>
+                                </Grid>
+                                <Grid item style={{ maxWidth: '100%' }}>
+                                    {selectedVideoElementSrc !== '' && (
+                                        <img
+                                            style={{ width: '100%' }}
+                                            src={
+                                                videoElements.find((v) => v.src === selectedVideoElementSrc)!
+                                                    .imageDataUrl
+                                            }
+                                        />
+                                    )}
+                                </Grid>
+                            </Grid>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={handleConfirm}>{t('action.ok')}</Button>
+                        </DialogActions>
+                    </>
+                )}
+                {videoElements.length === 0 && (
+                    <>
+                        <Toolbar>
+                            <Typography variant="h6" style={{ flexGrow: 1 }}>
+                                {t('info.errorNoMessage')}
+                            </Typography>
+                            <IconButton edge="end" onClick={() => handleCancel()}>
+                                <CloseIcon />
+                            </IconButton>
+                        </Toolbar>
+                        <DialogContent>
+                            <DialogContentText>{t('landing.noVideoElementsDetected')}</DialogContentText>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={handleCancel}>{t('action.ok')}</Button>
+                        </DialogActions>
+                    </>
+                )}
             </Dialog>
         </ThemeProvider>
     );