Skip to content

Commit b4df5f5

Browse files
LennonReidLennonReid
committed
fix(timeline): fix bug of get set properity do not work when typescript less than 3.7
1 parent e84616f commit b4df5f5

10 files changed

+68
-104
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,15 @@ import { BrowserModule } from '@angular/platform-browser';
4141
import { NgModule } from '@angular/core';
4242
4343
import { AppComponent } from './app.component';
44-
import { TimelineModule } from 'projects/timeline/src/lib/timeline.module';
44+
import { NgxVideoTimelineModule } from 'projects/timeline/src/lib/timeline.module';
4545
4646
@NgModule({
4747
declarations: [
4848
AppComponent
4949
],
5050
imports: [
5151
BrowserModule,
52-
TimelineModule
52+
NgxVideoTimelineModule
5353
],
5454
providers: [],
5555
bootstrap: [AppComponent]

‎projects/timeline/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ import { BrowserModule } from '@angular/platform-browser';
1313
import { NgModule } from '@angular/core';
1414
1515
import { AppComponent } from './app.component';
16-
import { TimelineModule } from 'projects/timeline/src/lib/timeline.module';
16+
import { NgxVideoTimelineModule } from 'projects/timeline/src/lib/timeline.module';
1717
1818
@NgModule({
1919
declarations: [
2020
AppComponent
2121
],
2222
imports: [
2323
BrowserModule,
24-
TimelineModule
24+
NgxVideoTimelineModule
2525
],
2626
providers: [],
2727
bootstrap: [AppComponent]

‎projects/timeline/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-video-timeline",
3-
"version": "0.0.7",
3+
"version": "0.1.0",
44
"peerDependencies": {
55
"@angular/common": "^9.1.12",
66
"@angular/core": "^9.1.12"

‎projects/timeline/src/lib/timeline.component.ts

+42-81
Original file line numberDiff line numberDiff line change
@@ -48,97 +48,30 @@ export interface VideoCellType {
4848
templateUrl: './timeline.component.html',
4949
styleUrls: ['./timeline.component.scss']
5050
})
51-
export class TimelineComponent implements OnInit, OnChanges {
51+
export class NgxVideoTimelineComponent implements OnInit, OnChanges {
5252

53-
// Canvas scale is adjusted according to outer height
54-
private _scale = 20;
55-
get scale(): number {
56-
return (this.canvasHeight / 4.55);
57-
}
5853

5954
// The height of the outer canvas
60-
private _canvasHeight = 50;
61-
get canvasHeight(): number {
62-
return this._canvasHeight;
63-
}
55+
@Input() canvasHeight = 50;
6456

65-
@Input()
66-
set canvasHeight(value: number) {
67-
this._canvasHeight = value;
68-
}
57+
// Canvas scale is adjusted according to outer height
58+
scale = this.canvasHeight / 4.55;
6959

7060
// Video playback time
71-
private _playTime = new Date().getTime();
72-
get playTime(): number | string | Date {
73-
return this._playTime;
74-
}
75-
76-
@Input()
77-
set playTime(value: number | string | Date) {
78-
if (value instanceof String) {
79-
this._playTime = new Date(value).getTime();
80-
} else if (value instanceof Date) {
81-
this._playTime = value.getTime();
82-
} else if (typeof value === 'number') {
83-
this._playTime = Number(value);
84-
}
85-
}
61+
@Input() playTime: number | string | Date;
8662

8763
// The video plays at twice the speed
88-
private _speed = 1;
89-
get speed(): number {
90-
return 1 / this._speed * 1000;
91-
}
92-
93-
@Input()
94-
set speed(value: number) {
95-
this._speed = value;
96-
}
64+
@Input() speed: number;
9765

9866
// Video fast forward value
99-
private _forWardValue = 5;
100-
get forWardValue(): number {
101-
return this._forWardValue * 1000;
102-
}
103-
104-
@Input()
105-
set forWardValue(value: number) {
106-
this._forWardValue = value;
107-
}
67+
@Input() forWardValue: number;
10868

10969
// Start time limit: Timestamp
110-
private _startTimeThreshold = new Date().getTime() - 1 * 12 * 3600 * 1000;
111-
get startTimeThreshold(): number | string | Date {
112-
return this._startTimeThreshold;
113-
}
114-
115-
@Input()
116-
set startTimeThreshold(value: number | string | Date) {
117-
if (value instanceof String) {
118-
this._startTimeThreshold = new Date(value).getTime();
119-
} else if (value instanceof Date) {
120-
this._startTimeThreshold = value.getTime();
121-
} else if (typeof value === 'number') {
122-
this._startTimeThreshold = Number(value);
123-
}
124-
}
70+
@Input() startTimeThreshold: number | string | Date;
12571

12672
// End time limit: Timestamp
127-
private _endTimeThreshold = new Date().getTime() + 1 * 12 * 3600 * 1000;
128-
get endTimeThreshold(): number | string | Date {
129-
return this._endTimeThreshold;
130-
}
73+
@Input() endTimeThreshold: number | string | Date;
13174

132-
@Input()
133-
set endTimeThreshold(value: number | string | Date) {
134-
if (value instanceof String) {
135-
this._endTimeThreshold = new Date(value).getTime();
136-
} else if (value instanceof Date) {
137-
this._endTimeThreshold = value.getTime();
138-
} else if (typeof value === 'number') {
139-
this._endTimeThreshold = Number(value);
140-
}
141-
}
14275
// relation to Css Start
14376

14477
// color of canvas border
@@ -262,6 +195,11 @@ export class TimelineComponent implements OnInit, OnChanges {
262195
constructor() {
263196
// this.startTimeThreshold = new Date().getTime() - 1 * 0.5 * 3600 * 1000;
264197
// this.endTimeThreshold = new Date().getTime() + 1 * 1 * 3600 * 1000;
198+
this.forWardValue = 5000;
199+
this.speed = 1000;
200+
this.playTime = new Date().getTime();
201+
this.startTimeThreshold = new Date().getTime() - 1 * 12 * 3600 * 1000;
202+
this.endTimeThreshold = new Date().getTime() + 1 * 12 * 3600 * 1000;
265203
this.playClick = new EventEmitter<any>();
266204
this.mouseUp = new EventEmitter<any>();
267205
this.mouseDown = new EventEmitter<any>();
@@ -486,7 +424,14 @@ export class TimelineComponent implements OnInit, OnChanges {
486424
// this.drawPalyBar();
487425
}
488426
if (changes.startTimeThreshold) {
489-
this.startTimeThreshold = changes.startTimeThreshold.currentValue;
427+
const value = changes.startTimeThreshold.currentValue;
428+
if (changes.startTimeThreshold.currentValue instanceof String) {
429+
this.startTimeThreshold = new Date(value).getTime();
430+
} else if (value instanceof Date) {
431+
this.startTimeThreshold = value.getTime();
432+
} else if (typeof value === 'number') {
433+
this.startTimeThreshold = Number(value);
434+
}
490435

491436
this.hoursPerRuler = Math.ceil((Number(this.endTimeThreshold) - Number(this.startTimeThreshold)) / 1000 / 3600) < 24
492437
? Math.ceil((Number(this.endTimeThreshold) - Number(this.startTimeThreshold)) / 1000 / 3600)
@@ -496,14 +441,29 @@ export class TimelineComponent implements OnInit, OnChanges {
496441
// this.init(this.startTimestamp, this.timecell, false);
497442
}
498443
if (changes.endTimeThreshold) {
499-
this.endTimeThreshold = changes.endTimeThreshold.currentValue;
444+
const value = changes.endTimeThreshold.currentValue;
445+
if (changes.endTimeThreshold.currentValue instanceof String) {
446+
this.endTimeThreshold = new Date(value).getTime();
447+
} else if (value instanceof Date) {
448+
this.endTimeThreshold = value.getTime();
449+
} else if (typeof value === 'number') {
450+
this.endTimeThreshold = Number(value);
451+
}
500452
this.hoursPerRuler = Math.ceil((Number(this.endTimeThreshold) - Number(this.startTimeThreshold)) / 1000 / 3600) < 24
501453
? Math.ceil((Number(this.endTimeThreshold) - Number(this.startTimeThreshold)) / 1000 / 3600)
502454
: 24;
503455

504456
}
505457
if (changes.playTime) {
506-
this.playTime = changes.playTime.currentValue;
458+
459+
const value = changes.playTime.currentValue;
460+
if (changes.playTime.currentValue instanceof String) {
461+
this.playTime = new Date(value).getTime();
462+
} else if (value instanceof Date) {
463+
this.playTime = value.getTime();
464+
} else if (typeof value === 'number') {
465+
this.playTime = Number(value);
466+
}
507467

508468
// use SetTimeOut Timer to make it asynchronous
509469
setTimeout(() => {
@@ -513,12 +473,13 @@ export class TimelineComponent implements OnInit, OnChanges {
513473
}
514474
if (changes.speed) {
515475

516-
this.speed = changes.speed.currentValue;
476+
this.speed = Number(changes.speed.currentValue) * 1000;
517477
}
518478
if (changes.forWardValue) {
519479

520-
this.forWardValue = changes.forWardValue.currentValue;
480+
this.forWardValue = Number(changes.forWardValue.currentValue) * 1000;
521481
}
482+
522483
if (changes.isPlayClick) {
523484
if (changes.isPlayClick.currentValue) {
524485
this.onPlayClick();

‎projects/timeline/src/lib/timeline.module.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { NgModule } from '@angular/core';
2-
import { TimelineComponent } from './timeline.component';
2+
import { NgxVideoTimelineComponent } from './timeline.component';
33
import {CommonModule} from '@angular/common';
44

55

66

77
@NgModule({
8-
declarations: [TimelineComponent],
9-
imports: [
10-
CommonModule
11-
],
12-
exports: [TimelineComponent]
8+
declarations: [NgxVideoTimelineComponent],
9+
imports: [
10+
CommonModule
11+
],
12+
exports: [NgxVideoTimelineComponent]
1313
})
14-
export class TimelineModule { }
14+
export class NgxVideoTimelineModule { }

‎projects/timeline/src/lib/timeline.service.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { TestBed } from '@angular/core/testing';
22

3-
import { TimelineService } from './timeline.service';
3+
import { NgxVideoTimelineService } from './timeline.service';
44

55
describe('TimelineService', () => {
6-
let service: TimelineService;
6+
let service: NgxVideoTimelineService;
77

88
beforeEach(() => {
99
TestBed.configureTestingModule({});
10-
service = TestBed.inject(TimelineService);
10+
service = TestBed.inject(NgxVideoTimelineService);
1111
});
1212

1313
it('should be created', () => {

‎projects/timeline/src/lib/timeline.service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
33
@Injectable({
44
providedIn: 'root'
55
})
6-
export class TimelineService {
6+
export class NgxVideoTimelineService {
77

88
constructor() { }
99
}

‎src/app/app.component.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@ export class AppComponent implements OnInit {
1111

1212
speed: number;
1313
canvasHeight: number;
14-
startTimeThreshold: number;
15-
endTimeThreshold: number;
14+
startTimeThreshold: number | string | Date;
15+
endTimeThreshold: number | string | Date;
1616
videoCells: VideoCellType[];
1717
playTime: Date;
1818
isPlayClick: boolean;
1919

2020
constructor() {
21-
this.speed = 10;
21+
this.speed = 1;
2222
this.isPlayClick = false;
2323
this.canvasHeight = 80;
24-
this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;
25-
this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;
24+
this.startTimeThreshold = new Date('2020-07-27 00:00:00');
25+
this.endTimeThreshold = new Date('2020-07-29 00:00:00');
2626
this.videoCells = [];
2727
this.playTime = new Date();
2828
}

‎src/app/app.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33

44
import { AppComponent } from './app.component';
5-
import { TimelineModule } from 'projects/timeline/src/lib/timeline.module';
5+
import { NgxVideoTimelineModule } from 'projects/timeline/src/lib/timeline.module';
66

77
@NgModule({
88
declarations: [
99
AppComponent
1010
],
1111
imports: [
1212
BrowserModule,
13-
TimelineModule
13+
NgxVideoTimelineModule
1414
],
1515
providers: [],
1616
bootstrap: [AppComponent]

‎tsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,8 @@
2525
"angularCompilerOptions": {
2626
"fullTemplateTypeCheck": true,
2727
"strictInjectionParameters": true
28+
},
29+
"compilerOptions": {
30+
"skipLibCheck": true
2831
}
2932
}

0 commit comments

Comments
 (0)