[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 TReactPlayer from './TReactPlayer';
|
||||
import Video from './Video';
|
||||
import css from './VideoPlayer.module.less';
|
||||
import css from './MediaPlayer.module.less';
|
||||
|
||||
const isEnter = is('enter');
|
||||
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 TReactPlayer from './TReactPlayer';
|
||||
|
||||
import css from './VideoPlayer.module.less';
|
||||
import css from './MediaPlayer.module.less';
|
||||
|
||||
const SpottableDiv = Touchable(Spottable('div'));
|
||||
const RootContainer = SpotlightContainerDecorator(
|
||||
@@ -203,7 +203,7 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
|
||||
const bufferedEnd = video.buffered.end(video.buffered.length - 1);
|
||||
const loaded = bufferedEnd / video.duration;
|
||||
setProportionLoaded(loaded);
|
||||
} catch (error) {
|
||||
} catch (err) {
|
||||
// buffered.end() can throw if index is out of range
|
||||
setProportionLoaded(0);
|
||||
}
|
||||
@@ -294,7 +294,7 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
|
||||
}
|
||||
}, [controlsVisible, hideControls, showControls]);
|
||||
|
||||
// ========== Playback Control Methods ==========
|
||||
// ========== Playback Control ==========
|
||||
const play = useCallback(() => {
|
||||
if (videoRef.current && !sourceUnavailable) {
|
||||
videoRef.current.play();
|
||||
@@ -359,17 +359,21 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
|
||||
// 기본 동작은 MediaSlider 내부에서 처리
|
||||
}, []);
|
||||
|
||||
// ========== Video Click Handler (Modal 전환) ==========
|
||||
// ========== Video Click Handler ==========
|
||||
const handleVideoClick = useCallback(() => {
|
||||
if (isModal && onClick) {
|
||||
// Modal 모드에서 클릭 → Fullscreen 전환
|
||||
onClick();
|
||||
// modal 상태일 때는 아무 동작도 하지 않음 (오버레이 표시 안 함)
|
||||
if (isModal) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Fullscreen 모드에서 클릭 → Controls 토글
|
||||
// modal이 아닐 때만 컨트롤 토글
|
||||
toggleControls();
|
||||
}, [isModal, onClick, toggleControls]);
|
||||
|
||||
// 외부에서 전달된 onClick 콜백 호출
|
||||
if (onClick) {
|
||||
onClick();
|
||||
}
|
||||
}, [isModal, toggleControls, onClick]);
|
||||
|
||||
// ========== Modal isPaused 동기화 ==========
|
||||
useEffect(() => {
|
||||
@@ -390,11 +394,11 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
|
||||
if (videoRef.current?.paused) {
|
||||
play();
|
||||
}
|
||||
// Fullscreen 전환 시 controls를 10초로 연장 표시
|
||||
showControls(10000);
|
||||
// Fullscreen 전환 시 controls를 자동으로 표시하지 않음
|
||||
// 사용자가 클릭할 때만 표시됨
|
||||
}
|
||||
prevModalRef.current = isModal;
|
||||
}, [isModal, play, showControls]);
|
||||
}, [isModal, play]);
|
||||
|
||||
// ========== proportionLoaded 주기적 업데이트 ==========
|
||||
// TReactPlayer의 경우 buffered가 계속 변경되므로 주기적 체크 필요
|
||||
|
||||
@@ -174,7 +174,7 @@ export default function ProductAllSection({
|
||||
const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
|
||||
|
||||
// ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략)
|
||||
const [productVideoVersion, setProductVideoVersion] = useState(3);
|
||||
const [productVideoVersion, setProductVideoVersion] = useState(2);
|
||||
|
||||
// const [currentHeight, setCurrentHeight] = useState(0);
|
||||
//하단부분까지 갔을때 체크용
|
||||
|
||||
@@ -68,11 +68,10 @@ export default function ProductVideoV2({
|
||||
const autoPlayTimerRef = useRef(null);
|
||||
const containerRef = useRef(null);
|
||||
|
||||
// VideoPlayer DOM 이동을 위한 refs
|
||||
// VideoPlayer refs
|
||||
const videoPlayerWrapperRef = useRef(null);
|
||||
const normalContainerRef = useRef(null);
|
||||
const fullscreenContainerRef = useRef(null);
|
||||
const initialRenderContainerRef = useRef(null); // React가 처음 렌더링하는 위치
|
||||
|
||||
// 비디오 재생 가능 여부 체크
|
||||
const canPlayVideo = useMemo(() => {
|
||||
@@ -316,42 +315,6 @@ export default function ProductVideoV2({
|
||||
};
|
||||
}, [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 상태 정리 및 백그라운드 비디오 재생 재개
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -396,54 +359,58 @@ export default function ProductVideoV2({
|
||||
}
|
||||
: {};
|
||||
|
||||
// VideoPlayer 컴포넌트 (한 번만 생성, DOM 이동으로 위치 변경)
|
||||
const videoPlayerElement = isPlaying ? (
|
||||
<div
|
||||
ref={videoPlayerWrapperRef}
|
||||
className={`${css.videoPlayerWrapper} ${isFullscreen ? css.fullscreenPlayer : ''}`}
|
||||
onMouseMove={handleUserActivity}
|
||||
onTouchMove={handleUserActivity}
|
||||
onWheel={handleUserActivity}
|
||||
>
|
||||
<VideoPlayer
|
||||
setApiProvider={getPlayer}
|
||||
disabled={false}
|
||||
onEnded={handleVideoEnded}
|
||||
onBackButton={handleBackButton}
|
||||
noAutoPlay={false}
|
||||
autoCloseTimeout={5000}
|
||||
spotlightDisabled={!isFullscreen}
|
||||
isYoutube={isYoutube}
|
||||
src={productInfo?.prdtMediaUrl}
|
||||
reactPlayerConfig={reactPlayerSubtitleConfig}
|
||||
thumbnailUrl={thumbnailUrl}
|
||||
title={productInfo?.prdtNm}
|
||||
videoComponent={
|
||||
(typeof window === 'object' && !window.PalmSystem) || isYoutube ? TReactPlayer : Media
|
||||
}
|
||||
type="MEDIA"
|
||||
panelInfo={{ modal: false }}
|
||||
captionEnable={false}
|
||||
setIsSubtitleActive={setIsSubtitleActive}
|
||||
setCurrentTime={setCurrentTime}
|
||||
setIsVODPaused={setIsVODPaused}
|
||||
playListInfo={[]}
|
||||
selectedIndex={0}
|
||||
videoVerticalVisible={false}
|
||||
sideContentsVisible={false}
|
||||
setSideContentsVisible={setSideContentsVisible}
|
||||
handleIndicatorDownClick={handleIndicatorDownClick}
|
||||
handleIndicatorUpClick={handleIndicatorUpClick}
|
||||
// VideoPlayer 컴포넌트 생성 함수
|
||||
const renderVideoPlayer = () => {
|
||||
if (!isPlaying) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={videoPlayerWrapperRef}
|
||||
className={`${css.videoPlayerWrapper} ${isFullscreen ? css.fullscreenPlayer : ''}`}
|
||||
onMouseMove={handleUserActivity}
|
||||
onTouchMove={handleUserActivity}
|
||||
onWheel={handleUserActivity}
|
||||
>
|
||||
{typeof window === 'object' && window.PalmSystem && (
|
||||
<source src={productInfo?.prdtMediaUrl} type={videoType} />
|
||||
)}
|
||||
{productInfo?.prdtMediaSubtitlUrl && typeof window === 'object' && window.PalmSystem && (
|
||||
<track kind="subtitles" src={productInfo?.prdtMediaSubtitlUrl} default />
|
||||
)}
|
||||
</VideoPlayer>
|
||||
</div>
|
||||
) : null;
|
||||
<VideoPlayer
|
||||
setApiProvider={getPlayer}
|
||||
disabled={false}
|
||||
onEnded={handleVideoEnded}
|
||||
onBackButton={handleBackButton}
|
||||
noAutoPlay={false}
|
||||
autoCloseTimeout={5000}
|
||||
spotlightDisabled={!isFullscreen}
|
||||
isYoutube={isYoutube}
|
||||
src={productInfo?.prdtMediaUrl}
|
||||
reactPlayerConfig={reactPlayerSubtitleConfig}
|
||||
thumbnailUrl={thumbnailUrl}
|
||||
title={productInfo?.prdtNm}
|
||||
videoComponent={
|
||||
(typeof window === 'object' && !window.PalmSystem) || isYoutube ? TReactPlayer : Media
|
||||
}
|
||||
type="MEDIA"
|
||||
panelInfo={{ modal: false }}
|
||||
captionEnable={false}
|
||||
setIsSubtitleActive={setIsSubtitleActive}
|
||||
setCurrentTime={setCurrentTime}
|
||||
setIsVODPaused={setIsVODPaused}
|
||||
playListInfo={[]}
|
||||
selectedIndex={0}
|
||||
videoVerticalVisible={false}
|
||||
sideContentsVisible={false}
|
||||
setSideContentsVisible={setSideContentsVisible}
|
||||
handleIndicatorDownClick={handleIndicatorDownClick}
|
||||
handleIndicatorUpClick={handleIndicatorUpClick}
|
||||
>
|
||||
{typeof window === 'object' && window.PalmSystem && (
|
||||
<source src={productInfo?.prdtMediaUrl} type={videoType} />
|
||||
)}
|
||||
{productInfo?.prdtMediaSubtitlUrl && typeof window === 'object' && window.PalmSystem && (
|
||||
<track kind="subtitles" src={productInfo?.prdtMediaSubtitlUrl} default />
|
||||
)}
|
||||
</VideoPlayer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -474,14 +441,16 @@ export default function ProductVideoV2({
|
||||
</div>
|
||||
</div>
|
||||
</SpottableComponent>
|
||||
) : (
|
||||
// 일반 재생 모드: VideoPlayer가 여기에 초기 렌더링됨
|
||||
<div ref={normalContainerRef} className={css.normalPlayerContainer} />
|
||||
)}
|
||||
) : !isFullscreen ? (
|
||||
// 일반 재생 모드: VideoPlayer를 직접 렌더링
|
||||
<div ref={normalContainerRef} className={css.normalPlayerContainer}>
|
||||
{renderVideoPlayer()}
|
||||
</div>
|
||||
) : null}
|
||||
</ContainerComponent>
|
||||
|
||||
{/* 전체화면 container (Portal, 항상 body에 존재) */}
|
||||
{ReactDOM.createPortal(
|
||||
{/* 전체화면 container (Portal) */}
|
||||
{isPlaying && isFullscreen && ReactDOM.createPortal(
|
||||
<SpotlightContainer
|
||||
spotlightRestrict="self-only"
|
||||
spotlightId="product-video-v2-fullscreen-portal"
|
||||
@@ -489,25 +458,12 @@ export default function ProductVideoV2({
|
||||
<div
|
||||
ref={fullscreenContainerRef}
|
||||
className={css.fullscreenContainer}
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
>
|
||||
{renderVideoPlayer()}
|
||||
</div>
|
||||
</SpotlightContainer>,
|
||||
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 Media from '../../components/VideoPlayer/Media';
|
||||
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 { panel_names } from '../../utils/Config';
|
||||
import css from './MediaPanel.module.less';
|
||||
|
||||
@@ -147,7 +147,7 @@ const VoiceInputOverlay = ({
|
||||
isVoiceResultMode = false,
|
||||
externalResponseText = '',
|
||||
isExternalBubbleSearch = false,
|
||||
shopperHouseData = null, // 🎯 [포커스 충돌 해결] 음성 검색 결과 데이터
|
||||
externalShopperHouseData = null, // 🎯 [포커스 충돌 해결] 외부 음성 검색 결과 데이터
|
||||
}) => {
|
||||
if (DEBUG_MODE) {
|
||||
console.log('🔄 [DEBUG] VoiceInputOverlay render - isVisible:', isVisible, 'mode:', mode);
|
||||
|
||||
Reference in New Issue
Block a user