@peaske7/readit 0.3.0-rc.0 → 0.3.0-rc.1

package/.agents/skills/remotion-best-practices/rules/compositions.md

@@ -1,154 +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.
-
-## Nesting compositions within another
-
-To add a composition within another composition, you can use the `<Sequence>` component with a `width` and `height` prop to specify the size of the composition.
-
-```tsx
-<AbsoluteFill>
-  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
-    <CompositionComponent />
-  </Sequence>
-</AbsoluteFill>
-```

package/.agents/skills/remotion-best-practices/rules/display-captions.md

@@ -1,184 +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`](https://www.remotion.dev/docs/captions/caption) format.
-
-## Prerequisites
-
-Read [Transcribing audio](transcribe-captions.md) for how to generate captions.
-
-First, the [`@remotion/captions`](https://www.remotion.dev/docs/captions) package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/captions
-```
-
-## Fetching captions
-
-First, fetch your captions JSON file. Use [`useDelayRender()`](https://www.remotion.dev/docs/use-delay-render) to hold the render until the captions are loaded:
-
-```tsx
-import { useState, useEffect, useCallback } from "react";
-import { AbsoluteFill, staticFile, useDelayRender } from "remotion";
-import type { Caption } from "@remotion/captions";
-
-export const MyComponent: React.FC = () => {
-  const [captions, setCaptions] = useState<Caption[] | null>(null);
-  const { delayRender, continueRender, cancelRender } = useDelayRender();
-  const [handle] = useState(() => delayRender());
-
-  const fetchCaptions = useCallback(async () => {
-    try {
-      // Assuming captions.json is in the public/ folder.
-      const response = await fetch(staticFile("captions123.json"));
-      const data = await response.json();
-      setCaptions(data);
-      continueRender(handle);
-    } catch (e) {
-      cancelRender(e);
-    }
-  }, [continueRender, cancelRender, handle]);
-
-  useEffect(() => {
-    fetchCaptions();
-  }, [fetchCaptions]);
-
-  if (!captions) {
-    return null;
-  }
-
-  return <AbsoluteFill>{/* Render captions here */}</AbsoluteFill>;
-};
-```
-
-## 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>
-  );
-};
-```
-
-## White-space preservation
-
-The captions are whitespace sensitive. You should include spaces in the `text` field before each word. Use `whiteSpace: "pre"` to preserve the whitespace in the captions.
-
-## Separate component for captions
-
-Put captioning logic in a separate component.  
-Make a new file for it.
-
-## 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>
-  );
-};
-```
-
-## Display captions alongside video content
-
-By default, put the captions alongside the video content, so the captions are in sync.  
-For each video, make a new captions JSON file.
-
-```tsx
-<AbsoluteFill>
-  <Video src={staticFile("video.mp4")} />
-  <CaptionPage page={page} />
-</AbsoluteFill>
-```

package/.agents/skills/remotion-best-practices/rules/extract-frames.md

