oiwmiodev/recorder-player
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify player controls

Browse Source
This commit is contained in:
human insan
2026-08-27 23:24:29 +01:00
parent e7a4d0b9b4
commit a5e689af09
1 changed files with 1 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -33
View File
@@ -30,14 +30,7 @@
.big-play svg { width: 28px; height: 28px; }
/* bottom gradient */
.controls-bar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); padding: 30px 12px 10px; }
/* scrub bar */
.scrub { position: relative; height: 4px; background: rgba(255,255,255,.2); cursor: pointer; margin-bottom: 8px; border-radius: 2px; transition: height .1s; }
.scrub:hover { height: 6px; }
.scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); border-radius: 2px; pointer-events: none; }
.scrub-hover { position: absolute; top: -28px; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; padding: 3px 7px; border-radius: 3px; pointer-events: none; white-space: nowrap; display: none; }
.scrub:hover .scrub-hover { display: block; }
.controls-bar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); padding: 18px 12px 10px; }
/* control row */
.ctrl-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
@@ -130,10 +123,6 @@
<video id="video" playsinline></video>
<div class="big-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
<div class="controls-bar">
<div class="scrub" id="scrub">
<div class="scrub-fill" id="scrub-fill"></div>
<div class="scrub-hover" id="scrub-hover">00:00</div>
</div>
<div class="ctrl-row">
<button id="btn-play" aria-label="Play">
<svg id="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
@@ -196,9 +185,6 @@
const wrap = document.querySelector("#player-wrap");
const dateSelect = document.querySelector("#date");
const timeline = document.querySelector("#timeline");
const scrub = document.querySelector("#scrub");
const scrubFill = document.querySelector("#scrub-fill");
const scrubHover = document.querySelector("#scrub-hover");
let clips = [];
let activeClip = null;
let initialOffset = 0;
@@ -373,22 +359,6 @@
loadHighlights();
};
// scrub bar
function updateScrub() {
if (!activeClip || !video.duration) { scrubFill.style.width = "0%"; return; }
scrubFill.style.width = (video.currentTime / video.duration * 100) + "%";
}
scrub.addEventListener("click", e => {
if (!activeClip || !video.duration) return;
video.currentTime = (e.offsetX / scrub.clientWidth) * video.duration;
});
scrub.addEventListener("mousemove", e => {
if (!activeClip || !video.duration) return;
const t = (e.offsetX / scrub.clientWidth) * video.duration;
scrubHover.textContent = fmt(t);
scrubHover.style.left = e.offsetX + "px";
});
// seek buttons
function seekBy(sec) {
if (!activeClip) return;
@@ -507,7 +477,6 @@
document.querySelector("#clock").textContent = "--:--:--";
document.querySelector("#time-cur").textContent = "--:--:--";
document.querySelector("#time-dur").textContent = "0:00";
scrubFill.style.width = "0%";
drawTimeline();
loadHighlights();
loadSystemHighlights();
@@ -528,7 +497,6 @@
if (!activeClip) return;
document.querySelector("#clock").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
document.querySelector("#time-cur").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
updateScrub();
drawTimeline();
});
video.addEventListener("loadedmetadata", () => {