Vegaメディアコントロールを始める

[package]
title = "<アプリタイトル>"
id = "com.amazondeveloper.media.sample"

[components]
[[components.interactive]]
id = "com.amazondeveloper.media.sample.main"
launch-type = "singleton"
# カテゴリ "com.amazon.category.kepler.media" は主要コンポーネントのみに必要で、マニフェストのextras
# セクションの "interface.provider" キーを使用して識別されます。
categories = ["com.amazon.category.kepler.media"]
runtime-module = "/com.amazon.kepler.keplerscript.runtime.loader_2@IKeplerScript_2_0"

[[extras]]
key = "interface.provider"
component-id = "com.amazondeveloper.media.sample.main"

[extras.value.application]
[[extras.value.application.interface]]
interface_name = "com.amazon.kepler.media.IMediaPlaybackServer"
command_options = [
    "StartOver",
    "Previous",
    "Next",
    "SkipForward",
    "SkipBackward",
    <insert other commands supported>
]
attribute_options = ["AudioAdvanceMuted", <insert any other attribute options supported>]
features = ["AdvancedSeek", "VariableSpeed", "AudioTracks", "TextTracks", <insert other features supported>]

"@amazon-devices/kepler-media-controls": "^1.0.0",
"@amazon-devices/kepler-media-types": "^1.0.0"

import {
  Action,
  ICapabilities,
  IPlaybackState,
  PlaybackStatus,
  IPlaylistState,
  RepeatMode,
  IControl,
  MediaSessionState,
  ITimeValue,
  IPlaybackPosition,
  IMediaSessionId,
  IMediaInfo,
  ILocale,
} from '@amazon-devices/kepler-media-controls';
import {MediaId} from '@amazon-devices/kepler-media-types';

export class MediaPlayerState {
  playbackStatus: PlaybackStatus = PlaybackStatus.NOT_PLAYING;
  playbackSpeed: number = 1.0;
  playbackState: IPlaybackState | undefined;
  updatedAtTime: ITimeValue = {seconds: 1702965600, nanoseconds: 0};
  currentPosition: ITimeValue = {seconds: 10, nanoseconds: 999999999};
  mediaInfo: IMediaInfo | undefined;
  playbackPosition: IPlaybackPosition = {
    updatedAtTime: {seconds: 1702965600, nanoseconds: 0},
    position: {seconds: 10, nanoseconds: 999999999},
  };

  forwardSkipSteps: ITimeValue[] = [
    {seconds: 1, nanoseconds: 0},
    {seconds: 2, nanoseconds: 0},
    {seconds: 3, nanoseconds: 0},
    {seconds: 4, nanoseconds: 0},
  ];

  backwardSkipSteps: ITimeValue[] = [
    {seconds: 1, nanoseconds: 0},
    {seconds: 2, nanoseconds: 0},
    {seconds: 3, nanoseconds: 0},
    {seconds: 4, nanoseconds: 0},
  ];

  mId: MediaId = {contentId: 'com.foo.bar', catalogName: 'sample-catalog-v1'};
  mSessionId: IMediaSessionId = {id: 0};

  currentSupportedActions: Action[] = [
    Action.PLAY,
    Action.PAUSE,
    Action.STOP,
    new Action('ENABLE_XRAY'),
    new Action('DISABLE_XRAY'),
  ];
  currentSupportedSpeeds: number[] = [
    -2.0, -1.5, -1.0, -0.5, 0.5, 1.0, 1.5, 2.0,
  ];
  currentSupportedRatings: number[] = [0.0, 1.0];
  capabilities: ICapabilities | undefined;
  locale: ILocale | undefined;

  repeatMode: RepeatMode = RepeatMode.REPEAT_TRACK;
  enableShuffle: boolean = true;
  playlistState: IPlaylistState | undefined;

  xRayControlName: string = 'X-ray';
  xRayControlStateOff: string = 'off';
  xRayControlStateOn: string = 'on';
  controls: IControl[] | undefined;

  serverState: MediaSessionState | undefined;

  getServerState() {
    this.playbackState = {
      playbackStatus: this.playbackStatus,
      playbackSpeed: this.playbackSpeed,
      position: this.playbackPosition,
    };

    this.capabilities = {
      actions: this.currentSupportedActions,
      speeds: this.currentSupportedSpeeds,
      ratings: this.currentSupportedRatings,
      forwardSkipSteps: this.forwardSkipSteps,
      backwardSkipSteps: this.backwardSkipSteps,
    };

    this.playlistState = {
      repeatMode: this.repeatMode,
      shuffle: this.enableShuffle,
    };

    this.controls = [
      {name: this.xRayControlName, state: this.xRayControlStateOff},
    ];

    this.locale = {
      identifier: 'en-US',
    };

    this.mediaInfo = {
      id: this.mId,
      hasVideo: true,
      availableAudioTracks: [
        {id: '0', displayName: 'English', language: this.locale},
      ],
      availableTextTracks: [
        {id: '0', displayName: 'English', language: this.locale},
      ],
    };

    this.serverState = {
      id: this.mSessionId,
      playbackState: this.playbackState,
      capabilities: this.capabilities,
      playlistState: this.playlistState,
      controls: this.controls,
    };

    return this.serverState;
  }
}

