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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
/*
This file is part of jellything (https://codeberg.org/metamuffin/jellything)
which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
Copyright (C) 2024 metamuffin <metamuffin.org>
*/
/// <reference lib="dom" />
import { OVar, e } from "../jshelper/mod.ts";
import { Logger } from "../jshelper/src/log.ts";
import { Player } from "./player.ts"
export function playersync_controls(sync_state: OVar<undefined | Playersync>, player: Player) {
let channel_name: HTMLInputElement;
let channel_name_copy: HTMLInputElement;
return e("div", { class: ["jsp-controlgroup", "jsp-playersync-controls"] },
e("h3", "Playersync"),
sync_state.map(sync => sync
? e("div",
e("span", "Sync enabled."),
e("button", "Disable", {
onclick: () => { sync_state.value?.destroy(); sync_state.value = undefined }
}),
e("p", "Session ID: ",
channel_name_copy = e("input", { type: "text", disabled: true, value: sync.name }),
e("button", "content_paste_go", {
class: "icon",
onclick: () => {
player.logger?.log("Session ID copied to clipboard.")
navigator.clipboard.writeText(channel_name_copy.value)
}
})
),
e("h4", "Users"),
sync.users.map(users =>
e("ul", ...[...users.keys()].map(u => e("li", u)))
)
)
: e("div",
channel_name = e("input", { type: "text", placeholder: "someroom:example.org" }),
e("button", "Join", {
onclick: () => {
if (!channel_name.value.length) return
sync_state.value?.destroy()
sync_state.value = new Playersync(player, player.logger!, channel_name.value)
}
}), e("br"),
e("button", "Create new session", {
onclick: () => {
sync_state.value?.destroy()
sync_state.value = new Playersync(player, player.logger!)
}
}))
)
)
}
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)[] = []
public name: string
public users = new OVar(new Map<string, null>())
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...")
channel_name ??= Math.random().toString(16).padEnd(5, "0").substring(2).substring(0, 6)
let [localpart, remotepart, port] = channel_name.split(":")
if (!remotepart?.length) remotepart = window.location.host
if (port) remotepart += ":" + port
this.name = localpart + ":" + remotepart
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.`)
this.users.value.set(packet.join, null)
this.users.change()
}
if (packet.leave) {
this.logger.log(`${packet.leave} left.`)
this.users.value.delete(packet.leave)
this.users.change()
}
}
let cb: () => void
const send_time = () => {
const time = this.player.video.currentTime
if (Math.abs(last_time - time) < 0.01) return
this.send({ time: this.player.video.currentTime })
}
player.video.addEventListener("play", cb = () => {
send_time()
this.send({ playing: true })
})
this.on_destroy.push(() => player.video.removeEventListener("play", cb))
player.video.addEventListener("pause", cb = () => {
this.send({ playing: false })
send_time()
})
this.on_destroy.push(() => player.video.removeEventListener("pause", cb))
player.video.addEventListener("seeking", cb = () => {
send_time()
})
this.on_destroy.push(() => player.video.removeEventListener("seeking", cb))
}
destroy() {
this.set_pers()
this.logger.log("Playersync disabled.")
this.on_destroy.forEach(f => f())
}
send(p: Packet) {
console.log("playersync send", p);
this.ws.send(JSON.stringify(p))
}
}
|
