# @glomex/integration-react

## Introduction

`@glomex/integration-react` exposes a React component and types to easily integrate the glomex player. In order to use this component, you need to have a glomex account. You can get one by following the instructions in the [Getting Started](https://docs.glomex.com/publisher/getting-started) section.

## About glomex

[glomex](https://glomex.com) operates Germany’s largest marketplace for premium video content. Our platform connects publishers, content creators, and advertisers, enabling the seamless distribution of high-quality video content across the web.

Our ecosystem is designed to create value for all participants:

- **Publishers** gain access to premium video content and monetization opportunities
- **Content Owners** receive wide distribution and revenue for their video assets
- **Advertisers** reach targeted audiences across a network of quality websites

## Usage

### Loading & integrating the player (TypeScript)

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

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}
        {...props}
      />
      <button type="button" onClick={handlePlay}>
        Play
      </button>
    </div>
  );
};

export default Player;
```

**Usage** in your component:

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

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

  return (
    <div>
      <Player
        integrationId="YOUR_INTEGRATION_ID"
        playlistId="YOUR_PLAYLIST_ID"
      />
    </div>
  );
}
```