hibna/player
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
hibna
2025-10-30 04:02:31 +03:00
parent 35e07b059f
commit 183cc65455
13 changed files with 265 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/VideoElement.css
+84 -180
View File
@@ -1,5 +1,6 @@
/* ============================================
VIDEO CONTAINER
VIDEO ELEMENT
Modern & Clean Design
============================================ */
.video-container {
@@ -11,10 +12,6 @@
pointer-events: none;
}
/* ============================================
VIDEO ELEMENT
============================================ */
.video-element {
width: 100%;
height: 100%;
@@ -24,143 +21,85 @@
}
/* ============================================
HIDE NATIVE MEDIA CONTROLS
HIDE NATIVE CONTROLS
============================================ */
/* Chrome/Safari/Edge */
.video-element::-webkit-media-controls {
display: none !important;
}
.video-element::-webkit-media-controls-enclosure {
display: none !important;
}
.video-element::-webkit-media-controls,
.video-element::-webkit-media-controls-enclosure,
.video-element::-webkit-media-controls-panel {
display: none !important;
}
/* Firefox */
.video-element::-moz-media-controls {
display: none !important;
}
/* ============================================
SUBTITLE STYLING - Modern & Cross-Browser
Optimized for Chromium and Firefox
SUBTITLE STYLING - Clean & Modern
Cross-browser compatible
============================================ */
/* ==================== BASE CUE STYLES ==================== */
/* All browsers - Base subtitle appearance */
/* Base subtitle appearance */
::cue {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
font-size: 1.4rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: #ffffff !important;
background-color: rgba(0, 0, 0, 0.9) !important;
padding: 0.4em 0.8em !important;
border-radius: 6px !important;
text-shadow:
0 1px 2px rgba(0, 0, 0, 1),
0 2px 8px rgba(0, 0, 0, 0.8) !important;
background-color: rgba(0, 0, 0, 0.85) !important;
padding: 0.3em 0.65em !important;
border-radius: 4px !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
white-space: pre-line !important;
}
/* Chromium specific */
.video-element::cue {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
font-size: 1.4rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: #ffffff !important;
background-color: rgba(0, 0, 0, 0.9) !important;
padding: 0.4em 0.8em !important;
border-radius: 6px !important;
text-shadow:
0 1px 2px rgba(0, 0, 0, 1),
0 2px 8px rgba(0, 0, 0, 0.8) !important;
white-space: pre-line !important;
}
/* Firefox specific - Base styles */
::-moz-cue {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
color: #ffffff !important;
background-color: rgba(0, 0, 0, 0.9) !important;
padding: 0.4em 0.8em !important;
border-radius: 6px !important;
text-shadow:
0 1px 2px rgba(0, 0, 0, 1),
0 2px 8px rgba(0, 0, 0, 0.8) !important;
white-space: pre-line !important;
}
video::-moz-cue {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
color: #ffffff !important;
background-color: rgba(0, 0, 0, 0.9) !important;
padding: 0.4em 0.8em !important;
border-radius: 6px !important;
text-shadow:
0 1px 2px rgba(0, 0, 0, 1),
0 2px 8px rgba(0, 0, 0, 0.8) !important;
background-color: rgba(0, 0, 0, 0.85) !important;
padding: 0.3em 0.65em !important;
border-radius: 4px !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
white-space: pre-line !important;
}
/* Firefox specific */
::-moz-cue,
video::-moz-cue,
.video-element::-moz-cue {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
font-size: 1.4rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: #ffffff !important;
background-color: rgba(0, 0, 0, 0.9) !important;
padding: 0.4em 0.8em !important;
border-radius: 6px !important;
text-shadow:
0 1px 2px rgba(0, 0, 0, 1),
0 2px 8px rgba(0, 0, 0, 0.8) !important;
background-color: rgba(0, 0, 0, 0.85) !important;
padding: 0.3em 0.65em !important;
border-radius: 4px !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
white-space: pre-line !important;
}
/* ==================== TEXT FORMATTING ==================== */
::cue(b), ::cue(strong) {
font-weight: 900 !important;
/* Text formatting */
::cue(b), ::cue(strong),
.video-element::cue(b), .video-element::cue(strong) {
font-weight: 700 !important;
}
::cue(i), ::cue(em) {
font-style: italic !important;
}
::cue(u) {
text-decoration: underline !important;
}
.video-element::cue(b),
.video-element::cue(strong) {
font-weight: 900 !important;
}
.video-element::cue(i),
.video-element::cue(em) {
::cue(i), ::cue(em),
.video-element::cue(i), .video-element::cue(em) {
font-style: italic !important;
}
::cue(u),
.video-element::cue(u) {
text-decoration: underline !important;
}
/* Firefox text formatting */
::-moz-cue(b), ::-moz-cue(strong) {
font-weight: 900 !important;
font-weight: 700 !important;
}
::-moz-cue(i), ::-moz-cue(em) {
@@ -171,114 +110,83 @@ video::-moz-cue {
text-decoration: underline !important;
}
/* ==================== CHROMIUM POSITIONING ==================== */
/* ============================================
SUBTITLE POSITIONING - Chromium
============================================ */
/* Container - Chromium */
.video-element::-webkit-media-text-track-container {
position: absolute !important;
bottom: var(--player-subtitle-bottom-offset) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
bottom: var(--player-subtitle-bottom) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
padding: 0 16px !important;
margin: 0 !important;
overflow: visible !important;
z-index: 10 !important;
pointer-events: none !important;
transition: bottom 0.2s ease !important;
}
/* When controls are hidden, move subtitles down */
.video-player.controls-hidden .video-element::-webkit-media-text-track-container {
bottom: var(--player-subtitle-bottom-hidden) !important;
}
/* Display wrapper - Chromium */
.video-element::-webkit-media-text-track-display {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 20px !important;
padding: 0 !important;
text-align: center !important;
}
/* ==================== FIREFOX POSITIONING ==================== */
/* Firefox - Position subtitles using video wrapper approach */
@-moz-document url-prefix() {
.video-container {
position: relative;
}
.video-element {
position: relative;
}
/* Firefox subtitle container positioning */
.video-element::cue {
position: relative;
}
}
/* Firefox - Use text track display positioning */
video::-moz-text-track-display {
position: absolute !important;
bottom: var(--player-subtitle-bottom-offset) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 0 20px !important;
margin: 0 !important;
text-align: center !important;
z-index: 10 !important;
pointer-events: none !important;
}
/* ============================================
SUBTITLE POSITIONING - Firefox
============================================ */
video::-moz-text-track-display,
.video-element::-moz-text-track-display {
position: absolute !important;
bottom: var(--player-subtitle-bottom-offset) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
bottom: var(--player-subtitle-bottom) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 0 20px !important;
padding: 0 16px !important;
margin: 0 !important;
text-align: center !important;
z-index: 10 !important;
pointer-events: none !important;
transition: bottom 0.2s ease !important;
}
/* ==================== FULLSCREEN ==================== */
/* When controls are hidden, move subtitles down */
.video-player.controls-hidden video::-moz-text-track-display,
.video-player.controls-hidden .video-element::-moz-text-track-display {
bottom: var(--player-subtitle-bottom-hidden) !important;
}
/* ============================================
FULLSCREEN
============================================ */
.video-element:fullscreen::cue,
:fullscreen .video-element::cue {
font-size: 2rem !important;
padding: 0.5em 1em !important;
font-size: 1.8rem !important;
padding: 0.4em 0.8em !important;
}
::-moz-cue:fullscreen,
@@ -287,37 +195,37 @@ video:fullscreen::-moz-cue,
:fullscreen ::-moz-cue,
:fullscreen video::-moz-cue,
:fullscreen .video-element::-moz-cue {
font-size: 2rem !important;
padding: 0.5em 1em !important;
font-size: 1.8rem !important;
padding: 0.4em 0.8em !important;
}
.video-element:fullscreen::-webkit-media-text-track-container,
:fullscreen .video-element::-webkit-media-text-track-container {
bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
bottom: calc(var(--player-subtitle-bottom) + 20px) !important;
}
video:fullscreen::-moz-text-track-display,
.video-element:fullscreen::-moz-text-track-display,
:fullscreen video::-moz-text-track-display,
:fullscreen .video-element::-moz-text-track-display {
bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
bottom: calc(var(--player-subtitle-bottom) + 20px) !important;
}
/* ==================== RESPONSIVE ==================== */
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
@media (max-width: 768px) {
::cue,
.video-element::cue,
::-moz-cue,
video::-moz-cue,
.video-element::-moz-cue {
font-size: 1.35rem !important;
font-size: 1.25rem !important;
}
.video-player {
--player-subtitle-bottom-offset: clamp(80px, 14vh, 120px);
--player-subtitle-bottom: 85px;
}
}
@@ -327,22 +235,18 @@ video:fullscreen::-moz-text-track-display,
::-moz-cue,
video::-moz-cue,
.video-element::-moz-cue {
font-size: 1.15rem !important;
padding: 0.35em 0.7em !important;
font-size: 1.1rem !important;
padding: 0.25em 0.55em !important;
}
.video-player {
--player-subtitle-bottom-offset: 80px;
--player-subtitle-bottom: 75px;
}
.video-element::-webkit-media-text-track-container {
padding: 0 12px !important;
}
.video-element::-webkit-media-text-track-display {
max-width: 92% !important;
}
video::-moz-text-track-display,
.video-element::-moz-text-track-display {
padding: 0 12px !important;
@@ -359,6 +263,6 @@ video:fullscreen::-moz-text-track-display,
}
.video-player {
--player-subtitle-bottom-offset: 60px;
--player-subtitle-bottom: 65px;
}
}