Feature Request: Adjustable playback speed

[johnpyp]

This extension is great and generally works really well, however not being able to adjust playback speed is certainly a limitation for a lot of people. Compared to the normal twitch vod viewer, this is particularly valuable because it lets you play all the way up to "live" without refreshing the vod view or whatnot.

Because of that, I think a lot of people (or at least me) would like to use it to catch up to a vod they didn't want to miss the beginning of. I took a look at the code and tried to figure out how to implement this in a PR, but it's a large re-implementation of the player that I'm not comfortably familiar with enough to add that.

[lesderid]

I'm using this, but it's far from perfect (largely generated with Llama 3, treat as CC0):

const video = document.querySelector('#player');

let playbackRate = parseFloat(video.playbackRate);
document.addEventListener('keydown', event => {
    if (event.which === 188) { // <
        playbackRate -= 0.25;
        video.playbackRate = playbackRate.toString();
        video.play();
        showToast(`${playbackRate}x`);
    } else if (event.which === 190) { // >
        playbackRate += 0.25;
        video.playbackRate = playbackRate.toString();
        video.play();
        showToast(`${playbackRate}x`);
    }
});

function showToast(message) {
    const toast = document.createElement('div');
    toast.id = 'playback-speed-toast-container';
    toast.style.position = 'relative';
    toast.style.display = 'block';
    toast.style.top = '10%';
    toast.style.left = '50%';
    toast.style.transform = 'translate(-50%, -50%)';
    toast.style.zIndex = 1000;
    toast.style.background = '#333';
    toast.style.color = '#fff';
    toast.style.padding = '10px';
    toast.style.borderRadius = '5px';
    toast.style.boxShadow = '0px 0px 5px rgba(0,0,0,0.5)';
    toast.style.width = 'fit-content';

    const toastText = document.createElement('p');
    toast.appendChild(toastText);
    toastText.textContent = message;
    toastText.style.fontSize = '24px';

    document.getElementById('player-container').appendChild(toast);

    setTimeout(function() {
        document.getElementById('player-container').removeChild(toast);
    }, 3000);
}