🕐 커밋 시간: 2025. 12. 16. 16:07:17 📊 변경 통계: • 총 파일: 11개 • 추가: +94줄 • 삭제: -90줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/mediaActions.js ~ com.twin.app.shoptime/src/actions/panelActions.js ~ com.twin.app.shoptime/src/actions/playActions.js ~ com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js ~ com.twin.app.shoptime/src/reducers/panelReducer.js ~ com.twin.app.shoptime/src/utils/lodashFpEx.js ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.module.less ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • 공통 유틸리티 함수 최적화 • 소규모 기능 개선 • 코드 정리 및 최적화 • 모듈 구조 개선
75 lines
1.5 KiB
Plaintext
75 lines
1.5 KiB
Plaintext
@import "../../style/CommonStyle.module.less";
|
|
@import "../../style/utils.module.less";
|
|
|
|
@videoBackgroundColor: black;
|
|
.videoContainer {
|
|
position: absolute;
|
|
background-color: @videoBackgroundColor;
|
|
z-index: 21;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
&.modal {
|
|
/* Modal 모드: DetailPanel(z-index:21) 위에 표시 */
|
|
width: 1px;
|
|
height: 1px;
|
|
left: -1px;
|
|
top: -1px;
|
|
pointer-events: none;
|
|
z-index: 22; /* DetailPanel보다 위 */
|
|
background-color: @videoBackgroundColor;
|
|
overflow: visible;
|
|
|
|
/* video element가 컨테이너를 넘지 않도록 크기 제한 */
|
|
video {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain; /* 높이 기준으로 맞추고 좌우는 잘림 */
|
|
}
|
|
}
|
|
|
|
&.modal-minimized,
|
|
&.background {
|
|
/* 백그라운드 모드: 맨 아래 */
|
|
width: 1px;
|
|
height: 1px;
|
|
left: -1px;
|
|
top: -1px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
background-color: @videoBackgroundColor;
|
|
overflow: visible;
|
|
}
|
|
|
|
&.background-visible {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
left: -1px;
|
|
top: -1px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
background-color: @videoBackgroundColor;
|
|
overflow: visible;
|
|
}
|
|
|
|
&.hideSubtitle {
|
|
video::cue {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.videoPlayerWrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.youtubeSafe {
|
|
:global(.react-player),
|
|
:global(.react-player iframe) {
|
|
pointer-events: none !important;
|
|
}
|
|
}
|