import {
  Action,
  IMediaControlHandlerAsync,
  IMediaSessionId,
  PlaybackStatus,
  RepeatMode,
  ITimeValue,
  ITrack,
  IMediaMetadata,
  MediaSessionState,
} from '@amazon-devices/kepler-media-controls';

import {MediaId} from '@amazon-devices/kepler-media-types';

import {IComponentInstance} from '@amazon-devices/react-native-kepler';

import {
  IMediaControlServerAsync,
  MediaControlServerComponentAsync,
} from '@amazon-devices/kepler-media-controls';

import {MediaPlayerState} from './MediaPlayerState';

export class MediaControlHandlerAsync implements IMediaControlHandlerAsync {
  mediaControlServer: IMediaControlServerAsync;
  mediaPlayerState: MediaPlayerState;

  constructor(componentInstance: IComponentInstance) {
      MediaControlServerComponentAsync.getOrMakeServer();
    this.mediaPlayerState = new MediaPlayerState();

    this.mediaControlServer.setHandlerForComponent(this, componentInstance);
    this.setMediaSessionState();
  }

  setMediaSessionState() {
    const mSessionState = this.mediaPlayerState.getServerState();
    this.mediaControlServer.updateMediaSessionStates([mSessionState]);
  }

  async handlePlay(_sessionId?: IMediaSessionId): Promise<void> {
    this.mediaPlayerState.playbackStatus = PlaybackStatus.PLAYING;
    this.mediaPlayerState.playbackSpeed = 1.0;
    const mSessionState: MediaSessionState = {
      ...this.mediaPlayerState.getServerState(),
    };

    if (mSessionState === undefined) {
      throw new Error('MediaSessionStateが定義されていません');
    }

    this.mediaControlServer.updateMediaSessionStates([mSessionState]);
    return Promise.resolve();
  }

  async handlePause(_sessionId?: IMediaSessionId): Promise<void> {
    this.mediaPlayerState.playbackStatus = PlaybackStatus.PAUSED;
    this.setMediaSessionState();
    return Promise.resolve();
  }

  async handleGetSessionState(
    _sessionId?: IMediaSessionId,
  ): Promise<MediaSessionState[]> {
    const mSessionState = this.mediaPlayerState.getServerState();
    if (mSessionState === undefined) {
      throw new Error('セッション状態を取得できません');
    }
    return Promise.resolve([mSessionState]);
  }

  async handleGetMetadataInfo(id: MediaId): Promise<IMediaMetadata> {
    return Promise.resolve({
      mediaId: id.contentId,
      title: 'サンプルタイトル',
      date: '2024-01-01',
      artwork: [
        {
          url: 'https://example.com/artwork1.jpg',
          sizeTag: 'medium',
          id: 'sample artwork id1',
          tag: 'fantastic',
        },
        {
          url: 'https://example.com/artwork2.jpg',
          sizeTag: 'large',
          id: 'sample artwork id2',
          tag: 'wonderful',
        },
      ],
    });
  }
}

import { useComponentInstance , IComponentInstance } from '@amazon-devices/react-native-kepler';

export const App = () => {
  const componentInstance: IComponentInstance = useComponentInstance();

  useEffect(() => {
    const mediaControlHandler: IMediaControlHandlerAsync =
      new MediaControlHandlerAsync(componentInstance);
  }, []);

  // ここでは、プロバイダーアプリのユーザーインターフェイスを作成しています
};

import {
  VegaMediaControlsError as KMCError,
  IMediaControlClientAsync,
  IMediaControlEndpointLocatorAsync,
  MediaControlComponentAsync,
  MediaSessionState,
  IMediaMetadata,
} from '@amazon-devices/kepler-media-controls';

import {MediaId} from '@amazon-devices/kepler-media-types';

export class MediaAppLocator {
  private static instance: MediaAppLocator = new MediaAppLocator();
  private mediaAppLocator: IMediaControlEndpointLocatorAsync;
  private mediaAppList: IMediaControlClientAsync[];

  private constructor() {
    this.mediaAppLocator = MediaControlComponentAsync.makeMediaControlEndpointLocator();
    this.mediaAppList = [];
  }

  public static getInstance() {
    return this.instance;
  }

  private setMediaAppList = (controllers: IMediaControlClientAsync[]) => {
    // これらのリソースは手動で解放する必要があります
    this.mediaAppList.forEach((client) => client.destroy());
    this.mediaAppList = controllers;
  }

