From 4948e79f3e90f25e6534a35aae0c95e7fa041757 Mon Sep 17 00:00:00 2001
From: Tobias Jern <tobias.jern@aalto.fi>
Date: Sun, 12 Nov 2023 02:58:14 +0200
Subject: [PATCH] Add countdown timer

---
 dance-app/src/Recording.css          | 19 +++++++++++++++++++
 dance-app/src/sections/recording.tsx | 25 +++++++++++++++++++++----
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/dance-app/src/Recording.css b/dance-app/src/Recording.css
index 1871b5e..af8e553 100644
--- 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
index c36ac3f..b856815 100644
--- 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,7 +80,18 @@ 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);
@@ -87,6 +99,7 @@ const RecordingPage = ({
       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>