fully working embedded player + chat

package-lock.json

@@ -589,6 +589,11 @@
         "unpipe": "~1.0.0"
       }
     },
+    "foreachasync": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/foreachasync/-/foreachasync-3.0.0.tgz",
+      "integrity": "sha1-VQKYfchxS+M5IJfzLgBxyd7gfPY="
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -658,6 +663,18 @@
       "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
       "dev": true
     },
+    "handlebars": {
+      "version": "4.7.6",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
+      "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+      "requires": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.0",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4",
+        "wordwrap": "^1.0.0"
+      }
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -670,6 +687,15 @@
       "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
       "dev": true
     },
+    "hbs": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/hbs/-/hbs-4.1.1.tgz",
+      "integrity": "sha512-6QsbB4RwbpL4cb4DNyjEEPF+suwp+3yZqFVlhILEn92ScC0U4cDCR+FDX53jkfKJPhutcqhAvs+rOLZw5sQrDA==",
+      "requires": {
+        "handlebars": "4.7.6",
+        "walk": "2.3.14"
+      }
+    },
     "http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -913,8 +939,7 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
-      "dev": true
     },
     "ms": {
       "version": "2.0.0",
@@ -926,6 +951,11 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
     "nodemon": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.7.tgz",
@@ -1293,6 +1323,11 @@
         }
       }
     },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
     "statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -1421,6 +1456,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "uglify-js": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.12.5.tgz",
+      "integrity": "sha512-SgpgScL4T7Hj/w/GexjnBHi3Ien9WS1Rpfg5y91WXMj9SY997ZCQU76mH4TpLwwfmMvoOU8wiaRkIf6NaH3mtg==",
+      "optional": true
+    },
     "undefsafe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
@@ -1484,6 +1525,14 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
+    "walk": {
+      "version": "2.3.14",
+      "resolved": "https://registry.npmjs.org/walk/-/walk-2.3.14.tgz",
+      "integrity": "sha512-5skcWAUmySj6hkBdH6B6+3ddMjVQYH5Qy9QGbPmN8kVmLteXk+yVXg+yfk1nbX30EYakahLrr8iPcCxJQSCBeg==",
+      "requires": {
+        "foreachasync": "^3.0.0"
+      }
+    },
     "widest-line": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
@@ -1493,6 +1542,11 @@
         "string-width": "^4.0.0"
       }
     },
+    "wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "bad-words": "^3.0.4",
     "express": "^4.17.1",
