UI Changes
Changed UI to scale better Moved info box into a hidden div that shows when the notifyBox is hovered Added a color button that sends the /color command Split client.js into separate files that the video and chat call separatly The reload player button only shows up in chat when there is a video added references to other code so code complete can work in js files Fixes #40
This commit is contained in:
joeyak
parent
13f45e5b3a
commit
7dca3be538
@ -7,9 +7,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/hack/hack.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/site.css">
|
||||
<script type="application/javascript" src="/static/js/jquery.js"></script>
|
||||
<script type="application/javascript" src="/static/js/flv.min.js"></script>
|
||||
<script type="application/javascript" src="/static/js/wasm_exec.js"></script>
|
||||
<script type="application/javascript" src="/static/js/client.js"></script>
|
||||
<script type="application/javascript" src="/static/js/both.js"></script>
|
||||
{{template "header" .}}
|
||||
</head>
|
||||
<body class="scrollbar">
|
||||
|
||||
@ -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 {
|
||||
|
||||
8
static/js/both.js
Normal file
8
static/js/both.js
Normal file
@ -0,0 +1,8 @@
|
||||
/// <reference path="./jquery.js" />
|
||||
|
||||
// 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();
|
||||
}
|
||||
});
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
/// <reference path="./both.js" />
|
||||
|
||||
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();
|
||||
});
|
||||
17
static/js/video.js
Normal file
17
static/js/video.js
Normal file
@ -0,0 +1,17 @@
|
||||
/// <reference path="./both.js" />
|
||||
|
||||
|
||||
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);
|
||||
@ -1,74 +1,75 @@
|
||||
{{define "header"}}
|
||||
{{ if .Chat }}
|
||||
<script type="application/javascript" src="/static/js/wasm_exec.js"></script>
|
||||
<script type="application/javascript" src="/static/js/chat.js"></script>
|
||||
<script>
|
||||
maxMessageCount = {{ .MessageHistoryCount }}
|
||||
window.onload = chatOnload;
|
||||
</script>
|
||||
<!-- If it is only the chat window, the the chat needs to be fullscreen -->
|
||||
{{ if not .Video }}
|
||||
<style>
|
||||
#chat,
|
||||
#joinbox {
|
||||
grid-column: 1 / 3;
|
||||
.root {
|
||||
display: grid;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Video }}
|
||||
{{ if not .Chat }}
|
||||
<style>
|
||||
#video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
<script type="application/javascript" src="/static/js/flv.min.js"></script>
|
||||
<script type="application/javascript" src="/static/js/video.js"></script>
|
||||
{{ if not .Chat }}
|
||||
<style>
|
||||
#videoElement {
|
||||
height: 99vh;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if and .Video .Chat }}
|
||||
<style>
|
||||
.root {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: 5fr 1fr;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{end}}
|
||||
|
||||
{{define "body"}}
|
||||
{{ if .Video }}
|
||||
<div id="video">
|
||||
<video id="videoElement" controls autoplay x5-video-player-type="h5" x5-video-player-fullscreen="true"
|
||||
playsinline webkit-playsinline>
|
||||
Your browser is too old and doesn't support HTML5 video.
|
||||
<script>initPlayer();</script>
|
||||
</video>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Chat }}
|
||||
<div>
|
||||
<div id="hidden" style="display: none;">
|
||||
<div id="infoBox">
|
||||
<div id="info">
|
||||
<span id="playing"></span>
|
||||
<a href="" target="_blank" id="playinglink"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chatButtons">
|
||||
<button class="button pretty-button" onclick="auth();">Auth</button>
|
||||
<button class="button pretty-button" onclick="help();">Help</button>
|
||||
<button class="button pretty-button" onclick="initPlayer();">Reload Player</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="error"></div>
|
||||
<div id="chatwindow">
|
||||
<div id="chat" style="display: none;">
|
||||
<input id="hiddenColorPicker" type="color" hidden/>
|
||||
<div id="notifiyBox"></div>
|
||||
<div id="hidden">
|
||||
<div id="chatButtons">
|
||||
<button class="button pretty-button" onclick="auth();">Auth</button>
|
||||
<button class="button pretty-button" onclick="help();">Help</button>
|
||||
<button class="button pretty-button" onclick="$('#hiddenColorPicker').trigger('click');">Color</button>
|
||||
{{ if .Video }}
|
||||
<button class="button pretty-button" onclick="initPlayer();">Reload Player</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
<hr/>
|
||||
<a id="playing" target="_blank"></a>
|
||||
</div>
|
||||
<div id="messages" class="scrollbar"></div>
|
||||
<div id="suggestions"></div>
|
||||
<textarea id="msg"></textarea>
|
||||
<div id="msgbox">
|
||||
<div id="suggestions"></div>
|
||||
<textarea id="msg"></textarea>
|
||||
</div>
|
||||
<button id="send" class="button" onclick="sendChat();">Send</button>
|
||||
<div><!-- This is an empty div so there can be an empty space below the send button --></div>
|
||||
</div>
|
||||
<div id="joinbox">
|
||||
<p style="color:#e5e0e5">Please enter your name to Join the chat</P>
|
||||
<input id="name" maxlength="36">
|
||||
<button id="join" onclick="join();">Join</button>
|
||||
<button id="join" class="button pretty-button" onclick="join();">Join</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user