~johanvandegriff/live.johanv.xyz

2424dcf45860c3fe89329132c8882261e14a4d3a — Johan Vandegriff 1 year, 1 month ago 62e891a
dynamic CSS layout for chat
6 files changed, 149 insertions(+), 98 deletions(-)

M CHECKS
M index.html
M server.js
A static/check.txt
R stream.png => static/stream.png
A static/style.css
M CHECKS => CHECKS +1 -1
@@ 1,3 1,3 @@
WAIT=5
ATTEMPTS=3
/check.txt success
/static/check.txt success

M index.html => index.html +17 -92
@@ 3,89 3,12 @@
    <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>
        <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>
            <!-- <h1>live.johanv.xyz &nbsp; | &nbsp; <a target="_blank" href="https://johanv.xyz">back to johanv.xyz</a></h1> -->

            <video
                id="my-video"


@@ 94,25 17,24 @@
                preload="auto"
                width="640"
                height="264"
                poster="/stream.png"
                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
                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>,
            <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>,
                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>
                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>
        </div>
        <div id="chat">


@@ 158,12 80,15 @@
                    return false;
                });
                socket.on('chat message', function(msg) {
                    var newmsg = $('#messages').append($('<li>')
                    $('#messages').append($('<li>')
                        .append($('<span>').text(msg.name)
                            .css('color', colorHash.hex(msg.name+"...."))
                            .css('font-weight', 'bold'))
                        .append(": " + msg.text)
                    );
                    
                    //scroll to the most recent message
                    $("#messages").scrollTop($("#messages")[0].scrollHeight);
                });
            });
        </script>

M server.js => server.js +10 -5
@@ 4,13 4,12 @@ var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', (req, res) => {res.sendFile(__dirname + '/index.html')});
app.get('/check.txt', (req, res) => {res.send('success');});
app.get('/jquery.js', (req, res) => {res.sendFile(__dirname + '/node_modules/jquery/dist/jquery.js')});
app.get('/color-hash.js', (req, res) => {res.sendFile(__dirname + '/node_modules/color-hash/dist/color-hash.js')});
app.get('/video.js', (req, res) => {res.sendFile(__dirname + '/node_modules/video.js/dist/video.js')});
app.get('/video-js.css', (req, res) => {res.sendFile(__dirname + '/node_modules/video.js/dist/video-js.css')});
app.get('/stream.png', (req, res) => {res.sendFile(__dirname + '/stream.png')});

app.use('/static', express.static('static'));
app.use('/live', express.static('live'));

io.on('connection', (socket) => {


@@ 22,6 21,11 @@ io.on('connection', (socket) => {
    socket.on('chat message', (msg) => {
        console.log('message: ' + msg.name + ": " + msg.text);
        io.emit('chat message', msg);
        //emit the message many times for testing CSS
        // msg.text = msg.text+msg.text+msg.text+msg.text+msg.text+msg.text+msg.text+msg.text+msg.text+msg.text+msg.text+msg.text+msg.text+msg.text;
        // for (i=0; i<30; i++) {
        //     io.emit('chat message', msg);
        // }
    });
});



@@ 30,10 34,11 @@ http.listen(process.env.PORT || default_port, () => {
    console.log('listening on *:' + (process.env.PORT || default_port));
});


//TODO CSS dynamic layout: wide mode = layout fixed width chat on right. narrow = stream on top, chat on bottom
//TODO clean up the CSS, make text look good
//TODO add cards instead of links
//TODO pull twitch chat
//TODO only change nickname when email is provided
//TODO save nickname with cookies
\ No newline at end of file
//TODO save nickname with cookies
//TODO add a README with setup instructions
//TODO favicon
//TODO use flexbox for CSS?

A static/check.txt => static/check.txt +1 -0
@@ 0,0 1,1 @@
success
\ No newline at end of file

R stream.png => static/stream.png +0 -0
A static/style.css => static/style.css +120 -0
@@ 0,0 1,120 @@
* {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
}
/*temp border*/
/* div {
    border: 1px red;
    border-style: dashed;
} */

html {
    height: 100%;
}

body {
    /* font: 13px Helvetica, Arial;
    margin:40px auto;
    max-width:650px;
    padding:0 10px; */
    height: 100%;
    line-height:1.6;
    font-size:18px;
    background-color: #333;
    color:white;
    overflow-x: hidden; /*tmp hack, some element is too wide but i cannot find it*/
}
form {
    background: #aaa;
    padding: 3px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
#m {
    border: 0;
    padding: 10px;
    width: 150px;
    margin-right: 0.5%;
}
form button {
    width: 50px;
    background: rgb(130, 224, 255);
    border: none;
    padding: 10px;
}
#stream {
    width: calc(100vw - 315px);
    height: 100%;
    padding-right: 1em; top: 0;
    float: left;
    /* position: fixed; */
    background: #333;
    color: white;
}
#chat {
    width: 300px;
    /* height: calc(100vh - 75px); */
    height: 100%;
    float: right;
    right: 0;
    /* top: 0; */
    position: fixed;
    background: #111;
}
#messages {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: calc(100vh - 75px);
    overflow-y: scroll;
    /* overflow-x: auto; */
    word-wrap: break-word;
    background: #111;
}
#messages li {
    padding: 2px 10px;
}
/* #messages li:nth-child(odd) {
    background: #eee;
} */
#about {
    padding: 5px;
}
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
}


@media all and (max-width: 900px) {
    #stream {
        width: 100%;
    }
    #chat {
        width: 100%;
        display: block;
        height: calc(100vh - 56.25vw - 325px + 15vw);
        position: absolute;
        bottom: 100px;
        box-sizing: border-box;
    }
    #messages {
        height: calc(100vh - 56.25vw - 300px + 15vw);
    }
    #m {
        width: calc(100vw - 90px);
    }

}