←back to thread

1901 points l2silver | 1 comments | | HN request time: 1.465s | source

Maybe you've created your own AR program for wearables that shows the definition of a word when you highlight it IRL, or you've built a personal calendar app for your family to display on a monitor in the kitchen. Whatever it is, I'd love to hear it.
1. qwerty3344 ◴[] No.35745523[source]
OOOH I've got one - I made a short script that lets me play any video on any site at arbitrary speed (speed controlled by arrow keys).

//@ts-check window.kVideoSpeed = 1; window.initialVolume = 1;

NUMPAD_3 = "99" NUMPAD_2 = "98" NUMPAD_6 = "102" NUMPAD_5 = "101"

UP_ARROW = "38" DOWN_ARROW = "40"

let timeoutId = null; document.onkeydown = (e) => { if (!document.querySelectorAll("video").length) { // no-op for pages with no videos return; } window.initialVolume = document.querySelector('video')?.volume || 1

    let myDiv = getOrMakeDiv();
    e = e || window.event;
    let KEYCODE = e.keyCode;

    // NOTE: can't use left/right b/c those go forward/back 10s on some sites
    if ((KEYCODE == UP_ARROW || KEYCODE == NUMPAD_6) && window.kVideoSpeed < 4) {
        // up arrow
        window.kVideoSpeed += 0.5;
        myDiv.textContent = window.kVideoSpeed;
    } else if ((KEYCODE == DOWN_ARROW || KEYCODE == NUMPAD_5) && window.kVideoSpeed > 1) {
        // down arrow
        window.kVideoSpeed -= 0.5;
        myDiv.textContent = window.kVideoSpeed;
    }
    for (let el of document.querySelectorAll("video")) {
        el.playbackRate = window.kVideoSpeed;

        // prevent volume from changing
        setTimeout(() => {
            el.volume = window.initialVolume
        }, 100)
    }
    if (timeoutId) {
        clearTimeout(timeoutId);
    }
    // set timeout to remove div
    timeoutId = setTimeout(() => { myDiv.remove() }, 1000);
}; function getOrMakeDiv() { if (!document.getElementById("myDiv")) {

        let div = document.createElement("div");
        div.id = "myDiv";
        // add styles to div
        div.style.padding = "8px";
        div.style.textAlign = "center";
        div.style.fontSize = "16px";
        div.style.position = "fixed";
        div.style.fontWeight = "600";
        div.style.border = "1px solid yellow";
        div.style.color = "white";
        div.style.backgroundColor = "black";
        div.style.zIndex = "999999";
        // insert div at the top of the body
        if (document.fullscreenElement) {
            document.fullscreenElement.prepend(div, document.fullscreenElement.firstChild)
        }
        else {
            document.body.insertBefore(div, document.body.firstChild);
        }
    }
    return document.getElementById("myDiv");
}