feat: 고정된 비디오에 대해 border가 아닌 pin 아이콘을 표시하도록 변경

boostcampwm-2024 · Dec 2, 2024 · fbb89d1 · fbb89d1
1 parent 045695b
commit fbb89d1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 22 deletions.
diff --git a/apps/web/src/assets/icons/pin.svg b/apps/web/src/assets/icons/pin.svg
diff --git a/apps/web/src/components/live/StreamView/List/SubVideoGrid.tsx b/apps/web/src/components/live/StreamView/List/SubVideoGrid.tsx
@@ -4,18 +4,6 @@ import { useEffect, useRef, useState } from 'react';
 import { StreamData } from '@/components/live/StreamView';
 import VideoPlayer from '@/components/live/StreamView/List/VideoPlayer';
 
-const highlightVariants = cva(`h-full w-full overflow-hidden rounded-lg border-2`, {
-  variants: {
-    pinned: {
-      true: 'border-primary',
-      false: 'border-transparent',
-    },
-  },
-  defaultVariants: {
-    pinned: false,
-  },
-});
-
 interface SubVideoGridProps {
   videoStreamData: StreamData[];
   pinnedVideoStreamData: StreamData | null;
@@ -55,9 +43,7 @@ function SubVideoGrid({
         <div
           key={`${streamData.socketId}${idx}`}
           style={{ maxWidth: videoMaxWidth }}
-          className={highlightVariants({
-            pinned: pinnedVideoStreamData?.stream?.id === streamData.stream?.id,
-          })}
+          className="h-full w-full overflow-hidden rounded-lg"
           onClick={() => streamData.stream && onVideoClick(streamData)}
         >
           <VideoPlayer
@@ -68,6 +54,7 @@ function SubVideoGrid({
             isMicOn={streamData && getAudioMutedState(streamData)}
             mediaType={streamData.consumer?.appData?.mediaTypes}
             socketId={streamData.socketId}
+            isPinned={pinnedVideoStreamData?.stream?.id === streamData.stream?.id}
           />
         </div>
       ))}

diff --git a/apps/web/src/components/live/StreamView/List/VideoPlayer.tsx b/apps/web/src/components/live/StreamView/List/VideoPlayer.tsx
@@ -3,6 +3,7 @@ import { memo, useEffect, useRef, useState } from 'react';
 
 import MicOffIc from '@/assets/icons/mic-off.svg?react';
 import MicOnIc from '@/assets/icons/mic-on.svg?react';
+import PinIc from '@/assets/icons/pin.svg?react';
 import Avatar from '@/components/common/Avatar';
 import Badge from '@/components/common/Badge';
 import Loading from '@/components/common/Loading';
@@ -20,7 +21,7 @@ const videoVariants = cva(
         false: 'opacity-100',
       },
       isSpeaking: {
-        true: 'border-active border-4',
+        true: 'border-4 border-primary',
         false: 'border-alt border-4',
       },
     },
@@ -39,6 +40,7 @@ export interface VideoPlayerProps {
   mediaType?: string;
   nickname: string;
   socketId?: string;
+  isPinned?: boolean;
 }
 
 function VideoPlayer({
@@ -49,13 +51,14 @@ function VideoPlayer({
   avatarSize = 'md',
   nickname,
   socketId,
+  isPinned = false,
 }: VideoPlayerProps) {
   const [isLoading, setIsLoading] = useState(true);
   const videoRef = useRef<HTMLVideoElement>(null);
 
   const { activeSocketId, createAudioLevel } = useAudioLevelDetector();
   const isSpeaking = activeSocketId === socketId;
-  console.log(activeSocketId);
+
   useEffect(() => {
     if (!videoRef.current) return;
 
@@ -78,7 +81,7 @@ function VideoPlayer({
             preload="metadata"
             className={videoVariants({
               loading: isLoading,
-              isSpeaking: isSpeaking,
+              isSpeaking,
             })}
             onLoadedData={onLoadedData}
           >
@@ -112,9 +115,17 @@ function VideoPlayer({
       {stream && (
         <>
           {mediaType === 'video' && (
-            <div className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-altWeak p-1">
-              {isMicOn ? <MicOnIc className="text-white" /> : <MicOffIc className="fill-white" />}
-            </div>
+            <>
+              <div className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-altWeak p-1">
+                {isMicOn ? <MicOnIc className="text-white" /> : <MicOffIc className="fill-white" />}
+              </div>
+
+              {isPinned && (
+                <div className="absolute left-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-primary p-1">
+                  <PinIc className="fill-white" />
+                </div>
+              )}
+            </>
           )}
         </>
       )}

diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
@@ -41,7 +41,6 @@ const tailwindConfig: Config = {
         black: 'var(--black)',
         alt: 'var(--grey-700)',
         error: 'var(--red)',
-        active: 'var(--green)',
       },
       fill: {
         primary: 'var(--purple-500)',