From 2165116d7730c780b77ae5ccc61578bf3f9eeaf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Sat, 9 May 2015 01:18:16 +0200
Subject: [PATCH] chat shit

---
 index.php            | 22 ++++++++++------------
 php/footer.php       |  1 +
 server/server.js     |  3 ++-
 static/css/style.css | 10 ++++++++++
 static/js/youtube.js | 19 ++++++++-----------
 5 files changed, 31 insertions(+), 24 deletions(-)
diff --git a/index.php b/index.php
index 146fa4b6..0c2aedb7 100755
--- a/index.php
+++ b/index.php
@@ -9,12 +9,6 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
 <head>
 	<?php include("php/header.php"); ?>
-    <style>
-    #player{
-    width: calc(100% - 261px);
-                  display: inline;
-              }
-                  </style>
 </head>
 <body id="channelpage">
     <header>
@@ -59,7 +53,7 @@
                         </a>
                     </li>
                     <li>
-                        <a class="nav-btn" href="#chat" data-activates="chat-bar" id="chat-btn">
+                        <a class="nav-btn" href="#chat_btn" data-activates="chat-bar" id="chat-btn">
                             <i class="tiny mdi-communication-message"></i>
                             <span class="hover-text">Chat</span>
                         </a>
@@ -96,19 +90,23 @@
         <div class="row">
             <div class="col s12 m9 video-container hide-on-small-only">
 
-                <ul class="side-nav left-aligned" id="chat-bar" style="width: 261px; left: 0px;position: relative;display: inline;will-change: left;margin: 0;padding: 0;float: left;">
-                    <li class="no-padding">
+                <ul class="side-nav left-aligned chat-bar" id="chat-bar" style="position: absolute;display: inline;will-change: left;margin: 0;padding: 0;float: left;">
+                    <li id="chat-log" style="padding:0 0 0 11px">
                         <ul class="collapsible collapsible-accordion">
                             <li class="active">
-                                
+
                                 <div class="collapsible-body" style="display: block;">
-                                    <ul id="#chat">
-                                        <li>Nixo: hello world!</li>
+                                    <ul id="chat">
                                     </ul>
                                 </div>
                             </li>
                         </ul>
                     </li>
+                    <li id="chat-input">
+                      <form onsubmit="chat(this.input);return false;">
+                        <input id="text-chat-input" name="input" type="text" autocomplete="off">
+                      </form>
+                    </li>
                 </ul>
                 <!--
                   width: calc(100% - 261px);
diff --git a/php/footer.php b/php/footer.php
index 70be4e49..23068ed6 100755
--- a/php/footer.php
+++ b/php/footer.php
@@ -72,6 +72,7 @@
 <script type="text/javascript" src="static/js/youtube.js"></script>
 <script type="text/javascript" src="static/js/search.js"></script>
 <script type="text/javascript" src="static/js/admin.js"></script>
+<script type="text/javascript" src="static/js/chat.js"></script>
 <script type="text/javascript" src="static/js/lib/materialize.js"></script>
 
 <!-- Piwik tracking -->
diff --git a/server/server.js b/server/server.js
index 47dfcea9..8bfd05e6 100755
--- a/server/server.js
+++ b/server/server.js
@@ -37,7 +37,8 @@ io.on('connection', function(socket){
   var in_list = false;
 
   socket.on('chat', function (data) {
-    io.sockets.emit('chat,'+coll, guid + " said: " + data);
+    if(data != "" && data !== undefined && data !== null && data.length < 151)
+      io.sockets.emit('chat,'+coll, guid + " said: " + data);
   });
 
   socket.on('frontpage_lists', function()
diff --git a/static/css/style.css b/static/css/style.css
index 3c5d2173..0f47d8d0 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -192,6 +192,16 @@ hide mdi-action-visibility mdi-action-visibility-off
 
 /*------------------- Channel page ---------------------------------------------------------------------------- */
 
+#chat {
+  height: 81%;
+  overflow-y: scroll;
+  text-align:left;
+}
+
+#chat-log {
+  padding: 0px 0px 0px 11px !important;
+}
+
 #player_overlay{
   background-color:black;
   position: absolute;
diff --git a/static/js/youtube.js b/static/js/youtube.js
index df55a2d3..549a610f 100755
--- a/static/js/youtube.js
+++ b/static/js/youtube.js
@@ -32,7 +32,7 @@ socket.on(chan.toLowerCase()+",np", function(obj)
 		$("#player_overlay").height($("#player").height());
 		if(!window.mobilecheck())
 			$("#player_overlay").toggleClass("hide");
-		importOldList(chan.toLowerCase());
+		importOldList(chan.toLowerCasettings-barse());
 	}
 	else{
 		console.log("gotten new song");
@@ -71,11 +71,6 @@ socket.on(chan.toLowerCase()+",viewers", function(view)
 		getTitle(song_title, viewers);
 });
 
-socket.on("chat,"+chan.toLowerCase(), function(data)
-{
-	console.log(data);
-});
-
 $(document).ready(function()
 {
 
@@ -84,6 +79,13 @@ $(document).ready(function()
       edge: 'right', // Choose the horizontal origin
       closeOnClick: false // Closes side-nav on <a> clicks, useful for Angular/Meteor
     });
+
+	$("#chat-btn").sideNav({
+			menuWidth: 272, // Default is 240
+			edge: 'left', // Choose the horizontal origin
+			closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
+		});
+
 	$('#settings-close').sideNav('hide');
 
 	if(!window.mobilecheck() && !msieversion())
@@ -251,11 +253,6 @@ function notifyUser(id, title) {
   	}
 }
 
-function chat(data)
-{
-	socket.emit("chat", data);
-	return;
-}
 
 function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
