{ // Use the space bar to play and pause, instead of default action (e.g. scrolling) const { keyCode, key } = e; if (keyCode === 32 || key === ' ') { e.preventDefault(); $refs.btnPause.classList.contains('hidden') ? $refs.btnPlay.click() : $refs.btnPause.click(); }else if (key === 'ArrowDown' || key === 'ArrowUp'){ const nextEpisodeId = key === 'ArrowDown' ? {{ episode_id }} + 1 : {{ episode_id }} - 1; const lowestEpisodeId = {{ episodes }}.at(0); const highestEpisodeId = {{ episodes }}.at(-1); if(nextEpisodeId >= lowestEpisodeId && nextEpisodeId <= highestEpisodeId){ window.location.href = `./episode_${nextEpisodeId}`; } } }">
{{ dataset_info.repo_id }}
Number of samples/frames: {{ dataset_info.num_samples }}
Number of episodes: {{ dataset_info.num_episodes }}
Frames per second: {{ dataset_info.fps }}
Episodes:
{% for episode in episodes %}
Episode {{ episode }}
{% endfor %}
($refs.sidebar.classList.toggle('hidden'))" title="Toggle sidebar">
Episode {{ episode_id }}
{% for video_info in videos_info %}
{{ video_info.filename }}
{ if (video.duration) { const time = video.currentTime; const pc = (100 / video.duration) * time; $refs.slider.value = pc; dygraphTime = time; dygraphIndex = Math.floor(pc * dygraph.numRows() / 100); dygraph.setSelection(dygraphIndex, undefined, true, true); $refs.timer.textContent = formatTime(time) + ' / ' + formatTime(video.duration); updateTimeQuery(time.toFixed(2)); } }" @ended="() => { $refs.btnPlay.classList.remove('hidden'); $refs.btnPause.classList.add('hidden'); }" @loadedmetadata="() => ($refs.timer.textContent = formatTime(0) + ' / ' + formatTime(video.duration))">
Your browser does not support the video tag.
{% endfor %}
Hotkeys:
Space
to pause/unpause,
Arrow Down
to go to next episode,
Arrow Up
to go to previous episode.
{ videos.forEach(video => video.play()); $refs.btnPlay.classList.toggle('hidden'); $refs.btnPause.classList.toggle('hidden'); }">🔽
{ videos.forEach(video => video.pause()); $refs.btnPlay.classList.toggle('hidden'); $refs.btnPause.classList.toggle('hidden'); }">⏸️
(videos.forEach(video => (video.currentTime -= 5)))">⏪
(videos.forEach(video => (video.currentTime += 5)))">⏩
(videos.forEach(video => (video.currentTime = 0.0)))">↩️
{ const sliderValue = $refs.slider.value; $refs.btnPause.click(); videos.forEach(video => { const time = (video.duration * sliderValue) / 100; video.currentTime = time; }); }" />
0:00 / 0:00
{ dygraph.setSelection(dygraphIndex, undefined, true, true); dygraphTime = video.currentTime; }">
Time: 0.00s