mpvc-web

#!/usr/bin/env sh
#
# @file mpvc-web
# @description mpvc web, A hack to remotely control mpvc from web/http
# @author gmt4 <gmt4 at github.com> (c) Copyright 2022 GPLv2+
# @url github.com/gmt4/mpvc
# SPDX-License-Identifier: GPL-2.0-or-later
#

# REMEMBER This is a hack, DISCLAIMER * Use at Your Own Risk *
# A security hole in itself, with many open man-holes, evident ones are marked with XXX
#
# The sole reason for its existence is to mimic mpvc-tui when is not available,
# like, controlling a remotely running an mpv, accessing from a client without a CLI,
# like a laptop, tablet, or phone.

PROGNAME=${0##*/}
PROGDIR=${0%/*}
PROGVERSION="v1.6"
PROGAUTHOR=gmt4
PROGURL="https://github.com/gmt4/mpvc"
#PROGINFO="A hack to remotely control mpvc from web # DISCLAIMER * Use at Your Own Risk *"

set -euf

mpvc_web_defaults()
{
    MPVC=$(command -v mpvc)

    XDG_CONFIG_HOME=${XDG_CONFIG_HOME:-"$HOME/.config"}
    MPVC_CONFIG_DIR="${MPVC_CONFIG_DIR:-$XDG_CONFIG_HOME/mpvc}"
    MPVC_CONFIG="${MPVC_CONFIG:-$MPVC_CONFIG_DIR/mpvc.conf}"

    MPVC_WEB_HOSTNAME=${MPVC_WEB_HOSTNAME:-$(hostname)}
    MPVC_WEB_HOST=${MPVC_WEB_HOST:-localhost}
    MPVC_WEB_PORT=${MPVC_WEB_PORT:-8000}
    MPVC_WEB_ROOT=${MPVC_WEB_ROOT:-/tmp/mpvc-web/root}
    MPVC_WEB_SSL_PORT=${MPVC_WEB_SSL_PORT:-8443}
    MPVC_WEB_SSL_PEM=${MPVC_WEB_SSL_PEM:-$MPVC_WEB_ROOT/../ssl.pem}
    MPVC_WEB_SSL_PID=${MPVC_WEB_SSL_PID:-$MPVC_WEB_ROOT/../ssl.pid}
    MPVC_WEB_SSL_ENABLE=${MPVC_WEB_SSL_ENABLE:-}
    MPVC_WEB_SSL_VERIFY=${MPVC_WEB_SSL_VERIFY:-0}
    MPVC_WEB_ARCHIVE_ENABLE=${MPVC_WEB_ARCHIVE_ENABLE:-}
    MPVC_WEB_CAST_URL=${MPVC_WEB_CAST_URL:-}
    MPVC_WEB_HTML_THEME=${MPVC_WEB_HTML_THEME:-}
    MPVC_WEB_HTML_REFRESH=${MPVC_WEB_HTML_REFRESH:-}
    MPVC_WEB_CSS_STYLE=${MPVC_WEB_CSS_STYLE:-}

    # accesskey keyboard shortcuts
    MPVC_WEB_SHORTCUT_REFRESH=${MPVC_WEB_SHORTCUT_REFRESH:-accesskey=m}
    MPVC_WEB_SHORTCUT_CLI=${MPVC_WEB_SHORTCUT_CLI:-accesskey=i}
    MPVC_WEB_SHORTCUT_APPLY=${MPVC_WEB_SHORTCUT_APPLY:-accesskey=a}
    MPVC_WEB_SHORTCUT_TRACK=${MPVC_WEB_SHORTCUT_TRACK:-accesskey=t}
    MPVC_WEB_SHORTCUT_PREV=${MPVC_WEB_SHORTCUT_PREV:-accesskey=p}
    MPVC_WEB_SHORTCUT_NEXT=${MPVC_WEB_SHORTCUT_NEXT:-accesskey=n}
    MPVC_WEB_SHORTCUT_SEEK=${MPVC_WEB_SHORTCUT_SEEK:-accesskey=s}
    MPVC_WEB_SHORTCUT_VOL=${MPVC_WEB_SHORTCUT_VOL:-accesskey=v}
    MPVC_WEB_SHORTCUT_KILL=${MPVC_WEB_SHORTCUT_KILL:-accesskey=k}
    MPVC_WEB_SHORTCUT_PAUSE=${MPVC_WEB_SHORTCUT_PAUSE:-accesskey=p}
    MPVC_WEB_SHORTCUT_EQUALIZER=${MPVC_WEB_SHORTCUT_EQUALIZER:-accesskey=e}
    MPVC_WEB_SHORTCUT_ARCHIVE=${MPVC_WEB_SHORTCUT_ARCHIVE:-accesskey=f}
    MPVC_WEB_SHORTCUT_MUTE=${MPVC_WEB_SHORTCUT_MUTE:-accesskey=g}
    MPVC_WEB_SHORTCUT_YTSEARCH=${MPVC_WEB_SHORTCUT_YTSEARCH:-accesskey=y}
    MPVC_WEB_SHORTCUT_HELP=${MPVC_WEB_SHORTCUT_HELP:-accesskey=h}

    MPVC_WEB_CGI="$MPVC_WEB_ROOT/cgi-bin/mpvc"

    # if present load user config
    if [ -r "$MPVC_CONFIG" ]; then
        . "$MPVC_CONFIG"
    fi
}

mpvc_web_config()
{
    if ! command -v mpvc >/dev/null; then
        echo "$PROGNAME: Error: No mpvc found, install to continue."
        exit
    fi
    if ! command -v python3 >/dev/null; then
        echo "$PROGNAME: Error: No python3 found, install to continue."
        exit
    fi
    if ! command -v socat >/dev/null; then
        echo "$PROGNAME: Warning: No socat found, install to support SSL."
    fi
}

mpvc_web_style()
{
    cat <<-EOF
:root { --body-font-family: monospace,monospace; --body-color: #222; --body-background: #fff; --link-color: #a0a; }
@media (max-width: 768px) { :root { --body-font-size: 0.95em; } }
@media (min-width: 768px) { :root { --body-font-size: 1.00em; } }

@media (prefers-color-scheme: light) { html { filter: invert(0.0);  } :root { } }
@media (prefers-color-scheme: dark)  { html { filter: invert(0.85); } :root { } }

html   { font-family: var(--body-font-family); font-size: var(--body-font-size); }
body   { font-family: var(--body-font-family); font-size: var(--body-font-size); color: var(--body-color); background: var(--body-background); }
select { width: 95%; font-family: var(--body-font-family); font-size: var(--body-font-size); }
input  { width: 95%; font-family: var(--body-font-family); font-size: var(--body-font-size); }
ul     { padding: 0rem 0.4rem; }
a      { padding: 0.04rem 0.00rem; color: var(--link-color); }

$(
    case "${MPVC_WEB_HTML_THEME:-}" in
    light) echo "html { filter: invert(0.0);  }" ;;
    dark)  echo "html { filter: invert(0.85); }" ;;
    esac
)
EOF
}

mpvc_web_select_form()
{
    cmd="$1"
    arg="${2:-}"

    echo "<form action=/ method=get>"
    echo "<span title=$arg ></span>"
    echo "<select name=cli $arg onchange=this.form.submit() >"
    awk -v cmd="$cmd" '
        BEGIN  { print "<option value=\"\" selected># "cmd }
        NR > 0 { gsub("\"",""); print "<option value=\""cmd" "$0"\">"$0 }
    '
    echo '</select>'
    echo '</form>'
}

mpvc_web_yts()
{
cat <<EOF
            <input type="text" placeholder="mpvc yts-search" name="mpvc-yts" list="mpvc-yts-datalist" title="mpvc yts-search" ${MPVC_WEB_SHORTCUT_YTSEARCH} onkeydown="mpvcOnKeyDownEvent(event,this)">
            <!-- Support input+datalist is buggy in mobile, hence the select below (https://bugzilla.mozilla.org/show_bug.cgi?id=1535985)-->
            <form action=/ method=get>
                <select name=cli id="mpvc-yts-select" placeholder="mpvc yts-select" width=1 size=1 onchange=this.form.submit() >
                <option value="" selected># mpvc-yts-select
                </select>
            </form>
            <datalist id="mpvc-yts-datalist">
            </datalist>
EOF
}

mpvc_web_cli()
{
cat <<EOF
        <form action="/" method="get">
            <input type="text" id="cli" name="cli" ${MPVC_WEB_SHORTCUT_CLI} autocomplete="on" placeholder="mpvc cli ${MPVC_WEB_DEV:-(off)}" title="mpvc cli" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }">
        </form>
EOF
}

mpvc_web_index_js()
{
    cat <<EOF
function toggleLinkColor()
{
    var linkcolor = document.getElementById("link-color").value;
    document.styleSheets[0].rules[0].style.setProperty("--link-color", linkcolor);
}

function toggleColorScheme(mode="dark")
{
    var i = 0;
    var mode = window.localStorage.getItem("prefers-color-scheme");
    mode = (mode != "light") ? "light" : "dark";
    window.localStorage.setItem("prefers-color-scheme", mode);

    for (i = document.styleSheets[0].rules.length - 1; i >= 0; i--)
    {
        rule = document.styleSheets[0].rules[i]
        if (!("media" in rule))
            continue;
        rule = document.styleSheets[0].rules[i].media;
        if (! rule.mediaText.includes("prefers-color-scheme"))
            continue;
        switch (mode) {
        case "light":
            rule.appendMedium("original-prefers-color-scheme");
            if (rule.mediaText.includes("light")) rule.deleteMedium("(prefers-color-scheme: light)");
            if (rule.mediaText.includes("dark")) rule.deleteMedium("(prefers-color-scheme: dark)");
            break;
        case "dark":
            rule.appendMedium("(prefers-color-scheme: light)");
            rule.appendMedium("(prefers-color-scheme: dark)");
            if (rule.mediaText.includes("original")) rule.deleteMedium("original-prefers-color-scheme");
            break;
        default:
            rule.appendMedium("(prefers-color-scheme: dark)");
            if (rule.mediaText.includes("light")) rule.deleteMedium("(prefers-color-scheme: light)");
            if (rule.mediaText.includes("original")) rule.deleteMedium("original-prefers-color-scheme");
        }
        break;
    }
}

function mpvcOnKeyDownEvent(event, that)
{
    var url='';
    var select=document.getElementById('mpvc-yts-select');
    var datalist=document.getElementById('mpvc-yts-datalist');
    if (event.keyCode == 13)
    {
        if (! that.value.startsWith('http'))
        {
            url='/cgi-bin/mpvc?mpvc-fzf+-z+';
            if (that.value !== '')
                url='/cgi-bin/mpvc?mpvc-fzf+-s+'+that.value;
            data=mpvcHttpGet(url);

            lines=data.split('\n');
            for (i in lines)
            {
                var line=lines[i];
                var url=line.split(' ');
                datalist.innerHTML += '<option value="'+url[0]+'">'+line+'</option>';;
                select.innerHTML += '<option value="mpvc add '+url[0]+'">'+line+'</option>';;
            }
        }
        else
        {
            var yturl=that.value.split(' ')[0]
            var url='/cgi-bin/mpvc?mpvc+add+'+yturl
            data=mpvcHttpGet(url);
        }
    }
}

function mpvcHttpGet(url)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", url, false);
    xmlHttp.send(null);
    return xmlHttp.responseText;
}
EOF
}

mpvc_web_cgi() # /cgi-bin/mpvc
{
    cat <<EOF
#!/bin/sh
set -euf
mpvc_warn()  { echo "\$@" >&2; }
mpvc_strip() { sed '/\x1b\[7m/ { s|\x1b\[7m||; s| |+|; }; s|\x1b\[0m||;'; }
mpvc_cmd()   { echo "Content-Type: text/plain"; echo; $MPVC "\$@"; }
mpvc_plain() { echo "Content-Type: text/plain"; echo; echo "\$@"; }
mpvc_html()  { echo "Content-Type: text/html";  echo; echo "\$@"; }
mpvc_json()  { echo "Content-Type: application/json";  echo; echo "\$@"; }
mpvc_redir() { mpvc_html '<meta http-equiv=refresh content="0;url='\$1'" />'; }
mpvc_split() { for i in \$@; do echo "\$i"; done; }

main()
{
    QUERY_STRING="\${QUERY_STRING:-\$@}"
    if [ -n "\${USER:-}" ]; then
        PATH=/usr/local/bin:/usr/bin:/bin
        env -i PATH="\$PATH" HOME="\$HOME" TERM="\$TERM" QUERY_STRING="\${QUERY_STRING:-}" "\$0" "\$@";
        exit;
    fi
    case "\$QUERY_STRING" in
        now-short)              mpvc_redir "\$($MPVC-fzf now short)" ;;
        lyrics)                 mpvc_redir "\$($MPVC-fzf Lyrics '')" ;;
        filename)               mpvc_redir "\$($MPVC filename current full)" ;;
        metadata)               mpvc_plain "\$($MPVC metadata)" ;;
        thumbnail_url)          mpvc_redir "\$($MPVC ytqueryfield thumbnail_url \$($MPVC filename current full))" ;;

        mpvc+status)            mpvc_cmd status | mpvc_strip ;;
        mpvc+playlist)          mpvc_cmd playlist | mpvc_strip ;;
        mpvc+fullplaylist)      mpvc_cmd fullplaylist | mpvc_strip ;;
        mpvc+rawplaylist)       mpvc_cmd saven | mpvc_strip ;;
        mpvc+chapter-list)      mpvc_cmd chapter-list | mpvc_strip ;;
        mpvc+chapter-list-nr)   mpvc_cmd chapter-list-nr | mpvc_strip ;;
        mpvc+chapter-list-full) mpvc_cmd chapter-list-full | mpvc_strip ;;

        mpvc-fzf[+\ ]*)         mpvc_plain "\$($PROGDIR/\$(mpvc_split "\$@"))" ;;
        mpvc-equalizer[+\ ]*)   mpvc_plain "\$($PROGDIR/\$(mpvc_split "\$@"))" ;;
        mpvc[+\ ]*)             mpvc_plain "\$($PROGDIR/\$(mpvc_split "\$@"))" ;;
    esac
}
main "\$@"
EOF
}

mpvc_web_help()
{
    cat <<EOF
$PROGNAME HTML accesskeys shortcuts:\n
\n
- $MPVC_WEB_SHORTCUT_HELP: this help\n
- $MPVC_WEB_SHORTCUT_APPLY: select stash\n
- $MPVC_WEB_SHORTCUT_CLI: select cli\n
- $MPVC_WEB_SHORTCUT_EQUALIZER: select equalizer\n
- $MPVC_WEB_SHORTCUT_REFRESH: refresh\n
- $MPVC_WEB_SHORTCUT_KILL: select kill\n
- $MPVC_WEB_SHORTCUT_NEXT: next track\n
- $MPVC_WEB_SHORTCUT_PREV: prev track\n
- $MPVC_WEB_SHORTCUT_TRACK: select track\n
- $MPVC_WEB_SHORTCUT_SEEK: select seek\n
- $MPVC_WEB_SHORTCUT_PAUSE: select pause\n
- $MPVC_WEB_SHORTCUT_VOL: select volume\n
- $MPVC_WEB_SHORTCUT_MUTE: select mute\n
- $MPVC_WEB_SHORTCUT_ARCHIVE: select archive\n
\n
*For more, Read The Source Luke!\n
EOF
}

mpvc_web_index()
{
    cat <<EOF
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8" />
    <meta name="generator" content="gmt4 mpvc-web" />
    <meta name="author" content="gmt4 <gmt4 at github.com> (c) Copyright 2022" />
    <meta name="description" content="mpvc-web, a mpvc-tui for the web" />

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store" />

    $(if [ -n "$MPVC_WEB_HTML_REFRESH" ]; then echo "<meta http-equiv=refresh content=$MPVC_WEB_HTML_REFRESH;url=.> ⟳ ${MPVC_WEB_HTML_REFRESH}s"; fi)
    <link rel="IconFile" href="apple-touch-icon.svg" sizes="64x64">
    <link rel="apple-touch-icon" href="apple-touch-icon.svg">
    <title> 🎧$MPVC_WEB_HOSTNAME mpvc</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript">
        $(mpvc_web_index_js)
    </script>
    </head>

    <body>
        [
            <span>🎧</span>
            <a href="." name="top" ${MPVC_WEB_SHORTCUT_REFRESH}>$PROGNAME</a>
            <a href="#status">#st</a>
            <a href="#mpvc-web-playlist">#ls</a>
            <a title="#now" href="/cgi-bin/mpvc?now-short">#n</a>
            <a title="#extras" href="/extras/">#x</a>
            $([ -n "$MPVC_WEB_ARCHIVE_ENABLE" ] && echo '<a title="#arc" href="ytdl-archive" >#a</a>'; )
            $([ -n "$MPVC_WEB_CAST_URL" ] && echo "<a title=#cast href=$MPVC_WEB_CAST_URL>#c</a>"; )
        ]
        <hr>
        <ul>
        <li>
            $(mpvc stash list | awk 'NR>1{print $NF}' | mpvc tac | mpvc_web_select_form "mpvc -q stash apply" "${MPVC_WEB_SHORTCUT_APPLY}")
        </li>
        <li>
            mpvc
            <!--<a href="?cmd=mpvc status">status</a>-->
            <a href="?cmd=mpvc toggle" ${MPVC_WEB_SHORTCUT_PAUSE}>pause</a>
            <a href="?cmd=mpvc mpv">mpv</a>
            <a href="?cmd=mpvc kill" ${MPVC_WEB_SHORTCUT_KILL}>kill</a>
            <a href="?cmd=mpvc clear">clear</a>
            <a href="?cmd=mpvc vol -5" title="vol down">v-</a>
            <a href="?cmd=mpvc vol +5" title="vol up">v+</a>
        </li>
        <li>
            mpvc
            <a href="?cmd=mpvc play">play</a>
            <a href="?cmd=mpvc --mute" ${MPVC_WEB_SHORTCUT_MUTE}>mute</a>
            <a href="?cmd=mpvc start 0">start</a>
            <a href="?cmd=mpvc start $">end</a>
            <a href="?cmd=mpvc prev" title="prev" ${MPVC_WEB_SHORTCUT_PREV}>tr-</a>
            <a href="?cmd=mpvc next" title="next" ${MPVC_WEB_SHORTCUT_NEXT}>tr+</a>
        </li>
        <li>
            mpvc
            <a href="?cmd=mpvc repeat">repeat</a>
            <a href="?cmd=mpvc single">single</a>
            <a href="?cmd=mpvc replay">replay</a>
            <a href="?cmd=mpvc cmd ab-loop">abloop</a>
            <!--
            <a href="?cmd=mpvc seek -10" title="seek fwd">s-</a>
            <a href="?cmd=mpvc seek +10" title="seek bwd">s+</a>
            -->
        </li>
        <li>
            mpvc
            <a href="?cmd=mpvc shuffle">shuffle</a>
            <a href="?cmd=mpvc unshuffle">unshuffle</a>
            <a href="?cmd=mpvc playrand">rand</a>
        </li>
        <li>
            mpvc
            <a href="?cmd=mpvc togglev" title="togglev">video</a>
            <a href="?cmd=mpvc aspect"  title="togglea">aspect</a>
            <a href="?cmd=mpvc togglew" title="togglew">win</a>
            <a href="?cmd=mpvc togglef" title="togglef">fs</a>
            <a href="?cmd=mpvc togglei" title="togglei">idle</a>
        </li>
        <li>
            mpvc
            <a href="?cmd=mpvc cplayrand">crand</a>
            <a href="?cmd=mpvc creplay">creplay</a>
            <a href="?cmd=mpvc cloop">cloop</a>
            <a href="?cmd=mpvc cprev" title="cprev">ch-</a>
            <a href="?cmd=mpvc cnext" title="cnext">ch+</a>
        </li>
        <li>
            $(printf " -30\n-20\n-10\n-5\n0\n+5\n+10\n+20\n+30" | mpvc_web_select_form "mpvc -q vol" "${MPVC_WEB_SHORTCUT_VOL}")
        </li>
    </ul>

    <hr>
    <ul>
        <details>
        <summary>mpvc extra (toggle open close)</summary>
            <li>
            mpvc theme
                <a href="#" title="theme 2" onclick="document.body.style.WebkitFilter='invert(0.2)';">t2</a>
                <a href="#" title="theme 4" onclick="document.body.style.WebkitFilter='invert(0.4)';">t4</a>
                <a href="#" title="theme 4" onclick="document.body.style.WebkitFilter='invert(0.6)';">t6</a>
                <a href="#" title="theme 8" onclick="document.body.style.WebkitFilter='invert(0.8)';">t8</a>
                <a href="#" title="toggle" onclick="toggleColorScheme()">tg</a>
                <a href="." title="reset">rst</a>
                <input type="color" id="link-color" name="link-color" onchange="toggleLinkColor()" style="width: 1em !important; height: 1em; padding:0 0;">
            </li>
            <li>
                $([ -n "${MPVC_WEB_DEV:-}" ] && mpvc_web_cli)
            </li>
            <li>
                $([ -n "${MPVC_WEB_DEV:-}" ] && mpvc_web_yts)
            </li>
            <li>
                $(mpvc-equalizer preset | awk '/ #preset:/ {print $NF}' | mpvc_web_select_form "mpvc-equalizer load" "${MPVC_WEB_SHORTCUT_EQUALIZER}")
            </li>
            <li>
                $(printf " -15\n-10\n-5\n-2\n-1\n0\n+1\n+2\n+5\n+10\n+15" | mpvc_web_select_form "mpvc -q track" "${MPVC_WEB_SHORTCUT_TRACK}")
            </li>
            <li>
                $(printf " -30\n-20\n-10\n-5\n-1\n0\n+1\n+5\n+10\n+20\n+30" | mpvc_web_select_form "mpvc -q cplay")
            </li>
            <li>
                $(printf " -120\n-60\n-25\n+25\n+60\n+120" | mpvc_web_select_form "mpvc -q seek" "${MPVC_WEB_SHORTCUT_SEEK}")
            </li>
            <li>
                $(if [ -n "$MPVC_WEB_ARCHIVE_ENABLE" ]; then find "ytdl-archive/" | awk -F/ '{print "https://"$NF}' | mpvc_web_select_form "mpvc -q add" "${MPVC_WEB_SHORTCUT_ARCHIVE}"; fi)
            </li>
        </details>
    </ul>

        [
            <a href="#mpvc-web-status" name="mpvc-web-status">Status</a>
            <a href="/cgi-bin/mpvc?metadata">#me</a>
            <a href="/cgi-bin/mpvc?thumbnail_url">#thumb</a>
            <a href="/cgi-bin/mpvc?lyrics">#lyric</a>
            <a href="/cgi-bin/mpvc?filename">#url</a>
        ]
        <hr>
        <iframe name="mpvc-status" width="100%" height="100%" frameborder="0" allowtransparency="true" src="/cgi-bin/mpvc?mpvc+status" ></iframe>
        [
            <a href="#mpvc-web-playlist" name="mpvc-web-playlist">Playlist</a>
            <a href="#mpvc-web-fullplaylist" name="mpvc-web-fullplaylist">#full</a>
            <a href="#mpvc-web-rawplaylist" name="mpvc-web-rawplaylist">#raw</a>
            <a href="#mpvc-web-chapter-list-nr" name="mpvc-web-chapter-list-nr">#chapters</a>
        ]
        <hr>
        <div style="display:flex">
        <iframe name="mpvc-playlist" width="100%" frameborder="0" allowtransparency="true" style="margin:auto;" src="/cgi-bin/mpvc?mpvc+playlist" ></iframe>
        <script type="text/javascript">
        var pl = document.getElementsByName('mpvc-playlist')[0];
        switch (window.location.hash) {
        case '#mpvc-web-playlist':           { pl.src='/cgi-bin/mpvc?mpvc+playlist'; break; }
        case '#mpvc-web-fullplaylist':       { pl.src='/cgi-bin/mpvc?mpvc+fullplaylist'; break; }
        case '#mpvc-web-rawplaylist':        { pl.src='/cgi-bin/mpvc?mpvc+rawplaylist'; break; }
        case '#mpvc-web-chapter-list-nr':    { pl.src='/cgi-bin/mpvc?mpvc+chapter-list-nr'; break; }
        case '#mpvc-web-chapter-list-full':  { pl.src='/cgi-bin/mpvc?mpvc+chapter-list-full'; break; }
        }
        </script>
        </div>
        <hr>
        <a href="$PROGURL">$PROGNAME</a>
        <a href="$PROGURL">$PROGVERSION</a>
        <a href="${PROGURL%/*}">$PROGAUTHOR</a> (c) 2024
        <a href="javascript:alert('$(mpvc_web_help)')" title="help" ${MPVC_WEB_SHORTCUT_HELP}>/h</a>
        <a href="#top" title="top">up</a>
    </body>
</html>
EOF
}

mpvc_web_favicon()
{
    # <svg viewBox="0 0 192 80" xmlns="http://www.w3.org/2000/svg" > <text x="0" y="30" font-size="45px" >🎧</text> </svg> <!-- mpvc -->
    cat <<EOF
EOF
}

mpvc_web_https()
{
    MPVC_WEB_LISTEN="bind=$MPVC_WEB_HOST,cert=$MPVC_WEB_SSL_PEM,cafile=$MPVC_WEB_SSL_PEM,verify=$MPVC_WEB_SSL_VERIFY"

    socat "OPENSSL-LISTEN:$MPVC_WEB_SSL_PORT,$MPVC_WEB_LISTEN,reuseaddr,fork" "TCP:$MPVC_WEB_HOST:$MPVC_WEB_PORT" &
    #echo "$$" > "$MPVC_WEB_SSL_PID"
}

mpvc_web_setup()
{
    mpvc_web_config
    echo "# $PROGNAME $PROGVERSION running (beta version: might contain bugs!) SSL=${MPVC_WEB_SSL_ENABLE}"

    (
        # setup http webroot
        echo "# $PROGNAME Setup $MPVC_WEB_ROOT"
        mkdir -p "$MPVC_WEB_ROOT" || return
        mkdir -p "$MPVC_WEB_ROOT/cgi-bin/" || return
        mkdir -p "$MPVC_WEB_ROOT/extras/" || return
        cd "$MPVC_WEB_ROOT" || return
        chmod -R u+w "${MPVC_WEB_ROOT%/*}"

        # setup streamable mpvc archive if requested
        if [ -n "${MPVC_WEB_ARCHIVE_ENABLE}" ]; then
            echo "# $PROGNAME Setup $MPVC_WEB_ROOT/ytdl-archive/"
            ln -f -s "$HOME/.config/mpvc/ytdl-archive/" "$MPVC_WEB_ROOT/"
        fi

        mpvc_web_index > "$MPVC_WEB_ROOT/index.html"
        mpvc_web_favicon > "$MPVC_WEB_ROOT/favicon.ico"
        mpvc_web_favicon > "$MPVC_WEB_ROOT/apple-touch-icon.svg"
        if [ -n "$MPVC_WEB_CSS_STYLE" ]; then
            cat "$MPVC_WEB_CSS_STYLE" > "$MPVC_WEB_ROOT/style.css"
        else
            mpvc_web_style > "$MPVC_WEB_ROOT/style.css"
        fi
        mpvc_web_cgi > "$MPVC_WEB_CGI"
        chmod u+x "$MPVC_WEB_CGI"

        # setup https socat if requested
        if [ -n "${MPVC_WEB_SSL_ENABLE}" ]; then
            echo "# $PROGNAME Setup $MPVC_WEB_ROOT socat: $MPVC_WEB_HOST:$MPVC_WEB_SSL_PORT"
            if [ ! -e "$MPVC_WEB_SSL_PEM" ]; then
                MPVC_WEB_SSL_SUBJ="/C=CN/ST=ST/O=$PROGNAME/CN=$PROGNAME-$MPVC_WEB_HOSTNAME"
                openssl req -new -x509 -days 365 -nodes -out "$MPVC_WEB_SSL_PEM" -keyout "$MPVC_WEB_SSL_PEM" -subj "$MPVC_WEB_SSL_SUBJ"
                openssl pkcs12 -export -passout "pass:" -in "$MPVC_WEB_SSL_PEM" -out "$MPVC_WEB_SSL_PEM.p12"
            fi
            if [ -s "$MPVC_WEB_SSL_PID" ]; then
                kill "$(cat "$MPVC_WEB_SSL_PID")" || true
            fi
            mpvc_web_https
        fi

        if [ -n "${MPVC_WEB_DEV:-}" ]; then
            echo "# $PROGNAME Setup development/cli features (MPVC_WEB_DEV=$MPVC_WEB_DEV is set)"
        else
            echo "# $PROGNAME Setup development/cli features (MPVC_WEB_DEV=${MPVC_WEB_DEV:-} is not set)"
        fi

        chmod -R a-w "$MPVC_WEB_ROOT/"
    )
}

mpvc_web()
{
    mpvc_web_setup
    (
        cd "$MPVC_WEB_ROOT" || return

        # XXX handle cli commands, rewrite this mess
        python3 -u -m http.server --cgi --bind "$MPVC_WEB_HOST" "$MPVC_WEB_PORT" "$@" 2>&1 |
            awk -v mpvcbin="$MPVC_WEB_CGI" \
        '
        function mpvcsys(cmd) { system(mpvcbin" "cmd); }
        function mpvc(cmd)    { mpvcsys("mpvc -q "cmd); }
        function httpreq(r)
        {
            sub("HTTP.*$", "", r);
            sub("^.*GET \\/\\?cli=(mpvc-)", "mpvc-", r);
            sub("^.*GET \\/\\?cli=(mpvc)\\+", "mpvc ", r);
            gsub("^("mpvcbin") [^a-zA-Z0-9 ]*", "", r);
            gsub("\\+", " ", r);
            gsub("%22", "\"", r);
            gsub("%2B", "+", r);
            gsub("%23", "#", r);
            gsub("%2F", "/", r);
            gsub("%3A", ":", r);
            return r
        }

        BEGIN { quiet=1 }

        /GET \/\?cmd=mpvc%20mpv/          { mpvc("mpv") }
        /GET \/\?cmd=mpvc%20clear/        { mpvc("clear") }
        /GET \/\?cmd=mpvc%20kill/         { mpvc("kill") }
        /GET \/\?cmd=mpvc%20vol%20-5/     { mpvc("vol -5") }
        /GET \/\?cmd=mpvc%20vol%20\+5/    { mpvc("vol +5") }

        /GET \/\?cmd=mpvc%20--mute/       { mpvc("--mute") }
        /GET \/\?cmd=mpvc%20toggle/       { mpvc("toggle") }
        /GET \/\?cmd=mpvc%20play/         { mpvc("play") }
        /GET \/\?cmd=mpvc%20start%200/    { mpvc("start 0") }
        /GET \/\?cmd=mpvc%20start%20$/    { mpvc("start $") }
        /GET \/\?cmd=mpvc%20stop/         { mpvc("stop") }
        /GET \/\?cmd=mpvc%20prev/         { mpvc("prev") }
        /GET \/\?cmd=mpvc%20next/         { mpvc("next") }
        /GET \/\?cmd=mpvc%20playrand/     { mpvc("playrand") }

        /GET \/\?cmd=mpvc%20shuffle/      { mpvc("shuffle") }
        /GET \/\?cmd=mpvc%20unshuffle/    { mpvc("unshuffle") }

        /GET \/\?cmd=mpvc%20repeat/       { mpvc("repeat") }
        /GET \/\?cmd=mpvc%20single/       { mpvc("single") }
        /GET \/\?cmd=mpvc%20replay/       { mpvc("replay") }

        /GET \/\?cmd=mpvc%20togglev/      { mpvc("togglev") }
        /GET \/\?cmd=mpvc%20aspect/       { mpvc("aspect") }
        /GET \/\?cmd=mpvc%20togglew/      { mpvc("togglew") }
        /GET \/\?cmd=mpvc%20togglef/      { mpvc("togglef") }
        /GET \/\?cmd=mpvc%20togglei/      { mpvc("togglei") }

        /GET \/\?cmd=mpvc%20cstart/       { mpvc("cplay 0") }
        /GET \/\?cmd=mpvc%20creplay/      { mpvc("chapter-replay") }
        /GET \/\?cmd=mpvc%20cloop/        { mpvc("chapter-loop") }
        /GET \/\?cmd=mpvc%20cprev/        { mpvc("chapter-prev") }
        /GET \/\?cmd=mpvc%20cnext/        { mpvc("chapter-next") }
        /GET \/\?cmd=mpvc%20cplayrand/    { mpvc("cplayrand") }

        /GET \/\?cli=mpvc/                {
            r=httpreq($0)
            if (ENVIRON["MPVC_WEB_DEV"] && match(r, "^mpvc"))
            {
                #print(r)
                mpvcsys(r) # XXX
            }
        }

        { print $0 }
        '
    )
}

optflags="ha:b:c:C:d:p:P:r:R:s:S:t:T:"
usage()
{
    cat <<EOF
usage: $PROGNAME -[$optflags] args # @version $PROGVERSION (c) $PROGAUTHOR $PROGURL
  -c : Set $PROGNAME HTTP server command: [start,stop] (*required)
  -b : Set $PROGNAME HTTP server bind address (default $MPVC_WEB_HOST)
  -p : Set $PROGNAME HTTP server port (default $MPVC_WEB_PORT)
  -r : Set $PROGNAME HTTP server root dir (default $MPVC_WEB_ROOT)
  -R : Set $PROGNAME HTTP server HTML refresh (default $MPVC_WEB_HTML_REFRESH)
  -s : Set $PROGNAME HTTP server SSL/TLS (default $MPVC_WEB_SSL_ENABLE)
  -a : Set $PROGNAME HTTP server to include ytdl-archive/ (default $MPVC_WEB_ARCHIVE_ENABLE)
*tips: If unsure where to begin, run: $PROGNAME -p 8000 -c start # serves @ http://localhost:8000
EOF
    exit
}

main()
{
    [ $# -lt 0 ] && usage

    mpvc_web_defaults

    while getopts "$optflags" flag;
    do
        case "$flag" in
        h) usage ;;
        c) MPVC_WEB_CMD="$OPTARG"; ;;
        C) MPVC_WEB_CAST_URL="$OPTARG"; ;;
        d) MPVC_WEB_DEV="$OPTARG"; ;;
        b) MPVC_WEB_HOST="$OPTARG" ;;
        p) MPVC_WEB_PORT="$OPTARG" ;;
        P) MPVC_WEB_SSL_PORT="$OPTARG" ;;
        r) MPVC_WEB_ROOT="$OPTARG" ;;
        R) MPVC_WEB_HTML_REFRESH="$OPTARG" ;;
        s) MPVC_WEB_SSL_ENABLE="$OPTARG" ;;
        S) MPVC_WEB_SSL_PEM="$OPTARG" ;;
        t) MPVC_WEB_HTML_THEME="$OPTARG"  ;;
        T) MPVC_WEB_CSS_STYLE="$OPTARG"  ;;
        a) MPVC_WEB_ARCHIVE_ENABLE="$OPTARG" ;;
        *) usage ;;
        esac
    done
    shift $((OPTIND - 1))

    case "${MPVC_WEB_CMD:-}" in
    status) ps auxww | grep "$PROGNAME" ;;
    start)  mpvc_web "$@";;
    stop)   pkill -f "$PROGNAME" ;;
    *)      usage ;;
    esac
}

main "$@"