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 = ({ file, scene, @@ -86,16 +90,36 @@ export const ScenePlayerScrubber: React.FC = ({ const [spriteItems, setSpriteItems] = useState(); 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);