Open new window

Author: manhtai

package.json

@@ -165,13 +165,13 @@
     "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
-    "@types/diff": "^5.0.1",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/history": "4.7.6",
     "@types/jest": "^26.0.15",
     "@types/node": "14.14.10",
     "@types/pngjs": "^6.0.1",
+    "@types/qs": "^6.9.7",
     "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.9",
     "@types/react-helmet": "^6.1.2",
@@ -255,6 +255,7 @@
     "electron-store": "^8.0.0",
     "electron-updater": "^4.3.4",
     "history": "^5.0.0",
+    "qs": "^6.10.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",

src/App.tsx

@@ -1,21 +1,25 @@
 import React from 'react';
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Redirect,
-} from 'react-router-dom';
-import Main from './components/Main';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import qs from 'qs';
+
 import './App.global.css';
 import './helpers/fontAwesome';
+import Main from './components/printer/Main';
+import Screen from './components/printer/Screen';
 
 export default function App() {
   return (
     <Router>
       <Switch>
-        <Route path="/" component={Main} />
+        <Route
+          path="*"
+          render={(props) => {
+            const { search } = props.location;
+            const so = qs.parse(search.slice(search.lastIndexOf('?') + 1));
+            return so.page === 'screen' ? <Screen /> : <Main />;
+          }}
+        />
       </Switch>
-      <Redirect from="*" to="/printer" />
     </Router>
   );
 }

src/components/Main.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ipcRenderer } from 'electron';
 
-const Printer = () => {
+const Main = () => {
   const handleScreenSelect = async () => {
-    await ipcRenderer.invoke('open-selector');
+    await ipcRenderer.invoke('open-screen');
   };
 
   return (
@@ -15,4 +15,4 @@ const Printer = () => {
   );
 };
 
-export default Printer;
+export default Main;

src/components/printer/Printer.tsx renamed to src/components/printer/Main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Screen = () => {
+  return (
+    <section className="flex flex-1">
+      <p>Hello!</p>
+    </section>
+  );
+};
+
+export default Screen;

src/components/printer/Screen.tsx

@@ -44,6 +44,7 @@ export default class AppUpdater {
 }
 
 let mainWindow: BrowserWindow | null = null;
+let screenWindow: BrowserWindow | null = null;
 
 if (process.env.NODE_ENV === 'production') {
   const sourceMapSupport = require('source-map-support');
@@ -176,13 +177,38 @@ ipcMain.handle(
   }
 );
 
-ipcMain.handle('open-selector', async (_event: IpcMainInvokeEvent) => {
-  const win = new BrowserWindow({
-    frame: false,
-    transparent: true,
+const createScreenWindow = () => {
+  if (screenWindow == null) {
+    screenWindow = new BrowserWindow({
+      frame: false,
+      transparent: true,
+      webPreferences: {
+        nodeIntegration: true,
+      },
+    });
+  }
+  screenWindow.loadURL(`file://${__dirname}/index.html?page=screen`);
+
+  screenWindow.webContents.on('did-finish-load', () => {
+    screenWindow?.show();
+    screenWindow?.maximize();
+  });
+
+  screenWindow.webContents.on('before-input-event', (event, ipnut) => {
+    if (ipnut.key === 'Escape') {
+      screenWindow?.close();
+    }
   });
-  win.show();
-  win.maximize();
+
+  screenWindow.on('closed', () => {
+    screenWindow = null;
+  });
+
+  screenWindow.webContents.openDevTools({ mode: 'undocked' });
+};
+
+ipcMain.handle('open-screen', async () => {
+  createScreenWindow();
 });
 
 ipcMain.handle('get-store', (_event, { key }) => {

src/main.dev.ts

@@ -1768,6 +1768,11 @@
   resolved "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/qs@^6.9.7":
+  version "6.9.7"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
+  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
+
 "@types/react-dom@^16.9.9":
   version "16.9.9"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.9.tgz"
@@ -5940,10 +5945,10 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.1.tgz"
-  integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
+get-intrinsic@^1.0.0, get-intrinsic@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
   dependencies:
     function-bind "^1.1.1"
     has "^1.0.3"
@@ -8828,7 +8833,7 @@ object-hash@^2.2.0:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
   integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
 
-object-inspect@^1.7.0, object-inspect@^1.8.0:
+object-inspect@^1.7.0, object-inspect@^1.8.0, object-inspect@^1.9.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
   integrity sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==
@@ -9923,6 +9928,13 @@ qs@6.7.0:
   resolved "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+qs@^6.10.1:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
+  integrity sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz"
@@ -10920,13 +10932,14 @@ shellwords@^0.1.1:
   resolved "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-side-channel@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.3.tgz"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+side-channel@^1.0.2, side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
   dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
 
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"