@vouchfor/embeds 0.0.0-experiment.1cdaf7d → 0.0.0-experiment.1f98c5e
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-95c87c48.js +433 -0
- package/dist/es/browser-95c87c48.js.map +1 -0
- package/dist/es/embeds.js +7 -1596
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/index-9dd8a4fa.js +9950 -0
- package/dist/es/index-9dd8a4fa.js.map +1 -0
- package/dist/es/src/components/Embed/controllers/fetcher.d.ts +1 -0
- package/dist/es/src/components/Embed/index.d.ts +3 -0
- package/dist/iife/embeds.iife.js +385 -261
- package/dist/iife/embeds.iife.js.map +1 -1
- package/package.json +5 -3
- package/src/components/Embed/Embed.spec.ts +17 -0
- package/src/components/Embed/Embed.stories.ts +14 -1
- package/src/components/Embed/controllers/fetcher.ts +24 -5
- package/src/components/Embed/controllers/tracking.ts +5 -2
- package/src/components/Embed/index.ts +16 -5
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@vouchfor/embeds",
|
3
|
-
"version": "0.0.0-experiment.
|
3
|
+
"version": "0.0.0-experiment.1f98c5e",
|
4
4
|
"license": "MIT",
|
5
5
|
"author": "Aaron Williams",
|
6
6
|
"main": "dist/es/embeds.js",
|
@@ -28,7 +28,8 @@
|
|
28
28
|
"size": "size-limit",
|
29
29
|
"storybook": "yarn prebuild && storybook dev -p 6007",
|
30
30
|
"prebuild": "yarn build:deps && yarn generate:manifest",
|
31
|
-
"test": "
|
31
|
+
"test": "rm -rf test/lib && yarn prebuild && vite build --mode test && web-test-runner",
|
32
|
+
"test:ci": "yarn test"
|
32
33
|
},
|
33
34
|
"lint-staged": {
|
34
35
|
"**/*.{ts,tsx,js}": "eslint --fix --quiet",
|
@@ -36,7 +37,7 @@
|
|
36
37
|
},
|
37
38
|
"dependencies": {
|
38
39
|
"@lit/task": "^1.0.0",
|
39
|
-
"@vouchfor/media-player": "0.0.0-experiment.
|
40
|
+
"@vouchfor/media-player": "0.0.0-experiment.1f98c5e",
|
40
41
|
"uuid": "^9.0.1"
|
41
42
|
},
|
42
43
|
"peerDependencies": {
|
@@ -69,6 +70,7 @@
|
|
69
70
|
"storybook": "^7.4.5",
|
70
71
|
"typescript": "^5.1.3",
|
71
72
|
"vite": "^4.4.9",
|
73
|
+
"vite-plugin-commonjs": "^0.10.0",
|
72
74
|
"vite-plugin-dts": "^3.6.0",
|
73
75
|
"web-component-analyzer": "^1.1.7"
|
74
76
|
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { expect } from '@esm-bundle/chai';
|
2
|
+
// import { fixture } from '@open-wc/testing';
|
3
|
+
// import { html } from 'lit';
|
4
|
+
|
5
|
+
// import type { Embed } from './index.js';
|
6
|
+
|
7
|
+
// Can't use typescript aliases with esbuild file transforms apparently
|
8
|
+
// No idea what a good way to actually build before testing is, the examples give nothing
|
9
|
+
// https://modern-web.dev/guides/test-runner/typescript/
|
10
|
+
import '../../test/lib/embeds.js';
|
11
|
+
|
12
|
+
describe('Embeds', () => {
|
13
|
+
it('passes', async () => {
|
14
|
+
expect(true).to.be.true;
|
15
|
+
// const player = await fixture<Embed>(html`<vouch-embed aspectratio=${1}></vouch-embed>`);
|
16
|
+
});
|
17
|
+
});
|
@@ -10,7 +10,17 @@ type EmbedArgs = EmbedProps & {
|
|
10
10
|
showVouch?: boolean;
|
11
11
|
};
|
12
12
|
|
13
|
-
const _Embed = ({
|
13
|
+
const _Embed = ({
|
14
|
+
vouchId,
|
15
|
+
templateId,
|
16
|
+
questions,
|
17
|
+
preload,
|
18
|
+
autoplay,
|
19
|
+
env,
|
20
|
+
apiKey,
|
21
|
+
controls,
|
22
|
+
aspectRatio
|
23
|
+
}: EmbedArgs) => {
|
14
24
|
return html`
|
15
25
|
<div style="height: 100vh">
|
16
26
|
<vouch-embed
|
@@ -18,10 +28,12 @@ const _Embed = ({ vouchId, templateId, preload, autoplay, env, apiKey, controls,
|
|
18
28
|
apiKey=${ifDefined(apiKey)}
|
19
29
|
vouchId=${ifDefined(vouchId)}
|
20
30
|
templateId=${ifDefined(templateId)}
|
31
|
+
.questions=${questions}
|
21
32
|
.controls=${controls}
|
22
33
|
?autoplay=${autoplay}
|
23
34
|
preload=${ifDefined(preload)}
|
24
35
|
aspectRatio=${ifDefined(aspectRatio)}
|
36
|
+
@error=${console.log}
|
25
37
|
></vouch-embed>
|
26
38
|
</div>
|
27
39
|
`;
|
@@ -43,6 +55,7 @@ const Embed: Story = {
|
|
43
55
|
apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
|
44
56
|
vouchId: '6JQEIPeStt',
|
45
57
|
templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
|
58
|
+
questions: [],
|
46
59
|
aspectRatio: 0,
|
47
60
|
preload: 'none',
|
48
61
|
autoplay: false
|
@@ -9,7 +9,7 @@ import { getEnvUrls } from '~/utils/env';
|
|
9
9
|
|
10
10
|
type EmbedHost = ReactiveControllerHost & Embed;
|
11
11
|
|
12
|
-
type
|
12
|
+
type FetchTaskDeps = [
|
13
13
|
EmbedProps['env'],
|
14
14
|
EmbedProps['apiKey'],
|
15
15
|
EmbedProps['data'],
|
@@ -17,10 +17,13 @@ type TaskDeps = [
|
|
17
17
|
EmbedProps['templateId']
|
18
18
|
];
|
19
19
|
|
20
|
+
type FilterTaskDeps = [EmbedProps['data'], EmbedProps['questions']];
|
21
|
+
|
20
22
|
class FetcherController {
|
21
23
|
host: EmbedHost;
|
22
24
|
|
23
25
|
private _fetching = false;
|
26
|
+
private _vouch: EmbedProps['data'];
|
24
27
|
|
25
28
|
set fetching(value) {
|
26
29
|
if (this._fetching !== value) {
|
@@ -96,9 +99,9 @@ class FetcherController {
|
|
96
99
|
|
97
100
|
constructor(host: EmbedHost) {
|
98
101
|
this.host = host;
|
99
|
-
new Task<
|
102
|
+
new Task<FetchTaskDeps, void>(
|
100
103
|
this.host,
|
101
|
-
async ([env, apiKey, data, vouchId, templateId]:
|
104
|
+
async ([env, apiKey, data, vouchId, templateId]: FetchTaskDeps) => {
|
102
105
|
try {
|
103
106
|
host.vouch = undefined;
|
104
107
|
host.template = undefined;
|
@@ -109,7 +112,7 @@ class FetcherController {
|
|
109
112
|
this.fetching = true;
|
110
113
|
template = await this.getTemplate(env, apiKey, templateId);
|
111
114
|
}
|
112
|
-
|
115
|
+
this._vouch = data;
|
113
116
|
host.template = template ?? data?.settings?.template?.instance;
|
114
117
|
} else if (vouchId) {
|
115
118
|
this.fetching = true;
|
@@ -118,7 +121,7 @@ class FetcherController {
|
|
118
121
|
this.getVouch(env, apiKey, vouchId),
|
119
122
|
templateId ? this.getTemplate(env, apiKey, templateId) : null
|
120
123
|
]);
|
121
|
-
|
124
|
+
this._vouch = vouch;
|
122
125
|
host.template = template ?? vouch?.settings?.template?.instance;
|
123
126
|
}
|
124
127
|
} finally {
|
@@ -127,6 +130,22 @@ class FetcherController {
|
|
127
130
|
},
|
128
131
|
() => [host.env, host.apiKey, host.data, host.vouchId, host.templateId]
|
129
132
|
);
|
133
|
+
|
134
|
+
// This second task is to be able to filter the vouch without fetching it again if only the questions changed
|
135
|
+
new Task<FilterTaskDeps, void>(
|
136
|
+
this.host,
|
137
|
+
([vouch, questions]: FilterTaskDeps) => {
|
138
|
+
host.vouch = vouch
|
139
|
+
? {
|
140
|
+
...vouch,
|
141
|
+
questions: {
|
142
|
+
items: vouch?.questions.items.filter((_, index) => !questions?.length || questions?.includes(index + 1))
|
143
|
+
}
|
144
|
+
}
|
145
|
+
: undefined;
|
146
|
+
},
|
147
|
+
() => [this._vouch, host.questions]
|
148
|
+
);
|
130
149
|
}
|
131
150
|
}
|
132
151
|
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { TEMPLATE_VERSION } from '@vouchfor/canvas-video';
|
1
2
|
import { v4 as uuidv4 } from 'uuid';
|
2
3
|
|
3
4
|
import type { Embed } from '..';
|
@@ -127,6 +128,9 @@ class TrackingController implements ReactiveController {
|
|
127
128
|
screenWidth: window.screen.width,
|
128
129
|
referrer: document.referrer,
|
129
130
|
currentUrl: location.href,
|
131
|
+
embedType: 'media-player-embed',
|
132
|
+
embedVersion: packageJson.version,
|
133
|
+
templateVersion: TEMPLATE_VERSION,
|
130
134
|
...utmParams
|
131
135
|
};
|
132
136
|
};
|
@@ -154,8 +158,7 @@ class TrackingController implements ReactiveController {
|
|
154
158
|
'x-uid-tab': tab,
|
155
159
|
'x-uid-request': request,
|
156
160
|
'x-uid-visitor': visitor,
|
157
|
-
'x-reporting-metadata': this._getReportingMetadata()
|
158
|
-
'x-embeds-version': packageJson.version
|
161
|
+
'x-reporting-metadata': this._getReportingMetadata()
|
159
162
|
}
|
160
163
|
})
|
161
164
|
);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { html, LitElement } from 'lit';
|
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
4
|
import { createRef, ref } from 'lit/directives/ref.js';
|
@@ -21,20 +21,31 @@ type EmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'a
|
|
21
21
|
trackingSource?: string;
|
22
22
|
vouchId?: string;
|
23
23
|
templateId?: string;
|
24
|
+
// Index of the questions to include starting from 1
|
25
|
+
questions?: number[];
|
24
26
|
};
|
25
27
|
|
26
28
|
@customElement('vouch-embed')
|
27
29
|
class Embed extends LitElement {
|
30
|
+
static styles = [
|
31
|
+
css`
|
32
|
+
:host {
|
33
|
+
display: flex;
|
34
|
+
}
|
35
|
+
`
|
36
|
+
];
|
37
|
+
|
28
38
|
private _mediaPlayerRef: Ref<MediaPlayer> = createRef();
|
29
39
|
|
30
|
-
@property({ type: Object
|
40
|
+
@property({ type: Object }) data: EmbedProps['data'];
|
31
41
|
@property({ type: String }) vouchId: EmbedProps['vouchId'];
|
32
42
|
@property({ type: String }) templateId: EmbedProps['templateId'];
|
43
|
+
@property({ type: Array }) questions: EmbedProps['questions'];
|
33
44
|
|
34
45
|
@property({ type: String }) env: EmbedProps['env'] = 'prod';
|
35
46
|
@property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
|
36
47
|
@property({ type: Boolean }) disableTracking: EmbedProps['disableTracking'] = false;
|
37
|
-
@property({ type: String }) trackingSource: EmbedProps['trackingSource'] = '
|
48
|
+
@property({ type: String }) trackingSource: EmbedProps['trackingSource'] = 'embedded_player';
|
38
49
|
|
39
50
|
@property({ type: Array }) controls: EmbedProps['controls'];
|
40
51
|
@property({ type: String }) preload: EmbedProps['preload'] = 'auto';
|
@@ -175,7 +186,7 @@ class Embed extends LitElement {
|
|
175
186
|
|
176
187
|
render() {
|
177
188
|
return html`
|
178
|
-
<vmp-
|
189
|
+
<vmp-media-player
|
179
190
|
${ref(this._mediaPlayerRef)}
|
180
191
|
${this.eventController.register()}
|
181
192
|
?autoplay=${this.autoplay}
|
@@ -185,7 +196,7 @@ class Embed extends LitElement {
|
|
185
196
|
aspectRatio=${ifDefined(this.aspectRatio)}
|
186
197
|
preload=${ifDefined(this.preload)}
|
187
198
|
.controls=${this.controls}
|
188
|
-
></vmp-
|
199
|
+
></vmp-media-player>
|
189
200
|
`;
|
190
201
|
}
|
191
202
|
}
|