@turbo-player/integration-react

Introduction

@turbo-player/integration-react exposes a React component and types to easily integrate the turbo player.

The Integration component renders a custom element via its tagName. Provide a moduleUrl to load the script dynamically, or load it separately and just specify the tagName. All additional props are automatically forwarded to the custom element.

Usage

Loading & integrating the player (TypeScript)

// example: player.tsx
import { useEffect, useRef, type ComponentProps, type ComponentRef } from 'react';
import { Integration, IntegrationEvent } from '@turbo-player/integration-react';

// provided by the turbo player team
const MODULE_URL = 'https://player.example.com/integration/1/integration.js';
// matches the custom element tag name defined in the integration script (MODULE_URL)
const TAG_NAME = 'your-integration';

const Player = (props: ComponentProps<typeof Integration>) => {
  const integrationRef = useRef<ComponentRef<typeof Integration>>(null);

  const handlePlay = () => {
    integrationRef.current?.ready.then(() => integrationRef.current?.play());
  };

  const handleContentStart = () => {
    console.log('content start', integrationRef.current?.content);
  };

  useEffect(() => {
    integrationRef.current?.ready.then(() => {
      // interact with the API after initial ready
      if (!integrationRef.current) return;
      // e.g. start at 20 seconds
      integrationRef.current.currentTime = 20;
      // integrationRef.current.volume = 0.1
      // integrationRef.current.muted = true
      // integrationRef.current.play();
    });
    // addEventListener is available immediately (without ready)
    integrationRef.current?.addEventListener(
      IntegrationEvent.CONTENT_START,
      handleContentStart
    );
    return () => {
      integrationRef.current?.removeEventListener(
        IntegrationEvent.CONTENT_START,
        handleContentStart
      );
    };
  }, [integrationRef]);

  return (
    <div>
      <Integration
        ref={integrationRef}
        tagName={TAG_NAME}
        moduleUrl={MODULE_URL}
        {...props}
      />
      <button type="button" onClick={handlePlay}>
        Play
      </button>
    </div>
  );
};

export default Player;

Usage in your component:

// example: app.tsx
import Player from "./player"

export default async function MyApp(props) {
  const params = await props.params

  return (
    <div>
      <Player
        integrationId="REPLACE_WITH_INTEGRATION_ID"
        playlistId="REPLACE_WITH_PLAYLIST_ID"
      />
    </div>
  );
}