more robust time travel

vtbag · Aug 9, 2024 · b946e4e · b946e4e
1 parent eec3e26
commit b946e4e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 28 deletions.
diff --git a/.changeset/sixty-walls-sparkle.md b/.changeset/sixty-walls-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@vtbag/inspection-chamber': patch
+---
+
+Reworkes time travel during full control mode
diff --git a/src/panel/full-control.ts b/src/panel/full-control.ts
@@ -1,12 +1,8 @@
-import { updateNameVisibility } from './names';
+import { getModus } from './modus';
+import { showSomeAnimations, THROTTLING_DELAY, updateNameVisibility } from './names';
 import { vtActive } from './transition';
 
-let lastSum = -2;
-let lastChanged = -1;
-
 export function controlledPlay() {
-	lastChanged = -1;
-	lastSum = -2;
 	const animationEndTime = top!.__vtbag.inspectionChamber!.animationEndTime;
 	top!.document.querySelector<HTMLSpanElement>('#vtbag-ui-controller-max')!.innerText =
 		animationEndTime + ' ms';
@@ -20,51 +16,52 @@ export function controlledPlay() {
 	controller2.max = '' + animationEndTime;
 	controller2.value = '0';
 	controller2.disabled = false;
-	updateNameVisibility();
+	showSomeAnimations();
 	control();
+	updateNameVisibility();
 }
 
-export function controllerChanged() {
-	const res = lastChanged !== lastSum;
-	lastChanged = lastSum;
-	return res;
-}
-function control() {
+export function control() {
 	const inspectionChamber = top!.__vtbag.inspectionChamber!;
 	const animations = inspectionChamber.animations;
+	if (inspectionChamber.updateNameVisibilityTimeout) {
+		top!.clearTimeout(inspectionChamber.updateNameVisibilityTimeout);
+		inspectionChamber.updateNameVisibilityTimeout = undefined;
+	}
+	inspectionChamber.updateNameVisibilityTimeout = top!.setTimeout(
+		updateNameVisibility,
+		THROTTLING_DELAY
+	);
+
 	if (animations) {
 		const selectedTime = parseInt(
-			top!.document.querySelector<HTMLSpanElement>('#vtbag-ui-progress')!.innerText
+			top!.document.querySelector<HTMLSpanElement>('#vtbag-ui-progress')!.innerText,
+			10
 		);
 		const otherTime = parseInt(
-			top!.document.querySelector<HTMLSpanElement>('#vtbag-ui-progress2')!.innerText
+			top!.document.querySelector<HTMLSpanElement>('#vtbag-ui-progress2')!.innerText,
+			10
 		);
-		lastSum = selectedTime + otherTime;
 
 		const selectedElements = new Set<string>();
 		top!.document
 			.querySelectorAll<HTMLLIElement>('#vtbag-ui-names li.selected')
 			.forEach((li) => selectedElements.add(li.innerText));
 		animations.forEach((animation) => {
-			const { viewTransitionName } = namesOfAnimation(animation);
-			animation.currentTime =
-				viewTransitionName && selectedElements.has(viewTransitionName) ? selectedTime : otherTime;
+			if (animation.playState === 'paused') {
+				const { viewTransitionName } = namesOfAnimation(animation);
+				animation.currentTime =
+					viewTransitionName && selectedElements.has(viewTransitionName) ? selectedTime : otherTime;
+			}
 		});
 	}
-	if (inspectionChamber.updateNameVisibilityTimeout) {
-		top!.clearTimeout(inspectionChamber.updateNameVisibilityTimeout);
-		inspectionChamber.updateNameVisibilityTimeout = undefined;
-		if (vtActive()) {
-			inspectionChamber.updateNameVisibilityTimeout = top!.setTimeout(updateNameVisibility, 1000);
-		}
-	}
 }
 
 export function namesOfAnimation(animation: Animation) {
 	const names = animation.effect?.pseudoElement
 		?.replace(/::view-transition-(new|old|group|image-pair)\((.*)\)/, '$1 $2')
 		.split(' ');
-	return { pseudoName: names![0], viewTransitionName: names![1] };
+	return { pseudoName: names?.[0], viewTransitionName: names?.[1] };
 }
 
 export function initController() {
@@ -87,7 +84,7 @@ export function initController() {
 }
 
 export function updateControl() {
-	if (vtActive() && top!.document.documentElement.dataset.vtbagModus === 'control') {
+	if (vtActive() && getModus() === 'full-control') {
 		control();
 	}
 }