Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LennonReid/ngx-video-timeline
Angular video playback progress bar component
https://github.com/LennonReid/ngx-video-timeline
Last synced: 4 days ago
JSON representation
Angular video playback progress bar component
- Host: GitHub
- URL: https://github.com/LennonReid/ngx-video-timeline
- Owner: LennonReid
- Created: 2020-07-27T07:37:41.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-08T11:50:42.000Z (5 days ago)
- Last Synced: 2024-11-08T12:34:31.925Z (5 days ago)
- Language: TypeScript
- Homepage: https://ngx-video-timeline.vercel.app
- Size: 30.4 MB
- Stars: 11
- Watchers: 3
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-video-timeline - Video playback progress bar component. (Table of contents / Third Party Components)
README
# NgxVideoTimeline
## [Demo](https://LennonReid.github.io/ngx-video-timeline/)
## example
## Installation
#### Compatibility
| Angular | Latest ngx-video-timeline compatible |
| ------- | ---------------------------- |
| 17 | 0.10.17 |
| 16 | 0.10.16 |
| 15 | 0.10.15 |
| 14 | 0.10.14 |
| 13 | 0.10.13 |
| 12 | 0.10.12 |
| 11 | 0.10.11 |
| 10 | 0.10.10 |
| 9 | 0.10.9 |
## Getting Started
```
npm i [email protected]
```
or
```
yarn add [email protected]
```
## NgModules Usage
Import the module into your module
```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import NgxVideoTimelineModule if you are using a version of Angular that is below Angular V16.
import { NgxVideoTimelineComponent } from 'ngx-video-timeline';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Import NgxVideoTimelineModule if you are using a version of Angular that is below Angular V16.
NgxVideoTimelineComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
then use it in html
```
```
in ts file
```
import { Component, OnInit } from '@angular/core';
import { VideoCellType } from 'ngx-video-timeline';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'ngx-video-timeline';
speed: number;
canvasHeight: number;
startTimeThreshold: number;
endTimeThreshold: number;
videoCells: VideoCellType[];
playTime: Date;
isPlayClick: boolean;
constructor() {
this.speed = 10;
this.isPlayClick = false;
this.canvasHeight = 80;
this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;
this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;
this.videoCells = [];
this.playTime = new Date();
}
onPlay(): void {
this.isPlayClick = true;
this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;
}
onPause(): void {
this.isPlayClick = false;
// this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;
}
onPlayClick(date: number): void {
// console.log(new Date(date));
// this.canvasHeight = 60;
}
selectedTime(date: any): void {
this.playTime = date.value;
}
changeVideo(): void {
this.videoCells = [
{
beginTime: new Date().getTime() - 1 * 3600 * 1000,
endTime: new Date().getTime() + 1 * 3600 * 1000,
style: {
background: '#f3e5e4'
}
}
];
}
ngOnInit(): void {
}
onDragStart(): void {
}
}
```
## Standalone components usage
```
import { NgIf } from "@angular/common";
import { Component, OnInit } from "@angular/core";
import { NgxVideoTimelineComponent, VideoCellType } from "ngx-video-timeline";
@Component({
imports: [NgIf, NgxVideoTimelineComponent],
selector: "app-home",
template: `
@if (isPlayClick) {
pause
} @else {
play
}
changeVideos
`,
standalone: true,
})
export default class HomePage implements OnInit {
title = "ngx-video-timeline";
speed: number;
canvasHeight: number;
startTimeThreshold: number | string | Date;
endTimeThreshold: number | string | Date;
videoCells: VideoCellType[];
playTime: Date;
isPlayClick: boolean;
constructor() {
this.speed = 1;
this.isPlayClick = false;
this.canvasHeight = 80;
this.startTimeThreshold = new Date();
this.endTimeThreshold = new Date(new Date().getTime() + 3 * 3600 * 1000);
this.videoCells = [];
this.playTime = new Date();
}
onPlay(): void {
this.isPlayClick = true;
this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;
}
onPause(): void {
this.isPlayClick = false;
// this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;
}
onPlayClick(date: number): void {
// console.log(new Date(date));
// this.canvasHeight = 60;
}
selectedTime(date: any): void {
this.playTime = date.value;
}
changeVideo(): void {
this.videoCells = [
{
beginTime: new Date().getTime() - 1 * 3600 * 1000,
endTime: new Date().getTime() + 1 * 3600 * 1000,
style: {
background: "#f3e5e4",
},
},
];
}
ngOnInit(): void {}
}
```
## API
| Name | Type | Default/Return | Description |
| :------------------------------: | :------------: | :--------------------------: | :---------------------------: |
| [canvasHeight] | number | 50 | Canvas height (not less than 50) |
| [playTime] | number,string,Date | new Date().getTime() - 1 * 24 * 3600 * 1000 | Playback time (default: the previous day) |
| [speed] | number | 1 | The video plays at twice the speed |
| [forWardValue] | number | 1 | Fast forward/fast backward video |
| [startTimeThreshold] | number,string,Date | new Date().getTime() - 1 * 12 * 3600 * 1000 | Left time threshold |
| [endTimeThreshold] | number,string,Date | new Date().getTime() + 1 * 12 * 3600 * 1000 | Right time threshold |
| [videoCells] | VideoCellType[] | VideoCellType[] | Video block (shown in different colors) |
| [borderColor] | string | "#fff" | color of canvas border |
| [bgColor] | string | "#fff" | color of canvas backgraound |
| [bottomLineColor] | string | "rgba(0,0,0,1)" | color of the bottomLine |
| [verticalBarColor] | string | "rgba(0,0,0,1)" | color of the verticalBar |
| [playBarColor] | string | "#448aff" | color of the playBar |
| (playClick) | any | playTime(Current timestamp) | PlayTime starts playing at speed |
| (mouseUp) | any | returnTime(Current timestamp) | Returns the current time when the mouse is released |
| (mouseDown) | any | returnTime(Current timestamp) | Returns the current time when the mouse is pressed |
## Interfate VideoCellType
| field | name | type | required/optional | default |
| :----: | :--------------: | :--------: | :-------: | :----------------: |
| beginTime | The start time | number,string | required | undefined |
| endTime | The end of time | number,string | required | undefined |
| style | The background color | boolean | optional | VideoCellStyleType |
## Interfate VideoCellStyleType
| field | name | type | required/optional | default |
| :----: | :--------------: | :--------: | :-------: | :----------------: |
| background | The background color | string | required | undefined |
#License
ngx-video-timeline is licensed under a [MIT License](https://opensource.org/licenses/MIT).