chore: initial video stream setup

web/src/components/Avatar.tsx

@@ -1,18 +1,34 @@
 import { stringToColor } from '@/utils/style'
+import { cva, VariantProps } from 'cva'
 import { memo } from 'react'
 
 const getInitials = (name: string) => {
   const nameParts = name.split(' ')
   const initials = nameParts.map(part => part.charAt(0).toUpperCase()).join('')
   return initials.slice(0, 2) // Get the first two initials
 }
+const avatarVariants = cva(
+  'flex shrink-0 items-center justify-center rounded-full border font-bold',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-base',
+        lg: 'h-16 w-16 text-lg',
+        xl: 'h-28 w-28 text-3xl',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+    },
+  },
+)
 
-interface AvatarProps {
+type AvatarProps = VariantProps<typeof avatarVariants> & {
   id: number
   name: string
 }
 
-export const Avatar = memo(({ name, id }: AvatarProps) => {
+export const Avatar = memo(({ name, id, size }: AvatarProps) => {
   if (!name) return null
 
   const initials = getInitials(name)
@@ -26,7 +42,7 @@ export const Avatar = memo(({ name, id }: AvatarProps) => {
   return (
     <div
       aria-label={`Avatar of ${name}`}
-      className='flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-base font-bold'
+      className={avatarVariants({ size })}
       style={avatarStyle}
     >
       {initials}

web/src/features/chat/components/ChatHeader.tsx

@@ -1,37 +1,55 @@
 import backArrow from '@/assets/back-svgrepo-com.svg'
-import usersSvg from '@/assets/users-svgrepo-com.svg'
 import { Alert } from '@/components/Alert'
+import { Dialog } from '@/components/Dialog'
+import { MediaCaller } from '@/features/webrtc/components'
+import { useDisclosure } from '@/hooks/useDisclosure'
+import { Phone, Users } from 'lucide-react'
 import { NavLink } from 'react-router-dom'
 
 interface ChatHeaderProps {
   error: Error | null
   chatId?: number
   chatName?: string
   toggleGroupInfo?: () => void
+  chatType: 'group' | 'dm'
 }
 
 export const ChatHeader = ({
   error,
   chatId,
   chatName,
+  chatType,
   toggleGroupInfo,
 }: ChatHeaderProps) => {
+  const { isOpen: isMediaCallerOpen, toggle: toggleMediaCaller } =
+    useDisclosure()
+
   let content
 
   if (chatId) {
     content = (
       <>
         <h3 className='text-lg font-bold'>{chatName}</h3>
-        {toggleGroupInfo && (
-          <button onClick={toggleGroupInfo} className='ml-auto'>
-            <img
-              src={usersSvg}
-              alt='open member drawer'
-              height={24}
-              width={24}
-            />
-          </button>
-        )}
+        <div className='ml-auto flex items-center gap-4'>
+          {chatType === 'group' && (
+            <>
+              <button
+                onClick={toggleMediaCaller}
+                aria-label='open media caller'
+              >
+                <Phone />
+              </button>
+              <Dialog isOpen={isMediaCallerOpen} onClose={toggleMediaCaller}>
+                <MediaCaller onCancel={toggleMediaCaller} />
+              </Dialog>
+            </>
+          )}
+          {toggleGroupInfo && (
+            <button onClick={toggleGroupInfo}>
+              <Users />
+            </button>
+          )}
+        </div>
       </>
     )
   } else if (error) {

web/src/features/webrtc/components/MediaCaller.tsx

@@ -0,0 +1,64 @@
+import { Phone } from 'lucide-react'
+import { useEffect, useRef } from 'react'
+
+export const MediaCaller = ({ onCancel }: { onCancel: () => void }) => {
+  const localVideoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    startStream()
+
+    return () => {
+      stopStream()
+    }
+  }, [])
+
+  const startStream = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: true,
+        audio: true,
+      })
+      if (localVideoRef.current) {
+        localVideoRef.current.srcObject = stream
+      }
+    } catch (error) {
+      // TODO: handle stream error
+    }
+  }
+
+  const handleCancelStream = () => {
+    stopStream()
+    onCancel()
+  }
+
+  const stopStream = () => {
+    if (localVideoRef.current?.srcObject) {
+      const stream = localVideoRef.current.srcObject as MediaStream
+      stream.getTracks().forEach(track => track.stop())
+      localVideoRef.current.srcObject = null
+    }
+  }
+
+  return (
+    <div>
+      <div className='mb-5 flex justify-center'>
+        <video ref={localVideoRef} autoPlay playsInline controls={false} />
+      </div>
+      <div className='mt-3 inline-flex w-full items-center justify-around'>
+        {/* <button type='button' aria-label='toggle video visibility'>
+          {isVideoShared ? <Video /> : <VideoOff />}
+        </button>
+        <button type='button' aria-label='toggle audio visibility'>
+          {isMuted ? <Mic /> : <MicOff />}
+        </button> */}
+        <button
+          type='button'
+          aria-label='cancel call'
+          onClick={handleCancelStream}
+        >
+          <Phone />
+        </button>
+      </div>
+    </div>
+  )
+}

web/src/features/webrtc/components/index.ts

@@ -0,0 +1 @@
+export { MediaCaller } from './MediaCaller'

web/src/features/webrtc/types.ts

@@ -0,0 +1,2 @@
+export type DeviceArrayMap = Record<MediaDeviceKind, MediaDeviceInfo[]>
+export type DeviceMap = Record<MediaDeviceKind, string>

web/src/pages/ChatDM.tsx

@@ -30,6 +30,7 @@ export const Component = () => {
         <ChatHeader
           chatId={receiver?.id}
           chatName={receiver?.username}
+          chatType='dm'
           error={error}
         />
         <MessageContainer partnerId={partnerId} />

web/src/pages/ChatGroup.tsx

@@ -49,6 +49,7 @@ export const Component = () => {
         <ChatHeader
           chatId={group?.id}
           chatName={group?.name}
+          chatType='group'
           error={error}
           toggleGroupInfo={toggle}
         />