+
활동 중인 보이스룸
{activeVrList?.length == 0 ? (
-
요청한 정산이 없어요!
+
활동 중인 보이스룸이 없어요!
) : (
-
- {activeVrList?.map((value, index) => {
- return ;
- })}
-
+ <>
+ {activeVrList?.map((value, index) => (
+
+ ))}
+ >
)}
-
아무도 없어요!
+
+ {" "}
+ 아무도 없어요!{" "}
+
{inactiveVrList?.length == 0 ? (
-
요청한 정산이 없어요!
+
조용한 보이스룸이 없어요!
) : (
{inactiveVrList?.map((value, index) => {
diff --git a/src/pages/VoiceRoomPage/VoiceRoomPage.tsx b/src/pages/VoiceRoomPage/VoiceRoomPage.tsx
index a1d8985..04c8221 100644
--- a/src/pages/VoiceRoomPage/VoiceRoomPage.tsx
+++ b/src/pages/VoiceRoomPage/VoiceRoomPage.tsx
@@ -10,7 +10,11 @@ import * as s from "@/pages/VoiceRoomPage/VoiceRoomListPage.styled";
import * as sty from "@/components/TopBarText.styled";
import {
+ CarouselLayout,
ControlBar,
+ FocusLayout,
+ FocusLayoutContainer,
+ FocusToggle,
GridLayout,
LiveKitRoom,
ParticipantTile,
@@ -18,7 +22,7 @@ import {
useTracks,
} from "@livekit/components-react";
import "@livekit/components-styles";
-import { Track } from "livekit-client";
+import { Room, Track } from "livekit-client";
const VoiceRoomPage = ({
VoiceRoomName,
@@ -28,7 +32,17 @@ const VoiceRoomPage = ({
setJoin: React.Dispatch
>;
}) => {
const navigate = useNavigate();
+ const [room] = useState(new Room());
const [token, setToken] = useState("");
+ const [isConnected, setIsConnected] = useState(false);
+ const [connect, setConnect] = useState(false);
+
+ const handleDisconnect = () => {
+ setIsConnected(false);
+ setConnect(false);
+ navigate("/voiceroom");
+ };
+
useEffect(() => {
const temp = localStorage.getItem("VrToken");
if (temp) {
@@ -55,35 +69,41 @@ const VoiceRoomPage = ({
-
-
-
- {/* The RoomAudioRenderer takes care of room-wide audio for you. */}
-
- {/* Controls for the user to start/stop audio, video, and screen
+ {
+ setIsConnected(true);
+ console.log("connect!");
+ }}
+ onDisconnected={handleDisconnect}
+ >
+ {/* The RoomAudioRenderer takes care of room-wide audio for you. */}
+
+
+ {isConnected && }
+
+ {/* Controls for the user to start/stop audio, video, and screen
share tracks and to leave the room. */}
-
-
-
+
);
};
function MyVideoConference() {
// `useTracks` returns all camera and screen share tracks. If a user
// joins without a published camera track, a placeholder track is returned.
- const [mode, setMode] = useState
(0);
+ const [mode, setMode] = useState(true);
+ const navigator = useNavigate();
const nextMode = () => {
- setMode((mode + 1) % 3);
+ navigator("/specialvoiceroom");
};
+ useEffect(() => {
+ // let track2 = tracks.find((trackRef) => trackRef.source === "screen_share");
+ }, [mode]);
const tracks = useTracks(
[
{ source: Track.Source.Camera, withPlaceholder: true },
@@ -92,10 +112,10 @@ function MyVideoConference() {
{ onlySubscribed: false },
);
return (
-
+
{/* The GridLayout accepts zero or one child. The child is used
as a template to render all passed in tracks. */}
-
+
);
}
diff --git a/src/pages/VoiceRoomPage/VoiceRoomUser.tsx b/src/pages/VoiceRoomPage/VoiceRoomUser.tsx
index 3e5ce12..259abc1 100644
--- a/src/pages/VoiceRoomPage/VoiceRoomUser.tsx
+++ b/src/pages/VoiceRoomPage/VoiceRoomUser.tsx
@@ -2,14 +2,19 @@ import * as s from "@/pages/VoiceRoomPage/VoiceRoomUser.styled";
import micON from "@/assets/VoiceRoom/icon_microphone_ON.svg";
import micOFF from "@/assets/VoiceRoom/icon_microphone_OFF.svg";
import { participantInfo } from "@/pages/VoiceRoomPage/VoiceRoomListPage";
+import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL";
-export const VoiceRoomUser = ({ props }: { props: participantInfo[] }) => {
+export const VoiceRoomUser = ({ props }: { props: participantInfo }) => {
+ const userId = Number.parseInt(localStorage.getItem("userId")!);
+ console.log(props);
return (
- {/*
+
{props.name}
- */}
+
);