Browse Source

chat running

windhamdavid 4 years ago
parent
commit
45a8de3b56

+ 2 - 1
.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 *.log
 npm-debug.log*
-node_modules
+node_modules
+*.rdb

+ 29 - 6
app/css/style.min.css

@@ -6793,6 +6793,17 @@ header .intro-text {
 .scrollable-list {
   overflow: scroll;
   height: 250px;
+  border-top:1px solid #cecece;
+  border-bottom:1px solid #cecece;
+}
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
 }
 
 div#player{
@@ -6807,25 +6818,37 @@ div#player{
 	margin: 0 0 10px;
 }
 #controls{
-	float: left;
+	right: left;
 }
 #amplitude-volume-slider{
-	width: 90%;
-	float: right;
+	width: 80%;
+	margin: 0 auto;
+  line-height:14px;
 }
 #amplitude-play-pause{
-	width: 15px;
-	height: 17px;
-	margin: 0 5px 0 0;
+	width: 30px;
+	height: 34px;
+	margin: -40px 5px 0 0;
 	cursor: pointer;
 	float: right;
+  background-color:red;
 }
 #amplitude-current-time{
 	font-family: 'PT Sans', sans-serif;
 	font-size: 14px;
 	font-weight: 400;
 }
+.amplitude-paused:before;{
+  content:"\20ac";
+  font-family:"Glyphicons Halflings";
+  line-height:1;
+  margin:10px;
+  display:inline-block;
+}
+
 .amplitude-paused{
+  content:"\20ac";
+  font-family:"Glyphicons Halflings";
 	background-image: url('../img/small-gray-play.png');
 	background-repeat: no-repeat;
 }

BIN
app/fonts/glyphicons-halflings-regular.eot


File diff suppressed because it is too large
+ 288 - 0
app/fonts/glyphicons-halflings-regular.svg


BIN
app/fonts/glyphicons-halflings-regular.ttf


BIN
app/fonts/glyphicons-halflings-regular.woff


BIN
app/fonts/glyphicons-halflings-regular.woff2


File diff suppressed because it is too large
+ 109 - 82
app/index.html


+ 301 - 0
app/js/main.js

