Skip to content

Commit

Permalink
feat(luna): changed calls component to handle stream organization
Browse files Browse the repository at this point in the history
  • Loading branch information
@mostafakamar2308
mostafakamar2308 committed Dec 23, 2024
1 parent f1bcf88 commit 52edd5b
Show file tree
Hide file tree
Showing 10 changed files with 259 additions and 212 deletions.
2 changes: 1 addition & 1 deletion packages/luna/src/components/Call/FocusedStream.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const FocusedStream: React.FC<{
autoPlay
className={cn(
"tw-w-full tw-aspect-video tw-absolute tw-top-0",
!stream.camera && !stream.cast && "tw-opacity-0"
!stream.stream || (!stream.camera && !stream.cast && "tw-opacity-0")
)}
muted={streamMuted}
playsInline
Expand Down
13 changes: 1 addition & 12 deletions packages/luna/src/components/Call/InCall/Call.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,8 @@ import { CallBar } from "@/components/Call/CallBar";
import { InCallStreams } from "@/components/Call/InCallStreams";
import { StreamInfo } from "@/components/Call/types";

/**
* @todo should accept list of streams
* - user alone => should be the main stream
* - two users => the other user is the focused stream.
* - two users with cast => cast is the focused stream.
* - one user with casting => cast is the focused stream.
* - two users with two streams => the other user cast should be focused.
*/
type Props = {
streams: {
focused: StreamInfo;
unfocused: StreamInfo[];
};
streams: StreamInfo[];
currentUserId: number;
chat: { enabled: boolean; toggle: Void };
fullScreen: {
Expand Down
165 changes: 80 additions & 85 deletions packages/luna/src/components/Call/InCall/CallWithChat.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ const meta: Meta<Component> = {
],
};

const CURRENT_USER_ID = 5;

export const AloneWithCamera: StoryObj<Component> = {
args: {
chat: {
Expand Down Expand Up @@ -52,8 +54,10 @@ export const AloneWithCamera: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const stream = useCreateStream("focused", true);
return <Call {...props} streams={{ focused: stream, unfocused: [] }} />;
const stream = useCreateStream(true, CURRENT_USER_ID);
return (
<Call {...props} streams={[stream]} currentUserId={CURRENT_USER_ID} />
);
},
};

Expand Down Expand Up @@ -87,8 +91,10 @@ export const Alert: StoryObj<Component> = {
alert: faker.lorem.words(3),
},
render(props) {
const stream = useCreateStream("focused", true);
return <Call {...props} streams={{ focused: stream, unfocused: [] }} />;
const stream = useCreateStream(true, CURRENT_USER_ID);
return (
<Call {...props} streams={[stream]} currentUserId={CURRENT_USER_ID} />
);
},
};

Expand Down Expand Up @@ -121,8 +127,10 @@ export const AloneWithoutCamera: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const stream = useCreateStream("focused", false);
return <Call {...props} streams={{ focused: stream, unfocused: [] }} />;
const stream = useCreateStream(false, CURRENT_USER_ID);
return (
<Call {...props} streams={[stream]} currentUserId={CURRENT_USER_ID} />
);
},
};

Expand Down Expand Up @@ -155,9 +163,12 @@ export const FocusedWithUnfocusedWithoutCamera: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const s1 = useCreateStream("focused", true);
const s2 = useCreateStream("unfocused", false);
return <Call {...props} streams={{ focused: s1, unfocused: [s2] }} />;
const s1 = useCreateStream(true, CURRENT_USER_ID);
const s2 = useCreateStream(false);

return (
<Call {...props} streams={[s1, s2]} currentUserId={CURRENT_USER_ID} />
);
},
};

Expand Down Expand Up @@ -190,9 +201,11 @@ export const FocusedWithoutUnfocusedWithCamera: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const s1 = useCreateStream("focused", false);
const s2 = useCreateStream("unfocused", true);
return <Call {...props} streams={{ focused: s1, unfocused: [s2] }} />;
const s1 = useCreateStream(false, CURRENT_USER_ID);
const s2 = useCreateStream(true);
return (
<Call {...props} streams={[s1, s2]} currentUserId={CURRENT_USER_ID} />
);
},
};

Expand Down Expand Up @@ -225,10 +238,12 @@ export const FullRoomWithoutCameras: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const s1 = useCreateStream("focused", false);
const s2 = useCreateStream("unfocused", false);
const s1 = useCreateStream(false, CURRENT_USER_ID);
const s2 = useCreateStream(false);
if (!s1 || !s2) return <div></div>;
return <Call {...props} streams={{ focused: s1, unfocused: [s2] }} />;
return (
<Call {...props} streams={[s1, s2]} currentUserId={CURRENT_USER_ID} />
);
},
};

Expand Down Expand Up @@ -263,11 +278,17 @@ export const FullRoomWithCastWithCameras: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const cast = useCreateStream("focused", true);
const s1 = useCreateStream("unfocused", true);
const s2 = useCreateStream("unfocused", true);
const cast = useCreateStream(true, CURRENT_USER_ID, true);
const s1 = useCreateStream(true, CURRENT_USER_ID);
const s2 = useCreateStream(true);
if (!s1 || !s2 || !cast) return <div></div>;
return <Call {...props} streams={{ focused: cast, unfocused: [s1, s2] }} />;
return (
<Call
{...props}
streams={[s1, s2, cast]}
currentUserId={CURRENT_USER_ID}
/>
);
},
};

