useaudiopictureinpicture

1.2.0 • Public • Published

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

Demo

NPM JavaScript Style Guide

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.

Package Sidebar

Install

npm i useaudiopictureinpicture

Weekly Downloads

2

Version

1.2.0

License

MIT

Unpacked Size

32 kB

Total Files

6

Last publish

Collaborators

  • thomas.ca