@vouchfor/embeds 0.0.0-experiment.d56f6f1 → 0.0.0-experiment.d6b65ca
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/embeds.js +27 -28
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/src/components/PlayerEmbed/index.d.ts +7 -7
- package/dist/es/src/components/PlayerEmbed/tests/data.d.ts +2 -1
- package/dist/es/src/components/PlayerEmbed/tests/media-data.d.ts +19 -0
- package/dist/iife/dialog-embed/embed.iife.js +2603 -316
- package/dist/iife/dialog-embed/embed.iife.js.map +1 -1
- package/dist/iife/embeds.iife.js +2603 -316
- package/dist/iife/embeds.iife.js.map +1 -1
- package/dist/iife/player-embed/embed.iife.js +2581 -294
- package/dist/iife/player-embed/embed.iife.js.map +1 -1
- package/package.json +6 -5
- package/src/components/PlayerEmbed/MultiEmbed.stories.ts +135 -0
- package/src/components/PlayerEmbed/controllers/tracking/index.ts +7 -7
- package/src/components/PlayerEmbed/index.ts +27 -21
- package/src/components/PlayerEmbed/tests/PlayerEmbed.spec.ts +14 -7
- package/src/components/PlayerEmbed/tests/data.ts +102 -58
- package/src/components/PlayerEmbed/tests/media-data.ts +22 -0
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.d6b65ca",
|
4
4
|
"license": "MIT",
|
5
5
|
"author": "Aaron Williams",
|
6
6
|
"main": "dist/es/embeds.js",
|
@@ -33,7 +33,8 @@
|
|
33
33
|
"storybook": "yarn prebuild && storybook dev -p 6007",
|
34
34
|
"prebuild": "yarn build:deps && yarn generate:manifest",
|
35
35
|
"test": "rm -rf test/lib && yarn prebuild && vite build --mode test && web-test-runner",
|
36
|
-
"test:ci": "yarn test --config web-test-runner.ci.config.js"
|
36
|
+
"test:ci": "yarn test --config web-test-runner.ci.config.js",
|
37
|
+
"test:watch": "yarn test --watch"
|
37
38
|
},
|
38
39
|
"lint-staged": {
|
39
40
|
"**/*.{ts,tsx,js}": "eslint --fix --quiet",
|
@@ -42,8 +43,8 @@
|
|
42
43
|
"dependencies": {
|
43
44
|
"@a11y/focus-trap": "^1.0.5",
|
44
45
|
"@lit/task": "^1.0.0",
|
45
|
-
"@vouchfor/canvas-video": "0.0.0-experiment.
|
46
|
-
"@vouchfor/media-player": "0.0.0-experiment.
|
46
|
+
"@vouchfor/canvas-video": "0.0.0-experiment.d6b65ca",
|
47
|
+
"@vouchfor/media-player": "0.0.0-experiment.d6b65ca",
|
47
48
|
"uuid": "^9.0.1"
|
48
49
|
},
|
49
50
|
"peerDependencies": {
|
@@ -62,7 +63,7 @@
|
|
62
63
|
"@types/mocha": "^10.0.6",
|
63
64
|
"@vouchfor/eslint-config": "^1.0.1",
|
64
65
|
"@vouchfor/prettier-config": "^1.0.1",
|
65
|
-
"@vouchfor/video-utils": "0.0.0-experiment.
|
66
|
+
"@vouchfor/video-utils": "0.0.0-experiment.d6b65ca",
|
66
67
|
"@web/dev-server-esbuild": "^1.0.2",
|
67
68
|
"@web/test-runner": "^0.18.1",
|
68
69
|
"@web/test-runner-browserstack": "^0.7.1",
|
@@ -0,0 +1,135 @@
|
|
1
|
+
import { html } from 'lit';
|
2
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
3
|
+
|
4
|
+
import type { PlayerEmbedProps } from '.';
|
5
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
6
|
+
|
7
|
+
import '.';
|
8
|
+
|
9
|
+
type MultiEmbedArgs = PlayerEmbedProps & {
|
10
|
+
apiKey1?: string;
|
11
|
+
apiKey2?: string;
|
12
|
+
apiKey3?: string;
|
13
|
+
vouchId1?: string;
|
14
|
+
vouchId2?: string;
|
15
|
+
vouchId3?: string;
|
16
|
+
showVouch?: boolean;
|
17
|
+
};
|
18
|
+
|
19
|
+
const _MultiEmbed = ({
|
20
|
+
vouchId1,
|
21
|
+
vouchId2,
|
22
|
+
vouchId3,
|
23
|
+
templateId,
|
24
|
+
questions,
|
25
|
+
preload,
|
26
|
+
autoplay,
|
27
|
+
env,
|
28
|
+
apiKey1,
|
29
|
+
apiKey2,
|
30
|
+
apiKey3,
|
31
|
+
controls,
|
32
|
+
aspectRatio
|
33
|
+
}: MultiEmbedArgs) => {
|
34
|
+
return html`
|
35
|
+
<div style="height: 33vh">
|
36
|
+
<vouch-embed-player
|
37
|
+
env=${ifDefined(env)}
|
38
|
+
apiKey=${ifDefined(apiKey1)}
|
39
|
+
vouchId=${ifDefined(vouchId1)}
|
40
|
+
templateId=${ifDefined(templateId)}
|
41
|
+
.questions=${questions}
|
42
|
+
.controls=${controls}
|
43
|
+
?autoplay=${autoplay}
|
44
|
+
preload=${ifDefined(preload)}
|
45
|
+
aspectRatio=${ifDefined(aspectRatio)}
|
46
|
+
@error=${console.log}
|
47
|
+
></vouch-embed-player>
|
48
|
+
</div>
|
49
|
+
<div style="height: 33vh">
|
50
|
+
<vouch-embed-player
|
51
|
+
env=${ifDefined(env)}
|
52
|
+
apiKey=${ifDefined(apiKey2)}
|
53
|
+
vouchId=${ifDefined(vouchId2)}
|
54
|
+
templateId=${ifDefined(templateId)}
|
55
|
+
.questions=${questions}
|
56
|
+
.controls=${controls}
|
57
|
+
?autoplay=${autoplay}
|
58
|
+
preload=${ifDefined(preload)}
|
59
|
+
aspectRatio=${ifDefined(aspectRatio)}
|
60
|
+
@error=${console.log}
|
61
|
+
></vouch-embed-player>
|
62
|
+
</div>
|
63
|
+
<div style="height: 33vh">
|
64
|
+
<vouch-embed-player
|
65
|
+
env=${ifDefined(env)}
|
66
|
+
apiKey=${ifDefined(apiKey3)}
|
67
|
+
vouchId=${ifDefined(vouchId3)}
|
68
|
+
templateId=${ifDefined(templateId)}
|
69
|
+
.questions=${questions}
|
70
|
+
.controls=${controls}
|
71
|
+
?autoplay=${autoplay}
|
72
|
+
preload=${ifDefined(preload)}
|
73
|
+
aspectRatio=${ifDefined(aspectRatio)}
|
74
|
+
@error=${console.log}
|
75
|
+
></vouch-embed-player>
|
76
|
+
</div>
|
77
|
+
`;
|
78
|
+
};
|
79
|
+
|
80
|
+
// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
|
81
|
+
const meta = {
|
82
|
+
title: 'Embeds',
|
83
|
+
tags: ['autodocs'],
|
84
|
+
render: (args) => _MultiEmbed(args),
|
85
|
+
component: 'vouch-embed-player'
|
86
|
+
} satisfies Meta<PlayerEmbedProps>;
|
87
|
+
|
88
|
+
type Story = StoryObj<MultiEmbedArgs>;
|
89
|
+
|
90
|
+
const MultiPlayer: Story = {
|
91
|
+
args: {
|
92
|
+
env: 'dev',
|
93
|
+
apiKey1: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
|
94
|
+
vouchId1: '6JQEIPeStt',
|
95
|
+
apiKey2: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
|
96
|
+
vouchId2: '6JQEIPeStt',
|
97
|
+
apiKey3: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
|
98
|
+
vouchId3: '6JQEIPeStt',
|
99
|
+
templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
|
100
|
+
questions: [],
|
101
|
+
aspectRatio: 0,
|
102
|
+
preload: 'none',
|
103
|
+
autoplay: false,
|
104
|
+
controls: [
|
105
|
+
'progress',
|
106
|
+
'play-large',
|
107
|
+
'navigation',
|
108
|
+
'play',
|
109
|
+
'volume',
|
110
|
+
'current-time',
|
111
|
+
'duration',
|
112
|
+
'speed',
|
113
|
+
'captions',
|
114
|
+
'fullscreen',
|
115
|
+
'preview',
|
116
|
+
'languages'
|
117
|
+
]
|
118
|
+
},
|
119
|
+
argTypes: {
|
120
|
+
env: {
|
121
|
+
control: 'radio',
|
122
|
+
options: ['local', 'dev', 'staging', 'prod']
|
123
|
+
},
|
124
|
+
preload: {
|
125
|
+
control: 'radio',
|
126
|
+
options: ['auto', 'none']
|
127
|
+
}
|
128
|
+
},
|
129
|
+
parameters: {
|
130
|
+
layout: 'fullscreen'
|
131
|
+
}
|
132
|
+
};
|
133
|
+
|
134
|
+
export default meta;
|
135
|
+
export { MultiPlayer };
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { PlayerEmbed } from '../..';
|
2
|
-
import type {
|
2
|
+
import type { MediaEventDetail } from '@vouchfor/media-player';
|
3
3
|
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
4
4
|
|
5
5
|
import { findVouchId, getReportingMetadata, getUids } from './utils';
|
@@ -41,7 +41,7 @@ class TrackingController implements ReactiveController {
|
|
41
41
|
private _answersViewed: BooleanMap = {};
|
42
42
|
private _streamStartTime: TimeMap = {};
|
43
43
|
private _streamLatestTime: TimeMap = {};
|
44
|
-
private _currentlyPlayingVideo:
|
44
|
+
private _currentlyPlayingVideo: MediaEventDetail | null = null;
|
45
45
|
|
46
46
|
constructor(host: PlayerEmbedHost) {
|
47
47
|
this.host = host;
|
@@ -134,7 +134,7 @@ class TrackingController implements ReactiveController {
|
|
134
134
|
}
|
135
135
|
};
|
136
136
|
|
137
|
-
private _handleVideoPlay = ({ detail: { id, key } }: CustomEvent<
|
137
|
+
private _handleVideoPlay = ({ detail: { id, key } }: CustomEvent<MediaEventDetail>) => {
|
138
138
|
// Only increment play count once per session
|
139
139
|
if (!this._answersViewed[key]) {
|
140
140
|
this._createTrackingEvent('VOUCH_RESPONSE_VIEWED', {
|
@@ -144,12 +144,12 @@ class TrackingController implements ReactiveController {
|
|
144
144
|
}
|
145
145
|
};
|
146
146
|
|
147
|
-
private _handleVideoTimeUpdate = ({ detail: { id, key, node } }: CustomEvent<
|
147
|
+
private _handleVideoTimeUpdate = ({ detail: { id, key, node } }: CustomEvent<MediaEventDetail>) => {
|
148
148
|
if (
|
149
149
|
// We only want to count any time that the video is actually playing
|
150
|
-
!this.host.paused
|
150
|
+
!this.host.paused
|
151
151
|
// Only update the latest time if this event fires for the currently active video
|
152
|
-
id === this.host.scene?.video?.id
|
152
|
+
// id === this.host.scene?.video?.id
|
153
153
|
) {
|
154
154
|
this._currentlyPlayingVideo = { id, key, node };
|
155
155
|
this._streamLatestTime[key] = node.currentTime;
|
@@ -161,7 +161,7 @@ class TrackingController implements ReactiveController {
|
|
161
161
|
}
|
162
162
|
};
|
163
163
|
|
164
|
-
private _handleVideoPause = ({ detail: { id, key } }: CustomEvent<
|
164
|
+
private _handleVideoPause = ({ detail: { id, key } }: CustomEvent<MediaEventDetail>) => {
|
165
165
|
if (this._streamLatestTime[key] > this._streamStartTime[key] + MINIMUM_SEND_THRESHOLD) {
|
166
166
|
this._createTrackingEvent('VIDEO_STREAMED', {
|
167
167
|
answerId: id,
|
@@ -3,8 +3,10 @@ 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';
|
5
5
|
|
6
|
-
import type {
|
6
|
+
import type { TemplateInstance } from '@vouchfor/canvas-video';
|
7
7
|
import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
|
8
|
+
import type { Vouch } from '@vouchfor/video-utils';
|
9
|
+
import type { PropertyValueMap } from 'lit';
|
8
10
|
import type { Environment } from '~/utils/env';
|
9
11
|
|
10
12
|
import { EventForwardController } from './controllers/event-forwarder';
|
@@ -13,10 +15,8 @@ import { TrackingController } from './controllers/tracking';
|
|
13
15
|
|
14
16
|
import '@vouchfor/media-player';
|
15
17
|
|
16
|
-
type PlayerEmbedProps = Pick<
|
17
|
-
|
18
|
-
'data' | 'aspectRatio' | 'language' | 'preload' | 'autoplay' | 'controls'
|
19
|
-
> & {
|
18
|
+
type PlayerEmbedProps = Pick<MediaPlayerProps, 'aspectRatio' | 'language' | 'preload' | 'autoplay' | 'controls'> & {
|
19
|
+
data?: Vouch;
|
20
20
|
env: Environment;
|
21
21
|
apiKey: string;
|
22
22
|
disableTracking?: boolean;
|
@@ -69,6 +69,7 @@ class PlayerEmbed extends LitElement {
|
|
69
69
|
'seeked',
|
70
70
|
'timeupdate',
|
71
71
|
'volumechange',
|
72
|
+
'processing',
|
72
73
|
'waiting',
|
73
74
|
|
74
75
|
'video:loadeddata',
|
@@ -160,20 +161,20 @@ class PlayerEmbed extends LitElement {
|
|
160
161
|
return this._mediaPlayerRef.value?.muted ?? false;
|
161
162
|
}
|
162
163
|
|
163
|
-
get scene(): Scene | null {
|
164
|
-
|
165
|
-
}
|
164
|
+
// get scene(): Scene | null {
|
165
|
+
// return this._mediaPlayerRef.value?.scene ?? null;
|
166
|
+
// }
|
166
167
|
|
167
|
-
get scenes(): Scene[] {
|
168
|
-
|
169
|
-
}
|
168
|
+
// get scenes(): Scene[] {
|
169
|
+
// return this._mediaPlayerRef.value?.scenes ?? [];
|
170
|
+
// }
|
170
171
|
|
171
|
-
get sceneConfig(): Scenes | null {
|
172
|
-
|
173
|
-
}
|
172
|
+
// get sceneConfig(): Scenes | null {
|
173
|
+
// return this._mediaPlayerRef.value?.sceneConfig ?? null;
|
174
|
+
// }
|
174
175
|
|
175
|
-
get
|
176
|
-
return this._mediaPlayerRef.value?.
|
176
|
+
get mediaState() {
|
177
|
+
return this._mediaPlayerRef.value?.mediaState;
|
177
178
|
}
|
178
179
|
|
179
180
|
get mediaPlayer() {
|
@@ -192,9 +193,9 @@ class PlayerEmbed extends LitElement {
|
|
192
193
|
this._mediaPlayerRef.value?.reset(time, play);
|
193
194
|
}
|
194
195
|
|
195
|
-
setScene(index: number) {
|
196
|
-
|
197
|
-
}
|
196
|
+
// setScene(index: number) {
|
197
|
+
// this._mediaPlayerRef.value?.setScene(index);
|
198
|
+
// }
|
198
199
|
|
199
200
|
private _renderStyles() {
|
200
201
|
if (!this.aspectRatio) {
|
@@ -221,6 +222,13 @@ class PlayerEmbed extends LitElement {
|
|
221
222
|
return null;
|
222
223
|
}
|
223
224
|
|
225
|
+
protected willUpdate(changedProperties: PropertyValueMap<PlayerEmbedProps>) {
|
226
|
+
// If the vouch this embed is pointing to changes then reset the player
|
227
|
+
if (changedProperties.has('vouchId') && this.vouchId !== changedProperties.get('vouchId')) {
|
228
|
+
this.reset(0, false);
|
229
|
+
}
|
230
|
+
}
|
231
|
+
|
224
232
|
render() {
|
225
233
|
return html`
|
226
234
|
${this._renderStyles()}
|
@@ -229,8 +237,6 @@ class PlayerEmbed extends LitElement {
|
|
229
237
|
${this.eventController.register()}
|
230
238
|
?autoplay=${this.autoplay}
|
231
239
|
?loading=${this.fetching}
|
232
|
-
.data=${this.vouch}
|
233
|
-
.template=${this.template}
|
234
240
|
aspectRatio=${ifDefined(this.aspectRatio)}
|
235
241
|
preload=${ifDefined(this.preload)}
|
236
242
|
language=${ifDefined(this.language)}
|
@@ -4,7 +4,7 @@ import { html } from 'lit';
|
|
4
4
|
import sinon from 'sinon';
|
5
5
|
|
6
6
|
import type { PlayerEmbed } from '../index.js';
|
7
|
-
import type {
|
7
|
+
import type { MediaMap } from '@vouchfor/media-player';
|
8
8
|
|
9
9
|
import { data } from './data.js';
|
10
10
|
|
@@ -13,7 +13,7 @@ import { data } from './data.js';
|
|
13
13
|
// https://modern-web.dev/guides/test-runner/typescript/
|
14
14
|
import '../../../test/lib/embeds.js';
|
15
15
|
|
16
|
-
function getVideo(videos:
|
16
|
+
function getVideo(videos: MediaMap) {
|
17
17
|
return Object.values(videos)[0];
|
18
18
|
}
|
19
19
|
|
@@ -27,8 +27,8 @@ function playerLoaded(player: PlayerEmbed) {
|
|
27
27
|
);
|
28
28
|
}
|
29
29
|
|
30
|
-
describe('Embeds', () => {
|
31
|
-
it('
|
30
|
+
describe.skip('Embeds', () => {
|
31
|
+
it('Sends correct tracking events', async () => {
|
32
32
|
const player = await fixture<PlayerEmbed>(
|
33
33
|
html`<vouch-embed-player env="dev" .data=${data} aspectratio=${1}></vouch-embed-player>`
|
34
34
|
);
|
@@ -45,17 +45,24 @@ describe('Embeds', () => {
|
|
45
45
|
await waitUntil(
|
46
46
|
() => {
|
47
47
|
// Video plays for 3 seconds
|
48
|
-
return (getVideo(player.mediaPlayer!.
|
48
|
+
return (getVideo(player.mediaPlayer!.media)?.node?.currentTime ?? 0) > 3;
|
49
49
|
},
|
50
50
|
'Video did not play for 3 seconds',
|
51
51
|
{ timeout: 20000 }
|
52
52
|
);
|
53
|
-
expect(getVideo(player.mediaPlayer!.
|
53
|
+
expect(getVideo(player.mediaPlayer!.media)?.node?.paused).eq(false);
|
54
54
|
player.pause();
|
55
|
-
expect(getVideo(player.mediaPlayer!.
|
55
|
+
expect(getVideo(player.mediaPlayer!.media)?.node?.paused).eq(true);
|
56
56
|
expect(sendTrackingSpy.callCount).to.be.eq(0);
|
57
57
|
// Destroy node because events are sent when node is removed from the document
|
58
58
|
player.remove();
|
59
|
+
await waitUntil(
|
60
|
+
() => {
|
61
|
+
return createTrackingSpy.args[2];
|
62
|
+
},
|
63
|
+
'Cleanup event has not fired',
|
64
|
+
{ timeout: 5000 }
|
65
|
+
);
|
59
66
|
expect(sendTrackingSpy.callCount).to.be.eq(1);
|
60
67
|
expect(createTrackingSpy.args[0]).to.eql([
|
61
68
|
'VIDEO_PLAYED',
|