Merge pull request #859 from voxel51/fix/pause-animation-if-buffering (…

…#4870)

fix animation not pausing when buffering

app/packages/core/src/components/Modal/ImaVidLooker.tsx

@@ -175,16 +175,23 @@ export const ImaVidLookerReact = React.memo(
           return;
         }
 
+        setPlayHeadState({ name: timelineName, state: "buffering" });
+
         imaVidLookerRef.current.frameStoreController.enqueueFetch(
           unprocessedBufferRange
         );
 
+        imaVidLookerRef.current.frameStoreController.resumeFetch();
+
         return new Promise<void>((resolve) => {
           const fetchMoreListener = (e: CustomEvent) => {
             if (
               e.detail.id === imaVidLookerRef.current.frameStoreController.key
             ) {
               if (storeBufferManager.containsRange(unprocessedBufferRange)) {
+                // todo: change playhead state in setFrameNumberAtom and not here
+                // if done here, store ref to last playhead status
+                setPlayHeadState({ name: timelineName, state: "paused" });
                 resolve();
                 window.removeEventListener(
                   "fetchMore",
@@ -250,6 +257,7 @@ export const ImaVidLookerReact = React.memo(
       registerOnPauseCallback,
       registerOnPlayCallback,
       registerOnSeekCallbacks,
+      setPlayHeadState,
       subscribe,
     } = useCreateTimeline({
       name: timelineName,
@@ -325,6 +333,7 @@ export const ImaVidLookerReact = React.memo(
           position: "relative",
           display: "flex",
           flexDirection: "column",
+          overflowX: "hidden",
         }}
       >
         <div

app/packages/looker/src/elements/imavid/index.ts

@@ -203,11 +203,11 @@ export class ImaVidElement extends BaseElement<ImaVidState, HTMLImageElement> {
   }
 
   paintImageOnCanvas(image: HTMLImageElement) {
-    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    this.ctx?.setTransform(1, 0, 0, 1, 0, 0);
 
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
-    this.ctx.drawImage(image, 0, 0);
+    this.ctx?.drawImage(image, 0, 0);
   }
 
   async skipAndTryAgain(frameNumberToDraw: number, animate: boolean) {

app/packages/playback/src/lib/state.ts

@@ -13,6 +13,7 @@ import {
 } from "./constants";
 
 export type PlayheadState =
+  | "buffering"
   | "playing"
   | "paused"
   | "waitingToPlay"

app/packages/playback/src/lib/use-create-timeline.ts

@@ -157,6 +157,10 @@ export const useCreateTimeline = (
       return;
     }
 
+    if (playHeadStateRef.current === "buffering") {
+      return;
+    }
+
     setPlayHeadState({ name: timelineName, state: "playing" });
     if (onPlayListenerRef.current) {
       onPlayListenerRef.current();
@@ -364,6 +368,10 @@ export const useCreateTimeline = (
       const key = e.key.toLowerCase();
 
       if (key === " ") {
+        if (playHeadState === "buffering") {
+          return;
+        }
+
         if (playHeadState === "paused") {
           play();
         } else {
@@ -448,6 +456,10 @@ export const useCreateTimeline = (
      * Re-render all subscribers of the timeline with current frame number.
      */
     refresh,
+    /**
+     * Set the playhead state of the timeline.
+     */
+    setPlayHeadState,
     /**
      * Subscribe to the timeline.
      */