|
1
|
import { Class } from '../mixin/index';
|
|
2
|
import { Dimensions } from '../util/index';
|
|
3
|
|
|
4
|
export default function (UIkit) {
|
|
5
|
|
|
6
|
UIkit.component('cover', {
|
|
7
|
|
|
8
|
mixins: [Class],
|
|
9
|
|
|
10
|
props: {
|
|
11
|
automute: Boolean,
|
|
12
|
width: Number,
|
|
13
|
height: Number
|
|
14
|
},
|
|
15
|
|
|
16
|
defaults: {automute: true},
|
|
17
|
|
|
18
|
computed: {
|
|
19
|
|
|
20
|
el() {
|
|
21
|
return this.$el[0];
|
|
22
|
},
|
|
23
|
|
|
24
|
parent() {
|
|
25
|
return this.$el.parent()[0];
|
|
26
|
}
|
|
27
|
|
|
28
|
},
|
|
29
|
|
|
30
|
ready() {
|
|
31
|
|
|
32
|
if (!this.$el.is('iframe')) {
|
|
33
|
return;
|
|
34
|
}
|
|
35
|
|
|
36
|
this.$el.css('pointerEvents', 'none');
|
|
37
|
|
|
38
|
if (this.automute) {
|
|
39
|
|
|
40
|
var src = this.$el.attr('src');
|
|
41
|
|
|
42
|
this.$el
|
|
43
|
.attr('src', `${src}${~src.indexOf('?') ? '&' : '?'}enablejsapi=1&api=1`)
|
|
44
|
.on('load', ({target}) => target.contentWindow.postMessage('{"event": "command", "func": "mute", "method":"setVolume", "value":0}', '*'));
|
|
45
|
}
|
|
46
|
},
|
|
47
|
|
|
48
|
update: {
|
|
49
|
|
|
50
|
write() {
|
|
51
|
|
|
52
|
if (this.el.offsetHeight === 0) {
|
|
53
|
return;
|
|
54
|
}
|
|
55
|
|
|
56
|
this.$el
|
|
57
|
.css({width: '', height: ''})
|
|
58
|
.css(Dimensions.cover(
|
|
59
|
{width: this.width || this.el.clientWidth, height: this.height || this.el.clientHeight},
|
|
60
|
{width: this.parent.offsetWidth, height: this.parent.offsetHeight}
|
|
61
|
));
|
|
62
|
|
|
63
|
},
|
|
64
|
|
|
65
|
events: ['load', 'resize']
|
|
66
|
|
|
67
|
},
|
|
68
|
|
|
69
|
events: {
|
|
70
|
|
|
71
|
loadedmetadata() {
|
|
72
|
this.$emit();
|
|
73
|
}
|
|
74
|
|
|
75
|
}
|
|
76
|
|
|
77
|
});
|
|
78
|
|
|
79
|
}
|