diff --git a/assets/css/player.css b/assets/css/player.css index 9cb400ad..60f3ce73 100644 --- a/assets/css/player.css +++ b/assets/css/player.css @@ -71,8 +71,10 @@ padding-top: 2em } -.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {height: 5px; -margin-bottom: 10px;} +.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control { + height: 5px; + margin-bottom: 10px; +} ul.vjs-menu-content::-webkit-scrollbar { display: none; @@ -86,6 +88,7 @@ ul.vjs-menu-content::-webkit-scrollbar { background-color: rgba(0, 0, 0, 0.75) !important; border-radius: 9px !important; padding: 5px !important; + line-height: 1.5 !important; } .vjs-play-control, diff --git a/assets/js/player.js b/assets/js/player.js index f32c9b56..920a5470 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -5,6 +5,9 @@ var video_data = JSON.parse(document.getElementById('video_data').textContent); var options = { liveui: true, playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0], + fontPercent: [0.5, 0.75, 1.25, 1.5, 1.75, 2, 3, 4], + windowOpacity: ['0', '0.5', '1'], + textOpacity: ['0.5', '1'], controlBar: { children: [ 'playToggle', @@ -585,6 +588,13 @@ const toggle_captions = (function () { }; })(); +// For real-time updates to captions (if currently showing) +function update_captions() { + if (document.body.querySelector('.vjs-text-track-cue')) { + toggle_captions(); toggle_captions(); + } +} + function toggle_fullscreen() { player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen(); } @@ -597,6 +607,34 @@ function increase_playback_rate(steps) { player.playbackRate(options.playbackRates[newIndex]); } +function increase_caption_size(steps) { + const maxIndex = options.fontPercent.length - 1; + const fontPercent = player.textTrackSettings.getValues().fontPercent || 1.25; + const curIndex = options.fontPercent.indexOf(fontPercent); + let newIndex = curIndex + steps; + newIndex = helpers.clamp(newIndex, 0, maxIndex); + player.textTrackSettings.setValues({ fontPercent: options.fontPercent[newIndex] }); + update_captions(); +} + +function toggle_caption_window() { + const numOptions = options.windowOpacity.length; + const windowOpacity = player.textTrackSettings.getValues().windowOpacity || '0'; + const curIndex = options.windowOpacity.indexOf(windowOpacity); + const newIndex = (curIndex + 1) % numOptions; + player.textTrackSettings.setValues({ windowOpacity: options.windowOpacity[newIndex] }); + update_captions(); +} + +function toggle_caption_opacity() { + const numOptions = options.textOpacity.length; + const textOpacity = player.textTrackSettings.getValues().textOpacity || '1'; + const curIndex = options.textOpacity.indexOf(textOpacity); + const newIndex = (curIndex + 1) % numOptions; + player.textTrackSettings.setValues({ textOpacity: options.textOpacity[newIndex] }); + update_captions(); +} + addEventListener('keydown', function (e) { if (e.target.tagName.toLowerCase() === 'input') { // Ignore input when focus is on certain elements, e.g. form fields. @@ -692,6 +730,12 @@ addEventListener('keydown', function (e) { case '>': action = increase_playback_rate.bind(this, 1); break; case '<': action = increase_playback_rate.bind(this, -1); break; + + case '=': action = increase_caption_size.bind(this, 1); break; + case '-': action = increase_caption_size.bind(this, -1); break; + + case 'w': action = toggle_caption_window; break; + case 'o': action = toggle_caption_opacity; break; default: console.info('Unhandled key down event: %s:', decoratedKey, e);