@remotion/media-utils 4.0.0-imgloading.2 → 4.0.0-jshmr.0

package/dist/audio-buffer/audio-url-helpers.d.ts

@@ -1 +1,5 @@
+/**
+ * @description This API takes an AudioBuffer instance and converts it to a Base 64 Data URL so it can be passed to an <Audio /> tag.
+ * @see [Documentation](https://www.remotion.dev/docs/audio-buffer-to-data-url)
+ */
 export declare const audioBufferToDataUrl: (buffer: AudioBuffer) => string;

package/dist/audio-buffer/audio-url-helpers.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.audioBufferToDataUrl = void 0;
 const audio_buffer_to_wav_1 = require("./audio-buffer-to-wav");
+/**
+ * @description This API takes an AudioBuffer instance and converts it to a Base 64 Data URL so it can be passed to an <Audio /> tag.
+ * @see [Documentation](https://www.remotion.dev/docs/audio-buffer-to-data-url)
+ */
 const audioBufferToDataUrl = (buffer) => {
     const wavAsArrayBuffer = (0, audio_buffer_to_wav_1.audioBufferToWav)(buffer, {
         float32: true,

package/dist/fft/fft-freq.d.ts

@@ -1,4 +1 @@
-export declare const fftFreq: (fftBins: [
-    number,
-    number
-][], sampleRate: number) => number[];
+export declare const fftFreq: (fftBins: [number, number][], sampleRate: number) => number[];

package/dist/fft/fft.d.ts

@@ -1,4 +1 @@
-export declare const fft: (vector: Int16Array) => [
-    number,
-    number
-][];
+export declare const fft: (vector: Int16Array) => [number, number][];

package/dist/fft/mag.d.ts

@@ -1,4 +1 @@
-export declare const fftMag: (fftBins: [
-    number,
-    number
-][]) => number[];
+export declare const fftMag: (fftBins: [number, number][]) => number[];

package/dist/fft/max-value-cached.d.ts

@@ -1,2 +1,2 @@
-import { AudioData } from '..';
+import type { AudioData } from '../types';
 export declare const getMaxPossibleMagnitude: (metadata: AudioData) => number;

package/dist/get-audio-data.d.ts

@@ -1,2 +1,6 @@
-import { AudioData } from './types';
+import type { AudioData } from './types';
+/**
+ * @description Takes an audio src, loads it and returns data and metadata for the specified source.
+ * @see [Documentation](https://www.remotion.dev/docs/get-audio-data)
+ */
 export declare const getAudioData: (src: string) => Promise<AudioData>;

package/dist/get-audio-data.js

@@ -7,7 +7,10 @@ const metadataCache = {};
 const limit = (0, p_limit_1.pLimit)(3);
 const fetchWithCorsCatch = async (src) => {
     try {
-        const response = await fetch(src);
+        const response = await fetch(src, {
+            mode: 'cors',
+            referrerPolicy: 'no-referrer-when-downgrade',
+        });
         return response;
     }
     catch (err) {
@@ -28,6 +31,9 @@ const fn = async (src) => {
     if (metadataCache[src]) {
         return metadataCache[src];
     }
+    if (typeof document === 'undefined') {
+        throw new Error('getAudioData() is only available in the browser.');
+    }
     const audioContext = new AudioContext();
     const response = await fetchWithCorsCatch(src);
     const arrayBuffer = await response.arrayBuffer();
@@ -48,6 +54,10 @@ const fn = async (src) => {
     metadataCache[src] = metadata;
     return metadata;
 };
+/**
+ * @description Takes an audio src, loads it and returns data and metadata for the specified source.
+ * @see [Documentation](https://www.remotion.dev/docs/get-audio-data)
+ */
 const getAudioData = (src) => {
     return limit(fn, src);
 };

package/dist/{get-audio-duration.d.ts → get-audio-duration-in-seconds.d.ts}

@@ -1,8 +1,9 @@
 /**
- * Get the audio file passed in parameter duration in seconds
+ * @default Get the audio file passed in parameter duration in seconds
  * @async
  * @param src path to the audio file
  * @return {number} duration of the audio file in seconds
+ * @see [Documentation](https://www.remotion.dev/docs/get-audio-duration-in-seconds)
  */
 export declare const getAudioDurationInSeconds: (src: string) => Promise<number>;
 /**

package/dist/{get-audio-duration.js → get-audio-duration-in-seconds.js}

@@ -8,6 +8,9 @@ const fn = (src) => {
     if (metadataCache[src]) {
         return Promise.resolve(metadataCache[src]);
     }
+    if (typeof document === 'undefined') {
+        throw new Error('getAudioDuration() is only available in the browser.');
+    }
     const audio = document.createElement('audio');
     audio.src = src;
     return new Promise((resolve, reject) => {
@@ -30,10 +33,11 @@ const fn = (src) => {
     });
 };
 /**
- * Get the audio file passed in parameter duration in seconds
+ * @default Get the audio file passed in parameter duration in seconds
  * @async
  * @param src path to the audio file
  * @return {number} duration of the audio file in seconds
+ * @see [Documentation](https://www.remotion.dev/docs/get-audio-duration-in-seconds)
  */
 const getAudioDurationInSeconds = (src) => {
     return limit(fn, src);

package/dist/get-video-metadata.d.ts

@@ -1,2 +1,6 @@
-import { VideoMetadata } from './types';
+import type { VideoMetadata } from './types';
+/**
+ * @description Takes a src to a video, loads it and returns metadata for the specified source.
+ * @see [Documentation](https://www.remotion.dev/docs/get-video-metadata)
+ */
 export declare const getVideoMetadata: (src: string) => Promise<VideoMetadata>;

package/dist/get-video-metadata.js

@@ -9,6 +9,9 @@ const fn = (src) => {
     if (cache[src]) {
         return Promise.resolve(cache[src]);
     }
+    if (typeof document === 'undefined') {
+        throw new Error('getVideoMetadata() is only available in the browser.');
+    }
     const video = document.createElement('video');
     video.src = src;
     return new Promise((resolve, reject) => {
@@ -17,6 +20,11 @@ const fn = (src) => {
             cleanup();
         };
         const onLoadedMetadata = () => {
+            const pixels = video.videoHeight * video.videoWidth;
+            if (pixels === 0) {
+                reject(new Error('Unable to determine video metadata'));
+                return;
+            }
             const metadata = {
                 durationInSeconds: video.duration,
                 width: video.videoWidth,
@@ -37,6 +45,10 @@ const fn = (src) => {
         video.addEventListener('error', onError, { once: true });
     });
 };
+/**
+ * @description Takes a src to a video, loads it and returns metadata for the specified source.
+ * @see [Documentation](https://www.remotion.dev/docs/get-video-metadata)
+ */
 const getVideoMetadata = (src) => {
     return limit(fn, src);
 };

package/dist/get-waveform-portion.d.ts

@@ -1,8 +1,12 @@
-import { AudioData } from './types';
+import type { AudioData } from './types';
 declare type Bar = {
     index: number;
     amplitude: number;
 };
+/**
+ * @description Takes bulky waveform data (for example fetched by getAudioData()) and returns a trimmed and simplified version of it, for simpler visualization
+ * @see [Documentation](https://www.remotion.dev/docs/get-waveform-portion)
+ */
 export declare const getWaveformPortion: ({ audioData, startTimeInSeconds, durationInSeconds, numberOfSamples, }: {
     audioData: AudioData;
     startTimeInSeconds: number;

package/dist/get-waveform-portion.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getWaveformPortion = void 0;
 const get_wave_form_samples_1 = require("./get-wave-form-samples");
+/**
+ * @description Takes bulky waveform data (for example fetched by getAudioData()) and returns a trimmed and simplified version of it, for simpler visualization
+ * @see [Documentation](https://www.remotion.dev/docs/get-waveform-portion)
+ */
 const getWaveformPortion = ({ audioData, startTimeInSeconds, durationInSeconds, numberOfSamples, }) => {
     const startSample = Math.floor((startTimeInSeconds / audioData.durationInSeconds) *
         audioData.channelWaveforms[0].length);

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { audioBufferToDataUrl } from './audio-buffer/audio-url-helpers';
 export { getAudioData } from './get-audio-data';
-export { getAudioDuration, getAudioDurationInSeconds, } from './get-audio-duration';
+export { getAudioDuration, getAudioDurationInSeconds, } from './get-audio-duration-in-seconds';
 export { getVideoMetadata } from './get-video-metadata';
 export { getWaveformPortion } from './get-waveform-portion';
 export * from './types';

package/dist/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -15,9 +19,9 @@ var audio_url_helpers_1 = require("./audio-buffer/audio-url-helpers");
 Object.defineProperty(exports, "audioBufferToDataUrl", { enumerable: true, get: function () { return audio_url_helpers_1.audioBufferToDataUrl; } });
 var get_audio_data_1 = require("./get-audio-data");
 Object.defineProperty(exports, "getAudioData", { enumerable: true, get: function () { return get_audio_data_1.getAudioData; } });
-var get_audio_duration_1 = require("./get-audio-duration");
-Object.defineProperty(exports, "getAudioDuration", { enumerable: true, get: function () { return get_audio_duration_1.getAudioDuration; } });
-Object.defineProperty(exports, "getAudioDurationInSeconds", { enumerable: true, get: function () { return get_audio_duration_1.getAudioDurationInSeconds; } });
+var get_audio_duration_in_seconds_1 = require("./get-audio-duration-in-seconds");
+Object.defineProperty(exports, "getAudioDuration", { enumerable: true, get: function () { return get_audio_duration_in_seconds_1.getAudioDuration; } });
+Object.defineProperty(exports, "getAudioDurationInSeconds", { enumerable: true, get: function () { return get_audio_duration_in_seconds_1.getAudioDurationInSeconds; } });
 var get_video_metadata_1 = require("./get-video-metadata");
 Object.defineProperty(exports, "getVideoMetadata", { enumerable: true, get: function () { return get_video_metadata_1.getVideoMetadata; } });
 var get_waveform_portion_1 = require("./get-waveform-portion");

package/dist/use-audio-data.d.ts

@@ -1,2 +1,9 @@
-import { AudioData } from './types';
+import type { AudioData } from './types';
+/**
+ * @description Wraps the getAudioData() function into a hook and does 3 things:
+ * @description Keeps the audio data in a state
+ * @description Wraps the function in a delayRender() / continueRender() pattern.
+ * @description Handles the case where the component gets unmounted while the fetching is in progress and a React error is thrown.
+ * @see [Documentation](https://www.remotion.dev/docs/use-audio-data)
+ */
 export declare const useAudioData: (src: string) => AudioData | null;

package/dist/use-audio-data.js

@@ -4,6 +4,13 @@ exports.useAudioData = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_audio_data_1 = require("./get-audio-data");
+/**
+ * @description Wraps the getAudioData() function into a hook and does 3 things:
+ * @description Keeps the audio data in a state
+ * @description Wraps the function in a delayRender() / continueRender() pattern.
+ * @description Handles the case where the component gets unmounted while the fetching is in progress and a React error is thrown.
+ * @see [Documentation](https://www.remotion.dev/docs/use-audio-data)
+ */
 const useAudioData = (src) => {
     if (!src) {
         throw new TypeError("useAudioData requires a 'src' parameter");

package/dist/visualize-audio.d.ts

@@ -1,4 +1,4 @@
-import { AudioData } from './types';
+import type { AudioData } from './types';
 declare type FnParameters = {
     audioData: AudioData;
     frame: number;

package/dist/visualize-audio.js

@@ -4,6 +4,11 @@ exports.visualizeAudio = void 0;
 const get_visualization_1 = require("./fft/get-visualization");
 const max_value_cached_1 = require("./fft/max-value-cached");
 const cache = {};
+/**
+ * @description Takes in AudioData (preferably fetched by the useAudioData() hook) and processes it in a way that makes visualizing the audio that is playing at the current frame easy.
+ * @description part of @remotion/media-utils
+ * @see [Documentation](https://www.remotion.dev/docs/visualize-audio)
+ */
 const visualizeAudioFrame = ({ audioData: metadata, frame, fps, numberOfSamples, }) => {
     const cacheKey = metadata.resultId + frame + fps + numberOfSamples;
     if (cache[cacheKey]) {
@@ -31,7 +36,7 @@ const visualizeAudio = ({ smoothing = true, ...parameters }) => {
     const all = toSmooth.map((s) => {
         return visualizeAudioFrame({ ...parameters, frame: s });
     });
-    return new Array(parameters.numberOfSamples).fill(true).map((x, i) => {
+    return new Array(parameters.numberOfSamples).fill(true).map((_x, i) => {
         return (new Array(toSmooth.length)
             .fill(true)
             .map((_, j) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media-utils",
-	"version": "4.0.0-imgloading.2+74c22dab1",
+	"version": "4.0.0-jshmr.0+ea5ee8bd0",
 	"description": "Utility functions for audio and video",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -18,31 +18,30 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.0-imgloading.2+74c22dab1"
+		"remotion": "4.0.0-jshmr.0+ea5ee8bd0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@jonny/eslint-config": "3.0.259",
+		"@jonny/eslint-config": "3.0.266",
 		"@types/node": "^16.7.5",
-		"@types/react": "18.0.1",
-		"eslint": "8.13.0",
-		"prettier": "^2.0.5",
+		"@types/react": "18.0.26",
+		"eslint": "8.25.0",
+		"prettier": "^2.7.1",
 		"prettier-plugin-organize-imports": "^2.3.4",
-		"typescript": "^4.5.5"
+		"typescript": "^4.7.0"
 	},
 	"keywords": [
 		"remotion",
 		"ffmpeg",
 		"video",
 		"react",
-		"puppeteer",
 		"player"
 	],
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "74c22dab17f36d4d233f8b0304a3252cd05bab21"
+	"gitHead": "ea5ee8bd0ff58192af7a14847a996e0366600fd5"
 }

package/.prettierrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-	singleQuote: true,
-	bracketSpacing: false,
-	useTabs: true,
-	overrides: [
-		{
-			files: ['*.yml'],
-			options: {
-				singleQuote: false,
-			},
-		},
-	],
-	plugins: [require.resolve('prettier-plugin-organize-imports')],
-};

package/tsconfig.json

@@ -1,10 +0,0 @@
-{
-	"extends": "../tsconfig.settings.json",
-	"compilerOptions": {
-		"composite": true,
-		"rootDir": "src",
-		"outDir": "dist"
-	},
-	"include": ["src"],
-	"references": [{"path": "../core"}]
-}