sjw/MovieNight
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Cleaning up files and some organization

Browse Source
This commit is contained in:
joeyak 2019-03-10 16:45:10 -04:00
parent 5cdafe8f42
commit ecf64dff8a
9 changed files with 280 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
main.go
View File

@ -90,11 +90,10 @@ func main() {
// Chat websocket // Chat websocket
http.HandleFunc("/ws", wsHandler) http.HandleFunc("/ws", wsHandler)
http.HandleFunc("/static/", wsStaticFiles) http.HandleFunc("/static/js/", wsStaticFiles)
http.HandleFunc("/static/site.css", wsStaticFiles)
http.HandleFunc("/emotes/", wsEmotes) http.HandleFunc("/emotes/", wsEmotes)
http.HandleFunc("/favicon.ico", wsStaticFiles) http.HandleFunc("/favicon.ico", wsStaticFiles)
http.HandleFunc("/jquery.js", wsStaticFiles)
http.HandleFunc("/ractive.min.js", wsStaticFiles)
http.HandleFunc("/justchat", wsStaticFiles) http.HandleFunc("/justchat", wsStaticFiles)
http.HandleFunc("/justvideo", wsStaticFiles) http.HandleFunc("/justvideo", wsStaticFiles)

238
static/index.html
View File

@ -1,140 +1,16 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<title>Movie Night!</title> <title>Movie Night!</title>
<style> <link rel="stylesheet" type="text/css" href="/static/site.css">
body { <script type="application/javascript" src="/static/js/jquery.js"></script>
margin:0; <script type="application/javascript" src="/static/js/flv.min.js"></script>
padding:0; <script type="application/javascript" src="/static/js/client.js"></script>
background:#000; </head>
}
html, body, #messages, #phase2 { <body>
height:100%; <div id="streambox">
}
video {
width:100%;
}
#streambox {
width: 80%;
float: left;
margin: 0;
}
#chatbox {
width: 19%;
float: right;
height:85%;
}
#messages {
border: 1px solid #666;
width: 95%;
overflow: auto;
color: #f4f4f4;
}
#msg {
width: 94%;
height: 3em;
}
#error {
color: #f00;
padding: 5px;
font-weight: bold;
}
span.name {
font-weight:bold;
}
span.cmdme {
font-style: italic;
}
span.msg {
font-style: normal;
color: #cfccd1;
}
span.svmsg {
font-style: italic;
color: #ea6260;
}
.announcement {
font-weight: bold;
color: #ea6260;
text-align: center;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
border-top: 3px solid red;
border-bottom: 3px solid red;
}
#playingDiv {
color: #8b6a96;
font-weight: bold;
padding: 10px;
}
#playing {
font-size: x-Large;
}
</style>
<script src="/static/jquery.js"></script>
<script src="/static/flv.min.js"></script>
<script>
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 escapeHtml(string) {
return string;
//return String(string).replace(/[&<>"'\/]/g, function (s) {
// return entityMap[s];
//});
}
//helper function for debugging purposes
function toHex(str) {
var result = '';
for (var i=0; i<str.length; i++) {
result += ("0"+str.charCodeAt(i).toString(16)).slice(-2)+" ";
}
return result.toUpperCase();
}
function setPlaying(title, link) {
if (title === "") {
$('#playingDiv').hide();
document.title = "Movie Night"
return;
}
$('#playingDiv').show();
$('#playing').text(title);
document.title = "Movie Night | " + title
if (link === "") {
$('#playinglink').hide();
return;
}
$('#playinglink').show();
$('#playinglink').text('[Info Link]');
$('#playinglink').attr('href', link);
}
</script>
</head>
<body>
<div id="streambox">
<video id="videoElement" controls autoplay x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline webkit-playsinline> <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. Your browser is too old and doesn't support HTML5 video.
@ -143,87 +19,19 @@ function setPlaying(title, link) {
<button style="float:right" id="reload" onclick="initPlayer();">Reload Player</button> <button style="float:right" id="reload" onclick="initPlayer();">Reload Player</button>
<div id="playingDiv"><span id="playing"></span><br /><a href="" target="_blank" id="playinglink"></a></div> <div id="playingDiv"><span id="playing"></span><br /><a href="" target="_blank" id="playinglink"></a></div>
</div>
<div id="chatbox">
<div id="phase1">
<p style="color:#e5e0e5">Please enter your name to Join the chat</P>
<input id="name">
<button id="join">Join</button>
</div> </div>
<div id="chatbox"> <div id="error"></div>
<div id="phase1"> <div id="phase2" style="opacity:0">
<p style="color:#e5e0e5">Please enter your name to Join the chat</P> <div id="messages"></div>
<input id="name"> <textarea id="msg"></textarea>
<button id="join">Join</button> <br/><button id="send">Send</button>
</div>
<div id="error"></div>
<div id="phase2" style="opacity:0">
<div id="messages"></div>
<textarea id="msg"></textarea>
<br/><button id="send">Send</button>
</div>
<script>
$("INPUT").val("")
$("#name").keypress(function(evt){
if(evt.originalEvent.keyCode==13){
$("#join").trigger("click")
//submit name
}
})
//handling the start of the chat
$("#join").click(function(){
$("#error").html("");
var name= escapeHtml($("#name").val())
if(name.length<3){
$("#error").html("Name is too short!");
return
}
console.log("join started")
chat = new WebSocket("ws://"+window.location.host+":8089/ws");
chat.onopen = function(evt) {
chat.send(name); //sending the chat name
$("#phase1").animate({opacity:0},500,"linear",function(){
$("#phase1").css({display:"none"})
$("#phase2").css({opacity:1})
$("#msg").focus()
})
};
chat.onerror = function(evt) {
console.log("Websocket Error:",evt)
};
chat.onclose = function(evt) {
console.log("chat closing")
$("#phase1").stop().css({display:"block"}).animate({opacity:1},500)
$("#phase2").stop().animate({opacity:0})
$("#error").html("That name was already used!")
};
chat.onmessage = function(evt) {
$("#messages").append(evt.data).scrollTop(9e6)
};
})
$("#msg").keypress(function(evt){
if(evt.originalEvent.keyCode==13 && !evt.originalEvent.shiftKey){
$("#send").trigger("click")
evt.preventDefault();
// submit name
}
})
$("#send").click(function(){
chat.send(escapeHtml($("#msg").val()));
$("#msg").val("");
})
//helper function for escaping HTML
var entityMap = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;',
"/": '&#x2F;',
"\n": '<BR/>'
};
</script>
</div> </div>
</body> </div>
</body>
</html> </html>

