Awesome

NgxVideoTimeline

Demo

example

Installation

Compatibility

Getting Started

npm i ngx-video-timeline@0.10.17

or

yarn add ngx-video-timeline@0.10.17

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

<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 '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: `
    <ngx-video-timeline
      [playTime]="playTime"
      [isPlayClick]="isPlayClick"
      [videoCells]="videoCells"
      [startTimeThreshold]="startTimeThreshold"
      [endTimeThreshold]="endTimeThreshold"
      [canvasHeight]="canvasHeight"
      [speed]="speed"
      (playClick)="onPlayClick($event)"
    ></ngx-video-timeline>
    <div>
      @if (isPlayClick) {
      <button (click)="onPause()">pause</button>
      } @else {
      <button (click)="onPlay()">play</button>
      }
      <button (click)="changeVideo()">changeVideos</button>
    </div>
  `,
  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

Interfate VideoCellType

Interfate VideoCellStyleType

#License ngx-video-timeline is licensed under a MIT License.