@vouchfor/embeds 0.0.0-experiment.f7614ec → 0.0.0-experiment.f80a91a
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-0a211a9c.js → browser-07a8b7dc.js} +2 -2
- package/dist/es/{browser-0a211a9c.js.map → browser-07a8b7dc.js.map} +1 -1
- package/dist/es/embeds.js +5 -2
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/index-0c298932.js +10473 -0
- package/dist/es/index-0c298932.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/index.d.ts +1 -0
- package/dist/iife/dialog-embed/browser-450a324f.js +433 -0
- package/dist/iife/dialog-embed/browser-450a324f.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-62750303.js +32932 -0
- package/dist/iife/dialog-embed/index-62750303.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 +406 -257
- package/dist/iife/embeds.iife.js.map +1 -1
- package/dist/iife/player-embed/browser-c51cdddb.js +433 -0
- package/dist/iife/player-embed/browser-c51cdddb.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-0d71c577.js +32489 -0
- package/dist/iife/player-embed/index-0d71c577.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 +8 -3
- 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/PlayerEmbed/controllers/event-forwarder.ts +2 -1
- package/src/components/PlayerEmbed/index.ts +5 -103
- package/src/index.ts +1 -0
- package/src/mixins/media-player-proxy.ts +116 -0
- package/dist/es/index-b6636843.js +0 -9984
- package/dist/es/index-b6636843.js.map +0 -1
- package/dist/es/src/components/PlayerEmbed/index.d.ts +0 -72
@@ -1,16 +1,16 @@
|
|
1
1
|
import { css, html, LitElement } from 'lit';
|
2
2
|
import { customElement, property, state } from 'lit/decorators.js';
|
3
3
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
4
|
-
import {
|
4
|
+
import { ref } from 'lit/directives/ref.js';
|
5
5
|
|
6
|
-
import type {
|
7
|
-
import type {
|
8
|
-
import type { Ref } from 'lit/directives/ref.js';
|
6
|
+
import type { TemplateInstance } from '@vouchfor/canvas-video';
|
7
|
+
import type { MediaPlayerProps } from '@vouchfor/media-player';
|
9
8
|
import type { Environment } from '~/utils/env';
|
10
9
|
|
11
10
|
import { EventForwardController } from './controllers/event-forwarder';
|
12
11
|
import { FetcherController } from './controllers/fetcher';
|
13
12
|
import { TrackingController } from './controllers/tracking';
|
13
|
+
import { MediaPlayerProxy } from '~/mixins/media-player-proxy';
|
14
14
|
|
15
15
|
import '@vouchfor/media-player';
|
16
16
|
|
@@ -26,7 +26,7 @@ type PlayerEmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload
|
|
26
26
|
};
|
27
27
|
|
28
28
|
@customElement('vouch-embed-player')
|
29
|
-
class PlayerEmbed extends LitElement {
|
29
|
+
class PlayerEmbed extends MediaPlayerProxy(LitElement) {
|
30
30
|
static styles = [
|
31
31
|
css`
|
32
32
|
:host {
|
@@ -35,8 +35,6 @@ class PlayerEmbed extends LitElement {
|
|
35
35
|
`
|
36
36
|
];
|
37
37
|
|
38
|
-
private _mediaPlayerRef: Ref<MediaPlayer> = createRef();
|
39
|
-
|
40
38
|
@property({ type: Object }) data: PlayerEmbedProps['data'];
|
41
39
|
@property({ type: String }) vouchId: PlayerEmbedProps['vouchId'];
|
42
40
|
@property({ type: String }) templateId: PlayerEmbedProps['templateId'];
|
@@ -92,102 +90,6 @@ class PlayerEmbed extends LitElement {
|
|
92
90
|
return this._fetcherController.fetching;
|
93
91
|
}
|
94
92
|
|
95
|
-
get waiting() {
|
96
|
-
return this._mediaPlayerRef.value?.waiting;
|
97
|
-
}
|
98
|
-
|
99
|
-
get initialised() {
|
100
|
-
return this._mediaPlayerRef.value?.initialised;
|
101
|
-
}
|
102
|
-
|
103
|
-
get seeking() {
|
104
|
-
return this._mediaPlayerRef.value?.seeking;
|
105
|
-
}
|
106
|
-
|
107
|
-
get paused() {
|
108
|
-
return this._mediaPlayerRef.value?.paused;
|
109
|
-
}
|
110
|
-
|
111
|
-
get captions() {
|
112
|
-
return this._mediaPlayerRef.value?.captions;
|
113
|
-
}
|
114
|
-
|
115
|
-
get fullscreen() {
|
116
|
-
return this._mediaPlayerRef.value?.fullscreen;
|
117
|
-
}
|
118
|
-
|
119
|
-
get duration() {
|
120
|
-
return this._mediaPlayerRef.value?.duration;
|
121
|
-
}
|
122
|
-
|
123
|
-
set currentTime(value: number) {
|
124
|
-
if (this._mediaPlayerRef.value) {
|
125
|
-
this._mediaPlayerRef.value.currentTime = value;
|
126
|
-
}
|
127
|
-
}
|
128
|
-
get currentTime() {
|
129
|
-
return this._mediaPlayerRef.value?.currentTime ?? 0;
|
130
|
-
}
|
131
|
-
|
132
|
-
set playbackRate(value: number) {
|
133
|
-
if (this._mediaPlayerRef.value) {
|
134
|
-
this._mediaPlayerRef.value.playbackRate = value;
|
135
|
-
}
|
136
|
-
}
|
137
|
-
get playbackRate() {
|
138
|
-
return this._mediaPlayerRef.value?.playbackRate ?? 1;
|
139
|
-
}
|
140
|
-
|
141
|
-
set volume(value: number) {
|
142
|
-
if (this._mediaPlayerRef.value) {
|
143
|
-
this._mediaPlayerRef.value.volume = value;
|
144
|
-
}
|
145
|
-
}
|
146
|
-
get volume() {
|
147
|
-
return this._mediaPlayerRef.value?.volume ?? 1;
|
148
|
-
}
|
149
|
-
|
150
|
-
set muted(value: boolean) {
|
151
|
-
if (this._mediaPlayerRef.value) {
|
152
|
-
this._mediaPlayerRef.value.muted = value;
|
153
|
-
}
|
154
|
-
}
|
155
|
-
get muted() {
|
156
|
-
return this._mediaPlayerRef.value?.muted ?? false;
|
157
|
-
}
|
158
|
-
|
159
|
-
get scene(): Scene | null {
|
160
|
-
return this._mediaPlayerRef.value?.scene ?? null;
|
161
|
-
}
|
162
|
-
|
163
|
-
get scenes(): Scene[] {
|
164
|
-
return this._mediaPlayerRef.value?.scenes ?? [];
|
165
|
-
}
|
166
|
-
|
167
|
-
get sceneConfig(): Scenes | null {
|
168
|
-
return this._mediaPlayerRef.value?.sceneConfig ?? null;
|
169
|
-
}
|
170
|
-
|
171
|
-
get videoState() {
|
172
|
-
return this._mediaPlayerRef.value?.videoState;
|
173
|
-
}
|
174
|
-
|
175
|
-
get mediaPlayer() {
|
176
|
-
return this._mediaPlayerRef.value;
|
177
|
-
}
|
178
|
-
|
179
|
-
play() {
|
180
|
-
this._mediaPlayerRef.value?.play();
|
181
|
-
}
|
182
|
-
|
183
|
-
pause() {
|
184
|
-
this._mediaPlayerRef.value?.pause();
|
185
|
-
}
|
186
|
-
|
187
|
-
setScene(index: number) {
|
188
|
-
this._mediaPlayerRef.value?.setScene(index);
|
189
|
-
}
|
190
|
-
|
191
93
|
private _renderStyles() {
|
192
94
|
if (!this.aspectRatio) {
|
193
95
|
return html`
|
package/src/index.ts
CHANGED
@@ -0,0 +1,116 @@
|
|
1
|
+
import { createRef } from 'lit/directives/ref.js';
|
2
|
+
|
3
|
+
import type { Scene, Scenes } from '@vouchfor/canvas-video';
|
4
|
+
import type { MediaPlayer } from '@vouchfor/media-player';
|
5
|
+
import type { LitElement } from 'lit';
|
6
|
+
|
7
|
+
type Constructor<T = Record<string, never>> = new (...args: any[]) => T;
|
8
|
+
|
9
|
+
const MediaPlayerProxy = <T extends Constructor<LitElement>>(SuperClass: T) => {
|
10
|
+
class MediaPlayerProxyClass extends SuperClass {
|
11
|
+
protected _mediaPlayerRef = createRef<MediaPlayer>();
|
12
|
+
|
13
|
+
get waiting() {
|
14
|
+
return this._mediaPlayerRef.value?.waiting;
|
15
|
+
}
|
16
|
+
|
17
|
+
get initialised() {
|
18
|
+
return this._mediaPlayerRef.value?.initialised;
|
19
|
+
}
|
20
|
+
|
21
|
+
get seeking() {
|
22
|
+
return this._mediaPlayerRef.value?.seeking;
|
23
|
+
}
|
24
|
+
|
25
|
+
get paused() {
|
26
|
+
return this._mediaPlayerRef.value?.paused;
|
27
|
+
}
|
28
|
+
|
29
|
+
get captions() {
|
30
|
+
return this._mediaPlayerRef.value?.captions;
|
31
|
+
}
|
32
|
+
|
33
|
+
get fullscreen() {
|
34
|
+
return this._mediaPlayerRef.value?.fullscreen;
|
35
|
+
}
|
36
|
+
|
37
|
+
get duration() {
|
38
|
+
return this._mediaPlayerRef.value?.duration;
|
39
|
+
}
|
40
|
+
|
41
|
+
set currentTime(value: number) {
|
42
|
+
if (this._mediaPlayerRef.value) {
|
43
|
+
this._mediaPlayerRef.value.currentTime = value;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
get currentTime() {
|
47
|
+
return this._mediaPlayerRef.value?.currentTime ?? 0;
|
48
|
+
}
|
49
|
+
|
50
|
+
set playbackRate(value: number) {
|
51
|
+
if (this._mediaPlayerRef.value) {
|
52
|
+
this._mediaPlayerRef.value.playbackRate = value;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
get playbackRate() {
|
56
|
+
return this._mediaPlayerRef.value?.playbackRate ?? 1;
|
57
|
+
}
|
58
|
+
|
59
|
+
set volume(value: number) {
|
60
|
+
if (this._mediaPlayerRef.value) {
|
61
|
+
this._mediaPlayerRef.value.volume = value;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
get volume() {
|
65
|
+
return this._mediaPlayerRef.value?.volume ?? 1;
|
66
|
+
}
|
67
|
+
|
68
|
+
set muted(value: boolean) {
|
69
|
+
if (this._mediaPlayerRef.value) {
|
70
|
+
this._mediaPlayerRef.value.muted = value;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
get muted() {
|
74
|
+
return this._mediaPlayerRef.value?.muted ?? false;
|
75
|
+
}
|
76
|
+
|
77
|
+
get scene(): Scene | null {
|
78
|
+
return this._mediaPlayerRef.value?.scene ?? null;
|
79
|
+
}
|
80
|
+
|
81
|
+
get scenes(): Scene[] {
|
82
|
+
return this._mediaPlayerRef.value?.scenes ?? [];
|
83
|
+
}
|
84
|
+
|
85
|
+
get sceneConfig(): Scenes | null {
|
86
|
+
return this._mediaPlayerRef.value?.sceneConfig ?? null;
|
87
|
+
}
|
88
|
+
|
89
|
+
get videoState() {
|
90
|
+
return this._mediaPlayerRef.value?.videoState;
|
91
|
+
}
|
92
|
+
|
93
|
+
get mediaPlayer() {
|
94
|
+
return this._mediaPlayerRef.value;
|
95
|
+
}
|
96
|
+
|
97
|
+
play() {
|
98
|
+
this._mediaPlayerRef.value?.play();
|
99
|
+
}
|
100
|
+
|
101
|
+
pause() {
|
102
|
+
this._mediaPlayerRef.value?.pause();
|
103
|
+
}
|
104
|
+
|
105
|
+
reset(time = 0, play = false) {
|
106
|
+
this._mediaPlayerRef.value?.reset(time, play);
|
107
|
+
}
|
108
|
+
|
109
|
+
setScene(index: number) {
|
110
|
+
this._mediaPlayerRef.value?.setScene(index);
|
111
|
+
}
|
112
|
+
}
|
113
|
+
return MediaPlayerProxyClass;
|
114
|
+
};
|
115
|
+
|
116
|
+
export { MediaPlayerProxy };
|