Skip to content

Commit

Permalink
Merge pull request #195 from sopra-fs24-group-09/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@petertheprocess
petertheprocess authored May 20, 2024
2 parents 72dcf2f + 550bb68 commit c8271d3
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 28 deletions.
62 changes: 46 additions & 16 deletions src/components/views/Gameroom.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback,useEffect, useState, useRef, useMemo } from "react";
import React, { useCallback,useEffect, useState, useRef, useMemo, useLayoutEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import BaseContainer from "components/ui/BaseContainer";
import PropTypes from "prop-types";
Expand Down Expand Up @@ -42,7 +42,9 @@ const Gameroom = () => {
id: sessionStorage.getItem("id"),
username: sessionStorage.getItem("username")
};
console.log(user)
// console.log(user)
const ffmpegRef = useRef(null);
const [isFFmpegLoaded, setIsFFmpegLoaded] = useState(false);
const [isStartedPressed, setIsStartedPressed] = useState(false);
const [showReadyPopup, setShowReadyPopup] = useState(false);
const readyStatus = useRef(false);
Expand Down Expand Up @@ -87,17 +89,44 @@ const Gameroom = () => {

// useMemo to initialize and load FFmpeg wasm module
// load FFmpeg wasm module
const ffmpegObj = useMemo(() => {
const ffmpeg = new FFmpeg();
// const ffmpegObj = useMemo( () => {
// const ffmpeg = new FFmpeg();
// const loadFFmpeg = async (ffmpeg) => {
// await ffmpeg.load();
// }
// try {
// loadFFmpeg(ffmpeg);
// console.error("FFmpegObj.loaded",ffmpegObj);
// console.error("FFmpegObj",ffmpegObj);
// } catch (error) {
// console.error("Failed to load FFmpeg module, please use Chrome browser.", error);
// alert("Failed to load FFmpeg module");
// }
// }, []);

// console.error("FFmpegObj.loaded",ffmpegObj);
// console.error("FFmpegObj",ffmpegObj);

//("GameInfo", gameInfo);

useLayoutEffect(() => {
ffmpegRef.current = new FFmpeg();
const loadFFmpeg = async (ffmpeg) => {
await ffmpeg.load();
}
try {
ffmpeg.load();
console.log("FFmpeg module loaded");
loadFFmpeg(ffmpegRef.current).then(() => {
console.log("FFmpegObj.loaded",ffmpegRef.current);
setIsFFmpegLoaded(true);
});
} catch (error) {
console.error("Failed to load FFmpeg module", error);
console.error("Failed to load FFmpeg module, please use Chrome browser.", error);
alert("Failed to load FFmpeg module");
}

return ffmpeg;
return () => {
ffmpegRef.current?.loaded && ffmpegRef.current.terminate();
};
}, []);

function checkMic() {
Expand All @@ -121,7 +150,7 @@ const Gameroom = () => {
// console.error("ISCHROME",isChrome);
if (!isChrome) {
alert("Please use Chrome browser to play the game.");
ffmpegObj.terminate();
// ffmpegRef.current?.loaded && ffmpegRef.current.terminate();
navigate("/lobby");

return;
Expand Down Expand Up @@ -170,7 +199,7 @@ const Gameroom = () => {
const onError = (err) => {
console.error("WebSocket Error: ", err);
// alert("WebSocket connection error. Check console for details.");
// ffmpegObj.terminate();
// ffmpegObj.loaded && ffmpegObj.terminate();
// navigate("/lobby");
};

Expand All @@ -187,7 +216,7 @@ const Gameroom = () => {
if (msg.auth === false) {
showToast("Invalid or expired token, please login again!", "error");
sessionStorage.clear(); // Clear session storage
ffmpegObj.terminate(); // Terminate the FFmpeg instance
// ffmpegRef.current?.loaded && ffmpegRef.current.terminate();
navigate("/login"); // Navigate to the login page

return; // Exit the function to avoid further processing
Expand All @@ -210,7 +239,7 @@ const Gameroom = () => {
} else if (messageType === "enter") {
toastMessage = success ? "You have entered the room successfully!" : msg.message;
if (!success){
ffmpegObj.terminate();
// ffmpegRef.current?.loaded && ffmpegRef.current.terminate();
navigate("/lobby");
}
} else if (messageType === "upload") {
Expand Down Expand Up @@ -400,7 +429,7 @@ const Gameroom = () => {
}, RESPONSE_TIME);

return () => clearTimeout(timeoutId);
},[user.id,currentRoomID]);
},[user.id, currentRoomID]);
const throttledEnterRoom = useCallback(throttle(enterRoom, THROTTLE_TIME), [enterRoom, THROTTLE_TIME]);

//ready
Expand Down Expand Up @@ -529,8 +558,9 @@ const Gameroom = () => {
token: sessionStorage.getItem("token") },
JSON.stringify(payload)
);
ffmpegObj.terminate();
// ffmpegRef.current?.loaded && ffmpegRef.current.terminate();
sessionStorage.setItem("allowRedirect", "false");
// console.warn("ffmpegObj.loaded",ffmpegRef.current?.loaded)
navigate("/lobby")
},[user.id,currentRoomID]);
const throttledExitRoom = useCallback(throttle(exitRoom, THROTTLE_TIME),[exitRoom, THROTTLE_TIME]);
Expand Down Expand Up @@ -754,7 +784,7 @@ const Gameroom = () => {
}
volume={globalVolume}
/>
{!gameOver && showReadyPopup && (
{!gameOver && showReadyPopup && isFFmpegLoaded && (
<div className="gameroom readypopupbg">
<div className="gameroom readypopupcontainer">
<span className="gameroom popuptitle"> {"Room#" + currentRoomNameValid.current}</span>
Expand Down Expand Up @@ -829,7 +859,7 @@ const Gameroom = () => {
gameInfo = {gameInfo}
currentSpeakerAudioURL={currentSpeakerAudioURL}
endTime = {endTime}
ffmpegObj = {ffmpegObj}
ffmpegObj = {ffmpegRef.current}
meId = {user.id}
globalVolume = {globalVolume}
handleAudioReversed = {handleAudioReversed}
Expand Down
32 changes: 20 additions & 12 deletions src/components/views/RuleGuide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,16 +329,25 @@ const RuleGuideContent = ({ffmpegObj}:any) => {

const RuleGuide = () => {
const navigate = useNavigate();
const ffmpegObj = useMemo(() => {
try {
const ffmpeg = new FFmpeg();
ffmpeg.load();
return ffmpeg;
const ffmpegRef = useRef(null);
const [ifFFmpegLoaded, setIfFFmpegLoaded] = useState(false);
useLayoutEffect(() => {
ffmpegRef.current = new FFmpeg();
const loadFFmpeg = async (ffmpeg: FFmpeg) => {
await ffmpeg.load();
}
catch (e) {
try {
loadFFmpeg(ffmpegRef.current).then(() => {
console.log("FFmpeg loaded successfully", ffmpegRef.current);
setIfFFmpegLoaded(true);
});
} catch (e) {
console.error(e);
alert("Failed to load ffmpeg");
alert("Failed to load ffmpeg! Please use Chrome Browser.");
}

return () => {
ffmpegRef.current?.loaded && ffmpegRef.current.terminate();
}
}, []);

Expand All @@ -353,12 +362,11 @@ const RuleGuide = () => {
beforeClose={() => {
showToast("You have left the guide page.", "info");
navigate("/lobby");
ffmpegObj.terminate();
}}
>
<RuleGuideContent
ffmpegObj={ffmpegObj}
/>
{
ifFFmpegLoaded && <RuleGuideContent ffmpegObj={ffmpegRef.current} />
}
</TourProvider>
);
}
Expand Down

0 comments on commit c8271d3

Please sign in to comment.