https://github.com/thomascogez/useaudiopictureinpicture
useAudioPictureInPicture is a react hook that allow to enable picture in picture mode on your audio player (spotify like)
https://github.com/thomascogez/useaudiopictureinpicture
hook hooks music picture-in-picture react spotify
Last synced: 7 months ago
JSON representation
useAudioPictureInPicture is a react hook that allow to enable picture in picture mode on your audio player (spotify like)
- Host: GitHub
- URL: https://github.com/thomascogez/useaudiopictureinpicture
- Owner: Thomascogez
- Created: 2020-01-15T17:38:58.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:15:08.000Z (almost 3 years ago)
- Last Synced: 2025-03-30T15:39:18.392Z (7 months ago)
- Topics: hook, hooks, music, picture-in-picture, react, spotify
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/useaudiopictureinpicture
- Size: 17.7 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# useAudioPictureInPicture
:warning: 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
[](https://www.npmjs.com/package/useaudiopictureinpicture) [](https://standardjs.com)
## Install
```bash
npm install --save useaudiopictureinpicture
```
or
```bash
yarn add useaudiopictureinpicture
```
## Demo
You can find a demo of the package [here](https://thomascogez.github.io/useAudioPictureInPicture/)
## Usage
```jsx
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](./doc/updatePip.md) |
## License
MIT © [Thomascogez](https://github.com/Thomascogez)
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).