few visual changes
This commit is contained in:
Kacper Maj
parent
f30ddbe374
commit
75b2f3ee3e
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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('&')
|
||||
|
|
|
|||
|
|
@ -25,11 +25,10 @@
|
|||
<div class="modal-content">
|
||||
<span class="close">×</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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue