Fix video tooltip (#4916)

* move modal looker state to use-looker

* fix video update sample

* linting

app/packages/core/src/components/ColorModal/ColorFooter.tsx

@@ -3,7 +3,7 @@ import * as foq from "@fiftyone/relay";
 import * as fos from "@fiftyone/state";
 import React, { useEffect } from "react";
 import { useMutation } from "react-relay";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilValue } from "recoil";
 import { ButtonGroup, ModalActionButtonContainer } from "./ShareStyledDiv";
 import { activeColorEntry } from "./state";
 
@@ -14,8 +14,7 @@ const ColorFooter: React.FC = () => {
     ? canEditCustomColors.message
     : "Save to dataset app config";
   const setColorScheme = fos.useSetSessionColorScheme();
-  const [activeColorModalField, setActiveColorModalField] =
-    useRecoilState(activeColorEntry);
+  const activeColorModalField = useRecoilValue(activeColorEntry);
   const [setDatasetColorScheme] =
     useMutation<foq.setDatasetColorSchemeMutation>(foq.setDatasetColorScheme);
   const colorScheme = useRecoilValue(fos.colorScheme);
@@ -26,8 +25,8 @@ const ColorFooter: React.FC = () => {
   const subscription = useRecoilValue(fos.stateSubscription);
 
   useEffect(
-    () => foq.subscribe(() => setActiveColorModalField(null)),
-    [setActiveColorModalField]
+    () => foq.subscribe((_, { set }) => set(activeColorEntry, null)),
+    []
   );
 
   if (!activeColorModalField) return null;

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

@@ -1,11 +1,10 @@
 import { useTheme } from "@fiftyone/components";
 import type { ImageLooker } from "@fiftyone/looker";
 import * as fos from "@fiftyone/state";
-import React, { useEffect, useMemo } from "react";
-import { useRecoilCallback, useRecoilValue, useSetRecoilState } from "recoil";
+import React, { useMemo } from "react";
+import { useRecoilCallback, useRecoilValue } from "recoil";
 import { ImaVidLookerReact } from "./ImaVidLooker";
 import { VideoLookerReact } from "./VideoLooker";
-import { useModalContext } from "./hooks";
 import useLooker from "./use-looker";
 
 export const useShowOverlays = () => {
@@ -28,21 +27,8 @@ interface LookerProps {
 }
 
 const ModalLookerNoTimeline = React.memo((props: LookerProps) => {
-  const { id, looker, ref } = useLooker<ImageLooker>(props);
+  const { id, ref } = useLooker<ImageLooker>(props);
   const theme = useTheme();
-  const setModalLooker = useSetRecoilState(fos.modalLooker);
-
-  const { setActiveLookerRef } = useModalContext();
-
-  useEffect(() => {
-    setModalLooker(looker);
-  }, [looker, setModalLooker]);
-
-  useEffect(() => {
-    if (looker) {
-      setActiveLookerRef(looker as fos.Lookers);
-    }
-  }, [looker, setActiveLookerRef]);
 
   return (
     <div

app/packages/core/src/components/Modal/use-looker.ts

@@ -1,10 +1,10 @@
 import * as fos from "@fiftyone/state";
 import React, { useEffect, useRef, useState } from "react";
 import { useErrorHandler } from "react-error-boundary";
-import { useRecoilValue } from "recoil";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import { v4 as uuid } from "uuid";
 import { useClearSelectedLabels, useShowOverlays } from "./ModalLooker";
-import { useLookerOptionsUpdate } from "./hooks";
+import { useLookerOptionsUpdate, useModalContext } from "./hooks";
 import useKeyEvents from "./use-key-events";
 import { shortcutToHelpItems } from "./utils";
 
@@ -103,6 +103,20 @@ function useLooker<L extends fos.Lookers>({
 
   useKeyEvents(initialRef, sample.sample._id, looker);
 
+  const setModalLooker = useSetRecoilState(fos.modalLooker);
+
+  const { setActiveLookerRef } = useModalContext();
+
+  useEffect(() => {
+    setModalLooker(looker);
+  }, [looker, setModalLooker]);
+
+  useEffect(() => {
+    if (looker) {
+      setActiveLookerRef(looker as fos.Lookers);
+    }
+  }, [looker, setActiveLookerRef]);
+
   return { id, looker, ref, sample, updateLookerOptions };
 }
 

app/packages/looker/src/lookers/video.ts

@@ -15,6 +15,7 @@ import {
   FrameSample,
   LabelData,
   StateUpdate,
+  VideoConfig,
   VideoSample,
   VideoState,
 } from "../state";
@@ -318,7 +319,7 @@ export class VideoLooker extends AbstractLooker<VideoState, VideoSample> {
         ...this.getDefaultOptions(),
         ...options,
       },
-      buffers: [[firstFrame, firstFrame]] as Buffers,
+      buffers: this.initialBuffers(config),
       seekBarHovering: false,
       SHORTCUTS: VIDEO_SHORTCUTS,
       hasPoster: false,
@@ -328,8 +329,8 @@ export class VideoLooker extends AbstractLooker<VideoState, VideoSample> {
   }
 
   hasDefaultZoom(state: VideoState, overlays: Overlay<VideoState>[]): boolean {
-    let pan = [0, 0];
-    let scale = 1;
+    const pan = [0, 0];
+    const scale = 1;
 
     return (
       scale === state.scale &&
@@ -402,10 +403,9 @@ export class VideoLooker extends AbstractLooker<VideoState, VideoSample> {
       lookerWithReader !== this &&
       frameCount !== null
     ) {
-      lookerWithReader && lookerWithReader.pause();
-      this.setReader();
+      lookerWithReader?.pause();
       lookerWithReader = this;
-      this.state.buffers = [[1, 1]];
+      this.setReader();
     } else if (lookerWithReader !== this && frameCount) {
       this.state.buffering && this.dispatchEvent("buffering", false);
       this.state.playing = false;
@@ -549,10 +549,14 @@ export class VideoLooker extends AbstractLooker<VideoState, VideoSample> {
   }
 
   updateSample(sample: VideoSample) {
-    this.state.buffers = [[1, 1]];
-    this.frames.clear();
+    if (lookerWithReader === this) {
+      lookerWithReader?.pause();
+      lookerWithReader = null;
+    }
+
+    this.frames = new Map();
+    this.state.buffers = this.initialBuffers(this.state.config);
     super.updateSample(sample);
-    this.setReader();
   }
 
   getVideo() {
@@ -565,6 +569,11 @@ export class VideoLooker extends AbstractLooker<VideoState, VideoSample> {
       this.frames.get(frameNumber)?.deref() !== undefined
     );
   }
+
+  private initialBuffers(config: VideoConfig) {
+    const firstFrame = config.support ? config.support[0] : 1;
+    return [[firstFrame, firstFrame]] as Buffers;
+  }
 }
 
 const withFrames = <T extends { [key: string]: unknown }>(obj: T): T =>

app/packages/looker/src/state.ts

@@ -341,6 +341,7 @@ export interface ImageState extends BaseState {
 }
 
 export interface VideoState extends BaseState {
+  buffers: Buffers;
   config: VideoConfig;
   options: VideoOptions;
   seeking: boolean;