YouTube_FastSeek

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        display: grid;
        place-items: center;
        height: 100vh;
        background-color: #a11414;
    }
    .screen {
        font: bold 48px/1.2 Arial, sans-serif;
    }
</style>
<body>
    <div class="screen">YouTube</div>
</body>
<script>
    const screenElement = document.querySelector('.screen');

    const DELAY = 500;
    const STEP = 10;
    let count = 0;
    let busy = null;


    document.addEventListener('keydown', (event) => {
        clearTimeout(busy);

        count += STEP;

        ({
            ArrowRight: () => screenElement.textContent = `Forward: >> +${count}`,
            ArrowLeft:  () => screenElement.textContent = `Backward: << -${count}`
        }[event.key]?.());

        busy = setTimeout(() => {
            count = 0;
            screenElement.textContent = 'YouTube';
        }, DELAY);
    });
</script>
</html>