@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.
Files changed (74) hide show
  1. package/dist/es/{browser-8b4ecf1d.js → browser-17f8a53b.js} +2 -2
  2. package/dist/es/{browser-8b4ecf1d.js.map → browser-17f8a53b.js.map} +1 -1
  3. package/dist/es/embeds.js +5 -2
  4. package/dist/es/embeds.js.map +1 -1
  5. package/dist/es/index-747e8b52.js +10478 -0
  6. package/dist/es/index-747e8b52.js.map +1 -0
  7. package/dist/es/src/components/DialogEmbed/DialogOverlay.d.ts +19 -0
  8. package/dist/es/src/components/DialogEmbed/DialogPortal.d.ts +35 -0
  9. package/dist/es/src/components/DialogEmbed/index.d.ts +35 -0
  10. package/dist/es/src/components/PlayerEmbed/controllers/event-forwarder.d.ts +15 -0
  11. package/dist/es/src/components/{Embed → PlayerEmbed}/controllers/fetcher.d.ts +4 -4
  12. package/dist/es/src/components/{Embed/controllers/tracking.d.ts → PlayerEmbed/controllers/tracking/index.d.ts} +14 -11
  13. package/dist/es/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +17 -0
  14. package/dist/es/src/components/PlayerEmbed/tests/data.d.ts +3 -0
  15. package/dist/es/src/index.d.ts +2 -1
  16. package/dist/iife/dialog-embed/browser-2436b04a.js +433 -0
  17. package/dist/iife/dialog-embed/browser-2436b04a.js.map +1 -0
  18. package/dist/iife/dialog-embed/embed.iife.js +1721 -0
  19. package/dist/iife/dialog-embed/embed.iife.js.map +1 -0
  20. package/dist/iife/dialog-embed/embed.js +5 -0
  21. package/dist/iife/dialog-embed/embed.js.map +1 -0
  22. package/dist/iife/dialog-embed/index-c39a015a.js +32937 -0
  23. package/dist/iife/dialog-embed/index-c39a015a.js.map +1 -0
  24. package/dist/iife/dialog-embed/src/components/DialogEmbed/DialogOverlay.d.ts +19 -0
  25. package/dist/iife/dialog-embed/src/components/DialogEmbed/DialogPortal.d.ts +35 -0
  26. package/dist/iife/dialog-embed/src/components/DialogEmbed/index.d.ts +35 -0
  27. package/dist/iife/dialog-embed/src/components/PlayerEmbed/controllers/event-forwarder.d.ts +15 -0
  28. package/dist/iife/dialog-embed/src/components/PlayerEmbed/controllers/fetcher.d.ts +14 -0
  29. package/dist/iife/dialog-embed/src/components/PlayerEmbed/controllers/tracking/index.d.ts +36 -0
  30. package/dist/iife/dialog-embed/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +17 -0
  31. package/dist/iife/dialog-embed/src/components/PlayerEmbed/tests/data.d.ts +3 -0
  32. package/dist/iife/dialog-embed/src/index.d.ts +2 -0
  33. package/dist/iife/dialog-embed/src/utils/env.d.ts +12 -0
  34. package/dist/iife/dialog-embed/src/utils/events.d.ts +2 -0
  35. package/dist/iife/embeds.iife.js +428 -265
  36. package/dist/iife/embeds.iife.js.map +1 -1
  37. package/dist/iife/player-embed/browser-88dbf1ce.js +433 -0
  38. package/dist/iife/player-embed/browser-88dbf1ce.js.map +1 -0
  39. package/dist/iife/player-embed/embed.iife.js +1585 -0
  40. package/dist/iife/player-embed/embed.iife.js.map +1 -0
  41. package/dist/iife/player-embed/embed.js +5 -0
  42. package/dist/iife/player-embed/embed.js.map +1 -0
  43. package/dist/iife/player-embed/index-601226fd.js +32494 -0
  44. package/dist/iife/player-embed/index-601226fd.js.map +1 -0
  45. package/dist/iife/player-embed/src/components/DialogEmbed/DialogOverlay.d.ts +19 -0
  46. package/dist/iife/player-embed/src/components/DialogEmbed/DialogPortal.d.ts +35 -0
  47. package/dist/iife/player-embed/src/components/DialogEmbed/index.d.ts +35 -0
  48. package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/event-forwarder.d.ts +15 -0
  49. package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/fetcher.d.ts +14 -0
  50. package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/tracking/index.d.ts +36 -0
  51. package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/tracking/utils.d.ts +17 -0
  52. package/dist/iife/player-embed/src/components/PlayerEmbed/tests/data.d.ts +3 -0
  53. package/dist/iife/player-embed/src/index.d.ts +2 -0
  54. package/dist/iife/player-embed/src/utils/env.d.ts +12 -0
  55. package/dist/iife/player-embed/src/utils/events.d.ts +2 -0
  56. package/package.json +13 -5
  57. package/src/components/DialogEmbed/Dialog.stories.ts +79 -0
  58. package/src/components/DialogEmbed/DialogOverlay.ts +130 -0
  59. package/src/components/DialogEmbed/DialogPortal.ts +114 -0
  60. package/src/components/DialogEmbed/index.ts +93 -0
  61. package/src/components/{Embed/Embed.stories.ts → PlayerEmbed/PlayerEmbed.stories.ts} +15 -15
  62. package/src/components/{Embed → PlayerEmbed}/controllers/event-forwarder.ts +6 -5
  63. package/src/components/{Embed → PlayerEmbed}/controllers/fetcher.ts +11 -11
  64. package/src/components/{Embed/controllers/tracking.ts → PlayerEmbed/controllers/tracking/index.ts} +47 -118
  65. package/src/components/PlayerEmbed/controllers/tracking/utils.ts +95 -0
  66. package/src/components/PlayerEmbed/index.ts +149 -0
  67. package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts +80 -0
  68. package/src/components/PlayerEmbed/tests/data.ts +183 -0
  69. package/src/index.ts +2 -1
  70. package/src/mixins/media-player-proxy.ts +116 -0
  71. package/dist/es/index-4c628d0f.js +0 -9948
  72. package/dist/es/index-4c628d0f.js.map +0 -1
  73. package/dist/es/src/components/Embed/index.d.ts +0 -70
  74. 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 };