+    "hbs": "^4.1.1",
     "socket.io": "^3.1.0"
   },
   "devDependencies": {

public/css/styles.css

@@ -90,21 +90,41 @@ button:disabled {
 }
 
 .chat__sidebar {
-    height: 100vh;
+    position: relative;
+    top: 51vh;
+    /* left: 1vh; */
+    /* right: 1vh; */
+    /* z-index: 2; */
+    height: 49vh;
     color: rgb(223, 223, 223);
     background: #333744;
-    width: 225px;
+    width: 50%;
     overflow-y: scroll;
     scroll-behavior: smooth;
 }
 
+/* embedded player div */
+.player {
+    position: absolute;
+    left: 1vh;
+    top: 1vh;
+    width: 49%;
+    height: 49%;
+    z-index: 1;
+    /* margin-top: 5px; */
+    /* margin-left: 5px; */
+}
+
 /* Chat styles */
 
 .chat__main {
+    position: relative;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-    max-height: 100vh;
+    height: 100vh;
+    /* margin-left: 20vh; */
+    background-color: rgb(233, 233, 233);
 }
 
 .chat__messages {

public/index.html

@@ -17,17 +17,25 @@
   <div class="centered-form">
     <div class="centered-form__box">
       <h1>Join</h1>
-      <form action="/chat.html">
+      <form action="/chat">
         <label>Display name</label>
         <input type="text" name="username" placeholder="Display name" required>
         <label>Room</label>
-        <input type="text" name="room" placeholder="Room" required>
+        <input type="text" id="roomID" name="room" placeholder="Room" required>
-        <button type="submit">Join</button>
+        <button type="submit">Join or create</button>
       </form>
       <p class="myPar">or</p>
-      <button type="submit">Generate room</button>
+      <button type="submit" id="generateIdButton">Generate unique id</button>
     </div>
 
   </div>
+  <script>
+    const generateIdButton = document.querySelector('#generateIdButton');
+    const room = document.querySelector('#roomID');
+    generateIdButton.addEventListener('click', e => {
+      const id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+      room.value = id;
+    });
+  </script>
 </body>
 </html>

public/js/chat.js

@@ -7,6 +7,8 @@ const input = form.childNodes[1];
 const button = form.childNodes[3];
 const messageContainer = document.querySelector('#messages-container');
 const sidebarContainer = document.querySelector('.chat__sidebar');
+const changeVideoButton = document.querySelector('#changeVideo');
+const syncVideosButton = document.querySelector('#syncVideos');
 
 // TEMPLATES
 const sidebarTemplate = `<h2 class="room-title">{{room}}</h2>
@@ -38,7 +40,83 @@ const htmlTemplate = [
 ];
 
 let message = '';
-// let user = window.prompt('Please state your username', 'User');
+let videoId = '';
+
+// YT PLAYER LOGIC
+
+// Load the IFrame Player API code asynchronously.
+var tag = document.createElement('script');
+tag.src = 'https://www.youtube.com/player_api';
+var firstScriptTag = document.getElementsByTagName('script')[0];
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+// Replace the 'ytplayer' element with an <iframe> and
+// YouTube player after the API code downloads.
+var player;
+function onYouTubePlayerAPIReady() {
+    player = new YT.Player('ytplayer', {
+        height: '420',
+        width: '860',
+        videoId: 'xFqeAUKU09o',
+    });
+
+    // STATE OF PLAYER
+    player.addEventListener('onStateChange', (e) => {
+        // 3 bufforing, 1 playing, 2 paused, -1 stopped entirely
+        if (e.data !== 3) {
+            const time = e.target.getCurrentTime();
+            socket.emit('onPlayerState', e.data, time);
+        }
+    });
+}
+
+// ON PLAYER STATE DATA RECV
+socket.on('onPlayerState', (data, time) => {
+    if (data === 1 || data === -1) {
+        // player.seekTo(time, true);
+        player.playVideo();
+    } else if (data === 2) {
+        if (Math.abs(player.getCurrentTime() - time) > 2) {
+            player.seekTo(time, true);
+            player.playVideo();
+        } else {
+            player.pauseVideo();
+        }
+    } else if (data === 0) player.stopVideo();
+});
+
+const videoIdParse = (link) => {
+    return link.slice(link.indexOf('v=') + 2);
+};
+
+// SYNC VIDEOS
+syncVideosButton.addEventListener('click', () => {
+    // console.log('syncing');
+    const time = player.getCurrentTime();
+    const id = videoIdParse(player.getVideoUrl());
+    // console.log(time);
+    socket.emit('videoSync', time, id);
+});
+
+socket.on('videoSync', (time, id) => {
+    // console.log(time, id);
+    player.loadVideoById(id, time);
+    // player.seekTo(time);
+});
+
+// Change video
+changeVideoButton.addEventListener('click', () => {
+    let link = input.value;
+    if (!link) return alert('You should pass the youtube link');
+    const videoId = videoIdParse(link);
+    socket.emit('changeVideo', videoId);
+    player.loadVideoById(`${videoId}`, 5, 'large');
+    input.value = '';
+});
+
+socket.on('changeVideo', (videoId) => {
+    player.loadVideoById(`${videoId}`, 5, 'large');
+});
 
 const autoscroll = () => {
     // New message elemnt
@@ -59,7 +137,6 @@ const autoscroll = () => {
     const scrolloffset = messageContainer.scrollTop + visibleHeight + 15;
 
     if (containerHeight - newMessageHeight <= scrolloffset) {
-        console.log('should scroll down');
         messageContainer.scrollTop = messageContainer.scrollHeight;
     }
 };
@@ -67,10 +144,9 @@ const autoscroll = () => {
 const { username, room } = Qs.parse(location.search, {
     ignoreQueryPrefix: true,
 });
-console.log(username, room);
 
 socket.on('message', (object) => {
-    console.log(object);
+    // console.log(object);
     const string = object.text;
     const user = object.username;
     const createdAt = moment(object.createdAt).format('HH:mm:ss');
@@ -84,7 +160,7 @@ socket.on('message', (object) => {
         messageContainer.insertAdjacentHTML('beforeend', html);
         autoscroll();
 
-        console.log('not includes');
+        // console.log('not includes');
     } else if (string.includes('Welcome to the server')) {
         const html = Mustache.render(htmlTemplate[2], {
             string,
@@ -115,7 +191,7 @@ form.addEventListener('submit', (e) => {
         // Re-enable form
         button.removeAttribute('disabled');
         if (error) return console.log(error);
-        console.log('Message delivered');
+        // console.log('Message delivered');
         input.value = '';
         input.focus();
     });
@@ -133,7 +209,7 @@ buttonLocation.addEventListener('click', (e) => {
         const coordsObj = `https://www.google.com/maps/?q=${latitude},${longitude}`;
 
         socket.emit('message', coordsObj, () => {
-            console.log('Location delivered');
+            // console.log('Location delivered');
             buttonLocation.removeAttribute('disabled');
         });
     });
