Add dialogs

src/main.ts

@@ -1,7 +1,8 @@
-import { BrowserWindow, app, ipcMain } from "electron";
+import { FileFilter, BrowserWindow, app, dialog, ipcMain } from "electron";
 import path = require("path");
 import ffmpegPath = require("ffmpeg-static");
 
+/** Create a new window */
 const createWindow = () => {
   const win = new BrowserWindow({
     width: 1280,
@@ -15,9 +16,28 @@ const createWindow = () => {
   win.webContents.openDevTools(); // debug
 };
 
+const moviesFilter = {
+  name: "Videos",
+  extensions: ["mp4", "mkv"],
+} as FileFilter;
+
+/** Ask user a file */
+const askFile = async () => {
+  return (
+    await dialog.showOpenDialog({
+      filters: [moviesFilter],
+      properties: ["openFile", "dontAddToRecent"],
+    })
+  ).filePaths;
+};
+
 app.whenReady().then(() => {
+  /* Context bridge */
   ipcMain.handle("ffmpeg", () => ffmpegPath);
   ipcMain.handle("argv", () => process.argv);
+  ipcMain.handle("allowedExtensions", () => moviesFilter);
+  ipcMain.handle("askfile", () => askFile());
+  ipcMain.handle("exit", () => app.quit());
 
   createWindow();
 

src/preload.ts

@@ -1,6 +1,10 @@
 import { contextBridge, ipcRenderer } from "electron";
 
+/* Context bridge */
 contextBridge.exposeInMainWorld("internals", {
   ffmpeg: () => ipcRenderer.invoke("ffmpeg"),
   argv: () => ipcRenderer.invoke("argv"),
+  allowedExtensions: () => ipcRenderer.invoke("allowedExtensions"),
+  askFile: () => ipcRenderer.invoke("askfile"),
+  exit: () => ipcRenderer.invoke("exit"),
 });

src/scripts/renderer.ts

@@ -1,17 +1,30 @@
-/* Context bridge */
+/* Context bridge types */
 let internals: {
   ffmpeg: () => Promise<string>;
-  argv: () => Promise<string>;
+  argv: () => Promise<string[]>;
+  allowedExtensions: () => Promise<{
+    extensions: string[];
+  }>;
+  askFile: () => Promise<string[]>;
+  exit: () => any;
 };
 
-const get_ffmpeg = async () => {
+const get_file = async () => {
-  const response = await internals.ffmpeg();
+  const allowedExtensions = (await internals.allowedExtensions()).extensions;
-  console.log(response);
+  console.log(allowedExtensions);
-};
+  const argv = await internals.argv();
-get_ffmpeg();
+  if (argv.length === 2) {
+    const file = argv.pop();
+    if (allowedExtensions.some((ext) => file.endsWith(ext))) {
+      return file;
+    }
+  }
 
-const get_argv = async () => {
+  const file = await internals.askFile();
-  const response = await internals.argv();
+  if (file.length === 0) {
-  console.log(response);
+    await internals.exit();
+  }
+  return file.join("");
 };
-get_argv();
+
+get_file().then((file) => (document.getElementById("info").innerText = file));