npm - @hienlh/ppm - Versions diffs - 0.9.81 → 0.9.83 - Mend

@hienlh/ppm 0.9.81 → 0.9.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1754) hide show

package/.opencode/skills/remotion/rules/audio.md DELETED Viewed

@@ -1,172 +0,0 @@
----
-name: audio
-description: Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
-metadata:
-  tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx
----
-# Using audio in Remotion
-## Prerequisites
-First, the @remotion/media package needs to be installed.
-If it is not installed, use the following command:
-```bash
-npx remotion add @remotion/media # If project uses npm
-bunx remotion add @remotion/media # If project uses bun
-yarn remotion add @remotion/media # If project uses yarn
-pnpm exec remotion add @remotion/media # If project uses pnpm
-```
-## Importing Audio
-Use `<Audio>` from `@remotion/media` to add audio to your composition.
-```tsx
-import { Audio } from "@remotion/media";
-import { staticFile } from "remotion";
-export const MyComposition = () => {
-  return <Audio src={staticFile("audio.mp3")} />;
-};
-```
-Remote URLs are also supported:
-```tsx
-<Audio src="https://remotion.media/audio.mp3" />
-```
-By default, audio plays from the start, at full volume and full length.
-Multiple audio tracks can be layered by adding multiple `<Audio>` components.
-## Trimming
-Use `trimBefore` and `trimAfter` to remove portions of the audio. Values are in frames.
-```tsx
-const { fps } = useVideoConfig();
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    trimBefore={2 * fps} // Skip the first 2 seconds
-    trimAfter={10 * fps} // End at the 10 second mark
-  />
-);
-```
-The audio still starts playing at the beginning of the composition - only the specified portion is played.
-## Delaying
-Wrap the audio in a `<Sequence>` to delay when it starts:
-```tsx
-import { Sequence, staticFile } from "remotion";
-import { Audio } from "@remotion/media";
-const { fps } = useVideoConfig();
-return (
-  <Sequence from={1 * fps}>
-    <Audio src={staticFile("audio.mp3")} />
-  </Sequence>
-);
-```
-The audio will start playing after 1 second.
-## Volume
-Set a static volume (0 to 1):
-```tsx
-<Audio src={staticFile("audio.mp3")} volume={0.5} />
-```
-Or use a callback for dynamic volume based on the current frame:
-```tsx
-import { interpolate } from "remotion";
-const { fps } = useVideoConfig();
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    volume={(f) =>
-      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
-    }
-  />
-);
-```
-The value of `f` starts at 0 when the audio begins to play, not the composition frame.
-## Muting
-Use `muted` to silence the audio. It can be set dynamically:
-```tsx
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    muted={frame >= 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s
-  />
-);
-```
-## Speed
-Use `playbackRate` to change the playback speed:
-```tsx
-<Audio src={staticFile("audio.mp3")} playbackRate={2} /> {/* 2x speed */}
-<Audio src={staticFile("audio.mp3")} playbackRate={0.5} /> {/* Half speed */}
-```
-Reverse playback is not supported.
-## Looping
-Use `loop` to loop the audio indefinitely:
-```tsx
-<Audio src={staticFile("audio.mp3")} loop />
-```
-Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
-- `"repeat"`: Frame count resets to 0 each loop (default)
-- `"extend"`: Frame count continues incrementing
-```tsx
-<Audio
-  src={staticFile("audio.mp3")}
-  loop
-  loopVolumeCurveBehavior="extend"
-  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
-/>
-```
-## Pitch
-Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
-```tsx
-<Audio
-  src={staticFile("audio.mp3")}
-  toneFrequency={1.5} // Higher pitch
-/>
-<Audio
-  src={staticFile("audio.mp3")}
-  toneFrequency={0.8} // Lower pitch
-/>
-```
-Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.

package/.opencode/skills/remotion/rules/calculate-metadata.md DELETED Viewed

