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

Show one archive time in player

Browse Source
This commit is contained in:
human insan
2026-08-27 23:27:48 +01:00
parent a5e689af09
commit 1be5e840af
1 changed files with 2 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -8
View File
@@ -137,9 +137,8 @@
</button> </button>
<input id="volume" type="range" min="0" max="1" step=".01" value=".8"> <input id="volume" type="range" min="0" max="1" step=".01" value=".8">
</div> </div>
<span class="time-label"><span id="time-cur">--:--:--</span> / <span id="time-dur">0:00</span></span> <span class="time-label" id="time-cur" style="color:var(--accent);font-weight:500;">--:--:--</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="time-label" id="clock" style="color:var(--accent);font-weight:500;">--:--:--</span>
</div> </div>
</div> </div>
</div> </div>
@@ -295,7 +294,7 @@
const gap = gaps.find(item => item.start > now + 1) || gaps[0]; const gap = gaps.find(item => item.start > now + 1) || gaps[0];
if (gap) { if (gap) {
video.pause(); activeClip = null; focus = gap.start; video.pause(); activeClip = null; focus = gap.start;
document.querySelector("#clock").textContent = timeOfDay(gap.start); document.querySelector("#time-cur").textContent = timeOfDay(gap.start);
drawTimeline(); drawTimeline();
} }
} }
@@ -474,9 +473,7 @@
clips = d.recordings; clips = d.recordings;
dateSelect.innerHTML = d.dates.map(day => `<option value="${day}">${day.slice(0,4)}-${day.slice(4,6)}-${day.slice(6)}</option>`).join(""); 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]; dateSelect.value = date || d.dates[0];
document.querySelector("#clock").textContent = "--:--:--";
document.querySelector("#time-cur").textContent = "--:--:--"; document.querySelector("#time-cur").textContent = "--:--:--";
document.querySelector("#time-dur").textContent = "0:00";
drawTimeline(); drawTimeline();
loadHighlights(); loadHighlights();
loadSystemHighlights(); loadSystemHighlights();
@@ -486,7 +483,6 @@
function playClip(clip, offset = 0) { function playClip(clip, offset = 0) {
activeClip = clip; activeClip = clip;
initialOffset = offset; initialOffset = offset;
document.querySelector("#clock").textContent = timeOfDay(clip.start + offset);
document.querySelector("#time-cur").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.src = `/video?date=${dateSelect.value}&name=${encodeURIComponent(clip.name)}&offset=${offset.toFixed(3)}`;
video.play().catch(() => {}); video.play().catch(() => {});
@@ -495,12 +491,10 @@
video.addEventListener("timeupdate", () => { video.addEventListener("timeupdate", () => {
if (!activeClip) return; if (!activeClip) return;
document.querySelector("#clock").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
document.querySelector("#time-cur").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime); document.querySelector("#time-cur").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
drawTimeline(); drawTimeline();
}); });
video.addEventListener("loadedmetadata", () => { video.addEventListener("loadedmetadata", () => {
document.querySelector("#time-dur").textContent = fmt(video.duration);
if (initialOffset > 0 && video.currentTime < initialOffset) video.currentTime = initialOffset; if (initialOffset > 0 && video.currentTime < initialOffset) video.currentTime = initialOffset;
}); });
video.addEventListener("ended", () => { video.addEventListener("ended", () => {