{"id":13494002,"url":"https://github.com/amarcu5/PiPer","last_synced_at":"2025-03-28T13:31:52.883Z","repository":{"id":18189288,"uuid":"83697681","full_name":"amarcu5/PiPer","owner":"amarcu5","description":"Browser extension that adds Picture in Picture support to YouTube, Netflix, Amazon Video, Twitch, Plex, and more!","archived":false,"fork":false,"pushed_at":"2022-06-01T09:01:41.000Z","size":252771,"stargazers_count":258,"open_issues_count":62,"forks_count":33,"subscribers_count":8,"default_branch":"develop-1.0.x","last_synced_at":"2024-08-01T19:48:36.858Z","etag":null,"topics":["amazon-video","chrome-extension","netflix","picture-in-picture","plex","safari-extension","twitch-tv","youtube"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amarcu5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-02T16:09:10.000Z","updated_at":"2024-06-13T02:52:00.000Z","dependencies_parsed_at":"2022-08-07T09:00:32.992Z","dependency_job_id":null,"html_url":"https://github.com/amarcu5/PiPer","commit_stats":null,"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amarcu5%2FPiPer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amarcu5%2FPiPer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amarcu5%2FPiPer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amarcu5%2FPiPer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amarcu5","download_url":"https://codeload.github.com/amarcu5/PiPer/tar.gz/refs/heads/develop-1.0.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222382379,"owners_count":16975376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amazon-video","chrome-extension","netflix","picture-in-picture","plex","safari-extension","twitch-tv","youtube"],"created_at":"2024-07-31T19:01:20.816Z","updated_at":"2024-10-31T08:31:36.605Z","avatar_url":"https://github.com/amarcu5.png","language":"JavaScript","funding_links":["https://paypal.me/adampmarcus"],"categories":["JavaScript","General"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/promo/Icon-512.png\" alt=\"PiPer logo\" width=\"200\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  PiPer\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  PiPer is the browser extension to watch video Picture in Picture.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#installation\"\u003eInstall\u003c/a\u003e · \n  \u003ca href=\"https://paypal.me/adampmarcus\"\u003eDonate\u003c/a\u003e · \n  \u003ca href=\"https://github.com/amarcu5/PiPer/issues\"\u003eReport an issue\u003c/a\u003e\n\u003c/p\u003e\n\n***\n\n## Contents\n- [Features](#features)\n- [Installation](#installation)\n  * [Safari](#safari)\n  * [Chrome](#chrome)\n- [Supported sites](#supported-sites)\n- [Changelog](#changelog)\n- [Development](#development)\n  * [Building](#building)\n    + [Prerequisites](#prerequisites)\n    + [Build tools](#build-tools)\n    + [Steps](#steps)\n  * [Supporting a new site](#supporting-a-new-site)\n- [Acknowledgements](#acknowledgements)\n\n## Features\n* Adds a dedicated Picture in Picture button to the video player of [supported sites](#supported-sites)\n* Button integrates seamlessly with the player including hover effects and tooltips\n* Supports closed captions in Picture and Picture mode (Safari only)\n* Supports Safari and Chrome\n* Free and open source\n\n## Installation\n### Safari\nInstall from the [Mac App Store](https://itunes.apple.com/app/id1421915518?mt=12\u0026ls=1) by clicking \"Get\"  \n\u003csub\u003e(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))\u003c/sub\u003e\n### Chrome\nInstall from the [Chrome Web Store](https://chrome.google.com/webstore/detail/piper/jbjleapidaddpbncgofepljddfeoghkc) by clicking \"Add to Chrome\"\n  \n\u003csub\u003e...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!)\u003c/sub\u003e\n\n## Supported sites\n* [9Now](http://www.9now.com.au)\n* [Apple TV+](http://tv.apple.com)\n* [Amazon Video](http://www.amazon.com/PrimeVideo)\n* [Česká televize](http://www.ceskatelevize.cz)\n* [CollegeHumor](http://www.collegehumor.com)\n* [Crunchyroll](http://www.crunchyroll.com)\n* [CuriosityStream](http://www.curiositystream.com)\n* [DAZN](https://www.dazn.com)\n* [Disney+](http://www.disneyplus.com)\n* [Eurosport player](http://www.eurosportplayer.com)\n* [FuboTV](http://www.fubo.tv)\n* [Giant Bomb](http://www.giantbomb.com)\n* [Hulu](http://www.hulu.com)\n* [LittleThings](http://www.littlethings.com)\n* [Mashable](http://www.mashable.com)\n* [Metacafe](http://www.metacafe.com)\n* [Mixer](http://mixer.com)\n* [MLB](http://www.mlb.tv)\n* [Netflix](http://www.netflix.com)\n* [OCS](http://www.ocs.fr)\n* [Openload](http://www.openload.co)\n* [PBS](http://www.pbs.org)\n* [Periscope](http://www.periscope.tv)\n* [Plex](http://www.plex.tv)\n* [Seznam Zprávy](http://www.seznam.cz/zpravy)\n* [Stream.cz](http://www.stream.cz)\n* [Streamable](http://streamable.com)\n* [TED](http://www.ted.com)\n* [The Onion](http://www.theonion.com)\n* [Twitch](http://www.twitch.tv)\n* [Udemy](http://www.udemy.com)\n* [Vevo](http://www.vevo.com)\n* [Vice](http://www.vice.com)\n* [Vid.me](http://www.vid.me)\n* [Video Aktálně](http://video.aktualne.cz)\n* [Vier](http://www.vier.be)\n* [Vijf](http://www.vijf.be)\n* [VK](http://www.vk.com)\n* [VRV](http://www.vrv.co)\n* [VRT NU](http://www.vrt.be/vrtnu/)\n* [Yelo Play](http://www.yeloplay.be)\n* [YouTube](http://www.youtube.com)\n* [Zes](http://www.zes.be)\n\n## Changelog\nYou can find information about releases [here](https://github.com/amarcu5/PiPer/releases)\n\n## Development\n\n### Building\n\n#### Prerequisites\n* Operating system\n  * macOS: 10.12 Sierra or newer (required to build Safari extension)\n  * Windows: Vista or newer using [Cygwin](https://cygwin.com/install.html)\n  * Linux: 64-bit Ubuntu 14.04+, Debian 8+, openSUSE 13.3+, or Fedora Linux 24+\n* Software\n  * [Node.js](https://nodejs.org)\n  * [Java](https://www.java.com/en/download/) (Windows only)\n\n\n#### Build tools\nThe following build tools are used to build the extension:\n* [csso](https://github.com/css/csso) for compressing CSS\n* [svgo](https://github.com/svg/svgo) for compressing SVG images\n* [xarjs](https://github.com/robertknight/xar-js) for packaging Safari legacy extension\n* [google-closure-compiler](https://github.com/google/closure-compiler) for compiling JavaScript\n\nThese can be installed by executing the following command:\n```Shell\nnpm install -g csso-cli svgo xar-js google-closure-compiler\n```\n\n#### Steps\n1. Clone the repository\n2. Run `make.sh` \n    1. By default this builds the unoptimized and unpackaged development version for all targets into the `./out/` directory\n    2. Alternatively:\n       * `./make.sh -p release` to build the optimized release versions for all targets\n       * `./make.sh -p release -t chrome` to build the optimized release version for the Chrome browser\n       * `./make.sh -h` to see the full list of options\n\n### Supporting a new site\nIf we wanted to support `example.com` with the source:\n```HTML\n\u003cdiv class=\"video-container\"\u003e\n  \u003cvideo src=\"blob:http://example.com/342b3a13-c892-54ec-84f6-281579de03ab\"\u003e\u003c/video\u003e\n  \u003cdiv class=\"video-captions\"\u003e\n    Example caption\n  \u003c/div\u003e\n  \u003cdiv class=\"video-controls\"\u003e\n    \u003cbutton class=\"control button-play\"\u003ePlay\u003c/button\u003e\n    \u003cbutton class=\"control button-fullscreen\"\u003eFullscreen\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nWe would start by adding a new file `example.js`  in the [resources directory](https://github.com/amarcu5/PiPer/tree/master/src/common/scripts/resources):\n```JavaScript\nexport const domain = 'example';\n\nexport const resource = {\n  buttonParent: function() {\n    // Returns the element that will contain the button\n    return document.querySelector('.video-controls');\n  },\n  videoElement: function() {\n    // Returns the video element\n    return document.querySelector('.video-container video');\n  },\n  \n  // Optional\n  captionElement: function() {\n    // Returns the element that contains the video captions\n    return document.querySelector('.video-captions');\n  },\n};\n```\nWe might want to style the button so that it integrates with the page better:\n```JavaScript\nexport const resource = {\n  ...\n  // Assign a CSS class\n  buttonClassName: 'control',\n  // Scale the button\n  buttonScale: 0.5,\n  // Apply custom CSS styles\n  buttonStyle: /** CSS */ (`\n    /* Declaring CSS this way ensures it gets optimized when the extension is built */\n    cursor: pointer;\n    opacity: 0.5;\n  `),\n  // Apply a custom CSS hover style\n  buttonHoverStyle: /** CSS */ (`opacity: 1 !important`),\n};\n```\nFor more examples, please see the [source](https://github.com/amarcu5/PiPer/tree/master/src/)\n\n## Acknowledgements\n* [Pied PíPer](https://github.com/JoeKuhns/PiedPiPer.safariextension) for the original inspiration\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famarcu5%2FPiPer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famarcu5%2FPiPer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famarcu5%2FPiPer/lists"}