byte/syncapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flag manual seeking fixing synchronization issue

Browse Source
This commit is contained in:
Daniel
2023-08-15 15:34:32 +03:00
parent e06089d443
commit fe5d862112
4 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/img.png → files/img.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

8
index.js
View File

@@ -71,11 +71,11 @@ app.ws('/ws', (ws, req) => {
} }
if (msg.command == 'pause') { if (msg.command == 'pause') {
broadcastCommand(msg.room_id, 'pause'); broadcastCommand(msg.room_id, 'pause', msg.client_id);
} }
if (msg.command == 'play') { if (msg.command == 'play') {
broadcastCommand(msg.room_id, 'play'); broadcastCommand(msg.room_id, 'play', msg.client_id);
} }
// Websocket command to switch hosts // Websocket command to switch hosts
@@ -163,11 +163,11 @@ function syncClients(room_id, time) {
} }
} }
function broadcastCommand(room_id, command) { function broadcastCommand(room_id, command, client_id) {
const response = { command: command }; const response = { command: command };
const responseJson = JSON.stringify(response); const responseJson = JSON.stringify(response);
for (const client of rooms.get(room_id)) { for (const client of rooms.get(room_id)) {
client.client.send(responseJson); if (client.id != client_id) client.client.send(responseJson);
} }
} }

2
public/client.html
View File

@@ -42,7 +42,7 @@
<div class="container text-center"> <div class="container text-center">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<img height="80" src="http://localhost:3000/img" /> <img height="80" src="http://localhost:3000/api/file/files/img.png" />
</div> </div>
</div> </div>
<div class="row"> <div class="row">

24
public/client.js
View File

@@ -5,7 +5,9 @@ class Client {
constructor(room_id) { constructor(room_id) {
this.#ClientData = { name: 'Guest', id: 0, room: room_id }; this.#ClientData = { name: 'Guest', id: 0, room: room_id };
this.#ClientSocket = new WebSocket('ws://93.116.13.156:3000/ws'); this.#ClientSocket = new WebSocket('ws://93.116.13.156:3000/ws');
this.isManuallyPaused = true;
this.isManuallyPlayed = true;
this.isManuallySeeked = true;
this.host_field = UTL.$('host_field'); this.host_field = UTL.$('host_field');
this.name_field = UTL.$('name_field'); this.name_field = UTL.$('name_field');
this.clients_field = UTL.$('clients_field'); this.clients_field = UTL.$('clients_field');
@@ -19,33 +21,35 @@ class Client {
} }
connect() { connect() {
let isManuallySeeked = true;
let isManuallyPlayed = true;
let isManuallyPaused = true;
this.video_field.addEventListener('play', () => { this.video_field.addEventListener('play', () => {
if (isManuallyPlayed) { if (this.isManuallyPlayed) {
const js = { const js = {
command: 'play', command: 'play',
client_id: this.#ClientData.id,
room_id: this.#ClientData.room, room_id: this.#ClientData.room,
}; };
this.sendCommand(js); this.sendCommand(js);
} else isManuallyPlayed = true; } else this.isManuallyPlayed = true;
console.log("PLAYED")
}); });
video_field.addEventListener('pause', () => { video_field.addEventListener('pause', () => {
if (isManuallyPaused) { if (this.isManuallyPaused) {
const js = { const js = {
command: 'pause', command: 'pause',
client_id: this.#ClientData.id,
room_id: this.#ClientData.room, room_id: this.#ClientData.room,
}; };
this.sendCommand(js); this.sendCommand(js);
} else isManuallyPaused = true; } else this.isManuallyPaused = true;
console.log("PAUSED")
}); });
video_field.addEventListener('seeked', () => { video_field.addEventListener('seeked', () => {
if (isManuallySeeked) this.syncForVid(); if (this.isManuallySeeked) this.syncForVid();
else isManuallySeeked = true; else this.isManuallySeeked = true;
console.log("SEEKED");
}); });
this.#ClientSocket.addEventListener('open', () => { this.#ClientSocket.addEventListener('open', () => {