diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx b/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx index 6ab48b6c..26114250 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx +++ b/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx @@ -22,8 +22,6 @@ export default function TReactPlayer({ mediaEventsMap = handledMediaEventsMap, videoRef, url, - overlayLoading, - setOverlayLoading, ...rest }) { const playerRef = useRef(null); @@ -32,10 +30,6 @@ export default function TReactPlayer({ (type) => (ev) => { if (type === "onReady") { if (videoRef) { - if (!overlayLoading) { - setOverlayLoading(true); - } - const videoNode = playerRef.current.getInternalPlayer(); videoRef(videoNode); if ( @@ -122,7 +116,7 @@ export default function TReactPlayer({ } handle.forward("onUpdate", { type, ev }, rest); }, - [videoRef, overlayLoading] + [videoRef] ); const handledMediaEvents = useMemo(() => { diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js index f5f4e1b4..7af30ac7 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js +++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js @@ -2109,8 +2109,6 @@ const VideoPlayerBase = class extends React.Component { handleIndicatorUpClick, orderPhnNo, captionEnable, - overlayLoading, - setOverlayLoading, ...mediaProps } = this.props; @@ -2223,11 +2221,7 @@ const VideoPlayerBase = class extends React.Component { (VideoComponent && (((typeof VideoComponent === "function" || typeof VideoComponent === "string") && ( - + )) || (React.isValidElement(VideoComponent) && React.cloneElement(VideoComponent, mediaProps)))) || @@ -2258,24 +2252,22 @@ const VideoPlayerBase = class extends React.Component { (this.state.infoVisible ? " " + css.lift : "") } > - {overlayLoading && ( - - )} + )} @@ -2322,64 +2314,60 @@ const VideoPlayerBase = class extends React.Component { videoVerticalVisible && css.videoVertical )} > - {this.state.mediaSliderVisible && overlayLoading ? ( + {this.state.mediaSliderVisible ? ( ) : null} - - {this.state.mediaSliderVisible && overlayLoading ? ( + {this.state.mediaSliderVisible ? ( ) : null} - {overlayLoading && ( - - { - - )} + + + { + )} { - if ( - !panelInfo.modal && - !videoVerticalVisible && - playListInfo && - overlayLoading - ) { + if (!panelInfo.modal && !videoVerticalVisible && playListInfo) { Spotlight.focus("player-tab-arrow"); } }, [ @@ -720,7 +714,6 @@ const PlayerPanel = ({ sideContentsVisible, playListInfo, videoVerticalVisible, - overlayLoading, ]); useEffect(() => { @@ -837,62 +830,54 @@ const PlayerPanel = ({ } }, [liveShowInfos, selectedIndex, videoPlayer, panelInfo]); - const mediainfoHandler = useCallback( - (ev) => { - const type = ev.type; - if (type !== "timeupdate" && type !== "durationchange") { - console.log( - "mediainfoHandler....", - type, - ev, - videoPlayer.current?.getMediaState() - ); + const mediainfoHandler = useCallback((ev) => { + const type = ev.type; + if (type !== "timeupdate" && type !== "durationchange") { + console.log( + "mediainfoHandler....", + type, + ev, + videoPlayer.current?.getMediaState() + ); + } + if ( + ev === "hlsError" && + isNaN(Number(videoPlayer.current?.getMediaState().playbackRate)) + ) { + dispatch( + sendBroadCast({ + type: "videoError", + moreInfo: { reason: "hlsError" }, + }) + ); + return; + } + + switch (type) { + case "timeupdate": { + setCurrentTime(videoPlayer.current?.getMediaState()?.currentTime); + + if (videoPlayer.current?.getMediaState().currentTime >= liveTotalTime) { + dispatch(getMainLiveShow()); + } + + break; } - if ( - ev === "hlsError" && - isNaN(Number(videoPlayer.current?.getMediaState().playbackRate)) - ) { + case "error": { dispatch( sendBroadCast({ type: "videoError", - moreInfo: { reason: "hlsError" }, + moreInfo: { reason: videoPlayer.current?.getMediaState().error }, }) ); - return; + break; } - - switch (type) { - case "timeupdate": { - if (!overlayLoading) { - setOverlayLoading(true); - } - setCurrentTime(videoPlayer.current?.getMediaState()?.currentTime); - - if ( - videoPlayer.current?.getMediaState().currentTime >= liveTotalTime - ) { - dispatch(getMainLiveShow()); - } - - break; - } - case "error": { - dispatch( - sendBroadCast({ - type: "videoError", - moreInfo: { reason: videoPlayer.current?.getMediaState().error }, - }) - ); - break; - } - case "loadeddata": { - const mediaId = videoPlayer.current?.video?.media?.mediaId; - setMediaId(mediaId); - } + case "loadeddata": { + const mediaId = videoPlayer.current?.video?.media?.mediaId; + setMediaId(mediaId); } - }, - [overlayLoading] - ); + } + }, []); useEffect(() => { if (panelInfo.modal && panelInfo.modalContainerId) { @@ -996,13 +981,12 @@ const PlayerPanel = ({ chatData && !panelInfo.modal && isOnTop && - panelInfo?.shptmBanrTpNm !== "MEDIA" && - overlayLoading + panelInfo?.shptmBanrTpNm !== "MEDIA" ) { return true; } return false; - }, [playListInfo, chatData, panelInfo.modal, overlayLoading, isOnTop]); + }, [playListInfo, chatData, panelInfo.modal, isOnTop]); const isQRCodeVisible = useMemo(() => { if (playListInfo && shopNowInfo && !panelInfo.modal) { @@ -1129,7 +1113,6 @@ const PlayerPanel = ({ ); setSideContentsVisible(true); - setOverlayLoading(false); }, [dispatch, playListInfo, selectedIndex]); const handleIndicatorUpClick = useCallback(() => { @@ -1160,7 +1143,6 @@ const PlayerPanel = ({ } setSideContentsVisible(true); - setOverlayLoading(false); }, [dispatch, playListInfo, selectedIndex]); useEffect(() => { @@ -1293,8 +1275,6 @@ const PlayerPanel = ({ sideContentsVisible={sideContentsVisible} videoVerticalVisible={videoVerticalVisible} isSubtitleActive={isSubtitleActive} - overlayLoading={overlayLoading} - setOverlayLoading={setOverlayLoading} > {typeof window === "object" && window.PalmSystem && ( @@ -1310,15 +1290,13 @@ const PlayerPanel = ({ )} {/* Overlay Area */} - {playListInfo && - playListInfo[orderPhnNoIndex]?.orderPhnNo && - overlayLoading && ( - - )} + {playListInfo && playListInfo[orderPhnNoIndex]?.orderPhnNo && ( + + )} {isQRCodeVisible && ( )} - {currentSideButtonStatus && - !videoVerticalVisible && - playListInfo && - overlayLoading && ( - - )} + {currentSideButtonStatus && !videoVerticalVisible && playListInfo && ( + + )} {sideContentsVisible && playListInfo && panelInfo?.shptmBanrTpNm !== "MEDIA" && !panelInfo?.modal && - isOnTop && - overlayLoading && ( + isOnTop && ( )} 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 21f2cd58..1b086795 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx @@ -32,7 +32,6 @@ export default function TabContainer({ videoVerticalVisible, featuredShowsInfos, handleItemFocus, - setOverlayLoading, }) { const [tab, setTab] = useState(0); @@ -135,7 +134,6 @@ export default function TabContainer({ setSelectedIndex={setSelectedIndex} videoVerticalVisible={videoVerticalVisible} currentVideoShowId={playListInfo[selectedIndex]?.showId} - setOverlayLoading={setOverlayLoading} tabIndex={tab} handleItemFocus={_handleItemFocus} /> @@ -145,7 +143,6 @@ export default function TabContainer({ selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} videoVerticalVisible={videoVerticalVisible} - setOverlayLoading={setOverlayLoading} liveInfos={playListInfo} tabIndex={tab} handleItemFocus={_handleItemFocus} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx index c465a132..5a4d71b0 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx @@ -18,7 +18,6 @@ export default function FeaturedShowContents({ videoVerticalVisible, currentVideoInfo, setSelectedIndex, - setOverlayLoading, tabIndex, handleItemFocus, }) { @@ -36,7 +35,6 @@ export default function FeaturedShowContents({ const handleItemClick = useCallback( (index, patnrId, showId) => () => { setSelectedIndex(index + 1); - setOverlayLoading(false); dispatch( updatePanel({ name: panel_names.PLAYER_PANEL, 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 4d543cdd..2d20e6c2 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 @@ -16,7 +16,6 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex, videoVerticalVisible, - setOverlayLoading, tabIndex, handleItemFocus, }) { @@ -52,7 +51,6 @@ export default function LiveChannelContents({ if (!showId) return; setSelectedIndex(index); - setOverlayLoading(false); dispatch( updatePanel({ name: panel_names.PLAYER_PANEL,