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 ( + <> +