useAudioPictureInPicture

⚠️ I can only assume a working version for chrome, i'm currently looking for other browser compatibility. if you want to contribute your welcome

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

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.