@vouchfor/embeds 0.0.0-experiment.0f953a2 → 0.0.0-experiment.108d575
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 +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
|