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

Add SRT/FLV/RTMP support and update documentation

Browse Source 
Introduced Python scripts for SRT subtitle checking and fixing, and added comprehensive documentation covering advanced features such as protocol detection, subtitle/audio/quality management, keyboard shortcuts, and touch gestures. Updated local settings to allow new build and Python commands, added TypeScript definitions for FLV, and implemented RTMP/FLV protocol support in the player. Removed CHANGELOG.md and made various improvements to styles and example app.
This commit is contained in:
hibna
2025-11-03 02:35:56 +03:00
parent 42a12dfa8b
commit 36f83ff72c
26 changed files with 3833 additions and 1212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/controls/CenterPlayButton.css
+12 -12
View File
@@ -9,8 +9,8 @@
}
.center-play-button {
width: 96px;
height: 96px;
width: 72px;
height: 72px;
border-radius: var(--player-radius-full);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
var(--player-primary);
@@ -21,7 +21,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(239, 68, 68, 0.28);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(239, 68, 68, 0.2);
transition: background-color var(--player-transition-fast) ease,
color var(--player-transition-fast) ease, transform var(--player-transition-fast) ease,
box-shadow var(--player-transition-normal) ease;
@@ -30,8 +30,8 @@
.center-play-button:hover {
background-color: var(--player-primary-hover);
transform: scale(1.05);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(239, 68, 68, 0.32);
transform: scale(1.08);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(239, 68, 68, 0.25);
}
.center-play-button:active {
@@ -45,19 +45,19 @@
}
.center-play-button svg {
width: 44px;
height: 44px;
margin-left: 4px;
width: 36px;
height: 36px;
margin-left: 3px;
}
@media (max-width: 640px) {
.center-play-button {
width: 74px;
height: 74px;
width: 64px;
height: 64px;
}
.center-play-button svg {
width: 34px;
height: 34px;
width: 30px;
height: 30px;
}
}
src/components/controls/ProgressBar.css
+8 -4
View File
@@ -13,7 +13,7 @@
height: 3px;
background-color: var(--player-progress-bg);
border-radius: var(--player-radius-full);
overflow: hidden;
overflow: visible;
transition: height var(--player-transition-fast) ease;
}
@@ -27,6 +27,7 @@
inset: 0;
width: 0;
background-color: var(--player-progress-buffered);
border-radius: var(--player-radius-full);
transition: width 0.12s ease;
}
@@ -35,6 +36,7 @@
inset: 0;
width: 0;
background-color: var(--player-primary);
border-radius: var(--player-radius-full);
display: flex;
align-items: center;
justify-content: flex-end;
@@ -46,14 +48,16 @@
height: 12px;
border-radius: 50%;
background-color: var(--player-primary);
transform: scale(0);
transition: transform var(--player-transition-fast) ease;
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
transform: scale(1);
transition: transform var(--player-transition-fast) ease, box-shadow var(--player-transition-fast) ease;
margin-right: -6px;
}
.progress-bar:hover .progress-handle,
.progress-bar.seeking .progress-handle {
transform: scale(1);
transform: scale(1.15);
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}
.progress-tooltip {
src/components/controls/VolumeControl.css
+20 -2
View File
@@ -11,7 +11,7 @@
height: 4px;
background-color: var(--player-progress-bg);
border-radius: var(--player-radius-full);
overflow: hidden;
overflow: visible;
opacity: 0;
transition: width var(--player-transition-normal) ease,
opacity var(--player-transition-normal) ease;
@@ -51,6 +51,14 @@
background-color: var(--player-primary);
border: none;
margin-top: -4px;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.volume-slider:hover::-webkit-slider-thumb {
transform: scale(1.15);
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}
.volume-slider::-moz-range-track {
@@ -64,11 +72,21 @@
border-radius: 50%;
background-color: var(--player-primary);
border: none;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.volume-slider:hover::-moz-range-thumb {
transform: scale(1.15);
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}
.volume-slider-fill {
position: absolute;
inset: 0;
top: 0;
left: 0;
bottom: 0;
width: 0;
background: var(--player-primary);
border-radius: var(--player-radius-full);