| 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125 | 1×
1×
1×
1×
1×
1×
1×
4×
4×
4×
4×
4×
4×
4×
4×
4×
2×
1×
1×
1×
1×
1×
1×
1×
3×
2×
2×
1×
1×
1×
1×
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';
export class VgPlayer implements AfterContentInit, OnDestroy {
elem: HTMLElement;
isFullscreen: boolean = false;
isNativeFullscreen: boolean = false;
areControlsHidden: boolean = false;
zIndex: string;
onPlayerReady: EventEmitter<any> = new EventEmitter();
onMediaReady: EventEmitter<any> = new EventEmitter();
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());
}
static decorators: DecoratorInvocation[] = [
{ type: Component, args: [{
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 ]
}, ] },
];
/** @nocollapse */
static ctorParameters: ({type: any, decorators?: DecoratorInvocation[]}|null)[] = [
{type: ElementRef, },
{type: VgAPI, },
{type: VgFullscreenAPI, },
{type: VgControlsHidden, },
];
static propDecorators: {[key: string]: DecoratorInvocation[]} = {
'isFullscreen': [{ type: HostBinding, args: ['class.fullscreen', ] },],
'isNativeFullscreen': [{ type: HostBinding, args: ['class.native-fullscreen', ] },],
'areControlsHidden': [{ type: HostBinding, args: ['class.controls-hidden', ] },],
'zIndex': [{ type: HostBinding, args: ['style.z-index', ] },],
'onPlayerReady': [{ type: Output },],
'onMediaReady': [{ type: Output },],
'medias': [{ type: ContentChildren, args: [VgMedia, ] },],
};
}
interface DecoratorInvocation {
type: Function;
args?: any[];
}
|