@vouchfor/embeds 0.0.0-experiment.b565b72 → 0.0.0-experiment.b77073f

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,12 +1,15 @@
1
1
  {
2
2
  "name": "@vouchfor/embeds",
3
- "version": "0.0.0-experiment.b565b72",
3
+ "version": "0.0.0-experiment.b77073f",
4
4
  "license": "MIT",
5
5
  "author": "Aaron Williams",
6
- "main": "dist/embeds.js",
7
- "module": "dist/embeds.js",
6
+ "main": "dist/es/embeds.js",
7
+ "module": "dist/es/embeds.js",
8
8
  "type": "module",
9
- "types": "dist/src/index.d.ts",
9
+ "types": "dist/es/index.d.ts",
10
+ "exports": {
11
+ ".": "./dist/es/embeds.js"
12
+ },
10
13
  "files": ["dist", "src"],
11
14
  "publishConfig": {
12
15
  "tag": "experiment",
@@ -23,7 +26,7 @@
23
26
  "lint:staged": "lint-staged",
24
27
  "prepublishOnly": "yarn build",
25
28
  "size": "size-limit",
26
- "storybook": "yarn prebuild && storybook dev -p 6006",
29
+ "storybook": "yarn prebuild && storybook dev -p 6007",
27
30
  "prebuild": "yarn build:deps && yarn generate:manifest",
28
31
  "test": "true"
29
32
  },
@@ -32,10 +35,12 @@
32
35
  "**/*.{md,json,yml}": "prettier --write"
33
36
  },
34
37
  "dependencies": {
35
- "@vouchfor/media-player": "0.0.0-experiment.b565b72"
38
+ "@lit/task": "^1.0.0",
39
+ "@vouchfor/media-player": "0.0.0-experiment.b77073f",
40
+ "uuid": "^9.0.1"
36
41
  },
37
42
  "peerDependencies": {
38
- "lit": "^2.7.5"
43
+ "lit": "^3.0.2"
39
44
  },
