Client side rendering

package.json

@@ -14,17 +14,18 @@
     "sentry:sourcemaps": "sentry-cli sourcemaps inject --org remotion-dev --project node ./dist && sentry-cli sourcemaps upload --org remotion-dev --project node ./dist"
   },
   "dependencies": {
-    "@remotion/bundler": "4.0.240",
-    "@remotion/cli": "4.0.240",
-    "@remotion/google-fonts": "4.0.240",
-    "@remotion/lambda": "4.0.240",
-    "@remotion/noise": "4.0.240",
-    "@remotion/paths": "4.0.240",
-    "@remotion/player": "4.0.240",
-    "@remotion/preload": "4.0.240",
-    "@remotion/shapes": "4.0.240",
-    "@remotion/transitions": "4.0.240",
-    "@remotion/zod-types": "4.0.240",
+    "@remotion/bundler": "4.0.485",
+    "@remotion/cli": "4.0.485",
+    "@remotion/google-fonts": "4.0.485",
+    "@remotion/lambda": "4.0.485",
+    "@remotion/media": "4.0.485",
+    "@remotion/noise": "4.0.485",
+    "@remotion/paths": "4.0.485",
+    "@remotion/player": "4.0.485",
+    "@remotion/preload": "4.0.485",
+    "@remotion/shapes": "4.0.485",
+    "@remotion/transitions": "4.0.485",
+    "@remotion/zod-types": "4.0.485",
     "@sentry/cli": "^2.22.3",
     "@sentry/node": "^7.83.0",
     "@sentry/profiling-node": "^1.2.6",
@@ -42,18 +43,18 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-spring": "^9.7.3",
-    "remotion": "4.0.240",
+    "remotion": "4.0.485",
     "serve-static": "^1.15.0",
     "source-map": "^0.7.3",
     "svgo": "^3.0.2",
     "tsx": "4.7.0",
     "vite": "^5.0.0",
     "vitest": "^0.34.5",
-    "zod": "^3.21.4"
+    "zod": "4.3.6"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.276",
-    "@remotion/eslint-config": "4.0.240",
+    "@remotion/eslint-config": "4.0.485",
     "@svgr/cli": "^8.1.0",
     "@types/node": "18.7.23",
     "@types/react": "18.2.42",

remotion.config.ts

@@ -6,3 +6,6 @@
 import { Config } from "@remotion/cli/config";
 
 Config.setVideoImageFormat("jpeg");
+Config.setExperimentalClientSideRenderingEnabled(true);
+
+Config.setExperimentalClientSideRenderingEnabled(true);

remotion/Contributions/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
+import { Audio } from "@remotion/media";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   Img,
   Sequence,
@@ -193,7 +193,10 @@ export const ContributionsScene: React.FC<{
       <AbsoluteFill>
         {isMobileDevice() ? null : (
           <Sequence>
-            <Audio startFrom={10} src={staticFile("contribution-rocket.mp3")} />
+            <Audio
+              trimBefore={10}
+              src={staticFile("contribution-rocket.mp3")}
+            />
           </Sequence>
         )}
         {frame > 80 && <PlanetEntrance planet={planet} frame={frame} />}

remotion/EndScene/LandingRocket.tsx

@@ -1,10 +1,6 @@
+import { Video } from "@remotion/media";
 import React, { useMemo } from "react";
-import {
-  AbsoluteFill,
-  OffthreadVideo,
-  interpolate,
-  useCurrentFrame,
-} from "remotion";
+import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
 import type { Rocket } from "../../src/config";
 import { getFlame, takeOffSpeedFucntion } from "../Opening/TakeOff";
 import { RocketSide } from "../Spaceship";
@@ -66,7 +62,7 @@ export const LandingRocket: React.FC<{
             alignItems: "center",
           }}
         >
-          <OffthreadVideo
+          <Video
             style={{
               width: height,
               height: 100,
@@ -75,9 +71,8 @@ export const LandingRocket: React.FC<{
               marginTop: -500 + marginTop,
               marginLeft: 20,
             }}
-            startFrom={80}
+            trimBefore={80}
             muted
-            transparent
             src={getFlame(rocket)}
           />
         </AbsoluteFill>

remotion/Gradients/NativeGradient.tsx

@@ -2,8 +2,8 @@ import React, { useMemo } from "react";
 import {
   AbsoluteFill,
   Img,
-  getRemotionEnvironment,
   staticFile,
+  useRemotionEnvironment,
 } from "remotion";
 import type { GradientType } from "./available-gradients";
 import { availableGradients } from "./available-gradients";
@@ -38,7 +38,8 @@ const ImageGradient: React.FC<Props> = ({ gradient }) => {
 };
 
 export const Gradient: React.FC<Props> = ({ gradient }) => {
-  if (getRemotionEnvironment().isRendering) {
+  const env = useRemotionEnvironment();
+  if (env.isRendering) {
     return <ImageGradient gradient={gradient} />;
   }
 

remotion/IGStory/Title.tsx

@@ -25,6 +25,7 @@ export const Title: React.FC<{
     >
       <Img
         src={`https://github.com/${login}.png`}
+        crossOrigin="anonymous"
         style={{
           width: 60,
           height: 60,

remotion/Issues/ZeroIssues.tsx

@@ -1,7 +1,7 @@
+import { Audio } from "@remotion/media";
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Sequence,
   interpolate,
   spring,

remotion/Issues/index.tsx

@@ -1,8 +1,8 @@
+import { Audio } from "@remotion/media";
 import React, { useMemo } from "react";
 import type { CalculateMetadataFunction } from "remotion";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   interpolate,
   Sequence,

remotion/Main.tsx

@@ -1,8 +1,8 @@
+import { Audio } from "@remotion/media";
 import React, { useMemo } from "react";
 import type { CalculateMetadataFunction } from "remotion";
 import {
   AbsoluteFill,
-  Audio,
   Sequence,
   Series,
   random,
@@ -231,7 +231,7 @@ export const Main: React.FC<Schema> = ({
       </Series>
       {isMobileDevice() ? null : (
         <Sequence from={durationInFrames - 230}>
-          <Audio startFrom={170} src={staticFile("landing.mp3")} />
+          <Audio trimBefore={170} src={staticFile("landing.mp3")} />
         </Sequence>
       )}
     </AbsoluteFill>

remotion/Opening/TakeOff.tsx

@@ -1,8 +1,8 @@
+import { Video } from "@remotion/media";
 import { noise2D } from "@remotion/noise";
 import React from "react";
 import {
   AbsoluteFill,
-  OffthreadVideo,
   interpolate,
   staticFile,
   useCurrentFrame,
@@ -73,12 +73,11 @@ export const TakeOff: React.FC<{
           transform: "rotate(-90deg) translateX(-200px) translateY(495px)",
         }}
       >
-        <OffthreadVideo
+        <Video
           style={{
             width: 472,
           }}
           muted
-          transparent
           src={getFlame(rocket)}
         />
       </AbsoluteFill>

remotion/Opening/TitleImage.tsx

@@ -54,7 +54,8 @@ export const TitleImage: React.FC<z.infer<typeof openingTitleSchema>> = ({
       }}
     >
       <Img
-        src={getAvatarImage(login)}
+        crossOrigin="anonymous"
+        src={"https://avatars.githubusercontent.com/u/1629785?v=4"}
         style={{
           width: 160,
           borderRadius: TITLE_IMAGE_INNER_BORDER_RADIUS,

remotion/Opening/index.tsx

@@ -1,7 +1,7 @@
+import { Audio } from "@remotion/media";
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Sequence,
   interpolate,
   spring,
@@ -67,7 +67,7 @@ const OpeningSceneFull: React.FC<z.infer<typeof openingTitleSchema>> = ({
     >
       {isMobileDevice() ? null : (
         <Sequence from={-20}>
-          <Audio startFrom={0} src={LAUNCH_SOUND} />
+          <Audio trimBefore={0} src={LAUNCH_SOUND} />
         </Sequence>
       )}
       <AbsoluteFill

remotion/Productivity/Productivity.tsx

@@ -1,6 +1,6 @@
+import { Audio } from "@remotion/media";
 import {
   AbsoluteFill,
-  Audio,
   spring,
   staticFile,
   useCurrentFrame,

remotion/Productivity/Wheel.tsx

@@ -1,8 +1,8 @@
+import { Audio } from "@remotion/media";
 import { transparentize } from "polished";
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Sequence,
   interpolate,
   spring,

remotion/PromoVideo/Title.tsx

@@ -1,8 +1,8 @@
+import { Video } from "@remotion/media";
 import React from "react";
 import {
   AbsoluteFill,
   Easing,
-  OffthreadVideo,
   interpolate,
   spring,
   useCurrentFrame,
@@ -115,7 +115,7 @@ export const PromoVideoTitle: React.FC<{
             transform: `rotate(${rotate}rad) `,
           }}
         >
-          <OffthreadVideo
+          <Video
             style={{
               position: "absolute",
               marginLeft: -187,

remotion/PromoVideo/Title2.tsx

@@ -1,7 +1,7 @@
+import { Video } from "@remotion/media";
 import React from "react";
 import {
   AbsoluteFill,
-  OffthreadVideo,
   Series,
   interpolate,
   staticFile,
@@ -48,8 +48,8 @@ export const YourYearInReview: React.FC<{
         </AbsoluteFill>
         <Series>
           <Series.Sequence durationInFrames={60}>
-            <OffthreadVideo
-              startFrom={320}
+            <Video
+              trimBefore={320}
               muted
               style={{
                 position: "absolute",
@@ -62,8 +62,8 @@ export const YourYearInReview: React.FC<{
             />
           </Series.Sequence>
           <Series.Sequence durationInFrames={60}>
-            <OffthreadVideo
-              startFrom={550}
+            <Video
+              trimBefore={550}
               muted
               style={{
                 position: "absolute",
@@ -76,8 +76,8 @@ export const YourYearInReview: React.FC<{
             />
           </Series.Sequence>
           <Series.Sequence durationInFrames={60}>
-            <OffthreadVideo
-              startFrom={830}
+            <Video
+              trimBefore={830}
               muted
               style={{
                 height: widthWidth - 2,

remotion/PromoVideo/index.tsx

@@ -1,7 +1,8 @@
+import { Audio } from "@remotion/media";
 import { TransitionSeries, springTiming } from "@remotion/transitions";
 import { slide } from "@remotion/transitions/slide";
 import React from "react";
-import { AbsoluteFill, Audio, Sequence, staticFile } from "remotion";
+import { AbsoluteFill, Sequence, staticFile } from "remotion";
 import { z } from "zod";
 import { Gradient } from "../Gradients/NativeGradient";
 import { Noise } from "../Noise";

remotion/PullRequests/PullRequests.tsx

@@ -1,7 +1,7 @@
+import { Audio } from "@remotion/media";
 import React, { useMemo } from "react";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   Sequence,
   interpolate,
@@ -65,7 +65,7 @@ export const PullRequests: React.FC<z.infer<typeof pullRequestsSchema>> = ({
       }}
     >
       {isMobileDevice() ? null : (
-        <Audio startFrom={40} src={staticFile("reverb.mp3")} />
+        <Audio trimBefore={40} src={staticFile("reverb.mp3")} />
       )}
       {isMobileDevice() && extraPaths > 0 ? null : (
         <Sequence from={175}>