diff --git a/src/applications/counter/index.tsx b/src/applications/counter/index.tsx new file mode 100644 index 0000000..6c3e46e --- /dev/null +++ b/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(3); + + useInterval(() => { + const time = count - 1 + if(time == 0) { + ipcRenderer.send('STOP_COUNTER'); + } + else { + setCount(count - 1); + } + }); + + return ( +
+
+ {count} +
+
+ ); +}; + +export default Counter; diff --git a/src/applications/counter/styles.scss b/src/applications/counter/styles.scss new file mode 100644 index 0000000..91f0ea2 --- /dev/null +++ b/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; + } +} diff --git a/src/applications/counter/useInterval.tsx b/src/applications/counter/useInterval.tsx new file mode 100644 index 0000000..19b1cb7 --- /dev/null +++ b/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; diff --git a/src/applications/main/index.tsx b/src/applications/main/index.tsx index 17ac568..8c9d47c 100644 --- a/src/applications/main/index.tsx +++ b/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 (
@@ -175,9 +188,7 @@ const Main : React.FC = () => {