fix bug where timeline name wasn't being forwarded in seek utils (#4975)

* fix eslint

* forward timeline name

app/packages/playback/eslint.config.mjs

@@ -1,12 +1,19 @@
+import { fixupConfigRules } from "@eslint/compat";
+import hooksPlugin from "eslint-plugin-react-hooks";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
 import globals from "globals";
 import tseslint from "typescript-eslint";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-import { fixupConfigRules } from "@eslint/compat";
 
 export default [
   { files: ["lib/**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
   { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
   { languageOptions: { globals: globals.browser } },
   ...tseslint.configs.recommended,
   ...fixupConfigRules(pluginReactConfig),
+  {
+    plugins: {
+      "react-hooks": hooksPlugin,
+    },
+    rules: hooksPlugin.configs.recommended.rules,
+  },
 ];

app/packages/playback/package.json

@@ -6,6 +6,7 @@
         "@eslint/compat": "^1.1.1",
         "eslint": "9.7.0",
         "eslint-plugin-react": "^7.35.0",
+        "eslint-plugin-react-hooks": "rc",
         "globals": "^15.8.0",
         "prettier": "^3.3.3",
         "typescript": "^5.5.4",

app/packages/playback/src/views/Timeline.tsx

@@ -26,14 +26,16 @@ interface TimelineProps {
  */
 export const Timeline = React.memo(
   React.forwardRef<HTMLDivElement, TimelineProps>(
-    ({ name, style, controlsStyle }, ref) => {
+    (timelineProps: TimelineProps, ref) => {
+      const { name, style, controlsStyle } = timelineProps;
+
       const { playHeadState, config, play, pause, setSpeed } =
         useTimeline(name);
       const frameNumber = useFrameNumber(name);
 
-      const { getSeekValue, seekTo } = useTimelineVizUtils();
+      const { getSeekValue, seekTo } = useTimelineVizUtils(name);
 
-      const seekBarValue = React.useMemo(() => getSeekValue(), [frameNumber]);
+      const seekBarValue = React.useMemo(() => getSeekValue(), [getSeekValue]);
 
       const { loaded, loading } = useTimelineBuffers(name);
 
@@ -52,15 +54,15 @@ export const Timeline = React.memo(
             detail: { timelineName: name, start: true },
           })
         );
-      }, [pause]);
+      }, [pause, name]);
 
       const onSeekEnd = React.useCallback(() => {
         dispatchEvent(
           new CustomEvent("seek", {
             detail: { timelineName: name, start: false },
           })
         );
-      }, []);
+      }, [name]);
 
       const [isHoveringSeekBar, setIsHoveringSeekBar] = React.useState(false);
 

app/yarn.lock

@@ -1942,6 +1942,7 @@ __metadata:
     "@eslint/compat": ^1.1.1
     eslint: 9.7.0
     eslint-plugin-react: ^7.35.0
+    eslint-plugin-react-hooks: rc
     globals: ^15.8.0
     jotai: ^2.9.3
     jotai-optics: ^0.4.0
@@ -8388,6 +8389,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react-hooks@npm:rc":
+  version: 5.1.0-rc-28668d39-20241023
+  resolution: "eslint-plugin-react-hooks@npm:5.1.0-rc-28668d39-20241023"
+  peerDependencies:
+    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+  checksum: 6ad29212fa76b96488a6eeb9941a9a6111420092cc309417f5569f917e4e40b15ed282172842ca8611466387c3d750ceee07e9e739e4c28e808065eaf9ed2307
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react@npm:^7.31.11":
   version: 7.34.1
   resolution: "eslint-plugin-react@npm:7.34.1"