@vouchfor/embeds 0.0.0-experiment.2d4da6c → 0.0.0-experiment.2da2c49
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/{browser-8b4ecf1d.js → browser-17f8a53b.js} +2 -2
- package/dist/es/{browser-8b4ecf1d.js.map → browser-17f8a53b.js.map} +1 -1
- package/dist/es/embeds.js +5 -2
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/index-747e8b52.js +10478 -0
- package/dist/es/index-747e8b52.js.map +1 -0
- package/dist/es/src/components/DialogEmbed/DialogOverlay.d.ts +19 -0
- package/dist/es/src/components/DialogEmbed/DialogPortal.d.ts +35 -0
- package/dist/es/src/components/DialogEmbed/index.d.ts +35 -0
- package/dist/es/src/components/PlayerEmbed/controllers/event-forwarder.d.ts +15 -0
- package/dist/es/src/components/{Embed → PlayerEmbed}/controllers/fetcher.d.ts +4 -4
- package/dist/es/src/components/{Embed/controllers/tracking.d.ts → PlayerEmbed/controllers/tracking/index.d.ts} +14 -11
- package/dist/es/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +17 -0
- package/dist/es/src/components/PlayerEmbed/tests/data.d.ts +3 -0
- package/dist/es/src/index.d.ts +2 -1
- package/dist/iife/dialog-embed/browser-2436b04a.js +433 -0
- package/dist/iife/dialog-embed/browser-2436b04a.js.map +1 -0
- package/dist/iife/dialog-embed/embed.iife.js +1721 -0
- package/dist/iife/dialog-embed/embed.iife.js.map +1 -0
- package/dist/iife/dialog-embed/embed.js +5 -0
- package/dist/iife/dialog-embed/embed.js.map +1 -0
- package/dist/iife/dialog-embed/index-c39a015a.js +32937 -0
- package/dist/iife/dialog-embed/index-c39a015a.js.map +1 -0
- package/dist/iife/dialog-embed/src/components/DialogEmbed/DialogOverlay.d.ts +19 -0
- package/dist/iife/dialog-embed/src/components/DialogEmbed/DialogPortal.d.ts +35 -0
- package/dist/iife/dialog-embed/src/components/DialogEmbed/index.d.ts +35 -0
- package/dist/iife/dialog-embed/src/components/PlayerEmbed/controllers/event-forwarder.d.ts +15 -0
- package/dist/iife/dialog-embed/src/components/PlayerEmbed/controllers/fetcher.d.ts +14 -0
- package/dist/iife/dialog-embed/src/components/PlayerEmbed/controllers/tracking/index.d.ts +36 -0
- package/dist/iife/dialog-embed/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +17 -0
- package/dist/iife/dialog-embed/src/components/PlayerEmbed/tests/data.d.ts +3 -0
- package/dist/iife/dialog-embed/src/index.d.ts +2 -0
- package/dist/iife/dialog-embed/src/utils/env.d.ts +12 -0
- package/dist/iife/dialog-embed/src/utils/events.d.ts +2 -0
- package/dist/iife/embeds.iife.js +428 -265
- package/dist/iife/embeds.iife.js.map +1 -1
- package/dist/iife/player-embed/browser-88dbf1ce.js +433 -0
- package/dist/iife/player-embed/browser-88dbf1ce.js.map +1 -0
- package/dist/iife/player-embed/embed.iife.js +1585 -0
- package/dist/iife/player-embed/embed.iife.js.map +1 -0
- package/dist/iife/player-embed/embed.js +5 -0
- package/dist/iife/player-embed/embed.js.map +1 -0
- package/dist/iife/player-embed/index-601226fd.js +32494 -0
- package/dist/iife/player-embed/index-601226fd.js.map +1 -0
- package/dist/iife/player-embed/src/components/DialogEmbed/DialogOverlay.d.ts +19 -0
- package/dist/iife/player-embed/src/components/DialogEmbed/DialogPortal.d.ts +35 -0
- package/dist/iife/player-embed/src/components/DialogEmbed/index.d.ts +35 -0
- package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/event-forwarder.d.ts +15 -0
- package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/fetcher.d.ts +14 -0
- package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/tracking/index.d.ts +36 -0
- package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +17 -0
- package/dist/iife/player-embed/src/components/PlayerEmbed/tests/data.d.ts +3 -0
- package/dist/iife/player-embed/src/index.d.ts +2 -0
- package/dist/iife/player-embed/src/utils/env.d.ts +12 -0
- package/dist/iife/player-embed/src/utils/events.d.ts +2 -0
- package/package.json +13 -5
- package/src/components/DialogEmbed/Dialog.stories.ts +79 -0
- package/src/components/DialogEmbed/DialogOverlay.ts +130 -0
- package/src/components/DialogEmbed/DialogPortal.ts +114 -0
- package/src/components/DialogEmbed/index.ts +93 -0
- package/src/components/{Embed/Embed.stories.ts → PlayerEmbed/PlayerEmbed.stories.ts} +15 -15
- package/src/components/{Embed → PlayerEmbed}/controllers/event-forwarder.ts +6 -5
- package/src/components/{Embed → PlayerEmbed}/controllers/fetcher.ts +11 -11
- package/src/components/{Embed/controllers/tracking.ts → PlayerEmbed/controllers/tracking/index.ts} +47 -118
- package/src/components/PlayerEmbed/controllers/tracking/utils.ts +95 -0
- package/src/components/PlayerEmbed/index.ts +149 -0
- package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts +80 -0
- package/src/components/PlayerEmbed/tests/data.ts +183 -0
- package/src/index.ts +2 -1
- package/src/mixins/media-player-proxy.ts +116 -0
- package/dist/es/index-4c628d0f.js +0 -9948
- package/dist/es/index-4c628d0f.js.map +0 -1
- package/dist/es/src/components/Embed/index.d.ts +0 -70
- package/src/components/Embed/index.ts +0 -217
@@ -1,70 +0,0 @@
|
|
1
|
-
import { LitElement } from 'lit';
|
2
|
-
import type { Scene, Scenes, TemplateInstance } from '@vouchfor/canvas-video';
|
3
|
-
import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
|
4
|
-
import type { Environment } from '../../utils/env';
|
5
|
-
type EmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
|
6
|
-
env: Environment;
|
7
|
-
apiKey: string;
|
8
|
-
disableTracking?: boolean;
|
9
|
-
trackingSource?: string;
|
10
|
-
vouchId?: string;
|
11
|
-
templateId?: string;
|
12
|
-
questions?: number[];
|
13
|
-
};
|
14
|
-
declare class Embed extends LitElement {
|
15
|
-
static styles: import("lit").CSSResult[];
|
16
|
-
private _mediaPlayerRef;
|
17
|
-
data: EmbedProps['data'];
|
18
|
-
vouchId: EmbedProps['vouchId'];
|
19
|
-
templateId: EmbedProps['templateId'];
|
20
|
-
questions: EmbedProps['questions'];
|
21
|
-
env: EmbedProps['env'];
|
22
|
-
apiKey: EmbedProps['apiKey'];
|
23
|
-
disableTracking: EmbedProps['disableTracking'];
|
24
|
-
trackingSource: EmbedProps['trackingSource'];
|
25
|
-
controls: EmbedProps['controls'];
|
26
|
-
preload: EmbedProps['preload'];
|
27
|
-
autoplay: EmbedProps['autoplay'];
|
28
|
-
aspectRatio: EmbedProps['aspectRatio'];
|
29
|
-
private eventController;
|
30
|
-
private _fetcherController;
|
31
|
-
private _trackingController;
|
32
|
-
vouch: EmbedProps['data'];
|
33
|
-
template: TemplateInstance | undefined;
|
34
|
-
get fetching(): boolean;
|
35
|
-
get waiting(): boolean | undefined;
|
36
|
-
get seeking(): boolean | undefined;
|
37
|
-
get paused(): boolean | undefined;
|
38
|
-
get captions(): boolean | undefined;
|
39
|
-
get fullscreen(): boolean | undefined;
|
40
|
-
get duration(): number | undefined;
|
41
|
-
set currentTime(value: number);
|
42
|
-
get currentTime(): number;
|
43
|
-
set playbackRate(value: number);
|
44
|
-
get playbackRate(): number;
|
45
|
-
set volume(value: number);
|
46
|
-
get volume(): number;
|
47
|
-
set muted(value: boolean);
|
48
|
-
get muted(): boolean;
|
49
|
-
get scene(): Scene | null;
|
50
|
-
get scenes(): Scene[];
|
51
|
-
get sceneConfig(): Scenes | null;
|
52
|
-
get videoState(): import("@vouchfor/media-player/dist/src/components/MediaPlayer/controllers/scenes").VideoStateMap | undefined;
|
53
|
-
get mediaPlayer(): MediaPlayer | undefined;
|
54
|
-
play(): void;
|
55
|
-
pause(): void;
|
56
|
-
setScene(index: number): void;
|
57
|
-
render(): import("lit").TemplateResult<1>;
|
58
|
-
}
|
59
|
-
declare global {
|
60
|
-
interface HTMLElementTagNameMap {
|
61
|
-
'vouch-embed': Embed;
|
62
|
-
}
|
63
|
-
namespace JSX {
|
64
|
-
interface IntrinsicElements {
|
65
|
-
'vouch-embed': Embed;
|
66
|
-
}
|
67
|
-
}
|
68
|
-
}
|
69
|
-
export { Embed };
|
70
|
-
export type { EmbedProps };
|
@@ -1,217 +0,0 @@
|
|
1
|
-
import { css, 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, Scenes, 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
|
-
disableTracking?: boolean;
|
21
|
-
trackingSource?: string;
|
22
|
-
vouchId?: string;
|
23
|
-
templateId?: string;
|
24
|
-
// Index of the questions to include starting from 1
|
25
|
-
questions?: number[];
|
26
|
-
};
|
27
|
-
|
28
|
-
@customElement('vouch-embed')
|
29
|
-
class Embed extends LitElement {
|
30
|
-
static styles = [
|
31
|
-
css`
|
32
|
-
:host {
|
33
|
-
display: flex;
|
34
|
-
}
|
35
|
-
`
|
36
|
-
];
|
37
|
-
|
38
|
-
private _mediaPlayerRef: Ref<MediaPlayer> = createRef();
|
39
|
-
|
40
|
-
@property({ type: Object }) data: EmbedProps['data'];
|
41
|
-
@property({ type: String }) vouchId: EmbedProps['vouchId'];
|
42
|
-
@property({ type: String }) templateId: EmbedProps['templateId'];
|
43
|
-
@property({ type: Array }) questions: EmbedProps['questions'];
|
44
|
-
|
45
|
-
@property({ type: String }) env: EmbedProps['env'] = 'prod';
|
46
|
-
@property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
|
47
|
-
@property({ type: Boolean }) disableTracking: EmbedProps['disableTracking'] = false;
|
48
|
-
@property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'embedded_player';
|
49
|
-
|
50
|
-
@property({ type: Array }) controls: EmbedProps['controls'];
|
51
|
-
@property({ type: String }) preload: EmbedProps['preload'] = 'auto';
|
52
|
-
@property({ type: Boolean }) autoplay: EmbedProps['autoplay'] = false;
|
53
|
-
@property({ type: Number }) aspectRatio: EmbedProps['aspectRatio'] = 0;
|
54
|
-
|
55
|
-
private eventController = new EventForwardController(this, [
|
56
|
-
'durationchange',
|
57
|
-
'ended',
|
58
|
-
'error',
|
59
|
-
'loadeddata',
|
60
|
-
'pause',
|
61
|
-
'stalled',
|
62
|
-
'play',
|
63
|
-
'playing',
|
64
|
-
'ratechange',
|
65
|
-
'scenechange',
|
66
|
-
'seeking',
|
67
|
-
'seeked',
|
68
|
-
'timeupdate',
|
69
|
-
'volumechange',
|
70
|
-
'waiting',
|
71
|
-
|
72
|
-
'video:loadeddata',
|
73
|
-
'video:seeking',
|
74
|
-
'video:seeked',
|
75
|
-
'video:play',
|
76
|
-
'video:playing',
|
77
|
-
'video:pause',
|
78
|
-
'video:stalled',
|
79
|
-
'video:timeupdate',
|
80
|
-
'video:ended',
|
81
|
-
'video:error'
|
82
|
-
]);
|
83
|
-
private _fetcherController = new FetcherController(this);
|
84
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
85
|
-
// @ts-ignore
|
86
|
-
private _trackingController = new TrackingController(this);
|
87
|
-
|
88
|
-
@state() vouch: EmbedProps['data'];
|
89
|
-
@state() template: TemplateInstance | undefined;
|
90
|
-
|
91
|
-
get fetching() {
|
92
|
-
return this._fetcherController.fetching;
|
93
|
-
}
|
94
|
-
|
95
|
-
get waiting() {
|
96
|
-
return this._mediaPlayerRef.value?.waiting;
|
97
|
-
}
|
98
|
-
|
99
|
-
get seeking() {
|
100
|
-
return this._mediaPlayerRef.value?.seeking;
|
101
|
-
}
|
102
|
-
|
103
|
-
get paused() {
|
104
|
-
return this._mediaPlayerRef.value?.paused;
|
105
|
-
}
|
106
|
-
|
107
|
-
get captions() {
|
108
|
-
return this._mediaPlayerRef.value?.captions;
|
109
|
-
}
|
110
|
-
|
111
|
-
get fullscreen() {
|
112
|
-
return this._mediaPlayerRef.value?.fullscreen;
|
113
|
-
}
|
114
|
-
|
115
|
-
get duration() {
|
116
|
-
return this._mediaPlayerRef.value?.duration;
|
117
|
-
}
|
118
|
-
|
119
|
-
set currentTime(value: number) {
|
120
|
-
if (this._mediaPlayerRef.value) {
|
121
|
-
this._mediaPlayerRef.value.currentTime = value;
|
122
|
-
}
|
123
|
-
}
|
124
|
-
get currentTime() {
|
125
|
-
return this._mediaPlayerRef.value?.currentTime ?? 0;
|
126
|
-
}
|
127
|
-
|
128
|
-
set playbackRate(value: number) {
|
129
|
-
if (this._mediaPlayerRef.value) {
|
130
|
-
this._mediaPlayerRef.value.playbackRate = value;
|
131
|
-
}
|
132
|
-
}
|
133
|
-
get playbackRate() {
|
134
|
-
return this._mediaPlayerRef.value?.playbackRate ?? 1;
|
135
|
-
}
|
136
|
-
|
137
|
-
set volume(value: number) {
|
138
|
-
if (this._mediaPlayerRef.value) {
|
139
|
-
this._mediaPlayerRef.value.volume = value;
|
140
|
-
}
|
141
|
-
}
|
142
|
-
get volume() {
|
143
|
-
return this._mediaPlayerRef.value?.volume ?? 1;
|
144
|
-
}
|
145
|
-
|
146
|
-
set muted(value: boolean) {
|
147
|
-
if (this._mediaPlayerRef.value) {
|
148
|
-
this._mediaPlayerRef.value.muted = value;
|
149
|
-
}
|
150
|
-
}
|
151
|
-
get muted() {
|
152
|
-
return this._mediaPlayerRef.value?.muted ?? false;
|
153
|
-
}
|
154
|
-
|
155
|
-
get scene(): Scene | null {
|
156
|
-
return this._mediaPlayerRef.value?.scene ?? null;
|
157
|
-
}
|
158
|
-
|
159
|
-
get scenes(): Scene[] {
|
160
|
-
return this._mediaPlayerRef.value?.scenes ?? [];
|
161
|
-
}
|
162
|
-
|
163
|
-
get sceneConfig(): Scenes | null {
|
164
|
-
return this._mediaPlayerRef.value?.sceneConfig ?? null;
|
165
|
-
}
|
166
|
-
|
167
|
-
get videoState() {
|
168
|
-
return this._mediaPlayerRef.value?.videoState;
|
169
|
-
}
|
170
|
-
|
171
|
-
get mediaPlayer() {
|
172
|
-
return this._mediaPlayerRef.value;
|
173
|
-
}
|
174
|
-
|
175
|
-
play() {
|
176
|
-
this._mediaPlayerRef.value?.play();
|
177
|
-
}
|
178
|
-
|
179
|
-
pause() {
|
180
|
-
this._mediaPlayerRef.value?.pause();
|
181
|
-
}
|
182
|
-
|
183
|
-
setScene(index: number) {
|
184
|
-
this._mediaPlayerRef.value?.setScene(index);
|
185
|
-
}
|
186
|
-
|
187
|
-
render() {
|
188
|
-
return html`
|
189
|
-
<vmp-media-player
|
190
|
-
${ref(this._mediaPlayerRef)}
|
191
|
-
${this.eventController.register()}
|
192
|
-
?autoplay=${this.autoplay}
|
193
|
-
?loading=${this.fetching}
|
194
|
-
.data=${this.vouch}
|
195
|
-
.template=${this.template}
|
196
|
-
aspectRatio=${ifDefined(this.aspectRatio)}
|
197
|
-
preload=${ifDefined(this.preload)}
|
198
|
-
.controls=${this.controls}
|
199
|
-
></vmp-media-player>
|
200
|
-
`;
|
201
|
-
}
|
202
|
-
}
|
203
|
-
|
204
|
-
declare global {
|
205
|
-
interface HTMLElementTagNameMap {
|
206
|
-
'vouch-embed': Embed;
|
207
|
-
}
|
208
|
-
|
209
|
-
namespace JSX {
|
210
|
-
interface IntrinsicElements {
|
211
|
-
'vouch-embed': Embed;
|
212
|
-
}
|
213
|
-
}
|
214
|
-
}
|
215
|
-
|
216
|
-
export { Embed };
|
217
|
-
export type { EmbedProps };
|