Synchornization on join + chat bugfixes

public/js/chat.js

@@ -36,7 +36,12 @@ function onYouTubePlayerAPIReady() {
         // 3 bufforing, 1 playing, 2 paused, -1 stopped entirely
         if (e.data !== 3) {
             const time = e.target.getCurrentTime();
-            socket.emit('onPlayerState', e.data, time);
+            socket.emit(
+                'onPlayerState',
+                e.data,
+                time,
+                videoIdParse(e.target.getVideoUrl())
+            );
         }
     });
 }
@@ -50,9 +55,7 @@ const { username, room } = Qs.parse(location.search, {
 // ###### SOCKETS LOGIC ###### //
 
 socket.on('videoSync', (time, id) => {
-    // console.log(time, id);
     player.loadVideoById(id, time);
-    // player.seekTo(time);
 });
 
 socket.on('changeVideo', (videoId) => {
@@ -65,7 +68,16 @@ socket.on('message', (object) => {
     const user = object.username;
     const createdAt = moment(object.createdAt).format('HH:mm:ss');
 
-    if (string.includes('https') || string.includes('http')) {
+    if (
+        (string.includes('https://') &&
+            (string.includes('.com') ||
+                string.includes('.pl') ||
+                string.includes('.org'))) ||
+        (string.includes('http://') &&
+            (string.includes('.com') ||
+                string.includes('.pl') ||
+                string.includes('.org')))
+    ) {
         const html = Mustache.render(htmlTemplate[1], {
             user,
             string,
@@ -158,7 +170,10 @@ form.addEventListener('submit', (e) => {
     input.focus();
 
     // Disable form
-    if (input.value === '') return;
+    if (input.value === '' || input.value === ' ')
+        return alert('Your message is blank');
+    else if (input.value[0] === ' ')
+        return alert('Delete the space at the beggining');
     button.setAttribute('disabled', 'disabled');
 
     socket.emit('message', input.value, (error) => {
@@ -226,17 +241,26 @@ const videoIdParse = (link) => {
         return link.slice(link.indexOf('v=') + 2);
     }
 };
-
-span.onclick = function () {
-    modal.style.display = 'none';
-    chatBox.style.visibility = 'visible';
-};
-window.onclick = function (event) {
-    if (event.target == modal) {
+socket.on('joinSynchronization', (ytVideoToSync) => {
+    span.onclick = function () {
         modal.style.display = 'none';
         chatBox.style.visibility = 'visible';
-    }
-};
+        // TUTAJ LOGIKA
+        if (!ytVideoToSync) return;
+        player.loadVideoById(ytVideoToSync);
+    };
+
+    window.onclick = function (event) {
+        if (event.target == modal) {
+            modal.style.display = 'none';
+            chatBox.style.visibility = 'visible';
+            if (!ytVideoToSync) return;
+            player.loadVideoById(ytVideoToSync);
+        }
+    };
+
+    return console.log(ytVideoToSync);
+});
 
 // TEMPLATES
 const sidebarTemplate = `<h2 class="room-title">{{room}}</h2>
@@ -260,7 +284,7 @@ const htmlTemplate = [
         <span class="message__name"> {{user}} </span>
         <span class="message__meta"> {{createdAt}} </span>
     </p>
-    <p><a href="{{string}}">Link</a></p>
+    <p><a href="{{string}}">{{string}}</a></p>
 </div>`,
     `<div class="message">
 <p class="welcome-mess">{{string}}</p>

src/index.js

@@ -10,6 +10,7 @@ const {
     getUser,
     getUsersInRoom,
 } = require('./utils/users');
+const { addVideo, getVideo } = require('./utils/videos');
 
 const app = express();
 app.set('view engine', 'hbs');
@@ -39,6 +40,9 @@ io.on('connection', (socket) => {
             'message',
             generateMessage(`Welcome to the server, ${username}!`)
         );
+
+        socket.emit('joinSynchronization', getVideo(user.room));
+
         socket.broadcast
             .to(user.room)
             .emit('message', generateMessage(`${user.username} has joined`));
@@ -51,7 +55,6 @@ io.on('connection', (socket) => {
 
     socket.on('videoSync', (time, id) => {
         const user = getUser(socket.id);
-        // console.log(time);
         io.to(user.room).emit('videoSync', time, id);
     });
 
@@ -66,7 +69,6 @@ io.on('connection', (socket) => {
         const filter = new Filter();
 
         if (filter.isProfane(message)) message = filter.clean(message);
-        //callback('Profanity is not allowed');
         try {
             io.to(user.room).emit(
                 'message',
@@ -80,9 +82,11 @@ io.on('connection', (socket) => {
     });
 
     // Changing state of yt player after recv -> send data.e
-    socket.on('onPlayerState', (data, time) => {
+    socket.on('onPlayerState', (data, time, videoID) => {
         const user = getUser(socket.id);
         if (user) {
+            addVideo({ room: user.room, videoID });
+
             io.to(user.room).emit('onPlayerState', data, time);
         }
     });

views/chat.html

@@ -30,17 +30,17 @@
       To change video paste your youtube link and click "Change video"<br>
       To synchronize your video between users, click "Synchronize videos" button<br>
       If you see the video "YouTube Developers live:..." you can paste your own link to the youtube video or ask for a synchronization<br>
+      
     </p>
   </div>
 </div>
   <div class="chat">
     <div class = player id="ytplayer"></div>
-
     <div class="chat__sidebar">
     </div>
     <div class="chat__main">
       <div id="messages-container" class="chat__messages"> </div>
-
+      
         <div class="compose">
           <form action="POST" id="sendMessForm">
             <input placeholder="Write your message">