Tiles

Tiles is a layout component that arranges all child components side by side, optimizing the use of available space. It divides its area into multiple rectangles or tiles, assigning one to each child component. Each of these rectangles is of equal size and they do not overlap.

Reference

TilesExample.tsx

import {
  InputStream,
  Rescaler,
  Tiles,
  useInputStreams,
} from "@swmansion/smelter";
import Smelter from "@swmansion/smelter-node";

function ExampleApp() {
  const inputs = useInputStreams();

  return (
    <Tiles transition={{ durationMs: 200 }}>
      {Object.values(inputs).map((input) => (
        <Rescaler key={input.inputId} style={{ rescaleMode: "fill" }}>
          <InputStream inputId={input.inputId} />
        </Rescaler>
      ))}
    </Tiles>
  );
}

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,
      },
    },
    audio: {
      encoder: {
        type: "aac",
        channels: "stereo",
      },
    },
  });

  await smelter.start();

  await smelter.registerInput("input_1", {
    type: "mp4",
    serverPath: "./inputExample1.mp4",
  });

  await new Promise<void>((res) => {
    setTimeout(() => res(), 5000);
  });
  await smelter.registerInput("input_2", {
    type: "mp4",
    serverPath: "./inputExample2.mp4",
  });

  await new Promise<void>((res) => {
    setTimeout(() => res(), 5000);
  });
  await smelter.registerInput("input_3", {
    type: "mp4",
    serverPath: "./inputExample3.mp4",
  });
}
void run();

Type definitions

type TilesProps = {
  id?: string;
  children: ReactNode;
  style?: TilesStyleProps;
  transition?: Transition;
}

Positioning

Absolute

A component is absolutely positioned when it specifies style properties such as top, left, right, bottom, or rotation. These properties determine the component’s position relative to its parent. However, the parent component must support absolute positioning for these values to take effect.

Caution

• Tiles do not support absolute positioning for its child components. All children will still be rendered, but all fields like top, left, right, bottom, and rotation will be ignored.
• Tiles cannot be absolutely positioned relative to its parent.

Static

Tiles determine the number of rows and columns in which children should be placed, based on several factors:

• The size of the Tiles component.
• The aspect ratio of a single tile (specified by the titleAspectRatio field).
• The number of child components.

An optimal configuration of rows and columns aims to utilize the largest possible area of the component. Children are positioned in the order they appear, from left to right, and arranged row-by-row from top to bottom.

The placement and sizing behavior of child components varies depending on their type, as detailed in the table below:

Component Type	Behavior
Non-layout Component	Scales proportionally to fit inside the parent. If the aspect ratios do not match, the component will be centered vertically or horizontally.
Layout Component	Takes the width and height of a tile, ignoring its own width/height fields if they are defined.

Transitions

Tiles do not support size transitions in the same way as View or Rescaler. The transitions provided by Tiles are predefined and applied automatically, but you can customize them using transition prop. Currently, we support:

• Adding a new component - when a component is added, all existing components shift to their new locations within a period defined by transition.duration_ms. At the end of this transition, the new child component appears without any animation.
• Removing an existing component - when a component is removed, the tile containing that item disappears immediately without animation. Subsequently, the remaining elements relocate to their new positions within the time specified by transition.duration_ms.
• Reordering child components - whenever the order of the children is changed, the elements relocate to their new positions within the time specified by transition.duration_ms.

Note

To further customize animations, consider wrapping the Tiles component within a View and apply your desired transition to the wrapper.

Adding, removing, or reordering Tiles content requires a method to identify child components. This is essential to determine whether a specific child in a scene update should be treated as the same item from a previous scene.

Description of the identifying logic

Props

children

Content to be displayed within the Tile.

• Type: ReactNode

---

id

ID of a component.

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

---

style

Tiles styling properties.

• Type: TilesStyleProps

---

transition

Specification of the transition properties to be applied while reordering Tiles children

• Type: Transition