all files / core/vg-player/ vg-player.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
1×
 
 
 
 
 
 
 
 
 
1×
1×
1×
1×
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4×
4×
 
4×
 
 
2×
1×
 
 
 
1×
 
1×
1×
 
1×
1×
 
 
1×
3×
2×
2×
 
1×
 
 
 
1×
 
 
 
1×
 
 
 
 
import {
    Output,
    Component,
    EventEmitter,
    ElementRef,
    HostBinding,
    QueryList,
    AfterContentInit,
    ContentChildren, ViewEncapsulation, OnDestroy
} from '@angular/core';
import { VgAPI } from '../services/vg-api';
import { VgFullscreenAPI } from '../services/vg-fullscreen-api';
import { VgUtils } from '../services/vg-utils';
import { VgMedia } from '../vg-media/vg-media';
import { Subscription } from 'rxjs/Subscription';
import { VgControlsHidden } from '../services/vg-controls-hidden';
 
@Component({
    selector: 'vg-player',
    encapsulation: ViewEncapsulation.None,
    template: `<ng-content></ng-content>`,
    styles: [ `
        vg-player {
            font-family: 'videogular';
            position: relative;
            display: flex;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: black;
        }
 
        vg-player.fullscreen {
            position: fixed;
            left: 0;
            top: 0;
        }
 
        vg-player.native-fullscreen.controls-hidden {
            cursor: none;
        }
    ` ],
    providers: [ VgAPI, VgFullscreenAPI, VgControlsHidden ]
})
export class VgPlayer implements AfterContentInit, OnDestroy {
    elem: HTMLElement;
 
    @HostBinding('class.fullscreen') isFullscreen: boolean = false;
    @HostBinding('class.native-fullscreen') isNativeFullscreen: boolean = false;
    @HostBinding('class.controls-hidden') areControlsHidden: boolean = false;
    @HostBinding('style.z-index') zIndex: string;
 
    @Output()
    onPlayerReady: EventEmitter<any> = new EventEmitter();
 
    @Output()
    onMediaReady: EventEmitter<any> = new EventEmitter();
 
    @ContentChildren(VgMedia)
    medias: QueryList<VgMedia>;
 
    subscriptions: Subscription[] = [];
 
    constructor(ref: ElementRef, public api: VgAPI, public fsAPI: VgFullscreenAPI, private controlsHidden: VgControlsHidden) {
        this.elem = ref.nativeElement;
 
        this.api.registerElement(this.elem);
    }
 
    ngAfterContentInit() {
        this.medias.toArray().forEach((media) => {
            this.api.registerMedia(media);
        });
 
        this.fsAPI.init(this.elem, this.medias);
 
        this.subscriptions.push(this.fsAPI.onChangeFullscreen.subscribe(this.onChangeFullscreen.bind(this)));
        this.subscriptions.push(this.controlsHidden.isHidden.subscribe(this.onHideControls.bind(this)));
 
        this.api.onPlayerReady(this.fsAPI);
        this.onPlayerReady.next(this.api);
    }
 
    onChangeFullscreen(fsState: boolean) {
        if (!this.fsAPI.nativeFullscreen) {
            this.isFullscreen = fsState;
            this.zIndex = fsState ? VgUtils.getZIndex().toString() : 'auto';
        } else {
            this.isNativeFullscreen = fsState;
        }
    }
 
    onHideControls(hidden: boolean) {
        this.areControlsHidden = hidden;
    }
 
    ngOnDestroy() {
        this.subscriptions.forEach(s => s.unsubscribe());
    }
}