~johanvandegriff/live.johanv.xyz

live.johanv.xyz/index.html -rw-r--r-- 5.9 KiB
c59722bdJohan Vandegriff ignored whispers 4 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html>
    <head>
        <title>live.johanv.xyz</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="/video-js.css">
        <link rel="stylesheet" type="text/css" href="/static/style.css">
    </head>
    <body>
        <div id="stream">
            <!-- <h1>live.johanv.xyz &nbsp; | &nbsp; <a target="_blank" href="https://johanv.xyz">back to johanv.xyz</a></h1> -->

            <video
                id="my-video"
                class="video-js vjs-default-skin vjs-16-9"
                controls
                preload="auto"
                width="640"
                height="264"
                poster="/static/stream.png"
                data-setup='{"fluid": true}'
            >
                <source src="/live/stream/index.m3u8" type="application/vnd.apple.mpegurl" />
                <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                </p>
            </video>
            <div id="about">
                <p>Welcome to Johan's stream at live.johanv.xyz!
                (also on <a target="_blank" href="https://www.twitch.tv/jjvantheman">twitch</a>,
                <a target="_blank" href="https://youtube.com/user/jjvantheman">youtube</a>,
                and <a target="_blank" href="https://dlive.tv/jjvantheman">dlive</a>).</p>
                <p>main site: <a target="_blank" href="https://johanv.xyz">johanv.xyz</a>
                | old streams: <a target="_blank" href="https://odysee.com/@johanv">LBRY</a>
                | stream announcements:
                <a target="_blank" href="https://fosstodon.org/@johanv">mastodon</a></p>
            </div>

            <audio id="notification">
                <source src="/static/notification.ogg" type="audio/mpeg">
            </audio>
        </div>
        <div id="chat">
            <ul id="messages"></ul>
            <form action="">
                name: <input id="name" autocomplete="off" />
                <input type="checkbox" id="check" name="check" value="yes">
                <label for="check">sound?</label><br/>
                <input id="m" autocomplete="off" autofocus />
                <button>send</button>
            </form>
        </div>

        <script src="/socket.io/socket.io.js"></script>
        <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
        <script src="/jquery.js"></script>
        <!-- <script src="https://github.com/zenozeng/color-hash/raw/master/dist/color-hash.js"></script> -->
        <script src="/color-hash.js"></script>
        <!-- <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" /> -->
        <script src="/video.js"></script>

        <script>
            function getRandomName() {
                const adjs = ["autumn", "hidden", "bitter", "misty", "silent", "empty", "dry", "dark", "summer", "icy", "delicate", "quiet", "white", "cool", "spring", "winter", "patient", "twilight", "dawn", "crimson", "wispy", "weathered", "blue", "billowing", "broken", "cold", "damp", "falling", "frosty", "green", "long", "late", "lingering", "bold", "little", "morning", "muddy", "old", "red", "rough", "still", "small", "sparkling", "throbbing", "shy", "wandering", "withered", "wild", "black", "young", "holy", "solitary", "fragrant", "aged", "snowy", "proud", "floral", "restless", "divine", "polished", "ancient", "purple", "lively", "nameless"];
                const nouns = ["waterfall", "river", "breeze", "moon", "rain", "wind", "sea", "morning", "snow", "lake", "sunset", "pine", "shadow", "leaf", "dawn", "glitter", "forest", "hill", "cloud", "meadow", "sun", "glade", "bird", "brook", "butterfly", "bush", "dew", "dust", "field", "fire", "flower", "firefly", "feather", "grass", "haze", "mountain", "night", "pond", "darkness", "snowflake", "silence", "sound", "sky", "shape", "surf", "thunder", "violet", "water", "wildflower", "wave", "water", "resonance", "sun", "wood", "dream", "cherry", "tree", "fog", "frost", "voice", "paper", "frog", "smoke", "star"];
                return (
                    adjs[Math.floor(Math.random() * adjs.length)] +
                    "_" +
                    nouns[Math.floor(Math.random() * nouns.length)]
                );
            }

            var colorHash = new ColorHash({lightness: [0.5,0.6,0.7,0.8], saturation: [0.6,0.7,0.8,0.9,1]});

            $(function () {
                $('#name').val(getRandomName());
                var socket = io();
                $('form').submit(function(e) {
                    e.preventDefault();
                    var text = $('#m').val();
                    if (text != '') {
                        socket.emit('chat message', {"name": $('#name').val(), "text": text});
                    }
                    $('#m').val('');
                    return false;
                });
                socket.on('chat message', function(msg) {
                    $('#messages').append($('<li>')
                        .append($('<span>').text(msg.name)
                            .css('color', colorHash.hex(msg.name+"...."))
                            .css('font-weight', 'bold'))
                        .append($('<span>').text(": " + msg.text))
                    );
                    
                    //scroll to the most recent message
                    $("#messages").scrollTop($("#messages")[0].scrollHeight);

                    //play sound if checkbox is checked
                    if (document.getElementById("check").checked) {
                        document.getElementById("notification").pause();
                        document.getElementById("notification").currentTime = 0;
                        document.getElementById("notification").play()
                    }
                });
            });
        </script>
    </body>
</html>