# ngx-thumbnail-video

> A simple solution implemented in Angular to display a thumbnail preiview image on video's progress bar hovered. The component can load thumbnail image from either frontend or backend.

Latest version **0.1.0** (published 2022-06-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-thumbnail-video
pnpm add ngx-thumbnail-video
yarn add ngx-thumbnail-video
bun add ngx-thumbnail-video
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-06-25 |
| First published | 2021-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 203.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Neo Liu |
| Maintainers | neoliu |
| Keywords | angular, javascript, thumbnail, preview, video |

## Links

- npm: https://www.npmjs.com/package/ngx-thumbnail-video
- Repository: https://github.com/theideasaler/angular-thumb-video
- Homepage: https://github.com/theideasaler/angular-thumb-video#readme
- Issues: https://github.com/theideasaler/angular-thumb-video/issues
- npm.io page: https://npm.io/package/ngx-thumbnail-video

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.1.0
- [moment](https://npm.io/package/moment.md) ^2.29.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-06-25
- 0.0.9 — 2021-07-23
- 0.0.8 — 2021-07-22
- 0.0.7 — 2021-07-22
- 0.0.6 — 2021-07-22
- 0.0.5 — 2021-07-22
- 0.0.4 — 2021-07-22
- 0.0.3 — 2021-07-22
- 0.0.2 — 2021-07-22
- 0.0.1 — 2021-07-22
- 0.0.0 — 2021-07-22

## README

# Angular Video Thumbnail Player

A simple solution implemented in Angular to display a thumbnail preiview image on video's progress bar hovered. The component can load thumbnail image from either frontend or backend.
<img src="https://github.com/theideasaler/files/blob/main/ngx-thumbnail-video.gif" />

## Installation

Install the npm package.
```
  npm i ngx-thumbnail-video
```
Import module:
```ts
  import { NgxThumbnailVideoModule } from 'ngx-thumbnail-video';

  @NgModule({
      imports: [NgxThumbnailVideoModule]
  })
```

## Usage 1 - Front End
Pass your video url and options into the component. e.g.

in component.ts
```ts
import { Component } from '@angular/core';
import { VideoPlayerConfig } from 'ngx-thumbnail-video';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  options: VideoPlayerConfig = {
    width: '960px',
    height: '540px'
  };
}
```

HTML:
```html
<ngx-thumbnail-video url="assets/video.mp4" [options]="options"></ngx-thumbnail-video>
```


## Usage 2 - Back End
You can choose to load the thumbnail image from a backend to improve the performance of the component. In this case, you will need to add a few configurations.

Step 1. Set the 'frontendPreload' to false in options.
```ts
  options: VideoPlayerConfig = {
    width: '960px',
    height: '540px',
    frontendPreload: false
  };
```

Step 2 Listen to the progressBarHover event from the component to know the currenlty hovered time(in seconds).
```html
<ngx-thumbnail-video url="assets/video.mp4" [options]="options" (progressBarHover)="eventListener($event)" [thumb]="thumb"></ngx-thumbnail-video>
```

Step 3. Pass in a stringified object with sec and url properties, `sec` should be the same as the property emited from progressBarHover, and `url` can be loaded from backend server.
```ts
thumb = JSON.stringify({sec, url});
```


## Options

| name | type | default | description |
|------|------|---------|-------------|
| width | string | '960px' | Video width. |
| height | string | '540px' | Video height. |
| autoplay | boolean| false | Autoplay video on load. |
| frontendPreload | boolean| true | Generate thumbnail image at front end. |
| mute | boolean | true | Mute video at beginning. |
| borderRadius | string | '0' | Video border radius. |
| interval | number | 1 | Interval to load a thumbnail image, must be an integer, unit is second. | 
| thumbnailRatio | number | 5 | Thumbnail image shrink ratio compared to video. |


## Contribute to this package
Are you interested in contributing to this package? Feel free to adding a new functionality and create a merge request. 

## Roadmap

`fullScreen` - add full-screen control to the control bar just like YouTube Video did.

---
_Source: https://npm.io/package/ngx-thumbnail-video · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._