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