Add countdown timer

LinuzJ · Nov 12, 2023 · 4948e79 · 4948e79
1 parent 07b1791
commit 4948e79
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/dance-app/src/Recording.css b/dance-app/src/Recording.css
@@ -71,6 +71,25 @@
   width: 100%;
 }
 
+.countdown:before {
+  content: '321';
+
+  font-family:monospace;
+  display:inline-block;
+  width:1ch;
+  margin-left: 40px;
+  margin-right: 40px;
+  font-size: 10rem;
+  font-weight: 500;
+  overflow:hidden;
+
+  animation:countdowns 3s steps(3) infinite;
+}
+
+@keyframes countdowns {
+  0% {text-indent:0}
+  100% {text-indent:-3ch;}
+}
 .hide {
   display: none;
 }

diff --git a/dance-app/src/sections/recording.tsx b/dance-app/src/sections/recording.tsx
@@ -65,6 +65,7 @@ const RecordingPage = ({
   });
   const page = useContext(PageContext);
   const [showVideo, setShowVideo] = useState<VideoState>(VideoState.preview);
+  const [showCountDown, setShowCountDown] = useState<boolean>(false);
   const recordingRef = useRef<Recording | null>(null);
   const hasRecording = recordingRef.current?.previewRef.current?.src;
 
@@ -79,14 +80,26 @@ const RecordingPage = ({
     await openCamera(newRecording.id);
   };
 
+  const countDown = () => {
+    console.log('countdown start')
+    setShowCountDown(true)
+    setTimeout(() => {
+      record()
+      console.log('countdown end')
+      setShowCountDown(false)
+    }, 3000)
+  }
+
   const record = async () => {
+    console.log('record start')
     const { current: recording } = recordingRef;
     if (recording) {
       setShowVideo(VideoState.recording);
       await startRecording(recording.id);
       setTimeout(async () => {
         await stopRecording(recording.id);
         setShowVideo(VideoState.preview);
+        console.log('record end')
       }, 7000);
     }
     console.log(recordingRef.current);
@@ -102,13 +115,17 @@ const RecordingPage = ({
           </Button>
           <div className="record-button">
             <Button
-              onClick={recordingRef.current ? record : initCamera}
+              onClick={recordingRef.current ? countDown : initCamera}
               variant="outlined"
               className={classes.recordButton}
             >
-              <Typography variant="h2">
-                {recordingRef.current ? "Record" : "Start"}
-              </Typography>
+              {showCountDown ? (
+                <span className="countdown" />
+              ) : (
+                <Typography variant="h2">
+                  {recordingRef.current ? "Record" : "Start"}
+                </Typography>
+              )}
             </Button>
           </div>
         </header>