@@ -0,0 +1,301 @@
+(function(){
+
+    var debug = false;
+
+    // ***************************************************************************
+    // Socket.io events
+    // ***************************************************************************
+    
+    var socket = io.connect(window.location.host);
+
+    // Connection established
+    socket.on('connected', function (data) {
+        console.log(data);
+
+        // Get users connected to mainroom
+        socket.emit('getUsersInRoom', {'room':'MainRoom'});
+
+        if (debug) {
+            // Subscription to rooms
+            socket.emit('subscribe', {'username':'sergio', 'rooms':['sampleroom']});
+
+            // Send sample message to room
+            socket.emit('newMessage', {'room':'sampleroom', 'msg':'Hellooooooo!'});
+
+            // Auto-disconnect after 10 minutes
+            setInterval(function() {
+                socket.emit('unsubscribe', {'rooms':['sampleroom']});
+                socket.disconnect();
+            }, 600000);
+        }
+    });
+
+    // Disconnected from server
+    socket.on('disconnect', function (data) {
+        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Lost connection ----'};
+        addMessage(info);
+    });
+    
+    // Reconnected to server
+    socket.on('reconnect', function (data) {
+        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Reconnected ----'};
+        addMessage(info);
+    });
+
+    // Subscription to room confirmed
+    socket.on('subscriptionConfirmed', function(data) {
+        // Create room space in interface
+        if (!roomExists(data.room)) {
+            addRoomTab(data.room);
+            addRoom(data.room);
+        }
+
+        // Close modal if opened
+        $('#modal_joinroom').modal('hide');
+    });
+
+    // Unsubscription to room confirmed
+    socket.on('unsubscriptionConfirmed', function(data) {
+        // Remove room space in interface
+        if (roomExists(data.room)) {
+            removeRoomTab(data.room);
+            removeRoom(data.room);
+        }
+    });
+
+    // User joins room
+    socket.on('userJoinsRoom', function(data) {
+        console.log("userJoinsRoom: %s", JSON.stringify(data));
+        // Log join in conversation
+        addMessage(data);
+    
+        // Add user to connected users list
+        addUser(data);
+    });
+
+    // User leaves room
+    socket.on('userLeavesRoom', function(data) {
+        console.log("userLeavesRoom: %s", JSON.stringify(data));
+        // Log leave in conversation
+        addMessage(data);
+
+        // Remove user from connected users list
+        removeUser(data);
+    });
+
+    // Message received
+    socket.on('newMessage', function (data) {
+        console.log("newMessage: %s", JSON.stringify(data));
+        addMessage(data);
+
+        // Scroll down room messages
+        var room_messages = '#'+data.room+' #room_messages';
+        $(room_messages).animate({
+            scrollTop: $(room_messages).height()
+        }, 300);
+    });
+
+    // Users in room received
+    socket.on('usersInRoom', function(data) {
+        console.log('usersInRoom: %s', JSON.stringify(data));
+        _.each(data.users, function(user) {
+            addUser(user);
+        });
+    });
+
+    // User nickname updated
+    socket.on('userNicknameUpdated', function(data) {
+        console.log("userNicknameUpdated: %s", JSON.stringify(data));
+        updateNickname(data);
+
+        msg = '----- ' + data.oldUsername + ' is now ' + data.newUsername + ' -----';
+        var info = {'room':data.room, 'username':'Radio-bot', 'msg':msg};
+        addMessage(info);
+    });
+
+    // ***************************************************************************
+    // Templates and helpers
+    // ***************************************************************************
+    
+    var templates = {};
+    var getTemplate = function(path, callback) {
+        var source;
+        var template;
+ 
+        // Check first if we've the template cached
+        if (_.has(templates, path)) {
+            if (callback) callback(templates[path]);
+        // If not we get and compile it
+        } else {
+            $.ajax({
+                url: path,
+                success: function(data) {
+                    source = data;
+                    template = Handlebars.compile(source);
+                    // Store compiled template in cache
+                    templates[path] = template;
+                    if (callback) callback(template);
+                }
+            });
+        }
+    }
+
+    // Add room tab
+    var addRoomTab = function(room) {
+        getTemplate('js/templates/room_tab.handlebars', function(template) {
+            $('#rooms_tabs').append(template({'room':room}));
+        });
+    };
+
+    // Remove room tab
+    var removeRoomTab = function(room) {
+        var tab_id = "#"+room+"_tab";
+        $(tab_id).remove();
+    };
+
+    // Add room
+    var addRoom = function(room) {
+        getTemplate('js/templates/room.handlebars', function(template) {
+            $('#rooms').append(template({'room':room}));
+        
+            // Toogle to created room
+            var newroomtab = '[href="#'+room+'"]';
+            $(newroomtab).click();
+
+            // Get users connected to room
+            socket.emit('getUsersInRoom', {'room':room});
+        });
+    };
+    
+    // Remove room
+    var removeRoom = function(room) {
+        var room_id = "#"+room;
+        $(room_id).remove();
+    };
+
+    // Add message to room
+    var addMessage = function(msg) {
+        getTemplate('js/templates/message.handlebars', function(template) {
+            var room_messages = '#'+msg.room+' #room_messages';
+            $(room_messages).append(template(msg));
+        });
+    };
+    
+    // Add user to connected users list
+    var addUser = function(user) {
+        getTemplate('js/templates/user.handlebars', function(template) {
+            var room_users = '#'+user.room+' #room_users';
+            // Add only if it doesn't exist in the room
+            var user_badge = '#'+user.room+' #'+user.id;
+            if (!($(user_badge).length)) {
+                $(room_users).append(template(user));
+            }
+        });
+    }
+
+    // Remove user from connected users list
+    var removeUser = function(user) {
+        var user_badge = '#'+user.room+' #'+user.id;
+        $(user_badge).remove();
+    };
+
+    // Check if room exists
+    var roomExists = function(room) {
+        var room_selector = '#'+room;
+        if ($(room_selector).length) {
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    // Get current room
+    var getCurrentRoom = function() {
+        return $('li[id$="_tab"][class="active"]').text();
+    };
+
+    // Get message text from input field
+    var getMessageText = function() {
+        var text = $('#message_text').val();
+        $('#message_text').val("");
+        return text;
+    };
+
+    // Get room name from input field
+    var getRoomName = function() {
+        var name = $('#room_name').val().trim();
+        $('#room_name').val("");
+        return name;
+    };
+
+    // Get nickname from input field
+    var getNickname = function() {
+        var nickname = $('#nickname').val();
+        $('#nickname').val("");
+        return nickname;
+    };
+
+    // Update nickname in badges
+    var updateNickname = function(data) {
+        var badges = '#'+data.room+' #'+data.id;
+        $(badges).text(data.newUsername);
+    };
+
+    // ***************************************************************************
+    // Events
+    // ***************************************************************************
+
+    // Send new message
+    $('#b_send_message').click(function(eventObject) {
+        eventObject.preventDefault();
+        if ($('#message_text').val() != "") {
+            socket.emit('newMessage', {'room':getCurrentRoom(), 'msg':getMessageText()});
+        }
+    });
+
+    // Join new room
+    $('#b_join_room').click(function(eventObject) {
+        var roomName = getRoomName();
+
+        if (roomName) {
+            eventObject.preventDefault();
+            socket.emit('subscribe', {'rooms':[roomName]}); 
+
+        // Added error class if empty room name
+        } else {
+            $('#room_name').addClass('error');
+        }
+    });
+
+    // Leave current room
+    $('#b_leave_room').click(function(eventObject) {
+        eventObject.preventDefault();
+        var currentRoom = getCurrentRoom();
+        if (currentRoom != 'MainRoom') {
+            socket.emit('unsubscribe', {'rooms':[getCurrentRoom()]}); 
+
+            // Toogle to MainRoom
+            $('[href="#MainRoom"]').click();
+        } else {
+            console.log('Cannot leave MainRoom, sorry');
+        }
+    });
+
+    // Remove error style to hide modal
+    $('#modal_joinroom').on('hidden.bs.modal', function (e) {
+        if ($('#room_name').hasClass('error')) {
+            $('#room_name').removeClass('error');
+        }
+    });
+
+    // Set nickname
+    $('#b_set_nickname').click(function(eventObject) {
+        eventObject.preventDefault();
+        socket.emit('setNickname', {'username':getNickname()});
+
+        // Close modal if opened
+        $('#modal_setnick').modal('hide');
+    });
+
+})();
+

+ 19 - 28
app/js/radio.min.js

@@ -32,13 +32,13 @@
 
     // Disconnected from server
     socket.on('disconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'RadioRobot', 'msg':'- Lost connection -'};
+        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Lost connection ----'};
         addMessage(info);
     });
     
     // Reconnected to server
     socket.on('reconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'RadioRobot', 'msg':'- Reconnected -'};
+        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Reconnected ----'};
         addMessage(info);
     });
 