118
static/js/client.js Normal file
View File

@ -0,0 +1,118 @@
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 escapeHtml(string) {
return string;
//return String(string).replace(/[&<>"'\/]/g, function (s) {
// return entityMap[s];
//});
}
//helper function for debugging purposes
function toHex(str) {
var result = '';
for (var i = 0; i < str.length; i++) {
result += ("0" + str.charCodeAt(i).toString(16)).slice(-2) + " ";
}
return result.toUpperCase();
}
function setPlaying(title, link) {
if (title === "") {
$('#playingDiv').hide();
document.title = "Movie Night"
return;
}
$('#playingDiv').show();
$('#playing').text(title);
document.title = "Movie Night | " + title
if (link === "") {
$('#playinglink').hide();
return;
}
$('#playinglink').show();
$('#playinglink').text('[Info Link]');
$('#playinglink').attr('href', link);
}
window.onload = function () {
console.log("TEST 1")
$("INPUT").val("")
$("#name").keypress(function (evt) {
console.log("TEST 2")
if (evt.originalEvent.keyCode == 13) {
console.log("TEST 3")
$("#join").trigger("click")
}
})
//handling the start of the chat
$("#join").click(function () {
$("#error").html("");
var name = escapeHtml($("#name").val())
if (name.length < 3) {
$("#error").html("Name is too short!");
return
}
console.log("join started")
chat = new WebSocket("ws://" + window.location.host + ":8089/ws");
chat.onopen = function (evt) {
chat.send(name); //sending the chat name
$("#phase1").animate({ opacity: 0 }, 500, "linear", function () {
$("#phase1").css({ display: "none" })
$("#phase2").css({ opacity: 1 })
$("#msg").focus()
})
};
chat.onerror = function (evt) {
console.log("Websocket Error:", evt)
};
chat.onclose = function (evt) {
console.log("chat closing")
$("#phase1").stop().css({ display: "block" }).animate({ opacity: 1 }, 500)
$("#phase2").stop().animate({ opacity: 0 })
$("#error").html("That name was already used!")
};
chat.onmessage = function (evt) {
$("#messages").append(evt.data).scrollTop(9e6)
};
})
$("#msg").keypress(function (evt) {
if (evt.originalEvent.keyCode == 13 && !evt.originalEvent.shiftKey) {
$("#send").trigger("click")
evt.preventDefault();
// submit name
}
})
$("#send").click(function () {
chat.send(escapeHtml($("#msg").val()));
$("#msg").val("");
})
//helper function for escaping HTML
var entityMap = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;',
"/": '&#x2F;',
"\n": '<BR/>'
};
}

