optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[PlayerPanel] overlayLoading 삭제

Browse Source
This commit is contained in:
고동영
2024-06-28 15:49:58 +09:00
parent 86b077e1b8
commit 209ddcc0a6
6 changed files with 117 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx
View File

@@ -22,8 +22,6 @@ export default function TReactPlayer({
mediaEventsMap = handledMediaEventsMap, mediaEventsMap = handledMediaEventsMap,
videoRef, videoRef,
url, url,
overlayLoading,
setOverlayLoading,
...rest ...rest
}) { }) {
const playerRef = useRef(null); const playerRef = useRef(null);
@@ -32,10 +30,6 @@ export default function TReactPlayer({
(type) => (ev) => { (type) => (ev) => {
if (type === "onReady") { if (type === "onReady") {
if (videoRef) { if (videoRef) {
if (!overlayLoading) {
setOverlayLoading(true);
}
const videoNode = playerRef.current.getInternalPlayer(); const videoNode = playerRef.current.getInternalPlayer();
videoRef(videoNode); videoRef(videoNode);
if ( if (
@@ -122,7 +116,7 @@ export default function TReactPlayer({
} }
handle.forward("onUpdate", { type, ev }, rest); handle.forward("onUpdate", { type, ev }, rest);
}, },
[videoRef, overlayLoading] [videoRef]
); );
const handledMediaEvents = useMemo(() => { const handledMediaEvents = useMemo(() => {

130
com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
View File

@@ -2109,8 +2109,6 @@ const VideoPlayerBase = class extends React.Component {
handleIndicatorUpClick, handleIndicatorUpClick,
orderPhnNo, orderPhnNo,
captionEnable, captionEnable,
overlayLoading,
setOverlayLoading,
...mediaProps ...mediaProps
} = this.props; } = this.props;
@@ -2223,11 +2221,7 @@ const VideoPlayerBase = class extends React.Component {
(VideoComponent && (VideoComponent &&
(((typeof VideoComponent === "function" || (((typeof VideoComponent === "function" ||
typeof VideoComponent === "string") && ( typeof VideoComponent === "string") && (
<VideoComponent <VideoComponent {...mediaProps} />
{...mediaProps}
overlayLoading={overlayLoading}
setOverlayLoading={setOverlayLoading}
/>
)) || )) ||
(React.isValidElement(VideoComponent) && (React.isValidElement(VideoComponent) &&
React.cloneElement(VideoComponent, mediaProps)))) || React.cloneElement(VideoComponent, mediaProps)))) ||
@@ -2258,24 +2252,22 @@ const VideoPlayerBase = class extends React.Component {
(this.state.infoVisible ? " " + css.lift : "") (this.state.infoVisible ? " " + css.lift : "")
} }
> >
{overlayLoading && ( <PlayerOverlayContents
<PlayerOverlayContents playListInfo={playListInfo && playListInfo}
playListInfo={playListInfo && playListInfo} selectedIndex={selectedIndex}
selectedIndex={selectedIndex} onClick={onBackButton}
onClick={onBackButton} panelInfo={panelInfo}
panelInfo={panelInfo} setSelectedIndex={setSelectedIndex}
setSelectedIndex={setSelectedIndex} setIsSubtitleActive={setIsSubtitleActive}
setIsSubtitleActive={setIsSubtitleActive} sideContentsVisible={sideContentsVisible}
sideContentsVisible={sideContentsVisible} setSideContentsVisible={setSideContentsVisible}
setSideContentsVisible={setSideContentsVisible} videoVerticalVisible={videoVerticalVisible}
videoVerticalVisible={videoVerticalVisible} handleIndicatorUpClick={handleIndicatorUpClick}
handleIndicatorUpClick={handleIndicatorUpClick} handleIndicatorDownClick={handleIndicatorDownClick}
handleIndicatorDownClick={handleIndicatorDownClick} captionEnable={captionEnable}
captionEnable={captionEnable} disclaimer={disclaimer}
disclaimer={disclaimer} type={type}
type={type} />
/>
)}
</div> </div>
)} )}
</Overlay> </Overlay>
@@ -2322,64 +2314,60 @@ const VideoPlayerBase = class extends React.Component {
videoVerticalVisible && css.videoVertical videoVerticalVisible && css.videoVertical
)} )}
> >
{this.state.mediaSliderVisible && overlayLoading ? ( {this.state.mediaSliderVisible ? (
<Times <Times
noCurrentTime noCurrentTime
total={this.state.duration} total={this.state.duration}
formatter={durFmt} formatter={durFmt}
/> />
) : null} ) : null}
{this.state.mediaSliderVisible ? (
{this.state.mediaSliderVisible && overlayLoading ? (
<Times <Times
noTotalTime noTotalTime
current={this.state.currentTime} current={this.state.currentTime}
formatter={durFmt} formatter={durFmt}
/> />
) : null} ) : null}
{overlayLoading && (
<MediaSlider <MediaSlider
//노브 //노브
backgroundProgress={this.state.proportionLoaded} backgroundProgress={this.state.proportionLoaded}
disabled={disabled || this.state.sourceUnavailable} disabled={disabled || this.state.sourceUnavailable}
forcePressed={this.state.slider5WayPressed} forcePressed={this.state.slider5WayPressed}
onBlur={this.handleSliderBlur} onBlur={this.handleSliderBlur}
onChange={this.onSliderChange} onChange={this.onSliderChange}
onFocus={this.handleSliderFocus} onFocus={this.handleSliderFocus}
onKeyDown={this.handleSliderKeyDown} onKeyDown={this.handleSliderKeyDown}
onKnobMove={this.handleKnobMove} onKnobMove={this.handleKnobMove}
spotlightId={SpotlightIds.PLAYER_SLIDER} spotlightId={SpotlightIds.PLAYER_SLIDER}
videoVerticalVisible={videoVerticalVisible} videoVerticalVisible={videoVerticalVisible}
selection={proportionSelection} selection={proportionSelection}
spotlightDisabled={ spotlightDisabled={
spotlightDisabled || spotlightDisabled ||
!this.state.mediaControlsVisible || !this.state.mediaControlsVisible ||
type === "LIVE" type === "LIVE"
} }
value={this.state.proportionPlayed} value={this.state.proportionPlayed}
visible={this.state.mediaSliderVisible} visible={this.state.mediaSliderVisible}
type={type} type={type}
> >
{ {
<FeedbackTooltip <FeedbackTooltip
action={this.state.feedbackAction} action={this.state.feedbackAction}
duration={this.state.duration} duration={this.state.duration}
formatter={durFmt} formatter={durFmt}
hidden={ hidden={
!this.state.feedbackVisible || !this.state.feedbackVisible ||
this.state.sourceUnavailable this.state.sourceUnavailable
} }
playbackRate={this.selectPlaybackRate( playbackRate={this.selectPlaybackRate(this.speedIndex)}
this.speedIndex playbackState={this.prevCommand}
)} thumbnailComponent={thumbnailComponent}
playbackState={this.prevCommand} thumbnailDeactivated={this.props.thumbnailUnavailable}
thumbnailComponent={thumbnailComponent} thumbnailSrc={thumbnailSrc}
thumbnailDeactivated={this.props.thumbnailUnavailable} />
thumbnailSrc={thumbnailSrc} }
/> </MediaSlider>
}
</MediaSlider>
)}
</div> </div>
)} )}
<ComponentOverride <ComponentOverride

