ヘッドレスアプローチを使用したクライアント側広告挿入の実装

import {
  PlayerClientFactory,
  IPlayerClient,
  IPlayerSessionPositionListener,
} from '@amazon-devices/kepler-player-client';

import {
  IPlayerSessionId,
  IPlayerSessionMediaInfo,
  IPlayerSessionStatus,
  IPlayerSessionState,
} from '@amazon-devices/kepler-player-server';

// プレーヤークライアントの参照
const playerClient = useRef<IPlayerClient | undefined>(undefined);       // メインコンテンツプレーヤークライアント（既に初期化済み）
const adPlayerClient = useRef<IPlayerClient | undefined>(undefined);     // 広告プレーヤークライアント
const playerSessionId = useRef<IPlayerSessionId | undefined>(undefined); // メインセッションID
const adPlayerSessionId = useRef<IPlayerSessionId | undefined>(undefined); // 広告セッションID
const sessionIdCounter = useRef(1);

const positionListener: IPlayerSessionPositionListener = {
  onPositionUpdated: (updatedPosition) => {
    const currentTime = updatedPosition[0]?.position || 0;
    // アプリ固有のロジックで広告ブレークが近づいているかどうかを判断します。
    if (adBreakApproaching(currentTime)) {
      initializeAdPlayer(adMediaInfo);
    }
  },
};

let adReady = false;

const onAdReady = () => {
  adReady = true;
  // 位置リスナーが広告の開始時間を検出するまで待ちます。
};

// 広告の準備が整い、位置リスナーで広告の開始時間になったことが検出されたら、次の処理を実行します。
if (adReady && currentTime >= adStartTime) {
  playerClient.current?.pause(playerSessionId.current);
}

await playerClient.current?.registerStatusListener({
  onSessionStatusChanged: (updatedStatus: Array<IPlayerSessionStatus>) => {
    const mainStatus = updatedStatus.find(
      s => s.sessionId?.id === playerSessionId.current?.id
    );
    if (mainStatus?.playbackState === IPlayerSessionState.PAUSED && adPlayerClient.current) {
      clearMainSurfaceHandle();
      setAdSurfaceHandle();
      adPlayerClient.current?.play(adPlayerSessionId.current);
    }
  }
}, playerSessionId.current);

const onAdEnded = async () => {
  await clearAdSurfaceHandle();
  cleanupAdPlayer();
  await setMainSurfaceHandle();
  await playerClient.current?.play(playerSessionId.current);
};

const cleanupAdPlayer = () => {
  if (!adPlayerClient.current) return;
  adPlayerClient.current.unloadSync(1000, adPlayerSessionId.current);
  adPlayerClient.current = undefined;
  adReady = false;
};

const cleanup = () => {
  if (adPlayerClient.current) {
    adPlayerClient.current.unloadSync(1000, adPlayerSessionId.current);
    adPlayerClient.current = undefined;
  }
  // メインプレーヤークライアントのクリーンアップはアプリの既存のティアダウンロジックによって処理します。
};