0
static/flv.min.js → static/js/flv.min.js vendored
View File

0
static/jquery.js → static/js/jquery.js vendored
View File

0
static/ractive.min.js → static/js/ractive.min.js vendored
View File

186
static/justchat.html
View File

@ -1,169 +1,35 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<title>Movie Night! - Chat</title> <title>Movie Night! - Chat</title>
<style> <link rel="stylesheet" type="text/css" href="/static/site.css">
body { <script src="/static/js/jquery.js"></script>
margin:0; <script src="/static/js/client.js"></script>
padding:0; <style>
background:#000;
}
html, body, #messages, #phase2 {
height:100%;
}
video {
width:100%;
}
#chatbox { #chatbox {
width: 100%; float: left;
height:85%;
}
#messages {
border: 1px solid #666;
width: 95%;
overflow: auto;
color: #f4f4f4;
}
#msg {
width: 94%;
height: 3em;
}
#error {
color: #f00;
padding: 5px;
font-weight: bold;
}
span.name {
font-weight:bold;
}
span.cmdme {
font-style: italic;
}
span.msg {
font-style: normal;
color: #cfccd1;
}
span.svmsg {
font-style: italic;
color: #ea6260;
} }
.announcement { #phase1 {
font-weight: bold; margin: 0px 10px;
color: #ea6260;
text-align: center;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
border-top: 3px solid red;
border-bottom: 3px solid red;
} }
</style> </style>
<script src="/static/jquery.js"></script> </head>
<script>
function escapeHtml(string) {
return string
//return String(string).replace(/[&<>"'\/]/g, function (s) {
// return entityMap[s];
//});
}
//helper function for debugging purposes <body>
function toHex(str) { <div id="chatbox">
var result = ''; <div id="phase1">
for (var i=0; i<str.length; i++) { <p style="color:#e5e0e5">Please enter your name to Join the chat</P>
result += ("0"+str.charCodeAt(i).toString(16)).slice(-2)+" "; <input id="name">
} <button id="join">Join</button>
return result.toUpperCase();
}
</script>
</head>
<body>
<div id="chatbox">
<div id="phase1">
<p style="color:#e5e0e5">Please enter your name to Join the chat</P>
<input id="name">
<button id="join">Join</button>
</div>
<div id="error"></div>
<div id="phase2" style="opacity:0">
<div id="messages"></div>
<textarea id="msg"></textarea>
<br/><button id="send">Send</button>
</div>
<script>
$("INPUT").val("")
$("#name").keypress(function(evt){
if(evt.originalEvent.keyCode==13){
$("#join").trigger("click")
//submit name
}
})
//handling the start of the chat
$("#join").click(function(){
$("#error").html("");
var name= escapeHtml($("#name").val())
if(name.length<3){
$("#error").html("Name is too short!");
return
}
console.log("join started")
chat = new WebSocket("ws://"+window.location.host+":8089/ws");
chat.onopen = function(evt) {
chat.send(name); //sending the chat name
$("#phase1").animate({opacity:0},500,"linear",function(){
$("#phase1").css({display:"none"})
$("#phase2").css({opacity:1})
$("#msg").focus()
})
};
chat.onerror = function(evt) {
console.log("Websocket Error:",evt)
};
chat.onclose = function(evt) {
console.log("chat closing")
$("#phase1").stop().css({display:"block"}).animate({opacity:1},500)
$("#phase2").stop().animate({opacity:0})
$("#error").html("That name was already used!")
};
chat.onmessage = function(evt) {
$("#messages").append(evt.data).scrollTop(9e6)
};
})
$("#msg").keypress(function(evt){
if(evt.originalEvent.keyCode==13 && !evt.originalEvent.shiftKey){
$("#send").trigger("click")
evt.preventDefault();
// submit name
}
})
$("#send").click(function(){
chat.send(escapeHtml($("#msg").val()));
$("#msg").val("");
})
//helper function for escaping HTML
var entityMap = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;',
"/": '&#x2F;',
"\n": '<BR/>'
};
</script>
</div> </div>
</body> <div id="error"></div>
<div id="phase2" style="opacity:0">
<div id="messages"></div>
<textarea id="msg"></textarea>
<br /><button id="send">Send</button>
</div>
</div>
</body>
</html> </html>

