From 75b2f3ee3eec673bd4bf8af79613d3d9806bf600 Mon Sep 17 00:00:00 2001
From: Kacper Maj <60718448+kapisolec@users.noreply.github.com>
Date: Thu, 28 Jan 2021 01:34:15 +0100
Subject: [PATCH] few visual changes

---
 public/css/styles.css | 29 ++++++++++++++++++++++-------
 public/js/chat.js     | 32 +++++++++++++++++---------------
 views/chat.html       | 24 +++++++++++++-----------
 3 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index b99784c..5dc8a4b 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -35,6 +35,7 @@ input {
     border: 1px solid #eeeeee;
     padding: 12px;
     outline: none;
+    border-radius: 3px;
 }
 
 button {
@@ -44,7 +45,8 @@ button {
     border: none;
     color: white;
     font-size: 16px;
-    transition: background 0.3s ease;
+    transition: background 0.5s ease;
+    border-radius: 3px;
 }
 
 button:hover {
@@ -91,12 +93,12 @@ button:disabled {
 }
 
 .chat__sidebar {
-    position: relative;
-    top: 51vh;
+    position: absolute;
+    top: 55.5vh;
     /* left: 1vh; */
     /* right: 1vh; */
     /* z-index: 2; */
-    height: 49vh;
+    height: 44.5%;
     color: rgb(223, 223, 223);
     background: #333744;
     width: 50%;
@@ -106,14 +108,16 @@ button:disabled {
 
 /* embedded player div */
 .player {
-    position: absolute;
+    /* display: flex; */
+    display: flex;
+    flex-direction: column;
     left: 1vh;
     top: 1vh;
     width: 49%;
-    height: 49%;
+    height: 56.5vh;
     z-index: 2;
     /* margin-top: 5px; */
-    /* margin-left: 5px; */
+    /* margin-right: 0px; */
 }
 
 /* Chat styles */
@@ -258,3 +262,14 @@ button:disabled {
     text-decoration: none;
     cursor: pointer;
 }
+
+.buttonsDiv {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 24px;
+    /* justify-content: right; */
+}
+.space-between {
+    margin-left: 12px;
+}
diff --git a/public/js/chat.js b/public/js/chat.js
index 0d9a525..be5346b 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -159,22 +159,22 @@ socket.emit('join', { username, room }, (error) => {
 
 // SYNC VIDEOS BUTTON
 
-// syncVideosButton.addEventListener('click', () => {
-//     console.log(player.getVideoUrl());
+syncVideosButton.addEventListener('click', () => {
+    console.log(player.getVideoUrl());
 
-//     // If video is the same as starting video
-//     if (
-//         videoIdParse(player.getVideoUrl()) ===
-//         videoIdParse(`https://youtube.com/watch?v=M7lc1UVf-VE`)
-//     )
-//         return alert(
-//             'This is a default video, you cannot synchronize it. \nWrite a request for synchronization in the chat or paste your own link.'
-//         );
+    // If video is the same as starting video
+    if (
+        videoIdParse(player.getVideoUrl()) ===
+        videoIdParse(`https://youtube.com/watch?v=M7lc1UVf-VE`)
+    )
+        return alert(
+            'This is a default video, you cannot synchronize it. \nWrite a request for synchronization in the chat or paste your own link.'
+        );
 
-//     const time = player.getCurrentTime();
-//     const id = videoIdParse(player.getVideoUrl());
-//     socket.emit('videoSync', time, id);
-// });
+    const time = player.getCurrentTime();
+    const id = videoIdParse(player.getVideoUrl());
+    socket.emit('videoSync', time, id);
+});
 
 // Change video
 changeVideoButton.addEventListener('click', () => {
@@ -253,7 +253,9 @@ const autoscroll = () => {
 
 // Parsing yt video
 const videoIdParse = (link) => {
-    if (link.includes('&ab_channel')) {
+    console.log(link);
+    if (link === 'https://www.youtube.com/watch') return;
+    else if (link.includes('&ab_channel')) {
         const substr = link.substring(
             link.indexOf('v=') + 2,
             link.indexOf('&')
diff --git a/views/chat.html b/views/chat.html
index a0422e3..a92ecaa 100644
--- a/views/chat.html
+++ b/views/chat.html
@@ -25,11 +25,10 @@
   <div class="modal-content">
     <span class="close">&times;</span>
     <p class="modal-text"><h4>Manual:</h4>
-      To send messages write text in the input and then click "Send" button<br>
-      To send location just click "Send Location" button<br>
-      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>
+      <li>To send messages write text in the input fi and then click "Send" button</li>
+      <li>To send location just click "Send Location" button</li>
+      <li>To change video paste your youtube link and click "Change video"</li>
+      <li>To synchronize your video between users, click "Synchronize videos" button</li>
       
     </p>
   </div>
@@ -44,15 +43,18 @@
         <div class="compose">
           <form action="POST" id="sendMessForm">
             <input placeholder="Write your message" autocomplete="off">
-            <button type="submit" id="formButton">Send</button>    
+            <button class="sendMessage" type="submit" id="formButton">Send</button>    
           </form>
-          <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 class="buttonsDiv">
+        
+        <!-- <hr style="padding: 6px; border: 0 none; height: 5px; color: rgb(233, 233, 233)"> -->
+        <button id="changeVideo" class="space-between">Change video</button>
+        <!-- <hr style="padding: 6px; border: 0 none; height: 5px; color: rgb(233, 233, 233)"> -->
+        <button id="syncVideos" class="space-between">Synchronize videos</button>
+        <button id="sendLocation" class="space-between">Send location</button>
 
+        </div>
     </div>
   </div>