PiPer

PiPer is the browser extension to watch video Picture in Picture.

Install · Donate · Report an issue

---

Contents

• Features
• Installation
• Supported sites
• Changelog
• Development
  • Building
    • Prerequisites
    • Build tools
    • Steps
  • Supporting a new site
• Acknowledgements

Features

• Adds a dedicated Picture in Picture button to the video player of supported sites
• Button integrates seamlessly with the player including hover effects and tooltips
• Supports closed captions in Picture and Picture mode
• Free and open source

Installation

Get the latest release from the Safari Extension Gallery

_{...or live life on the edge with the latest development build (IMPORTANT: these builds do not update automatically!)}

Supported sites

• Amazon Video
• CollegeHumor
• CuriosityStream
• Eurosport player
• Giant Bomb
• Hulu
• LittleThings
• Mashable
• Metacafe
• Mixer
• MLB
• Netflix
• OCS
• Openload
• Periscope
• Plex
• Seznam Zprávy
• Stream.cz
• Streamable
• TED
• The Onion
• Twitch
• Udemy
• Vevo
• Vice
• Vid.me
• Video Aktálně
• Vier
• Vijf
• VRV
• VRT NU
• Yelo Play
• YouTube
• Zes

Changelog

You can find information about releases here

Development

Building

Prerequisites

• Mac running macOS 10.12 Sierra or later
• Node.js

Build tools

The following build tools are used to build the extension:

• csso for compressing CSS
• svgo for compressing SVG images
• xarjs for packaging Safari legacy extension
• google-closure-compiler-js for compiling JavaScript

These can be installed by executing the following command:

npm install -g csso-cli
npm install -g svgo
npm install -g xar-js
npm install -g google-closure-compiler-js

Steps

1. Clone the repository
2. Run make.sh
   1. By default this builds the unoptimized and unpackaged development version into the ./out/ directory that can then be installed using Safari's Extension Builder
   2. Alternatively run ./make.sh -p release to build the optimized and packaged release version (note that packaging requires a private key)

Supporting a new site

If we wanted to support example.com with the source:

<div class="video-container">
  <video src="blob:http://example.com/342b3a13-c892-54ec-84f6-281579de03ab"></video>
  <div class="video-captions">
    Example caption
  </div>
  <div class="video-controls">
    <button class="control button-play">Play</button>
    <button class="control button-fullscreen">Fullscreen</button>
  </div>
</div>

We would start by adding a new file example.js in the resources directory:

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:

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

Acknowledgements

• Pied PíPer for the original inspiration and the Netflix icon