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 @@ @@ -44,15 +43,18 @@
- +
- -
- -
+
+ + + + + + +