From fbb89d1b2751c9ce50af179891efc6cbe9c6dcc5 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 3 Dec 2024 02:20:20 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B3=A0=EC=A0=95=EB=90=9C=20=EB=B9=84?=
 =?UTF-8?q?=EB=94=94=EC=98=A4=EC=97=90=20=EB=8C=80=ED=95=B4=20border?=
 =?UTF-8?q?=EA=B0=80=20=EC=95=84=EB=8B=8C=20pin=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=EC=9D=84=20=ED=91=9C=EC=8B=9C=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/assets/icons/pin.svg             |  3 +++
 .../live/StreamView/List/SubVideoGrid.tsx     | 17 ++------------
 .../live/StreamView/List/VideoPlayer.tsx      | 23 ++++++++++++++-----
 apps/web/tailwind.config.ts                   |  1 -
 4 files changed, 22 insertions(+), 22 deletions(-)
 create mode 100644 apps/web/src/assets/icons/pin.svg

diff --git a/apps/web/src/assets/icons/pin.svg b/apps/web/src/assets/icons/pin.svg
new file mode 100644
index 00000000..ce6d6275
--- /dev/null
+++ b/apps/web/src/assets/icons/pin.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="21" viewBox="0 0 16 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.99587 0.600018L5.00062 0.600006H11.0006L11.0054 0.600018H14.0006V2.40002H11.9006V8.12753L15.2209 12.5604C15.4252 12.8332 15.4579 13.1979 15.3054 13.5027C15.1529 13.8075 14.8413 13.9999 14.5005 13.9999H8.90072V20L8.00072 21L7.10072 20V13.9999H1.50053C1.15973 13.9999 0.84817 13.8075 0.695668 13.5027C0.543167 13.1979 0.575889 12.8331 0.7802 12.5604L4.10062 8.12752V2.40002H2.00062V0.600018H4.99587ZM5.90062 2.40002V8.42722C5.90062 8.62176 5.83758 8.81107 5.72095 8.96678L3.29916 12.1999H12.702L10.2803 8.96676C10.1636 8.81106 10.1006 8.62176 10.1006 8.42722V2.40002H5.90062Z"/>
+</svg>
diff --git a/apps/web/src/components/live/StreamView/List/SubVideoGrid.tsx b/apps/web/src/components/live/StreamView/List/SubVideoGrid.tsx
index e66c19b8..71649645 100644
--- 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
index 24a64b31..caf39d75 100644
--- 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
index 7f9d2571..4c957415 100644
--- 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)',