Room URL Sanitation + Key Press Fixes (#67)

Sanitized the URL better to prevent random urls with symbols to be used.
For example "robots.txt" or "favicon.ico". These were random urls that
sometimes accessed the page which caused the user to be placed in the
incorrect room. Also name capped at 30 characters/room capped at 50
characters.

Author: kyle8998

README.md

@@ -3,7 +3,7 @@
 
 ![Vynchronize Screenshot](https://raw.githubusercontent.com/kyle8998/Vynchronize/master/img/screenshot2.PNG)
 
-Vynchronize is a online video synchronization platform where you can watch videos online with friends in real time!
+Vynchronize is a real-time online video synchronization platform. You can enjoy any video available online with friends who may not be next to you!
 
 Vynchronize currently supports YouTube, Daily Motion, Vimeo, and essentially any .mp4/.webm on the internet with the HTML5 Player!
 
@@ -63,7 +63,7 @@ npm test
 
 The entire functionality of Vynchronize relies on web sockets, specifically
 Socket.IO. When a client connects to the server, a socket is created. The user
-then enters a name and room number. The inputs are sent back to the server, and
+then enters a name and a room number. The inputs are sent back to the server, and
 it creates/joins a room of that name with Socket.IO. Any user can connect to the
 room and interact with the users there.
 
@@ -81,10 +81,10 @@ other socket. It will use that data and bring everyone to the correct time.
 
 ##### Hosts
 
-At first it was fine to have no specific host of a room, but I quickly realized
+At first it was fine to have host-less rooms, but I quickly realized
 that people want to be auto-synced rather than hitting the sync button over
-and over. For example if a client joins a room late, I want them to be synced
-immediately.
+and over. For example if you join an already existing room, you want to jump
+right into the content rather than worrying about syncing!
 
 To do this I created a host socket which would be marked when a room is created.
 This host socket is responsible for sending all the important video information
@@ -198,5 +198,7 @@ grabbing the title required extra work, and could not be done continuously on th
 
 ##### In Depth Functionality
 
+**Note**: This was a very brief summary of what goes on behind the scenes.
+
 Please see the [Wiki](https://github.com/kyle8998/Vynchronize/wiki) for more
 information.

index.html

@@ -409,6 +409,8 @@ <h2>Contact Me</h2>
         var roomnum = 1
         var id = "M7lc1UVf-VE"
         var username = ""
+        // Don't allow trailing or leading whitespace!
+        var nosymbols = new RegExp("^(([a-zA-Z0-9_-][a-zA-Z0-9 _-]*[a-zA-Z0-9_-])|([a-zA-Z0-9_-]*))$");
 
         // Chat stuff
         $(function() {
@@ -425,9 +427,6 @@ <h2>Contact Me</h2>
 
             var $vidlist = $('#vidlist');
 
-            // Don't allow trailing or leading whitespace!
-            var nosymbols = new RegExp("^(([a-zA-Z0-9_-][a-zA-Z0-9 _-]*[a-zA-Z0-9_-])|([a-zA-Z0-9_-]*))$");
-
             //   function send_message() {
             //       socket.emit('send message', $message.val());
             //       $message.val('');
@@ -583,6 +582,32 @@ <h2>Contact Me</h2>
 
                 $vidlist.html(html)
             });
+
+
+            // Prevent special characters from being typed
+            $('#roomnum').on('keypress', function(event) {
+                var nosymbols = new RegExp("^[a-zA-Z0-9\s]+$");
+                var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
+                console.log(key)
+                console.log(event.keyCode)
+                // Allow enters and spaces to be used still
+                if ($roomnum.val().length > 50 || !nosymbols.test(key) && event.keyCode != 13 && event.keyCode != 32 && event.keyCode != 45 && event.keyCode != 95) {
+                    event.preventDefault();
+                    return false;
+                }
+            });
+
+            // Prevent special characters from being typed
+            $('#username').on('keypress', function(event) {
+                var nosymbols = new RegExp("^[a-zA-Z0-9\s]+$");
+                var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
+                // Allow enters and spaces to be used still
+                if ($username.val().length > 30 || !nosymbols.test(key) && event.keyCode != 13 && event.keyCode != 32 && event.keyCode != 45 && event.keyCode != 95) {
+                    event.preventDefault();
+                    return false;
+                }
+            });
+
         });
 
         // Remove the video from the queue at idx
@@ -608,20 +633,6 @@ <h2>Contact Me</h2>
         }
 
 
