Reset to initial buffers in video looker (#5293)

* reset buffers to initial state, handle single frame * assert grid tagging with locators
voxel51 · Dec 18, 2024 · 94c3fe9 · 94c3fe9
1 parent d9649c3
commit 94c3fe9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/app/packages/looker/src/elements/video.ts b/app/packages/looker/src/elements/video.ts
@@ -65,17 +65,18 @@ export class LoaderBar extends BaseElement<VideoState> {
   }: Readonly<VideoState>) {
     const shown =
       !error && hovering && (waitingForVideo || buffering || waitingToStream);
+
+    if (shown === this.shown) {
+      return this.element;
+    }
+
     const start = lockedToSupport ? support[0] : 1;
     const end = lockedToSupport
       ? support[1]
       : getFrameNumber(duration, duration, frameRate);
-    if (shown === this.shown || start === end) {
-      return this.element;
-    }
 
     this.shown = shown;
-
-    if (this.shown) {
+    if (this.shown && start !== end) {
       this.element.style.display = "block";
     } else {
       this.element.style.display = "none";

diff --git a/app/packages/looker/src/lookers/video.ts b/app/packages/looker/src/lookers/video.ts
@@ -52,6 +52,7 @@ export class VideoLooker extends AbstractLooker<VideoState, VideoSample> {
     if (LOOKER_WITH_READER === this) {
       clearReader();
       LOOKER_WITH_READER = null;
+      this.state.buffers = this.initialBuffers(this.state.config);
     }
     super.detach();
   }
@@ -361,6 +362,7 @@ export class VideoLooker extends AbstractLooker<VideoState, VideoSample> {
     if (LOOKER_WITH_READER === this) {
       if (this.state.config.thumbnail && !this.state.hovering) {
         clearReader();
+        this.state.buffers = this.initialBuffers(this.state.config);
         LOOKER_WITH_READER = null;
       }
     }

diff --git a/e2e-pw/src/oss/specs/grid-tagging.spec.ts b/e2e-pw/src/oss/specs/grid-tagging.spec.ts
@@ -44,17 +44,22 @@ test("grid tagging", async ({ fiftyoneLoader, grid, page, sidebar }) => {
   await sidebar.clickFieldCheckbox("filepath");
   await sidebar.clickFieldCheckbox("tags");
   await grid.scrollBottom();
-  await expect(await grid.locator).toHaveScreenshot("grid-untagged.png", {
-    animations: "allow",
-  });
+  for (let i = 31; i <= 54; i++) {
+    const locator = grid.locator.getByText(`/tmp/${i}.png`);
+    await expect(locator).toBeVisible();
+  }
 
   await grid.run(async () => {
     await grid.actionsRow.toggleTagSamplesOrLabels();
     await grid.tagger.setActiveTaggerMode("sample");
     await grid.tagger.addNewTag("sample", "grid-test");
   });
 
-  await expect(await grid.locator).toHaveScreenshot("grid-tagged.png", {
-    animations: "allow",
-  });
+  for (let i = 31; i <= 54; i++) {
+    const locator = grid.locator.getByText(`/tmp/${i}.png`);
+    await expect(locator).toBeVisible();
+    await expect(
+      locator.locator("..").getByTestId("tag-tags-grid-test")
+    ).toBeVisible();
+  }
 });