@@ -1,104 +0,0 @@
----
-name: calculate-metadata
-description: Dynamically set composition duration, dimensions, and props
-metadata:
-  tags: calculateMetadata, duration, dimensions, props, dynamic
----
-# Using calculateMetadata
-Use `calculateMetadata` on a `<Composition>` to dynamically set duration, dimensions, and transform props before rendering.
-```tsx
-<Composition id="MyComp" component={MyComponent} durationInFrames={300} fps={30} width={1920} height={1080} defaultProps={{videoSrc: 'https://remotion.media/video.mp4'}} calculateMetadata={calculateMetadata} />
-```
-## Setting duration based on a video
-Use the `getMediaMetadata()` function from the mediabunny/metadata skill to get the video duration:
-```tsx
-import {CalculateMetadataFunction} from 'remotion';
-import {getMediaMetadata} from '../get-media-metadata';
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const {durationInSeconds} = await getMediaMetadata(props.videoSrc);
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-  };
-};
-```
-## Matching dimensions of a video
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const {durationInSeconds, dimensions} = await getMediaMetadata(props.videoSrc);
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-    width: dimensions?.width ?? 1920,
-    height: dimensions?.height ?? 1080,
-  };
-};
-```
-## Setting duration based on multiple videos
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const metadataPromises = props.videos.map((video) => getMediaMetadata(video.src));
-  const allMetadata = await Promise.all(metadataPromises);
-  const totalDuration = allMetadata.reduce((sum, meta) => sum + meta.durationInSeconds, 0);
-  return {
-    durationInFrames: Math.ceil(totalDuration * 30),
-  };
-};
-```
-## Setting a default outName
-Set the default output filename based on props:
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  return {
-    defaultOutName: `video-${props.id}.mp4`,
-  };
-};
-```
-## Transforming props
-Fetch data or transform props before rendering:
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props, abortSignal}) => {
-  const response = await fetch(props.dataUrl, {signal: abortSignal});
-  const data = await response.json();
-  return {
-    props: {
-      ...props,
-      fetchedData: data,
-    },
-  };
-};
-```
-The `abortSignal` cancels stale requests when props change in the Studio.
-## Return value
-All fields are optional. Returned values override the `<Composition>` props:
-- `durationInFrames`: Number of frames
-- `width`: Composition width in pixels
-- `height`: Composition height in pixels
-- `fps`: Frames per second
-- `props`: Transformed props passed to the component
-- `defaultOutName`: Default output filename
-- `defaultCodec`: Default codec for rendering

package/.opencode/skills/remotion/rules/can-decode.md DELETED Viewed

