SlideShow

The SlideShow component serves as utility to chain series of scene one after the other. It can only accept Slide components as children. After it is mounted it will start showing slides sequentially one after the other. How long single slide shows up is evaluated as follows:

• If durationMs is specified it takes precedence.
• If any of child components (not necessarily direct child) are InputStream, Mp4, or another SlideShow then it will stay on that slide for as long as they are running.
• If there are not child components that can extend the Slide lifetime then after 1 second it will switch to the next slide.

Usage

SlideShowExample.tsx

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

function ExampleApp() {
  return (
    <View style={{ backgroundColor: "#52505b" }}>
      <Rescaler>
        <SlideShow>
          <Slide durationMs={5000}>
            <Text>Text visible for 5 seconds</Text>
          </Slide>
          <Slide>
            <Mp4 source="https://example.com/video.mp4" />
          </Slide>
          <Slide durationMs={5000}>
            <Text>
              Text visible after entire mp4 file finished playing.
            </Text>
          </Slide>
        </SlideShow>
      </Rescaler>
    </View>
  );
}

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();

Example output

Props - SlideShow

Type definitions

type SlideShowProps = {
    children?: ReactNode;
}

children

List of <Slide /> components.

• Type: ReactNode

Props - Slide

Type definitions

type SlideProps = {
  children: ReactNode;
  durationMs?: number;
}

children

Content of a single slide

• Type: ReactNode
• Default value: Value produced by useId hook

---

durationMs

Duration in milliseconds, defines how long slide should be shown.

• Type: number