Show

A simple component that allows scheduling when element should be added. It allows specifying timestamp or delay after mount.

This functionality is primarily useful for offline processing. For live cases the same functionality can be easily reproduced with useEffect+setTimeout.

Reference

Mp4Example.tsx

import { Mp4, Rescaler } from "@swmansion/smelter";
import Smelter from "@swmansion/smelter-node";

function ExampleApp() {
  return (
    <Rescaler>
      <Mp4 source="https://example.com/video.mp4" />
    </Rescaler>
  );
}

async function run() {
  const smelter = new Smelter();
  await smelter.init();

  await smelter.registerOutput("output", <ExampleApp />, {
    type: "mp4",
    serverPath: "./output.mp4",
    video: {
      encoder: {
        type: "ffmpeg_h264",
        preset: "ultrafast",
      },
      resolution: {
        width: 1920,
        height: 1080,
      },
    },
  });

  await smelter.start();
}
void run();

Type definitions

type ShowProps = {
  children: ReactNode;
  timeRangeMs?: { start?: number; end?: number };
  delayMs?: number
}

Props

Either timeRangeMs or delayMs has to be specified.

children

Content to be displayed if condition specified by timeRangeMs or delayMs are met.

• Type: ReactNode

timeRangeMs

Time range defined by start and end timestamps. At least on of them needs to be defined.

• Type: { start?: number; end?: number }

---

delayMs

Duration after Show component is mounted when children components will be visible.

• Type: number
• Default value: 1