{"id":19194533,"url":"https://github.com/LennonReid/ngx-video-timeline","last_synced_at":"2025-04-20T08:33:26.527Z","repository":{"id":38461467,"uuid":"282827171","full_name":"LennonReid/ngx-video-timeline","owner":"LennonReid","description":"Angular video playback progress bar component","archived":false,"fork":false,"pushed_at":"2024-11-08T11:50:42.000Z","size":30780,"stargazers_count":14,"open_issues_count":5,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-19T05:43:34.333Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ngx-video-timeline.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LennonReid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-07-27T07:37:41.000Z","updated_at":"2025-01-26T23:48:32.000Z","dependencies_parsed_at":"2024-06-21T05:43:17.512Z","dependency_job_id":"c118106a-42e6-428b-bfae-cff31c521008","html_url":"https://github.com/LennonReid/ngx-video-timeline","commit_stats":null,"previous_names":["lenonmax/ngx-video-timeline"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LennonReid%2Fngx-video-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LennonReid%2Fngx-video-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LennonReid%2Fngx-video-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LennonReid%2Fngx-video-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LennonReid","download_url":"https://codeload.github.com/LennonReid/ngx-video-timeline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249869035,"owners_count":21337502,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T12:01:26.819Z","updated_at":"2025-04-20T08:33:26.224Z","avatar_url":"https://github.com/LennonReid.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Media"],"readme":"# NgxVideoTimeline\n## [Demo](https://LennonReid.github.io/ngx-video-timeline/)\n## example\n\n![samplePic](src/assets/timeline.png)\n\n## Installation\n\n#### Compatibility\n\n| Angular | Latest ngx-video-timeline compatible |\n| ------- | ---------------------------- |\n| 17      | 0.10.17                        |\n| 16      | 0.10.16                        |\n| 15      | 0.10.15                        |\n| 14      | 0.10.14                        |\n| 13      | 0.10.13                        |\n| 12      | 0.10.12                        |\n| 11      | 0.10.11                        |\n| 10      | 0.10.10                        |\n| 9      | 0.10.9                        |\n\n## Getting Started\n```\nnpm i ngx-video-timeline@0.10.17\n```\nor\n```\nyarn add ngx-video-timeline@0.10.17\n```\n## NgModules Usage\nImport the module into your module\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n// Import NgxVideoTimelineModule if you are using a version of Angular that is below Angular V16.\nimport { NgxVideoTimelineComponent } from 'ngx-video-timeline';\n\n\n@NgModule({\n    declarations: [\n        AppComponent\n    ],\n    imports: [\n        BrowserModule,\n        // Import NgxVideoTimelineModule if you are using a version of Angular that is below Angular V16.\n        NgxVideoTimelineComponent\n    ],\n    providers: [],\n    bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\nthen use it in html\n```\n\u003cngx-video-timeline \n    class=\"canvas\"\n    [speed]=\"speed\" \n    [playTime]=\"playTime\" \n    [isPlayClick]=\"isPlayClick\" \n    [videoCells]=\"videoCells\" \n    [startTimeThreshold]=\"startTimeThreshold\" \n    [endTimeThreshold]=\"endTimeThreshold\" \n    [canvasHeight]=\"canvasHeight\" \n    (playClick)=\"onPlayClick($event)\"\n\u003e\n\u003c/ngx-video-timeline\u003e\n```\nin ts file\n```\nimport { Component, OnInit } from '@angular/core';\nimport { VideoCellType } from 'ngx-video-timeline';\n\n@Component({\n    selector: 'app-root',\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit {\n    title = 'ngx-video-timeline';\n\n    speed: number;\n    canvasHeight: number;\n    startTimeThreshold: number;\n    endTimeThreshold: number;\n    videoCells: VideoCellType[];\n    playTime: Date;\n    isPlayClick: boolean;\n\n    constructor() {\n        this.speed = 10;\n        this.isPlayClick = false;\n        this.canvasHeight = 80;\n        this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;\n        this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;\n        this.videoCells = [];\n        this.playTime = new Date();\n    }\n\n    onPlay(): void {\n\n        this.isPlayClick = true;\n        this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;\n    }\n\n    onPause(): void {\n\n        this.isPlayClick = false;\n        // this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;\n    }\n\n    onPlayClick(date: number): void {\n        // console.log(new Date(date));\n        // this.canvasHeight = 60;\n    }\n\n\n    selectedTime(date: any): void {\n        this.playTime = date.value;\n    }\n\n    changeVideo(): void {\n        this.videoCells = [\n            {\n                beginTime: new Date().getTime() - 1 * 3600 * 1000,\n                endTime: new Date().getTime() + 1 * 3600 * 1000,\n                style: {\n                    background: '#f3e5e4'\n                }\n            }\n        ];\n    }\n\n    ngOnInit(): void {\n    }\n    onDragStart(): void {\n        \n    }\n}\n```\n\n\n## Standalone components usage\n\n```\nimport { NgIf } from \"@angular/common\";\nimport { Component, OnInit } from \"@angular/core\";\nimport { NgxVideoTimelineComponent, VideoCellType } from \"ngx-video-timeline\";\n\n@Component({\n  imports: [NgIf, NgxVideoTimelineComponent],\n  selector: \"app-home\",\n  template: `\n    \u003cngx-video-timeline\n      [playTime]=\"playTime\"\n      [isPlayClick]=\"isPlayClick\"\n      [videoCells]=\"videoCells\"\n      [startTimeThreshold]=\"startTimeThreshold\"\n      [endTimeThreshold]=\"endTimeThreshold\"\n      [canvasHeight]=\"canvasHeight\"\n      [speed]=\"speed\"\n      (playClick)=\"onPlayClick($event)\"\n    \u003e\u003c/ngx-video-timeline\u003e\n    \u003cdiv\u003e\n      @if (isPlayClick) {\n      \u003cbutton (click)=\"onPause()\"\u003epause\u003c/button\u003e\n      } @else {\n      \u003cbutton (click)=\"onPlay()\"\u003eplay\u003c/button\u003e\n      }\n      \u003cbutton (click)=\"changeVideo()\"\u003echangeVideos\u003c/button\u003e\n    \u003c/div\u003e\n  `,\n  standalone: true,\n})\nexport default class HomePage implements OnInit {\n  title = \"ngx-video-timeline\";\n\n  speed: number;\n  canvasHeight: number;\n  startTimeThreshold: number | string | Date;\n  endTimeThreshold: number | string | Date;\n  videoCells: VideoCellType[];\n  playTime: Date;\n  isPlayClick: boolean;\n\n  constructor() {\n    this.speed = 1;\n    this.isPlayClick = false;\n    this.canvasHeight = 80;\n    this.startTimeThreshold = new Date();\n    this.endTimeThreshold = new Date(new Date().getTime() + 3 * 3600 * 1000);\n    this.videoCells = [];\n    this.playTime = new Date();\n  }\n\n  onPlay(): void {\n    this.isPlayClick = true;\n    this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;\n  }\n\n  onPause(): void {\n    this.isPlayClick = false;\n    // this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;\n  }\n\n  onPlayClick(date: number): void {\n    // console.log(new Date(date));\n    // this.canvasHeight = 60;\n  }\n\n  selectedTime(date: any): void {\n    this.playTime = date.value;\n  }\n\n  changeVideo(): void {\n    this.videoCells = [\n      {\n        beginTime: new Date().getTime() - 1 * 3600 * 1000,\n        endTime: new Date().getTime() + 1 * 3600 * 1000,\n        style: {\n          background: \"#f3e5e4\",\n        },\n      },\n    ];\n  }\n\n  ngOnInit(): void {}\n}\n\n\n```\n## API\n\n|               Name               |      Type      |        Default/Return        |          Description          |\n| :------------------------------: | :------------: | :--------------------------: | :---------------------------: |\n|           [canvasHeight]           |      number       |             50             |            Canvas height (not less than 50)             |\n|            [playTime]             | number,string,Date |        new Date().getTime() - 1 * 24 * 3600 * 1000        |           Playback time (default: the previous day)            |\n|           [speed]            |    number     |            1             |        The video plays at twice the speed         |\n|           [forWardValue]            |    number     |            1             |        Fast forward/fast backward video         |\n|        [startTimeThreshold]         |    number,string,Date     |            new Date().getTime() - 1 * 12  * 3600 * 1000             |     Left time threshold      |\n|          [endTimeThreshold]           |     number,string,Date      |           new Date().getTime() + 1 * 12  * 3600 * 1000            |         Right time threshold          |\n|           [videoCells]           |     VideoCellType[]     |              VideoCellType[]              | Video block (shown in different colors) |\n|           [borderColor]           |     string     |              \"#fff\"              | color of canvas border |\n|           [bgColor]           |     string     |              \"#fff\"              | color of canvas backgraound |\n|           [bottomLineColor]           |     string     |              \"rgba(0,0,0,1)\"              | color of the bottomLine |\n|           [verticalBarColor]           |     string     |              \"rgba(0,0,0,1)\"              | color of the verticalBar |\n|           [playBarColor]           |     string     |              \"#448aff\"              |  color of the playBar |\n|          (playClick)           |      any       | playTime(Current timestamp) |       PlayTime starts playing at speed      |\n|          (mouseUp)           |      any       | returnTime(Current timestamp) |       Returns the current time when the mouse is released       |\n|          (mouseDown)           |      any       | returnTime(Current timestamp) |       Returns the current time when the mouse is pressed       |\n\n## Interfate VideoCellType\n\n|  field  |       name       |    type    | required/optional |       default       |\n| :----: | :--------------: | :--------: | :-------: | :----------------: |\n| beginTime  |     The start time     |   number,string   |   required    |     undefined      |\n| endTime  |    The end of time    |   number,string   |   required    |     undefined      |\n| style | The background color |  boolean   |   optional    |        VideoCellStyleType        |\n## Interfate VideoCellStyleType\n\n|  field  |       name       |    type    | required/optional |       default       |\n| :----: | :--------------: | :--------: | :-------: | :----------------: |\n| background  |     The background color     |   string   |   required    |     undefined      |\n\n#License\nngx-video-timeline is licensed under a [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLennonReid%2Fngx-video-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLennonReid%2Fngx-video-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLennonReid%2Fngx-video-timeline/lists"}