Synchornization on join + chat bugfixes

This commit is contained in:
Kacper Maj 2021-01-27 12:59:14 +01:00
parent 70eec145b7
commit 2e2f4c808f
3 changed files with 48 additions and 20 deletions

View File

@ -36,7 +36,12 @@ function onYouTubePlayerAPIReady() {
// 3 bufforing, 1 playing, 2 paused, -1 stopped entirely
if (e.data !== 3) {
const time = e.target.getCurrentTime();
socket.emit('onPlayerState', e.data, time);
socket.emit(
'onPlayerState',
e.data,
time,
videoIdParse(e.target.getVideoUrl())
);
}
});
}
@ -50,9 +55,7 @@ const { username, room } = Qs.parse(location.search, {
// ###### SOCKETS LOGIC ###### //
socket.on('videoSync', (time, id) => {
// console.log(time, id);
player.loadVideoById(id, time);
// player.seekTo(time);
});
socket.on('changeVideo', (videoId) => {
@ -65,7 +68,16 @@ socket.on('message', (object) => {
const user = object.username;
const createdAt = moment(object.createdAt).format('HH:mm:ss');
if (string.includes('https') || string.includes('http')) {
if (
(string.includes('https://') &&
(string.includes('.com') ||
string.includes('.pl') ||
string.includes('.org'))) ||
(string.includes('http://') &&
(string.includes('.com') ||
string.includes('.pl') ||
string.includes('.org')))
) {
const html = Mustache.render(htmlTemplate[1], {
user,
string,
@ -158,7 +170,10 @@ form.addEventListener('submit', (e) => {
input.focus();
// Disable form
if (input.value === '') return;
if (input.value === '' || input.value === ' ')
return alert('Your message is blank');
else if (input.value[0] === ' ')
return alert('Delete the space at the beggining');
button.setAttribute('disabled', 'disabled');
socket.emit('message', input.value, (error) => {
@ -226,17 +241,26 @@ const videoIdParse = (link) => {
return link.slice(link.indexOf('v=') + 2);
}
};
span.onclick = function () {
modal.style.display = 'none';
chatBox.style.visibility = 'visible';
};
window.onclick = function (event) {
if (event.target == modal) {
socket.on('joinSynchronization', (ytVideoToSync) => {
span.onclick = function () {
modal.style.display = 'none';
chatBox.style.visibility = 'visible';
}
};
// TUTAJ LOGIKA
if (!ytVideoToSync) return;
player.loadVideoById(ytVideoToSync);
};
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = 'none';
chatBox.style.visibility = 'visible';
if (!ytVideoToSync) return;
player.loadVideoById(ytVideoToSync);
}
};
return console.log(ytVideoToSync);
});
// TEMPLATES
const sidebarTemplate = `<h2 class="room-title">{{room}}</h2>
@ -260,7 +284,7 @@ const htmlTemplate = [
<span class="message__name"> {{user}} </span>
<span class="message__meta"> {{createdAt}} </span>
</p>
<p><a href="{{string}}">Link</a></p>
<p><a href="{{string}}">{{string}}</a></p>
</div>`,
`<div class="message">
<p class="welcome-mess">{{string}}</p>

View File

@ -10,6 +10,7 @@ const {
getUser,
getUsersInRoom,
} = require('./utils/users');
const { addVideo, getVideo } = require('./utils/videos');
const app = express();
app.set('view engine', 'hbs');
@ -39,6 +40,9 @@ io.on('connection', (socket) => {
'message',
generateMessage(`Welcome to the server, ${username}!`)
);
socket.emit('joinSynchronization', getVideo(user.room));
socket.broadcast
.to(user.room)
.emit('message', generateMessage(`${user.username} has joined`));
@ -51,7 +55,6 @@ io.on('connection', (socket) => {
socket.on('videoSync', (time, id) => {
const user = getUser(socket.id);
// console.log(time);
io.to(user.room).emit('videoSync', time, id);
});
@ -66,7 +69,6 @@ io.on('connection', (socket) => {
const filter = new Filter();
if (filter.isProfane(message)) message = filter.clean(message);
//callback('Profanity is not allowed');
try {
io.to(user.room).emit(
'message',
@ -80,9 +82,11 @@ io.on('connection', (socket) => {
});
// Changing state of yt player after recv -> send data.e
socket.on('onPlayerState', (data, time) => {
socket.on('onPlayerState', (data, time, videoID) => {
const user = getUser(socket.id);
if (user) {
addVideo({ room: user.room, videoID });
io.to(user.room).emit('onPlayerState', data, time);
}
});

View File

@ -30,17 +30,17 @@
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>
</p>
</div>
</div>
<div class="chat">
<div class = player id="ytplayer"></div>
<div class="chat__sidebar">
</div>
<div class="chat__main">
<div id="messages-container" class="chat__messages"> </div>
<div class="compose">
<form action="POST" id="sendMessForm">
<input placeholder="Write your message">