/
index.js
145 lines (122 loc) · 4.59 KB
/
index.js
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
const template = document.createElement('template');
template.innerHTML = `
<style>
:host {
display: block;
font-family: sans-serif;
text-align: center;
}
</style>
<video id="video" controls="controls">
<source/>
</video>
`
class WebMonetizedVideo extends HTMLElement {
constructor() {
super();
this.attachShadow({ 'mode': 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.$video = this.shadowRoot.getElementById("video");
this.$source = this.$video.childNodes[1];
}
connectedCallback() {
this.width = this.getAttribute("width");
this.height = this.getAttribute('height');
this.url = this.getAttribute('url');
this.getPaymentDetails = this.getAttribute("monetization-link");
this.setProperties();
this.hasWatchedOnce = false;
}
disconnectedCallback() {
this.removeVideoEventListeners();
this.removeWebMonetizationEventListeners();
}
setProperties() {
this.$video.setAttribute("width", this.width);
this.$video.setAttribute("heigth", this.height);
this.$source.setAttribute("src", this.url);
this.addVideoEventListeners();
this.addWebMonetizationEventListeners();
}
isWebMonetized() {
return !!document.monetization;
}
onPlay() {
this.enableWebMonetization();
}
onPause() {
this.disableWebMonetization();
}
onEnded() {
this.hasWatchedOnce = true;
this.disableWebMonetization();
this.removeVideoEventListeners();
}
onPlayError(event) {
console.log("onPlayerError", event.data, event);
}
onload() {
this.dispatchEvent(new Event("volumeChange"));
this.timeupdateInterval = setInterval(() => {
this.dispatchEvent(new Event('timeupdate'));
}, 25);
}
removeVideoEventListeners() {
this.$video.removeEventListener("play", this.onPlay);
this.$video.removeEventListener("pause", this.onPause);
this.$video.removeEventListener("ended", this.onEnded);
this.$video.removeEventListener("loadeddata", this.onload);
this.$video.removeEventListener("error", this.onPlayError)
}
addVideoEventListeners() {
this.$video.addEventListener("play", this.onPlay);
this.$video.addEventListener("pause", this.onPause);
this.$video.addEventListener("ended", this.onEnded);
this.$video.addEventListener("loadeddata", this.onload);
this.$video.addEventListener("error", this.onPlayError);
}
enableWebMonetization() {
if(!this.hasWatchedOnce){
const monetizationTag = document.createElement('meta');
monetizationTag.name = "monetization";
monetizationTag.content = this.getPaymentDetails;
document.head.appendChild(monetizationTag);
}
}
disableWebMonetization() {
const removeMonetizationTag = document.querySelector('meta[name="monetization"]');
removeMonetizationTag.remove();
}
onMonetizationStop() {
this.dispatchEvent(new Event("monetizationstop"));
}
onMonetizationPending() {
this.dispatchEvent(new Event("monetizationpending"));
}
onMonetizationStart() {
this.dispatchEvent(new Event("monetizationstart"));
}
onMonetizationProgress() {
this.dispatchEvent(new Event("monetizationprogress"));
}
addWebMonetizationEventListeners() {
if (this.isWebMonetized()) {
document.monetization.addEventListener('monetizationstop', this.onMonetizationStop);
document.monetization.addEventListener('monetizationpending', this.onMonetizationPending);
document.monetization.addEventListener('monetizationstart', this.onMonetizationStart);
document.monetization.addEventListener('monetizationprogress', this.onMonetizationProgress);
}
}
removeWebMonetizationEventListeners() {
if (this.isWebMonetized()) {
document.monetization.removeEventListener('monetizationstop', this.onMonetizationStop);
document.monetization.removeEventListener('monetizationpending', this.onMonetizationPending);
document.monetization.removeEventListener('monetizationstart', this.onMonetizationStart);
document.monetization.removeEventListener('monetizationprogress', this.onMonetizationProgress);
}
}
}
if (!window.customElements.get("web-monetized-video")) {
window.customElements.define('web-monetized-video', WebMonetizedVideo);
}
export default WebMonetizedVideo;