display counter before star recording

src/applications/counter/index.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { ipcRenderer } from 'electron';
+import useInterval from './useInterval';
+import './styles.scss';
+
+const Counter : React.FC = () => {
+  const [count, setCount] = useState<number>(3);
+
+  useInterval(() => {
+    const time = count - 1
+    if(time == 0) {
+      ipcRenderer.send('STOP_COUNTER');
+    }
+    else {
+      setCount(count - 1);
+    }
+  });
+
+  return (
+    <div className="counter-window">
+      <div className="counter">
+        {count}
+      </div>
+    </div>
+  );
+};
+
+export default Counter;

src/applications/counter/styles.scss

@@ -0,0 +1,24 @@
+.counter-window {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+  opacity: 0.8;
+
+
+  .counter {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background-color: #29292B;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #FFF;
+    font-size: 120px;
+    z-index: 10;
+  }
+}

src/applications/counter/useInterval.tsx

@@ -0,0 +1,20 @@
+import { useRef, useEffect } from 'react';
+
+const useInterval = (callback) => {
+  const savedCallback = useRef(null);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+
+    let id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, []);
+}
+
+export default useInterval;

src/applications/main/index.tsx

@@ -93,7 +93,20 @@ const Main : React.FC = () => {
       stopRecording();
       ipcRenderer.send('CLOSE_CAMERA');
     });
-  }, []);
+
+    ipcRenderer.on('START_RECORDING', () => {
+      startRecording();
+      ipcRenderer.send('START_RECORDING');
+    });
+
+    return () => {
+      ipcRenderer.removeAllListeners('STOP_RECORDING');
+      ipcRenderer.removeAllListeners('START_RECORDING');
+    }
+  }, [
+    microphone,
+    camera
+  ]);
 
   return (
     <div className="main-window">
@@ -175,9 +188,7 @@ const Main : React.FC = () => {
       <div className="recording-actions">
         <button
           onClick={() => {
-            ipcRenderer.send('START_RECORDING');
-            remote.getCurrentWindow().hide();
-            startRecording();
+            ipcRenderer.send('START_COUNTER');
           }}
           className="button is-large is-fullwidth is-danger">
           Start Recording

src/electron.ts

@@ -12,6 +12,7 @@ import PreviewWindow from '@app/windows/preview';
 import ToolsWindow from '@app/windows/tools';
 import QuickStartWindow from '@app/windows/quick_start';
 import CanvasWindow from '@app/windows/canvas';
+import CounterWindow from '@app/windows/counter';
 
 autoUpdater.logger = log;
 
@@ -22,6 +23,7 @@ let previewWindow : PreviewWindow;
 let toolsWindow : ToolsWindow;
 let quickStart : QuickStartWindow;
 let canvas : CanvasWindow;
+let counter : CounterWindow;
 const lockSingleInstance = app.requestSingleInstanceLock();
 
 autoUpdater.checkForUpdates().catch((err) => log.warn(err.message));
@@ -89,6 +91,8 @@ else {
 
 ipcMain.on('DISPLAY_CAMERA', displayCamera);
 ipcMain.on('CLOSE_CAMERA', closeCamera);
+ipcMain.on('START_COUNTER', startCounter);
+ipcMain.on('STOP_COUNTER', stopCounter);
 ipcMain.on('START_RECORDING', startRecording);
 ipcMain.on('STOP_RECORDING', stopRecording);
 ipcMain.on('ERROR_RECORDING', errorRecording);
@@ -107,6 +111,7 @@ ipcMain.on('FINISH_QUICK_START', () => {
   app.exit();
 });
 
+
 ipcMain.on('OPEN_CANVAS', () => {
   toolsWindow.window.hide();
   canvas = new CanvasWindow();
@@ -247,6 +252,21 @@ function closeTools() {
   }
 }
 
+function startCounter() {
+  counter = new CounterWindow();
+  counter.window.on('close', () => counter = null);
+  counter.show();
+  mainWindow.window.hide();
+}
+
+function stopCounter() {
+  if(counter) {
+    counter.window.close();
+  }
+
+  mainWindow.window.webContents.send('START_RECORDING');
+}
+
 function startRecording() {
   log.info('Start recording');
   application.isRecording = true;

src/index.tsx

@@ -7,6 +7,7 @@ import Preview from '@app/applications/preview';
 import Tools from '@app/applications/tools';
 import QuickStart from '@app/applications/quick_start';
 import Canvas from '@app/applications/canvas';
+import Counter from '@app/applications/counter';
 import 'bulma/css/bulma.css'
 import '@app/assets/styles/main.scss';
 import querystring from 'querystring';
@@ -30,6 +31,9 @@ switch(params.screen) {
   case 'canvas':
     RootComponet = Canvas;
     break;
+  case 'counter':
+    RootComponet = Counter;
+    break;
   default:
     RootComponet = Main;
     break;

src/windows/counter.ts

@@ -0,0 +1,40 @@
+import path from 'path';
+import { BrowserWindow, screen } from 'electron';
+
+class Counter {
+  public window: BrowserWindow;
+  constructor() {
+    const { bounds} = screen.getPrimaryDisplay();
+    const { x, y, width, height } = bounds;
+    this.window = new BrowserWindow({
+      x,
+      y,
+      width,
+      height,
+      resizable: false,
+      skipTaskbar: true,
+      maximizable: false,
+      fullscreenable: false,
+      frame: false,
+      movable: false,
+      show: false,
+      enableLargerThanScreen: true,
+      transparent: true,
+      focusable: false,
+      webPreferences: {
+        nodeIntegration: true
+      }
+    });
+
+    this.window.loadURL(`file://${path.join(__dirname, 'index.html')}?screen=counter`);
+    this.window.setVisibleOnAllWorkspaces(true);
+    this.window.setAlwaysOnTop(true, 'screen-saver',  1);
+    this.show();
+  }
+
+  show() {
+    this.window.show();
+  }
+}
+
+export default Counter;