fix: remove showSelectingArea

maltoze · Aug 24, 2023 · 15f8073 · 15f8073
1 parent a967e89
commit 15f8073
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 15 deletions.
diff --git a/src/entries/contentScript/primary/App.tsx b/src/entries/contentScript/primary/App.tsx
@@ -28,7 +28,6 @@ function App({ appRoot }: AppProps) {
     isRecording,
     countdown,
     area,
-    showSelectingArea,
     showMouseClicks,
   } = useStore((state) => ({
     scrollbarHidden: state.scrollbarHidden,
@@ -38,7 +37,6 @@ function App({ appRoot }: AppProps) {
     showCountdown: state.showCountdown,
     isRecording: state.isRecording,
     countdown: state.countdown,
-    showSelectingArea: state.showSelectingArea,
     area: state.area,
     showMouseClicks: state.showMouseClicks,
   }))
@@ -88,11 +86,6 @@ function App({ appRoot }: AppProps) {
       switch (message.type) {
         case 'show-controlbar':
           setShowControlbar(true)
-          if (recordingMode === 'area') {
-            useStore.setState({
-              showSelectingArea: true,
-            })
-          }
           break
         case 'start-recording':
           setIsRecording(true)
@@ -102,7 +95,6 @@ function App({ appRoot }: AppProps) {
           break
         case 'stop-recording':
           setIsRecording(false)
-          useStore.setState({ showSelectingArea: false })
           tabCaptureModes.includes(recordingMode) &&
             window.removeEventListener('keydown', handleKeyDown)
           break
@@ -147,8 +139,8 @@ function App({ appRoot }: AppProps) {
     setShowControlbar(false)
 
     const recordingDelay = 100
+    setIsRecording(true)
     setTimeout(() => {
-      setIsRecording(true)
       chrome.runtime.sendMessage({
         type: 'start-recording',
         target: 'background',
@@ -165,19 +157,22 @@ function App({ appRoot }: AppProps) {
 
   function handleOnClose() {
     setShowControlbar(false)
-    useStore.setState({ showSelectingArea: false })
   }
 
   return (
     <>
       {showCountdown && (
         <Countdown count={countdown} onFinish={startRecording} />
       )}
-      <StrokeKeysDisplay strokeKeys={strokeKeys} />
+      {isRecording && showKeystrokes && (
+        <StrokeKeysDisplay strokeKeys={strokeKeys} />
+      )}
       {showControlbar && (
         <Controlbar appRoot={appRoot} onClose={handleOnClose} />
       )}
-      {showSelectingArea && <SelectingArea />}
+      {recordingMode === 'area' && (isRecording || showControlbar) && (
+        <SelectingArea />
+      )}
       {showMouseClicks && isRecording && <MouseClick />}
     </>
   )

diff --git a/src/entries/store.ts b/src/entries/store.ts
@@ -11,7 +11,6 @@ export interface IState {
   showKeystrokes: boolean
   showControlbar: boolean
   showCountdown: boolean
-  showSelectingArea: boolean
   recordingMode: RecordingMode
   countdown: number
   showMouseClicks: boolean
@@ -30,7 +29,6 @@ const persistKeys = [
   'isRecording',
   'countdown',
   'showMouseClicks',
-  'showSelectingArea',
   'area',
   'recordingMode',
 ]
@@ -44,7 +42,6 @@ export const useStore = create<IState>()(
       audio: false,
       showControlbar: false,
       showCountdown: false,
-      showSelectingArea: false,
       recordingMode: 'tab',
       countdown: 3,
       area: {