Translation and Bugfix

electron/src/setup.ts

@@ -132,8 +132,7 @@ export class ElectronCapacitorApp {
             },
         });
         this.mainWindowState.manage(this.MainWindow);
-        this.MainWindow.webContents.postMessage("port", null, [this.channels.port1]);
+        Actions.setMainWindow(this.MainWindow);
-        Actions.setVideoWindowPort(this.channels.port2);
 
         if (this.CapacitorFileConfig.backgroundColor) {
             this.MainWindow.setBackgroundColor(this.CapacitorFileConfig.electron.backgroundColor);

locales/de/common.json

@@ -1,5 +1,15 @@
 {
   "app": {
     "title": "Easy Youtube"
-  }
+  },
+  "form.bottom": "Abstand Unten",
+  "form.id": "Video-ID/Link",
+  "form.left": "Abstand Links",
+  "form.mute": "Stumm",
+  "form.right": "Abstand Rechts",
+  "form.tilt": "Trapez-Korrektur",
+  "form.top": "Abstand Oben",
+  "window.close": "Video schließen",
+  "window.fullscreen": "Vollbild",
+  "window.open": "Video öffnen"
 }

locales/en/common.json

@@ -1,5 +1,15 @@
 {
   "app": {
     "title": "Easy Youtube"
-  }
+  },
+  "form.bottom": "Space Bottom",
+  "form.id": "Video-ID/Link",
+  "form.left": "Space Left",
+  "form.mute": "Mute",
+  "form.right": "Space Right",
+  "form.tilt": "Tilt",
+  "form.top": "Space Top",
+  "window.close": "Close Video",
+  "window.fullscreen": "Fullscreen",
+  "window.open": "Open Video"
 }

package.json

@@ -14,7 +14,7 @@
     "eslint:fix": "npm run eslint -- --fix",
     "postinstall": "patch-package && cd electron && npm install && cd ..",
     "electron:prepare": "cp -f src/electron/Actions.ts src/electron/Bridge.ts electron/src/ && bin/export.sh",
-    "electron": "npm run electron:prepare && cap sync @capacitor-community/electron && cap open @capacitor-community/electron",
+    "electron": "export ELECTRON_ENABLE_LOGGING=1 && npm run electron:prepare && cap sync @capacitor-community/electron && cd electron && npm run electron:start",
     "electron:copy": "npm run electron:prepare && cap copy @capacitor-community/electron",
     "electron:pack": "npm run electron:prepare && cap copy @capacitor-community/electron && cd electron && npm run electron:pack && cd .."
   },

src/electron/Actions.ts

@@ -1,17 +1,16 @@
-import { BrowserWindow, app } from "electron";
+import { BrowserWindow, MessageChannelMain, app } from "electron";
 import { join } from "path";
-import type { MessagePortMain } from "electron";
 
 let videoWindow: BrowserWindow | undefined;
 let isDev = false;
-let videoWindowPort: MessagePortMain | undefined;
+let mainWindow: BrowserWindow | undefined;
 
 export const Actions = {
     setIsDev(newIsDev: boolean) {
         isDev = newIsDev;
     },
-    setVideoWindowPort(port: MessagePortMain) {
+    setMainWindow(newMainWindow: BrowserWindow) {
-        videoWindowPort = port;
+        mainWindow = newMainWindow;
     },
     startNewWindow: async (videoId: string) => {
         const preloadPath = join(app.getAppPath(), 'build', 'src', 'preload.js');
@@ -20,6 +19,7 @@ export const Actions = {
             try {
                 videoWindow.close();
             } catch (e) {
+                console.error(e);
             }
         }
 
@@ -36,16 +36,18 @@ export const Actions = {
         }
         await videoWindow.loadURL(`capacitor-electron://app/fullscreen.html?id=${videoId}`);
 
-        if (videoWindowPort) {
+        if (mainWindow) {
-            videoWindow.webContents.postMessage("port", null, [videoWindowPort]);
+            const newChannel = new MessageChannelMain();
+            mainWindow.webContents.postMessage("port", null, [newChannel.port1]);
+            videoWindow.webContents.postMessage("port", null, [newChannel.port2]);
         }
     },
     closeVideoWindow() {
         if (videoWindow) {
             try {
-
                 videoWindow.close();
             } catch (e) {
+                console.error(e);
             }
             videoWindow = undefined;
         }

src/pages/index.tsx

@@ -51,7 +51,7 @@ function Index(_: IndexProps) {
         Actions.startNewWindow(id);
         Bridge.send("dimensions", dimension);
         Bridge.send("tilt", tilt);
-    }, [dimension, id]);
+    }, [dimension, id, tilt]);
 
     const closeWindow = useCallback(() => {
         Actions.closeVideoWindow();
@@ -210,6 +210,7 @@ function Index(_: IndexProps) {
                 <Input value={dimension.left} onChangeText={updateLeft} label={t("form.left")} type="number"/>
             </GridItem>
             <GridItem size={4}>
+                <Text>{t("form.tilt")}</Text>
                 <Flex horizontal={true}>
                     <Grow>
                         <Slider value={tilt} onChangeValue={updateTilt} step={1} min={-90} max={90}/>
@@ -249,7 +250,8 @@ function Index(_: IndexProps) {
                     <Grow>
                         <Slider value={currentTime} onChangeValue={updateLocalCurrentTime} step={1}
                                 min={Math.min(duration, 1)}
-                                max={duration}/>
+                                max={duration}
+                        />
                     </Grow>
                     <Input value={parsableTime} onChangeText={updateLocalParsableTime} onChangeDone={parseTime}
                            className={styles.timeInput}/>