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

[PlayerPanel] onBackbutton flex 적용용

Browse Source
This commit is contained in:
고동영
2024-07-12 14:35:22 +09:00
parent 22103394e7
commit 86dc2ae2e8
3 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
com.twin.app.shoptime/src/components/MediaPlayer/MediaControls.js
View File

@@ -352,6 +352,12 @@ const MediaControlsBase = kind({
Spotlight.focus("player-subtitlebutton");
};
const onSpotlightUp = (e) => {
e.preventDefault();
e.stopPropagation();
Spotlight.focus("player-back-button");
};
return (
<OuterContainer {...rest} id={id} spotlightId={spotlightId}>
{panelInfo?.shptmBanrTpNm !== "LIVE" && (
@@ -376,6 +382,7 @@ const MediaControlsBase = kind({
size="large"
spotlightDisabled={spotlightDisabled}
onSpotlightRight={onSpotlightRight}
onSpotlightUp={onSpotlightUp}
/>
{/* {noJumpButtons ? null : <MediaButton aria-label={$L('Next')} backgroundOpacity="transparent" css={css} disabled={mediaDisabled || jumpForwardDisabled} icon={jumpForwardIcon} onClick={onJumpForwardButtonClick} size="large" spotlightDisabled={spotlightDisabled} />} */}

15
com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
View File

@@ -135,14 +135,6 @@ export default function PlayerOverlayContents({
return (
<>
<Container className={css.overlayContainer}>
<SpottableBtn
onClick={onClickBack}
className={css.backIcon}
spotlightId="player-back-button"
onSpotlightDown={onSpotlightMoveMediaButton}
aria-label="Video Player Close"
/>
{type !== "MEDIA" &&
playListInfo.length > 1 &&
noLiveContentsVisible && (
@@ -205,6 +197,13 @@ export default function PlayerOverlayContents({
</div>
)}
<div className={css.overlayHeader}>
<SpottableBtn
onClick={onClickBack}
className={css.backIcon}
spotlightId="player-back-button"
onSpotlightDown={onSpotlightMoveMediaButton}
aria-label="Video Player Close"
/>
<div
className={panelInfo?.shptmBanrTpNm === "LIVE" && css.liveIcon}
aria-label={panelInfo?.shptmBanrTpNm === "LIVE" && "Live Icon"}

20
com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.module.less
View File

@@ -64,19 +64,19 @@
}
}
.backIcon {
.size(@w: 60px, @h: 60px);
background-size: 60px 60px;
background-repeat: no-repeat;
background-image: url("../../../../assets/images/btn/btn-60-wh-back-nor@3x.png");
&:focus {
background-image: url("../../../../assets/images/btn/btn-60-wh-back-foc@3x.png");
}
}
.overlayHeader {
display: flex;
.backIcon {
.size(@w: 60px, @h: 60px);
background-size: 60px 60px;
background-repeat: no-repeat;
background-image: url("../../../../assets/images/btn/btn-60-wh-back-nor@3x.png");
&:focus {
background-image: url("../../../../assets/images/btn/btn-60-wh-back-foc@3x.png");
}
}
.liveIcon {
.size(@w: 108px, @h: 48px);
margin: 6px 0 6px 30px;