# useMediaMetadata

Fluxlay デスクトップアプリからストリーミングされる、システムで再生中のメディア情報をサブスクライブします。Spotify や Apple Music などのメディアプレーヤーの曲名、アーティスト、アルバムアートワーク、再生状態を取得できます。

## インポート

```tsx
import { useMediaMetadata } from "@fluxlay/react";
```

## シグネチャ

```tsx
function useMediaMetadata(options?: MediaMetadataOptions): MediaMetadataInfo;
```

## 引数

### MediaMetadataOptions

| プロパティ   | 型       | デフォルト | 説明                       |
| ------------ | -------- | ---------- | -------------------------- |
| `intervalMs` | `number` | `1000`     | ポーリング間隔（ミリ秒）。 |

## 戻り値

| プロパティ     | 型               | 説明                                                         |
| -------------- | ---------------- | ------------------------------------------------------------ |
| `title`        | `string \| null` | 曲名。                                                       |
| `artist`       | `string \| null` | アーティスト名。                                             |
| `album`        | `string \| null` | アルバム名。                                                 |
| `artwork`      | `string \| null` | アートワーク画像の data URL（`data:image/...;base64,...`）。 |
| `duration`     | `number \| null` | 曲の長さ（秒）。                                             |
| `elapsedTime`  | `number \| null` | 経過再生時間（秒）。                                         |
| `playbackRate` | `number \| null` | 再生速度（0.0 = 一時停止、1.0 = 再生中）。                   |
| `isPlaying`    | `boolean`        | メディアが再生中かどうか。                                   |

最初のイベントを受信するまで全フィールドが `null`（`isPlaying` は `false`）を返します。

## 使用例

```tsx
function Wallpaper() {
  const { title, artist, artwork, isPlaying } = useMediaMetadata({ intervalMs: 1000 });

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      {artwork && <img src={artwork} alt="Album art" width={120} />}
      <div>
        <h2>{title ?? "再生中の曲はありません"}</h2>
        <p>{artist}</p>
        <p>{isPlaying ? "▶ 再生中" : "⏸ 一時停止"}</p>
      </div>
    </div>
  );
}
```

### useProperties と組み合わせる

`useProperties` と組み合わせることで、エンドユーザーがポーリング間隔を変更できるようになります。

```tsx
function Wallpaper() {
  const props = useProperties();
  const meta = useMediaMetadata({ intervalMs: props.updateInterval as number });
  // ...
}
```

## 備考

- macOS 15.4 以降では、システムの Now Playing 情報取得に JavaScript for Automation（JXA）ベースのアダプターを使用します。
- メディア情報はイベント駆動で更新されます（曲変更・再生/停止時）。経過時間はバックエンド側で補間されます。
- アートワークは data URL 形式（Base64 エンコード済み）で提供されるため、`<img>` タグの `src` にそのまま設定できます。
- このフックは Fluxlay デスクトップアプリ内でのみ動作します。通常のブラウザでは初期値を返します。
- `options` の値が変更されると、ストリームが自動的に再接続されます。