@remotion/studio: seek() API

packages/docs/docs/studio/TableOfContents.tsx

@@ -1,54 +1,58 @@
-import React from "react";
-import { Grid } from "../../components/TableOfContents/Grid";
-import { TOCItem } from "../../components/TableOfContents/TOCItem";
+import React from 'react';
+import {Grid} from '../../components/TableOfContents/Grid';
+import {TOCItem} from '../../components/TableOfContents/TOCItem';
 
 export const TableOfContents: React.FC = () => {
-  return (
-    <div>
-      <Grid>
-        <TOCItem link="/docs/studio/get-static-files">
-          <strong>{"getStaticFiles()"}</strong>
-          <div>
-            Get a list of files in the <code>public</code> folder
-          </div>
-        </TOCItem>
-        <TOCItem link="/docs/studio/watch-public-folder">
-          <strong>{"watchPublicFolder()"}</strong>
-          <div>Listen to changes in the public folder</div>
-        </TOCItem>
-        <TOCItem link="/docs/studio/watch-static-file">
-          <strong>{"watchStaticFile()"}</strong>
-          <div>Listen to changes of a static file</div>
-        </TOCItem>
-        <TOCItem link="/docs/studio/write-static-file">
-          <strong>{"writeStaticFile()"}</strong>
-          <div>Save content to a file in the public directory</div>
-        </TOCItem>
-        <TOCItem link="/docs/studio/save-default-props">
-          <strong>{"saveDefaultProps()"}</strong>
-          <div>Save default props to the root file</div>
-        </TOCItem>
-        <TOCItem link="/docs/studio/update-default-props">
-          <strong>{"updateDefaultProps()"}</strong>
-          <div>Update default props in the Props editor</div>
-        </TOCItem>
-        <TOCItem link="/docs/studio/delete-static-file">
-          <strong>{"deleteStaticFile()"}</strong>
-          <div>Delete a file from the public directory</div>
-        </TOCItem>
-        <TOCItem link="/docs/studio/restart-studio">
-          <strong>{"restartStudio()"}</strong>
-          <div>Restart the Studio Server.</div>
-        </TOCItem>
-        <TOCItem link="/docs/studio/focus-default-props-path">
-          <strong>{"focusDefaultPropsPath()"}</strong>
-          <div>Scrolls to a specific field in the default props editor</div>
-        </TOCItem>
-        <TOCItem link="/docs/studio/reevaluate-composition">
-          <strong>{"reevaluateComposition()"}</strong>
-          <div>Re-runs calculateMetadata() on the current composition</div>
-        </TOCItem>
-      </Grid>
-    </div>
-  );
+	return (
+		<div>
+			<Grid>
+				<TOCItem link="/docs/studio/get-static-files">
+					<strong>{'getStaticFiles()'}</strong>
+					<div>
+						Get a list of files in the <code>public</code> folder
+					</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/watch-public-folder">
+					<strong>{'watchPublicFolder()'}</strong>
+					<div>Listen to changes in the public folder</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/watch-static-file">
+					<strong>{'watchStaticFile()'}</strong>
+					<div>Listen to changes of a static file</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/write-static-file">
+					<strong>{'writeStaticFile()'}</strong>
+					<div>Save content to a file in the public directory</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/save-default-props">
+					<strong>{'saveDefaultProps()'}</strong>
+					<div>Save default props to the root file</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/update-default-props">
+					<strong>{'updateDefaultProps()'}</strong>
+					<div>Update default props in the Props editor</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/delete-static-file">
+					<strong>{'deleteStaticFile()'}</strong>
+					<div>Delete a file from the public directory</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/restart-studio">
+					<strong>{'restartStudio()'}</strong>
+					<div>Restart the Studio Server.</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/seek">
+					<strong>{'seek()'}</strong>
+					<div>Jump to a position in the timeline</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/focus-default-props-path">
+					<strong>{'focusDefaultPropsPath()'}</strong>
+					<div>Scrolls to a specific field in the default props editor</div>
+				</TOCItem>
+				<TOCItem link="/docs/studio/reevaluate-composition">
+					<strong>{'reevaluateComposition()'}</strong>
+					<div>Re-runs calculateMetadata() on the current composition</div>
+				</TOCItem>
+			</Grid>
+		</div>
+	);
 };

packages/docs/docs/studio/seek.mdx

