qutebrowser/misc/userscripts/view_in_mpv

#!/usr/bin/env bash
#
# Behavior:
#   Userscript for qutebrowser which views the current web page in mpv using
#   sensible mpv-flags. While viewing the page in MPV, all <video>, <embed>,
#   and <object> tags in the original page are temporarily removed. Clicking on
#   such a removed video restores the respective video.
#
#   In order to use this script, just start it using `spawn --userscript` from
#   qutebrowser. I recommend using an alias, e.g. put this in the
#   [alias]-section of qutebrowser.conf:
#
#     mpv = spawn --userscript /path/to/view_in_mpv
#
# Background:
#   Most of my machines are too slow to play youtube videos using html5, but
#   they work fine in mpv (and mpv has further advantages like video scaling,
#   etc). Of course, I don't want the video to be played (or even to be
#   downloaded) twice — in MPV and in qwebkit. So I often close the tab after
#   opening it in mpv. However, I actually want to keep the rest of the page
#   (comments and video suggestions), i.e. only the videos should disappear
#   when mpv is started. And that's precisely what the present script does.
#
# Thorsten Wißmann, 2015 (thorsten` on Libera Chat)
# Any feedback is welcome!

set -e

if [ -z "$QUTE_FIFO" ] ; then
    cat 1>&2 <<EOF
Error: $0 can not be run as a standalone script.

It is a qutebrowser userscript. In order to use it, call it using
'spawn --userscript' as described in qute://help/userscripts.html
EOF
    exit 1
fi

msg() {
    local cmd="$1"
    shift
    local msg="$*"
    if [ -z "$QUTE_FIFO" ] ; then
        echo "$cmd: $msg" >&2
    else
        echo "message-$cmd '${msg//\'/\\\'}'" >> "$QUTE_FIFO"
    fi
}

MPV_COMMAND=${MPV_COMMAND:-mpv}
# Warning: spaces in single flags are not supported
MPV_FLAGS=${MPV_FLAGS:- --force-window --quiet --keep-open=yes --ytdl}
IFS=" " read -r -a video_command <<< "$MPV_COMMAND $MPV_FLAGS"

js() {
cat <<EOF

    function descendantOfTagName(child, ancestorTagName) {
        // tells whether child has some (proper) ancestor
        // with the tag name ancestorTagName
        while (child.parentNode != null) {
            child = child.parentNode;
            if (typeof child.tagName === 'undefined') break;
            if (child.tagName.toUpperCase() == ancestorTagName.toUpperCase()) {
                return true;
            }
        }
        return false;
    }

    var App = {};

    var all_videos = [];
    all_videos.push.apply(all_videos, document.getElementsByTagName("video"));
    all_videos.push.apply(all_videos, document.getElementsByTagName("object"));
    all_videos.push.apply(all_videos, document.getElementsByTagName("embed"));
    App.backup_videos = Array();
    App.all_replacements = Array();
    for (i = 0; i < all_videos.length; i++) {
        var video = all_videos[i];
        if (descendantOfTagName(video, "object")) {
            // skip tags that are contained in an object, because we hide
            // the object anyway.
            continue;
        }

        var replacement                 = document.createElement("div");
        replacement.style.position      = "relative";
        replacement.style.zIndex        = "100003000000";
        replacement.style.fontSize      = "1rem";
        replacement.style.textAlign     = "center";
        replacement.style.verticalAlign = "middle";
        replacement.style.height        = "100%";
        replacement.style.background    = "#101010";
        replacement.style.color         = "white";
        replacement.style.border        = "4px dashed #545454";
        replacement.style.padding       = "2em";
        replacement.style.margin        = "auto";

        var p1                = document.createElement("p");
        p1.style.marginBottom = "0.5em";

        p1.appendChild(document.createTextNode("Opening page with: "));

        var span              = document.createElement("span");
        span.style.fontFamily = "monospace";
        span.textContent      = "${video_command[*]}";
        p1.appendChild(span);

        replacement.appendChild(p1);

        var p2 = document.createElement("p");

        p2.appendChild(document.createTextNode("In order to restore this particular video "));

        var a = document.createElement("a");
        a.textContent = "click here";
        a.style.fontWeight = "bold";
        a.style.color = "white";
        a.style.background = "transparent";
        a.style.cursor = "pointer";
        a.href = "#";

        var restore_video = ((i) => {
          return (() => {
            var obj = App.all_replacements[i];
            var video = App.backup_videos[i];
            obj.parentNode.replaceChild(video, obj);
        })})(i);

        a.addEventListener("click", function (e) {
          e.preventDefault();
          restore_video();
        });

        p2.appendChild(a);
        p2.appendChild(document.createTextNode("."));

        replacement.appendChild(p2);

        App.all_replacements[i] = replacement;
        App.backup_videos[i] = video;
        video.parentNode.replaceChild(replacement, video);
    }


    /** force repainting the video, thanks to:
     * http://web.archive.org/web/20151029064649/https://martinwolf.org/2014/06/10/force-repaint-of-an-element-with-javascript/
     */
    var siteHeader = document.getElementById('header');
    siteHeader.style.display='none';
    siteHeader.offsetHeight; // no need to store this anywhere, the reference is enough
    siteHeader.style.display='block';

EOF
}

printjs() {
    js | sed 's,//.*$,,' | tr '\n' ' '
}
echo "jseval -q -w main $(printjs)" >> "$QUTE_FIFO"

msg info "Opening $QUTE_URL with mpv"
"${video_command[@]}" "$@" "$QUTE_URL"