141
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
View File

@@ -135,7 +135,6 @@ const PlayerPanel = ({
const [shopNowInfo, setShopNowInfo] = useState(); const [shopNowInfo, setShopNowInfo] = useState();
const [modalStyle, setModalStyle] = useState({}); const [modalStyle, setModalStyle] = useState({});
const [mediaId, setMediaId] = useState(null); const [mediaId, setMediaId] = useState(null);
const [overlayLoading, setOverlayLoading] = useState(false);
const [sideContentsVisible, setSideContentsVisible] = useState(true); const [sideContentsVisible, setSideContentsVisible] = useState(true);
const [currentTime, setCurrentTime] = useState(0); const [currentTime, setCurrentTime] = useState(0);
@@ -707,12 +706,7 @@ const PlayerPanel = ({
}, [isInitialFocusOccurred, panelInfo]); }, [isInitialFocusOccurred, panelInfo]);
useEffect(() => { useEffect(() => {
if ( if (!panelInfo.modal && !videoVerticalVisible && playListInfo) {
!panelInfo.modal &&
!videoVerticalVisible &&
playListInfo &&
overlayLoading
) {
Spotlight.focus("player-tab-arrow"); Spotlight.focus("player-tab-arrow");
} }
}, [ }, [
@@ -720,7 +714,6 @@ const PlayerPanel = ({
sideContentsVisible, sideContentsVisible,
playListInfo, playListInfo,
videoVerticalVisible, videoVerticalVisible,
overlayLoading,
]); ]);
useEffect(() => { useEffect(() => {
@@ -837,62 +830,54 @@ const PlayerPanel = ({
} }
}, [liveShowInfos, selectedIndex, videoPlayer, panelInfo]); }, [liveShowInfos, selectedIndex, videoPlayer, panelInfo]);
const mediainfoHandler = useCallback( const mediainfoHandler = useCallback((ev) => {
(ev) => { const type = ev.type;
const type = ev.type; if (type !== "timeupdate" && type !== "durationchange") {
if (type !== "timeupdate" && type !== "durationchange") { console.log(
console.log( "mediainfoHandler....",
"mediainfoHandler....", type,
type, ev,
ev, videoPlayer.current?.getMediaState()
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 ( case "error": {
ev === "hlsError" &&
isNaN(Number(videoPlayer.current?.getMediaState().playbackRate))
) {
dispatch( dispatch(
sendBroadCast({ sendBroadCast({
type: "videoError", type: "videoError",
moreInfo: { reason: "hlsError" }, moreInfo: { reason: videoPlayer.current?.getMediaState().error },
}) })
); );
return; break;
} }
case "loadeddata": {
switch (type) { const mediaId = videoPlayer.current?.video?.media?.mediaId;
case "timeupdate": { setMediaId(mediaId);
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);
}
} }
}, }
[overlayLoading] }, []);
);
useEffect(() => { useEffect(() => {
if (panelInfo.modal && panelInfo.modalContainerId) { if (panelInfo.modal && panelInfo.modalContainerId) {
@@ -996,13 +981,12 @@ const PlayerPanel = ({
chatData && chatData &&
!panelInfo.modal && !panelInfo.modal &&
isOnTop && isOnTop &&
panelInfo?.shptmBanrTpNm !== "MEDIA" && panelInfo?.shptmBanrTpNm !== "MEDIA"
overlayLoading
) { ) {
return true; return true;
} }
return false; return false;
}, [playListInfo, chatData, panelInfo.modal, overlayLoading, isOnTop]); }, [playListInfo, chatData, panelInfo.modal, isOnTop]);
const isQRCodeVisible = useMemo(() => { const isQRCodeVisible = useMemo(() => {
if (playListInfo && shopNowInfo && !panelInfo.modal) { if (playListInfo && shopNowInfo && !panelInfo.modal) {
@@ -1129,7 +1113,6 @@ const PlayerPanel = ({
); );
setSideContentsVisible(true); setSideContentsVisible(true);
setOverlayLoading(false);
}, [dispatch, playListInfo, selectedIndex]); }, [dispatch, playListInfo, selectedIndex]);
const handleIndicatorUpClick = useCallback(() => { const handleIndicatorUpClick = useCallback(() => {
@@ -1160,7 +1143,6 @@ const PlayerPanel = ({
} }
setSideContentsVisible(true); setSideContentsVisible(true);
setOverlayLoading(false);
}, [dispatch, playListInfo, selectedIndex]); }, [dispatch, playListInfo, selectedIndex]);
useEffect(() => { useEffect(() => {
@@ -1293,8 +1275,6 @@ const PlayerPanel = ({
sideContentsVisible={sideContentsVisible} sideContentsVisible={sideContentsVisible}
videoVerticalVisible={videoVerticalVisible} videoVerticalVisible={videoVerticalVisible}
isSubtitleActive={isSubtitleActive} isSubtitleActive={isSubtitleActive}
overlayLoading={overlayLoading}
setOverlayLoading={setOverlayLoading}
> >
{typeof window === "object" && window.PalmSystem && ( {typeof window === "object" && window.PalmSystem && (
<source src={currentPlayingUrl} type="application/mpegurl" /> <source src={currentPlayingUrl} type="application/mpegurl" />
@@ -1310,15 +1290,13 @@ const PlayerPanel = ({
)} )}
{/* Overlay Area */} {/* Overlay Area */}
{playListInfo && {playListInfo && playListInfo[orderPhnNoIndex]?.orderPhnNo && (
playListInfo[orderPhnNoIndex]?.orderPhnNo && <VideoOverlayWithPhoneNumber
overlayLoading && ( className={css.videoOverlayWithPhoneNumber}
<VideoOverlayWithPhoneNumber orderPhnNo={playListInfo[orderPhnNoIndex]?.orderPhnNo}
className={css.videoOverlayWithPhoneNumber} show
orderPhnNo={playListInfo[orderPhnNoIndex]?.orderPhnNo} />
show )}
/>
)}
{isQRCodeVisible && ( {isQRCodeVisible && (
<PlayerOverlayQRCode <PlayerOverlayQRCode
@@ -1335,22 +1313,18 @@ const PlayerPanel = ({
/> />
)} )}
{currentSideButtonStatus && {currentSideButtonStatus && !videoVerticalVisible && playListInfo && (
!videoVerticalVisible && <PlayerTabButton
playListInfo && setSideContentsVisible={setSideContentsVisible}
overlayLoading && ( sideContentsVisible={sideContentsVisible}
<PlayerTabButton />
setSideContentsVisible={setSideContentsVisible} )}
sideContentsVisible={sideContentsVisible}
/>
)}
{sideContentsVisible && {sideContentsVisible &&
playListInfo && playListInfo &&
panelInfo?.shptmBanrTpNm !== "MEDIA" && panelInfo?.shptmBanrTpNm !== "MEDIA" &&
!panelInfo?.modal && !panelInfo?.modal &&
isOnTop && isOnTop && (
overlayLoading && (
<TabContainer <TabContainer
panelInfo={panelInfo} panelInfo={panelInfo}
shopNowInfo={shopNowInfo} shopNowInfo={shopNowInfo}
@@ -1361,7 +1335,6 @@ const PlayerPanel = ({
videoVerticalVisible={videoVerticalVisible} videoVerticalVisible={videoVerticalVisible}
handleItemFocus={handleItemFocus} handleItemFocus={handleItemFocus}
featuredShowsInfos={featuredShowsInfos} featuredShowsInfos={featuredShowsInfos}
setOverlayLoading={setOverlayLoading}
/> />
)} )}
</Container> </Container>

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

@@ -32,7 +32,6 @@ export default function TabContainer({
videoVerticalVisible, videoVerticalVisible,
featuredShowsInfos, featuredShowsInfos,
handleItemFocus, handleItemFocus,
setOverlayLoading,
}) { }) {
const [tab, setTab] = useState(0); const [tab, setTab] = useState(0);
@@ -135,7 +134,6 @@ export default function TabContainer({
setSelectedIndex={setSelectedIndex} setSelectedIndex={setSelectedIndex}
videoVerticalVisible={videoVerticalVisible} videoVerticalVisible={videoVerticalVisible}
currentVideoShowId={playListInfo[selectedIndex]?.showId} currentVideoShowId={playListInfo[selectedIndex]?.showId}
setOverlayLoading={setOverlayLoading}
tabIndex={tab} tabIndex={tab}
handleItemFocus={_handleItemFocus} handleItemFocus={_handleItemFocus}
/> />
@@ -145,7 +143,6 @@ export default function TabContainer({
selectedIndex={selectedIndex} selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex} setSelectedIndex={setSelectedIndex}
videoVerticalVisible={videoVerticalVisible} videoVerticalVisible={videoVerticalVisible}
setOverlayLoading={setOverlayLoading}
liveInfos={playListInfo} liveInfos={playListInfo}
tabIndex={tab} tabIndex={tab}
handleItemFocus={_handleItemFocus} handleItemFocus={_handleItemFocus}

2
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx
View File

@@ -18,7 +18,6 @@ export default function FeaturedShowContents({
videoVerticalVisible, videoVerticalVisible,
currentVideoInfo, currentVideoInfo,
setSelectedIndex, setSelectedIndex,
setOverlayLoading,
tabIndex, tabIndex,
handleItemFocus, handleItemFocus,
}) { }) {
@@ -36,7 +35,6 @@ export default function FeaturedShowContents({
const handleItemClick = useCallback( const handleItemClick = useCallback(
(index, patnrId, showId) => () => { (index, patnrId, showId) => () => {
setSelectedIndex(index + 1); setSelectedIndex(index + 1);
setOverlayLoading(false);
dispatch( dispatch(
updatePanel({ updatePanel({
name: panel_names.PLAYER_PANEL, name: panel_names.PLAYER_PANEL,

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

@@ -16,7 +16,6 @@ export default function LiveChannelContents({
liveInfos, liveInfos,
setSelectedIndex, setSelectedIndex,
videoVerticalVisible, videoVerticalVisible,
setOverlayLoading,
tabIndex, tabIndex,
handleItemFocus, handleItemFocus,
}) { }) {
@@ -52,7 +51,6 @@ export default function LiveChannelContents({
if (!showId) return; if (!showId) return;
setSelectedIndex(index); setSelectedIndex(index);
setOverlayLoading(false);
dispatch( dispatch(
updatePanel({ updatePanel({
name: panel_names.PLAYER_PANEL, name: panel_names.PLAYER_PANEL,