@vouchfor/embeds 0.0.0-experiment.2d4da6c → 0.0.0-experiment.2da2c49
Sign up to get free protection for your applications and to get access to all the features.
- 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 };
|