fix(timeline): fix bug of get set properity do not work when typescri…

…pt less than 3.7
LennonReid · Jul 28, 2020 · b4df5f5 · b4df5f5
1 parent e84616f
commit b4df5f5
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 104 deletions.
diff --git a/README.md b/README.md
@@ -41,15 +41,15 @@ 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: [
         AppComponent
     ],
     imports: [
         BrowserModule,
-        TimelineModule
+        NgxVideoTimelineModule
     ],
     providers: [],
     bootstrap: [AppComponent]

diff --git a/projects/timeline/README.md b/projects/timeline/README.md
@@ -13,15 +13,15 @@ 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: [
         AppComponent
     ],
     imports: [
         BrowserModule,
-        TimelineModule
+        NgxVideoTimelineModule
     ],
     providers: [],
     bootstrap: [AppComponent]

diff --git 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
@@ -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<any>();
         this.mouseUp = new EventEmitter<any>();
         this.mouseDown = new EventEmitter<any>();
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2,15 +2,15 @@ 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: [
         AppComponent
     ],
     imports: [
         BrowserModule,
-        TimelineModule
+        NgxVideoTimelineModule
     ],
     providers: [],
     bootstrap: [AppComponent]

diff --git a/tsconfig.json b/tsconfig.json
@@ -25,5 +25,8 @@
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
+  },
+  "compilerOptions": {
+  "skipLibCheck": true
   }
 }