react-media-session 
The react component that wraps mediaSession.
What is MediaSession
Requirement
-
react>= 16.8 withhooks
Installation
npm install --save @mebtte/react-media-sessionUsage
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
LICENSE
MIT
