@remotion/studio 4.0.278 → 4.0.280

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.278 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.280 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[158.10ms] Generated.
+[45.22ms] Generated.

package/dist/components/AudioWaveform.js

@@ -11,7 +11,7 @@ const AudioWaveformBar_1 = require("./AudioWaveformBar");
 const container = {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     position: 'absolute',
     height: timeline_layout_1.TIMELINE_LAYER_HEIGHT,
 };
@@ -98,8 +98,9 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, s
         return (0, media_utils_1.getWaveformPortion)({
             audioData: metadata,
             startTimeInSeconds: startFrom / vidConf.fps,
-            durationInSeconds: (durationInFrames / vidConf.fps) * playbackRate,
+            durationInSeconds: Math.min((durationInFrames / vidConf.fps) * playbackRate, metadata.durationInSeconds),
             numberOfSamples,
+            normalize: false,
         });
     }, [
         durationInFrames,
@@ -116,7 +117,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, s
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [normalized.map((w) => {
-                return (0, jsx_runtime_1.jsx)(AudioWaveformBar_1.AudioWaveformBar, { amplitude: w.amplitude }, w.index);
+                return ((0, jsx_runtime_1.jsx)(AudioWaveformBar_1.AudioWaveformBar, { amplitude: w.amplitude * (typeof volume === 'number' ? volume : 1) }, w.index));
             }), (0, jsx_runtime_1.jsx)("canvas", { ref: canvas, style: canvasStyle, width: visualizationWidth, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT })] }));
 };
 exports.AudioWaveform = AudioWaveform;

package/dist/components/AudioWaveformBar.d.ts

@@ -1,6 +1,14 @@
 import React from 'react';
-export declare const WAVEFORM_BAR_LENGTH = 4;
-export declare const WAVEFORM_BAR_MARGIN = 2;
+export declare const WAVEFORM_BAR_LENGTH = 2;
+export declare const WAVEFORM_BAR_MARGIN = 1;
+/**
+ *
+ * consider a sinus wave with an amplitude going from [-1, 1].
+ * if we sample it infinitely, and convert all negative samples from negative to positive
+ * what is the average of all samples?
+ *
+ * Answer: 2 / Math.PI = 0.6366
+ */
 export declare const AudioWaveformBar: React.FC<{
     readonly amplitude: number;
 }>;

package/dist/components/AudioWaveformBar.js

@@ -4,19 +4,28 @@ exports.AudioWaveformBar = exports.WAVEFORM_BAR_MARGIN = exports.WAVEFORM_BAR_LE
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const timeline_layout_1 = require("../helpers/timeline-layout");
-exports.WAVEFORM_BAR_LENGTH = 4;
-exports.WAVEFORM_BAR_MARGIN = 2;
+exports.WAVEFORM_BAR_LENGTH = 2;
+exports.WAVEFORM_BAR_MARGIN = 1;
 const container = {
     width: exports.WAVEFORM_BAR_LENGTH,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    backgroundColor: 'rgba(255, 255, 255, 0.6)',
     marginLeft: exports.WAVEFORM_BAR_MARGIN,
     borderRadius: 2,
 };
+// Sonnet:
+/**
+ *
+ * consider a sinus wave with an amplitude going from [-1, 1].
+ * if we sample it infinitely, and convert all negative samples from negative to positive
+ * what is the average of all samples?
+ *
+ * Answer: 2 / Math.PI = 0.6366
+ */
 const AudioWaveformBar = ({ amplitude }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            height: (timeline_layout_1.TIMELINE_LAYER_HEIGHT / 2) * amplitude,
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT * amplitude * (1 / 0.6366),
         };
     }, [amplitude]);
     return (0, jsx_runtime_1.jsx)("div", { style: style });

package/dist/esm/internals.mjs

@@ -19248,11 +19248,11 @@ import { Internals as Internals49 } from "remotion";
 // src/components/AudioWaveformBar.tsx
 import { useMemo as useMemo100 } from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
-var WAVEFORM_BAR_LENGTH = 4;
-var WAVEFORM_BAR_MARGIN = 2;
+var WAVEFORM_BAR_LENGTH = 2;
+var WAVEFORM_BAR_MARGIN = 1;
 var container38 = {
   width: WAVEFORM_BAR_LENGTH,
-  backgroundColor: "rgba(255, 255, 255, 0.2)",
+  backgroundColor: "rgba(255, 255, 255, 0.6)",
   marginLeft: WAVEFORM_BAR_MARGIN,
   borderRadius: 2
 };