65
static/justvideo.html
View File

@ -1,48 +1,33 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<title>Movie Night!</title> <title>Movie Night!</title>
<style> <link rel="stylesheet" type="text/css" href="/static/site.css">
body { <script src="/static/js/jquery.js"></script>
margin:0; <script src="/static/js/flv.min.js"></script>
padding:0;
background:#000;
}
html, body{
height:100%;
}
video {
width:100%;
height:100%;
}
</style>
<script src="/static/jquery.js"></script>
<script src="/static/flv.min.js"></script>
<script> <script>
function initPlayer() { function initPlayer() {
if (flvjs.isSupported()) { if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement'); var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({ var flvPlayer = flvjs.createPlayer({
type: 'flv', type: 'flv',
url: '/live' url: '/live'
}); });
flvPlayer.attachMediaElement(videoElement); flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); flvPlayer.load();
flvPlayer.play(); flvPlayer.play();
} }
} }
</script> </script>
</head> </head>
<body> <body>
<video id="videoElement" controls autoplay x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline webkit-playsinline> <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. Your browser is too old and doesn't support HTML5 video.
</video> </video>
<script>initPlayer();</script> <script>initPlayer();</script>
</body> </body>
</html> </html>

86
static/site.css Normal file
View File

@ -0,0 +1,86 @@
body {
margin: 0;
padding: 0;
background: #000;
}
html,
body,
#messages,
#phase2 {
height: 100%;
}
video {
width: 100%;
height: 100%;
}
#streambox {
width: 80%;
float: left;
margin: 0;
}
#chatbox {
width: 19%;
float: right;
height: 85%;
}
#messages {
border: 1px solid #666;
width: 95%;
overflow: auto;
color: #f4f4f4;
}
#msg {
width: 94%;
height: 3em;
}
#error {
color: #f00;
padding: 5px;
font-weight: bold;
}
span.name {
font-weight: bold;
}
span.cmdme {
font-style: italic;
}
span.msg {
font-style: normal;
color: #cfccd1;
}
span.svmsg {
font-style: italic;
color: #ea6260;
}
.announcement {
font-weight: bold;
color: #ea6260;
text-align: center;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
border-top: 3px solid red;
border-bottom: 3px solid red;
}
#playingDiv {
color: #8b6a96;
font-weight: bold;
padding: 10px;
}
#playing {
font-size: x-Large;
}