@vouchfor/embeds 0.0.0-experiment.0f953a2 → 0.0.0-experiment.108d575
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/es/embeds.js +185 -156
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/src/components/PlayerEmbed/index.d.ts +4 -1
- package/dist/iife/dialog-embed/embed.iife.js +200 -193
- package/dist/iife/dialog-embed/embed.iife.js.map +1 -1
- package/dist/iife/embeds.iife.js +189 -182
- package/dist/iife/embeds.iife.js.map +1 -1
- package/dist/iife/player-embed/embed.iife.js +192 -185
- package/dist/iife/player-embed/embed.iife.js.map +1 -1
- package/package.json +12 -11
- package/src/components/PlayerEmbed/MultiEmbed.stories.ts +135 -0
- package/src/components/PlayerEmbed/PlayerEmbed.stories.ts +15 -1
- package/src/components/PlayerEmbed/index.ts +16 -1
- package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts +1 -1
- package/src/components/PlayerEmbed/tests/data.ts +23 -23
package/dist/es/embeds.js
CHANGED
@@ -1,25 +1,23 @@
|
|
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
|
-
|
13
|
-
function forwardEvent(type, fromElement, toElement) {
|
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";
|
12
|
+
function forwardEvent(type2, fromElement, toElement) {
|
14
13
|
function forwarder(event) {
|
15
14
|
toElement.dispatchEvent(new CustomEvent(event.type, event));
|
16
15
|
}
|
17
|
-
fromElement.addEventListener(
|
16
|
+
fromElement.addEventListener(type2, forwarder);
|
18
17
|
return () => {
|
19
|
-
fromElement.removeEventListener(
|
18
|
+
fromElement.removeEventListener(type2, 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,9 +195,8 @@ class FetcherController {
|
|
196
195
|
return this._fetching;
|
197
196
|
}
|
198
197
|
}
|
199
|
-
|
200
198
|
const name = "@vouchfor/embeds";
|
201
|
-
const version = "0.0.0-experiment.
|
199
|
+
const version = "0.0.0-experiment.108d575";
|
202
200
|
const license = "MIT";
|
203
201
|
const author = "Aaron Williams";
|
204
202
|
const main = "dist/es/embeds.js";
|
@@ -206,104 +204,104 @@ const module = "dist/es/embeds.js";
|
|
206
204
|
const type = "module";
|
207
205
|
const types = "dist/es/src/index.d.ts";
|
208
206
|
const exports = {
|
209
|
-
|
207
|
+
".": "./dist/es/embeds.js"
|
210
208
|
};
|
211
209
|
const files = [
|
212
|
-
|
213
|
-
|
210
|
+
"dist",
|
211
|
+
"src"
|
214
212
|
];
|
215
213
|
const publishConfig = {
|
216
|
-
|
217
|
-
|
214
|
+
tag: "experiment",
|
215
|
+
access: "public"
|
218
216
|
};
|
219
217
|
const engines = {
|
220
|
-
|
218
|
+
node: ">=18.18.0"
|
221
219
|
};
|
222
220
|
const scripts = {
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
221
|
+
build: "rm -rf dist && tsc && yarn build:self",
|
222
|
+
"build:deps": "yarn --cwd ../media-player build",
|
223
|
+
"build:self": "vite build --mode iife && vite build --mode es && node scripts/build.cjs",
|
224
|
+
"build:package": "yarn build",
|
225
|
+
"build:storybook": "yarn prebuild && storybook build",
|
226
|
+
"generate:manifest": "wca src --outFile custom-elements.json",
|
227
|
+
lint: "eslint . --quiet",
|
228
|
+
"lint:fix": "eslint . --fix",
|
229
|
+
"lint:staged": "lint-staged",
|
230
|
+
prepublishOnly: "yarn build",
|
231
|
+
size: "size-limit",
|
232
|
+
storybook: "yarn prebuild && storybook dev -p 6007",
|
233
|
+
prebuild: "yarn build:deps && yarn generate:manifest",
|
234
|
+
test: "rm -rf test/lib && yarn prebuild && vite build --mode test && web-test-runner",
|
235
|
+
"test:ci": "yarn test --config web-test-runner.ci.config.js",
|
236
|
+
"test:watch": "yarn test --watch"
|
238
237
|
};
|
239
238
|
const dependencies = {
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
239
|
+
"@a11y/focus-trap": "^1.0.5",
|
240
|
+
"@lit/task": "^1.0.0",
|
241
|
+
"@vouchfor/canvas-video": "0.0.0-experiment.108d575",
|
242
|
+
"@vouchfor/media-player": "0.0.0-experiment.108d575",
|
243
|
+
uuid: "^9.0.1"
|
245
244
|
};
|
246
245
|
const peerDependencies = {
|
247
|
-
|
246
|
+
lit: "^3.1.2"
|
248
247
|
};
|
249
248
|
const devDependencies = {
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
249
|
+
"@esm-bundle/chai": "^4.3.4-fix.0",
|
250
|
+
"@open-wc/testing": "^4.0.0",
|
251
|
+
"@storybook/addon-essentials": "^8.0.4",
|
252
|
+
"@storybook/addon-links": "^8.0.4",
|
253
|
+
"@storybook/blocks": "^8.0.4",
|
254
|
+
"@storybook/web-components": "^8.0.4",
|
255
|
+
"@storybook/web-components-vite": "^8.0.4",
|
256
|
+
"@svgr/core": "^8.1.0",
|
257
|
+
"@types/flat": "^5.0.5",
|
258
|
+
"@types/mocha": "^10.0.6",
|
259
|
+
"@vouchfor/eslint-config": "^1.0.1",
|
260
|
+
"@vouchfor/prettier-config": "^1.0.1",
|
261
|
+
"@vouchfor/video-utils": "0.0.0-experiment.108d575",
|
262
|
+
"@web/dev-server-esbuild": "^1.0.2",
|
263
|
+
"@web/test-runner": "^0.18.1",
|
264
|
+
"@web/test-runner-browserstack": "^0.7.1",
|
265
|
+
"@web/test-runner-mocha": "^0.9.0",
|
266
|
+
"@web/test-runner-playwright": "^0.11.0",
|
267
|
+
glob: "^10.3.10",
|
268
|
+
"lint-staged": "^15.2.2",
|
269
|
+
lit: "^3.1.2",
|
270
|
+
lodash: "^4.17.21",
|
271
|
+
react: "^18.2.0",
|
272
|
+
"react-dom": "^18.2.0",
|
273
|
+
"rollup-plugin-tla": "^0.0.2",
|
274
|
+
sinon: "^17.0.1",
|
275
|
+
storybook: "^8.0.4",
|
276
|
+
svgson: "^5.3.1",
|
277
|
+
typescript: "^5.4.3",
|
278
|
+
vite: "^5.2.2",
|
279
|
+
"vite-plugin-commonjs": "^0.10.1",
|
280
|
+
"vite-plugin-dts": "^3.7.3",
|
281
|
+
"web-component-analyzer": "^2.0.0"
|
283
282
|
};
|
284
283
|
const packageJson = {
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
},
|
302
|
-
|
303
|
-
|
304
|
-
|
284
|
+
name,
|
285
|
+
version,
|
286
|
+
license,
|
287
|
+
author,
|
288
|
+
main,
|
289
|
+
module,
|
290
|
+
type,
|
291
|
+
types,
|
292
|
+
exports,
|
293
|
+
files,
|
294
|
+
publishConfig,
|
295
|
+
engines,
|
296
|
+
scripts,
|
297
|
+
"lint-staged": {
|
298
|
+
"**/*.{ts,tsx,js}": "eslint --fix --quiet",
|
299
|
+
"**/*.{md,json,yml}": "prettier --write"
|
300
|
+
},
|
301
|
+
dependencies,
|
302
|
+
peerDependencies,
|
303
|
+
devDependencies
|
305
304
|
};
|
306
|
-
|
307
305
|
function createVisitor(env) {
|
308
306
|
const { publicApiUrl } = getEnvUrls(env);
|
309
307
|
const visitorId = v4();
|
@@ -311,6 +309,7 @@ function createVisitor(env) {
|
|
311
309
|
return visitorId;
|
312
310
|
}
|
313
311
|
function getUids(env) {
|
312
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
314
313
|
if (typeof window === "undefined") {
|
315
314
|
return {
|
316
315
|
client: null,
|
@@ -318,21 +317,21 @@ function getUids(env) {
|
|
318
317
|
request: v4()
|
319
318
|
};
|
320
319
|
}
|
321
|
-
let visitorId = window.localStorage
|
322
|
-
let clientId = window.localStorage
|
323
|
-
let tabId = window.sessionStorage
|
320
|
+
let visitorId = (_b = (_a = window.localStorage) == null ? void 0 : _a.getItem) == null ? void 0 : _b.call(_a, "vouch-uid-visitor");
|
321
|
+
let clientId = (_d = (_c = window.localStorage) == null ? void 0 : _c.getItem) == null ? void 0 : _d.call(_c, "vouch-uid-client");
|
322
|
+
let tabId = (_f = (_e = window.sessionStorage) == null ? void 0 : _e.getItem) == null ? void 0 : _f.call(_e, "vouch-uid-tab");
|
324
323
|
const requestId = v4();
|
325
324
|
if (!visitorId) {
|
326
325
|
visitorId = createVisitor(env);
|
327
|
-
window.localStorage
|
326
|
+
(_h = (_g = window.localStorage) == null ? void 0 : _g.setItem) == null ? void 0 : _h.call(_g, "vouch-uid-visitor", visitorId);
|
328
327
|
}
|
329
328
|
if (!clientId) {
|
330
329
|
clientId = v4();
|
331
|
-
window.localStorage
|
330
|
+
(_j = (_i = window.localStorage) == null ? void 0 : _i.setItem) == null ? void 0 : _j.call(_i, "vouch-uid-client", clientId);
|
332
331
|
}
|
333
332
|
if (!tabId) {
|
334
333
|
tabId = v4();
|
335
|
-
window.sessionStorage
|
334
|
+
(_l = (_k = window.sessionStorage) == null ? void 0 : _k.setItem) == null ? void 0 : _l.call(_k, "vouch-uid-tab", tabId);
|
336
335
|
}
|
337
336
|
return {
|
338
337
|
client: clientId,
|
@@ -345,10 +344,11 @@ function findVouchId(payload, vouch) {
|
|
345
344
|
if (payload && "vouchId" in payload) {
|
346
345
|
return payload.vouchId;
|
347
346
|
}
|
348
|
-
return vouch
|
347
|
+
return (vouch == null ? void 0 : vouch.id) ?? null;
|
349
348
|
}
|
350
349
|
function getReportingMetadata(source = "embedded_player") {
|
351
|
-
|
350
|
+
var _a, _b;
|
351
|
+
const [country, region] = ((_b = (_a = Intl.DateTimeFormat().resolvedOptions().timeZone) == null ? void 0 : _a.split) == null ? void 0 : _b.call(_a, "/")) ?? [];
|
352
352
|
const utmParams = {};
|
353
353
|
[...new URLSearchParams(location.search).entries()].forEach(([key, value]) => {
|
354
354
|
if (/utm/.test(key)) {
|
@@ -371,7 +371,6 @@ function getReportingMetadata(source = "embedded_player") {
|
|
371
371
|
...utmParams
|
372
372
|
};
|
373
373
|
}
|
374
|
-
|
375
374
|
const MINIMUM_SEND_THRESHOLD = 1;
|
376
375
|
class TrackingController {
|
377
376
|
constructor(host) {
|
@@ -459,10 +458,11 @@ class TrackingController {
|
|
459
458
|
}
|
460
459
|
};
|
461
460
|
this._handleVideoTimeUpdate = ({ detail: { id, key, node } }) => {
|
461
|
+
var _a, _b;
|
462
462
|
if (
|
463
463
|
// We only want to count any time that the video is actually playing
|
464
464
|
!this.host.paused && // Only update the latest time if this event fires for the currently active video
|
465
|
-
id === this.host.scene
|
465
|
+
id === ((_b = (_a = this.host.scene) == null ? void 0 : _a.video) == null ? void 0 : _b.id)
|
466
466
|
) {
|
467
467
|
this._currentlyPlayingVideo = { id, key, node };
|
468
468
|
this._streamLatestTime[key] = node.currentTime;
|
@@ -500,19 +500,21 @@ class TrackingController {
|
|
500
500
|
}
|
501
501
|
hostConnected() {
|
502
502
|
requestAnimationFrame(() => {
|
503
|
+
var _a, _b, _c, _d;
|
503
504
|
if ("onvisibilitychange" in document) {
|
504
505
|
document.addEventListener("visibilitychange", this._handleVisibilityChange);
|
505
506
|
} else {
|
506
507
|
window.addEventListener("pagehide", this._handlePageHide);
|
507
508
|
}
|
508
509
|
this.host.addEventListener("vouch:loaded", this._handleVouchLoaded);
|
509
|
-
this.host.mediaPlayer
|
510
|
-
this.host.mediaPlayer
|
511
|
-
this.host.mediaPlayer
|
512
|
-
this.host.mediaPlayer
|
510
|
+
(_a = this.host.mediaPlayer) == null ? void 0 : _a.addEventListener("play", this._handlePlay);
|
511
|
+
(_b = this.host.mediaPlayer) == null ? void 0 : _b.addEventListener("video:play", this._handleVideoPlay);
|
512
|
+
(_c = this.host.mediaPlayer) == null ? void 0 : _c.addEventListener("video:pause", this._handleVideoPause);
|
513
|
+
(_d = this.host.mediaPlayer) == null ? void 0 : _d.addEventListener("video:timeupdate", this._handleVideoTimeUpdate);
|
513
514
|
});
|
514
515
|
}
|
515
516
|
hostDisconnected() {
|
517
|
+
var _a, _b, _c, _d;
|
516
518
|
this._pageUnloading();
|
517
519
|
if ("onvisibilitychange" in document) {
|
518
520
|
document.removeEventListener("visibilitychange", this._handleVisibilityChange);
|
@@ -520,13 +522,12 @@ class TrackingController {
|
|
520
522
|
window.removeEventListener("pagehide", this._handlePageHide);
|
521
523
|
}
|
522
524
|
this.host.removeEventListener("vouch:loaded", this._handleVouchLoaded);
|
523
|
-
this.host.mediaPlayer
|
524
|
-
this.host.mediaPlayer
|
525
|
-
this.host.mediaPlayer
|
526
|
-
this.host.mediaPlayer
|
525
|
+
(_a = this.host.mediaPlayer) == null ? void 0 : _a.removeEventListener("play", this._handlePlay);
|
526
|
+
(_b = this.host.mediaPlayer) == null ? void 0 : _b.removeEventListener("video:play", this._handleVideoPlay);
|
527
|
+
(_c = this.host.mediaPlayer) == null ? void 0 : _c.removeEventListener("video:pause", this._handleVideoPause);
|
528
|
+
(_d = this.host.mediaPlayer) == null ? void 0 : _d.removeEventListener("video:timeupdate", this._handleVideoTimeUpdate);
|
527
529
|
}
|
528
530
|
}
|
529
|
-
|
530
531
|
var __defProp$3 = Object.defineProperty;
|
531
532
|
var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
|
532
533
|
var __decorateClass$3 = (decorators, target, key, kind) => {
|
@@ -559,10 +560,12 @@ let PlayerEmbed = class extends LitElement {
|
|
559
560
|
"playing",
|
560
561
|
"ratechange",
|
561
562
|
"scenechange",
|
563
|
+
"scenesupdate",
|
562
564
|
"seeking",
|
563
565
|
"seeked",
|
564
566
|
"timeupdate",
|
565
567
|
"volumechange",
|
568
|
+
"processing",
|
566
569
|
"waiting",
|
567
570
|
"video:loadeddata",
|
568
571
|
"video:seeking",
|
@@ -576,8 +579,6 @@ let PlayerEmbed = class extends LitElement {
|
|
576
579
|
"video:error"
|
577
580
|
]);
|
578
581
|
this._fetcherController = new FetcherController(this);
|
579
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
580
|
-
// @ts-ignore
|
581
582
|
this._trackingController = new TrackingController(this);
|
582
583
|
this._mediaPlayerRef = createRef();
|
583
584
|
}
|
@@ -585,25 +586,32 @@ let PlayerEmbed = class extends LitElement {
|
|
585
586
|
return this._fetcherController.fetching;
|
586
587
|
}
|
587
588
|
get waiting() {
|
588
|
-
|
589
|
+
var _a;
|
590
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.waiting;
|
589
591
|
}
|
590
592
|
get initialised() {
|
591
|
-
|
593
|
+
var _a;
|
594
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.initialised;
|
592
595
|
}
|
593
596
|
get seeking() {
|
594
|
-
|
597
|
+
var _a;
|
598
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.seeking;
|
595
599
|
}
|
596
600
|
get paused() {
|
597
|
-
|
601
|
+
var _a;
|
602
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.paused;
|
598
603
|
}
|
599
604
|
get captions() {
|
600
|
-
|
605
|
+
var _a;
|
606
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.captions;
|
601
607
|
}
|
602
608
|
get fullscreen() {
|
603
|
-
|
609
|
+
var _a;
|
610
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.fullscreen;
|
604
611
|
}
|
605
612
|
get duration() {
|
606
|
-
|
613
|
+
var _a;
|
614
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.duration;
|
607
615
|
}
|
608
616
|
set currentTime(value) {
|
609
617
|
if (this._mediaPlayerRef.value) {
|
@@ -611,7 +619,8 @@ let PlayerEmbed = class extends LitElement {
|
|
611
619
|
}
|
612
620
|
}
|
613
621
|
get currentTime() {
|
614
|
-
|
622
|
+
var _a;
|
623
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.currentTime) ?? 0;
|
615
624
|
}
|
616
625
|
set playbackRate(value) {
|
617
626
|
if (this._mediaPlayerRef.value) {
|
@@ -619,7 +628,8 @@ let PlayerEmbed = class extends LitElement {
|
|
619
628
|
}
|
620
629
|
}
|
621
630
|
get playbackRate() {
|
622
|
-
|
631
|
+
var _a;
|
632
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.playbackRate) ?? 1;
|
623
633
|
}
|
624
634
|
set volume(value) {
|
625
635
|
if (this._mediaPlayerRef.value) {
|
@@ -627,7 +637,8 @@ let PlayerEmbed = class extends LitElement {
|
|
627
637
|
}
|
628
638
|
}
|
629
639
|
get volume() {
|
630
|
-
|
640
|
+
var _a;
|
641
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.volume) ?? 1;
|
631
642
|
}
|
632
643
|
set muted(value) {
|
633
644
|
if (this._mediaPlayerRef.value) {
|
@@ -635,34 +646,43 @@ let PlayerEmbed = class extends LitElement {
|
|
635
646
|
}
|
636
647
|
}
|
637
648
|
get muted() {
|
638
|
-
|
649
|
+
var _a;
|
650
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.muted) ?? false;
|
639
651
|
}
|
640
652
|
get scene() {
|
641
|
-
|
653
|
+
var _a;
|
654
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.scene) ?? null;
|
642
655
|
}
|
643
656
|
get scenes() {
|
644
|
-
|
657
|
+
var _a;
|
658
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.scenes) ?? [];
|
645
659
|
}
|
646
660
|
get sceneConfig() {
|
647
|
-
|
661
|
+
var _a;
|
662
|
+
return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.sceneConfig) ?? null;
|
648
663
|
}
|
649
664
|
get videoState() {
|
650
|
-
|
665
|
+
var _a;
|
666
|
+
return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.videoState;
|
651
667
|
}
|
652
668
|
get mediaPlayer() {
|
653
669
|
return this._mediaPlayerRef.value;
|
654
670
|
}
|
655
671
|
play() {
|
656
|
-
|
672
|
+
var _a;
|
673
|
+
(_a = this._mediaPlayerRef.value) == null ? void 0 : _a.play();
|
657
674
|
}
|
658
675
|
pause() {
|
659
|
-
|
676
|
+
var _a;
|
677
|
+
(_a = this._mediaPlayerRef.value) == null ? void 0 : _a.pause();
|
660
678
|
}
|
661
679
|
reset(time = 0, play = false) {
|
662
|
-
|
680
|
+
var _a;
|
681
|
+
(_a = this._mediaPlayerRef.value) == null ? void 0 : _a.reset(time, play);
|
663
682
|
}
|
664
683
|
setScene(index) {
|
665
|
-
|
684
|
+
var _a;
|
685
|
+
(_a = this._mediaPlayerRef.value) == null ? void 0 : _a.setScene(index);
|
666
686
|
}
|
667
687
|
_renderStyles() {
|
668
688
|
if (!this.aspectRatio) {
|
@@ -686,6 +706,11 @@ let PlayerEmbed = class extends LitElement {
|
|
686
706
|
}
|
687
707
|
return null;
|
688
708
|
}
|
709
|
+
willUpdate(changedProperties) {
|
710
|
+
if (changedProperties.has("vouchId") && this.vouchId !== changedProperties.get("vouchId")) {
|
711
|
+
this.reset(0, false);
|
712
|
+
}
|
713
|
+
}
|
689
714
|
render() {
|
690
715
|
return html`
|
691
716
|
${this._renderStyles()}
|
@@ -698,6 +723,7 @@ let PlayerEmbed = class extends LitElement {
|
|
698
723
|
.template=${this.template}
|
699
724
|
aspectRatio=${ifDefined(this.aspectRatio)}
|
700
725
|
preload=${ifDefined(this.preload)}
|
726
|
+
language=${ifDefined(this.language)}
|
701
727
|
.controls=${this.controls}
|
702
728
|
></vmp-media-player>
|
703
729
|
`;
|
@@ -746,6 +772,9 @@ __decorateClass$3([
|
|
746
772
|
__decorateClass$3([
|
747
773
|
property({ type: Number })
|
748
774
|
], PlayerEmbed.prototype, "aspectRatio", 2);
|
775
|
+
__decorateClass$3([
|
776
|
+
property({ type: String })
|
777
|
+
], PlayerEmbed.prototype, "language", 2);
|
749
778
|
__decorateClass$3([
|
750
779
|
state()
|
751
780
|
], PlayerEmbed.prototype, "vouch", 2);
|
@@ -755,7 +784,6 @@ __decorateClass$3([
|
|
755
784
|
PlayerEmbed = __decorateClass$3([
|
756
785
|
customElement("vouch-embed-player")
|
757
786
|
], PlayerEmbed);
|
758
|
-
|
759
787
|
var __defProp$2 = Object.defineProperty;
|
760
788
|
var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
|
761
789
|
var __decorateClass$2 = (decorators, target, key, kind) => {
|
@@ -884,7 +912,6 @@ __decorateClass$2([
|
|
884
912
|
DialogOverlay = __decorateClass$2([
|
885
913
|
customElement("vouch-embed-dialog-overlay")
|
886
914
|
], DialogOverlay);
|
887
|
-
|
888
915
|
var __defProp$1 = Object.defineProperty;
|
889
916
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
890
917
|
var __decorateClass$1 = (decorators, target, key, kind) => {
|
@@ -909,22 +936,23 @@ let DialogPortal = class extends LitElement {
|
|
909
936
|
this._mediaPlayerRef = createRef();
|
910
937
|
this.open = false;
|
911
938
|
this._handleToggle = ({ detail }) => {
|
939
|
+
var _a, _b, _c;
|
912
940
|
if (this.id === detail) {
|
913
941
|
this.open = !this.open;
|
914
942
|
if (this.open) {
|
915
|
-
if (!this.disableAutoplay && this._mediaPlayerRef
|
943
|
+
if (!this.disableAutoplay && ((_a = this._mediaPlayerRef) == null ? void 0 : _a.value)) {
|
916
944
|
this._mediaPlayerRef.value.muted = false;
|
917
945
|
this._mediaPlayerRef.value.play();
|
918
946
|
}
|
919
947
|
} else {
|
920
|
-
this._mediaPlayerRef
|
948
|
+
(_c = (_b = this._mediaPlayerRef) == null ? void 0 : _b.value) == null ? void 0 : _c.pause();
|
921
949
|
}
|
922
950
|
}
|
923
951
|
};
|
924
|
-
// We could do the same thing on close and check for the correct ID but it doesn't really matter
|
925
952
|
this._handleClose = () => {
|
953
|
+
var _a, _b;
|
926
954
|
this.open = false;
|
927
|
-
this._mediaPlayerRef
|
955
|
+
(_b = (_a = this._mediaPlayerRef) == null ? void 0 : _a.value) == null ? void 0 : _b.pause();
|
928
956
|
};
|
929
957
|
this._handleDocumentKeyUp = (e) => {
|
930
958
|
if (e.key === "Escape") {
|
@@ -1015,7 +1043,6 @@ __decorateClass$1([
|
|
1015
1043
|
DialogPortal = __decorateClass$1([
|
1016
1044
|
customElement("vouch-embed-dialog-portal")
|
1017
1045
|
], DialogPortal);
|
1018
|
-
|
1019
1046
|
var __defProp = Object.defineProperty;
|
1020
1047
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
1021
1048
|
var __decorateClass = (decorators, target, key, kind) => {
|
@@ -1121,6 +1148,8 @@ __decorateClass([
|
|
1121
1148
|
DialogEmbed = __decorateClass([
|
1122
1149
|
customElement("vouch-embed-dialog")
|
1123
1150
|
], DialogEmbed);
|
1124
|
-
|
1125
|
-
|
1151
|
+
export {
|
1152
|
+
DialogEmbed,
|
1153
|
+
PlayerEmbed
|
1154
|
+
};
|
1126
1155
|
//# sourceMappingURL=embeds.js.map
|