dropin

commit

d30115849d852fa55e18df505645e1d84361ff21

parent

af6cd63d4acaccf25e63428e32a5695981cf7ae4

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2025-02-10 13:04

highlight active video quality

Diffstat

2 files changed, 20 insertions, 4 deletions

diff --git a/static/style.css b/static/style.css

@@ -51,6 +51,10 @@ button {
   51    51     color: var(--fg2);
   52    52     cursor: pointer;
   53    53 }
   -1    54 button.active {
   -1    55     background-color: var(--border);
   -1    56     color: var(--fg);
   -1    57 }
   54    58 
   55    59 body {
   56    60     padding: 0;

diff --git a/static/video.js b/static/video.js

@@ -16,6 +16,9 @@ var applyQuality = function(quality, lazy) {
   16    16     if (quality !== 'auto' && (!quality || !source)) {
   17    17         return;
   18    18     }
   -1    19     Array.from(menu.querySelectorAll('button')).forEach(btn => {
   -1    20         btn.classList.toggle('active', btn.dataset.quality == quality);
   -1    21     });
   19    22     var time = video.currentTime;
   20    23     var paused = video.paused;
   21    24     if (quality === 'auto') {
@@ -35,14 +38,22 @@ var applyQuality = function(quality, lazy) {
   35    38 var createMenu = function() {
   36    39     var sources = Array.from(video.querySelectorAll('[data-quality]')).reverse();
   37    40     var ul = h('ul', {'class': 'quality'}, sources.map(source => h('li', {}, [
   38    -1         h('button', {'type': 'button', 'title': source.dataset.co2}, [source.dataset.quality]),
   -1    41         h('button', {
   -1    42             'type': 'button',
   -1    43             'title': source.dataset.co2,
   -1    44             'data-quality': source.dataset.quality,
   -1    45         }, [source.dataset.quality]),
   39    46     ])));
   40    47     ul.append(h('li', {}, [
   41    -1         h('button', {'type': 'button'}, ['auto']),
   -1    48         h('button', {
   -1    49             'type': 'button',
   -1    50             'class': 'active',
   -1    51             'data-quality': 'auto',
   -1    52         }, ['auto']),
   42    53     ]));
   43    54     ul.addEventListener('click', event => {
   44    55         if (event.target.type === 'button') {
   45    -1             var quality = event.target.textContent;
   -1    56             var quality = event.target.dataset.quality;
   46    57             localStorage.setItem('quality', quality);
   47    58             applyQuality(quality);
   48    59         }
@@ -50,5 +61,6 @@ var createMenu = function() {
   50    61     return ul;
   51    62 };
   52    63 
   -1    64 var menu = createMenu();
   -1    65 video.after(menu);
   53    66 applyQuality(localStorage.getItem('quality'), true);
   54    -1 video.after(createMenu());