diff --git a/README.md b/README.md index 2b09e85..57a46ed 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; -import { TimelineModule } from 'projects/timeline/src/lib/timeline.module'; +import { NgxVideoTimelineModule } from 'projects/timeline/src/lib/timeline.module'; @NgModule({ declarations: [ @@ -49,7 +49,7 @@ import { TimelineModule } from 'projects/timeline/src/lib/timeline.module'; ], imports: [ BrowserModule, - TimelineModule + NgxVideoTimelineModule ], providers: [], bootstrap: [AppComponent] diff --git a/projects/timeline/README.md b/projects/timeline/README.md index 960c455..851f973 100644 --- a/projects/timeline/README.md +++ b/projects/timeline/README.md @@ -13,7 +13,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; -import { TimelineModule } from 'projects/timeline/src/lib/timeline.module'; +import { NgxVideoTimelineModule } from 'projects/timeline/src/lib/timeline.module'; @NgModule({ declarations: [ @@ -21,7 +21,7 @@ import { TimelineModule } from 'projects/timeline/src/lib/timeline.module'; ], imports: [ BrowserModule, - TimelineModule + NgxVideoTimelineModule ], providers: [], bootstrap: [AppComponent] diff --git a/projects/timeline/package.json b/projects/timeline/package.json index 05c2a7c..1edcb50 100644 --- a/projects/timeline/package.json +++ b/projects/timeline/package.json @@ -1,6 +1,6 @@ { "name": "ngx-video-timeline", - "version": "0.0.7", + "version": "0.1.0", "peerDependencies": { "@angular/common": "^9.1.12", "@angular/core": "^9.1.12" diff --git a/projects/timeline/src/lib/timeline.component.ts b/projects/timeline/src/lib/timeline.component.ts index bd8c7c4..f47d465 100644 --- a/projects/timeline/src/lib/timeline.component.ts +++ b/projects/timeline/src/lib/timeline.component.ts @@ -48,97 +48,30 @@ export interface VideoCellType { templateUrl: './timeline.component.html', styleUrls: ['./timeline.component.scss'] }) -export class TimelineComponent implements OnInit, OnChanges { +export class NgxVideoTimelineComponent implements OnInit, OnChanges { - // Canvas scale is adjusted according to outer height - private _scale = 20; - get scale(): number { - return (this.canvasHeight / 4.55); - } // The height of the outer canvas - private _canvasHeight = 50; - get canvasHeight(): number { - return this._canvasHeight; - } + @Input() canvasHeight = 50; - @Input() - set canvasHeight(value: number) { - this._canvasHeight = value; - } + // Canvas scale is adjusted according to outer height + scale = this.canvasHeight / 4.55; // Video playback time - private _playTime = new Date().getTime(); - get playTime(): number | string | Date { - return this._playTime; - } - - @Input() - set playTime(value: number | string | Date) { - if (value instanceof String) { - this._playTime = new Date(value).getTime(); - } else if (value instanceof Date) { - this._playTime = value.getTime(); - } else if (typeof value === 'number') { - this._playTime = Number(value); - } - } + @Input() playTime: number | string | Date; // The video plays at twice the speed - private _speed = 1; - get speed(): number { - return 1 / this._speed * 1000; - } - - @Input() - set speed(value: number) { - this._speed = value; - } + @Input() speed: number; // Video fast forward value - private _forWardValue = 5; - get forWardValue(): number { - return this._forWardValue * 1000; - } - - @Input() - set forWardValue(value: number) { - this._forWardValue = value; - } + @Input() forWardValue: number; // Start time limit: Timestamp - private _startTimeThreshold = new Date().getTime() - 1 * 12 * 3600 * 1000; - get startTimeThreshold(): number | string | Date { - return this._startTimeThreshold; - } - - @Input() - set startTimeThreshold(value: number | string | Date) { - if (value instanceof String) { - this._startTimeThreshold = new Date(value).getTime(); - } else if (value instanceof Date) { - this._startTimeThreshold = value.getTime(); - } else if (typeof value === 'number') { - this._startTimeThreshold = Number(value); - } - } + @Input() startTimeThreshold: number | string | Date; // End time limit: Timestamp - private _endTimeThreshold = new Date().getTime() + 1 * 12 * 3600 * 1000; - get endTimeThreshold(): number | string | Date { - return this._endTimeThreshold; - } + @Input() endTimeThreshold: number | string | Date; - @Input() - set endTimeThreshold(value: number | string | Date) { - if (value instanceof String) { - this._endTimeThreshold = new Date(value).getTime(); - } else if (value instanceof Date) { - this._endTimeThreshold = value.getTime(); - } else if (typeof value === 'number') { - this._endTimeThreshold = Number(value); - } - } // relation to Css Start // color of canvas border @@ -262,6 +195,11 @@ export class TimelineComponent implements OnInit, OnChanges { constructor() { // this.startTimeThreshold = new Date().getTime() - 1 * 0.5 * 3600 * 1000; // this.endTimeThreshold = new Date().getTime() + 1 * 1 * 3600 * 1000; + this.forWardValue = 5000; + this.speed = 1000; + this.playTime = new Date().getTime(); + this.startTimeThreshold = new Date().getTime() - 1 * 12 * 3600 * 1000; + this.endTimeThreshold = new Date().getTime() + 1 * 12 * 3600 * 1000; this.playClick = new EventEmitter(); this.mouseUp = new EventEmitter(); this.mouseDown = new EventEmitter(); @@ -486,7 +424,14 @@ export class TimelineComponent implements OnInit, OnChanges { // this.drawPalyBar(); } if (changes.startTimeThreshold) { - this.startTimeThreshold = changes.startTimeThreshold.currentValue; + const value = changes.startTimeThreshold.currentValue; + if (changes.startTimeThreshold.currentValue instanceof String) { + this.startTimeThreshold = new Date(value).getTime(); + } else if (value instanceof Date) { + this.startTimeThreshold = value.getTime(); + } else if (typeof value === 'number') { + this.startTimeThreshold = Number(value); + } this.hoursPerRuler = Math.ceil((Number(this.endTimeThreshold) - Number(this.startTimeThreshold)) / 1000 / 3600) < 24 ? Math.ceil((Number(this.endTimeThreshold) - Number(this.startTimeThreshold)) / 1000 / 3600) @@ -496,14 +441,29 @@ export class TimelineComponent implements OnInit, OnChanges { // this.init(this.startTimestamp, this.timecell, false); } if (changes.endTimeThreshold) { - this.endTimeThreshold = changes.endTimeThreshold.currentValue; + const value = changes.endTimeThreshold.currentValue; + if (changes.endTimeThreshold.currentValue instanceof String) { + this.endTimeThreshold = new Date(value).getTime(); + } else if (value instanceof Date) { + this.endTimeThreshold = value.getTime(); + } else if (typeof value === 'number') { + this.endTimeThreshold = Number(value); + } this.hoursPerRuler = Math.ceil((Number(this.endTimeThreshold) - Number(this.startTimeThreshold)) / 1000 / 3600) < 24 ? Math.ceil((Number(this.endTimeThreshold) - Number(this.startTimeThreshold)) / 1000 / 3600) : 24; } if (changes.playTime) { - this.playTime = changes.playTime.currentValue; + + const value = changes.playTime.currentValue; + if (changes.playTime.currentValue instanceof String) { + this.playTime = new Date(value).getTime(); + } else if (value instanceof Date) { + this.playTime = value.getTime(); + } else if (typeof value === 'number') { + this.playTime = Number(value); + } // use SetTimeOut Timer to make it asynchronous setTimeout(() => { @@ -513,12 +473,13 @@ export class TimelineComponent implements OnInit, OnChanges { } if (changes.speed) { - this.speed = changes.speed.currentValue; + this.speed = Number(changes.speed.currentValue) * 1000; } if (changes.forWardValue) { - this.forWardValue = changes.forWardValue.currentValue; + this.forWardValue = Number(changes.forWardValue.currentValue) * 1000; } + if (changes.isPlayClick) { if (changes.isPlayClick.currentValue) { this.onPlayClick(); diff --git a/projects/timeline/src/lib/timeline.module.ts b/projects/timeline/src/lib/timeline.module.ts index 13f440c..e244c32 100644 --- a/projects/timeline/src/lib/timeline.module.ts +++ b/projects/timeline/src/lib/timeline.module.ts @@ -1,14 +1,14 @@ import { NgModule } from '@angular/core'; -import { TimelineComponent } from './timeline.component'; +import { NgxVideoTimelineComponent } from './timeline.component'; import {CommonModule} from '@angular/common'; @NgModule({ - declarations: [TimelineComponent], - imports: [ - CommonModule - ], - exports: [TimelineComponent] + declarations: [NgxVideoTimelineComponent], + imports: [ + CommonModule + ], + exports: [NgxVideoTimelineComponent] }) -export class TimelineModule { } +export class NgxVideoTimelineModule { } diff --git a/projects/timeline/src/lib/timeline.service.spec.ts b/projects/timeline/src/lib/timeline.service.spec.ts index 0614e1e..8bf7f79 100644 --- a/projects/timeline/src/lib/timeline.service.spec.ts +++ b/projects/timeline/src/lib/timeline.service.spec.ts @@ -1,13 +1,13 @@ import { TestBed } from '@angular/core/testing'; -import { TimelineService } from './timeline.service'; +import { NgxVideoTimelineService } from './timeline.service'; describe('TimelineService', () => { - let service: TimelineService; + let service: NgxVideoTimelineService; beforeEach(() => { TestBed.configureTestingModule({}); - service = TestBed.inject(TimelineService); + service = TestBed.inject(NgxVideoTimelineService); }); it('should be created', () => { diff --git a/projects/timeline/src/lib/timeline.service.ts b/projects/timeline/src/lib/timeline.service.ts index 13af414..f780794 100644 --- a/projects/timeline/src/lib/timeline.service.ts +++ b/projects/timeline/src/lib/timeline.service.ts @@ -3,7 +3,7 @@ import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) -export class TimelineService { +export class NgxVideoTimelineService { constructor() { } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1148103..f3d7ed4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -11,18 +11,18 @@ export class AppComponent implements OnInit { speed: number; canvasHeight: number; - startTimeThreshold: number; - endTimeThreshold: number; + startTimeThreshold: number | string | Date; + endTimeThreshold: number | string | Date; videoCells: VideoCellType[]; playTime: Date; isPlayClick: boolean; constructor() { - this.speed = 10; + this.speed = 1; this.isPlayClick = false; this.canvasHeight = 80; - this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000; - this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000; + this.startTimeThreshold = new Date('2020-07-27 00:00:00'); + this.endTimeThreshold = new Date('2020-07-29 00:00:00'); this.videoCells = []; this.playTime = new Date(); } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bfcb593..58bcddb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; -import { TimelineModule } from 'projects/timeline/src/lib/timeline.module'; +import { NgxVideoTimelineModule } from 'projects/timeline/src/lib/timeline.module'; @NgModule({ declarations: [ @@ -10,7 +10,7 @@ import { TimelineModule } from 'projects/timeline/src/lib/timeline.module'; ], imports: [ BrowserModule, - TimelineModule + NgxVideoTimelineModule ], providers: [], bootstrap: [AppComponent] diff --git a/tsconfig.json b/tsconfig.json index 56118a8..bbcf6b8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,5 +25,8 @@ "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true + }, + "compilerOptions": { + "skipLibCheck": true } }