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 }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {{ if .Video }}
+
+ {{ end }}
+
+
+
+
-
-
+
+
Please enter your name to Join the chat
-
+
{{ end }}