DefaultLayout

The DefaultLayout component provides a ready-to-use, opinionated layout for the video player. It includes standard controls like a play/pause button, progress bar, time display, and settings menu, arranged in a familiar and intuitive way.

Usage

You can use DefaultLayout by passing it as a child to the VideoPlayer component.

VideoPlayer.tsx

import { VideoPlayer, DefaultLayout } from 'react-native-video-toolkit';

export const Player = () => {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <DefaultLayout title="My Awesome Video" subtitle="An example of the DefaultLayout" />
    </VideoPlayer>
  );
};

Props

Prop	Type	Description
`title`	`string`	The main title of the video, displayed in the top-left corner.
`subtitle`	`string`	A subtitle or secondary text, displayed below the main title.
`slots`	`object`	An object that allows you to render custom components in predefined slots.

Slots

The slots prop allows you to inject your own components or elements into specific areas of the layout. This is useful for adding extra functionality or customizing the UI without having to rebuild the entire layout.

The slots prop provides a powerful way to extend the DefaultLayout while maintaining its overall structure.

Here are the available slots:

Slot	Description
`beforeSettingsButton`	Renders a component before the settings button.
`afterSettingsButton`	Renders a component after the settings button.
`beforeSubtitleToggleButton`	Renders a component before the subtitle toggle button.
`afterSubtitleToggleButton`	Renders a component after the subtitle toggle button.
`beforeProgressBar`	Renders a component above the progress bar.
`afterProgressBar`	Renders a component below the progress bar.
`beforeTimeDisplay`	Renders a component before the time display.
`afterTimeDisplay`	Renders a component after the time display.
`beforeMuteButton`	Renders a component before the mute button.
`afterMuteButton`	Renders a component after the mute button.
`beforeFullscreenButton`	Renders a component before the fullscreen button.
`afterFullscreenButton`	Renders a component after the fullscreen button.
`beforeCenterPlayButton`	Renders a component before the center play button.
`afterCenterPlayButton`	Renders a component after the center play button.

Examples

Basic Usage

Here's a basic example of how to use the DefaultLayout with a title and subtitle.

Player.tsx

import { VideoPlayer, DefaultLayout } from 'react-native-video-toolkit';

export const Player = () => {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <DefaultLayout title="My Awesome Video" subtitle="An example of the DefaultLayout" />
    </VideoPlayer>
  );
};

Using Slots

This example demonstrates how to use the slots prop to add a custom "Like" button next to the fullscreen button.

PlayerWithCustomButton.tsx

import { VideoPlayer, DefaultLayout, BaseIconButton } from 'react-native-video-toolkit';
import { Heart } from 'lucide-react-native';

const LikeButton = () => (
  <BaseIconButton IconComponent={Heart} onTap={() => console.log('Liked!')} size={24} color="white" />
);

export const PlayerWithCustomButton = () => {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <DefaultLayout
        title="My Awesome Video"
        slots={{
          beforeFullscreenButton: <LikeButton />,
        }}
      />
    </VideoPlayer>
  );
};

The DefaultLayout includes the following controls: