From 169c3b3bd292e605d38980f6a1a0bf0efc0df693 Mon Sep 17 00:00:00 2001
From: Sashank Aryal <66688606+sashankaryal@users.noreply.github.com>
Date: Mon, 30 Sep 2024 14:25:47 -0500
Subject: [PATCH] Merge pull request #859 from
 voxel51/fix/pause-animation-if-buffering (#4870)

fix animation not pausing when buffering
---
 .../core/src/components/Modal/ImaVidLooker.tsx       |  9 +++++++++
 app/packages/looker/src/elements/imavid/index.ts     |  6 +++---
 app/packages/playback/src/lib/state.ts               |  1 +
 app/packages/playback/src/lib/use-create-timeline.ts | 12 ++++++++++++
 app/packages/playback/src/views/svgs/buffering.svg   |  7 ++++++-
 5 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/packages/core/src/components/Modal/ImaVidLooker.tsx b/app/packages/core/src/components/Modal/ImaVidLooker.tsx
index 7af9d2b911..6707202a8a 100644
--- a/app/packages/core/src/components/Modal/ImaVidLooker.tsx
+++ b/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
diff --git a/app/packages/looker/src/elements/imavid/index.ts b/app/packages/looker/src/elements/imavid/index.ts
index b6038dcaf3..da82f9998a 100644
--- a/app/packages/looker/src/elements/imavid/index.ts
+++ b/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) {
diff --git a/app/packages/playback/src/lib/state.ts b/app/packages/playback/src/lib/state.ts
index 66702627dc..ba410c67f3 100644
--- a/app/packages/playback/src/lib/state.ts
+++ b/app/packages/playback/src/lib/state.ts
@@ -13,6 +13,7 @@ import {
 } from "./constants";
 
 export type PlayheadState =
+  | "buffering"
   | "playing"
   | "paused"
   | "waitingToPlay"
diff --git a/app/packages/playback/src/lib/use-create-timeline.ts b/app/packages/playback/src/lib/use-create-timeline.ts
index b70719b009..a19694b65d 100644
--- a/app/packages/playback/src/lib/use-create-timeline.ts
+++ b/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.
      */
diff --git a/app/packages/playback/src/views/svgs/buffering.svg b/app/packages/playback/src/views/svgs/buffering.svg
index a894767a0d..bbaa39ff17 100644
--- a/app/packages/playback/src/views/svgs/buffering.svg
+++ b/app/packages/playback/src/views/svgs/buffering.svg
@@ -1,3 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="12 12 24 24">
-    <circle cx="24" cy="24" r="9" stroke-width="2" stroke="rgb(238, 238, 238)" fill="none"></circle>
+  <circle cx="24" cy="24" r="9" stroke-width="2" stroke="#b3b3b3" fill="none"
+    stroke-dasharray="40" stroke-dashoffset="0">
+    <animateTransform attributeName="transform" type="rotate" from="0 24 24" to="360 24 24" dur="1s" repeatCount="indefinite" />
+  </circle>
 </svg>
\ No newline at end of file