Merge branch 'fe/deleteRoomOnClose' into 'frontend'
[Front-End] feat: 강사가 강의 탭 닫을 때 강의 종료 See merge request s11-webmobile1-sub2/S11P12A701!107
This commit is contained in:
commit
6148a23fb3
@ -16,16 +16,22 @@ import {
|
|||||||
useTracks,
|
useTracks,
|
||||||
useParticipants,
|
useParticipants,
|
||||||
useLocalParticipant,
|
useLocalParticipant,
|
||||||
|
useRoomContext,
|
||||||
} from '@livekit/components-react';
|
} from '@livekit/components-react';
|
||||||
import { RoomEvent, Track } from 'livekit-client';
|
import { RoomEvent, Track } from 'livekit-client';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import ChatRoom from '../ChatRoom/ChatRoom';
|
import ChatRoom from '../ChatRoom/ChatRoom';
|
||||||
|
import instance from '../../utils/axios/instance';
|
||||||
|
import { API_URL } from '../../constants';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
|
||||||
export default function LiveRoom() {
|
export default function LiveRoom() {
|
||||||
|
const { roomId } = useParams();
|
||||||
const lastAutoFocusedScreenShareTrack = useRef(null);
|
const lastAutoFocusedScreenShareTrack = useRef(null);
|
||||||
const [role, setRole] = useState(null);
|
const [role, setRole] = useState(null);
|
||||||
|
|
||||||
const room = useRoomInfo();
|
const { name: roomName } = useRoomInfo();
|
||||||
|
const room = useRoomContext();
|
||||||
const participants = useParticipants();
|
const participants = useParticipants();
|
||||||
const { localParticipant } = useLocalParticipant();
|
const { localParticipant } = useLocalParticipant();
|
||||||
|
|
||||||
@ -87,10 +93,24 @@ export default function LiveRoom() {
|
|||||||
tracks,
|
tracks,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleUnload = async () => {
|
||||||
|
if (room) {
|
||||||
|
await instance.post(`${API_URL}/video/deleteroom/${roomId}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('beforeunload', handleUnload);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('beforeunload', handleUnload);
|
||||||
|
};
|
||||||
|
}, [room, roomId]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.wrapper}>
|
<div className={styles.wrapper}>
|
||||||
<header className={styles.header}>
|
<header className={styles.header}>
|
||||||
<h1 className={styles.title}>{room.name}</h1>
|
<h1 className={styles.title}>{roomName}</h1>
|
||||||
<div className={styles.roomInfo}>
|
<div className={styles.roomInfo}>
|
||||||
<span>참가자</span>
|
<span>참가자</span>
|
||||||
<span>{participants.length}명</span>
|
<span>{participants.length}명</span>
|
||||||
|
@ -33,14 +33,12 @@ export default function LivePage() {
|
|||||||
connect={true}
|
connect={true}
|
||||||
data-lk-theme="default"
|
data-lk-theme="default"
|
||||||
onDisconnected={() => {
|
onDisconnected={() => {
|
||||||
setTimeout(() => {
|
instance
|
||||||
instance
|
.post(`${API_URL}/video/deleteroom/${roomId}`)
|
||||||
.post(`${API_URL}/video/deleteroom/${roomId}`)
|
.catch(() => {})
|
||||||
.catch(() => {})
|
.finally(() => {
|
||||||
.finally(() => {
|
window.close();
|
||||||
window.close();
|
});
|
||||||
});
|
|
||||||
}, 500);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Suspense fallback={<LoadingIndicator fill />}>
|
<Suspense fallback={<LoadingIndicator fill />}>
|
||||||
|
Loading…
Reference in New Issue
Block a user