40
45
  "devDependencies": {
41
46
  "@esm-bundle/chai": "^4.3.4-fix.0",
@@ -0,0 +1,66 @@
1
+ import { html } from 'lit';
2
+ import { ifDefined } from 'lit/directives/if-defined.js';
3
+
4
+ import type { EmbedProps } from './';
5
+ import type { Meta, StoryObj } from '@storybook/web-components';
6
+
7
+ import './';
8
+
9
+ type EmbedArgs = EmbedProps & {
10
+ showVouch?: boolean;
11
+ };
12
+
13
+ const _Embed = ({ vouchId, templateId, preload, autoplay, env, apiKey, controls, aspectRatio }: EmbedArgs) => {
14
+ return html`
15
+ <div style="height: 100vh">
16
+ <vouch-embed
17
+ env=${ifDefined(env)}
18
+ apiKey=${ifDefined(apiKey)}
19
+ vouchId=${ifDefined(vouchId)}
20
+ templateId=${ifDefined(templateId)}
21
+ .controls=${controls}
22
+ ?autoplay=${autoplay}
23
+ preload=${ifDefined(preload)}
24
+ aspectRatio=${ifDefined(aspectRatio)}
25
+ ></vouch-embed>
26
+ </div>
27
+ `;
28
+ };
29
+
30
+ // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
31
+ const meta = {
32
+ title: 'Embed',
33
+ tags: ['autodocs'],
34
+ render: (args) => _Embed(args),
35
+ component: 'vouch-embed'
36
+ } satisfies Meta<EmbedProps>;
37
+
38
+ type Story = StoryObj<EmbedArgs>;
39
+
40
+ const Embed: Story = {
41
+ args: {
42
+ env: 'dev',
43
+ apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
44
+ vouchId: '6JQEIPeStt',
45
+ templateId: '7d0113f7-3f9a-4bdd-97e3-07ee6eec5730',
46
+ aspectRatio: 0,
47
+ preload: 'none',
48
+ autoplay: false
49
+ },
50
+ argTypes: {
51
+ env: {
52
+ control: 'radio',
53
+ options: ['prod', 'staging', 'dev']
54
+ },
55
+ preload: {
56
+ control: 'radio',
57
+ options: ['auto', 'none']
58
+ }
59
+ },
60
+ parameters: {
61
+ layout: 'fullscreen'
62
+ }
63
+ };
64
+
65
+ export default meta;
66
+ export { Embed };
@@ -0,0 +1,47 @@
1
+ import { createRef, ref } from 'lit/directives/ref.js';
2
+
3
+ import type { Embed } from '..';
4
+ import type { ReactiveController, ReactiveControllerHost } from 'lit';
5
+ import type { Ref } from 'lit/directives/ref.js';
6
+
7
+ import { forwardEvent } from '~/utils/events';
8
+
9
+ type EmbedHost = ReactiveControllerHost & Embed;
10
+
11
+ class EventForwardController implements ReactiveController {
12
+ host: EmbedHost;
13
+
14
+ private _events: string[] = [];
15
+ private _cleanup: (() => void)[] = [];
16
+ private _forwardElementRef: Ref<HTMLElement> = createRef();
17
+
18
+ constructor(host: EmbedHost, events: string[]) {
19
+ this.host = host;
20
+ this._events = events;
21
+ host.addController(this);
22
+ }
23
+
24
+ register() {
25
+ return ref(this._forwardElementRef);
26
+ }
27
+
28
+ hostConnected() {
29
+ // Guaranteed to have the element ref in the RAF callback because of how the lit lifecycle works
30
+ requestAnimationFrame(() => {
31
+ this._events.forEach((event) => {
32
+ if (this._forwardElementRef.value) {
33
+ this._cleanup.push(forwardEvent(event, this._forwardElementRef.value, this.host));
34
+ }
35
+ });
36
+ });
37
+ }
38
+
39
+ hostDisconnected() {
40
+ this._cleanup.forEach((fn) => {
41
+ fn();
42
+ });
43
+ this._cleanup = [];
44
+ }
45
+ }
46
+
47
+ export { EventForwardController };
@@ -0,0 +1,91 @@
1
+ import { Task } from '@lit/task';
2
+
3
+ import type { Embed, EmbedProps } from '..';
4
+ import type { ReactiveControllerHost } from 'lit';
5
+ import type { Environment } from '~/utils/env';
6
+
7
+ import { getEnvUrls } from '~/utils/env';
8
+
9
+ type EmbedHost = ReactiveControllerHost & Embed;
10
+
11
+ type TaskDeps = [
12
+ EmbedProps['env'],
13
+ EmbedProps['apiKey'],
14
+ EmbedProps['data'],
15
+ EmbedProps['vouchId'],
16
+ EmbedProps['templateId']
17
+ ];
18
+
19
+ class FetcherController {
20
+ host: EmbedHost;
21
+
22
+ private _fetching = false;
23
+
24
+ set fetching(value) {
25
+ if (this._fetching !== value) {
26
+ this._fetching = value;
27
+ this.host.requestUpdate();
28
+ }
29
+ }
30
+ get fetching() {
31
+ return this._fetching;
32
+ }
33
+
34
+ private getVouch = (env: Environment, apiKey: string, vouchId: string) => {
35
+ const { embedApiUrl } = getEnvUrls(env);
36
+
37
+ return fetch(`${embedApiUrl}/vouches/${vouchId}`, {
38
+ method: 'GET',
39
+ headers: [['X-Api-Key', apiKey]]
40
+ }).then((response) => {
41
+ this.host.dispatchEvent(new CustomEvent('vouch:loaded', { detail: vouchId }));
42
+ return response.json();
43
+ });
44
+ };
45
+
46
+ private async getTemplate(env: Environment, apiKey: string, templateId: string) {
47
+ const { embedApiUrl } = getEnvUrls(env);
48
+
49
+ return fetch(`${embedApiUrl}/templates/${templateId}`, {
50
+ method: 'GET',
51
+ headers: [['X-Api-Key', apiKey]]
52
+ }).then((response) => response.json());
53
+ }
54
+
55
+ constructor(host: EmbedHost) {
56
+ this.host = host;
57
+ new Task<TaskDeps, void>(
58
+ this.host,
59
+ async ([env, apiKey, data, vouchId, templateId]: TaskDeps) => {
60
+ try {
61
+ host.vouch = undefined;
62
+ host.template = undefined;
63
+
64
+ if (data) {
65
+ let template;
66
+ if (templateId) {
67
+ this.fetching = true;
68
+ template = await this.getTemplate(env, apiKey, templateId);
69
+ }
70
+ host.vouch = data;
71
+ host.template = template ?? data?.settings?.template?.instance;
72
+ } else if (vouchId) {
73
+ this.fetching = true;
74
+
75
+ const [vouch, template] = await Promise.all([
76
+ this.getVouch(env, apiKey, vouchId),
77
+ templateId ? this.getTemplate(env, apiKey, templateId) : null
78
+ ]);
79
+ host.vouch = vouch;
80
+ host.template = template ?? vouch?.settings?.template?.instance;
81
+ }
82
+ } finally {
83
+ this.fetching = false;
84
+ }
85
+ },
86
+ () => [host.env, host.apiKey, host.data, host.vouchId, host.templateId]
87
+ );
88
+ }
89
+ }
90
+
91
+ export { FetcherController };
@@ -0,0 +1,261 @@
1
+ import { v4 as uuidv4 } from 'uuid';
2
+
3
+ import type { Embed } from '..';
4
+ import type { VideoEventDetail } from '@vouchfor/media-player';
5
+ import type { ReactiveController, ReactiveControllerHost } from 'lit';
6
+
7
+ import { getEnvUrls } from '~/utils/env';
8
+
9
+ const STREAMED_THROTTLE = 2000;
10
+
11
+ type EmbedHost = ReactiveControllerHost & Embed;
12
+
13
+ type TrackingEvent = 'VOUCH_LOADED' | 'VOUCH_RESPONSE_VIEWED' | 'VIDEO_PLAYED' | 'VIDEO_STREAMED';
14
+ type TrackingPayload = {
15
+ vouchId: string;
16
+ answerId?: string;
17
+ streamStart?: number;
18
+ streamEnd?: number;
19
+ };
20
+
21
+ type TimeMap = {
22
+ [key: string]: number;
23
+ };
24
+
25
+ type BooleanMap = {
26
+ [key: string]: boolean;
27
+ };
28
+
29
+ class TrackingController implements ReactiveController {
30
+ host: EmbedHost;
31
+
32
+ private _tabId: string | undefined = undefined;
33
+ private _clientId: string | undefined = undefined;
34
+ private _visitorId: string | undefined = undefined;
35
+
36
+ private _hasPlayed = false;
37
+ private _hasLoaded: BooleanMap = {};
38
+ private _answersViewed: BooleanMap = {};
39
+ private _streamedTime: TimeMap = {};
40
+ private _streamedPrevTimestamp: TimeMap = {};
41
+
42
+ constructor(host: EmbedHost) {
43
+ this.host = host;
44
+ host.addController(this);
45
+ }
46
+
47
+ private _findVouchId() {
48
+ if (this.host.data) {
49
+ if ('uuid' in this.host.data) {
50
+ return this.host.data.uuid;
51
+ }
52
+ return this.host.data.id;
53
+ }
54
+ }
55
+
56
+ private _createVisitor = (visitorId: string) => {
57
+ const { publicApiUrl } = getEnvUrls(this.host.env);
58
+ window.localStorage?.setItem?.('vouch-uid-visitor', visitorId);
59
+ navigator.sendBeacon(`${publicApiUrl}/api/visitor`, JSON.stringify({ visitorId }));
60
+ return visitorId;
61
+ };
62
+
63
+ private _getUids() {
64
+ if (typeof window === 'undefined') {
65
+ return {
66
+ client: null,
67
+ tab: null,
68
+ request: uuidv4()
69
+ };
70
+ }
71
+
72
+ // Persisted for a user for the same device + browser, so we can e.g. search for all logs related to that browser
73
+ const visitorId =
74
+ this._visitorId || window.localStorage?.getItem?.('vouch-uid-visitor') || this._createVisitor(uuidv4());
75
+ // Persisted for a user for the same device + browser, so we can e.g. search for all logs related to that browser
76
+ const clientId = this._clientId || window.localStorage?.getItem?.('vouch-uid-client') || uuidv4();
77
+ // Persisted in session storage, so we can search for everything the user has done in a specific tab
78
+ const tabId = this._tabId || window.sessionStorage?.getItem?.('vouch-uid-tab') || uuidv4();
79
+ // Not persisted, allows us to search for any logs related to a single FE request
80
+ // E.g. BE should pass this request ID through all other services to be able to group logs
81
+ const requestId = uuidv4();
82
+
83
+ // Cache and persist uids
84
+ if (visitorId !== this._visitorId) {
85
+ this._visitorId = visitorId;
86
+ window.localStorage?.setItem?.('vouch-uid-visitor', visitorId);
87
+ }
88
+
89
+ if (clientId !== this._clientId) {
90
+ this._clientId = clientId;
91
+ window.localStorage?.setItem?.('vouch-uid-client', clientId);
92
+ }
93
+
94
+ if (tabId !== this._tabId) {
95
+ this._tabId = tabId;
96
+ window.sessionStorage?.setItem?.('vouch-uid-tab', tabId);
97
+ }
98
+
99
+ return {
100
+ client: clientId,
101
+ tab: tabId,
102
+ request: requestId,
103
+ visitor: visitorId
104
+ };
105
+ }
106
+
107
+ private _getReportingMetadata = () => {
108
+ const [country, region] = Intl.DateTimeFormat().resolvedOptions().timeZone?.split?.('/') ?? [];
109
+
110
+ const utmParams: any = {};
111
+ [...new URLSearchParams(location.search).entries()].forEach(([key, value]) => {
112
+ if (/utm/.test(key)) {
113
+ const param = key.toLowerCase().replace(/[-_][a-z0-9]/g, (group) => group.slice(-1).toUpperCase());
114
+ utmParams[param] = value;
115
+ }
116
+ });
117
+
118
+ return {
119
+ source: this.host.trackingSource,
120
+ time: new Date(),
121
+ region,
122
+ country,
123
+ screenHeight: window.screen.height,
124
+ screenWidth: window.screen.width,
125
+ referrer: document.referrer,
126
+ currentUrl: location.href,
127
+ ...utmParams
128
+ };
129
+ };
130
+
131
+ private _sendTrackingEvent = (event: TrackingEvent, payload: TrackingPayload) => {
132
+ const { publicApiUrl } = getEnvUrls(this.host.env);
133
+ const { client, tab, request, visitor } = this._getUids();
134
+
135
+ // Don't send tracking if we don't have a source
136
+ navigator.sendBeacon(
137
+ `${publicApiUrl}/api/events`,
138
+ JSON.stringify({
139
+ event,
140
+ payload,
141
+ context: {
142
+ 'x-uid-client': client,
143
+ 'x-uid-tab': tab,
144
+ 'x-uid-request': request,
145
+ 'x-uid-visitor': visitor,
146
+ 'x-reporting-metadata': this._getReportingMetadata()
147
+ }
148
+ })
149
+ );
150
+ };
151
+
152
+ private _handleVouchLoaded = ({ detail: vouchId }: CustomEvent<string>) => {
153
+ if (!vouchId) {
154
+ return;
155
+ }
156
+
157
+ // Only send loaded event once per session
158
+ if (!this._hasLoaded[vouchId]) {
159
+ this._sendTrackingEvent('VOUCH_LOADED', {
160
+ vouchId
161
+ });
162
+ this._hasLoaded[vouchId] = true;
163
+ }
164
+ };
165
+
166
+ private _handlePlay = () => {
167
+ const vouchId = this._findVouchId();
168
+
169
+ if (!vouchId) {
170
+ return;
171
+ }
172
+
173
+ // Only send the video played event once per session
174
+ if (!this._hasPlayed) {
175
+ this._sendTrackingEvent('VIDEO_PLAYED', {
176
+ vouchId,
177
+ streamStart: this.host.currentTime
178
+ });
179
+ this._hasPlayed = true;
180
+ }
181
+ };
182
+
183
+ private _handleVideoPlay = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
184
+ const vouchId = this._findVouchId();
185
+ if (!vouchId) {
186
+ return;
187
+ }
188
+ // Only increment play count once per session
189
+ if (!this._answersViewed[id]) {
190
+ this._sendTrackingEvent('VOUCH_RESPONSE_VIEWED', {
191
+ vouchId,
192
+ answerId: id
193
+ });
194
+ this._answersViewed[id] = true;
195
+ }
196
+ this._streamedTime[id] = node.currentTime;
197
+ this._streamedPrevTimestamp[id] = Date.now();
198
+ };
199
+
200
+ private _handleVideoTimeUpdate = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
201
+ const vouchId = this._findVouchId();
202
+ if (!vouchId) {
203
+ return;
204
+ }
205
+ const currentTimestamp = Date.now();
206
+ if (
207
+ !this.host.paused &&
208
+ // Only fire the video seeked event when this video is the active one
209
+ id === this.host.scene?.video?.id &&
210
+ // Throttle the frequency that we send streamed events while playing
211
+ currentTimestamp - this._streamedPrevTimestamp[id] > STREAMED_THROTTLE
212
+ ) {
213
+ this._sendTrackingEvent('VIDEO_STREAMED', {
214
+ vouchId,
215
+ answerId: id,
216
+ streamStart: this._streamedTime[id],
217
+ streamEnd: node.currentTime
218
+ });
219
+ this._streamedTime[id] = node.currentTime;
220
+ this._streamedPrevTimestamp[id] = currentTimestamp;
221
+ }
222
+ };
223
+
224
+ private _handleVideoPause = ({ detail: { id, node } }: CustomEvent<VideoEventDetail>) => {
225
+ const vouchId = this._findVouchId();
226
+ if (!vouchId) {
227
+ return;
228
+ }
229
+ // Send a video streamed event any time the video pauses then reset the streamed state
230
+ // We do this to capture the last bit of time that the video was played between the previous
231
+ // stream event and the video being paused manually or stopping because it ended
232
+ this._sendTrackingEvent('VIDEO_STREAMED', {
233
+ vouchId,
234
+ answerId: id,
235
+ streamStart: this._streamedTime[id],
236
+ streamEnd: node.currentTime
237
+ });
238
+ delete this._streamedTime[id];
239
+ delete this._streamedPrevTimestamp[id];
240
+ };
241
+
242
+ hostConnected() {
243
+ requestAnimationFrame(() => {
244
+ this.host.addEventListener('vouch:loaded', this._handleVouchLoaded);
245
+ this.host.mediaPlayer?.addEventListener('play', this._handlePlay);
246
+ this.host.mediaPlayer?.addEventListener('video:play', this._handleVideoPlay);
247
+ this.host.mediaPlayer?.addEventListener('video:pause', this._handleVideoPause);
248
+ this.host.mediaPlayer?.addEventListener('video:timeupdate', this._handleVideoTimeUpdate);
249
+ });
250
+ }
251
+
252
+ hostDisconnected() {
253
+ this.host.removeEventListener('vouch:loaded', this._handleVouchLoaded);
254
+ this.host.mediaPlayer?.removeEventListener('play', this._handlePlay);
255
+ this.host.mediaPlayer?.removeEventListener('video:play', this._handleVideoPlay);
256
+ this.host.mediaPlayer?.removeEventListener('video:pause', this._handleVideoPause);
257
+ this.host.mediaPlayer?.removeEventListener('video:timeupdate', this._handleVideoTimeUpdate);
258
+ }
259
+ }
260
+
261
+ export { TrackingController };
@@ -0,0 +1,199 @@
1
+ import { html, LitElement } from 'lit';
2
+ import { customElement, property, state } from 'lit/decorators.js';
3
+ import { ifDefined } from 'lit/directives/if-defined.js';
4
+ import { createRef, ref } from 'lit/directives/ref.js';
5
+
6
+ import type { Scene, TemplateInstance } from '@vouchfor/canvas-video';
7
+ import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
8
+ import type { Ref } from 'lit/directives/ref.js';
9
+ import type { Environment } from '~/utils/env';
10
+
11
+ import { EventForwardController } from './controllers/event-forwarder';
12
+ import { FetcherController } from './controllers/fetcher';
13
+ import { TrackingController } from './controllers/tracking';
14
+
15
+ import '@vouchfor/media-player';
16
+
17
+ type EmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
18
+ env: Environment;
19
+ apiKey: string;
20
+ trackingSource?: string;
21
+ vouchId?: string;
22
+ templateId?: string;
23
+ };
24
+
25
+ @customElement('vouch-embed')
26
+ class Embed extends LitElement {
27
+ private _mediaPlayerRef: Ref<MediaPlayer> = createRef();
28
+
29
+ @property({ type: Object, attribute: 'data' }) data: EmbedProps['data'];
30
+ @property({ type: String }) vouchId: EmbedProps['vouchId'];
31
+ @property({ type: String }) templateId: EmbedProps['templateId'];
32
+
33
+ @property({ type: String }) env: EmbedProps['env'] = 'prod';
34
+ @property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
35
+ @property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'embed';
36
+
37
+ @property({ type: Array }) controls: EmbedProps['controls'];
38
+ @property({ type: String }) preload: EmbedProps['preload'] = 'auto';
39
+ @property({ type: Boolean }) autoplay: EmbedProps['autoplay'] = false;
40
+ @property({ type: Number }) aspectRatio: EmbedProps['aspectRatio'] = 0;
41
+
42
+ private eventController = new EventForwardController(this, [
43
+ 'durationchange',
44
+ 'ended',
45
+ 'error',
46
+ 'loadeddata',
47
+ 'pause',
48
+ 'stalled',
49
+ 'play',
50
+ 'playing',
51
+ 'ratechange',
52
+ 'scenechange',
53
+ 'seeking',
54
+ 'seeked',
55
+ 'timeupdate',
56
+ 'volumechange',
57
+ 'waiting',
58
+
59
+ 'video:loadeddata',
60
+ 'video:seeked',
61
+ 'video:play',
62
+ 'video:playing',
63
+ 'video:pause',
64
+ 'video:stalled',
65
+ 'video:timeupdate',
66
+ 'video:ended',
67
+ 'video:error'
68
+ ]);
69
+ private _fetcherController = new FetcherController(this);
70
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
71
+ // @ts-ignore
72
+ private _trackingController = new TrackingController(this);
73
+
74
+ @state() vouch: EmbedProps['data'];
75
+ @state() template: TemplateInstance | undefined;
76
+
77
+ get fetching() {
78
+ return this._fetcherController.fetching;
79
+ }
80
+
81
+ get waiting() {
82
+ return this._mediaPlayerRef.value?.waiting;
83
+ }
84
+
85
+ get seeking() {
86
+ return this._mediaPlayerRef.value?.seeking;
87
+ }
88
+
89
+ get paused() {
90
+ return this._mediaPlayerRef.value?.paused;
91
+ }
92
+
93
+ get captions() {
94
+ return this._mediaPlayerRef.value?.captions;
95
+ }
96
+
97
+ get fullscreen() {
98
+ return this._mediaPlayerRef.value?.fullscreen;
99
+ }
100
+
101
+ get duration() {
102
+ return this._mediaPlayerRef.value?.duration;
103
+ }
104
+
105
+ set currentTime(value: number) {
106
+ if (this._mediaPlayerRef.value) {
107
+ this._mediaPlayerRef.value.currentTime = value;
108
+ }
109
+ }
110
+ get currentTime() {
111
+ return this._mediaPlayerRef.value?.currentTime ?? 0;
112
+ }
113
+
114
+ set playbackRate(value: number) {
115
+ if (this._mediaPlayerRef.value) {
116
+ this._mediaPlayerRef.value.playbackRate = value;
117
+ }
118
+ }
119
+ get playbackRate() {
120
+ return this._mediaPlayerRef.value?.playbackRate ?? 1;
121
+ }
122
+
123
+ set volume(value: number) {
124
+ if (this._mediaPlayerRef.value) {
125
+ this._mediaPlayerRef.value.volume = value;
126
+ }
127
+ }
128
+ get volume() {
129
+ return this._mediaPlayerRef.value?.volume ?? 1;
130
+ }
131
+
132
+ set muted(value: boolean) {
133
+ if (this._mediaPlayerRef.value) {
134
+ this._mediaPlayerRef.value.muted = value;
135
+ }
136
+ }
137
+ get muted() {
138
+ return this._mediaPlayerRef.value?.muted ?? false;
139
+ }
140
+
141
+ get scene(): Scene | null {
142
+ return this._mediaPlayerRef.value?.scene ?? null;
143
+ }
144
+
145
+ get scenes(): Scene[] {
146
+ return this._mediaPlayerRef.value?.scenes ?? [];
147
+ }
148
+
149
+ get videoState() {
150
+ return this._mediaPlayerRef.value?.videoState;
151
+ }
152
+
153
+ get mediaPlayer() {
154
+ return this._mediaPlayerRef.value;
155
+ }
156
+
157
+ play() {
158
+ this._mediaPlayerRef.value?.play();
159
+ }
160
+
161
+ pause() {
162
+ this._mediaPlayerRef.value?.pause();
163
+ }
164
+
165
+ setScene(index: number) {
166
+ this._mediaPlayerRef.value?.setScene(index);
167
+ }
168
+
169
+ render() {
170
+ return html`
171
+ <vmp-new-media-player
172
+ ${ref(this._mediaPlayerRef)}
173
+ ${this.eventController.register()}
174
+ ?autoplay=${this.autoplay}
175
+ ?loading=${this.fetching}
176
+ .data=${this.vouch}
177
+ .template=${this.template}
178
+ aspectRatio=${ifDefined(this.aspectRatio)}
179
+ preload=${ifDefined(this.preload)}
180
+ .controls=${this.controls}
181
+ ></vmp-new-media-player>
182
+ `;
183
+ }
184
+ }
185
+
186
+ declare global {
187
+ interface HTMLElementTagNameMap {
188
+ 'vouch-embed': Embed;
189
+ }
190
+
191
+ namespace JSX {
192
+ interface IntrinsicElements {
193
+ 'vouch-embed': Embed;
194
+ }
195
+ }
196
+ }
197
+
198
+ export { Embed };
199
+ export type { EmbedProps };