From ff82690d3c127ac37905de878263596b3186854b Mon Sep 17 00:00:00 2001 From: Kevin Gibbons Date: Mon, 24 Oct 2022 06:11:00 -0700 Subject: [PATCH] add keyboard shortcuts to video player (#342) * add keyboard shortcuts to video player * fix modal on the inline player --- tubearchivist/home/templates/home/video.html | 8 +- tubearchivist/static/css/style.css | 17 +++ tubearchivist/static/script.js | 145 ++++++++++++++++++- 3 files changed, 160 insertions(+), 10 deletions(-) diff --git a/tubearchivist/home/templates/home/video.html b/tubearchivist/home/templates/home/video.html index b7af89cb..705f6c6a 100644 --- a/tubearchivist/home/templates/home/video.html +++ b/tubearchivist/home/templates/home/video.html @@ -2,7 +2,9 @@ {% block content %} {% load static %} {% load humanize %} -
+
+
+
{% if video.sponsorblock.is_enabled %} @@ -67,7 +69,7 @@

thumbs-down: {{ video.stats.dislike_count|intcomma }}

{% endif %} {% if video.stats.average_rating %} -

Rating: +

Rating: {% for star in video.stats.average_rating %} {{ star }} {% endfor %} @@ -90,7 +92,7 @@

Playlist [{{ playlist_item.playlist_meta.current_idx|add:"1" }}]: {{ playlist_item.playlist_meta.playlist_name }}

-
+
{% if playlist_item.playlist_previous %} diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css index 7a3872e3..4d73cf18 100644 --- a/tubearchivist/static/css/style.css +++ b/tubearchivist/static/css/style.css @@ -388,6 +388,7 @@ button:hover { display: grid; align-content: space-evenly; height: 100vh; + position: relative; /* needed for modal */ } .notifications { @@ -744,6 +745,22 @@ video:-webkit-full-screen { /* video page */ .video-main { margin: 1rem 0; + position: relative; /* needed for modal */ +} + +.video-modal { + position: absolute; + z-index: 1; + top: 20%; + width: 100%; + text-align: center; +} + +.video-modal-text { + background: rgba(0,0,0,.5); + color: #eeeeee; + font-size: 1.3em; + display: none; } .video-main video { diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js index a1205d68..d680b06e 100644 --- a/tubearchivist/static/script.js +++ b/tubearchivist/static/script.js @@ -1,4 +1,3 @@ - function sortChange(sortValue) { var payload = JSON.stringify({'sort_order': sortValue}); sendPost(payload); @@ -411,7 +410,7 @@ function createPlayer(button) { } else { var watchStatusIndicator = createWatchStatusIndicator(videoId, "unwatched"); } - + var playerStats = `
views icon${videoViews}`; if (videoData.data.stats.like_count) { @@ -426,6 +425,7 @@ function createPlayer(button) { const markup = `
+
${videoTag}
${sponsorBlockElements} @@ -444,13 +444,14 @@ function createPlayer(button) { `; const divPlayer = document.getElementById("player"); divPlayer.innerHTML = markup; + recordTextTrackChanges(); } // Add video tag to video page when passed a video id, function loaded on page load `video.html (115-117)` function insertVideoTag(videoData, videoProgress) { var videoTag = createVideoTag(videoData, videoProgress); - var videoMain = document.getElementsByClassName("video-main"); - videoMain[0].innerHTML = videoTag; + var videoMain = document.querySelector(".video-main"); + videoMain.innerHTML += videoTag; } // Generates a video tag with subtitles when passed videoData and videoProgress. @@ -793,8 +794,8 @@ function setProgressBar(videoId, currentTime, duration) { } // progressBar = document.getElementById("progress-" + videoId); - - + + } // multi search form @@ -1046,7 +1047,7 @@ function createFulltext(fullText) {

${subtitle_start} - ${subtitle_end}

-

${subtitleLine}

+

${subtitleLine}

${channelName}

${videoTitle}

 @@ -1173,3 +1174,133 @@ function animate(elementId, animationClass) { toAnimate.classList.remove(animationClass); } } + +// keep track of changes to the subtitles list made with the native UI +// needed so that when toggling subtitles with the shortcut we go to the last selected one, not the first one +addEventListener('DOMContentLoaded', recordTextTrackChanges); + +let lastSeenTextTrack = 0; +function recordTextTrackChanges() { + let player = getVideoPlayer(); + if (player == null) { + return; + } + player.textTracks.addEventListener('change', () => { + let active = [...player.textTracks].findIndex(x => x.mode === 'showing'); + if (active !== -1) { + lastSeenTextTrack = active; + } + }); +} + +// keyboard shortcuts for the video player +document.addEventListener('keydown', doShortcut); + +let modalHideTimeout = -1; +function showModal(html, duration) { + let player = getVideoPlayer(); + let modal = document.querySelector('.video-modal-text'); + modal.innerHTML = html; + modal.style.display = 'initial'; + clearTimeout(modalHideTimeout); + modalHideTimeout = setTimeout(() => { modal.style.display = 'none'; }, duration); +} + +let videoSpeeds = [.25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3]; +function doShortcut(e) { + if (!(e.target instanceof HTMLElement)) { + return; + } + let target = e.target; + let targetName = target.nodeName.toLowerCase(); + if (targetName === 'textarea' || targetName === 'input' || targetName === 'select' || target.isContentEditable) { + return; + } + if (e.altKey || e.ctrlKey || e.metaKey) { + return; + } + let player = getVideoPlayer(); + if (player == null) { + // not on the video page + return; + } + switch (e.key) { + case 'c': { + // toggle captions + let tracks = [...player.textTracks]; + if (tracks.length === 0) { + break; + } + let active = tracks.find(x => x.mode === 'showing'); + if (active != null) { + active.mode = 'disabled'; + } else { + tracks[lastSeenTextTrack].mode = 'showing'; + } + break; + } + case 'm': { + player.muted = !player.muted; + break; + } + case 'ArrowLeft': { + if (targetName === 'video') { + // hitting arrows while the video is focused will use the built-in skip + break; + } + showModal('- 5 seconds', 500); + player.currentTime -= 5; + break; + } + case 'ArrowRight': { + if (targetName === 'video') { + // hitting space while the video is focused will use the built-in skip + break; + } + showModal('+ 5 seconds', 500); + player.currentTime += 5; + break; + } + case '<': + case '>': { + // change speed + let currentSpeedIdx = videoSpeeds.findIndex(s => s >= player.playbackRate); + if (currentSpeedIdx === -1) { + // handle the case where the user manually set the speed above our max speed + currentSpeedIdx = videoSpeeds.length - 1; + } + let newSpeedIdx = e.key === '<' ? Math.max(0, currentSpeedIdx - 1) : Math.min(videoSpeeds.length - 1, currentSpeedIdx + 1); + let newSpeed = videoSpeeds[newSpeedIdx]; + player.playbackRate = newSpeed; + showModal(newSpeed + 'x', 500); + break; + } + case ' ': { + if (targetName === 'video') { + // hitting space while the video is focused will toggle it anyway + break; + } + e.preventDefault(); + if (player.paused) { + player.play(); + } else { + player.pause(); + } + break; + } + case '?': { + showModal(` + + + + + + + + + `, 3000); + break; + } + } +} +
Show help?
Toggle mutem
Toggle subtitles (if available)c
Increase speed>
Decrease speed<
Back 5 seconds←
Forward 5 seconds→