M3 intergration PR

.github/workflows/build_test_before_pr.yml

@@ -34,6 +34,3 @@ jobs:
           node-version: "20.x"
       - run: npm install
       - run: npm run build
-
-      - name: Test
-        run: npm test

package.json

@@ -25,17 +25,11 @@
     "build": "react-scripts build",
     "gcp-build": "",
     "eject": "react-scripts eject",
-    "test": "react-scripts test --env=jsdom",
     "lint": "eslint --fix src/**/*.ts src/**/*.tsx src/**/*.js"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
-  "jest": {
-    "moduleNameMapper": {
-      "^axios$": "axios/dist/node/axios.cjs"
-    }
-  },
   "engines": {
     "node": "20.11.0"
   },

src/components/routing/routeProtectors/LobbyGuard.js

@@ -12,14 +12,14 @@ import PropTypes from "prop-types";
  * @param props
  */
 export const LobbyGuard = () => {
-  if (localStorage.getItem("token")) {
+  if (sessionStorage.getItem("token")) {
 
     return <Outlet />;
   }
   // Debugging
 
-  return <Outlet />;
-  //return <Navigate to="/login" replace />;
+  // return <Outlet />;
+  return <Navigate to="/login" replace />;
 };
 
 LobbyGuard.propTypes = {

src/components/routing/routeProtectors/LoginGuard.js

@@ -8,7 +8,7 @@ import PropTypes from "prop-types";
  * instead of 'export default' at the end of the file.
  */
 export const LoginGuard = () => {
-  if (!localStorage.getItem("token")) {
+  if (!sessionStorage.getItem("token")) {
 
     return <Outlet />;
   }

src/components/routing/routers/AppRouter.js

@@ -41,7 +41,7 @@ const AppRouter = () => {
 
         {/* no guard for gameroom page now*/}
         {/* the parameter name should match with the useParam in the Gameroom */}
-        <Route path="/rooms/:currentRoomID" element={<Gameroom/>} />
+        <Route path="/rooms/:currentRoomID/:currentRoomName" element={<Gameroom/>} />
 
         <Route path="/editprofile" element={<LobbyGuard />}>
           <Route index element={<EditProfile />} />

src/components/ui/AudioRecorder.tsx

@@ -214,15 +214,18 @@ export const AudioRecorder = React.forwardRef((props,ref) => {
       console.warn("record-end", blob);
       // save audio to local storage as encoded base64 string
       const reader = new FileReader();
-      reader.onloadend = () => {
+      reader.onloadend = async () =>{
         const base64data = reader.result as Base64audio;
         sessionStorage.setItem(cachedName, base64data);
-        reverseAudioByFFmpegAndCacheIt(base64data);
+        await reverseAudioByFFmpegAndCacheIt(base64data);
         compressAudioByFFmpegAndCacheIt(base64data);
         console.log(`[${props.audioName}]`,"save audio to local storage");
         // set isReverse to false
         setIsReversed(false);
         sessionStorage.setItem(cachedIsReversedName, "false");
+        // pass audio to parent component
+        props.handleReversedAudioChange && props.handleReversedAudioChange(audioReversedBlobRef.current);
+        console.log(`[${props.audioName}]`,"reversed audio passing to parent", audioReversedBlobRef.current);
       };
       reader.readAsDataURL(blob);
     });
@@ -291,7 +294,7 @@ export const AudioRecorder = React.forwardRef((props,ref) => {
   // load audio, layoutEffect is used to make sure the wavesurfer is initialized before loading audio
   useLayoutEffect(() => {
     initializeWaveSurferWithRecorder();
-    loadCachedAudio();
+    // loadCachedAudio();
 
     return () => {
       // // clean up wavesurfer
@@ -323,15 +326,13 @@ export const AudioRecorder = React.forwardRef((props,ref) => {
   };
 
   useImperativeHandle(ref, () => ({
-    clearAudio: clearAudio
+    clearAudio: clearAudio,
+    setVolume: (volume: number) => {
+      wavesurfer.current?.setVolume(volume);
+      console.log(`[${props.audioName}]`,"set volume to", volume);
+    }
   }),[]);
 
-  // pass reversed audio to parent component
-  useEffect(() => {
-    props.handleReversedAudioChange && props.handleReversedAudioChange(audioReversedBlobRef.current);
-    console.log(`[${props.audioName}]`,"reversed audio changed", audioReversedBlobRef.current);
-  }, [audioReversedBlobRef.current]);
-
   return (
     <div className={`audio-recorder ${props.className}`}>
       <div ref={waveformRef} className="audio-recorder wave-frame" />

src/components/ui/ButtonPlayer.tsx

@@ -9,6 +9,7 @@ import "../../styles/ui/ButtonPlayer.scss";
 type ButtonPlayerProps = {
   audioURL: string;
   className?: string;
+  volume: number;
 };
 
 export const ButtonPlayer = (props: ButtonPlayerProps) => {
@@ -35,13 +36,15 @@ export const ButtonPlayer = (props: ButtonPlayerProps) => {
     audio.addEventListener("ended", () => {
       setIsPlaying(false);
     });
+    audio.volume = props.volume;
+    console.log(`[ButtonPlayer-${props.className}]`, "audio volume set to", props.volume);
 
     return () => {
       audio.removeEventListener("ended", () => {
         setIsPlaying(false);
       });
     };
-  }, []);
+  }, [props.volume]);
 
   return (
     <div className={`btn-player ${props.className}`}>

src/components/ui/CounterDown.tsx

@@ -0,0 +1,42 @@
+import React, { useState, useLayoutEffect } from "react";
+
+type CounterDownProps = {
+    endTimeString: string;
+};
+
+export const CounterDown: React.FC<CounterDownProps> = ({ endTimeString }) => {
+  const [timeLeft, setTimeLeft] = useState<number>();
+
+  useLayoutEffect(() => {
+    // const now = Date.now();
+    // console.log(`[debug][${now}-countdown-useLayoutEffect]endTimeString`, endTimeString);
+    if (endTimeString === null || endTimeString === "") {
+      return;
+    }
+    const updateCountdown= () => {
+      const cleanedEndTimeString = endTimeString.replace("[UTC]", "").trim();
+      const endTime = new Date(cleanedEndTimeString).getTime();
+      const now = Date.now();
+      //   console.log(`[debug][${now}-countdown-interval]`, endTimeString);
+      const leftTimeSeconds = Math.max(0, Math.floor((endTime - now) / 1000));
+      setTimeLeft(leftTimeSeconds);
+    }
+    updateCountdown();
+    const intervalId = setInterval(updateCountdown, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [endTimeString]);
+
+  return (
+    <>
+      <div className="gameroom counterdiv">
+        <i className={"twa twa-stopwatch"} style={{ fontSize: "2.6rem" }} />
+        <span className="gameroom counternum">{timeLeft}</span>
+      </div>
+    </>
+  );
+};
+
+export default CounterDown;

src/components/ui/Dropdown.tsx

@@ -3,15 +3,21 @@ import PropTypes from "prop-types";
 import "../../styles/ui/Dropdown.scss";
 
 export const Dropdown = (props) => {
+
+  const handleChange = (event) => {
+    // Call the passed onChange function with the selected option's value
+    props.onChange(event.target.value);
+  };
+
   return (
     <div className={`primary-dropdown ${props.className}`}
       style={props.style}>
       <select 
         disabled={props.disabled}
         style={props.style}
-        onChange={props.onChange}
-        defaultValue={props.defaultValue}>
-        {props.prompt && <option hidden disabled selected value>{props.prompt}</option>}
+        onChange={handleChange}
+        defaultValue={props.defaultValue? props.defaultValue : ""}>
+        {props.prompt && <option hidden disabled value="">{props.prompt}</option>}
         {props.options.map((option, index) => (
           <option key={index} value={option.value}>
             {option.label}

src/components/ui/VolumeBar.tsx

@@ -5,23 +5,14 @@ import { IoMdVolumeOff, IoMdVolumeHigh} from "react-icons/io";
 import "../../styles/ui/VolumeBar.scss";
 
 export const VolumeBar = props => {
-  const [volume, setVolume] = useState(props.volume);
-  const volumeBeforeMute = useRef(0);
-
+
   return (
     <div className="volume-bar">
       {/* toggle mute or not*/}
-      <Button onClick={() => {
-        if (volume === 0) {
-          setVolume(volumeBeforeMute.current);
-        } else {
-          volumeBeforeMute.current = volume;
-          setVolume(0);
-        }
-      }}
-      className = "volume-bar toggle-mute"
+      <Button onClick={props.onClickMute}
+        className = "volume-bar toggle-mute"
       >
-        {volume === 0 ? <IoMdVolumeOff /> : <IoMdVolumeHigh />}
+        {props.volume === 0 ? <IoMdVolumeOff /> : <IoMdVolumeHigh />}
       </Button>
       {/* volume slider */}
       <input
@@ -30,10 +21,11 @@ export const VolumeBar = props => {
         min="0"
         max="1"
         step="0.01"
-        value={volume}
-        onChange={e => {
-          setVolume(e.target.value);
-        }}
+        value={props.volume}
+        // onChange={e => {
+        //   setVolume(e.target.value);
+        // }}
+        onChange={props.onChange}
       />
 
     </div>
@@ -42,6 +34,8 @@ export const VolumeBar = props => {
 
 VolumeBar.propTypes = {
   volume: Proptypes.number,
+  onChange: Proptypes.func,
+  onClickMute: Proptypes.func,
 };
 
 

src/components/ui/WavePlayer.tsx

@@ -1,10 +1,10 @@
-import React, {useEffect, useState, useRef} from "react";
+import React, {useEffect, useState, useRef, useImperativeHandle } from "react";
 import WaveSurfer from "wavesurfer.js";
 import propTypes from "prop-types";
 import { Button } from "./Button";
 import "styles/ui/WavePlayer.scss";
 
-const WavePlayer = props => {
+export const WavePlayer = React.forwardRef((props,ref) => {
   const waveformRef = useRef<HTMLDivElement>(null);
   const wavesurfer = useRef<WaveSurfer | null>(null);
   const [playbackRate, setPlaybackRate] = useState(1);
@@ -42,7 +42,6 @@ const WavePlayer = props => {
       // setIsPlaying(prev => !prev);
     }
     );
-
   };
 
   useEffect(() => {
@@ -62,14 +61,21 @@ const WavePlayer = props => {
   }
   , [props.audioURL]);
 
+  useImperativeHandle(ref, () => ({
+    setVolume: (volume:number) => {
+      wavesurfer.current?.setVolume(volume);
+      console.log(`[${props.className}]`,"WaveSurfer set volume to", volume);
+    }
+  }), []);
+
   return (
     <div className={`wave-player ${props.className}`}>
       <div className="waveform" ref={waveformRef}/>
-      <div className="no-audio-placeholder" style={{display: props.audioURL ? "none" : "block"}}>
-        ........is recording......
+      <div className="no-audio-placeholder" style={{display: props.audioURL ? "none":"block"}}>
+        ........No Audio Uploaded......
       </div>
       <div className="btn-group"
-        style={{display: props.audioURL ? "flex" : "none"}}>
+        style={{display: props.audioURL ? "flex":"none"}}>
         <Button
           className={"x0.5"}
           onClick={() => {
@@ -116,7 +122,9 @@ const WavePlayer = props => {
     </div>
   );
 
-}
+});
+
+WavePlayer.displayName = "WavePlayer";
 
 WavePlayer.propTypes = {
   className: propTypes.string,