demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-04 02:34:13 +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

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}