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

Remove empty player placeholder

Browse Source
This commit is contained in:
human insan
2026-08-27 22:45:58 +01:00
parent 5a0e83fb4c
commit eb35a7dc26
1 changed files with 1 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -7
View File
@@ -23,10 +23,6 @@
/* player wrapper */ /* player wrapper */
.player-wrap { position: relative; background: #000; border-radius: 12px; overflow: hidden; } .player-wrap { position: relative; background: #000; border-radius: 12px; overflow: hidden; }
.player-wrap video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; } .player-wrap video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; }
.empty-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #222; background: #f1f1f1; pointer-events: none; }
.empty-state svg { width: 52px; height: 52px; fill: #222; }
.empty-state span { font-size: 14px; }
.player-wrap.has-video .empty-state { display: none; }
/* big center play */ /* big center play */
.big-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 48px; background: rgba(255,255,255,.92); color: #111; border-radius: 12px; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 12px rgba(0,0,0,.35); } .big-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 48px; background: rgba(255,255,255,.92); color: #111; border-radius: 12px; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
@@ -124,7 +120,6 @@
<div class="player-wrap paused" id="player-wrap"> <div class="player-wrap paused" id="player-wrap">
<video id="video" playsinline></video> <video id="video" playsinline></video>
<div class="empty-state" id="empty-state"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h10a2 2 0 0 1 2 2v2.2l3-1.7v9l-3-1.7V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 2v10h10V7H4zm12 4.5v2.1l1-.6v-1z"/></svg><span>Select a recording from the timeline</span></div>
<div class="big-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div> <div class="big-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
<div class="controls-bar"> <div class="controls-bar">
<div class="scrub" id="scrub"> <div class="scrub" id="scrub">
@@ -432,7 +427,7 @@
// load date // load date
async function loadDate(date) { async function loadDate(date) {
video.pause(); video.removeAttribute("src"); activeClip = null; wrap.classList.remove("has-video"); setPlaying(false); video.pause(); video.removeAttribute("src"); activeClip = null; setPlaying(false);
const r = await fetch(`/api/recordings?date=${encodeURIComponent(date)}`); const r = await fetch(`/api/recordings?date=${encodeURIComponent(date)}`);
const d = await r.json(); const d = await r.json();
clips = d.recordings; clips = d.recordings;
@@ -450,7 +445,6 @@
function playClip(clip, offset = 0) { function playClip(clip, offset = 0) {
activeClip = clip; activeClip = clip;
initialOffset = offset; initialOffset = offset;
wrap.classList.add("has-video");
document.querySelector("#clock").textContent = timeOfDay(clip.start + offset); document.querySelector("#clock").textContent = timeOfDay(clip.start + offset);
video.src = `/video?date=${dateSelect.value}&name=${encodeURIComponent(clip.name)}&offset=${offset.toFixed(3)}`; video.src = `/video?date=${dateSelect.value}&name=${encodeURIComponent(clip.name)}&offset=${offset.toFixed(3)}`;
video.play().catch(() => {}); video.play().catch(() => {});