karvas / react-media-session

The react component that wraps MediaSession.

react-media-session

The react component that wraps mediaSession.

What is MediaSession

• MDN
• Google
• Can I use

Requirement

• react >= 16.8 with hooks

Installation

npm install --save @mebtte/react-media-session

Usage

As component

When browser do not support mediaSession, it will be render children only.

import MediaSession from '@mebtte/react-media-session';

<MediaSession
  title="Way back"
  artist="Vicetone,Cozi Zuehlsdorff"
  album="Way Back"
  artwork={[
    {
      src: 'cover_large.jpeg',
      sizes: '256x256,384x384,512x512',
      type: 'image/jpeg',
    },
    {
      src: 'cover_small.jpeg',
      sizes: '96x96,128x128,192x192',
      type: 'image/jpeg',
    },
  ]}
  onPlay={audio.play}
  onPause={audio.pause}
  onSeekBackward={onSeekBackward}
  onSeekForward={onSeekForward}
  onPreviousTrack={playPreviousMusic}
  onNextTrack={playNextMusic}
>
  children or null
</MediaSession>;

As hooks

import { useMediaSession } from '@mebtte/react-media-session';

const Component = () => {
  // ...

  useMediaSession({
    title: 'Way back',
    artist: 'Vicetone,Cozi Zuehlsdorff',
    album: 'Way Back',
    artwork: [
      {
        src: 'cover_large.jpeg',
        sizes: '256x256,384x384,512x512',
        type: 'image/jpeg',
      },
      {
        src: 'cover_small.jpeg',
        sizes: '96x96,128x128,192x192',
        type: 'image/jpeg',
      },
    ],
    onPlay: audio.play,
    onPause: audio.pause,
    onSeekBackward,
    onSeekForward,
    onPreviousTrack,
    onNextTrack,
  });

  // ...
};

When using hooks, you must make sure mediaSession exists. You can judge by blow.

import { HAS_MEDIA_SESSION } from '@mebtte/react-media-session';

Props

props	type	required	default
title	string	false	''
artist	string	false	''
album	string	false	''
artwork	array({ src: string, sizes: string, type?: string })	false	[]
onPlay	func	false	null
onPause	func	false	null
onSeekBackward	func	false	null
onSeekForward	func	false	null
onPreviousTrack	func	false	null
onNextTrack	func	false	null

Screenshot

• Android Chrome
• PC Chrome

LICENSE

MIT