Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature(#31, #36) 강의가 종료되면 강의자와 참여자 페이지 모두에게 강의 종료 페이지로 이동 #219

Merged
merged 7 commits into from
Dec 7, 2023
Merged

Feature(#31, #36) 강의가 종료되면 강의자와 참여자 페이지 모두에게 강의 종료 페이지로 이동 #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
92792ce
feat: 강의가 종료되면 강의자와 참여자 페이지 모두에게 강의 종료 페이지로 이동하게 함 #31 #36
Jw705 Dec 7, 2023
454b8dc
Merge commit 'd0e01c5989e18e8f46d9a59185e20fba87d16579' into feature/…
Jw705 Dec 7, 2023
8ab3399
refactor: 오타 수정
Jw705 Dec 7, 2023
e2f3d89
feat: 참여자 페이지에서 캔버스 클릭할 수 없게 방지
Jw705 Dec 7, 2023
f5b2146
fix: modal을 클릭 할 수 있게 z-index 수정
Jw705 Dec 7, 2023
c523d3e
Merge commit '71908a5f2405fdd3a675be6021769c0d9283ac92' into feature/…
Jw705 Dec 7, 2023
57989e9
fix: z-index 오류 수정
Jw705 Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions frontend/src/components/Header/components/HeaderInstructorControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState, useRef, useEffect } from "react";
import { useRecoilValue, useSetRecoilState } from "recoil";
import { Socket, Manager } from "socket.io-client";
import { useLocation } from "react-router-dom";
import { useNavigate, useLocation } from "react-router-dom";

import VolumeMeter from "./VolumeMeter";

Expand Down Expand Up @@ -31,29 +31,25 @@ const HeaderInstructorControls = () => {
const selectedMicrophone = useRecoilValue(selectedMicrophoneState);
const inputMicVolume = useRecoilValue(micVolmeState);
const setInputMicVolumeState = useSetRecoilState(micVolmeState);
const setInstructorSocket = useSetRecoilState(instructorSocketState);
const navigate = useNavigate();
const showToast = useToast();

const canvasRef = useRecoilValue(canvasRefState);
const fabricCanvasRef = useRecoilValue(cavasInstanceState);

const timerIdRef = useRef<number | null>(null); // 경과 시간 표시 타이머 id
const onFrameIdRef = useRef<number | null>(null); // 마이크 볼륨 측정 타이머 id

const managerRef = useRef<Manager>();
const socketRef = useRef<Socket>();
const socketRef2 = useRef<Socket>();

const setInstructorSocket = useSetRecoilState(instructorSocketState);

const pcRef = useRef<RTCPeerConnection>();
const mediaStreamRef = useRef<MediaStream>();
const updatedStreamRef = useRef<MediaStream>();
const inputMicVolumeRef = useRef<number>(0);
const prevInputMicVolumeRef = useRef<number>(0);


const roomid = new URLSearchParams(useLocation().search).get("roomid") || "999999";

const sampleAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InBsYXRpbm91c3NAZ21haWwuY29tIiwiaWF0IjoxNzAxNjY0NTc4LCJleHAiOjE3MDI3MDEzNzh9.e2ikfmTsFCoVNxenHpAh__hLhoJnUPWSf-FmFSPo_RA";

Expand Down Expand Up @@ -114,14 +110,15 @@ const HeaderInstructorControls = () => {

setIsCloseModalOpen(false);
showToast({ message: "강의가 종료되었습니다.", type: "alert" });
navigate("/lecture-end");
};

const initConnection = async () => {
try {
// 0. 소켓 연결

managerRef.current = new Manager(import.meta.env.VITE_MEDIA_SERVER_URL);

socketRef.current = managerRef.current.socket("/create-room", {
auth: {
accessToken: sampleAccessToken,
Expand Down Expand Up @@ -370,14 +367,14 @@ const HeaderInstructorControls = () => {

const isCanvasDataChanged = canvasData.canvasJSON !== newJSONData;
const isViewportChanged = JSON.stringify(canvasData.viewport) !== JSON.stringify(newViewport);
const isSizeChanged = canvasData.width !== newWidth || canvasData.height !== newHegiht;
const isSizeChanged = canvasData.width !== newWidth || canvasData.height !== newHeight;

if (isCanvasDataChanged || isViewportChanged || isSizeChanged) {
canvasData.canvasJSON = newJSONData;
canvasData.viewport = newViewport;
canvasData.eventTime = Date.now() - startTime;
canvasData.width = newWidth;
canvasData.height = newHegiht;
canvasData.height = newHeight;
submitData(canvasData);
}
}
Expand Down
9 changes: 4 additions & 5 deletions frontend/src/components/Header/components/HeaderParticipantControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,9 @@ import SmallButton from "@/components/SmallButton/SmallButton";
import Modal from "@/components/Modal/Modal";
import { useToast } from "@/components/Toast/useToast";

import selectedSpeakerState from "../../../stores/stateSelectedSpeaker";
import speakerVolmeState from "../../../stores/stateSpeakerVolume";

import selectedSpeakerState from "@/stores/stateSelectedSpeaker";
import speakerVolmeState from "@/stores/stateSpeakerVolume";
import participantCavasInstanceState from "@/stores/stateParticipantCanvasInstance";

import participantSocketRefState from "@/stores/stateParticipantSocketRef";

const HeaderParticipantControls = () => {
Expand Down Expand Up @@ -104,6 +102,7 @@ const HeaderParticipantControls = () => {
});
socketRef2.current.on("ended", () => {
showToast({ message: "강의가 종료되었습니다.", type: "alert" });
leaveLecture();
});

interface ICanvasData {
Expand Down Expand Up @@ -192,7 +191,7 @@ const HeaderParticipantControls = () => {
if (mediaStreamRef.current) mediaStreamRef.current.getTracks().forEach((track) => track.stop()); // 미디어 트랙 중지

setIsModalOpen(false);
navigate("/");
navigate("/lecture-end");
};

const initConnection = async () => {
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/pages/Participant/Participant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import { fabric } from "fabric";

import Header from "@/components/Header/Header";
import participantCavasInstanceState from "@/stores/stateParticipantCanvasInstance";
import QuestionLogButton from "./components/QuestionLogButton";
import CloseIcon from "@/assets/svgs/close.svg?react";
import QuestionIcon from "@/assets/svgs/whiteboard/question.svg?react";
import LogToggleButton from "@/components/Button/LogToggleButton";
import LogContainer from "@/components/LogContainer/LogContainer";

import isQuestionLogOpenState from "@/stores/stateIsQuestionLogOpen";
Expand Down Expand Up @@ -49,8 +51,8 @@ const Participant = () => {
return (
<>
<Header type="participant" />
<section className="relative w-[100vw] h-[calc(100vh-5rem)]" ref={canvasContainerRef}>
<canvas ref={canvasRef} />
<section className="relative w-screen h-[calc(100vh-5rem)]" ref={canvasContainerRef}>
<canvas className="-z-10" ref={canvasRef} />
<LogContainer
type="question"
className={`absolute top-2.5 right-2.5 ${isQuestionLogOpen ? "block" : "hidden"}`}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/Participant/ParticipantVideoVer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Participant = () => {
<>
<Header type="participant" />
<section className="relative">
<video className="w-[100vw] h-[calc(100vh-5rem)]" autoPlay muted ref={videoRef}></video>
<video className="w-screen h-[calc(100vh-5rem)]" autoPlay muted ref={videoRef}></video>
<LogContainer type="question" className={"absolute top-2.5 right-2.5"} />
</section>
</>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/Test/components/CanvasSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const CanvasSection = () => {
}, []);

return (
<div className="relative w-[100vw] h-[calc(100vh-5rem)]" ref={canvasContainerRef}>
<div className="relative w-screen h-[calc(100vh-5rem)]" ref={canvasContainerRef}>
<canvas ref={canvasRef} />

<Toolbar />
Expand Down