feat(luna): improved the call object and implement the todos

packages/assets/package.json

@@ -49,6 +49,7 @@
     "./EmptyLesson2": "./dist/EmptyLesson2.tsx",
     "./EmptyLessons": "./dist/EmptyLessons.tsx",
     "./EmptyUpcomingLessons": "./dist/EmptyUpcomingLessons.tsx",
+    "./EndCall": "./dist/EndCall.tsx",
     "./Error": "./dist/Error.tsx",
     "./ExclaimationMarkCircle": "./dist/ExclaimationMarkCircle.tsx",
     "./ExclamationMark": "./dist/ExclamationMark.tsx",
@@ -88,6 +89,7 @@
     "./RegisterLight": "./dist/RegisterLight.tsx",
     "./RightArrowHead": "./dist/RightArrowHead.tsx",
     "./SStar": "./dist/SStar.tsx",
+    "./Save": "./dist/Save.tsx",
     "./Search": "./dist/Search.tsx",
     "./Send": "./dist/Send.tsx",
     "./SettingsScrew": "./dist/SettingsScrew.tsx",

packages/luna/package.json

@@ -37,6 +37,7 @@
     "./Loading": "./dist/components/Loading/index.js",
     "./Lessons": "./dist/components/Lessons/index.js",
     "./Menu": "./dist/components/Menu/index.js",
+    "./MovableMedia": "./dist/components/MovableMedia/index.js",
     "./MultiSelect": "./dist/components/MultiSelect/index.js",
     "./Navbar": "./dist/components/Navbar/index.js",
     "./NumericInput": "./dist/components/NumericInput/index.js",

packages/luna/src/components/Call/InternetIndicator.tsx → packages/luna/src/components/Call/CallAlert.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 import cn from "classnames";
 import ExclamationMark from "@litespace/assets/ExclamationMark";
-import { useFormatMessage } from "@/hooks";
 import { Typography } from "@/components/Typography";
 
