# NgxVideoTimeline
## [Demo](https://LennonReid.github.io/ngx-video-timeline/)
## example

![samplePic](src/assets/timeline.png)

## 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 ngx-video-timeline --save
```
or
```
yarn add ngx-video-timeline
```
## 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 } from 'projects/timeline/src/lib/timeline.module';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NgxVideoTimelineModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

```
then use it in html
```
<ngx-video-timeline 
    class="canvas"
    [speed]="speed" 
    [playTime]="playTime" 
    [isPlayClick]="isPlayClick" 
    [videoCells]="videoCells" 
    [startTimeThreshold]="startTimeThreshold" 
    [endTimeThreshold]="endTimeThreshold" 
    [canvasHeight]="canvasHeight" 
    (playClick)="onPlayClick($event)"
>
</ngx-video-timeline>
```
in ts file
```
import { Component, OnInit } from '@angular/core';
import { VideoCellType } from 'projects/timeline/src/lib/timeline.component';

@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 {
        
    }
}
```
## 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).