[PlayerPanel] percent 게이지 실시간 감지 기능

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 (

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}
         />
       )}
 

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 (