diff --git a/main.go b/main.go index 804945a..5bc806a 100644 --- a/main.go +++ b/main.go @@ -90,11 +90,10 @@ func main() { // Chat websocket 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("/favicon.ico", wsStaticFiles) - http.HandleFunc("/jquery.js", wsStaticFiles) - http.HandleFunc("/ractive.min.js", wsStaticFiles) http.HandleFunc("/justchat", wsStaticFiles) http.HandleFunc("/justvideo", wsStaticFiles) diff --git a/static/index.html b/static/index.html index e477804..3c28690 100644 --- a/static/index.html +++ b/static/index.html @@ -1,140 +1,16 @@ - - - Movie Night! - - - - - - - -
+ +
+
+
+

Please enter your name to Join the chat

+ +
-
-
-

Please enter your name to Join the chat

- - -
-
-
-
- -
-
- - +
+
+
+ +
- +
+ diff --git a/static/js/client.js b/static/js/client.js new file mode 100644 index 0000000..210ffbb --- /dev/null +++ b/static/js/client.js @@ -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 = { + "&": "&", + "<": "<", + ">": ">", + '"': '"', + "'": ''', + "/": '/', + "\n": '
' + }; +} \ No newline at end of file diff --git a/static/flv.min.js b/static/js/flv.min.js similarity index 100% rename from static/flv.min.js rename to static/js/flv.min.js diff --git a/static/jquery.js b/static/js/jquery.js similarity index 100% rename from static/jquery.js rename to static/js/jquery.js diff --git a/static/ractive.min.js b/static/js/ractive.min.js similarity index 100% rename from static/ractive.min.js rename to static/js/ractive.min.js diff --git a/static/justchat.html b/static/justchat.html index 2198a9a..902c010 100644 --- a/static/justchat.html +++ b/static/justchat.html @@ -1,169 +1,35 @@ - - - Movie Night! - Chat - - - - - - -
-
-

Please enter your name to Join the chat

- - -
-
-
-
- -
-
- - + +
+
+

Please enter your name to Join the chat

+ +
- +
+
+
+ +
+
+
+ - diff --git a/static/justvideo.html b/static/justvideo.html index 006e366..2729f70 100644 --- a/static/justvideo.html +++ b/static/justvideo.html @@ -1,48 +1,33 @@ - - - Movie Night! - - - + + + Movie Night! + + + - + - - - - + + + + diff --git a/static/site.css b/static/site.css new file mode 100644 index 0000000..58425d7 --- /dev/null +++ b/static/site.css @@ -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; +}