remotion 3.3.15 → 3.3.16

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> remotion@3.3.14 build /Users/jonathanburger/remotion/packages/core
+> remotion@3.3.15 build /Users/jonathanburger/remotion/packages/core
 > tsc -d
 

package/README.md

@@ -11,7 +11,7 @@
 [![NPM Version](https://img.shields.io/npm/v/remotion.svg?style=flat)](https://www.npmjs.org/package/remotion)
 [![NPM Downloads](https://img.shields.io/npm/dm/remotion.svg?style=flat)](https://npmcharts.com/compare/remotion?minimal=true)
 [![Install Size](https://packagephobia.now.sh/badge?p=remotion)](https://packagephobia.now.sh/result?p=remotion)
-<a href="https://twitter.com/remotion_dev"><img src="https://img.shields.io/twitter/follow/remotion_dev?label=Twitter&style=social" alt="Twitter"></a>
+<a href="https://twitter.com/remotion"><img src="https://img.shields.io/twitter/follow/remotion?label=Twitter&style=social" alt="Twitter"></a>
 
 Remotion is a framework for **creating videos programmatically using React.**
 
@@ -30,7 +30,7 @@ Remotion is a framework for **creating videos programmatically using React.**
 <p>"This video was made with code" <em>- Fireship</em> <a href="https://youtu.be/deg8bOoziaE">Watch</a> • <a href="https://github.com/wcandillon/remotion-fireship">Source</a></p>
 </td>
 <td align="center">
-<img style="width: 240px" src="packages/docs/static/img/github-unwrapped.gif" />
+<img style="width: 240px" src="packages/docs/static/img/unwrapped-2022.gif" />
 <p>GitHub Unwrapped - Personalized year in Review <a href="https://githubunwrapped.com">Try</a> • <a href="https://github.com/remotion-dev/github-unwrapped">Source</a></p>
 </td>
 <td align="center">

package/dist/CompositionManager.d.ts

@@ -23,12 +23,14 @@ declare type EnhancedTSequenceData = {
     volume: string | number;
     doesVolumeChange: boolean;
     startMediaFrom: number;
+    playbackRate: number;
 } | {
     type: 'video';
     src: string;
     volume: string | number;
     doesVolumeChange: boolean;
     startMediaFrom: number;
+    playbackRate: number;
 };
 export declare type TSequence = {
     from: number;

package/dist/audio/Audio.js

@@ -14,6 +14,7 @@ const AudioForDevelopment_1 = require("./AudioForDevelopment");
 const AudioForRendering_1 = require("./AudioForRendering");
 const shared_audio_tags_1 = require("./shared-audio-tags");
 const AudioRefForwardingFunction = (props, ref) => {
+    var _a;
     const audioContext = (0, react_1.useContext)(shared_audio_tags_1.SharedAudioContext);
     const { startFrom, endAt, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
@@ -28,7 +29,9 @@ const AudioRefForwardingFunction = (props, ref) => {
     }, [setDurations]);
     if (loop && props.src && durations[props.src] !== undefined) {
         const duration = Math.floor(durations[props.src] * fps);
-        return ((0, jsx_runtime_1.jsx)(loop_1.Loop, { layout: "none", durationInFrames: duration, children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref }) }));
+        const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
+        const actualDuration = duration / playbackRate;
+        return ((0, jsx_runtime_1.jsx)(loop_1.Loop, { layout: "none", durationInFrames: Math.floor(actualDuration), children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         (0, validate_start_from_props_1.validateStartFromProps)(startFrom, endAt);

package/dist/audio/AudioForDevelopment.js

@@ -52,6 +52,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         mediaRef: audioRef,
         src,
         mediaType: 'audio',
+        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
     });
     (0, use_media_playback_1.useMediaPlayback)({
         mediaRef: audioRef,

package/dist/use-media-in-timeline.d.ts

@@ -1,9 +1,10 @@
 import type { RefObject } from 'react';
 import type { VolumeProp } from './volume-prop';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement>;
     src: string | undefined;
     mediaType: 'audio' | 'video';
+    playbackRate: number;
 }) => void;

package/dist/use-media-in-timeline.js

@@ -20,7 +20,7 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
     const videoConfig = (0, use_video_config_1.useVideoConfig)();
     const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_1.TimelineContext);
     const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
@@ -84,6 +84,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
             showLoopTimesInTimeline: undefined,
+            playbackRate,
         });
         return () => {
             unregisterSequence(id);
@@ -104,6 +105,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
         mediaRef,
         mediaType,
         startsAt,
+        playbackRate,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.15";
+export declare const VERSION = "3.3.16";

package/dist/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '3.3.15';
+exports.VERSION = '3.3.16';

package/dist/video/Video.js

@@ -13,6 +13,7 @@ const duration_state_1 = require("./duration-state");
 const VideoForDevelopment_1 = require("./VideoForDevelopment");
 const VideoForRendering_1 = require("./VideoForRendering");
 const VideoForwardingFunction = (props, ref) => {
+    var _a;
     const { startFrom, endAt, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_1.useVideoConfig)();
@@ -24,7 +25,10 @@ const VideoForwardingFunction = (props, ref) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
     if (loop && props.src && durations[props.src] !== undefined) {
-        return ((0, jsx_runtime_1.jsx)(loop_1.Loop, { durationInFrames: Math.round(durations[props.src] * fps), children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref }) }));
+        const naturalDuration = durations[props.src] * fps;
+        const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
+        const durationInFrames = Math.floor(naturalDuration / playbackRate);
+        return ((0, jsx_runtime_1.jsx)(loop_1.Loop, { durationInFrames: durationInFrames, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         (0, validate_start_from_props_1.validateStartFromProps)(startFrom, endAt);

package/dist/video/VideoForDevelopment.js

@@ -14,7 +14,7 @@ const use_video_config_1 = require("../use-video-config");
 const volume_position_state_1 = require("../volume-position-state");
 const video_fragment_1 = require("./video-fragment");
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
-    var _a;
+    var _a, _b;
     const videoRef = (0, react_1.useRef)(null);
     const volumePropFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
     const { fps, durationInFrames } = (0, use_video_config_1.useVideoConfig)();
@@ -29,6 +29,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         mediaVolume,
         mediaType: 'video',
         src,
+        playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
     });
     (0, use_sync_volume_with_media_tag_1.useSyncVolumeWithMediaTag)({
         volumePropFrame,
@@ -41,7 +42,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         mediaRef: videoRef,
         src,
         mediaType: 'video',
-        playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
+        playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
         onlyWarnForMediaSeekingError,
         acceptableTimeshift: acceptableTimeshift !== null && acceptableTimeshift !== void 0 ? acceptableTimeshift : use_media_playback_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "3.3.15",
+	"version": "3.3.16",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -55,5 +55,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2fc46f12fd00b0f4eace6398e5eaa054210928ea"
+	"gitHead": "f9ad91106fe6fbcc61a25d917cc526a995d9322c"
 }

package/version.js

@@ -1 +1,4 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {value: true});
+
 module.exports = require('./dist/version');