Skip to content

Commit

Permalink
make ui fixes on videodashboard page
Browse files Browse the repository at this point in the history
  • Loading branch information
@amitamrutiya
amitamrutiya committed Apr 2, 2024
1 parent 56c17be commit 5c0ce84
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 93 deletions.
24 changes: 4 additions & 20 deletions frontend/src/components/MeetControllerBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useContext, useState, useEffect } from "react";
import React, { useState } from "react";
import {
LucideScreenShare,
LucideScreenShareOff,
Expand All @@ -16,12 +16,7 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";

import { MediaStreamContext, ProviderProps } from "@/app/context/MediaStream";
import { Button } from "./ui/button";
import {
AudioVideoStreamContext,
AudioVideoStreamProps,
} from "@/app/context/AudioVideoStream";
import EndMeetButton from "./EndMeetButton";
import SettingButton from "./SettingButton";
import { useStartUserStream } from "@/app/hooks/useStartStream";
Expand All @@ -31,37 +26,26 @@ import AudioVideoButton from "./AudioVideoButton";

const MeetControllerBar = (props: { remoteSocketId: string }) => {
const { remoteSocketId } = props;
const { audio, video, setAudio, setVideo } = React.useContext(
AudioVideoStreamContext
) as AudioVideoStreamProps;
const { userStream } = useContext(MediaStreamContext) as ProviderProps;

const { userScreenStream } = React.useContext(
MediaScreenStreamContext
) as ProviderScreenProps;

const [whiteboard, setWhiteboard] = useState<boolean>(true);

const { handleStartAudioVideoStream, handleStartScreenShareStream } =
const { handleStartScreenShareStream } =
useStartUserStream();
const { handleStopScreenShareStream, handleStopAudioVideoStream } =
const { handleStopScreenShareStream } =
useStopUserStream();

useEffect(() => {
if (!audio && !video) {
handleStopAudioVideoStream();
}

return () => {};
}, [audio, handleStopAudioVideoStream, video]);

return (
<div className="flex flex-row ">
<div className="sm:w-auto rounded-lg bg-slate-600 px-3 mx-auto py-2">
<div
className="flex flex-row h-full w-full items-center justify-center gap-4"
id="tools-container"
>
{/* Audio Video Button */}
<AudioVideoButton />

{/* Screen Share Button */}
Expand Down
142 changes: 69 additions & 73 deletions frontend/src/components/VideoDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,90 +26,86 @@ const Dashboard: React.FC<DashboardProps> = (props) => {
) as ProviderProps;

return (
<div className="mt-5 text-white">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-2">
<div className="lg:col-span-1 md:col-span-1 sm:col-span-1 xs:col-span-1">
<div className="mb-2 h-[74vh] overflow-auto">
<div className="h-full w-full rounded-md bg-transparent flex flex-col items-center ">
<div className=" bg-foreground h-[45%] w-[69%] flex justify-center items-center border-8 border-blue-500 rounded-xl shadow-lg p-4">
{userStream ? (
<div className="flex flex-col mx-[20%]">
<div className="mb-10 h-[74vh] overflow-auto">
<div className="h-full w-full rounded-md bg-transparent flex justify-center items-center ">
<div className=" bg-foreground h-[55%] w-[50%] flex justify-center items-center border-8 border-blue-500 rounded-xl shadow-lg p-4">
{userStream ? (
<>
(
<div className="group relative flex justify-center">
<ReactPlayer
url={userStream}
muted={false}
playing
controls={false}
style={{
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
<span className="absolute top-[80%] left-0 right-0 hidden group-hover:block">
{"You"}
</span>
</div>
)
</>
) : (
<Avatar className="h-36 w-36">
<AvatarImage
src={user?.picture?.toString() ?? "/user.png"}
alt="User"
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)}
</div>
<div className="my-3 px-3" />
<div className="bg-foreground h-[55%] w-[50%] flex justify-center items-center border-8 border-blue-500 rounded-xl shadow-lg p-4">
{remoteStreams.length > 0 ? (
<div>
{remoteStreams.map((stream) => (
<>
(
<div className="group relative flex justify-center">
<div className="my-5" />
<div className="group relative">
<ReactPlayer
url={userStream}
key={stream.id}
width="100%"
height="100%"
url={stream}
muted={false}
playing
controls={false}
style={{
width: "100%",
height: "100%",
objectFit: "cover",
}}
pip
className="opacity-100 group-hover:opacity-50"
/>
<span className="absolute top-[80%] left-0 right-0 hidden group-hover:block">
{"You"}
</span>
</div>
)
</>
) : (
<Avatar className="h-36 w-36">
<AvatarImage
src={user?.picture?.toString() ?? "/user.png"}
alt="User"
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)}
))}
</div>
<div className="my-3" />
<div className="bg-foreground h-[45%] w-[69%] flex justify-center items-center border-8 border-blue-500 rounded-xl shadow-lg p-4">
{remoteStreams.length > 0 ? (
<div>
{remoteStreams.map((stream) => (
<>
<div className="my-5" />
<div className="group relative">
<ReactPlayer
key={stream.id}
width="100%"
height="100%"
url={stream}
muted={false}
playing
controls={false}
pip
className="opacity-100 group-hover:opacity-50"
/>
</div>
</>
))}
</div>
) : (
<Avatar className="h-36 w-36">
<AvatarImage
src={remoteUser?.picture?.toString() ?? "/user.png"}
alt="User"
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)}
</div>
</div>{" "}
) : (
<Avatar className="h-36 w-36">
<AvatarImage
src={remoteUser?.picture?.toString() ?? "/user.png"}
alt="User"
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)}
</div>
<div className="flex flex-row ">
<div className="sm:w-auto rounded-lg bg-slate-600 px-3 mx-auto py-2">
<div>
<AudioVideoButton />
<ChatButton remoteSocketId={remoteSocketId} />
<SettingButton />
<EndMeetButton />
</div>
</div>
</div>{" "}
</div>
</div>{" "}
</div>
<div className="flex flex-row">
<div className="sm:w-auto rounded-lg bg-slate-600 px-3 mx-auto py-2">
<div className="flex flex-row h-full w-full items-center justify-center gap-4">
<AudioVideoButton />
<ChatButton remoteSocketId={remoteSocketId} />
<SettingButton />
<EndMeetButton />
</div>
</div>
</div>{" "}
</div>
);
};
Expand Down

0 comments on commit 5c0ce84

Please sign in to comment.