From 9d1f659289f0b1c7f8f768251e35fa7c48b504f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Fri, 24 May 2024 13:59:49 +0900 Subject: [PATCH] [PlayerPanel] TabContents feturedShows percent gauge update --- .../PlayerItemCard/PlayerItemCard.jsx | 69 +++++++++---------- .../src/views/PlayerPanel/PlayerPanel.jsx | 50 ++------------ .../PlayerTabContents/TabContaienr.jsx | 2 + .../TabContents/LiveChannelContents.jsx | 7 +- 4 files changed, 46 insertions(+), 82 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 9686b2da..50ab4e4c 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx @@ -1,20 +1,14 @@ -import React, { - memo, - useCallback, - useEffect, - useMemo, - useState, -} from 'react'; +import 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 - from '../../../../assets/images/ic-tab-partners-default@3x.png'; -import CustomImage from '../../../components/CustomImage/CustomImage'; -import { $L } from '../../../utils/helperMethods'; -import css from './PlayerItemCard.module.less'; +import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png"; +import CustomImage from "../../../components/CustomImage/CustomImage"; +import { convertUtcToLocal } from "../../../components/MediaPlayer/util"; +import { $L } from "../../../utils/helperMethods"; +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 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] - ); + const progressStyle = useMemo(() => ({ width: `${percent}%` }), [percent]); return ( { + 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 : {}} 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 f4d31033..fc3f0842 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx +++ b/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 && ( 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 75b569ea..9db472de 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 @@ -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]} /> ); },