@@ -19260,7 +19260,7 @@ var AudioWaveformBar = ({ amplitude }) => {
   const style11 = useMemo100(() => {
     return {
       ...container38,
-      height: TIMELINE_LAYER_HEIGHT / 2 * amplitude
+      height: TIMELINE_LAYER_HEIGHT * amplitude * (1 / 0.6366)
     };
   }, [amplitude]);
   return /* @__PURE__ */ jsx182("div", {
@@ -19273,7 +19273,7 @@ import { jsx as jsx183, jsxs as jsxs88 } from "react/jsx-runtime";
 var container39 = {
   display: "flex",
   flexDirection: "row",
-  alignItems: "center",
+  alignItems: "flex-end",
   position: "absolute",
   height: TIMELINE_LAYER_HEIGHT
 };
@@ -19363,8 +19363,9 @@ var AudioWaveform = ({
     return getWaveformPortion({
       audioData: metadata,
       startTimeInSeconds: startFrom / vidConf.fps,
-      durationInSeconds: durationInFrames / vidConf.fps * playbackRate,
-      numberOfSamples
+      durationInSeconds: Math.min(durationInFrames / vidConf.fps * playbackRate, metadata.durationInSeconds),
+      numberOfSamples,
+      normalize: false
     });
   }, [
     durationInFrames,
@@ -19391,7 +19392,7 @@ var AudioWaveform = ({
     children: [
       normalized.map((w) => {
         return /* @__PURE__ */ jsx183(AudioWaveformBar, {
-          amplitude: w.amplitude
+          amplitude: w.amplitude * (typeof volume === "number" ? volume : 1)
         }, w.index);
       }),
       /* @__PURE__ */ jsx183("canvas", {

package/dist/esm/previewEntry.mjs

@@ -19530,11 +19530,11 @@ import { Internals as Internals49 } from "remotion";
 // src/components/AudioWaveformBar.tsx
 import { useMemo as useMemo100 } from "react";
 import { jsx as jsx183 } from "react/jsx-runtime";
-var WAVEFORM_BAR_LENGTH = 4;
-var WAVEFORM_BAR_MARGIN = 2;
+var WAVEFORM_BAR_LENGTH = 2;
+var WAVEFORM_BAR_MARGIN = 1;
 var container38 = {
   width: WAVEFORM_BAR_LENGTH,
-  backgroundColor: "rgba(255, 255, 255, 0.2)",
+  backgroundColor: "rgba(255, 255, 255, 0.6)",
   marginLeft: WAVEFORM_BAR_MARGIN,
   borderRadius: 2
 };
@@ -19542,7 +19542,7 @@ var AudioWaveformBar = ({ amplitude }) => {
   const style11 = useMemo100(() => {
     return {
       ...container38,
-      height: TIMELINE_LAYER_HEIGHT / 2 * amplitude
+      height: TIMELINE_LAYER_HEIGHT * amplitude * (1 / 0.6366)
     };
   }, [amplitude]);
   return /* @__PURE__ */ jsx183("div", {
@@ -19555,7 +19555,7 @@ import { jsx as jsx184, jsxs as jsxs88 } from "react/jsx-runtime";
 var container39 = {
   display: "flex",
   flexDirection: "row",
-  alignItems: "center",
+  alignItems: "flex-end",
   position: "absolute",
   height: TIMELINE_LAYER_HEIGHT
 };
@@ -19645,8 +19645,9 @@ var AudioWaveform = ({
     return getWaveformPortion({
       audioData: metadata,
       startTimeInSeconds: startFrom / vidConf.fps,
-      durationInSeconds: durationInFrames / vidConf.fps * playbackRate,
-      numberOfSamples
+      durationInSeconds: Math.min(durationInFrames / vidConf.fps * playbackRate, metadata.durationInSeconds),
+      numberOfSamples,
+      normalize: false
     });
   }, [
     durationInFrames,
@@ -19673,7 +19674,7 @@ var AudioWaveform = ({
     children: [
       normalized.map((w) => {
         return /* @__PURE__ */ jsx184(AudioWaveformBar, {
-          amplitude: w.amplitude
+          amplitude: w.amplitude * (typeof volume === "number" ? volume : 1)
         }, w.index);
       }),
       /* @__PURE__ */ jsx184("canvas", {

package/dist/esm/renderEntry.mjs

@@ -19894,11 +19894,11 @@ var init_get_timeline_sequence_layout = () => {
 // src/components/AudioWaveformBar.tsx
 import { useMemo as useMemo100 } from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
-var WAVEFORM_BAR_LENGTH = 4, WAVEFORM_BAR_MARGIN = 2, container38, AudioWaveformBar = ({ amplitude }) => {
+var WAVEFORM_BAR_LENGTH = 2, WAVEFORM_BAR_MARGIN = 1, container38, AudioWaveformBar = ({ amplitude }) => {
   const style11 = useMemo100(() => {
     return {
       ...container38,
-      height: TIMELINE_LAYER_HEIGHT / 2 * amplitude
+      height: TIMELINE_LAYER_HEIGHT * amplitude * (1 / 0.6366)
     };
   }, [amplitude]);
   return /* @__PURE__ */ jsx182("div", {
@@ -19908,7 +19908,7 @@ var WAVEFORM_BAR_LENGTH = 4, WAVEFORM_BAR_MARGIN = 2, container38, AudioWaveform
 var init_AudioWaveformBar = __esm(() => {
   container38 = {
     width: WAVEFORM_BAR_LENGTH,
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    backgroundColor: "rgba(255, 255, 255, 0.6)",
     marginLeft: WAVEFORM_BAR_MARGIN,
     borderRadius: 2
   };
@@ -19992,8 +19992,9 @@ var container39, errorMessage, canvasStyle, AudioWaveform = ({
     return getWaveformPortion({
       audioData: metadata,
       startTimeInSeconds: startFrom / vidConf.fps,
-      durationInSeconds: durationInFrames / vidConf.fps * playbackRate,
-      numberOfSamples
+      durationInSeconds: Math.min(durationInFrames / vidConf.fps * playbackRate, metadata.durationInSeconds),
+      numberOfSamples,
+      normalize: false
     });
   }, [
     durationInFrames,
@@ -20020,7 +20021,7 @@ var container39, errorMessage, canvasStyle, AudioWaveform = ({
     children: [
       normalized.map((w) => {
         return /* @__PURE__ */ jsx183(AudioWaveformBar, {
-          amplitude: w.amplitude
+          amplitude: w.amplitude * (typeof volume === "number" ? volume : 1)
         }, w.index);
       }),
       /* @__PURE__ */ jsx183("canvas", {
@@ -20037,7 +20038,7 @@ var init_AudioWaveform = __esm(() => {
   container39 = {
     display: "flex",
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-end",
     position: "absolute",
     height: TIMELINE_LAYER_HEIGHT
   };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.278",
+  "version": "4.0.280",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -23,20 +23,20 @@
     "source-map": "0.7.3",
     "open": "^8.4.2",
     "zod": "3.22.3",
-    "remotion": "4.0.278",
-    "@remotion/player": "4.0.278",
-    "@remotion/media-utils": "4.0.278",
-    "@remotion/media-parser": "4.0.278",
-    "@remotion/renderer": "4.0.278",
-    "@remotion/studio-shared": "4.0.278",
-    "@remotion/zod-types": "4.0.278"
+    "remotion": "4.0.280",
+    "@remotion/player": "4.0.280",
+    "@remotion/media-utils": "4.0.280",
+    "@remotion/media-parser": "4.0.280",
+    "@remotion/renderer": "4.0.280",
+    "@remotion/studio-shared": "4.0.280",
+    "@remotion/zod-types": "4.0.280"
   },
   "devDependencies": {
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "@types/semver": "^7.3.4",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.278"
+    "@remotion/eslint-config-internal": "4.0.280"
   },
   "publishConfig": {
     "access": "public"
@@ -72,13 +72,13 @@
   "typesVersions": {
     ">=1.0": {
       "renderEntry": [
-        "dist/renderEntry.d.ts"
+        "./dist/renderEntry.d.ts"
       ],
       "internals": [
-        "dist/internals.d.ts"
+        "./dist/internals.d.ts"
       ],
       "previewEntry": [
-        "dist/previewEntry.d.ts"
+        "./dist/previewEntry.d.ts"
       ]
     }
   },