1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
import { Logger } from "../jshelper/src/log.ts";
import { Player } from "./player.ts"
function get_username() {
return document.querySelector("nav .account .username")?.textContent ?? "Unknown User"
}
interface Packet {
time?: number,
playing?: boolean,
join?: string,
leave?: string,
}
export class Playersync {
private ws: WebSocket
private on_destroy: (() => void)[] = []
private cancel_pers: undefined | (() => void)
set_pers(s?: string) {
if (this.cancel_pers) this.cancel_pers(), this.cancel_pers = undefined
if (s) this.cancel_pers = this.logger?.log_persistent(s)
}
constructor(private player: Player, private logger: Logger<string>, private channel_name: string) {
this.set_pers("Playersync enabling...")
let [localpart, remotepart] = channel_name.split(":")
if (!remotepart?.length) remotepart = window.location.host
this.ws = new WebSocket(`${window.location.protocol.endsWith("s:") ? "wss" : "ws"}://${remotepart}/playersync/${encodeURIComponent(localpart)}`)
this.on_destroy.push(() => this.ws.close())
this.ws.onopen = () => {
this.set_pers()
this.logger.log(`Playersync connected.`)
this.send({ join: get_username() })
}
this.ws.onerror = () => {
this.set_pers(`Playersync websocket error.`)
}
this.ws.onclose = () => {
this.set_pers(`Playersync websocket closed.`)
}
let last_time = 0;
this.ws.onmessage = ev => {
const packet: Packet = JSON.parse(ev.data)
console.log("playersync recv", packet);
if (packet.time !== undefined) {
this.player.seek(packet.time)
last_time = packet.time
}
if (packet.playing === true) this.player.play()
if (packet.playing === false) this.player.pause()
if (packet.join) this.logger.log(`${packet.join} joined.`)
if (packet.leave) this.logger.log(`${packet.join} left.`)
}
let cb: () => void
player.video.addEventListener("play", cb = () => {
this.send({ playing: true })
})
this.on_destroy.push(() => player.video.removeEventListener("play", cb))
player.video.addEventListener("pause", cb = () => {
this.send({ playing: false })
})
this.on_destroy.push(() => player.video.removeEventListener("pause", cb))
player.video.addEventListener("seeking", cb = () => {
const time = this.player.video.currentTime
if (Math.abs(last_time - time) < 0.01) return
this.send({ time: this.player.video.currentTime })
})
this.on_destroy.push(() => player.video.removeEventListener("seeking", cb))
}
destroy() {
this.set_pers()
this.logger.log("Playersync disabled.")
this.on_destroy.forEach(f => f())
this.send({ leave: get_username() })
}
send(p: Packet) {
console.log("playersync send", p);
this.ws.send(JSON.stringify(p))
}
}
|
