few visual changes

This commit is contained in:
Kacper Maj 2021-01-28 01:34:15 +01:00
parent f30ddbe374
commit 75b2f3ee3e
3 changed files with 52 additions and 33 deletions

View File

@ -35,6 +35,7 @@ input {
border: 1px solid #eeeeee; border: 1px solid #eeeeee;
padding: 12px; padding: 12px;
outline: none; outline: none;
border-radius: 3px;
} }
button { button {
@ -44,7 +45,8 @@ button {
border: none; border: none;
color: white; color: white;
font-size: 16px; font-size: 16px;
transition: background 0.3s ease; transition: background 0.5s ease;
border-radius: 3px;
} }
button:hover { button:hover {
@ -91,12 +93,12 @@ button:disabled {
} }
.chat__sidebar { .chat__sidebar {
position: relative; position: absolute;
top: 51vh; top: 55.5vh;
/* left: 1vh; */ /* left: 1vh; */
/* right: 1vh; */ /* right: 1vh; */
/* z-index: 2; */ /* z-index: 2; */
height: 49vh; height: 44.5%;
color: rgb(223, 223, 223); color: rgb(223, 223, 223);
background: #333744; background: #333744;
width: 50%; width: 50%;
@ -106,14 +108,16 @@ button:disabled {
/* embedded player div */ /* embedded player div */
.player { .player {
position: absolute; /* display: flex; */
display: flex;
flex-direction: column;
left: 1vh; left: 1vh;
top: 1vh; top: 1vh;
width: 49%; width: 49%;
height: 49%; height: 56.5vh;
z-index: 2; z-index: 2;
/* margin-top: 5px; */ /* margin-top: 5px; */
/* margin-left: 5px; */ /* margin-right: 0px; */
} }
/* Chat styles */ /* Chat styles */
@ -258,3 +262,14 @@ button:disabled {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
.buttonsDiv {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 24px;
/* justify-content: right; */
}
.space-between {
margin-left: 12px;
}

View File

@ -159,22 +159,22 @@ socket.emit('join', { username, room }, (error) => {
// SYNC VIDEOS BUTTON // SYNC VIDEOS BUTTON
// syncVideosButton.addEventListener('click', () => { syncVideosButton.addEventListener('click', () => {
// console.log(player.getVideoUrl()); console.log(player.getVideoUrl());
// // If video is the same as starting video // If video is the same as starting video
// if ( if (
// videoIdParse(player.getVideoUrl()) === videoIdParse(player.getVideoUrl()) ===
// videoIdParse(`https://youtube.com/watch?v=M7lc1UVf-VE`) videoIdParse(`https://youtube.com/watch?v=M7lc1UVf-VE`)
// ) )
// return alert( return alert(
// 'This is a default video, you cannot synchronize it. \nWrite a request for synchronization in the chat or paste your own link.' '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 time = player.getCurrentTime();
// const id = videoIdParse(player.getVideoUrl()); const id = videoIdParse(player.getVideoUrl());
// socket.emit('videoSync', time, id); socket.emit('videoSync', time, id);
// }); });
// Change video // Change video
changeVideoButton.addEventListener('click', () => { changeVideoButton.addEventListener('click', () => {
@ -253,7 +253,9 @@ const autoscroll = () => {
// Parsing yt video // Parsing yt video
const videoIdParse = (link) => { 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( const substr = link.substring(
link.indexOf('v=') + 2, link.indexOf('v=') + 2,
link.indexOf('&') link.indexOf('&')

View File

@ -25,11 +25,10 @@
<div class="modal-content"> <div class="modal-content">
<span class="close">&times;</span> <span class="close">&times;</span>
<p class="modal-text"><h4>Manual:</h4> <p class="modal-text"><h4>Manual:</h4>
To send messages write text in the input and then click "Send" button<br> <li>To send messages write text in the input fi and then click "Send" button</li>
To send location just click "Send Location" button<br> <li>To send location just click "Send Location" button</li>
To change video paste your youtube link and click "Change video"<br> <li>To change video paste your youtube link and click "Change video"</li>
To synchronize your video between users, click "Synchronize videos" button<br> <li>To synchronize your video between users, click "Synchronize videos" button</li>
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> </p>
</div> </div>
@ -44,15 +43,18 @@
<div class="compose"> <div class="compose">
<form action="POST" id="sendMessForm"> <form action="POST" id="sendMessForm">
<input placeholder="Write your message" autocomplete="off"> <input placeholder="Write your message" autocomplete="off">
<button type="submit" id="formButton">Send</button> <button class="sendMessage" type="submit" id="formButton">Send</button>
</form> </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>
<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>
</div> </div>