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

Improve player controls on small screens

Browse Source
This commit is contained in:
human insan
2026-08-27 23:18:09 +01:00
parent 22fef80a5f
commit 9cee32e894
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+11 -7
View File
@@ -40,7 +40,7 @@
.scrub:hover .scrub-hover { display: block; }
/* control row */
.ctrl-row { display: flex; align-items: center; gap: 8px; }
.ctrl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctrl-row button { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; border-radius: 50%; display: grid; place-items: center; }
.ctrl-row button:hover { background: rgba(255,255,255,.15); }
.ctrl-row svg { width: 22px; height: 22px; fill: currentColor; }
@@ -96,7 +96,10 @@
@media (max-width: 600px) {
.page { padding: 8px; }
.ctrl-row svg { width: 18px; height: 18px; }
.ctrl-row { gap: 4px; }
.ctrl-row button { min-width: 36px; min-height: 34px; }
.ctrl-row svg { width: 20px; height: 20px; }
.time-label { font-size: 11px; }
.hours span:nth-child(even) { display: none; }
}
</style>
@@ -134,8 +137,8 @@
<svg id="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
<svg id="icon-pause" viewBox="0 0 24 24" style="display:none"><path d="M6 19h4V5H6zm8-14v14h4V5z"/></svg>
</button>
<button id="btn-back" aria-label="Back 10s"><svg viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/><text x="10" y="16" font-size="7" fill="currentColor" text-anchor="middle" font-family="sans-serif">10</text></svg></button>
<button id="btn-fwd" aria-label="Forward 10s"><svg viewBox="0 0 24 24"><path d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/><text x="14" y="16" font-size="7" fill="currentColor" text-anchor="middle" font-family="sans-serif">10</text></svg></button>
<button id="btn-back" aria-label="Back 10 seconds"><svg viewBox="0 0 24 24"><path d="M12 5V2L7 7l5 5V8a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z"/><text x="12" y="15" font-size="6.5" fill="currentColor" text-anchor="middle" font-family="sans-serif" font-weight="bold">10</text></svg></button>
<button id="btn-fwd" aria-label="Forward 10 seconds"><svg viewBox="0 0 24 24"><path d="M12 5V2l5 5-5 5V8a5 5 0 1 0 5 5h2a7 7 0 1 1-7-7z"/><text x="12" y="15" font-size="6.5" fill="currentColor" text-anchor="middle" font-family="sans-serif" font-weight="bold">10</text></svg></button>
<div class="vol-wrap">
<button id="btn-vol" aria-label="Volume">
<svg id="icon-vol-on" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8.3v7.4a4.5 4.5 0 0 0 2.5-3.7zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1A9 9 0 0 0 14 3.2z"/></svg>
@@ -143,7 +146,7 @@
</button>
<input id="volume" type="range" min="0" max="1" step=".01" value=".8">
</div>
<span class="time-label"><span id="time-cur">0:00</span> / <span id="time-dur">0:00</span></span>
<span class="time-label"><span id="time-cur">--:--:--</span> / <span id="time-dur">0:00</span></span>
<span class="spacer"></span>
<span class="time-label" id="clock" style="color:var(--accent);font-weight:500;">--:--:--</span>
</div>
@@ -500,7 +503,7 @@
dateSelect.innerHTML = d.dates.map(day => `<option value="${day}">${day.slice(0,4)}-${day.slice(4,6)}-${day.slice(6)}</option>`).join("");
dateSelect.value = date || d.dates[0];
document.querySelector("#clock").textContent = "--:--:--";
document.querySelector("#time-cur").textContent = "0:00";
document.querySelector("#time-cur").textContent = "--:--:--";
document.querySelector("#time-dur").textContent = "0:00";
scrubFill.style.width = "0%";
drawTimeline();
@@ -513,6 +516,7 @@
activeClip = clip;
initialOffset = offset;
document.querySelector("#clock").textContent = timeOfDay(clip.start + offset);
document.querySelector("#time-cur").textContent = timeOfDay(clip.start + offset);
video.src = `/video?date=${dateSelect.value}&name=${encodeURIComponent(clip.name)}&offset=${offset.toFixed(3)}`;
video.play().catch(() => {});
drawTimeline();
@@ -521,7 +525,7 @@
video.addEventListener("timeupdate", () => {
if (!activeClip) return;
document.querySelector("#clock").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
document.querySelector("#time-cur").textContent = fmt(video.currentTime);
document.querySelector("#time-cur").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
updateScrub();
drawTimeline();
});