diff --git a/static/base.html b/static/base.html index dc6d0c6..49d9d80 100644 --- a/static/base.html +++ b/static/base.html @@ -7,9 +7,7 @@ - - - + {{template "header" .}} diff --git a/static/css/site.css b/static/css/site.css index 312e33f..9a51690 100644 --- a/static/css/site.css +++ b/static/css/site.css @@ -1,6 +1,7 @@ :root { --var-border: 1px solid #606060; --var-message-color: #f4f4f4; + --var-contrast-color: #1bf7ec; } html { @@ -37,10 +38,12 @@ span.svmsg { } .root { - display: grid; - grid-template-columns: 5fr 1fr; - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; +} + +.pretty-button { + padding: 5px 10px; } .button { @@ -49,11 +52,7 @@ span.svmsg { font-size: 16px; font-weight: bold; border: none; -} - -.pretty-button { - padding: 5px 10px; - border-radius: 3px; + border-radius: 5px; } .button:hover { @@ -98,44 +97,51 @@ span.svmsg { color: #B1B1B1; } -#video { - display: grid; - grid-template-rows: auto 1fr; -} - #videoElement { - background: #000000; + position: relative; + top: 50%; + transform: translateY(-50%); width: 100%; - height: calc(100vh - 9em); } -#error { - color: #f00000; - padding: 5px; - font-weight: bold; +#chatwindow { + position: relative; + height: 100vh; } -#infoBox { - display: grid; - grid-template-columns: 1fr 200px; - padding-left: 10px; - vertical-align: center; - height: 3.5em; +#hidden { + display: none; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + margin: 0px 5px; + padding: 3px; + background: #393940; } -#info { - display: grid; - grid-template-rows: auto auto; - color: #8b6a96; +#hidden:hover, +#notifiyBox:hover~#hidden { + display: unset; +} + +#notifiyBox { + color: var(--var-contrast-color); + padding: 10px; font-weight: bold; } #playing { + color: var(--var-contrast-color); font-size: x-Large; } #chatButtons { - margin: 5px 10px; + margin: 5px; +} + +#chatButtons button { + margin: 5px 0px; } #joinbox { @@ -144,13 +150,14 @@ span.svmsg { #chat { display: grid; - grid-template-rows: 1fr 6em 2em; - margin: 5px; + grid-template-rows: 2.5em 1fr 6em 2.5em 1em; + grid-gap: 10px; + margin: 0px 5px; + height: 100%; } #messages { min-height: 15em; - height: calc(100vh - 9em); color: var(--var-message-color); opacity: 0%; overflow-y: scroll; @@ -162,14 +169,9 @@ span.svmsg { word-wrap: break-word; } -#msg { - background: transparent; - border: var(--var-border); - border-radius: 5px; - margin: 5px 0px; - padding: 5px; - color: var(--var-message-color); - resize: none; +#msgbox { + position: relative; + display: grid; } #suggestions { @@ -180,12 +182,21 @@ span.svmsg { color: var(--var-message-color); } +#msg { + background: transparent; + border: var(--var-border); + border-radius: 5px; + padding: 5px; + color: var(--var-message-color); + resize: none; +} + #suggestions div { padding: 5px; } #suggestions div.selectedName { - background: red; + color: var(--var-contrast-color); } #helpbody { diff --git a/static/js/both.js b/static/js/both.js new file mode 100644 index 0000000..c41c68a --- /dev/null +++ b/static/js/both.js @@ -0,0 +1,8 @@ +/// + +// Make this on all pages so video page also doesn't do this +$(document).on("keydown", function (e) { + if (e.which === 8 && !$(e.target).is("input, textarea")) { + e.preventDefault(); + } +}); diff --git a/static/js/client.js b/static/js/chat.js similarity index 51% rename from static/js/client.js rename to static/js/chat.js index 772d2c3..00ec46c 100644 --- a/static/js/client.js +++ b/static/js/chat.js @@ -1,36 +1,15 @@ -function initPlayer() { - if (flvjs.isSupported()) { - var videoElement = document.getElementById('videoElement'); - var flvPlayer = flvjs.createPlayer({ - type: 'flv', - url: '/live' - }); - flvPlayer.attachMediaElement(videoElement); - flvPlayer.load(); - flvPlayer.play(); - } -} +/// function setPlaying(title, link) { - if (title === "") { - $('#playing').hide(); - $('#playinglink').hide(); - document.title = "Movie Night" - return; + if (title !== "") { + $('#playing').text(title); + document.title = "Movie Night | " + title; } - $('#playing').show(); - $('#playing').text(title); - document.title = "Movie Night | " + title; - - if (link === "") { - $('#playinglink').hide(); - return; + $('#playing').removeAttr('href'); + if (link !== "") { + $('#playing').attr('href', link); } - - $('#playinglink').show(); - $('#playinglink').text('[Info Link]'); - $('#playinglink').attr('href', link); } function startGo() { @@ -75,9 +54,9 @@ function openChat() { console.log("chat opening"); $("#joinbox").css("display", "none"); $("#chat").css("display", "grid"); + $("#hidden").css("display", "") $("#msg").val(""); $("#msg").focus(); - $("#hidden").css("display", ""); inChat = true; } @@ -85,31 +64,25 @@ function closeChat() { console.log("chat closing"); $("#joinbox").css("display", ""); $("#chat").css("display", "none"); - $("#error").html("That name was already used!"); - $("#hidden").css("display", "none"); + $("#hidden").css("display", "none") + setNotifyBox("That name was already used!"); inChat = false; } function join() { let name = $("#name").val(); - if (name.length < 1 || name.length > 36) { - $("#error").html("Please input a name between 3 and 36 characters"); + if (name.length < 3 || name.length > 36) { + setNotifyBox("Please input a name between 3 and 36 characters"); return; } if (!sendMessage($("#name").val())) { - $("#error").val("could not join"); + setNotifyBox("could not join"); return; } - $("#error").val(""); + setNotifyBox(); openChat(); } -let ws = new WebSocket(getWsUri()); -ws.onmessage = (m) => recieveMessage(m.data); -ws.onopen = (e) => console.log("Websocket Open:", e); -ws.onclose = () => closeChat(); -ws.onerror = (e) => console.log("Websocket Error:", e); - function websocketSend(data) { ws.send(data); } @@ -127,6 +100,11 @@ function updateSuggestionCss(m) { } } +function setNotifyBox(msg = "Please hover to view options") { + $("#notifiyBox").html(msg); +} + +// Button Wrapper Functions function auth() { let pass = prompt("pass please") if (pass != "") { @@ -138,44 +116,58 @@ function help() { sendMessage("/help") } -// Make this on all pages so video page also doesn't do this -$(document).on("keydown", function (e) { - if (e.which === 8 && !$(e.target).is("input, textarea")) { - e.preventDefault(); - } -}); - -function chatOnload() { - $("#name").keypress(function (evt) { - if (evt.originalEvent.keyCode == 13) { - $("#join").trigger("click"); - } - }); - - $("#msg").keypress(function (evt) { - if (evt.originalEvent.keyCode == 13 && !evt.originalEvent.shiftKey) { - $("#send").trigger("click"); - evt.preventDefault(); - } - }); - - window.onresize = updateSuggestionCss; - var suggestionObserver = new MutationObserver( - (mutations) => mutations.forEach(() => updateSuggestionCss()) - ).observe($("#suggestions")[0], { childList: true }) - - $("#send").click(() => $("#msg").focus()); - - $("#msg").on("keydown", (e) => { - if (processMessageKey(e)) { - e.preventDefault(); - } - }); - - $("#msg").on("input", () => processMessage()); - - $("#name").focus(); - - // make sure startGo is last function called ignoring the autologin code - startGo(); +// Get the websocket setup in a function so it can be recalled +function setupWebSocket() { + ws = new WebSocket(getWsUri()); + ws.onmessage = (m) => recieveMessage(m.data); + ws.onopen = (e) => console.log("Websocket Open:", e); + ws.onclose = () => closeChat(); + ws.onerror = (e) => console.log("Websocket Error:", e); } + +function setupEvents() { + $("#name").on({ + keypress: (e) => { + if (e.originalEvent.keyCode == 13) { + $("#join").trigger("click"); + } + } + }); + + $("#msg").on({ + keypress: (e) => { + if (e.originalEvent.keyCode == 13 && !e.originalEvent.shiftKey) { + $("#send").trigger("click"); + e.preventDefault(); + } + }, + keydown: (e) => { + if (processMessageKey(e)) { + e.preventDefault(); + } + }, + input: () => processMessage(), + }); + + $("#hiddenColorPicker").on({ + change: () => sendMessage("/color " + $("#hiddenColorPicker").val()), + }); + + $("#send").on({ + click: () => $("#msg").focus(), + }); + + var suggestionObserver = new MutationObserver( + (mutations) => mutations.forEach(updateSuggestionCss) + ).observe($("#suggestions")[0], { childList: true }); +} + +window.addEventListener("onresize", updateSuggestionCss); + +window.addEventListener("load", () => { + setNotifyBox(); + setupWebSocket(); + startGo(); + setupEvents(); + $("#name").focus(); +}); diff --git a/static/js/video.js b/static/js/video.js new file mode 100644 index 0000000..c7b9add --- /dev/null +++ b/static/js/video.js @@ -0,0 +1,17 @@ +/// + + +function initPlayer() { + if (flvjs.isSupported()) { + var videoElement = document.getElementById("videoElement"); + var flvPlayer = flvjs.createPlayer({ + type: "flv", + url: "/live" + }); + flvPlayer.attachMediaElement(videoElement); + flvPlayer.load(); + flvPlayer.play(); + } +} + +window.addEventListener("load", initPlayer); diff --git a/static/main.html b/static/main.html index 069b64a..02cf9a3 100644 --- a/static/main.html +++ b/static/main.html @@ -1,74 +1,75 @@ {{define "header"}} {{ if .Chat }} + + - - {{ if not .Video }} {{ end }} - {{ end }} {{ if .Video }} - {{ if not .Chat }} - + {{ end }} + {{ end }} + {{ if and .Video .Chat }} + {{ end }} - {{ end }} {{end}} {{define "body"}} {{ if .Video }} -
-
{{ end }} {{ if .Chat }} -
- -
+

Please enter your name to Join the chat

- +
{{ end }}