use-media-session

"use client"

import * as React from "react"

import { useMediaSession } from "@/hooks/limeplay/use-media-session"

export function MediaSessionController() {
  const mediaSession = useMediaSession()

  React.useEffect(() => {
    mediaSession.setMetadata({
      artist: "Creator",
      artwork: [{ sizes: "512x512", src: "/poster.jpg" }],
      title: "Current asset",
    })

    return () => mediaSession.clearMetadata()
  }, [mediaSession])

  return null
}

import {
  canStartMediaSessionPlayback,
  getMediaSessionPlaybackState,
  getMediaSessionPositionState,
  useMediaSessionActionHandlers,
  useMediaSessionSync,
} from "@/hooks/limeplay/use-media-session"

interface Asset {
  creator?: string
  poster?: string
  title?: string
}

interface CustomMediaSessionControllerProps {
  asset: Asset | null
  currentTime: number
  duration: number
  onPause: () => void
  onPlay: () => Promise<void>
  onSeek: (time: number) => void
  playbackRate: number
  status: string
}

function CustomMediaSessionController({
  asset,
  currentTime,
  duration,
  onPause,
  onPlay,
  onSeek,
  playbackRate,
  status,
}: CustomMediaSessionControllerProps) {
  const active = Boolean(asset)
  const actions = useMediaSessionActionHandlers({
    getCurrentTime: () => currentTime,
    onPause,
    onPlay: () => {
      if (!canStartMediaSessionPlayback(status)) return

      return onPlay()
    },
    onSeek,
  })

  useMediaSessionSync({
    actions,
    active,
    claim: status === "playing",
    metadata: asset
      ? {
          artist: asset.creator,
          artwork: asset.poster ? [{ src: asset.poster }] : [],
          title: asset.title,
        }
      : null,
    playbackState: getMediaSessionPlaybackState({
      active,
      status,
    }),
    position: getMediaSessionPositionState({
      active,
      currentTime,
      duration,
      playbackRate,
    }),
  })

  return null
}