fix bulk save

components/BrightnessDialog.tsx

@@ -83,7 +83,6 @@ const BrightnessDialog: React.FunctionComponent = (props) => {
     }
 
     const click = (button: "accept" | "reject") => {
-        console.log(button)
         if (button === "accept") {
             ipcRenderer.invoke("apply-brightness", state)
         }

components/BulkSaveDialog.tsx

@@ -2,40 +2,44 @@ import {ipcRenderer} from "electron"
 import Slider from "rc-slider"
 import Draggable from "react-draggable"
 import React, {useEffect, useState, useRef} from "react"
+import ReactDom from "react-dom"
 import "../styles/bulksavedialog.less"
 
 const BulkSaveDialog: React.FunctionComponent = (props) => {
-    const [visible, setVisible] = useState(false)
     const [hover, setHover] = useState(false)
 
     useEffect(() => {
-        const showBulkSaveDialog = (event: any) => {
-            setVisible(true)
+        const keyDown = async (event: globalThis.KeyboardEvent) => {
+            if (event.key === "Enter") {
+                enterPressed()
+            }
+            if (event.key === "Escape") {
+                escapePressed()
+            }
         }
-        const closeAllDialogs = (event: any, ignore: any) => {
-            if (ignore !== "bulk-save") setVisible(false)
+        const enterPressed = () => {
+            click("accept")
         }
-        ipcRenderer.on("show-bulk-save-dialog", showBulkSaveDialog)
-        ipcRenderer.on("close-all-dialogs", closeAllDialogs)
-        return () => {
-            ipcRenderer.removeListener("show-bulk-save-dialog", showBulkSaveDialog)
-            ipcRenderer.removeListener("close-all-dialogs", closeAllDialogs)
-        }
-    }, [])
-
-    useEffect(() => {
         const escapePressed = () => {
-            if (visible) setVisible(false)
+            click("reject")
         }
+        document.addEventListener("keydown", keyDown)
+        ipcRenderer.on("enter-pressed", enterPressed)
         ipcRenderer.on("escape-pressed", escapePressed)
         return () => {
+            document.removeEventListener("keydown", keyDown)
+            ipcRenderer.removeListener("enter-pressed", enterPressed)
             ipcRenderer.removeListener("escape-pressed", escapePressed)
         }
     })
+
+    const closeAndReset = async () => {
+        await ipcRenderer.invoke("close-current-dialog")
+    }
 
     const close = () => {
         setTimeout(() => {
-            if (!hover) setVisible(false)
+            if (!hover) closeAndReset()
         }, 100)
     }
 
@@ -45,34 +49,31 @@ const BulkSaveDialog: React.FunctionComponent = (props) => {
         } else {
             ipcRenderer.invoke("bulk-save-directory")
         }
-        setVisible(false)
+        closeAndReset()
     }
 
-    if (visible) {
-        return (
-            <section className="bulk-save-dialog" onMouseDown={close}>
-                <Draggable handle=".bulk-save-title-container">
-                <div className="bulk-save-dialog-box" onMouseOver={() => setHover(true)} onMouseLeave={() => setHover(false)}>
-                    <div className="bulk-save-container">
-                        <div className="bulk-save-title-container">
-                            <p className="bulk-save-title">Bulk Save</p>
-                        </div>
-                        <div className="bulk-save-row-container">
-                            <div className="bulk-save-row">
-                                <p className="bulk-save-text">Do you want to overwrite the original files?</p>
-                            </div>
-                        </div>
-                        <div className="bulk-save-button-container">
-                            <button onClick={() => click("reject")} className="reject-button">No</button>
-                            <button onClick={() => click("accept")} className="accept-button">Yes</button>
+    return (
+        <section className="bulk-save-dialog" onMouseDown={close}>
+            <Draggable handle=".bulk-save-title-container">
+            <div className="bulk-save-dialog-box" onMouseOver={() => setHover(true)} onMouseLeave={() => setHover(false)}>
+                <div className="bulk-save-container">
+                    <div className="bulk-save-title-container">
+                        <p className="bulk-save-title">Bulk Save</p>
+                    </div>
+                    <div className="bulk-save-row-container">
+                        <div className="bulk-save-row">
+                            <p className="bulk-save-text">Do you want to overwrite the original files?</p>
                         </div>
                     </div>
+                    <div className="bulk-save-button-container">
+                        <button onClick={() => click("reject")} className="reject-button">No</button>
+                        <button onClick={() => click("accept")} className="accept-button">Yes</button>
+                    </div>
                 </div>
-                </Draggable>
-            </section>
-        )
-    }
-    return null
+            </div>
+            </Draggable>
+        </section>
+    )
 }
 
-export default BulkSaveDialog
+ReactDom.render(<BulkSaveDialog/>, document.getElementById("root"))

main.ts

@@ -38,13 +38,18 @@ const getGIFOptions = () => {
   }) as {transparency: boolean, transparentColor: string}
 }
 
