Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amarcu5/PiPer
Browser extension that adds Picture in Picture support to YouTube, Netflix, Amazon Video, Twitch, Plex, and more!
https://github.com/amarcu5/PiPer
amazon-video chrome-extension netflix picture-in-picture plex safari-extension twitch-tv youtube
Last synced: about 2 months ago
JSON representation
Browser extension that adds Picture in Picture support to YouTube, Netflix, Amazon Video, Twitch, Plex, and more!
- Host: GitHub
- URL: https://github.com/amarcu5/PiPer
- Owner: amarcu5
- License: gpl-3.0
- Created: 2017-03-02T16:09:10.000Z (over 7 years ago)
- Default Branch: develop-1.0.x
- Last Pushed: 2022-06-01T09:01:41.000Z (over 2 years ago)
- Last Synced: 2024-05-13T12:33:05.327Z (4 months ago)
- Topics: amazon-video, chrome-extension, netflix, picture-in-picture, plex, safari-extension, twitch-tv, youtube
- Language: JavaScript
- Homepage:
- Size: 241 MB
- Stars: 257
- Watchers: 8
- Forks: 33
- Open Issues: 62
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- safari-extensions - PiPer - Adds a picture-in-picture button to many [supported sites](https://github.com/amarcu5/PiPer#supported-sites) (General)
README
PiPer
PiPer is the browser extension to watch video Picture in Picture.
Install ·
Donate ·
Report an issue
***
## Contents
- [Features](#features)
- [Installation](#installation)
* [Safari](#safari)
* [Chrome](#chrome)
- [Supported sites](#supported-sites)
- [Changelog](#changelog)
- [Development](#development)
* [Building](#building)
+ [Prerequisites](#prerequisites)
+ [Build tools](#build-tools)
+ [Steps](#steps)
* [Supporting a new site](#supporting-a-new-site)
- [Acknowledgements](#acknowledgements)
## Features
* Adds a dedicated Picture in Picture button to the video player of [supported sites](#supported-sites)
* Button integrates seamlessly with the player including hover effects and tooltips
* Supports closed captions in Picture and Picture mode (Safari only)
* Supports Safari and Chrome
* Free and open source
## Installation
### Safari
Install from the [Mac App Store](https://itunes.apple.com/app/id1421915518?mt=12&ls=1) by clicking "Get"
(The [Safari Extension Gallery](https://safari-extensions.apple.com/details/?id=com.amarcus.safari.piper-BQ6Q24MF9X) is now [deprecated](https://developer.apple.com/documentation/safariextensions))
### Chrome
Install from the [Chrome Web Store](https://chrome.google.com/webstore/detail/piper/jbjleapidaddpbncgofepljddfeoghkc) by clicking "Add to Chrome"
...or live life on the edge with the latest [development build](https://github.com/amarcu5/PiPer/tree/develop-1.0.x/out) (IMPORTANT: these builds do not update automatically!)
## Supported sites
* [9Now](http://www.9now.com.au)
* [Apple TV+](http://tv.apple.com)
* [Amazon Video](http://www.amazon.com/PrimeVideo)
* [Česká televize](http://www.ceskatelevize.cz)
* [CollegeHumor](http://www.collegehumor.com)
* [Crunchyroll](http://www.crunchyroll.com)
* [CuriosityStream](http://www.curiositystream.com)
* [DAZN](https://www.dazn.com)
* [Disney+](http://www.disneyplus.com)
* [Eurosport player](http://www.eurosportplayer.com)
* [FuboTV](http://www.fubo.tv)
* [Giant Bomb](http://www.giantbomb.com)
* [Hulu](http://www.hulu.com)
* [LittleThings](http://www.littlethings.com)
* [Mashable](http://www.mashable.com)
* [Metacafe](http://www.metacafe.com)
* [Mixer](http://mixer.com)
* [MLB](http://www.mlb.tv)
* [Netflix](http://www.netflix.com)
* [OCS](http://www.ocs.fr)
* [Openload](http://www.openload.co)
* [PBS](http://www.pbs.org)
* [Periscope](http://www.periscope.tv)
* [Plex](http://www.plex.tv)
* [Seznam Zprávy](http://www.seznam.cz/zpravy)
* [Stream.cz](http://www.stream.cz)
* [Streamable](http://streamable.com)
* [TED](http://www.ted.com)
* [The Onion](http://www.theonion.com)
* [Twitch](http://www.twitch.tv)
* [Udemy](http://www.udemy.com)
* [Vevo](http://www.vevo.com)
* [Vice](http://www.vice.com)
* [Vid.me](http://www.vid.me)
* [Video Aktálně](http://video.aktualne.cz)
* [Vier](http://www.vier.be)
* [Vijf](http://www.vijf.be)
* [VK](http://www.vk.com)
* [VRV](http://www.vrv.co)
* [VRT NU](http://www.vrt.be/vrtnu/)
* [Yelo Play](http://www.yeloplay.be)
* [YouTube](http://www.youtube.com)
* [Zes](http://www.zes.be)
## Changelog
You can find information about releases [here](https://github.com/amarcu5/PiPer/releases)
## Development
### Building
#### Prerequisites
* Operating system
* macOS: 10.12 Sierra or newer (required to build Safari extension)
* Windows: Vista or newer using [Cygwin](https://cygwin.com/install.html)
* Linux: 64-bit Ubuntu 14.04+, Debian 8+, openSUSE 13.3+, or Fedora Linux 24+
* Software
* [Node.js](https://nodejs.org)
* [Java](https://www.java.com/en/download/) (Windows only)
#### Build tools
The following build tools are used to build the extension:
* [csso](https://github.com/css/csso) for compressing CSS
* [svgo](https://github.com/svg/svgo) for compressing SVG images
* [xarjs](https://github.com/robertknight/xar-js) for packaging Safari legacy extension
* [google-closure-compiler](https://github.com/google/closure-compiler) for compiling JavaScript
These can be installed by executing the following command:
```Shell
npm install -g csso-cli svgo xar-js google-closure-compiler
```
#### Steps
1. Clone the repository
2. Run `make.sh`
1. By default this builds the unoptimized and unpackaged development version for all targets into the `./out/` directory
2. Alternatively:
* `./make.sh -p release` to build the optimized release versions for all targets
* `./make.sh -p release -t chrome` to build the optimized release version for the Chrome browser
* `./make.sh -h` to see the full list of options
### Supporting a new site
If we wanted to support `example.com` with the source:
```HTML
Example caption
Play
Fullscreen
```
We would start by adding a new file `example.js` in the [resources directory](https://github.com/amarcu5/PiPer/tree/master/src/common/scripts/resources):
```JavaScript
export const domain = 'example';
export const resource = {
buttonParent: function() {
// Returns the element that will contain the button
return document.querySelector('.video-controls');
},
videoElement: function() {
// Returns the video element
return document.querySelector('.video-container video');
},
// Optional
captionElement: function() {
// Returns the element that contains the video captions
return document.querySelector('.video-captions');
},
};
```
We might want to style the button so that it integrates with the page better:
```JavaScript
export const resource = {
...
// Assign a CSS class
buttonClassName: 'control',
// Scale the button
buttonScale: 0.5,
// Apply custom CSS styles
buttonStyle: /** CSS */ (`
/* Declaring CSS this way ensures it gets optimized when the extension is built */
cursor: pointer;
opacity: 0.5;
`),
// Apply a custom CSS hover style
buttonHoverStyle: /** CSS */ (`opacity: 1 !important`),
};
```
For more examples, please see the [source](https://github.com/amarcu5/PiPer/tree/master/src/)
## Acknowledgements
* [Pied PíPer](https://github.com/JoeKuhns/PiedPiPer.safariextension) for the original inspiration