@@ -0,0 +1,26 @@
+---
+image: /generated/articles-docs-studio-seek.png
+title: seek()
+crumb: '@remotion/studio'
+---
+
+# seek()<AvailableFrom v="4.0.259"/>
+
+Jump to a position in time in the Remotion Studio.
+
+If a number smaller than 0 is passed, the value will be automatically clamped to 0.  
+If a number greater than or equal to the duration of the composition is passed, the value will be automatically clamped to `durationInFrames - 1`.
+
+Use [`useVideoConfig()`](/docs/use-video-config) to get the duration of the composition.
+
+## Examples
+
+```tsx twoslash title="Saving {color: 'green'} to Root.tsx"
+import {seek} from '@remotion/studio';
+
+seek(100);
+```
+
+## See also
+
+- [Source code for this function](https://github.com/remotion-dev/remotion/blob/main/packages/studio/src/api/seek.ts)

packages/docs/sidebars.js

@@ -485,6 +485,7 @@ module.exports = {
 				'studio/delete-static-file',
 				'studio/restart-studio',
 				'studio/save-default-props',
+				'studio/seek',
 				'studio/update-default-props',
 				'studio/focus-default-props-path',
 				'studio/reevaluate-composition',

packages/docs/src/data/articles.ts

@@ -4453,6 +4453,15 @@ export const articles = [
 		noAi: false,
 		slug: 'studio/save-default-props',
 	},
+	{
+		id: 'studio/seek',
+		title: 'seek()',
+		relativePath: 'docs/studio/seek.mdx',
+		compId: 'articles-docs-studio-seek',
+		crumb: '@remotion/studio',
+		noAi: false,
+		slug: 'studio/seek',
+	},
 	{
 		id: 'studio/shortcuts',
 		title: 'Keyboard navigation',

packages/example/src/Root.tsx

@@ -120,6 +120,7 @@ import {ThreeDSvgContent} from './3DSvgContent';
 import {AnimatedImages} from './AnimatedImage/Avif';
 import {ParseAndDownloadMedia} from './ParseAndDownloadMedia';
 import {SmoothTextTransition} from './SmoothTextTransition';
+import {Seek} from './StudioApis/Seek';
 
 class Vector2 {
 	readonly x: number;
@@ -1386,6 +1387,16 @@ export const Index: React.FC = () => {
 					schema={saveStudioSchema}
 					defaultProps={{color: 'green'}}
 				/>
+				<Composition
+					id="seek"
+					component={Seek}
+					fps={30}
+					durationInFrames={100}
+					height={200}
+					width={200}
+					schema={saveStudioSchema}
+					defaultProps={{color: 'green'}}
+				/>
 				<Composition
 					id="restart-studio"
 					component={ClickUpdate}

packages/example/src/StudioApis/Seek.tsx

@@ -0,0 +1,25 @@
+import {seek} from '@remotion/studio';
+import React, {useCallback} from 'react';
+import {AbsoluteFill} from 'remotion';
+
+export const Seek: React.FC = () => {
+	const onClick = useCallback(() => {
+		seek(300);
+	}, []);
+
+	const onSecondClick = useCallback(() => {
+		seek(10);
+	}, []);
+
+	const onThirdClick = useCallback(() => {
+		seek(-10);
+	}, []);
+
+	return (
+		<AbsoluteFill>
+			<button onClick={onClick}>Seek</button>
+			<button onClick={onSecondClick}>Seek 10</button>
+			<button onClick={onThirdClick}>Seek -100</button>
+		</AbsoluteFill>
+	);
+};

packages/studio/src/api/seek.ts

@@ -0,0 +1,10 @@
+/*
+ * @description Jump to a different time in the timeline.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/seek)
+ */
+
+import {timeValueRef} from '../components/TimeValue';
+
+export const seek = (frame: number) => {
+	timeValueRef.current?.seek(Math.max(0, frame));
+};

packages/studio/src/components/TimeValue.tsx

@@ -43,6 +43,7 @@ const frameStyle: React.CSSProperties = {
 
 export const timeValueRef = React.createRef<{
 	goToFrame: () => void;
+	seek: (newFrame: number) => void;
 }>();
 
 export const TimeValue: React.FC = () => {
@@ -72,8 +73,9 @@ export const TimeValue: React.FC = () => {
 			goToFrame: () => {
 				ref.current?.click();
 			},
+			seek,
 		}),
-		[],
+		[seek],
 	);
 
 	useEffect(() => {

packages/studio/src/helpers/use-menu-structure.tsx

@@ -595,7 +595,7 @@ export const useMenuStructure = (
 						subMenu: null,
 						type: 'item' as const,
 						value: 'clear-marks',
-						quickSwitcherLabel: 'Timeline: Clear In and Out Mark',
+						quickSwitcherLabel: 'Timeline: Go to frame',
 					},
 					{
 						id: 'fullscreen-divider',

packages/studio/src/index.ts

@@ -10,6 +10,7 @@ export {UpdateDefaultPropsFunction} from './api/helpers/calc-new-props';
 export {reevaluateComposition} from './api/reevaluate-composition';
 export {restartStudio} from './api/restart-studio';
 export {saveDefaultProps} from './api/save-default-props';
+export {seek} from './api/seek';
 export {updateDefaultProps} from './api/update-default-props';
 export {watchPublicFolder} from './api/watch-public-folder';
 export {watchStaticFile} from './api/watch-static-file';