media-sequence

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { TransitionSeries } from "@remotion/transitions";
3import React from "react";
4import {
5  AbsoluteFill,
6  interpolate,
7  useCurrentFrame,
8  useVideoConfig,
9} from "remotion";
10import { CODE_THEMES } from "@/remotion/lib/code-syntax";
11import { getSafeAreaPadding } from "@/remotion/lib/layout";
12import { EASING } from "@/remotion/lib/motion-tokens";
13import { resolveMediaWindows, type MediaItem } from "@/remotion/lib/media-utils";
14import { transitionFade } from "@/remotion/primitives/transition-fade";
15import { transitionSlide } from "@/remotion/primitives/transition-slide";
16import { MediaFrame } from "@/remotion/scenes/media-frame";
17 
18const { fontFamily } = loadFont("normal", {
19  weights: ["400", "500", "600"],
20  subsets: ["latin"],
21});
22 
23export type MediaSequenceProps = {
24  items: MediaItem[];
25  /** Length of an item that does not set its own `durationInFrames`. */
26  defaultDurationInFrames?: number;
27  transitionDurationInFrames?: number;
28  /** `slide` pushes each item on from the right; `fade` dissolves. */
29  transition?: "slide" | "fade";
30  /** Chapter strip along the foot, showing which item is playing. */
31  showProgress?: boolean;
32  /** Aspect the frames are cut to. */
33  aspect?: number;
34  backgroundColor?: string;
35  accentColor?: string;
36  theme?: "dark" | "light";
37};
38 
39const clamp = {
40  extrapolateLeft: "clamp",
41  extrapolateRight: "clamp",
42} as const;
43 
44/**
45 * An edited run of shots rather than a slideshow: each item is pushed on by the
46 * next, and a chapter strip along the foot fills through the item that is
47 * playing and stays filled behind it — so the viewer can see where they are in
48 * the sequence and how much is left.
49 */
50export const MediaSequence: React.FC<MediaSequenceProps> = ({
51  items,
52  defaultDurationInFrames = 78,
53  transitionDurationInFrames = 14,
54  transition = "slide",
55  showProgress = true,
56  aspect = 16 / 9,
57  backgroundColor,
58  accentColor = "#E8B86D",
59  theme = "dark",
60}) => {
61  const frame = useCurrentFrame();
62  const { width, height } = useVideoConfig();
63  const palette = CODE_THEMES[theme];
64  const safe = getSafeAreaPadding({ width, height });
65  const u = Math.min(width / 1280, height / 720);
66 
67  const windows = resolveMediaWindows(items, defaultDurationInFrames);
68  const moveFade = transitionFade({
69    durationInFrames: transitionDurationInFrames,
70  });
71  const moveSlide = transitionSlide({
72    durationInFrames: transitionDurationInFrames,
73// … truncated