diff --git a/packages/docs/docs/get-audio-duration-in-seconds.mdx b/packages/docs/docs/get-audio-duration-in-seconds.mdx
index 57f7be4cb31..c7344a3e2e6 100644
--- a/packages/docs/docs/get-audio-duration-in-seconds.mdx
+++ b/packages/docs/docs/get-audio-duration-in-seconds.mdx
@@ -6,7 +6,7 @@ crumb: '@remotion/media-utils'
---
:::warning Deprecated
-This function has been deprecated. Use [`parseMedia()`](/docs/media-parser/parse-media) instead, which is faster and supports more formats.
+This function has been deprecated. Use [`getMediaMetadata()`](/docs/mediabunny/metadata) instead, which is faster and supports more formats.
:::
_Part of the `@remotion/media-utils` package of helper functions._
diff --git a/packages/example/src/Root.tsx b/packages/example/src/Root.tsx
index 32dac4d0608..43d6f4452f9 100644
--- a/packages/example/src/Root.tsx
+++ b/packages/example/src/Root.tsx
@@ -151,6 +151,7 @@ import {
OverlayWithOffset,
} from './TransitionSeriesOverlay';
import {TriangleComp} from './Triangle';
+import {NewVideoBufferStateComp} from './VideoInterruptedByForeignBuffer';
import {VideoTestingPlayback} from './VideoTesting/playback';
import {VideoTestingTrim} from './VideoTesting/trim';
import {RemotionMediaVideoTexture} from './VideoTexture';
@@ -788,6 +789,7 @@ export const Index: React.FC = () => {
/>
+
@@ -1475,16 +1477,16 @@ export const Index: React.FC = () => {
defaultProps={{
title: 'sdasds',
delay: 5.2,
- color: '#df822a',
+ color: 'rgba(223, 42, 42, 0.46)',
list: [{name: 'first', age: 12}],
- matrix: [0, 1, 1, 0],
+ matrix: [0, 1, 1, 0] as const,
description: 'Sample description \nOn multiple lines',
dropdown: 'a' as const,
superSchema: [
{type: 'a' as const, a: {a: 'hi'}},
{type: 'b' as const, b: {b: 'hi'}},
],
- discriminatedUnion: {type: 'auto'},
+ discriminatedUnion: {type: 'auto' as const},
tuple: ['foo', 42, {a: 'hi'}],
}}
/>
diff --git a/packages/example/src/VideoInterruptedByForeignBuffer.tsx b/packages/example/src/VideoInterruptedByForeignBuffer.tsx
new file mode 100644
index 00000000000..788da6f07e9
--- /dev/null
+++ b/packages/example/src/VideoInterruptedByForeignBuffer.tsx
@@ -0,0 +1,71 @@
+import {Video} from '@remotion/media';
+import React, {useEffect} from 'react';
+import {Composition, Sequence, useBufferState, useCurrentFrame} from 'remotion';
+import {calculateMetadataFn} from './NewVideo';
+
+const src = 'https://remotion.media/video.mp4';
+
+const BUFFER_START_FRAME = 60;
+const BUFFER_DURATION_MS = 5000;
+
+const ForeignBufferElement: React.FC = () => {
+ const buffer = useBufferState();
+ const frame = useCurrentFrame();
+
+ useEffect(() => {
+ if (frame === BUFFER_START_FRAME) {
+ const handle = buffer.delayPlayback();
+
+ const timeout = setTimeout(() => {
+ handle.unblock();
+ }, BUFFER_DURATION_MS);
+
+ return () => {
+ clearTimeout(timeout);
+ handle.unblock();
+ };
+ }
+ }, [buffer, frame]);
+
+ return (
+
= BUFFER_START_FRAME ? 'red' : 'green',
+ color: 'white',
+ padding: '8px 16px',
+ fontFamily: 'sans-serif',
+ fontSize: 14,
+ borderRadius: 4,
+ zIndex: 1000,
+ }}
+ >
+ {frame >= BUFFER_START_FRAME
+ ? `Buffering (triggered at frame ${BUFFER_START_FRAME})...`
+ : `Will buffer at frame ${BUFFER_START_FRAME} (current: ${frame})`}
+
+ );
+};
+
+const NewVideoBufferStateComponent: React.FC = () => {
+ return (
+ <>
+
+
+
+
+ >
+ );
+};
+
+export const NewVideoBufferStateComp: React.FC = () => {
+ return (
+
+ );
+};