Expand Down Expand Up @@ -300,11 +321,17 @@ export const FullRoomWithCastWithoutCameras: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const cast = useCreateStream("focused", true);
const s1 = useCreateStream("unfocused", false);
const s2 = useCreateStream("unfocused", false);
const cast = useCreateStream(true, CURRENT_USER_ID, true);
const s1 = useCreateStream(false, CURRENT_USER_ID);
const s2 = useCreateStream(false);
if (!s1 || !s2 || !cast) return <div></div>;
return <Call {...props} streams={{ focused: cast, unfocused: [s1, s2] }} />;
return (
<Call
{...props}
streams={[s1, s2, cast]}
currentUserId={CURRENT_USER_ID}
/>
);
},
};

Expand Down Expand Up @@ -337,15 +364,20 @@ export const FullRoomWithCastWithCameraWithoutCamera: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const cast = useCreateStream("focused", true);
const s1 = useCreateStream("unfocused", true);
const s2 = useCreateStream("unfocused", false);
return <Call {...props} streams={{ focused: cast, unfocused: [s1, s2] }} />;
const cast = useCreateStream(true, CURRENT_USER_ID, true);
const s1 = useCreateStream(true, CURRENT_USER_ID);
const s2 = useCreateStream(false);
return (
<Call
{...props}
streams={[s1, s2, cast]}
currentUserId={CURRENT_USER_ID}
/>
);
},
};

// Animation Testing
export const NewUserEntering: StoryObj<Component> = {
export const FullRoomWithFullCast: StoryObj<Component> = {
args: {
chat: {
enabled: true,
Expand Down Expand Up @@ -374,36 +406,22 @@ export const NewUserEntering: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const initialStream = useCreateStream("focused", false);
const unfocusedStream = useCreateStream("unfocused", false);
const [focused, setFocused] = useState<StreamInfo>(initialStream);
const [unfocused, setUnfocused] = useState<StreamInfo[]>([]);

useEffect(() => {
setFocused(initialStream);
}, [initialStream]);

useEffect(() => {
const timeout = setTimeout(() => {
setUnfocused((prev) => [...prev, unfocusedStream]);
}, 5_000);

return () => clearTimeout(timeout);
}, [unfocusedStream]);

const cast = useCreateStream(true, CURRENT_USER_ID, true);
const cast2 = useCreateStream(true, 8, true);
const s1 = useCreateStream(true, CURRENT_USER_ID);
const s2 = useCreateStream(false, 8);
return (
<Call
{...props}
streams={{
focused,
unfocused,
}}
streams={[s1, s2, cast, cast2]}
currentUserId={CURRENT_USER_ID}
/>
);
},
};

export const NewUserEnteringThenCasting: StoryObj<Component> = {
// Animation Testing
export const NewUserEntering: StoryObj<Component> = {
args: {
chat: {
enabled: true,
Expand Down Expand Up @@ -432,50 +450,27 @@ export const NewUserEnteringThenCasting: StoryObj<Component> = {
chatPanel: <div>This is a Message Component</div>,
},
render(props) {
const initialStream = useCreateStream("focused", false);
const unfocusedStream = useCreateStream("unfocused", false);
const unfocusedStream2 = useCreateStream("unfocused", false);
const cast = useCreateStream("focused", false);
const [focused, setFocused] = useState<StreamInfo>(initialStream);
const [unfocused, setUnfocused] = useState<StreamInfo[]>([]);
const initialStream = useCreateStream(false, CURRENT_USER_ID);
const unfocusedStream = useCreateStream(false);

useEffect(() => {
setFocused(initialStream);
}, [initialStream]);

useEffect(() => {
const timeout = setTimeout(() => {
setUnfocused((prev) => [...prev, unfocusedStream]);
}, 5_000);

return () => clearTimeout(timeout);
}, [unfocusedStream]);
const [streams, setStreams] = useState<StreamInfo[]>([]);

useEffect(() => {
const timeout = setTimeout(() => {
setUnfocused((prev) => [...prev, unfocusedStream2]);
}, 10_000);

return () => clearTimeout(timeout);
}, [unfocusedStream2]);
setStreams([initialStream]);
//eslint-disable-next-line
}, []);

useEffect(() => {
const timeout = setTimeout(() => {
setFocused(cast);
setUnfocused([initialStream, unfocusedStream, unfocusedStream2]);
}, 15_000);
setStreams((prev) => [...prev, unfocusedStream]);
}, 5_000);

return () => clearTimeout(timeout);
}, [cast, initialStream, unfocusedStream, unfocusedStream2]);
//eslint-disable-next-line
}, []);

return (
<Call
{...props}
streams={{
focused: focused,
unfocused: unfocused,
}}
/>
<Call {...props} streams={streams} currentUserId={CURRENT_USER_ID} />
);
},
};
Expand Down
Loading

0 comments on commit 52edd5b

Please sign in to comment.