Fix preview scrubber touch issues (#5267)

ui/v2.5/src/components/Galleries/GalleryPreviewScrubber.tsx

@@ -21,12 +21,12 @@ export const GalleryPreviewScrubber: React.FC<{
   const [activeIndex, setActiveIndex] = useState<number>();
   const debounceSetActiveIndex = useThrottle(setActiveIndex, 50);
 
-  function onScrubberClick() {
-    if (activeIndex === undefined || !onClick) {
+  function onScrubberClick(index: number) {
+    if (!onClick) {
       return;
     }
 
-    onClick(activeIndex);
+    onClick(index);
   }
 
   useEffect(() => {
@@ -47,7 +47,7 @@ export const GalleryPreviewScrubber: React.FC<{
         totalSprites={imageCount}
         activeIndex={activeIndex}
         setActiveIndex={(i) => debounceSetActiveIndex(i)}
-        onClick={() => onScrubberClick()}
+        onClick={onScrubberClick}
       />
     </div>
   );

ui/v2.5/src/components/Scenes/PreviewScrubber.tsx

@@ -27,6 +27,8 @@ function scaleToFit(dimensions: { w: number; h: number }, bounds: DOMRect) {
   return Math.min(rw, rh);
 }
 
+const defaultSprites = 81; // 9x9 grid by default
+
 export const PreviewScrubber: React.FC<IScenePreviewProps> = ({
   vttPath,
   onClick,
@@ -83,15 +85,16 @@ export const PreviewScrubber: React.FC<IScenePreviewProps> = ({
     return start;
   }, [sprite]);
 
-  function onScrubberClick() {
-    if (!sprite || !onClick) {
+  function onScrubberClick(index: number) {
+    if (!onClick || !spriteInfo) {
       return;
     }
 
-    onClick(sprite.start);
+    const s = spriteInfo[index];
+    onClick(s.start);
   }
 
-  if (!spriteInfo && hasLoaded) return null;
+  if (spriteInfo === null) return null;
 
   return (
     <div className="preview-scrubber">
@@ -104,7 +107,7 @@ export const PreviewScrubber: React.FC<IScenePreviewProps> = ({
         </div>
       )}
       <HoverScrubber
-        totalSprites={spriteInfo?.length ?? 0}
+        totalSprites={spriteInfo?.length ?? defaultSprites}
         activeIndex={activeIndex}
         setActiveIndex={(i) => debounceSetActiveIndex(i)}
         onClick={onScrubberClick}

ui/v2.5/src/components/Shared/HoverScrubber.tsx

@@ -8,7 +8,7 @@ interface IHoverScrubber {
   totalSprites: number;
   activeIndex: number | undefined;
   setActiveIndex: (index: number | undefined) => void;
-  onClick?: () => void;
+  onClick?: (index: number) => void;
 }
 
 export const HoverScrubber: React.FC<IHoverScrubber> = ({
@@ -82,7 +82,10 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
 
     e.preventDefault();
     e.stopPropagation();
-    onClick();
+
+    const i = getActiveIndex(e);
+    if (i === undefined) return;
+    onClick(i);
   }
 
   const indicatorStyle = useMemo(() => {
@@ -107,8 +110,8 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
         onTouchMove={onMove}
         onMouseLeave={onLeave}
         onTouchEnd={onLeave}
+        onTouchCancel={onLeave}
         onClick={onScrubberClick}
-        onTouchStart={onScrubberClick}
       />
       <div className="hover-scrubber-indicator">
         {activeIndex !== undefined && (

ui/v2.5/src/hooks/sprite.ts

@@ -35,9 +35,12 @@ function getSpriteInfo(vttPath: string, response: string) {
   return sprites;
 }
 
+// useSpriteInfo is a hook that fetches a VTT file and parses it for sprite information.
+// If the vttPath is undefined, the hook will return undefined.
+// If the response is not ok, the hook will return null. This usually indicates missing sprite.
 export function useSpriteInfo(vttPath: string | undefined) {
   const [spriteInfo, setSpriteInfo] = useState<
-    ISceneSpriteInfo[] | undefined
+    ISceneSpriteInfo[] | undefined | null
   >();
 
   useEffect(() => {
@@ -48,7 +51,7 @@ export function useSpriteInfo(vttPath: string | undefined) {
 
     fetch(vttPath).then((response) => {
       if (!response.ok) {
-        setSpriteInfo(undefined);
+        setSpriteInfo(null);
         return;
       }