@@ -1,75 +0,0 @@
----
-name: can-decode
-description: Check if a video can be decoded by the browser using Mediabunny
-metadata:
-  tags: decode, validation, video, audio, compatibility, browser
----
-# Checking if a video can be decoded
-Use Mediabunny to check if a video can be decoded by the browser before attempting to play it.
-## The `canDecode()` function
-This function can be copy-pasted into any project.
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-export const canDecode = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-  try {
-    await input.getFormat();
-  } catch {
-    return false;
-  }
-  const videoTrack = await input.getPrimaryVideoTrack();
-  if (videoTrack && !(await videoTrack.canDecode())) {
-    return false;
-  }
-  const audioTrack = await input.getPrimaryAudioTrack();
-  if (audioTrack && !(await audioTrack.canDecode())) {
-    return false;
-  }
-  return true;
-};
-```
-## Usage
-```tsx
-const src = "https://remotion.media/video.mp4";
-const isDecodable = await canDecode(src);
-if (isDecodable) {
-  console.log("Video can be decoded");
-} else {
-  console.log("Video cannot be decoded by this browser");
-}
-```
-## Using with Blob
-For file uploads or drag-and-drop, use `BlobSource`:
-```tsx
-import { Input, ALL_FORMATS, BlobSource } from "mediabunny";
-export const canDecodeBlob = async (blob: Blob) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new BlobSource(blob),
-  });
-  // Same validation logic as above
-};
-```

package/.opencode/skills/remotion/rules/charts.md DELETED Viewed

@@ -1,58 +0,0 @@
----
-name: charts
-description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, histograms, progress bars, or any data-driven animations.
-metadata:
-  tags: charts, data, visualization, bar-chart, pie-chart, graphs
----
-# Charts in Remotion
-You can create bar charts in Remotion by using regular React code - HTML and SVG is allowed, as well as D3.js.
-## No animations not powered by `useCurrentFrame()`
-Disable all animations by third party libraries.
-They will cause flickering during rendering.
-Instead, drive all animations from `useCurrentFrame()`.
-## Bar Chart Animations
-See [Bar Chart Example](assets/charts/bar-chart.tsx) for a basic example implmentation.
-### Staggered Bars
-You can animate the height of the bars and stagger them like this:
-```tsx
-const STAGGER_DELAY = 5;
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-const bars = data.map((item, i) => {
-  const delay = i * STAGGER_DELAY;
-  const height = spring({
-    frame,
-    fps,
-    delay,
-    config: {damping: 200},
-  });
-  return <div style={{height: height * item.value}} />;
-});
-```
-## Pie Chart Animation
-Animate segments using stroke-dashoffset, starting from 12 o'clock.
-```tsx
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-const progress = interpolate(frame, [0, 100], [0, 1]);
-const circumference = 2 * Math.PI * radius;
-const segmentLength = (value / total) * circumference;
-const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
-<circle r={radius} cx={center} cy={center} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={`${segmentLength} ${circumference}`} strokeDashoffset={offset} transform={`rotate(-90 ${center} ${center})`} />;
-```

package/.opencode/skills/remotion/rules/compositions.md DELETED Viewed

@@ -1,146 +0,0 @@
----
-name: compositions
-description: Defining compositions, stills, folders, default props and dynamic metadata
-metadata:
-  tags: composition, still, folder, props, metadata
----
-A `<Composition>` defines the component, width, height, fps and duration of a renderable video.
-It normally is placed in the `src/Root.tsx` file.
-```tsx
-import { Composition } from "remotion";
-import { MyComposition } from "./MyComposition";
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-    />
-  );
-};
-```
-## Default Props
-Pass `defaultProps` to provide initial values for your component.
-Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
-```tsx
-import { Composition } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={{
-        title: "Hello World",
-        color: "#ff0000",
-      } satisfies MyCompositionProps}
-    />
-  );
-};
-```
-Use `type` declarations for props rather than `interface` to ensure `defaultProps` type safety.
-## Folders
-Use `<Folder>` to organize compositions in the sidebar.
-Folder names can only contain letters, numbers, and hyphens.
-```tsx
-import { Composition, Folder } from "remotion";
-export const RemotionRoot = () => {
-  return (
-    <>
-      <Folder name="Marketing">
-        <Composition id="Promo" /* ... */ />
-        <Composition id="Ad" /* ... */ />
-      </Folder>
-      <Folder name="Social">
-        <Folder name="Instagram">
-          <Composition id="Story" /* ... */ />
-          <Composition id="Reel" /* ... */ />
-        </Folder>
-      </Folder>
-    </>
-  );
-};
-```
-## Stills
-Use `<Still>` for single-frame images. It does not require `durationInFrames` or `fps`.
-```tsx
-import { Still } from "remotion";
-import { Thumbnail } from "./Thumbnail";
-export const RemotionRoot = () => {
-  return (
-    <Still
-      id="Thumbnail"
-      component={Thumbnail}
-      width={1280}
-      height={720}
-    />
-  );
-};
-```
-## Calculate Metadata
-Use `calculateMetadata` to make dimensions, duration, or props dynamic based on data.
-```tsx
-import { Composition, CalculateMetadataFunction } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-const calculateMetadata: CalculateMetadataFunction<MyCompositionProps> = async ({
-  props,
-  abortSignal,
-}) => {
-  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
-    signal: abortSignal,
-  }).then((res) => res.json());
-  return {
-    durationInFrames: Math.ceil(data.duration * 30),
-    props: {
-      ...props,
-      videoUrl: data.url,
-    },
-  };
-};
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100} // Placeholder, will be overridden
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={{ videoId: "abc123" }}
-      calculateMetadata={calculateMetadata}
-    />
-  );
-};
-```
-The function can return `props`, `durationInFrames`, `width`, `height`, `fps`, and codec-related defaults. It runs once before rendering begins.

package/.opencode/skills/remotion/rules/display-captions.md DELETED Viewed

@@ -1,126 +0,0 @@
----
-name: display-captions
-description: Displaying captions in Remotion with TikTok-style pages and word highlighting
-metadata:
-  tags: captions, subtitles, display, tiktok, highlight
----
-# Displaying captions in Remotion
-This guide explains how to display captions in Remotion, assuming you already have captions in the `Caption` format.
-## Prerequisites
-First, the @remotion/captions package needs to be installed.
-If it is not installed, use the following command:
-```bash
-npx remotion add @remotion/captions # If project uses npm
-bunx remotion add @remotion/captions # If project uses bun
-yarn remotion add @remotion/captions # If project uses yarn
-pnpm exec remotion add @remotion/captions # If project uses pnpm
-```
-## Creating pages
-Use `createTikTokStyleCaptions()` to group captions into pages. The `combineTokensWithinMilliseconds` option controls how many words appear at once:
-```tsx
-import {useMemo} from 'react';
-import {createTikTokStyleCaptions} from '@remotion/captions';
-import type {Caption} from '@remotion/captions';
-// How often captions should switch (in milliseconds)
-// Higher values = more words per page
-// Lower values = fewer words (more word-by-word)
-const SWITCH_CAPTIONS_EVERY_MS = 1200;
-const {pages} = useMemo(() => {
-  return createTikTokStyleCaptions({
-    captions,
-    combineTokensWithinMilliseconds: SWITCH_CAPTIONS_EVERY_MS,
-  });
-}, [captions]);
-```
-## Rendering with Sequences
-Map over the pages and render each one in a `<Sequence>`. Calculate the start frame and duration from the page timing:
-```tsx
-import {Sequence, useVideoConfig, AbsoluteFill} from 'remotion';
-import type {TikTokPage} from '@remotion/captions';
-const CaptionedContent: React.FC = () => {
-  const {fps} = useVideoConfig();
-  return (
-    <AbsoluteFill>
-      {pages.map((page, index) => {
-        const nextPage = pages[index + 1] ?? null;
-        const startFrame = (page.startMs / 1000) * fps;
-        const endFrame = Math.min(
-          nextPage ? (nextPage.startMs / 1000) * fps : Infinity,
-          startFrame + (SWITCH_CAPTIONS_EVERY_MS / 1000) * fps,
-        );
-        const durationInFrames = endFrame - startFrame;
-        if (durationInFrames <= 0) {
-          return null;
-        }
-        return (
-          <Sequence
-            key={index}
-            from={startFrame}
-            durationInFrames={durationInFrames}
-          >
-            <CaptionPage page={page} />
-          </Sequence>
-        );
-      })}
-    </AbsoluteFill>
-  );
-};
-```
-## Word highlighting
-A caption page contains `tokens` which you can use to highlight the currently spoken word:
-```tsx
-import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
-import type {TikTokPage} from '@remotion/captions';
-const HIGHLIGHT_COLOR = '#39E508';
-const CaptionPage: React.FC<{page: TikTokPage}> = ({page}) => {
-  const frame = useCurrentFrame();
-  const {fps} = useVideoConfig();
-  // Current time relative to the start of the sequence
-  const currentTimeMs = (frame / fps) * 1000;
-  // Convert to absolute time by adding the page start
-  const absoluteTimeMs = page.startMs + currentTimeMs;
-  return (
-    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
-      <div style={{fontSize: 80, fontWeight: 'bold', whiteSpace: 'pre'}}>
-        {page.tokens.map((token) => {
-          const isActive =
-            token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
-          return (
-            <span
-              key={token.fromMs}
-              style={{color: isActive ? HIGHLIGHT_COLOR : 'white'}}
-            >
-              {token.text}
-            </span>
-          );
-        })}
-      </div>
-    </AbsoluteFill>
-  );
-};
-```