[PlayerPanel] TabContents feturedShows percent gauge update

com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx

@@ -1,20 +1,14 @@
-import React, {
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
 
-import classNames from 'classnames';
+import classNames from "classnames";
 
-import Spottable from '@enact/spotlight/Spottable';
+import Spottable from "@enact/spotlight/Spottable";
 
-import defaultLogoImg
+import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png";
-  from '../../../../assets/images/ic-tab-partners-default@3x.png';
+import CustomImage from "../../../components/CustomImage/CustomImage";
-import CustomImage from '../../../components/CustomImage/CustomImage';
+import { convertUtcToLocal } from "../../../components/MediaPlayer/util";
-import { $L } from '../../../utils/helperMethods';
+import { $L } from "../../../utils/helperMethods";
-import css from './PlayerItemCard.module.less';
+import css from "./PlayerItemCard.module.less";
 
 const SpottableComponent = Spottable("div");
 
@@ -56,11 +50,32 @@ export default memo(function PlayerItemCard({
   startDt,
   endDt,
   timezone,
+  liveInfo,
   type = TYPES.liveHorizontal,
+
   ...rest
 }) {
-  const [gaugeWidth, setGaugeWidth] = useState(0);
   const [focused, setFocused] = useState(false);
+  const [percent, setPercent] = useState(0);
+
+  useEffect(() => {
+    const localStartDt = convertUtcToLocal(liveInfo?.strtDt);
+    const localEndDt = convertUtcToLocal(liveInfo?.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;
+    }
+    setPercent(percent);
+  }, [liveInfo]);
+
   const _onBlur = useCallback(() => {
     setFocused(false);
     if (onBlur) {
@@ -88,29 +103,7 @@ export default memo(function PlayerItemCard({
     }
   }, [onFocus]);
 
-  useEffect(() => {
+  const progressStyle = useMemo(() => ({ width: `${percent}%` }), [percent]);
-    const today = new Date();
-    const startDtMoment = new Date(startDt);
-    const endDtMoment = new Date(endDt);
-
-    // 라이브 영상 시간 (분)
-    const liveTime = Math.floor((endDtMoment - startDtMoment) / (1000 * 60));
-    // 경과시간 (분)
-    const elapsedTime = Math.floor((today - startDtMoment) / (1000 * 60));
-
-    const progressPercentage = (elapsedTime / liveTime) * 100;
-
-    if (elapsedTime > 0) {
-      setGaugeWidth(progressPercentage);
-    } else {
-      setGaugeWidth(0);
-    }
-  }, [startDt, endDt, gaugeWidth]);
-
-  const progressStyle = useMemo(
-    () => ({ width: `${gaugeWidth}%` }),
-    [gaugeWidth]
-  );
 
   return (
     <SpottableComponent

com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

@@ -87,11 +87,11 @@ const PlayerPanel = ({
   const [playListInfo, setPlayListInfo] = useState("");
   const [shopNowInfo, setShopNowInfo] = useState();
   const [modalStyle, setModalStyle] = useState({});
+
   const [sideContentsVisible, setSideContentsVisible] = useState(true);
   const [isInitialFocusOccurred, setIsInitialFocusOccurred] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [isUpdate, setIsUpdate] = useState(false);
-  const [currentTime, setCurrentTime] = useState();
   const [isChatVisible, setIsChatVisible] = useState(true);
   const [isSubtitleActive, setIsSubtitleActive] = useState(true);
 
@@ -163,6 +163,9 @@ const PlayerPanel = ({
     return playListInfo;
   }, [playListInfo]);
 
+  const currentTime = useMemo(() => {
+    return videoPlayer.current?.getMediaState().currentTime;
+  }, [videoPlayer]);
   const cannotPlay = useMemo(() => {
     const topPanel = panels[panels.length - 1];
     return !isOnTop && topPanel?.name === panel_names.PLAYER_PANEL;
@@ -188,34 +191,6 @@ const PlayerPanel = ({
     [showDetailInfo]
   );
 
-  const mediainfoHandler = useCallback(
-    (ev) => {
-      const type = ev.type;
-      if (type !== "timeupdate") {
-      }
-
-      switch (type) {
-        case "timeupdate": {
-          setCurrentTime(videoPlayer.current?.getMediaState().currentTime);
-        }
-        case "loadeddata":
-          {
-          }
-          break;
-
-        case "durationchange":
-          {
-          }
-          break;
-        case "ended":
-          {
-          }
-          break;
-      }
-    },
-    [playListInfo, selectedIndex]
-  );
-
   useEffect(() => {
     let sideCotnentsTimer;
 
@@ -377,21 +352,14 @@ const PlayerPanel = ({
       const localStartDt = convertUtcToLocal(
         playListInfo[selectedIndex]?.strtDt
       );
-      const localEndDt = convertUtcToLocal(playListInfo[selectedIndex]?.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;
-      }
-      const progressPercent = percent + "%";
-
       return diff;
     }
   }, [playListInfo, selectedIndex, videoPlayer, panelInfo]);
@@ -591,10 +559,6 @@ const PlayerPanel = ({
               (panelInfo?.shptmBanrTpNm !== "MEDIA" && sideContentsVisible) ||
               panelInfo.modal
             }
-            onLoadedData={mediainfoHandler}
-            onLoadedMetadata={mediainfoHandler}
-            onDurationChange={mediainfoHandler}
-            onTimeUpdate={mediainfoHandler}
             isYoutube={isYoutube}
             src={currentPlayingUrl}
             style={panelInfo.modal ? modalStyle : {}}

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx

@@ -20,6 +20,7 @@ const Container = SpotlightContainerDecorator(
 );
 
 export default function TabContainer({
+  percent,
   panelInfo,
   playListInfo,
   shopNowInfo,
@@ -85,6 +86,7 @@ export default function TabContainer({
       )}
       {panelInfo?.shptmBanrTpNm === "LIVE" && tab === 1 && liveChannelInfos && (
         <LiveChannelContents
+          selectedIndex={selectedIndex}
           setSelectedIndex={setSelectedIndex}
           liveInfos={playListInfo}
         />

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx

@@ -11,7 +11,11 @@ import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
 import css from "./LiveChannelContents.module.less";
 import PlayerTabLoading from "./PlayerTabLoading";
 
-export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
+export default function LiveChannelContents({
+  liveInfos,
+  selectedIndex,
+  setSelectedIndex,
+}) {
   const dispatch = useDispatch();
 
   const renderItem = useCallback(
@@ -55,6 +59,7 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
           onClick={handleItemClick}
           type={TYPES.liveHorizontal}
           spotlightId={`tabChannel-video-${index}`}
+          liveInfo={liveInfos[index]}
         />
       );
     },