@@ -109,7 +109,7 @@
         updateNickname(data);
 
         msg = '----- ' + data.oldUsername + ' is now ' + data.newUsername + ' -----';
-        var info = {'room':data.room, 'username':'RadioRobot', 'msg':msg};
+        var info = {'room':data.room, 'username':'Radio-bot', 'msg':msg};
         addMessage(info);
     });
 
@@ -368,35 +368,25 @@ $(function(){
 });
 */
 
-
 amplitude_config = {
-	"amplitude_songs": [
-		{
-			"url": "http://code.davidawindham.com:8008/stream",
-			"live": true
-		}
-	],
-	"amplitude_volume": 90
+  amplitude_songs: []
+//	"amplitude_songs": [{
+//			"url": "http://code.davidawindham.com:8008/stream",
+//			"live": true
+//		}],
+//	"amplitude_volume": 90
 }
 
-function get_radio_tower() {
-	return 'img/radio.gif';
-}
-function get_radio_none() {
-	return 'img/none.svg';
-}
-function get_radio_eq() {
-	return 'img/eq.gif';
-}
-function get_radio_eq_none() {
-	return 'img/1.png';
-}
+function get_radio_tower() {return 'img/radio.gif';}
+function get_radio_none() {return 'img/none.svg';}
+function get_radio_eq() {return 'img/eq.gif';}
+function get_radio_eq_none() {return 'img/1.png';}
 
 function radioTitle() {
 	$('#radio').attr('src', get_radio_none()).fadeIn(300);
 	$('#eq').attr('src', get_radio_eq_none()).fadeIn(300);
-    var url = 'http://code.davidawindham.com:8008/status2.xsl';
-    var mountpoint = '/stream';
+//    var url = 'http://code.davidawindham.com:8008/status2.xsl';
+/*    var mountpoint = '/stream';
     $.ajax({ type: 'GET',
           url: url,
           async: true,
@@ -405,7 +395,7 @@ function radioTitle() {
           dataType: 'jsonp',
           success: function (json) {	
 			$('#track').text(json[mountpoint].title);
-            $('#listeners').text(json[mountpoint].listeners);
+      $('#listeners').text(json[mountpoint].listeners);
 			$('#peak-listeners').text(json[mountpoint].peak_listeners); 
 			$('#bitrate').text(json[mountpoint].bitrate); 
 			$('#radio').attr('src', get_radio_tower()).fadeIn(300);
@@ -416,9 +406,10 @@ function radioTitle() {
 			  $('#eq').attr('src', get_radio_eq_none()).fadeIn(300);
         }
     });
+*/
 }
 
 $(document).ready(function () {
-    setTimeout(function () {radioTitle();}, 2000);
-    setInterval(function () {radioTitle();}, 30000); // update every 30 seconds
+    //setTimeout(function () {radioTitle();}, 2000);
+    //setInterval(function () {radioTitle();}, 30000); // update every 30 seconds
 });

