s457990/Watch-with-friends
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Changes to video sync and yt link parser

Browse Source
This commit is contained in:
Kacper Maj 2021-01-25 21:36:57 +01:00
parent 0531f67222
commit 17c987691a
3 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/chat.html
View File

@ -4,12 +4,12 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Chat</title> <title>Watch With Friends!</title>
<link rel="icon" href="/img/favicon.png"> <link rel="icon" href="/img/favicon.png">
<link rel="stylesheet" href="/css/styles.min.css"> <link rel="stylesheet" href="/css/styles.min.css">
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<meta name="description" content="Chat"> <meta name="description" content="Watch with Friends!">
<meta name="author" content="SitePoint"> <meta name="author" content="Kacper Maj">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>

6
public/index.html
View File

@ -4,11 +4,11 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Chat</title> <title>Watch With Friends!</title>
<link rel="icon" href="/img/favicon.png"> <link rel="icon" href="/img/favicon.png">
<link rel="stylesheet" href="/css/styles.min.css"> <link rel="stylesheet" href="/css/styles.min.css">
<meta name="description" content="Chat"> <meta name="description" content="Watch with Friends!">
<meta name="author" content="SitePoint"> <meta name="author" content="Kacper Maj">
</head> </head>

23
public/js/chat.js
View File

@ -86,15 +86,32 @@ socket.on('onPlayerState', (data, time) => {
}); });
const videoIdParse = (link) => { const videoIdParse = (link) => {
if (link.includes('&ab_channel')) {
const substr = link.substring(
link.indexOf('v=') + 2,
link.indexOf('&')
);
return substr;
} else {
return link.slice(link.indexOf('v=') + 2); return link.slice(link.indexOf('v=') + 2);
}
}; };
// SYNC VIDEOS // SYNC VIDEOS
syncVideosButton.addEventListener('click', () => { syncVideosButton.addEventListener('click', () => {
// console.log('syncing'); 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.'
);
const time = player.getCurrentTime(); const time = player.getCurrentTime();
const id = videoIdParse(player.getVideoUrl()); const id = videoIdParse(player.getVideoUrl());
// console.log(time);
socket.emit('videoSync', time, id); socket.emit('videoSync', time, id);
}); });
@ -134,7 +151,7 @@ const autoscroll = () => {
const containerHeight = messageContainer.scrollHeight; const containerHeight = messageContainer.scrollHeight;
// scrolloffset // scrolloffset
const scrolloffset = messageContainer.scrollTop + visibleHeight + 15; const scrolloffset = messageContainer.scrollTop + visibleHeight + 120;
if (containerHeight - newMessageHeight <= scrolloffset) { if (containerHeight - newMessageHeight <= scrolloffset) {
messageContainer.scrollTop = messageContainer.scrollHeight; messageContainer.scrollTop = messageContainer.scrollHeight;