demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

viewer playback speed
All checks were successful
CI / checks (push) Successful in 1m7s
Details

Browse source
This commit is contained in:
Robin Appelman 2025-06-22 23:26:32 +02:00
commit 5ed8dea705
4 changed files with 78 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
script/viewer/Analyse/AnalyseMenu.tsx
View file

@ -10,6 +10,7 @@ export interface AnalyseMenuProps {
inShared: boolean;
open: boolean;
openModal: (ModalState) => void;
speed: number;
}
export function AnalyseMenu(props: AnalyseMenuProps) {
@ -22,6 +23,9 @@ export function AnalyseMenu(props: AnalyseMenuProps) {
}
return (<div class="analyse-menu">
<Show when={props.speed != 1}>
<div class="speed">Playing at <span>{props.speed}x</span></div>
</Show>
<Show when={props.inShared}>
<div class="share shared">
You're spectating a session controlled by someone else

46
script/viewer/Analyse/Analyser.tsx
View file

@ -42,6 +42,7 @@ export const Analyser = (props: AnalyseProps) => {
const [tick, setTick] = createSignal<number>(0);
const [scale, setScale] = createSignal<number>(1);
const [speed, setSpeed] = createSignal<number>(1);
const [playing, setPlaying] = createSignal<boolean>(false);
const [sessionName, setSessionName] = createSignal<string>("");
const [clients, setClients] = createSignal<number>(0);
@ -79,6 +80,33 @@ export const Analyser = (props: AnalyseProps) => {
togglePlay();
e.preventDefault();
}
if (e.key === '=') {
fixPlayOffset();
setSpeed(speed() + 0.25);
e.preventDefault();
if (session) {
session.update({speed: speed()});
}
}
if (e.key === '-') {
fixPlayOffset();
setSpeed(Math.max(speed() - 0.25, 0.25));
e.preventDefault();
if (session) {
session.update({speed: speed()});
}
}
if (e.key === '0') {
fixPlayOffset();
setSpeed(1);
e.preventDefault();
if (session) {
session.update({speed: speed()});
}
}
if (e.key === '?') {
setModalState(ModalState.Help);
e.preventDefault();
@ -111,7 +139,7 @@ export const Analyser = (props: AnalyseProps) => {
const onUpdate = (update: StateUpdate) => {
if (update.hasOwnProperty("tick")) {
setTick(update["tick"]);
setTickNow(update["tick"]);
}
if (update.hasOwnProperty("playing")) {
if (update["playing"]) {
@ -120,6 +148,10 @@ export const Analyser = (props: AnalyseProps) => {
pause();
}
}
if (update.hasOwnProperty("speed")) {
fixPlayOffset();
setSpeed(update["speed"]);
}
if (update.hasOwnProperty("clients")) {
setClients(update["clients"]);
}
@ -174,9 +206,14 @@ export const Analyser = (props: AnalyseProps) => {
}
}
const play = () => {
const fixPlayOffset = () => {
lastFrameTime = 0;
playStartTick = tick();
playStartTime = window.performance.now();
}
const play = () => {
fixPlayOffset();
setPlaying(true);
requestAnimationFrame(animFrame);
if (session) {
@ -197,6 +234,7 @@ export const Analyser = (props: AnalyseProps) => {
session.update({
playing: playing(),
tick: tick(),
speed: speed(),
});
}
});
@ -209,7 +247,7 @@ export const Analyser = (props: AnalyseProps) => {
const animFrame = (timestamp: number) => {
const timePassed = (timestamp - playStartTime) / 1000;
const targetTick = playStartTick + (Math.round(timePassed / intervalPerTick));
const targetTick = playStartTick + (Math.round(timePassed / intervalPerTick * speed()));
lastFrameTime = timestamp;
if (targetTick >= (lastTick)) {
pause();
@ -255,6 +293,7 @@ export const Analyser = (props: AnalyseProps) => {
tick: tick(),
playing: playing(),
clients: 0,
speed: speed(),
}, onUpdate);
setSessionName(session.sessionName);
}}
@ -263,6 +302,7 @@ export const Analyser = (props: AnalyseProps) => {
isShared={isShared()}
clients={clients()}
inShared={inShared}
speed={speed()}
/>
<SpecHUD parser={parser} tick={tick()}
players={players()} events={events}

26
script/viewer/Analyse/Session.ts
View file

@ -47,6 +47,11 @@ export class Session {
session: this.sessionName,
play: this.initialState.playing
}));
this.socket.send(JSON.stringify({
type: 'speed',
session: this.sessionName,
speed: this.initialState.speed
}));
this.initialState = null;
}
this.socket.onmessage = (event) => {
@ -69,6 +74,11 @@ export class Session {
tick: packet.tick
});
}
if (packet.type === 'speed') {
this.onState({
speed: packet.speed
});
}
if (packet.type === 'play') {
if (packet.play) {
this.onState({
@ -114,6 +124,13 @@ export class Session {
play: update["playing"]
}));
}
if (update.hasOwnProperty("speed")) {
this.socket.send(JSON.stringify({
type: 'speed',
session: this.sessionName,
speed: update["speed"]
}));
}
}
}
}
@ -132,6 +149,7 @@ export interface PlaybackState {
tick: number,
playing: boolean,
clients: number,
speed: number,
}
export type StateUpdate = Partial<PlaybackState>;
@ -152,6 +170,12 @@ export interface TickPacket {
tick: number;
}
export interface SpeedPacket {
type: 'speed';
session: string;
speed: number;
}
export interface PlayPacket {
type: 'play';
session: string;
@ -164,4 +188,4 @@ export interface ClientsPacket {
count: number;
}
export type Packet = JoinPacket | CreatePacket | TickPacket | PlayPacket | ClientsPacket;
export type Packet = JoinPacket | CreatePacket | TickPacket | PlayPacket | ClientsPacket | SpeedPacket;