-        // Prevent special characters from being typed
-        $('#roomnum').on('keypress', function(event) {
-            var nosymbols = new RegExp("^[a-zA-Z0-9\s]+$");
-            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
-            console.log(key)
-            console.log(event.keyCode)
-            // Allow enters and spaces to be used still
-            if (!nosymbols.test(key) && event.keyCode != 13 && event.keyCode != 32 && event.keyCode != 45 && event.keyCode != 95) {
-                event.preventDefault();
-                return false;
-            }
-        });
-
-
         // Turn off the lights!
         var per = 0;
         $(document).ready(function() {
@@ -659,7 +670,8 @@ <h2>Contact Me</h2>
 
         // set id
         socket.on('set id', function(data) {
-            if (data.id != "") {
+            // Ensure no valid id too
+            if (data.id != "" && nosymbols.test(data.id)) {
                 document.getElementById('roomnum').value = data.id
                 // Probably should not force it to be readonly
                 // document.getElementById('roomnum').readOnly = true

js/sync.js

@@ -278,7 +278,8 @@ function loveLive(roomnum) {
     // likey, spring love, palette, roller coaster, DNA, I, peekaboo, wee woo
     // rookie, russian roulette, i want you back, TT, whistle, ddu du ddu du, turtle, 24/7
     // something new, #cookie jar, lion heart, i will show you, bubble pop, girl front, love cherry motion, ice cream cake
-    // stay (taeyeon), ordinary love, 11:11, SObeR
+    // stay (taeyeon), ordinary love, 11:11, SObeR, I'm so sick, heaven, genie, dinosaur
+    // Travel
     var video_roulette = [
         '97uviVyw0_o', 'tIWpr3tHzII', 'WkdtmT8A2iY', 'U7mPqycQ0tQ',
         'i0p1bmr0EmE', 'FzVR_fymZw4', 'eNmL4JiGxZQ', 'J_CFBjAyPWE',
@@ -288,11 +289,13 @@ function loveLive(roomnum) {
         'dISNgvVpWlo', 'IHNzOHi8sJs', 'sErJjrLswEw', '-j6XPEUKzn0',
         'im1UUY8dQIk', 'rRgTMs_bGuI', 'nVCubhQ454c', 'MCEcWcIww5k',
         'bw9CALKOvAI', 'tyInv6RWL0Q', 'VBbeuXW8Nko', 'glXgSSOKlls',
-        'k9_XH1YibcY', 'xGav-z5yRiU', 'WLJyhhNCHi0', 'DgT4CPv_CCE'
+        'k9_XH1YibcY', 'xGav-z5yRiU', 'WLJyhhNCHi0', 'DgT4CPv_CCE',
+        'F4oHuML9U2A', 'L9ro1KjkJMg', '6SwiSpudKWI', '8Oz7DG76ibY',
+        'xRbPAVnqtcs'
     ]
 
-    // Random number between 0 and 35 inclusive
-    var random = Math.floor(Math.random() * (36))
+    // Random number between 0 and 40 inclusive
+    var random = Math.floor(Math.random() * (41))
     // Only for YouTube testing
     socket.emit('change video', {
         room: roomnum,

server.js

@@ -55,6 +55,10 @@ io.sockets.on('connection', function(socket) {
     connections.push(socket);
     console.log('Connected: %s sockets connected', connections.length);
 
+    console.log(socket.request.connection.remoteAddress)
+    // console.log(socket.request)
+    console.log(socket.handshake)
+    
     // Set default room, if provided in url
     socket.emit('set id', {
         id: given_room