all files / core/vg-cue-points/ vg-cue-points.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
1×
1×
1×
1×
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
3×
 
 
1×
1×
1×
 
 
1×
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
1×
1×
 
 
1×
1×
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
import { Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
import { VgEvents } from '../events/vg-events';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import { Subscription } from 'rxjs/Subscription';
 
@Directive({
    selector: '[vgCuePoints]'
})
export class VgCuePoints implements OnInit, OnDestroy {
    @Output('onEnterCuePoint') onEnterCuePoint: EventEmitter<any> = new EventEmitter();
    @Output('onUpdateCuePoint') onUpdateCuePoint: EventEmitter<any> = new EventEmitter();
    @Output('onExitCuePoint') onExitCuePoint: EventEmitter<any> = new EventEmitter();
    @Output('onCompleteCuePoint') onCompleteCuePoint: EventEmitter<any> = new EventEmitter();
 
    subscriptions: Subscription[] = [];
    cuesSubscriptions: Subscription[] = [];
 
    totalCues = 0;
 
    constructor(public ref: ElementRef) {
    }
 
    ngOnInit() {
        let onLoad = Observable.fromEvent(this.ref.nativeElement, VgEvents.VG_LOAD);
        this.subscriptions.push(onLoad.subscribe(this.onLoad.bind(this)));
    }
 
    onLoad(event: any) {
        let cues: TextTrackCue[] = event.target.track.cues;
 
        this.ref.nativeElement.cues = cues;
 
        this.updateCuePoints(cues);
    }
 
    updateCuePoints(cues: TextTrackCue[]) {
        this.cuesSubscriptions.forEach(s => s.unsubscribe());
 
        for (let i = 0, l = cues.length; i < l; i++) {
            let onEnter = Observable.fromEvent(cues[ i ], VgEvents.VG_ENTER);
            this.cuesSubscriptions.push(onEnter.subscribe(this.onEnter.bind(this)));
 
            let onExit = Observable.fromEvent(cues[ i ], VgEvents.VG_EXIT);
            this.cuesSubscriptions.push(onExit.subscribe(this.onExit.bind(this)));
        }
    }
 
    onEnter(event: any) {
        this.onEnterCuePoint.next(event.target);
    }
 
    onExit(event: any) {
        this.onExitCuePoint.next(event.target);
    }
 
    ngDoCheck() {
        if (this.ref.nativeElement.cues) {
            const changes = this.totalCues !== this.ref.nativeElement.track.cues.length;
 
            if (changes) {
                this.totalCues = this.ref.nativeElement.track.cues.length;
                this.ref.nativeElement.cues = this.ref.nativeElement.track.cues;
                this.updateCuePoints(this.ref.nativeElement.track.cues);
            }
        }
    }
 
    ngOnDestroy() {
        this.subscriptions.forEach(s => s.unsubscribe());
    }
}