+ 1 - 1
app/js/templates/message.handlebars

@@ -1,3 +1,3 @@
 <!-- Message -->
-<span class="label label-info">{{username}}</span>&nbsp;&nbsp;{{msg}}<br/>
+<span class="label label-success">{{username}}</span>&nbsp;&nbsp;{{msg}}<br/>
 <!-- End Message -->

+ 2 - 2
app/js/templates/room.handlebars

@@ -3,7 +3,7 @@
     <div class="row-fluid">
         <div class="span12 well">
             <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
-                <span class="label label-info">ServerBot</span>&nbsp;&nbsp;Welcome to the room :)<br/>
+                <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;New Room Created<br/>
             </div>
         </div>
     </div>
@@ -14,7 +14,7 @@
     </div>
     <div class="row-fluid">
         <div id="room_users" class="span12">
-            <span class="badge badge-inverse">ServerBot</span>
+            <span class="badge badge-inverse">Radio-bot</span>
         </div>
     </div>
 </div>

BIN
dump.rdb


+ 29 - 6
src/css/main.css

@@ -32,6 +32,17 @@ header .intro-text {
 .scrollable-list {
   overflow: scroll;
   height: 250px;
+  border-top:1px solid #cecece;
+  border-bottom:1px solid #cecece;
+}
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
 }
 
 div#player{
@@ -46,25 +57,37 @@ div#player{
 	margin: 0 0 10px;
 }
 #controls{
-	float: left;
+	right: left;
 }
 #amplitude-volume-slider{
-	width: 90%;
-	float: right;
+	width: 80%;
+	margin: 0 auto;
+  line-height:14px;
 }
 #amplitude-play-pause{
-	width: 15px;
-	height: 17px;
-	margin: 0 5px 0 0;
+	width: 30px;
+	height: 34px;
+	margin: -40px 5px 0 0;
 	cursor: pointer;
 	float: right;
+  background-color:red;
 }
 #amplitude-current-time{
 	font-family: 'PT Sans', sans-serif;
 	font-size: 14px;
 	font-weight: 400;
 }
+.amplitude-paused:before;{
+  content:"\20ac";
+  font-family:"Glyphicons Halflings";
+  line-height:1;
+  margin:10px;
+  display:inline-block;
+}
+
 .amplitude-paused{
+  content:"\20ac";
+  font-family:"Glyphicons Halflings";
 	background-image: url('../img/small-gray-play.png');
 	background-repeat: no-repeat;
 }

File diff suppressed because it is too large
+ 109 - 82
src/index.html


+ 3 - 3
src/js/main.js

@@ -32,13 +32,13 @@
 
     // Disconnected from server
     socket.on('disconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'RadioRobot', 'msg':'- Lost connection -'};
+        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Lost connection ----'};
         addMessage(info);
     });
     
     // Reconnected to server
     socket.on('reconnect', function (data) {
-        var info = {'room':'MainRoom', 'username':'RadioRobot', 'msg':'- Reconnected -'};
+        var info = {'room':'MainRoom', 'username':'Radio-bot', 'msg':'---- Reconnected ----'};
         addMessage(info);
     });
 