@@ -144,6 +220,10 @@ socket.on('roomData', ({ room, users }) => {
     sidebarContainer.innerHTML = html;
 });
 
+socket.on('videoData', (videoData) => {
+    player.loadVideoById(`${videoData}`, 5, 'large');
+});
+
 socket.emit('join', { username, room }, (error) => {
     if (error) {
         alert(error);

src/index.js

@@ -12,14 +12,19 @@ const {
 } = require('./utils/users');
 
 const app = express();
+app.set('view engine', 'hbs');
+app.engine('html', require('hbs').__express);
 const server = http.createServer(app);
 const io = socketio(server);
 
 const port = process.env.PORT || 3000;
 const publicDirectoryPath = path.join(__dirname, '../public');
-
 app.use(express.static(publicDirectoryPath));
 
+app.get('/chat', (req, res) => {
+    res.render('chat.html', {});
+});
+
 io.on('connection', (socket) => {
     // Welcome message
 
@@ -34,6 +39,7 @@ io.on('connection', (socket) => {
             'message',
             generateMessage(`Welcome to the server, ${username}!`)
         );
+
         socket.broadcast
             .to(user.room)
             .emit('message', generateMessage(`${user.username} has joined`));
@@ -44,14 +50,24 @@ io.on('connection', (socket) => {
         callback();
     });
 
-    // On recv message
+    socket.on('videoSync', (time, id) => {
+        const user = getUser(socket.id);
+        // console.log(time);
+        io.to(user.room).emit('videoSync', time, id);
+    });
+
+    socket.on('changeVideo', (videoId) => {
+        const user = getUser(socket.id);
+        if (!user) return;
+        io.to(user.room).emit('changeVideo', videoId);
+    });
+
     socket.on('message', (message, callback) => {
         const user = getUser(socket.id);
         const filter = new Filter();
 
         if (filter.isProfane(message)) message = filter.clean(message);
         //callback('Profanity is not allowed');
-        console.log(user);
         try {
             io.to(user.room).emit(
                 'message',
@@ -64,9 +80,17 @@ io.on('connection', (socket) => {
         callback();
     });
 
+    // Changing state of yt player after recv -> send data.e
+    socket.on('onPlayerState', (data, time) => {
+        const user = getUser(socket.id);
+        if (user) {
+            io.to(user.room).emit('onPlayerState', data, time);
+        }
+    });
+
     socket.on('disconnect', () => {
         const user = removeUser(socket.id);
-        if (user)
+        if (user) {
             io.to(user.room).emit(
                 'message',
                 generateMessage(`${user.username} has left!`)
@@ -75,6 +99,7 @@ io.on('connection', (socket) => {
                 room: user.room,
                 users: getUsersInRoom(user.room),
             });
+        }
     });
 
     socket.on('sendLocation', (object, callback) => {

views/chat.html

@@ -20,8 +20,9 @@
 
 <body>
   <div class="chat">
-    <div class="chat__sidebar">
+    <div class = player id="ytplayer"></div>
 
+    <div class="chat__sidebar">
     </div>
     <div class="chat__main">
       <div id="messages-container" class="chat__messages"> </div>
@@ -31,7 +32,11 @@
             <input placeholder="Write your message">
             <button type="submit" id="formButton">Send</button>    
           </form>
-          <button id="sendLocation">Send location!</button>
+          <button id="sendLocation">Send location</button>
+          <hr style="padding: 6px; border: 0 none; height: 5px; color: rgb(233, 233, 233)">
+          <button id="changeVideo">Change video</button>
+          <hr style="padding: 6px; border: 0 none; height: 5px; color: rgb(233, 233, 233)">
+          <button id="syncVideos">Synchronize videos</button>
         </div>
 
     </div>