useaudiopictureinpicture
v1.2.0
Published
A react component that allow you to enable picture in picture mode on your audio player
Downloads
8
Maintainers
Readme
useAudioPictureInPicture
A react component that allow you to enable picture in picture mode on your audio player. The inspiration came from the open spotify player
Install
npm install --save useaudiopictureinpicture
or
yarn add useaudiopictureinpicture
Demo
You can find a demo of the package here
Todo
- [ ] Browser compatibility indicator
- [ ] any suggestion ...
Usage
import React, { Component } from 'react'
import { useAudioPictureInPicture } from 'useaudiopictureinpicture'
const Example = () => {
//basic setup of the useAudioPictureInPicture hook
const {isPipToggled, togglePip, updatePip} = useAudioPictureInPicture(initialImage, play, pause, previous, next)
}
(See the example directory for a complete example)
Parameters:
| Parameter | description | required? | default | | ------------ | ------------------------------------------------------------ | --------- | ------- | | initialImage | First image to display when picture in picture mode is enable | true | null | | onPlay | Function that would be trigger when the play button is pressed on the picture in picture frame | false | null | | onPause | Function that would be trigger when the pause button is pressed on the picture in picture frame | false | null | | onPrevious | Function that would be trigger when the previous button is pressed on the picture in picture frame | false | null | | onNext | Function that would be trigger when the next button is pressed on the picture in picture frame | false | null |
Return:
| Name | Type | Description | | ------------ | -------- | ------------------------------------------------------------ | | isPipToggled | boolean | State that represent the toggle state of the picture in picture | | togglePip | function | toggles state of PiP in document | | updatePip | function | see reference here |
License
MIT © Thomascogez
This hook is created using create-react-hook.