open-index/open-npm huggingface dataset:
npm package: @straas/videojs-thumbnails
Description: progress bar thumbnails plugin for video.js
Latest version: 0.4.0

Video.js Thumbnails
===================
A plugin that allows you to configure thumbnails to display when the user is hovering over the progress bar or dragging it to seek.

[![Build Status](https://travis-ci.org/brightcove/videojs-thumbnails.svg?branch=master)](https://travis-ci.org/brightcove/videojs-thummbnails)


Using the Plugin
----------------
The plugin automatically registers itself when you include video.thumbnails.js in your page:

```html
<script src='videojs.thumbnails.js'></script>
```

You probably want to include the default stylesheet, too. It handles showing and hiding thumbnails while hovering over the progress bar and a quick animation during the transition:

```html
<link href="videojs.thumbnails.css" rel="stylesheet">
```

After calling "videojs" function to create the video, you can activate the thumbnail plugin by specifying the options which schema lists as follows:

```javascript
videojs.thumbnails({
  preload: true,
  grid: {
    src: "the url of image source",
    tileWidth: 100,
    tileHeight: 100,
    leftToRightAllocation: [{
      src: "this image source will override the parent's src property",
      columnNumber: 3,
      rowNumber: 3,
      interval: 5,
      startPosition: 0,
    }],
    tileSettings: [
      {
        position: 10,
        columnIndex: 0,
        rowIndex: 0
      }
    ]
  }
})
```

The src key of grid object is an URL pointing to an image that composed of small tile images to form a grid; each tile has the same width and height and can be accessed by the index of column and row.

To display the tile image at the correct time, specifying the position value which ranges from 0 to the video duration.

When the position of the cursor on the progress bar is equal to or greater than the position of the specific tile setting, that tile will display on the progress bar.

If the position of each tile has the same interval, and the order of tiles is from left to right, top to bottom, considering use "leftToRightAllocation" instead of specifying each tile option.

Assign the preload property to true will fetch all the image sources when the document is ready to improve the user experience, this is done by injecting link elements with "rel" attribute which assigned to "preload" value.

Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
npm package: @straatdotco/insight-react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 1.1.4

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @strackfeldt/passport-magic
Description: Passwordless authentication with magic links for Passport.js 🔑
Author: Timo Strackfeldt
Latest version: 1.0.8

![passport-magic-login](https://user-images.githubusercontent.com/7525670/104158644-0c61f400-53ee-11eb-960f-167c6ebd3ec9.png)

Passwordless authentication with magic links for Passport.js 🔑

- User signup and login without passwords
- Supports magic links sent via email, SMS or any other method you prefer
- User interface agnostic: all you need is an input and a confirmation screen
- Handles secure token generation, expiration and confirmation

Forked from: https://github.com/mxstbr/passport-magic-login

Originally implemented by [Tobias Lins](https://twitter.com/linstobias) for [Splitbee](https://splitbee.io) and eventually extracted for [Feedback Fish](https://feedback.fish)