@@ -1,229 +0,0 @@
----
-name: extract-frames
-description: Extract frames from videos at specific timestamps using Mediabunny
-metadata:
-  tags: frames, extract, video, thumbnail, filmstrip, canvas
----
-
-# Extracting frames from videos
-
-Use Mediabunny to extract frames from videos at specific timestamps. This is useful for generating thumbnails, filmstrips, or processing individual frames.
-
-## The `extractFrames()` function
-
-This function can be copy-pasted into any project.
-
-```tsx
-import {
-  ALL_FORMATS,
-  Input,
-  UrlSource,
-  VideoSample,
-  VideoSampleSink,
-} from "mediabunny";
-
-type Options = {
-  track: { width: number; height: number };
-  container: string;
-  durationInSeconds: number | null;
-};
-
-export type ExtractFramesTimestampsInSecondsFn = (
-  options: Options,
-) => Promise<number[]> | number[];
-
-export type ExtractFramesProps = {
-  src: string;
-  timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
-  onVideoSample: (sample: VideoSample) => void;
-  signal?: AbortSignal;
-};
-
-export async function extractFrames({
-  src,
-  timestampsInSeconds,
-  onVideoSample,
-  signal,
-}: ExtractFramesProps): Promise<void> {
-  using input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src),
-  });
-
-  const [durationInSeconds, format, videoTrack] = await Promise.all([
-    input.computeDuration(),
-    input.getFormat(),
-    input.getPrimaryVideoTrack(),
-  ]);
-
-  if (!videoTrack) {
-    throw new Error("No video track found in the input");
-  }
-
-  if (signal?.aborted) {
-    throw new Error("Aborted");
-  }
-
-  const timestamps =
-    typeof timestampsInSeconds === "function"
-      ? await timestampsInSeconds({
-          track: {
-            width: videoTrack.displayWidth,
-            height: videoTrack.displayHeight,
-          },
-          container: format.name,
-          durationInSeconds,
-        })
-      : timestampsInSeconds;
-
-  if (timestamps.length === 0) {
-    return;
-  }
-
-  if (signal?.aborted) {
-    throw new Error("Aborted");
-  }
-
-  const sink = new VideoSampleSink(videoTrack);
-
-  for await (using videoSample of sink.samplesAtTimestamps(timestamps)) {
-    if (signal?.aborted) {
-      break;
-    }
-
-    if (!videoSample) {
-      continue;
-    }
-
-    onVideoSample(videoSample);
-  }
-}
-```
-
-## Basic usage
-
-Extract frames at specific timestamps:
-
-```tsx
-await extractFrames({
-  src: "https://remotion.media/video.mp4",
-  timestampsInSeconds: [0, 1, 2, 3, 4],
-  onVideoSample: (sample) => {
-    const canvas = document.createElement("canvas");
-    canvas.width = sample.displayWidth;
-    canvas.height = sample.displayHeight;
-    const ctx = canvas.getContext("2d");
-    sample.draw(ctx!, 0, 0);
-  },
-});
-```
-
-## Creating a filmstrip
-
-Use a callback function to dynamically calculate timestamps based on video metadata:
-
-```tsx
-const canvasWidth = 500;
-const canvasHeight = 80;
-const fromSeconds = 0;
-const toSeconds = 10;
-
-await extractFrames({
-  src: "https://remotion.media/video.mp4",
-  timestampsInSeconds: async ({ track, durationInSeconds }) => {
-    const aspectRatio = track.width / track.height;
-    const amountOfFramesFit = Math.ceil(
-      canvasWidth / (canvasHeight * aspectRatio),
-    );
-    const segmentDuration = toSeconds - fromSeconds;
-    const timestamps: number[] = [];
-
-    for (let i = 0; i < amountOfFramesFit; i++) {
-      timestamps.push(
-        fromSeconds + (segmentDuration / amountOfFramesFit) * (i + 0.5),
-      );
-    }
-
-    return timestamps;
-  },
-  onVideoSample: (sample) => {
-    console.log(`Frame at ${sample.timestamp}s`);
-
-    const canvas = document.createElement("canvas");
-    canvas.width = sample.displayWidth;
-    canvas.height = sample.displayHeight;
-    const ctx = canvas.getContext("2d");
-    sample.draw(ctx!, 0, 0);
-  },
-});
-```
-
-## Cancellation with AbortSignal
-
-Cancel frame extraction after a timeout:
-
-```tsx
-const controller = new AbortController();
-
-setTimeout(() => controller.abort(), 5000);
-
-try {
-  await extractFrames({
-    src: "https://remotion.media/video.mp4",
-    timestampsInSeconds: [0, 1, 2, 3, 4],
-    onVideoSample: (sample) => {
-      using frame = sample;
-      const canvas = document.createElement("canvas");
-      canvas.width = frame.displayWidth;
-      canvas.height = frame.displayHeight;
-      const ctx = canvas.getContext("2d");
-      frame.draw(ctx!, 0, 0);
-    },
-    signal: controller.signal,
-  });
-
-  console.log("Frame extraction complete!");
-} catch (error) {
-  console.error("Frame extraction was aborted or failed:", error);
-}
-```
-
-## Timeout with Promise.race
-
-```tsx
-const controller = new AbortController();
-
-const timeoutPromise = new Promise<never>((_, reject) => {
-  const timeoutId = setTimeout(() => {
-    controller.abort();
-    reject(new Error("Frame extraction timed out after 10 seconds"));
-  }, 10000);
-
-  controller.signal.addEventListener("abort", () => clearTimeout(timeoutId), {
-    once: true,
-  });
-});
-
-try {
-  await Promise.race([
-    extractFrames({
-      src: "https://remotion.media/video.mp4",
-      timestampsInSeconds: [0, 1, 2, 3, 4],
-      onVideoSample: (sample) => {
-        using frame = sample;
-        const canvas = document.createElement("canvas");
-        canvas.width = frame.displayWidth;
-        canvas.height = frame.displayHeight;
-        const ctx = canvas.getContext("2d");
-        frame.draw(ctx!, 0, 0);
-      },
-      signal: controller.signal,
-    }),
-    timeoutPromise,
-  ]);
-
-  console.log("Frame extraction complete!");
-} catch (error) {
-  console.error("Frame extraction was aborted or failed:", error);
-}
-```

package/.agents/skills/remotion-best-practices/rules/ffmpeg.md

@@ -1,38 +0,0 @@
----
-name: ffmpeg
-description: Using FFmpeg and FFprobe in Remotion
-metadata:
-  tags: ffmpeg, ffprobe, video, trimming
----
-
-## FFmpeg in Remotion
-
-`ffmpeg` and `ffprobe` do not need to be installed. They are available via the `bunx remotion ffmpeg` and `bunx remotion ffprobe`:
-
-```bash
-bunx remotion ffmpeg -i input.mp4 output.mp3
-bunx remotion ffprobe input.mp4
-```
-
-### Trimming videos
-
-You have 2 options for trimming videos:
-
-1. Use the FFMpeg command line. You MUST re-encode the video to avoid frozen frames at the start of the video.
-
-```bash
-# Re-encodes from the exact frame
-bunx remotion ffmpeg -ss 00:00:05 -i public/input.mp4 -to 00:00:10 -c:v libx264 -c:a aac public/output.mp4
-```
-
-2. Use the `trimBefore` and `trimAfter` props of the `<Video>` component. The benefit is that this is non-destructive and you can change the trim at any time.
-
-```tsx
-import { Video } from "@remotion/media";
-
-<Video
-  src={staticFile("video.mp4")}
-  trimBefore={5 * fps}
-  trimAfter={10 * fps}
-/>;
-```