From aff6db15009e83192b9e2ef82107eb6b29073bd7 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Mon, 23 Feb 2026 16:51:36 +1100
Subject: [PATCH] Fix scene player scrubber when custom sprite size used
 (#6597)

---
 .../ScenePlayer/ScenePlayerScrubber.tsx       | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx
index 93e45a7e7..196bc9bd0 100644
--- a/ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx
+++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx
@@ -28,6 +28,10 @@ interface ISceneSpriteItem {
   time: string;
 }
 
+const scrubberViewportHeight = 120;
+const scrubberTagsHeight = 30;
+const scrubberSpriteHeight = scrubberViewportHeight - scrubberTagsHeight;
+
 export const ScenePlayerScrubber: React.FC<IScenePlayerScrubberProps> = ({
   file,
   scene,
@@ -86,16 +90,36 @@ export const ScenePlayerScrubber: React.FC<IScenePlayerScrubberProps> = ({
   const [spriteItems, setSpriteItems] = useState<ISceneSpriteItem[]>();
 
   useEffect(() => {
-    if (!spriteInfo) return;
+    if (!spriteInfo || spriteInfo.length === 0) return;
     let totalWidth = 0;
+
+    // calculate total width/height of scrubber image so we can scale it
+    const maxX = Math.max(...spriteInfo.map((sprite) => sprite.x + sprite.w));
+    const maxY = Math.max(...spriteInfo.map((sprite) => sprite.y + sprite.h));
+    const spriteWidth = spriteInfo[0].w;
+    const spriteHeight = spriteInfo[0].h;
+    const scale = scrubberSpriteHeight / spriteHeight;
+
+    const w = spriteWidth * scale;
+    const h = scrubberSpriteHeight;
+
+    const sizeX = maxX * scale;
+    const sizeY = maxY * scale;
+
+    // scale sprite dimensions to fit scrubber height, and calculate background position for each sprite
     const newSprites = spriteInfo?.map((sprite, index) => {
-      totalWidth += sprite.w;
-      const left = sprite.w * index;
+      totalWidth += w;
+      const left = w * index;
+
+      const spriteX = sprite.x * scale;
+      const spriteY = sprite.y * scale;
+
       const style = {
-        width: `${sprite.w}px`,
-        height: `${sprite.h}px`,
-        backgroundPosition: `${-sprite.x}px ${-sprite.y}px`,
+        width: `${w}px`,
+        height: `${h}px`,
+        backgroundPosition: `${-spriteX}px ${-spriteY}px`,
         backgroundImage: `url(${sprite.url})`,
+        backgroundSize: `${sizeX}px ${sizeY}px`,
         left: `${left}px`,
       };
       const start = TextUtils.secondsToTimestamp(sprite.start);