add timeline view

app/packages/core/src/plugins/SchemaIO/components/FrameLoaderView.tsx

@@ -16,15 +16,16 @@ export default function FrameLoaderView(props: ViewPropsType) {
   const setPanelState = useSetPanelStateById(true);
   const localIdRef = React.useRef<string>();
   const bufm = useRef(new BufferManager());
+  const frameDataRef = useRef();
 
   useEffect(() => {
     localIdRef.current = Math.random().toString(36).substring(7);
-    if (data?.frames)
-      window.dispatchEvent(
-        new CustomEvent(`frames-loaded`, {
-          detail: { localId: localIdRef.current },
-        })
-      );
+    if (data?.frames) frameDataRef.current = data.frames;
+    window.dispatchEvent(
+      new CustomEvent(`frames-loaded`, {
+        detail: { localId: localIdRef.current },
+      })
+    );
   }, [data?.signature]);
 
   const loadRange = React.useCallback(
@@ -41,15 +42,22 @@ export default function FrameLoaderView(props: ViewPropsType) {
         }
 
         return new Promise<void>((resolve) => {
-          window.addEventListener(`frames-loaded`, (e) => {
-            if (
-              e instanceof CustomEvent &&
-              e.detail.localId === localIdRef.current
-            ) {
-              bufm.current.addNewRange(range);
-              resolve();
-            }
-          });
+          if (frameDataRef.current) {
+            bufm.current.addNewRange(range);
+            resolve();
+          } else {
+            window.addEventListener(`frames-loaded`, (e) => {
+              if (
+                e instanceof CustomEvent &&
+                e.detail.localId === localIdRef.current
+              ) {
+                try {
+                  bufm.current.addNewRange(range);
+                } catch (e) {}
+                resolve();
+              }
+            });
+          }
         });
       }
     },

app/packages/core/src/plugins/SchemaIO/components/PlotlyView.tsx

@@ -212,7 +212,6 @@ export default function PlotlyView(props: ViewPropsType) {
   return (
     <Box
       {...getComponentProps(props, "container")}
-      useResizeHandler
       sx={{ height: "100%", width: "100%" }}
     >
       <HeaderView {...props} nested />

app/packages/core/src/plugins/SchemaIO/components/TimelineView.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Timeline, useCreateTimeline, useTimeline } from "@fiftyone/playback";
+import { ViewPropsType } from "../utils/types";
+
+export default function TimelineView(props: ViewPropsType) {
+  const { schema } = props;
+  const { view = {} } = schema;
+  const { timeline_name, loop, total_frames } = view;
+
+  const providedcConfig = {
+    loop,
+    totalFrames: total_frames,
+  };
+
+  const defaultConfig = {
+    loop: false,
+  };
+  const finalConfig = {
+    ...defaultConfig,
+    ...providedcConfig,
+  };
+
+  if (!timeline_name) {
+    throw new Error("Timeline name is required");
+  }
+  if (!finalConfig.totalFrames) {
+    throw new Error("Total frames is required");
+  }
+
+  return <TimelineCreator timelineName={timeline_name} {...finalConfig} />;
+}
+
+export const TimelineCreator = ({ timelineName, totalFrames, loop }) => {
+  const { isTimelineInitialized } = useCreateTimeline({
+    name: timelineName,
+    config: {
+      totalFrames: totalFrames,
+      loop,
+    },
+  });
+
+  if (!isTimelineInitialized) {
+    return null;
+  }
+
+  return <Timeline name={timelineName} />;
+};

app/packages/core/src/plugins/SchemaIO/components/index.ts

@@ -49,3 +49,4 @@ export { default as TextFieldView } from "./TextFieldView";
 export { default as TupleView } from "./TupleView";
 export { default as UnsupportedView } from "./UnsupportedView";
 export { default as FrameLoaderView } from "./FrameLoaderView";
+export { default as TimelineView } from "./TimelineView";

fiftyone/operators/types.py

@@ -2475,6 +2475,19 @@ def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
 
+class TimelineView(View):
+    """Represents a timeline for playing animations.
+
+    Args:
+        timeline_name (None): the name of the timeline
+        total_frames (None): the total number of frames in the timeline
+        loop (False): whether to loop the timeline
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+
 class Container(BaseType):
     """Represents a base container for a container types."""