[251111] feat: views - MediaPlayer.jsx, MediaPlayer.v2.jsx, ProductAll...
🕐 커밋 시간: 2025. 11. 11. 12:13:55 📊 변경 통계: • 총 파일: 8개 • 추가: +84줄 • 삭제: -124줄 📁 추가된 파일: + com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.module.less 📝 수정된 파일: ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.module.less ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx 🔧 주요 변경 내용: • UI 컴포넌트 아키텍처 개선 • 소규모 기능 개선 • 코드 정리 및 최적화 • 모듈 구조 개선 Performance: 코드 최적화로 성능 개선 기대
This commit is contained in:
@@ -59,7 +59,7 @@ import Media from './Media';
|
|||||||
import Overlay from './Overlay';
|
import Overlay from './Overlay';
|
||||||
import TReactPlayer from './TReactPlayer';
|
import TReactPlayer from './TReactPlayer';
|
||||||
import Video from './Video';
|
import Video from './Video';
|
||||||
import css from './VideoPlayer.module.less';
|
import css from './MediaPlayer.module.less';
|
||||||
|
|
||||||
const isEnter = is('enter');
|
const isEnter = is('enter');
|
||||||
const isLeft = is('left');
|
const isLeft = is('left');
|
||||||
|
|||||||
@@ -0,0 +1,835 @@
|
|||||||
|
// VideoPlayer.module.less
|
||||||
|
//
|
||||||
|
@import "~@enact/sandstone/styles/variables.less";
|
||||||
|
@import "~@enact/sandstone/styles/mixins.less";
|
||||||
|
@import "~@enact/sandstone/styles/skin.less";
|
||||||
|
@import "../../style/utils.module.less";
|
||||||
|
@import "../../style/CommonStyle.module.less";
|
||||||
|
.videoPlayer {
|
||||||
|
// Set by counting the IconButtons inside the side components.
|
||||||
|
--liftDistance: 0px;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.video {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: #000;
|
||||||
|
|
||||||
|
&.mediaBackground {
|
||||||
|
&:after {
|
||||||
|
width: 560px;
|
||||||
|
height: 200px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
content: "";
|
||||||
|
background: linear-gradient(
|
||||||
|
to top,
|
||||||
|
rgba(255, 255, 255, 1),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preloadVideo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
> img {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
&.noRadiusThumbnail {
|
||||||
|
> img {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.verticalThumbnail {
|
||||||
|
> img {
|
||||||
|
width: auto;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.smallThumbnail {
|
||||||
|
&::after {
|
||||||
|
.focused(@boxShadow:0, @borderRadius: 12px);
|
||||||
|
border: 6px solid @PRIMARY_COLOR_RED;
|
||||||
|
top: -4px;
|
||||||
|
right: -4px;
|
||||||
|
bottom: -4px;
|
||||||
|
left: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.disclaimer {
|
||||||
|
.size(@w: 100% , @h: 54px);
|
||||||
|
display: flex;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1;
|
||||||
|
> span {
|
||||||
|
.size(@w: 18px , @h: 18px);
|
||||||
|
background-image: url("../../../assets/images/icons/ic-alert-20@3x.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
margin: 0 12px 0 20px;
|
||||||
|
}
|
||||||
|
> h3 {
|
||||||
|
.size(@w: 100% , @h: 54px);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 54px;
|
||||||
|
.elip(@clamp:1);
|
||||||
|
.marquee {
|
||||||
|
width: 100%;
|
||||||
|
transition: opacity 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.videoOverlayWithPhoneNumberFull {
|
||||||
|
bottom: 59px;
|
||||||
|
left: 141px;
|
||||||
|
}
|
||||||
|
.videoOverlayWithPhoneNumber {
|
||||||
|
display: none;
|
||||||
|
&.ru {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
width: 22%;
|
||||||
|
height: 12.5%;
|
||||||
|
bottom: 6.5% !important;
|
||||||
|
left: 48% !important;
|
||||||
|
padding: 4px !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
> div:first-child {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
> div:last-child {
|
||||||
|
margin-top: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
> img {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.us {
|
||||||
|
&.vertical {
|
||||||
|
width: 105px;
|
||||||
|
height: 66px;
|
||||||
|
bottom: 225px !important;
|
||||||
|
left: -96px !important;
|
||||||
|
}
|
||||||
|
&.horizontal {
|
||||||
|
> div:first-child {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
> div:last-child {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
> img {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
font-size: 16px;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.qvc {
|
||||||
|
display: flex;
|
||||||
|
width: 18%;
|
||||||
|
height: 22%;
|
||||||
|
padding: 1%;
|
||||||
|
bottom: 4% !important;
|
||||||
|
left: 4.5% !important;
|
||||||
|
> div:first-child {
|
||||||
|
font-size: 48%;
|
||||||
|
}
|
||||||
|
> div:last-child {
|
||||||
|
> img {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
font-size: 48%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.hsn {
|
||||||
|
display: flex;
|
||||||
|
width: 18.5%;
|
||||||
|
height: 22%;
|
||||||
|
padding: 1%;
|
||||||
|
bottom: 4% !important;
|
||||||
|
left: 7% !important;
|
||||||
|
> div:first-child {
|
||||||
|
font-size: 48%;
|
||||||
|
}
|
||||||
|
> div:last-child {
|
||||||
|
> img {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
font-size: 48%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.verticalModal {
|
||||||
|
> div:last-child {
|
||||||
|
> img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> img {
|
||||||
|
width: 102px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div > img {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.videoOverlayMedia {
|
||||||
|
bottom: 24% !important;
|
||||||
|
left: 7% !important;
|
||||||
|
&.callToOrderHide {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
&.qvc {
|
||||||
|
display: flex;
|
||||||
|
width: 23%;
|
||||||
|
height: 15%;
|
||||||
|
padding: 30px 5px;
|
||||||
|
> div:first-child {
|
||||||
|
flex: none;
|
||||||
|
font-size: 13px !important;
|
||||||
|
line-height: 13px !important;
|
||||||
|
padding: 3px 5px;
|
||||||
|
}
|
||||||
|
> div:last-child {
|
||||||
|
display: flex;
|
||||||
|
flex: none;
|
||||||
|
align-items: center;
|
||||||
|
height: 4px;
|
||||||
|
> img {
|
||||||
|
flex: none;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
flex: none;
|
||||||
|
font-size: 15px;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.hsn {
|
||||||
|
display: flex;
|
||||||
|
width: 23%;
|
||||||
|
height: 15%;
|
||||||
|
padding: 30px 5px;
|
||||||
|
> div:first-child {
|
||||||
|
flex: none;
|
||||||
|
font-size: 13px !important;
|
||||||
|
line-height: 13px !important;
|
||||||
|
padding: 3px 5px;
|
||||||
|
}
|
||||||
|
> div:last-child {
|
||||||
|
display: flex;
|
||||||
|
flex: none;
|
||||||
|
align-items: center;
|
||||||
|
height: 4px;
|
||||||
|
> img {
|
||||||
|
flex: none;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
flex: none;
|
||||||
|
font-size: 15px;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loaderWrap {
|
||||||
|
height: 100%;
|
||||||
|
> div {
|
||||||
|
width: 220px;
|
||||||
|
height: 220px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
left: calc(50% - 110px);
|
||||||
|
top: calc(50% - 110px);
|
||||||
|
background-color: transparent;
|
||||||
|
> div {
|
||||||
|
> div {
|
||||||
|
-webkit-animation: mulShdSpinWhite 1.2s infinite ease !important;
|
||||||
|
animation: mulShdSpinWhite 1.2s infinite ease !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes mulShdSpinWhite {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em #fff,
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em #fff,
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
12.5% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
|
||||||
|
1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
|
||||||
|
1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
37.5% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
62.5% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
87.5% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mulShdSpinWhite {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em #fff,
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em #fff,
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
12.5% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
|
||||||
|
1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
|
||||||
|
1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
37.5% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
62.5% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
|
||||||
|
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
87.5% {
|
||||||
|
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
|
||||||
|
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||||
|
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||||
|
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
.position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
|
||||||
|
}
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0.25turn);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: rotate(0.5turn);
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
transform: rotate(0.95turn);
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
transform: rotate(1turn);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(1.25turn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.spinner {
|
||||||
|
background-image: url("../../../assets/images/player/icon_loading.png");
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
position: relative;
|
||||||
|
background-size: cover;
|
||||||
|
border-radius: 20.8125rem;
|
||||||
|
overflow: hidden;
|
||||||
|
// margin: 490px auto;
|
||||||
|
left: calc(50% - 50px);
|
||||||
|
top: calc(50% - 50px);
|
||||||
|
animation: none 1.25s linear infinite;
|
||||||
|
animation-name: spin;
|
||||||
|
// animation-play-state: paused;
|
||||||
|
}
|
||||||
|
.controlFeedbackBtnLayer {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 50;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 94px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
&.lift {
|
||||||
|
transform: translateY(~"calc(var(--liftDistance) * -1)");
|
||||||
|
transition: transform 0.3s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fullscreen {
|
||||||
|
.miniFeedback {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 50;
|
||||||
|
top: 506px;
|
||||||
|
left: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 94px;
|
||||||
|
-webkit-margin-end: 0px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
&.liveFullScreen {
|
||||||
|
.bottom {
|
||||||
|
bottom: 78px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3; // Value assigned as part of the VideoPlayer API so layers may be inserted in-between
|
||||||
|
bottom: 70px;
|
||||||
|
// bottom: 78px;
|
||||||
|
// bottom: -18px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 70px;
|
||||||
|
// left: @sand-video-player-padding-side;
|
||||||
|
// right: @sand-video-player-padding-side;
|
||||||
|
|
||||||
|
&.videoVerticalBottom {
|
||||||
|
height: 54px;
|
||||||
|
}
|
||||||
|
&.lift {
|
||||||
|
transform: translateY(~"calc(var(--liftDistance) * -1)");
|
||||||
|
transition: transform 0.3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
.sliderContainer {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoFrame {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sliderContainer {
|
||||||
|
// display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 60px;
|
||||||
|
margin-right: 59px;
|
||||||
|
height: 70px;
|
||||||
|
bottom: -20px;
|
||||||
|
> *:first-child {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enact-locale-rtl({
|
||||||
|
direction: ltr;
|
||||||
|
});
|
||||||
|
|
||||||
|
&.videoVertical {
|
||||||
|
margin-left: 680px;
|
||||||
|
margin-right: 673px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlsHandleAbove {
|
||||||
|
pointer-events: none;
|
||||||
|
.position(@position: absolute, @top: 0, @right: 0, @bottom: auto, @left: 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skin colors
|
||||||
|
.applySkins({
|
||||||
|
.fullscreen {
|
||||||
|
.bottom {
|
||||||
|
background-color: @sand-video-player-bottom-bg-color;
|
||||||
|
|
||||||
|
.infoFrame {
|
||||||
|
text-shadow: @sand-video-player-title-text-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
&.scrim::before,
|
||||||
|
&.scrim::after {
|
||||||
|
width: 100%; //1920px;
|
||||||
|
height: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
&.scrim::before {
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
&.scrim::after {
|
||||||
|
top: 0;
|
||||||
|
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// &.scrim::after {
|
||||||
|
// background: @sand-video-player-scrim-gradient-color
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== MediaPlayer.v2 Controls ==========
|
||||||
|
.controlsContainer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 20px 40px 30px;
|
||||||
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sliderContainer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.times {
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controlsButtons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playPauseBtn {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 24px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.6);
|
||||||
|
border-radius: 50%;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.backBtn {
|
||||||
|
padding: 12px 24px;
|
||||||
|
font-size: 18px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.6);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -27,7 +27,7 @@ import Overlay from './Overlay';
|
|||||||
import Media from './Media';
|
import Media from './Media';
|
||||||
import TReactPlayer from './TReactPlayer';
|
import TReactPlayer from './TReactPlayer';
|
||||||
|
|
||||||
import css from './VideoPlayer.module.less';
|
import css from './MediaPlayer.module.less';
|
||||||
|
|
||||||
const SpottableDiv = Touchable(Spottable('div'));
|
const SpottableDiv = Touchable(Spottable('div'));
|
||||||
const RootContainer = SpotlightContainerDecorator(
|
const RootContainer = SpotlightContainerDecorator(
|
||||||
@@ -203,7 +203,7 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
|
|||||||
const bufferedEnd = video.buffered.end(video.buffered.length - 1);
|
const bufferedEnd = video.buffered.end(video.buffered.length - 1);
|
||||||
const loaded = bufferedEnd / video.duration;
|
const loaded = bufferedEnd / video.duration;
|
||||||
setProportionLoaded(loaded);
|
setProportionLoaded(loaded);
|
||||||
} catch (error) {
|
} catch (err) {
|
||||||
// buffered.end() can throw if index is out of range
|
// buffered.end() can throw if index is out of range
|
||||||
setProportionLoaded(0);
|
setProportionLoaded(0);
|
||||||
}
|
}
|
||||||
@@ -294,7 +294,7 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
|
|||||||
}
|
}
|
||||||
}, [controlsVisible, hideControls, showControls]);
|
}, [controlsVisible, hideControls, showControls]);
|
||||||
|
|
||||||
// ========== Playback Control Methods ==========
|
// ========== Playback Control ==========
|
||||||
const play = useCallback(() => {
|
const play = useCallback(() => {
|
||||||
if (videoRef.current && !sourceUnavailable) {
|
if (videoRef.current && !sourceUnavailable) {
|
||||||
videoRef.current.play();
|
videoRef.current.play();
|
||||||
@@ -359,17 +359,21 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
|
|||||||
// 기본 동작은 MediaSlider 내부에서 처리
|
// 기본 동작은 MediaSlider 내부에서 처리
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// ========== Video Click Handler (Modal 전환) ==========
|
// ========== Video Click Handler ==========
|
||||||
const handleVideoClick = useCallback(() => {
|
const handleVideoClick = useCallback(() => {
|
||||||
if (isModal && onClick) {
|
// modal 상태일 때는 아무 동작도 하지 않음 (오버레이 표시 안 함)
|
||||||
// Modal 모드에서 클릭 → Fullscreen 전환
|
if (isModal) {
|
||||||
onClick();
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fullscreen 모드에서 클릭 → Controls 토글
|
// modal이 아닐 때만 컨트롤 토글
|
||||||
toggleControls();
|
toggleControls();
|
||||||
}, [isModal, onClick, toggleControls]);
|
|
||||||
|
// 외부에서 전달된 onClick 콜백 호출
|
||||||
|
if (onClick) {
|
||||||
|
onClick();
|
||||||
|
}
|
||||||
|
}, [isModal, toggleControls, onClick]);
|
||||||
|
|
||||||
// ========== Modal isPaused 동기화 ==========
|
// ========== Modal isPaused 동기화 ==========
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -390,11 +394,11 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
|
|||||||
if (videoRef.current?.paused) {
|
if (videoRef.current?.paused) {
|
||||||
play();
|
play();
|
||||||
}
|
}
|
||||||
// Fullscreen 전환 시 controls를 10초로 연장 표시
|
// Fullscreen 전환 시 controls를 자동으로 표시하지 않음
|
||||||
showControls(10000);
|
// 사용자가 클릭할 때만 표시됨
|
||||||
}
|
}
|
||||||
prevModalRef.current = isModal;
|
prevModalRef.current = isModal;
|
||||||
}, [isModal, play, showControls]);
|
}, [isModal, play]);
|
||||||
|
|
||||||
// ========== proportionLoaded 주기적 업데이트 ==========
|
// ========== proportionLoaded 주기적 업데이트 ==========
|
||||||
// TReactPlayer의 경우 buffered가 계속 변경되므로 주기적 체크 필요
|
// TReactPlayer의 경우 buffered가 계속 변경되므로 주기적 체크 필요
|
||||||
|
|||||||
@@ -174,7 +174,7 @@ export default function ProductAllSection({
|
|||||||
const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
|
const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
|
||||||
|
|
||||||
// ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략)
|
// ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략)
|
||||||
const [productVideoVersion, setProductVideoVersion] = useState(3);
|
const [productVideoVersion, setProductVideoVersion] = useState(2);
|
||||||
|
|
||||||
// const [currentHeight, setCurrentHeight] = useState(0);
|
// const [currentHeight, setCurrentHeight] = useState(0);
|
||||||
//하단부분까지 갔을때 체크용
|
//하단부분까지 갔을때 체크용
|
||||||
|
|||||||
@@ -68,11 +68,10 @@ export default function ProductVideoV2({
|
|||||||
const autoPlayTimerRef = useRef(null);
|
const autoPlayTimerRef = useRef(null);
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
|
|
||||||
// VideoPlayer DOM 이동을 위한 refs
|
// VideoPlayer refs
|
||||||
const videoPlayerWrapperRef = useRef(null);
|
const videoPlayerWrapperRef = useRef(null);
|
||||||
const normalContainerRef = useRef(null);
|
const normalContainerRef = useRef(null);
|
||||||
const fullscreenContainerRef = useRef(null);
|
const fullscreenContainerRef = useRef(null);
|
||||||
const initialRenderContainerRef = useRef(null); // React가 처음 렌더링하는 위치
|
|
||||||
|
|
||||||
// 비디오 재생 가능 여부 체크
|
// 비디오 재생 가능 여부 체크
|
||||||
const canPlayVideo = useMemo(() => {
|
const canPlayVideo = useMemo(() => {
|
||||||
@@ -316,42 +315,6 @@ export default function ProductVideoV2({
|
|||||||
};
|
};
|
||||||
}, [autoPlay, canPlayVideo, isPlaying, dispatch]);
|
}, [autoPlay, canPlayVideo, isPlaying, dispatch]);
|
||||||
|
|
||||||
// VideoPlayer wrapper를 적절한 container로 이동
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isPlaying) return;
|
|
||||||
|
|
||||||
const wrapper = videoPlayerWrapperRef.current;
|
|
||||||
const normalContainer = normalContainerRef.current;
|
|
||||||
const fullscreenContainer = fullscreenContainerRef.current;
|
|
||||||
|
|
||||||
if (!wrapper || !normalContainer || !fullscreenContainer) {
|
|
||||||
console.warn('[ProductVideoV2] Refs not ready:', {
|
|
||||||
wrapper: !!wrapper,
|
|
||||||
normalContainer: !!normalContainer,
|
|
||||||
fullscreenContainer: !!fullscreenContainer,
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 처음 재생 시작 시: 임시 컨테이너에서 적절한 위치로 이동
|
|
||||||
// 이후 전환 시: 컨테이너 간 이동
|
|
||||||
if (isFullscreen) {
|
|
||||||
// 전체화면: wrapper를 fullscreen container로 이동
|
|
||||||
if (wrapper.parentElement !== fullscreenContainer) {
|
|
||||||
fullscreenContainer.appendChild(wrapper);
|
|
||||||
fullscreenContainer.style.display = 'block';
|
|
||||||
console.log('[ProductVideoV2] Moved to fullscreen');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 일반 모드: wrapper를 normal container로 이동
|
|
||||||
if (wrapper.parentElement !== normalContainer) {
|
|
||||||
normalContainer.appendChild(wrapper);
|
|
||||||
fullscreenContainer.style.display = 'none';
|
|
||||||
console.log('[ProductVideoV2] Moved to normal');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [isFullscreen, isPlaying]);
|
|
||||||
|
|
||||||
// 컴포넌트 언마운트 시 Redux 상태 정리 및 백그라운드 비디오 재생 재개
|
// 컴포넌트 언마운트 시 Redux 상태 정리 및 백그라운드 비디오 재생 재개
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
@@ -396,8 +359,11 @@ export default function ProductVideoV2({
|
|||||||
}
|
}
|
||||||
: {};
|
: {};
|
||||||
|
|
||||||
// VideoPlayer 컴포넌트 (한 번만 생성, DOM 이동으로 위치 변경)
|
// VideoPlayer 컴포넌트 생성 함수
|
||||||
const videoPlayerElement = isPlaying ? (
|
const renderVideoPlayer = () => {
|
||||||
|
if (!isPlaying) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
ref={videoPlayerWrapperRef}
|
ref={videoPlayerWrapperRef}
|
||||||
className={`${css.videoPlayerWrapper} ${isFullscreen ? css.fullscreenPlayer : ''}`}
|
className={`${css.videoPlayerWrapper} ${isFullscreen ? css.fullscreenPlayer : ''}`}
|
||||||
@@ -443,7 +409,8 @@ export default function ProductVideoV2({
|
|||||||
)}
|
)}
|
||||||
</VideoPlayer>
|
</VideoPlayer>
|
||||||
</div>
|
</div>
|
||||||
) : null;
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -474,14 +441,16 @@ export default function ProductVideoV2({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SpottableComponent>
|
</SpottableComponent>
|
||||||
) : (
|
) : !isFullscreen ? (
|
||||||
// 일반 재생 모드: VideoPlayer가 여기에 초기 렌더링됨
|
// 일반 재생 모드: VideoPlayer를 직접 렌더링
|
||||||
<div ref={normalContainerRef} className={css.normalPlayerContainer} />
|
<div ref={normalContainerRef} className={css.normalPlayerContainer}>
|
||||||
)}
|
{renderVideoPlayer()}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
</ContainerComponent>
|
</ContainerComponent>
|
||||||
|
|
||||||
{/* 전체화면 container (Portal, 항상 body에 존재) */}
|
{/* 전체화면 container (Portal) */}
|
||||||
{ReactDOM.createPortal(
|
{isPlaying && isFullscreen && ReactDOM.createPortal(
|
||||||
<SpotlightContainer
|
<SpotlightContainer
|
||||||
spotlightRestrict="self-only"
|
spotlightRestrict="self-only"
|
||||||
spotlightId="product-video-v2-fullscreen-portal"
|
spotlightId="product-video-v2-fullscreen-portal"
|
||||||
@@ -489,25 +458,12 @@ export default function ProductVideoV2({
|
|||||||
<div
|
<div
|
||||||
ref={fullscreenContainerRef}
|
ref={fullscreenContainerRef}
|
||||||
className={css.fullscreenContainer}
|
className={css.fullscreenContainer}
|
||||||
style={{ display: 'none' }}
|
>
|
||||||
/>
|
{renderVideoPlayer()}
|
||||||
|
</div>
|
||||||
</SpotlightContainer>,
|
</SpotlightContainer>,
|
||||||
document.body
|
document.body
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 임시 렌더링 컨테이너 - React가 여기에 VideoPlayer 렌더링, useEffect가 실제 위치로 이동 */}
|
|
||||||
<div
|
|
||||||
ref={initialRenderContainerRef}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: -9999,
|
|
||||||
left: -9999,
|
|
||||||
visibility: 'hidden',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{videoPlayerElement}
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import * as PanelActions from '../../actions/panelActions';
|
|||||||
import TPanel from '../../components/TPanel/TPanel';
|
import TPanel from '../../components/TPanel/TPanel';
|
||||||
import Media from '../../components/VideoPlayer/Media';
|
import Media from '../../components/VideoPlayer/Media';
|
||||||
import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
|
import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
|
||||||
import { VideoPlayer } from '../../components/VideoPlayer/MediaPlayer';
|
import { VideoPlayer } from '../../components/VideoPlayer/MediaPlayer.v2';
|
||||||
import usePrevious from '../../hooks/usePrevious';
|
import usePrevious from '../../hooks/usePrevious';
|
||||||
import { panel_names } from '../../utils/Config';
|
import { panel_names } from '../../utils/Config';
|
||||||
import css from './MediaPanel.module.less';
|
import css from './MediaPanel.module.less';
|
||||||
|
|||||||
@@ -147,7 +147,7 @@ const VoiceInputOverlay = ({
|
|||||||
isVoiceResultMode = false,
|
isVoiceResultMode = false,
|
||||||
externalResponseText = '',
|
externalResponseText = '',
|
||||||
isExternalBubbleSearch = false,
|
isExternalBubbleSearch = false,
|
||||||
shopperHouseData = null, // 🎯 [포커스 충돌 해결] 음성 검색 결과 데이터
|
externalShopperHouseData = null, // 🎯 [포커스 충돌 해결] 외부 음성 검색 결과 데이터
|
||||||
}) => {
|
}) => {
|
||||||
if (DEBUG_MODE) {
|
if (DEBUG_MODE) {
|
||||||
console.log('🔄 [DEBUG] VoiceInputOverlay render - isVisible:', isVisible, 'mode:', mode);
|
console.log('🔄 [DEBUG] VoiceInputOverlay render - isVisible:', isVisible, 'mode:', mode);
|
||||||
|
|||||||
Reference in New Issue
Block a user