Know how your videos perform.

"use client";

import { useCallback } from "react";
import { ChunkifyPlayer, type ChunkifyPlayerRef }
  from "@chunkify/player-react";
import { monitor } from "@chunkify/player-analytics";
import { createChunkifyAdapter }
  from "@chunkify/player-analytics/chunkify";

// Chunkify-managed analytics. Use your own URL when self-hosting.
const destination = createChunkifyAdapter(
  "https://analytics.chunkify.dev/v1/events",
  { ingestKey: "YOUR_PUBLIC_INGEST_KEY" },
);

type Video = {
  id: string;
  playback_url: string;
  poster_url: string | null;
  thumbnails_url: string | null;
};

export function VideoPlayer({ video }: { video: Video }) {
  const attachAnalytics = useCallback(
    (player: ChunkifyPlayerRef | null) => {
      if (!player) return;
      const session = monitor(player, {
        videoId: video.id,
        destinations: [destination],
      });
      return () => session.destroy();
    }, [video.id, video.playback_url],
  );

  return (
    <ChunkifyPlayer
      ref={attachAnalytics}
      src={video.playback_url}
      poster={video.poster_url}
      thumbnails={video.thumbnails_url}
      controls
      playsInline
    />
  );
}

"use client";

import { useCallback } from "react";
import { ChunkifyPlayer, type ChunkifyPlayerRef }
  from "@chunkify/player-react";
import { monitor } from "@chunkify/player-analytics";
import { createDatadogAdapter }
  from "@chunkify/player-analytics/datadog";
import { datadogRum } from "@datadog/browser-rum";

function initRum() {
  if (datadogRum.getInitConfiguration()) return;

  datadogRum.init({
    applicationId: "YOUR_RUM_APPLICATION_ID",
    clientToken: "YOUR_RUM_CLIENT_TOKEN",
    site: "datadoghq.com",
    service: "video-app",
    env: "production",
    sessionSampleRate: 100,
    sessionReplaySampleRate: 0,
  });
}

type Video = {
  id: string;
  playback_url: string;
  poster_url: string | null;
  thumbnails_url: string | null;
};

export function VideoPlayer({ video }: { video: Video }) {
  const attachAnalytics = useCallback(
    (player: ChunkifyPlayerRef | null) => {
      if (!player) return;
      initRum();
      const session = monitor(player, {
        videoId: video.id,
        destinations: [createDatadogAdapter(datadogRum)],
      });
      return () => session.destroy();
    }, [video.id, video.playback_url],
  );

  return (
    <ChunkifyPlayer
      ref={attachAnalytics}
      src={video.playback_url}
      poster={video.poster_url}
      thumbnails={video.thumbnails_url}
      controls
      playsInline
    />
  );
}