-const saveImage = (image: any, savePath: string) => {
+const saveImage = async (image: any, savePath: string) => {
   if (image.startsWith("file:///")) image = image.replace("file:///", "")
   if (path.extname(savePath) === ".gif") {
     functions.downloadImage(image, savePath)
   } else {
     if (image.startsWith("data:")) image = functions.base64ToBuffer(image)
-    sharp(image).toFile(savePath)
+    if (image === savePath) {
+      const buffer = await sharp(image).toBuffer()
+      fs.writeFileSync(savePath, buffer)
+    } else {
+      sharp(image).toFile(savePath)
+    }
   }
 }
 
@@ -107,9 +112,34 @@ ipcMain.handle("bulk-save-overwrite", (event: any) => {
   shell.openPath(path.dirname(originalImages[0]))
 })
 
+/*
 ipcMain.handle("show-bulk-save-dialog", (event: any) => {
   window?.webContents.send("close-all-dialogs", "bulk-save")
   window?.webContents.send("show-bulk-save-dialog")
+})*/
+
+ipcMain.handle("show-bulk-save-dialog", async (event) => {
+  if (currentDialog) {
+    currentDialog.close()
+    revertToLastState()
+    // @ts-expect-error
+    if (currentDialog.type === "bulk-save") return
+  }
+  const bounds = window?.getBounds()!
+  currentDialog = new BrowserWindow({width: 230, height: 170, x: Math.floor(bounds.width/2) + 200, y: Math.floor(bounds.height/2), resizable: false, show: false, frame: false, backgroundColor: "#3177f5", webPreferences: {nodeIntegration: true, contextIsolation: false, webSecurity: false}})
+  currentDialog.loadFile(path.join(__dirname, "bulksavedialog.html"))
+  currentDialog.removeMenu()
+  currentDialog.setAlwaysOnTop(true)
+  require("@electron/remote/main").enable(currentDialog.webContents)
+  currentDialog.on("ready-to-show", () => {
+    currentDialog?.show()
+    window?.focus()
+  })
+  currentDialog.on("closed", () => {
+    currentDialog = null
+  })
+  // @ts-expect-error
+  currentDialog.type = "bulk-save"
 })
 
 ipcMain.handle("bulk-process", () => {

renderer.tsx

@@ -7,7 +7,6 @@ import PhotoViewer from "./components/PhotoViewer"
 import LinkDialog from "./components/LinkDialog"
 import InfoDialog from "./components/InfoDialog"
 import ContextMenu from "./components/ContextMenu"
-import BulkSaveDialog from "./components/BulkSaveDialog"
 import "./index.less"
 import functions from "./structures/functions"
 
@@ -32,7 +31,6 @@ const App = () => {
           <VersionDialog/>
           <LinkDialog/>
           <InfoDialog/>
-          <BulkSaveDialog/>
           <PhotoViewer/>
       </main>
     </HoverContext.Provider>

structures/bulksavedialog.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Photo Viewer</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

styles/bulksavedialog.less

@@ -10,20 +10,22 @@
     justify-content: center;
     align-items: center;
     padding-top: @title-bar-height;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: transparent;
     pointer-events: none;
     z-index: 500;
 }
 
 .bulk-save-dialog-box {
     -webkit-app-region: drag;
     z-index: 1000;
+    position: absolute;
+    left: 0;
+    top: 0;
     pointer-events: all;
-    margin-top: -80px;
     width: 230px;
     height: 170px;
     border-radius: 10px;
-    background-color: var(--title-color); // #2c99ff;
+    background-color: var(--title-color);
     padding: 10px;
     display: flex;
     flex-direction: column;
@@ -98,6 +100,7 @@
 }
 
 .reject-button {
+    -webkit-app-region: no-drag;
     border: none;
     padding-top: 0px;
     padding-bottom: 0px;
@@ -118,6 +121,7 @@
 }
 
 .accept-button {
+    -webkit-app-region: no-drag;
     border: none;
     padding-top: 0px;
     padding-bottom: 0px;