-export const InternetIndicator: React.FC = () => {
-  const intl = useFormatMessage();
+export const CallAlert: React.FC<{ alert: string }> = ({ alert }) => {
   return (
     <div className="tw-flex tw-items-center tw-justify-center tw-gap-2">
       <div
@@ -21,7 +19,7 @@ export const InternetIndicator: React.FC = () => {
           "tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-natural-50 tw-font-bold tw-h-16 tw-backdrop-blur-[15px] tw-p-4 tw-bg-background-internet"
         )}
       >
-        {intl("call.internet.problem")}
+        {alert}
       </Typography>
     </div>
   );

packages/luna/src/components/Call/CallBar.tsx

@@ -1,6 +1,7 @@
 import { Void } from "@litespace/types";
 import React from "react";
-import { ToggleCallButton, EndCallButton } from "@/components/Call";
+import { EndCallButton } from "@/components/Call/EndCallButton";
+import { ToggleCallButton } from "@/components/Call/ToggleCallButton";
 
 export const CallBar: React.FC<{
   items: {

packages/luna/src/components/Call/FocusedStream.tsx

@@ -1,10 +1,14 @@
 import React, { useEffect, useRef } from "react";
 import { motion } from "framer-motion";
-import { VideoBar, CallAvatar } from "@/components/Call";
+import { VideoBar } from "@/components/Call/VideoBar";
+import { CallAvatar } from "@/components/Call/CallAvatar";
 import { StreamInfo } from "@/components/Call/types";
 import { Void } from "@litespace/types";
+import cn from "classnames";
+
 export const FocusedStream: React.FC<{
-  internetProblem?: boolean;
+  alert?: string;
+  streamMuted: boolean;
   stream: StreamInfo;
   timer: {
     duration: number;
@@ -14,7 +18,7 @@ export const FocusedStream: React.FC<{
     enabled: boolean;
     toggle: Void;
   };
-}> = ({ stream, timer, internetProblem, fullScreen }) => {
+}> = ({ stream, timer, alert, fullScreen, streamMuted }) => {
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   useEffect(() => {
@@ -24,48 +28,51 @@ export const FocusedStream: React.FC<{
   }, [stream.stream]);
 
   return (
-    <motion.div
-      initial={{
-        opacity: 0,
-        scale: 0,
-      }}
-      animate={{
-        scale: 1,
-        opacity: 1,
-      }}
-      transition={{
-        duration: 0.5,
-        ease: "easeInOut",
-      }}
-      key={stream.user.id}
-      className="tw-aspect-video tw-relative tw-w-full tw-h-full tw-grow tw-rounded-lg tw-overflow-hidden"
-    >
-      {/* todo: keep the video ref alwayas accessable */}
-      {stream.camera || stream.cast ? (
+    <div className="tw-grow tw-rounded-lg tw-overflow-hidden">
+      <motion.div
+        initial={{
+          opacity: 0,
+          scale: 0,
+        }}
+        animate={{
+          scale: 1,
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.5,
+          ease: "easeInOut",
+        }}
+        key={stream.user.id}
+        className="tw-aspect-video tw-relative tw-w-full tw-h-full tw-grow tw-rounded-lg tw-overflow-hidden"
+      >
         <video
           ref={videoRef}
           autoPlay
-          className="tw-w-full tw-aspect-video"
-          muted={false}
+          className={cn(
+            "tw-w-full tw-aspect-video tw-absolute tw-top-0",
+            !stream.stream || (!stream.camera && !stream.cast && "tw-opacity-0")
+          )}
+          muted={streamMuted}
           playsInline
         />
-      ) : (
-        <div className="tw-w-full tw-h-full tw-bg-brand-100 tw-flex tw-items-center tw-justify-center">
+        <div
+          className={cn(
+            "tw-w-full tw-h-full tw-bg-brand-100 tw-flex tw-items-center tw-justify-center",
+            (stream.camera || stream.cast) && "tw-opacity-0"
+          )}
+        >
           <CallAvatar user={stream.user} speaking={stream.speaking} />
         </div>
-      )}
+      </motion.div>
 
-      {/*
-       * TODO:  animate by using opacities not the movement
-       */}
       <VideoBar
-        internetProblem={internetProblem}
+        alert={alert}
         timer={timer}
         fullScreen={fullScreen}
         speaking={stream.speaking}
         muted={stream.muted}
       />
-    </motion.div>
+    </div>
   );
 };
 

packages/luna/src/components/Call/FullScreenButton.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import FullScreen from "@litespace/assets/FullScreen";
+import Minimize from "@litespace/assets/Minimize";
 import { Void } from "@litespace/types";
 
 export const FullScreenButton: React.FC<{ enabled: boolean; toggle: Void }> = ({
@@ -11,8 +12,10 @@ export const FullScreenButton: React.FC<{ enabled: boolean; toggle: Void }> = ({
       className="tw-rounded-full tw-cursor-pointer tw-flex tw-justify-center tw-items-center tw-w-16 tw-h-16 tw-backdrop-blur-[15px] tw-p-4 tw-bg-brand-700"
       onClick={toggle}
     >
-      {enabled ? null : (
-        <FullScreen className="[&>*]:tw-stroke-natural-50 tw-cursor-pointer" />
+      {enabled ? (
+        <Minimize className="[&>*]:tw-stroke-natural-50" />
+      ) : (
+        <FullScreen className="[&>*]:tw-stroke-natural-50" />
       )}
     </button>
   );

packages/luna/src/components/Call/InCall/Call.tsx

@@ -6,22 +6,13 @@ import Microphone from "@litespace/assets/Microphone";
 import MicrophoneSlash from "@litespace/assets/MicrophoneSlash";
 import Chat from "@litespace/assets/Chat";
 import CastScreen from "@litespace/assets/CastScreen";
-import { InCallStreams, CallBar } from "@/components/Call";
+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: {
     enabled: boolean;
@@ -48,7 +39,7 @@ type Props = {
   };
   leaveCall: Void;
   chatPanel?: React.ReactNode;
-  internetProblem?: boolean;
+  alert?: string;
 };
 
 export const Call: React.FC<Props> = ({
@@ -60,18 +51,20 @@ export const Call: React.FC<Props> = ({
   cast,
   streams,
   timer,
-  internetProblem,
+  alert,
   fullScreen,
+  currentUserId,
 }) => {
   return (
     <div className="tw-flex tw-flex-col tw-gap-10 tw-w-full tw-h-full">
       <div className="tw-h-full tw-grow tw-flex">
         <InCallStreams
+          currentUserId={currentUserId}
           fullScreen={fullScreen}
           streams={streams}
           chat={chat.enabled}
           timer={timer}
-          internetProblem={internetProblem}
+          alert={alert}
         />
         {chat.enabled ? chatPanel : null}
       </div>