From a2b2ae8a25b08de55b6b9162559512b31278a264 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?=
 <dongyoung@godong-yeong-ui-noteubug.local>
Date: Tue, 16 Jul 2024 11:29:48 +0900
Subject: [PATCH] =?UTF-8?q?[PlayerPanel]=20percent=20=EA=B2=8C=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20=EA=B0=90=EC=A7=80=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PlayerItemCard/PlayerItemCard.jsx         | 34 +++++++++++--------
 .../PlayerTabContents/TabContaienr.jsx        |  2 ++
 .../TabContents/LiveChannelContents.jsx       |  6 +++-
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
index 893025f0..d8b67fc0 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
@@ -50,33 +50,36 @@ export default memo(function PlayerItemCard({
   videoVerticalVisible,
   currentVideoVisible,
   dangerouslySetInnerHTML,
+  currentTime,
   liveInfo,
+  startDt,
+  endDt,
   type = TYPES.liveHorizontal,
 
   ...rest
 }) {
   const [focused, setFocused] = useState(false);
-  const [percent, setPercent] = useState(0);
+  const [percentGauge, setPercentGauge] = useState(0);
 
   useEffect(() => {
-    if (liveInfo) {
-      const localStartDt = convertUtcToLocal(liveInfo?.strtDt);
-      const localEndDt = convertUtcToLocal(liveInfo?.endDt);
-      const curDt = new Date();
-      const localStartSec = localStartDt?.getTime() / 1000;
-      const localEndSec = localEndDt?.getTime() / 1000;
-      const curSec = curDt?.getTime() / 1000;
-      const fullSec = localEndSec - localStartSec;
-      const diff = curSec - localStartSec;
+    if (startDt && endDt) {
+      let localStartDt = convertUtcToLocal(startDt);
+      let localEndDt = convertUtcToLocal(endDt);
+      let curDt = new Date();
+      let localStartSec = localStartDt?.getTime() / 1000;
+      let localEndSec = localEndDt?.getTime() / 1000;
+      let curSec = curDt?.getTime() / 1000;
+      let fullSec = localEndSec - localStartSec;
+      let diff = curSec - localStartSec;
 
       let percent = Math.floor((diff * 100) / fullSec);
 
       if (percent > 100) {
-        percent = 100;
+        percent = 0;
       }
-      setPercent(percent);
+      setPercentGauge(percent);
     }
-  }, [liveInfo]);
+  }, [startDt, endDt, currentTime, percentGauge]);
 
   const _onBlur = useCallback(() => {
     setFocused(false);
@@ -105,7 +108,10 @@ export default memo(function PlayerItemCard({
     }
   }, [onFocus]);
 
-  const progressStyle = useMemo(() => ({ width: `${percent}%` }), [percent]);
+  const progressStyle = useMemo(
+    () => ({ width: `${percentGauge}%` }),
+    [percentGauge]
+  );
   const ariaLabel = "Selected, " + patnerName + " " + productName();
 
   return (
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx
index bb930dcf..dcc83366 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx
@@ -33,6 +33,7 @@ export default function TabContainer({
   featuredShowsInfos,
   handleItemFocus,
   prevChannelIndex,
+  currentTime,
 }) {
   const [tab, setTab] = useState(0);
 
@@ -147,6 +148,7 @@ export default function TabContainer({
           liveInfos={playListInfo}
           tabIndex={tab}
           handleItemFocus={_handleItemFocus}
+          currentTime={currentTime}
         />
       )}
 
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
index 72a8745b..889bc058 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
@@ -14,6 +14,7 @@ import css from "./LiveChannelContents.module.less";
 
 export default function LiveChannelContents({
   liveInfos,
+  currentTime,
   setSelectedIndex,
   videoVerticalVisible,
   tabIndex,
@@ -89,10 +90,13 @@ export default function LiveChannelContents({
           type={TYPES.liveHorizontal}
           spotlightId={`tabChannel-video-${index}`}
           liveInfo={liveInfos[index]}
+          startDt={strtDt}
+          endDt={endDt}
+          currentTime={currentTime}
         />
       );
     },
-    [liveInfos, dispatch, handleFocus]
+    [liveInfos, currentTime, dispatch, handleFocus]
   );
 
   return (