@@ -109,7 +109,7 @@
         updateNickname(data);
 
         msg = '----- ' + data.oldUsername + ' is now ' + data.newUsername + ' -----';
-        var info = {'room':data.room, 'username':'RadioRobot', 'msg':msg};
+        var info = {'room':data.room, 'username':'Radio-bot', 'msg':msg};
         addMessage(info);
     });
 

+ 16 - 25
src/js/radio.js

@@ -66,35 +66,25 @@ $(function(){
 });
 */
 
-
 amplitude_config = {
-	"amplitude_songs": [
-		{
-			"url": "http://code.davidawindham.com:8008/stream",
-			"live": true
-		}
-	],
-	"amplitude_volume": 90
+  amplitude_songs: []
+//	"amplitude_songs": [{
+//			"url": "http://code.davidawindham.com:8008/stream",
+//			"live": true
+//		}],
+//	"amplitude_volume": 90
 }
 
-function get_radio_tower() {
-	return 'img/radio.gif';
-}
-function get_radio_none() {
-	return 'img/none.svg';
-}
-function get_radio_eq() {
-	return 'img/eq.gif';
-}
-function get_radio_eq_none() {
-	return 'img/1.png';
-}
+function get_radio_tower() {return 'img/radio.gif';}
+function get_radio_none() {return 'img/none.svg';}
+function get_radio_eq() {return 'img/eq.gif';}
+function get_radio_eq_none() {return 'img/1.png';}
 
 function radioTitle() {
 	$('#radio').attr('src', get_radio_none()).fadeIn(300);
 	$('#eq').attr('src', get_radio_eq_none()).fadeIn(300);
-    var url = 'http://code.davidawindham.com:8008/status2.xsl';
-    var mountpoint = '/stream';
+//    var url = 'http://code.davidawindham.com:8008/status2.xsl';
+/*    var mountpoint = '/stream';
     $.ajax({ type: 'GET',
           url: url,
           async: true,
@@ -103,7 +93,7 @@ function radioTitle() {
           dataType: 'jsonp',
           success: function (json) {	
 			$('#track').text(json[mountpoint].title);
-            $('#listeners').text(json[mountpoint].listeners);
+      $('#listeners').text(json[mountpoint].listeners);
 			$('#peak-listeners').text(json[mountpoint].peak_listeners); 
 			$('#bitrate').text(json[mountpoint].bitrate); 
 			$('#radio').attr('src', get_radio_tower()).fadeIn(300);
@@ -114,9 +104,10 @@ function radioTitle() {
 			  $('#eq').attr('src', get_radio_eq_none()).fadeIn(300);
         }
     });
+*/
 }
 
 $(document).ready(function () {
-    setTimeout(function () {radioTitle();}, 2000);
-    setInterval(function () {radioTitle();}, 30000); // update every 30 seconds
+    //setTimeout(function () {radioTitle();}, 2000);
+    //setInterval(function () {radioTitle();}, 30000); // update every 30 seconds
 });

+ 1 - 1
src/js/templates/message.handlebars

@@ -1,3 +1,3 @@
 <!-- Message -->
-<span class="label label-info">{{username}}</span>&nbsp;&nbsp;{{msg}}<br/>
+<span class="label label-success">{{username}}</span>&nbsp;&nbsp;{{msg}}<br/>
 <!-- End Message -->

+ 2 - 2
src/js/templates/room.handlebars

@@ -3,7 +3,7 @@
     <div class="row-fluid">
         <div class="span12 well">
             <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
-                <span class="label label-info">ServerBot</span>&nbsp;&nbsp;Welcome to the room :)<br/>
+                <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;New Room Created<br/>
             </div>
         </div>
     </div>
@@ -14,7 +14,7 @@
     </div>
     <div class="row-fluid">
         <div id="room_users" class="span12">
-            <span class="badge badge-inverse">ServerBot</span>
+            <span class="badge badge-inverse">Radio-bot</span>
         </div>
     </div>
 </div>