  public addRegistrarListener(onServerListChanged: IMediaControlEndpointLocatorListener) : Promise<ISubscription> {
    return this.mediaAppLocator.addChangeListener(onServerListChanged);
  }

  public getMediaApp(index: number): IMediaControlClientAsync | undefined {
    if (index >= 0 && index < this.mediaAppList.length) {
      return this.mediaAppList[index];;
    } else {
      console.error('getMediaApp invoked with invalid index: ' + index);
      return undefined;
    }
  }

  public fetchMediaApps(): Promise<IMediaControlClientAsync[]> {
    return this.mediaAppLocator
      .getMediaControlEndpoints()
      .then((controllers) => {
        this.setMediaAppList(controllers);
        return controllers;
      })
      .catch((error: KMCError) => {
        console.error('メディアアプリの取得中にエラーが発生しました：' + error.message);
        return [];
      });
  }

  public fetchMediaAppMetadata(index: number, mediaId: MediaId): Promise<IMediaMetadata> {
    const mediaApp = this.getMediaApp(index);
    if (mediaApp) {
      return mediaApp.getMetadata(mediaId);
    } else {
      return Promise.reject();
    }
  }
}

let appLocator = MediaAppLocator.getInstance();
// 現在フォーカスのあるアプリのデフォルトセッションにplayコマンドを送信します
let focusedMediaApp = appLocator.getMediaApp(0);
focusedMediaApp?.play().then(() => {
    console.info("play action succeeded");
}).catch((error: Error) => {
    console.error("playアクションが失敗しました。エラー：" + error.message);
});

// 現在フォーカスのあるアプリの識別子2のセッションにpauseコマンドを送信します
let sessionId: IMediaSessionId = { id: 2};

focusedMediaApp?.pause(sessionId).then(() => {
    console.info("pause action succeeded");
}).catch((error: Error) => {
    console.error("pauseアクションが失敗しました。エラー：" + error.message);
});

struct MediaControlEndpointLocatorListener
    : ApmfBase<MediaControlEndpointLocatorListener, IMediaControlEndpointLocatorListener> {
    using OnUpdatedEndpointsCallback =
        std::function<void(ArrayView<Ptr<IMediaControlClientAsync> const>)>;
    MediaControlEndpointLocatorListener(OnUpdatedEndpointsCallback cb)
        : onUpdatedEndpointsCallback{cb}
    {
    }
    void onSubscribed(View<ISubscription> const subscription)
    {
        // addListenerがサブスクライブされました
    }

    void onSubscriptionError(View<IError> error)
    {
        // addListenerが失敗しました
    }

    void onEndpointsChanged(ArrayView<Ptr<IMediaControlClientAsync> const> updatedEndpoints)
    {
        onUpdatedEndpointsCallback(updatedEndpoints);
    }

    OnUpdatedEndpointsCallback onUpdatedEndpointsCallback;
};

Ptr<IMediaControlEndpointLocatorListener> listener = Ptr<MediaControlEndpointLocatorListener>::Make(
    [this](ArrayView<Ptr<IMediaControlClientAsync> const> endpoints) {
        // 変更が検出されました
        discoveredEndpoints = endpoints;
    });

endpointLocator->addChangeListener(listener);

// このメソッドは、すでに作成済みのMediaAppLocatorクラスに追加できます
public fetchMediaAppState(index: number, sessionId: IMediaSessionId): Promise<MediaSessionState[]> {
    const mediaApp = this.getMediaApp(index);
    if (mediaApp) {
      const sessionStates: Promise<MediaSessionState[]> = mediaApp.getSessionState(sessionId);
      return sessionStates.then((states) => states);
    } else {
      return Promise.reject();
    }
  }

struct GetMediaSessionStateResponseListener
    : ApmfBase<GetMediaSessionStateResponseListener, IGetMediaSessionStateResponseListener> {
    GetMediaSessionStateResponseListener() : future{promise.get_future()} {}
    void onResponse(ArrayView<Ptr<MediaSessionState> const> states)
    {
        // レスポンスを処理します
    }

    void onError(View<IError> error)
    {
        // getMediaSessionStateが失敗しました
    }
};

Ptr<IGetMediaSessionStateResponseListener> listener = Ptr<GetMediaSessionStateResponseListener>::Make();
// すべてのセッションの最新のセッション状態情報を取得します
activeFocusEndpoint->getSessionState(listener, nullptr);

// 識別子1のセッションのセッション状態情報を取得します
Ptr<MediaSessionId> sessionId = MakeBuilder<MediaSessionId>()->id(1)->build().QueryInterface<MediaSessionId>();
activeFocusEndpoint->getSessionState(listener, sessionId);