open-index/open-npm huggingface dataset:
npm package: @guzzj/clappr-pip-plugin
Description: A plugin for clappr which adds support for picture-in-picture on devices which support it.
Author: Thomas Jenkinson
Latest version: 2.0.4

[![npm version](https://badge.fury.io/js/clappr-pip-plugin.svg)](https://badge.fury.io/js/clappr-pip-plugin)
# Clappr Picture-In-Picture Plugin
A plugin for clappr which adds support for picture-in-picture on devices which support it, currently iOS on some models.

![Screenshot](screenshot.png)

# Usage
Add both Clappr and the pip plugin scripts to your HTML:

```html
<head>
  <script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr-pip-plugin@latest/dist/clappr-pip-plugin.js"></script>
</head>
```

You can also find the project on npm: https://www.npmjs.com/package/clappr-pip-plugin

Then just add `ClapprPIPPlugin` into the list of plugins of your player instance.

```javascript
var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  plugins: [ClapprPIPPlugin]
});
```
That's it, a button will be shown on the media control to enable picture in picture on devices which support it.

# Demo
To run the demo start a web server with the root directory being the root of this repo, and then browse to the "index.html" file in the "demo" folder.

I am also hosting a demo at http://tjenkinson.me/clappr-pip-plugin/

# Development
Install dependencies:

`npm install`

Build:

`npm run build`

Minified version:

`npm run release`
npm package: @guzzj/clappr-thumbnails-plugin
Description: A plugin for clappr which will display thumbnails when hovering over the scrub bar.
Latest version: 3.7.4

[![npm version](https://badge.fury.io/js/clappr-thumbnails-plugin.svg)](https://badge.fury.io/js/clappr-thumbnails-plugin)
# Clappr Thumbnails Plugin
A plugin for clappr which will display thumbnails when hovering over the scrub bar. Thumbnails can either be individual images or a sprite sheet. You can find a tool which will generate a sprite sheet from a video [here](https://github.com/flavioribeiro/video-thumbnail-generator).

![Screenshot](screenshot.jpg)

# Usage
Add both Clappr and the thumbnails plugin scripts to your HTML:

```html
<head>
  <script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr-thumbnails-plugin@3"></script>
</head>
```

You can also find the project on npm: https://www.npmjs.com/package/clappr-thumbnails-plugin

Then just add `ClapprThumbnailsPlugin` into the list of plugins of your player instance, and the options for the plugin go in the `scrubThumbnails` property as shown below.

```javascript
var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  plugins: {
    core: [ClapprThumbnailsPlugin]
  },
  scrubThumbnails: {
    backdropHeight: 64,
    spotlightHeight: 84,
    thumbs: [
    	{time: 0, url: "assets/thumbs/thumb_1.jpg"},
    	{time: 2, url: "assets/thumbs/thumb_2.jpg"},
    	{time: 4, url: "assets/thumbs/thumb_3.jpg"}
    ]
  }
});
```

`backdropHeight` and `spotlightHeight` are the heights that the thumbnails will be scaled to for the backdrop and spotlight respectively. Either of these can be `0` or `null` to disable them. The `thumbs` property is an array of all the thumbnails. The `time` property is the time in seconds that maps to the thumbnail image located at `url`.

If you are using a sprite sheet you can use the helper method `ClapprThumbnailsPlugin.buildSpriteConfig(spriteSheetUrl, numThumbs, thumbWidth, thumbHeight, numColumns, timeInterval)` which will generate the object for the `thumbs` property for you.

# Adding and Removing Thumbnails Dynamically
You can add/remove thumbnails at any time using the `addThumbnail()` and `removeThumbnail()` methods as shown below. Both these methods will also take an array.

```javascript
var thumbnailsPlugin = player.getPlugin("scrub-thumbnails");
var newThumb = {
  url: "http://tjenkinson.me/clappr-thumbnails-plugin/assets/thumbnails/thumb_10.jpg",
  time: 12.5
};

thumbnailsPlugin.addThumbnail(newThumb).then(function() {
  console.log("Thumbnail added.");
}).then(function() {
  thumbnailsPlugin.removeThumbnail(newThumb).then(function(success) {
    console.log("Thumbnail removed.");
  });
});
```

# Demo
To run the demo start a web server with the root directory being the root of this repo, and then browse to the "index.html" file in the "demo" folder.

Or load the version on github pages: https://tjenkinson.github.io/clappr-thumbnails-plugin/demo/

# Development
Install dependencies:

`npm install`

Build:

`npm run build`

Minified version:

`npm run release`