@vouchfor/embeds 0.0.0-experiment.e7e20dd → 0.0.0-experiment.e89c310
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/embeds.js +116 -199
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/src/components/DialogEmbed/DialogOverlay.d.ts +4 -4
- package/dist/es/src/components/DialogEmbed/DialogPortal.d.ts +3 -3
- package/dist/es/src/components/DialogEmbed/index.d.ts +4 -5
- package/dist/es/src/components/PlayerEmbed/controllers/event-forwarder.d.ts +4 -3
- package/dist/es/src/components/PlayerEmbed/controllers/fetcher.d.ts +3 -2
- package/dist/es/src/components/PlayerEmbed/controllers/tracking/index.d.ts +4 -2
- package/dist/es/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +4 -3
- package/dist/es/src/components/PlayerEmbed/index.d.ts +15 -13
- package/dist/es/src/components/PlayerEmbed/tests/data.d.ts +4 -2
- package/dist/es/src/components/PlayerEmbed/tests/media-data.d.ts +19 -0
- package/dist/iife/dialog-embed/embed.iife.js +2647 -317
- package/dist/iife/dialog-embed/embed.iife.js.map +1 -1
- package/dist/iife/embeds.iife.js +2647 -317
- package/dist/iife/embeds.iife.js.map +1 -1
- package/dist/iife/player-embed/embed.iife.js +2625 -295
- package/dist/iife/player-embed/embed.iife.js.map +1 -1
- package/package.json +31 -29
- package/src/components/PlayerEmbed/MultiEmbed.stories.ts +135 -0
- package/src/components/PlayerEmbed/PlayerEmbed.stories.ts +18 -2
- package/src/components/PlayerEmbed/controllers/tracking/index.ts +10 -10
- package/src/components/PlayerEmbed/index.ts +33 -18
- package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts +14 -7
- package/src/components/PlayerEmbed/tests/data.ts +120 -76
- package/src/components/PlayerEmbed/tests/media-data.ts +22 -0
package/dist/es/embeds.js
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import { css, LitElement, html } from
|
|
2
|
-
import { property, state, customElement } from
|
|
3
|
-
import { ifDefined } from
|
|
4
|
-
import { createRef, ref } from
|
|
5
|
-
import { Task } from
|
|
6
|
-
import { v4 } from
|
|
7
|
-
import { TEMPLATE_VERSION } from
|
|
8
|
-
import
|
|
9
|
-
import { styleMap } from
|
|
10
|
-
import { classMap } from
|
|
11
|
-
import
|
|
12
|
-
|
|
1
|
+
import { css, LitElement, html } from "lit";
|
|
2
|
+
import { property, state, customElement } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
4
|
+
import { createRef, ref } from "lit/directives/ref.js";
|
|
5
|
+
import { Task } from "@lit/task";
|
|
6
|
+
import { v4 } from "uuid";
|
|
7
|
+
import { TEMPLATE_VERSION } from "@vouchfor/canvas-video";
|
|
8
|
+
import "@vouchfor/media-player";
|
|
9
|
+
import { styleMap } from "lit/directives/style-map.js";
|
|
10
|
+
import { classMap } from "lit/directives/class-map.js";
|
|
11
|
+
import "@a11y/focus-trap";
|
|
13
12
|
function forwardEvent(type, fromElement, toElement) {
|
|
14
13
|
function forwarder(event) {
|
|
15
14
|
toElement.dispatchEvent(new CustomEvent(event.type, event));
|
|
@@ -19,7 +18,6 @@ function forwardEvent(type, fromElement, toElement) {
|
|
|
19
18
|
fromElement.removeEventListener(type, forwarder);
|
|
20
19
|
};
|
|
21
20
|
}
|
|
22
|
-
|
|
23
21
|
class EventForwardController {
|
|
24
22
|
constructor(host, events) {
|
|
25
23
|
this._events = [];
|
|
@@ -48,7 +46,6 @@ class EventForwardController {
|
|
|
48
46
|
this._cleanup = [];
|
|
49
47
|
}
|
|
50
48
|
}
|
|
51
|
-
|
|
52
49
|
const devVideoUrl = "https://d2rxhdlm2q91uk.cloudfront.net";
|
|
53
50
|
const stagingVideoUrl = "https://d1ix11aj5kfygl.cloudfront.net";
|
|
54
51
|
const prodVideoUrl = "https://d157jlwnudd93d.cloudfront.net";
|
|
@@ -92,11 +89,11 @@ function getEnvUrls(env) {
|
|
|
92
89
|
};
|
|
93
90
|
}
|
|
94
91
|
}
|
|
95
|
-
|
|
96
92
|
class FetcherController {
|
|
97
93
|
constructor(host) {
|
|
98
94
|
this._fetching = false;
|
|
99
95
|
this.getVouch = async (env, apiKey, vouchId) => {
|
|
96
|
+
var _a;
|
|
100
97
|
const { embedApiUrl } = getEnvUrls(env);
|
|
101
98
|
const cacheCheck = v4();
|
|
102
99
|
const res = await fetch(`${embedApiUrl}/vouches/${vouchId}`, {
|
|
@@ -107,8 +104,8 @@ class FetcherController {
|
|
|
107
104
|
]
|
|
108
105
|
});
|
|
109
106
|
const vouch = await res.json();
|
|
110
|
-
this.host.dispatchEvent(new CustomEvent("vouch:loaded", { detail: vouch
|
|
111
|
-
const resCacheCheck = res
|
|
107
|
+
this.host.dispatchEvent(new CustomEvent("vouch:loaded", { detail: vouch == null ? void 0 : vouch.id }));
|
|
108
|
+
const resCacheCheck = (_a = res == null ? void 0 : res.headers) == null ? void 0 : _a.get("X-Cache-Check");
|
|
112
109
|
if (resCacheCheck !== cacheCheck) {
|
|
113
110
|
fetch(`${embedApiUrl}/vouches/${vouchId}`, {
|
|
114
111
|
method: "GET",
|
|
@@ -121,6 +118,7 @@ class FetcherController {
|
|
|
121
118
|
return vouch;
|
|
122
119
|
};
|
|
123
120
|
this.getTemplate = async (env, apiKey, templateId) => {
|
|
121
|
+
var _a;
|
|
124
122
|
const { embedApiUrl } = getEnvUrls(env);
|
|
125
123
|
const cacheCheck = v4();
|
|
126
124
|
const res = await fetch(`${embedApiUrl}/templates/${templateId}`, {
|
|
@@ -131,7 +129,7 @@ class FetcherController {
|
|
|
131
129
|
]
|
|
132
130
|
});
|
|
133
131
|
const template = await res.json();
|
|
134
|
-
const resCacheCheck = res
|
|
132
|
+
const resCacheCheck = (_a = res == null ? void 0 : res.headers) == null ? void 0 : _a.get("X-Cache-Check");
|
|
135
133
|
if (resCacheCheck !== cacheCheck) {
|
|
136
134
|
fetch(`${embedApiUrl}/templates/${templateId}`, {
|
|
137
135
|
method: "GET",
|
|
@@ -147,6 +145,7 @@ class FetcherController {
|
|
|
147
145
|
new Task(
|
|
148
146
|
this.host,
|
|
149
147
|
async ([env, apiKey, data, vouchId, templateId]) => {
|
|
148
|
+
var _a, _b, _c, _d;
|
|
150
149
|
try {
|
|
151
150
|
host.vouch = void 0;
|
|
152
151
|
host.template = void 0;
|
|
@@ -157,7 +156,7 @@ class FetcherController {
|
|
|
157
156
|
template = await this.getTemplate(env, apiKey, templateId);
|
|
158
157
|
}
|
|
159
158
|
this._vouch = data;
|
|
160
|
-
host.template = template ?? data
|
|
159
|
+
host.template = template ?? ((_b = (_a = data == null ? void 0 : data.settings) == null ? void 0 : _a.template) == null ? void 0 : _b.instance);
|
|
161
160
|
} else if (vouchId) {
|
|
162
161
|
this.fetching = true;
|
|
163
162
|
const [vouch, template] = await Promise.all([
|
|
@@ -165,7 +164,7 @@ class FetcherController {
|
|
|
165
164
|
templateId ? this.getTemplate(env, apiKey, templateId) : null
|
|
166
165
|
]);
|
|
167
166
|
this._vouch = vouch;
|
|
168
|
-
host.template = template ?? vouch
|
|
167
|
+
host.template = template ?? ((_d = (_c = vouch == null ? void 0 : vouch.settings) == null ? void 0 : _c.template) == null ? void 0 : _d.instance);
|
|
169
168
|
}
|
|
170
169
|
} finally {
|
|
171
170
|
this.fetching = false;
|
|
@@ -179,7 +178,7 @@ class FetcherController {
|
|
|
179
178
|
host.vouch = vouch ? {
|
|
180
179
|
...vouch,
|
|
181
180
|
questions: {
|
|
182
|
-
items: vouch
|
|
181
|
+
items: vouch == null ? void 0 : vouch.questions.items.filter((_, index) => !(questions == null ? void 0 : questions.length) || (questions == null ? void 0 : questions.includes(index + 1)))
|
|
183
182
|
}
|
|
184
183
|
} : void 0;
|
|
185
184
|
},
|
|
@@ -196,114 +195,10 @@ class FetcherController {
|
|
|
196
195
|
return this._fetching;
|
|
197
196
|
}
|
|
198
197
|
}
|
|
199
|
-
|
|
200
|
-
const name = "@vouchfor/embeds";
|
|
201
|
-
const version = "0.0.0-experiment.e7e20dd";
|
|
202
|
-
const license = "MIT";
|
|
203
|
-
const author = "Aaron Williams";
|
|
204
|
-
const main = "dist/es/embeds.js";
|
|
205
|
-
const module = "dist/es/embeds.js";
|
|
206
|
-
const type = "module";
|
|
207
|
-
const types = "dist/es/src/index.d.ts";
|
|
208
|
-
const exports = {
|
|
209
|
-
".": "./dist/es/embeds.js"
|
|
210
|
-
};
|
|
211
|
-
const files = [
|
|
212
|
-
"dist",
|
|
213
|
-
"src"
|
|
214
|
-
];
|
|
215
|
-
const publishConfig = {
|
|
216
|
-
tag: "experiment",
|
|
217
|
-
access: "public"
|
|
218
|
-
};
|
|
219
|
-
const engines = {
|
|
220
|
-
node: ">=18.18.0"
|
|
221
|
-
};
|
|
222
|
-
const scripts = {
|
|
223
|
-
build: "rm -rf dist && tsc && yarn build:self",
|
|
224
|
-
"build:deps": "yarn --cwd ../media-player build",
|
|
225
|
-
"build:self": "vite build --mode iife && vite build --mode es && node scripts/build.cjs",
|
|
226
|
-
"build:package": "yarn build",
|
|
227
|
-
"build:storybook": "yarn prebuild && storybook build",
|
|
228
|
-
"generate:manifest": "wca src --outFile custom-elements.json",
|
|
229
|
-
lint: "eslint . --quiet",
|
|
230
|
-
"lint:fix": "eslint . --fix",
|
|
231
|
-
"lint:staged": "lint-staged",
|
|
232
|
-
prepublishOnly: "yarn build",
|
|
233
|
-
size: "size-limit",
|
|
234
|
-
storybook: "yarn prebuild && storybook dev -p 6007",
|
|
235
|
-
prebuild: "yarn build:deps && yarn generate:manifest",
|
|
236
|
-
test: "rm -rf test/lib && yarn prebuild && vite build --mode test && web-test-runner",
|
|
237
|
-
"test:ci": "yarn test --config web-test-runner.ci.config.js"
|
|
238
|
-
};
|
|
239
|
-
const dependencies = {
|
|
240
|
-
"@a11y/focus-trap": "^1.0.5",
|
|
241
|
-
"@lit/task": "^1.0.0",
|
|
242
|
-
"@vouchfor/canvas-video": "0.0.0-experiment.e7e20dd",
|
|
243
|
-
"@vouchfor/media-player": "0.0.0-experiment.e7e20dd",
|
|
244
|
-
uuid: "^9.0.1"
|
|
245
|
-
};
|
|
246
|
-
const peerDependencies = {
|
|
247
|
-
lit: "^3.1.2"
|
|
248
|
-
};
|
|
249
|
-
const devDependencies = {
|
|
250
|
-
"@esm-bundle/chai": "^4.3.4-fix.0",
|
|
251
|
-
"@open-wc/testing": "^4.0.0",
|
|
252
|
-
"@storybook/addon-essentials": "^8.0.2",
|
|
253
|
-
"@storybook/addon-links": "^8.0.2",
|
|
254
|
-
"@storybook/blocks": "^8.0.2",
|
|
255
|
-
"@storybook/web-components": "^8.0.2",
|
|
256
|
-
"@storybook/web-components-vite": "^8.0.2",
|
|
257
|
-
"@svgr/core": "^8.1.0",
|
|
258
|
-
"@types/flat": "^5.0.5",
|
|
259
|
-
"@types/mocha": "^10.0.6",
|
|
260
|
-
"@vouchfor/eslint-config": "^1.0.1",
|
|
261
|
-
"@vouchfor/prettier-config": "^1.0.1",
|
|
262
|
-
"@vouchfor/video-utils": "0.0.0-experiment.e7e20dd",
|
|
263
|
-
"@web/dev-server-esbuild": "^1.0.2",
|
|
264
|
-
"@web/test-runner": "^0.18.1",
|
|
265
|
-
"@web/test-runner-browserstack": "^0.7.1",
|
|
266
|
-
"@web/test-runner-mocha": "^0.9.0",
|
|
267
|
-
"@web/test-runner-playwright": "^0.11.0",
|
|
268
|
-
glob: "^10.3.10",
|
|
269
|
-
"lint-staged": "^15.2.2",
|
|
270
|
-
lit: "^3.1.2",
|
|
271
|
-
lodash: "^4.17.21",
|
|
272
|
-
react: "^18.2.0",
|
|
273
|
-
"react-dom": "^18.2.0",
|
|
274
|
-
"rollup-plugin-tla": "^0.0.2",
|
|
275
|
-
sinon: "^17.0.1",
|
|
276
|
-
storybook: "^8.0.2",
|
|
277
|
-
svgson: "^5.3.1",
|
|
278
|
-
typescript: "^5.4.3",
|
|
279
|
-
vite: "^5.2.2",
|
|
280
|
-
"vite-plugin-commonjs": "^0.10.1",
|
|
281
|
-
"vite-plugin-dts": "^3.7.3",
|
|
282
|
-
"web-component-analyzer": "^2.0.0"
|
|
283
|
-
};
|
|
198
|
+
const version = "0.0.0-experiment.e89c310";
|
|
284
199
|
const packageJson = {
|
|
285
|
-
|
|
286
|
-
version: version,
|
|
287
|
-
license: license,
|
|
288
|
-
author: author,
|
|
289
|
-
main: main,
|
|
290
|
-
module: module,
|
|
291
|
-
type: type,
|
|
292
|
-
types: types,
|
|
293
|
-
exports: exports,
|
|
294
|
-
files: files,
|
|
295
|
-
publishConfig: publishConfig,
|
|
296
|
-
engines: engines,
|
|
297
|
-
scripts: scripts,
|
|
298
|
-
"lint-staged": {
|
|
299
|
-
"**/*.{ts,tsx,js}": "eslint --fix --quiet",
|
|
300
|
-
"**/*.{md,json,yml}": "prettier --write"
|
|
301
|
-
},
|
|
302
|
-
dependencies: dependencies,
|
|
303
|
-
peerDependencies: peerDependencies,
|
|
304
|
-
devDependencies: devDependencies
|
|
200
|
+
version
|
|
305
201
|
};
|
|
306
|
-
|
|
307
202
|
function createVisitor(env) {
|
|
308
203
|
const { publicApiUrl } = getEnvUrls(env);
|
|
309
204
|
const visitorId = v4();
|
|
@@ -311,6 +206,7 @@ function createVisitor(env) {
|
|
|
311
206
|
return visitorId;
|
|
312
207
|
}
|
|
313
208
|
function getUids(env) {
|
|
209
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
314
210
|
if (typeof window === "undefined") {
|
|
315
211
|
return {
|
|
316
212
|
client: null,
|
|
@@ -318,21 +214,21 @@ function getUids(env) {
|
|
|
318
214
|
request: v4()
|
|
319
215
|
};
|
|
320
216
|
}
|
|
321
|
-
let visitorId = window.localStorage
|
|
322
|
-
let clientId = window.localStorage
|
|
323
|
-
let tabId = window.sessionStorage
|
|
217
|
+
let visitorId = (_b = (_a = window.localStorage) == null ? void 0 : _a.getItem) == null ? void 0 : _b.call(_a, "vouch-uid-visitor");
|
|
218
|
+
let clientId = (_d = (_c = window.localStorage) == null ? void 0 : _c.getItem) == null ? void 0 : _d.call(_c, "vouch-uid-client");
|
|
219
|
+
let tabId = (_f = (_e = window.sessionStorage) == null ? void 0 : _e.getItem) == null ? void 0 : _f.call(_e, "vouch-uid-tab");
|
|
324
220
|
const requestId = v4();
|
|
325
221
|
if (!visitorId) {
|
|
326
222
|
visitorId = createVisitor(env);
|
|
327
|
-
window.localStorage
|
|
223
|
+
(_h = (_g = window.localStorage) == null ? void 0 : _g.setItem) == null ? void 0 : _h.call(_g, "vouch-uid-visitor", visitorId);
|
|
328
224
|
}
|
|
329
225
|
if (!clientId) {
|
|
330
226
|
clientId = v4();
|
|
331
|
-
window.localStorage
|
|
227
|
+
(_j = (_i = window.localStorage) == null ? void 0 : _i.setItem) == null ? void 0 : _j.call(_i, "vouch-uid-client", clientId);
|
|
332
228
|
}
|
|
333
229
|
if (!tabId) {
|
|
334
230
|
tabId = v4();
|
|
335
|
-
window.sessionStorage
|
|
231
|
+
(_l = (_k = window.sessionStorage) == null ? void 0 : _k.setItem) == null ? void 0 : _l.call(_k, "vouch-uid-tab", tabId);
|
|
336
232
|
}
|
|
337
233
|
return {
|
|
338
234
|
client: clientId,
|
|
@@ -345,10 +241,11 @@ function findVouchId(payload, vouch) {
|
|
|
345
241
|
if (payload && "vouchId" in payload) {
|
|
346
242
|
return payload.vouchId;
|
|
347
243
|
}
|
|
348
|
-
return vouch
|
|
244
|
+
return (vouch == null ? void 0 : vouch.id) ?? null;
|
|
349
245
|
}
|
|
350
246
|
function getReportingMetadata(source = "embedded_player") {
|
|
351
|
-
|
|
247
|
+
var _a, _b;
|
|
248
|
+
const [country, region] = ((_b = (_a = Intl.DateTimeFormat().resolvedOptions().timeZone) == null ? void 0 : _a.split) == null ? void 0 : _b.call(_a, "/")) ?? [];
|
|
352
249
|
const utmParams = {};
|
|
353
250
|
[...new URLSearchParams(location.search).entries()].forEach(([key, value]) => {
|
|
354
251
|
if (/utm/.test(key)) {
|
|
@@ -371,7 +268,6 @@ function getReportingMetadata(source = "embedded_player") {
|
|
|
371
268
|
...utmParams
|
|
372
269
|
};
|
|
373
270
|
}
|
|
374
|
-
|
|
375
271
|
const MINIMUM_SEND_THRESHOLD = 1;
|
|
376
272
|
class TrackingController {
|
|
377
273
|
constructor(host) {
|
|
@@ -391,6 +287,7 @@ class TrackingController {
|
|
|
391
287
|
event,
|
|
392
288
|
payload: {
|
|
393
289
|
...payload,
|
|
290
|
+
senderId: this.host.senderId,
|
|
394
291
|
vouchId,
|
|
395
292
|
time: (/* @__PURE__ */ new Date()).toISOString()
|
|
396
293
|
}
|
|
@@ -444,9 +341,7 @@ class TrackingController {
|
|
|
444
341
|
};
|
|
445
342
|
this._handlePlay = () => {
|
|
446
343
|
if (!this._hasPlayed) {
|
|
447
|
-
this._createTrackingEvent("VIDEO_PLAYED", {
|
|
448
|
-
streamStart: this.host.currentTime
|
|
449
|
-
});
|
|
344
|
+
this._createTrackingEvent("VIDEO_PLAYED", { streamStart: this.host.currentTime });
|
|
450
345
|
this._hasPlayed = true;
|
|
451
346
|
}
|
|
452
347
|
};
|
|
@@ -461,8 +356,7 @@ class TrackingController {
|
|
|
461
356
|
this._handleVideoTimeUpdate = ({ detail: { id, key, node } }) => {
|
|
462
357
|
if (
|
|
463
358
|
// We only want to count any time that the video is actually playing
|
|
464
|
-
!this.host.paused
|
|
465
|
-
id === this.host.scene?.video?.id
|
|
359
|
+
!this.host.paused
|
|
466
360
|
) {
|
|
467
361
|
this._currentlyPlayingVideo = { id, key, node };
|
|
468
362
|
this._streamLatestTime[key] = node.currentTime;
|
|
@@ -500,19 +394,21 @@ class TrackingController {
|
|
|
500
394
|
}
|
|
501
395
|
hostConnected() {
|
|
502
396
|
requestAnimationFrame(() => {
|
|
397
|
+
var _a, _b, _c, _d;
|
|
503
398
|
if ("onvisibilitychange" in document) {
|
|
504
399
|
document.addEventListener("visibilitychange", this._handleVisibilityChange);
|
|
505
400
|
} else {
|
|
506
401
|
window.addEventListener("pagehide", this._handlePageHide);
|
|
507
402
|
}
|
|
508
403
|
this.host.addEventListener("vouch:loaded", this._handleVouchLoaded);
|
|
509
|
-
this.host.mediaPlayer
|
|
510
|
-
this.host.mediaPlayer
|
|
511
|
-
this.host.mediaPlayer
|
|
512
|
-
this.host.mediaPlayer
|
|
404
|
+
(_a = this.host.mediaPlayer) == null ? void 0 : _a.addEventListener("play", this._handlePlay);
|
|
405
|
+
(_b = this.host.mediaPlayer) == null ? void 0 : _b.addEventListener("video:play", this._handleVideoPlay);
|
|
406
|
+
(_c = this.host.mediaPlayer) == null ? void 0 : _c.addEventListener("video:pause", this._handleVideoPause);
|
|
407
|
+
(_d = this.host.mediaPlayer) == null ? void 0 : _d.addEventListener("video:timeupdate", this._handleVideoTimeUpdate);
|
|
513
408
|
});
|
|
514
409
|
}
|
|
515
410
|
hostDisconnected() {
|
|
411
|
+
var _a, _b, _c, _d;
|
|
516
412
|
this._pageUnloading();
|
|
517
413
|
if ("onvisibilitychange" in document) {
|
|
518
414
|
document.removeEventListener("visibilitychange", this._handleVisibilityChange);
|
|
@@ -520,13 +416,12 @@ class TrackingController {
|
|
|
520
416
|
window.removeEventListener("pagehide", this._handlePageHide);
|
|
521
417
|
}
|
|
522
418
|
this.host.removeEventListener("vouch:loaded", this._handleVouchLoaded);
|
|
523
|
-
this.host.mediaPlayer
|
|
524
|
-
this.host.mediaPlayer
|
|
525
|
-
this.host.mediaPlayer
|
|
526
|
-
this.host.mediaPlayer
|
|
419
|
+
(_a = this.host.mediaPlayer) == null ? void 0 : _a.removeEventListener("play", this._handlePlay);
|
|
420
|
+
(_b = this.host.mediaPlayer) == null ? void 0 : _b.removeEventListener("video:play", this._handleVideoPlay);
|
|
421
|
+
(_c = this.host.mediaPlayer) == null ? void 0 : _c.removeEventListener("video:pause", this._handleVideoPause);
|
|
422
|
+
(_d = this.host.mediaPlayer) == null ? void 0 : _d.removeEventListener("video:timeupdate", this._handleVideoTimeUpdate);
|
|
527
423
|
}
|
|
528
424
|
}
|
|
529
|
-
|
|
530
425
|
var __defProp$3 = Object.defineProperty;
|
|
531
426
|
var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
|
|
532
427
|
var __decorateClass$3 = (decorators, target, key, kind) => {
|
|
@@ -534,8 +429,7 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
|
|
|
534
429
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
535
430
|
if (decorator = decorators[i])
|
|
536
431
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
537
|
-
if (kind && result)
|
|
538
|
-
__defProp$3(target, key, result);
|
|
432
|
+
if (kind && result) __defProp$3(target, key, result);
|
|
539
433
|
return result;
|
|
540
434
|
};
|
|
541
435
|
let PlayerEmbed = class extends LitElement {
|
|
@@ -559,10 +453,12 @@ let PlayerEmbed = class extends LitElement {
|
|
|
559
453
|
"playing",
|
|
560
454
|
"ratechange",
|
|
561
455
|
"scenechange",
|
|
456
|
+
"scenesupdate",
|
|
562
457
|
"seeking",
|
|
563
458
|
"seeked",
|
|
564
459
|
"timeupdate",
|
|
565
460
|
"volumechange",
|
|
461
|
+
"processing",
|
|
566
462
|
"waiting",
|
|
567
463
|
"video:loadeddata",
|
|
568
464
|
"video:seeking",
|
|
@@ -570,14 +466,13 @@ let PlayerEmbed = class extends LitElement {
|
|
|
570
466
|
"video:play",
|
|
571
467
|
"video:playing",
|
|
572
468
|
"video:pause",
|
|
469
|
+
"video:waiting",
|
|
573
470
|
"video:stalled",
|
|
574
471
|
"video:timeupdate",
|
|
575
472
|
"video:ended",
|
|
576
473
|
"video:error"
|
|
577
474
|
]);
|
|
578
475
|
this._fetcherController = new FetcherController(this);
|
|
579
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
580
|
-
// @ts-ignore
|
|
581
476
|
this._trackingController = new TrackingController(this);
|
|
582
477
|
this._mediaPlayerRef = createRef();
|
|
583
478
|
}
|
|
@@ -585,25 +480,32 @@ let PlayerEmbed = class extends LitElement {
|
|
|
585
480
|
return this._fetcherController.fetching;
|
|
586
481
|
}
|
|
587
482
|
get waiting() {
|
|
588
|
-
|
|
483
|
+
var _a;
|
|
484
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.waiting;
|
|
589
485
|
}
|
|
590
486
|
get initialised() {
|
|
591
|
-
|
|
487
|
+
var _a;
|
|
488
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.initialised;
|
|
592
489
|
}
|
|
593
490
|
get seeking() {
|
|
594
|
-
|
|
491
|
+
var _a;
|
|
492
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.seeking;
|
|
595
493
|
}
|
|
596
494
|
get paused() {
|
|
597
|
-
|
|
495
|
+
var _a;
|
|
496
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.paused;
|
|
598
497
|
}
|
|
599
498
|
get captions() {
|
|
600
|
-
|
|
499
|
+
var _a;
|
|
500
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.captions;
|
|
601
501
|
}
|
|
602
502
|
get fullscreen() {
|
|
603
|
-
|
|
503
|
+
var _a;
|
|
504
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.fullscreen;
|
|
604
505
|
}
|
|
605
506
|
get duration() {
|
|
606
|
-
|
|
507
|
+
var _a;
|
|
508
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.duration;
|
|
607
509
|
}
|
|
608
510
|
set currentTime(value) {
|
|
609
511
|
if (this._mediaPlayerRef.value) {
|
|
@@ -611,7 +513,8 @@ let PlayerEmbed = class extends LitElement {
|
|
|
611
513
|
}
|
|
612
514
|
}
|
|
613
515
|
get currentTime() {
|
|
614
|
-
|
|
516
|
+
var _a;
|
|
517
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.currentTime) ?? 0;
|
|
615
518
|
}
|
|
616
519
|
set playbackRate(value) {
|
|
617
520
|
if (this._mediaPlayerRef.value) {
|
|
@@ -619,7 +522,8 @@ let PlayerEmbed = class extends LitElement {
|
|
|
619
522
|
}
|
|
620
523
|
}
|
|
621
524
|
get playbackRate() {
|
|
622
|
-
|
|
525
|
+
var _a;
|
|
526
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.playbackRate) ?? 1;
|
|
623
527
|
}
|
|
624
528
|
set volume(value) {
|
|
625
529
|
if (this._mediaPlayerRef.value) {
|
|
@@ -627,7 +531,8 @@ let PlayerEmbed = class extends LitElement {
|
|
|
627
531
|
}
|
|
628
532
|
}
|
|
629
533
|
get volume() {
|
|
630
|
-
|
|
534
|
+
var _a;
|
|
535
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.volume) ?? 1;
|
|
631
536
|
}
|
|
632
537
|
set muted(value) {
|
|
633
538
|
if (this._mediaPlayerRef.value) {
|
|
@@ -635,35 +540,40 @@ let PlayerEmbed = class extends LitElement {
|
|
|
635
540
|
}
|
|
636
541
|
}
|
|
637
542
|
get muted() {
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
get scene() {
|
|
641
|
-
return this._mediaPlayerRef.value?.scene ?? null;
|
|
642
|
-
}
|
|
643
|
-
get scenes() {
|
|
644
|
-
return this._mediaPlayerRef.value?.scenes ?? [];
|
|
645
|
-
}
|
|
646
|
-
get sceneConfig() {
|
|
647
|
-
return this._mediaPlayerRef.value?.sceneConfig ?? null;
|
|
543
|
+
var _a;
|
|
544
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.muted) ?? false;
|
|
648
545
|
}
|
|
649
|
-
get
|
|
650
|
-
|
|
546
|
+
// get scene(): Scene | null {
|
|
547
|
+
// return this._mediaPlayerRef.value?.scene ?? null;
|
|
548
|
+
// }
|
|
549
|
+
// get scenes(): Scene[] {
|
|
550
|
+
// return this._mediaPlayerRef.value?.scenes ?? [];
|
|
551
|
+
// }
|
|
552
|
+
// get sceneConfig(): Scenes | null {
|
|
553
|
+
// return this._mediaPlayerRef.value?.sceneConfig ?? null;
|
|
554
|
+
// }
|
|
555
|
+
get mediaState() {
|
|
556
|
+
var _a;
|
|
557
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.mediaState;
|
|
651
558
|
}
|
|
652
559
|
get mediaPlayer() {
|
|
653
560
|
return this._mediaPlayerRef.value;
|
|
654
561
|
}
|
|
655
562
|
play() {
|
|
656
|
-
|
|
563
|
+
var _a;
|
|
564
|
+
(_a = this._mediaPlayerRef.value) == null ? void 0 : _a.play();
|
|
657
565
|
}
|
|
658
566
|
pause() {
|
|
659
|
-
|
|
567
|
+
var _a;
|
|
568
|
+
(_a = this._mediaPlayerRef.value) == null ? void 0 : _a.pause();
|
|
660
569
|
}
|
|
661
570
|
reset(time = 0, play = false) {
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
setScene(index) {
|
|
665
|
-
this._mediaPlayerRef.value?.setScene(index);
|
|
571
|
+
var _a;
|
|
572
|
+
(_a = this._mediaPlayerRef.value) == null ? void 0 : _a.reset(time, play);
|
|
666
573
|
}
|
|
574
|
+
// setScene(index: number) {
|
|
575
|
+
// this._mediaPlayerRef.value?.setScene(index);
|
|
576
|
+
// }
|
|
667
577
|
_renderStyles() {
|
|
668
578
|
if (!this.aspectRatio) {
|
|
669
579
|
return html`
|
|
@@ -686,6 +596,11 @@ let PlayerEmbed = class extends LitElement {
|
|
|
686
596
|
}
|
|
687
597
|
return null;
|
|
688
598
|
}
|
|
599
|
+
willUpdate(changedProperties) {
|
|
600
|
+
if (changedProperties.has("vouchId") && this.vouchId !== changedProperties.get("vouchId")) {
|
|
601
|
+
this.reset(0, false);
|
|
602
|
+
}
|
|
603
|
+
}
|
|
689
604
|
render() {
|
|
690
605
|
return html`
|
|
691
606
|
${this._renderStyles()}
|
|
@@ -694,10 +609,9 @@ let PlayerEmbed = class extends LitElement {
|
|
|
694
609
|
${this.eventController.register()}
|
|
695
610
|
?autoplay=${this.autoplay}
|
|
696
611
|
?loading=${this.fetching}
|
|
697
|
-
.data=${this.vouch}
|
|
698
|
-
.template=${this.template}
|
|
699
612
|
aspectRatio=${ifDefined(this.aspectRatio)}
|
|
700
613
|
preload=${ifDefined(this.preload)}
|
|
614
|
+
language=${ifDefined(this.language)}
|
|
701
615
|
.controls=${this.controls}
|
|
702
616
|
></vmp-media-player>
|
|
703
617
|
`;
|
|
@@ -746,6 +660,12 @@ __decorateClass$3([
|
|
|
746
660
|
__decorateClass$3([
|
|
747
661
|
property({ type: Number })
|
|
748
662
|
], PlayerEmbed.prototype, "aspectRatio", 2);
|
|
663
|
+
__decorateClass$3([
|
|
664
|
+
property({ type: String })
|
|
665
|
+
], PlayerEmbed.prototype, "language", 2);
|
|
666
|
+
__decorateClass$3([
|
|
667
|
+
property({ type: String })
|
|
668
|
+
], PlayerEmbed.prototype, "senderId", 2);
|
|
749
669
|
__decorateClass$3([
|
|
750
670
|
state()
|
|
751
671
|
], PlayerEmbed.prototype, "vouch", 2);
|
|
@@ -755,7 +675,6 @@ __decorateClass$3([
|
|
|
755
675
|
PlayerEmbed = __decorateClass$3([
|
|
756
676
|
customElement("vouch-embed-player")
|
|
757
677
|
], PlayerEmbed);
|
|
758
|
-
|
|
759
678
|
var __defProp$2 = Object.defineProperty;
|
|
760
679
|
var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
|
|
761
680
|
var __decorateClass$2 = (decorators, target, key, kind) => {
|
|
@@ -763,8 +682,7 @@ var __decorateClass$2 = (decorators, target, key, kind) => {
|
|
|
763
682
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
764
683
|
if (decorator = decorators[i])
|
|
765
684
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
766
|
-
if (kind && result)
|
|
767
|
-
__defProp$2(target, key, result);
|
|
685
|
+
if (kind && result) __defProp$2(target, key, result);
|
|
768
686
|
return result;
|
|
769
687
|
};
|
|
770
688
|
let DialogOverlay = class extends LitElement {
|
|
@@ -884,7 +802,6 @@ __decorateClass$2([
|
|
|
884
802
|
DialogOverlay = __decorateClass$2([
|
|
885
803
|
customElement("vouch-embed-dialog-overlay")
|
|
886
804
|
], DialogOverlay);
|
|
887
|
-
|
|
888
805
|
var __defProp$1 = Object.defineProperty;
|
|
889
806
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
890
807
|
var __decorateClass$1 = (decorators, target, key, kind) => {
|
|
@@ -892,8 +809,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
|
|
|
892
809
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
893
810
|
if (decorator = decorators[i])
|
|
894
811
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
895
|
-
if (kind && result)
|
|
896
|
-
__defProp$1(target, key, result);
|
|
812
|
+
if (kind && result) __defProp$1(target, key, result);
|
|
897
813
|
return result;
|
|
898
814
|
};
|
|
899
815
|
let DialogPortal = class extends LitElement {
|
|
@@ -909,22 +825,23 @@ let DialogPortal = class extends LitElement {
|
|
|
909
825
|
this._mediaPlayerRef = createRef();
|
|
910
826
|
this.open = false;
|
|
911
827
|
this._handleToggle = ({ detail }) => {
|
|
828
|
+
var _a, _b, _c;
|
|
912
829
|
if (this.id === detail) {
|
|
913
830
|
this.open = !this.open;
|
|
914
831
|
if (this.open) {
|
|
915
|
-
if (!this.disableAutoplay && this._mediaPlayerRef
|
|
832
|
+
if (!this.disableAutoplay && ((_a = this._mediaPlayerRef) == null ? void 0 : _a.value)) {
|
|
916
833
|
this._mediaPlayerRef.value.muted = false;
|
|
917
834
|
this._mediaPlayerRef.value.play();
|
|
918
835
|
}
|
|
919
836
|
} else {
|
|
920
|
-
this._mediaPlayerRef
|
|
837
|
+
(_c = (_b = this._mediaPlayerRef) == null ? void 0 : _b.value) == null ? void 0 : _c.pause();
|
|
921
838
|
}
|
|
922
839
|
}
|
|
923
840
|
};
|
|
924
|
-
// We could do the same thing on close and check for the correct ID but it doesn't really matter
|
|
925
841
|
this._handleClose = () => {
|
|
842
|
+
var _a, _b;
|
|
926
843
|
this.open = false;
|
|
927
|
-
this._mediaPlayerRef
|
|
844
|
+
(_b = (_a = this._mediaPlayerRef) == null ? void 0 : _a.value) == null ? void 0 : _b.pause();
|
|
928
845
|
};
|
|
929
846
|
this._handleDocumentKeyUp = (e) => {
|
|
930
847
|
if (e.key === "Escape") {
|
|
@@ -1015,7 +932,6 @@ __decorateClass$1([
|
|
|
1015
932
|
DialogPortal = __decorateClass$1([
|
|
1016
933
|
customElement("vouch-embed-dialog-portal")
|
|
1017
934
|
], DialogPortal);
|
|
1018
|
-
|
|
1019
935
|
var __defProp = Object.defineProperty;
|
|
1020
936
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
1021
937
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -1023,8 +939,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
1023
939
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
1024
940
|
if (decorator = decorators[i])
|
|
1025
941
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
1026
|
-
if (kind && result)
|
|
1027
|
-
__defProp(target, key, result);
|
|
942
|
+
if (kind && result) __defProp(target, key, result);
|
|
1028
943
|
return result;
|
|
1029
944
|
};
|
|
1030
945
|
let DialogEmbed = class extends LitElement {
|
|
@@ -1121,6 +1036,8 @@ __decorateClass([
|
|
|
1121
1036
|
DialogEmbed = __decorateClass([
|
|
1122
1037
|
customElement("vouch-embed-dialog")
|
|
1123
1038
|
], DialogEmbed);
|
|
1124
|
-
|
|
1125
|
-
|
|
1039
|
+
export {
|
|
1040
|
+
DialogEmbed,
|
|
1041
|
+
PlayerEmbed
|
|
1042
|
+
};
|
|
1126
1043
|
//# sourceMappingURL=embeds.js.map
|