+
+
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;
+}