~johanvandegriff/live.johanv.xyz

ref: 62e891a3b546f6d3fb6ee47b4195214fabe3ad3f live.johanv.xyz/index.html -rw-r--r-- 7.4 KiB
62e891a3Johan Vandegriff moved stream settings to optional private file /srv/private-nginx.conf 1 year, 7 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<html>
    <head>
        <title>live.johanv.xyz</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="/video-js.css" rel="stylesheet" />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                /* font: 13px Helvetica, Arial;
                margin:40px auto;
                max-width:650px;
                padding:0 10px; */
                line-height:1.6;
                font-size:18px;
                background-color: #333;
                color:white;
            }
            form {
                background: #aaa;
                padding: 3px;
                position: fixed;
                bottom: 0;
                width: 100%;
            }
            #m {
                border: 0;
                padding: 10px;
                width: 20%;
                margin-right: 0.5%;
            }
            form button {
                width: 6%;
                background: rgb(130, 224, 255);
                border: none;
                padding: 10px;
            }
            #messages {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            #messages li {
                padding: 5px 10px;
                color: white;
            }
            /* #messages li:nth-child(odd) {
                background: #eee;
            } */
            #stream {
                width: 70%;
                height: 100%;
                padding-right: 1em; top: 0;
                float: left;
                position: fixed;
                background: #333;
                color: white;
            }
            #chat { width: 30%;
                height: 100%;
                float: right;
                right: 0;
                top: 0;
                position: fixed;
                background: #111;
            }
            a:link {
                color: DeepSkyBlue;
                background-color: transparent;
            }

            a:visited {
                color: Magenta;
                background-color: transparent;
                text-decoration: none;
            }
            h1,h2,h3,h4,h5,h6{
                line-height:1.2
            }
        </style>
    </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="/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 style="padding:5px">
                <p>Welcome to Johan's stream! Join the chat on the right side of the screen.</p>
                <p>This stream is also forwarded to <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>,
                but by viewing it here on the freshest streaming platform in existence, your coolness factor is multiplied by 10.</p>
                <p>You can visit my <a target="_blank" href="https://johanv.xyz">main website</a>, watch the old streams on <a target="_blank" href="https://odysee.com/@johanv">LBRY</a>,
                and follow me on <a target="_blank" href="https://fosstodon.org/@johanv">Mastodon</a> for notifications when I go live, and other fun stuff!</p>
            </div>
        </div>
        <div id="chat">
            <ul id="messages"></ul>
            <form action="">
                nickname: <input id="name" autocomplete="off" /><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) {
                    var newmsg = $('#messages').append($('<li>')
                        .append($('<span>').text(msg.name)
                            .css('color', colorHash.hex(msg.name+"...."))
                            .css('font-weight', 'bold'))
                        .append(": " + msg.text)
                    );
                });
            });
        </script>
    </body>
</html>