@glomex/integration-react

@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 section.

About glomex

glomex 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)

// 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:

// 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>
  );
}