@vouchfor/embeds 0.0.0-experiment.93ea548 → 0.0.0-experiment.9821b79
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-8d4ae80d.js +433 -0
- package/dist/es/browser-8d4ae80d.js.map +1 -0
- package/dist/es/embeds.js +7 -1521
- package/dist/es/embeds.js.map +1 -1
- package/dist/es/index-74d4cefa.js +9980 -0
- package/dist/es/index-74d4cefa.js.map +1 -0
- package/dist/es/{components → src/components}/Embed/controllers/fetcher.d.ts +1 -0
- package/dist/es/{components/Embed/controllers/tracking.d.ts → src/components/Embed/controllers/tracking/index.d.ts} +17 -11
- package/dist/es/src/components/Embed/controllers/tracking/utils.d.ts +17 -0
- package/dist/es/{components → src/components}/Embed/index.d.ts +6 -1
- package/dist/es/src/components/Embed/tests/data.d.ts +3 -0
- package/dist/iife/embeds.iife.js +455 -313
- package/dist/iife/embeds.iife.js.map +1 -1
- package/package.json +6 -3
- package/src/components/Embed/Embed.stories.ts +15 -2
- package/src/components/Embed/controllers/fetcher.ts +27 -8
- package/src/components/Embed/controllers/tracking/index.ts +224 -0
- package/src/components/Embed/controllers/tracking/utils.ts +95 -0
- package/src/components/Embed/index.ts +47 -6
- package/src/components/Embed/tests/Embed.spec.ts +78 -0
- package/src/components/Embed/tests/data.ts +183 -0
- package/src/components/Embed/controllers/tracking.ts +0 -306
- /package/dist/es/{index.d.ts → src/index.d.ts} +0 -0
- /package/dist/es/{utils → src/utils}/env.d.ts +0 -0
- /package/dist/es/{utils → src/utils}/events.d.ts +0 -0
@@ -0,0 +1,183 @@
|
|
1
|
+
import type { Vouch } from '@vouchfor/media-player';
|
2
|
+
|
3
|
+
/* eslint-disable max-lines */
|
4
|
+
const data = {
|
5
|
+
id: '85a7f7fb-897c-41a4-be7b-2636cf991f2c',
|
6
|
+
hashId: '6JQEIPeStt',
|
7
|
+
questions: {
|
8
|
+
items: [
|
9
|
+
{
|
10
|
+
id: '5c66bb3a-ed68-41a0-a601-a49865104418',
|
11
|
+
title: `"Emoji": 🇯🇵 🙏
|
12
|
+
Arabic: خَرَجَ الوَلَدُ.
|
13
|
+
Chinese: 简化字不讲理
|
14
|
+
Hebrew: עִבְרִית
|
15
|
+
Japanese Kanji: 漢字
|
16
|
+
Japanese Hiragana: 平仮名
|
17
|
+
Japanese Katakana: 片仮名
|
18
|
+
Devangari Hindi: ॳॴॶॷऎऒऔ
|
19
|
+
Korean Hangul: 정음/正音
|
20
|
+
Cyrillic: АБВГДЕЖЗИКЛМН
|
21
|
+
Greek: αβγδ`,
|
22
|
+
answer: {
|
23
|
+
id: '5c66bb3a-ed68-41a0-a601-a49865104418',
|
24
|
+
label: null,
|
25
|
+
metadata: {
|
26
|
+
duration: 18.5
|
27
|
+
},
|
28
|
+
settings: {
|
29
|
+
endOffset: 0,
|
30
|
+
startOffset: 0
|
31
|
+
},
|
32
|
+
media: {
|
33
|
+
input:
|
34
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418_input.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
35
|
+
video:
|
36
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
37
|
+
playlist:
|
38
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418.m3u8?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
39
|
+
thumbnail:
|
40
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418_poster.0000001.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTYzMjM0Mjl9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=SGA54MFpy4jaqKJHKEuxRfjk-~NBFAh1tdW9Y6uYJwc0LFjDDgX1sraerSyohmVhj~-QVIrglY5BvglDIhrFcLJWGTkgj4vhyLprk1a7EDckv0HBgp-k1ZKvoDtt3wBOzrL4GicfXBkuMpIu5jv5MY3xemlJj2a6V~h65XJuLO4u-xS~McH6rS3mRxoNl4GcYUVm4upre1DGQx-5Suy6Ateoxl6xxoF8kg5EL02KxkIGiRpwXJTvVmUuVF0rpBj-IE40MfmhLBQ1NNSXiqb3-HjpkKwhYPvB5APVh23mzGmqJ0P3jbr2F1cU4Jvlqsjb6GVP61wGOz9ITeWPZkOy8A__'
|
41
|
+
},
|
42
|
+
client: {
|
43
|
+
id: '03540d70-1c75-4867-a235-bac842ed6ce4',
|
44
|
+
name: 'Not Supplied',
|
45
|
+
logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
|
46
|
+
},
|
47
|
+
contact: {
|
48
|
+
id: 'b62f62a3-0cd4-4512-9b52-121cb2f3e72f',
|
49
|
+
name: 'Aaron Williams'
|
50
|
+
},
|
51
|
+
captions: {
|
52
|
+
current:
|
53
|
+
'WEBVTT\n\n1\n00:00:01.549 --> 00:00:05.920\n🇯🇵 🙏 こんにちは 藤森 章 です 。 え ? 今 日本 の え ? 東京 に 住ん で\n\n2\n00:00:05.929 --> 00:00:11.359\nいる 高校 三 年 生 です 。 えっと 父親 が 日本 人 で 母親 が は\n\n3\n00:00:11.619 --> 00:00:13.130\nえー 中国 人 な ん です けれど も 。\n\n4\n00:00:13.939 --> 00:00:17.889\nえ ? 上海 に 行っ た 時 に 国際 学校 に 通っ て い た の で 。\n\n5\n00:00:17.899 --> 00:00:20.389\nえー 英語 を 日本 語 、 中国 語 、 三 語 を しゃ ます\n\n6\n00:00:21.030 --> 00:00:23.549\nえー で 、 その 中 で 経験 し た こと な ん です けれど も 、\n\n7\n00:00:24.040 --> 00:00:26.700\n日本 語 の 素晴らしい ところ って いう の は 、\n\n8\n00:00:27.260 --> 00:00:27.809\nやっぱり\n\n9\n00:00:28.489 --> 00:00:31.540\n和歌 に も 見 られる よう な 多彩 な 表現 力 と\n\n10\n00:00:32.349 --> 00:00:33.819\nえ 奥深い\n\n11\n00:00:34.770 --> 00:00:38.520\nえー 、 感情 表現 など に ある と 思い ます 。 えー これ を 見 て\n\n12\n00:00:38.759 --> 00:00:41.599\n日本 語 に 興味 を 持っ た 方 は 、 是非 その\n\n13\n00:00:43.180 --> 00:00:43.770\n奥深い\n\n14\n00:00:44.299 --> 00:00:45.630\n表現 など を え 、\n\n15\n00:00:46.299 --> 00:00:49.209\n見 て 、 感じ て えー 、 触れ て み て ください 。 ありがとう\n\n16\n00:00:49.220 --> 00:00:49.599\nござい まし た 。\n'
|
54
|
+
}
|
55
|
+
}
|
56
|
+
},
|
57
|
+
{
|
58
|
+
id: '5c66bb3a-ed68-41a0-a601-a49865104418',
|
59
|
+
// title: "What is the business problem you're trying to solve?",
|
60
|
+
answer: {
|
61
|
+
id: '5c66bb3a-ed68-41a0-a601-a49865104418',
|
62
|
+
label: 'Hello this label is overridden',
|
63
|
+
metadata: {
|
64
|
+
duration: 18.5
|
65
|
+
},
|
66
|
+
settings: {
|
67
|
+
endOffset: 0.385945945945946,
|
68
|
+
startOffset: 0.3037837837837838,
|
69
|
+
crop: {
|
70
|
+
x: 0.4,
|
71
|
+
y: 0.4,
|
72
|
+
width: 0.4,
|
73
|
+
height: 0.4
|
74
|
+
}
|
75
|
+
},
|
76
|
+
media: {
|
77
|
+
input:
|
78
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418_input.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
79
|
+
video:
|
80
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
81
|
+
playlist:
|
82
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418.m3u8?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
83
|
+
thumbnail:
|
84
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/5c66bb3a-ed68-41a0-a601-a49865104418/5c66bb3a-ed68-41a0-a601-a49865104418_poster.0000001.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTYzMjM0Mjl9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=SGA54MFpy4jaqKJHKEuxRfjk-~NBFAh1tdW9Y6uYJwc0LFjDDgX1sraerSyohmVhj~-QVIrglY5BvglDIhrFcLJWGTkgj4vhyLprk1a7EDckv0HBgp-k1ZKvoDtt3wBOzrL4GicfXBkuMpIu5jv5MY3xemlJj2a6V~h65XJuLO4u-xS~McH6rS3mRxoNl4GcYUVm4upre1DGQx-5Suy6Ateoxl6xxoF8kg5EL02KxkIGiRpwXJTvVmUuVF0rpBj-IE40MfmhLBQ1NNSXiqb3-HjpkKwhYPvB5APVh23mzGmqJ0P3jbr2F1cU4Jvlqsjb6GVP61wGOz9ITeWPZkOy8A__'
|
85
|
+
},
|
86
|
+
client: {
|
87
|
+
id: '03540d70-1c75-4867-a235-bac842ed6ce4',
|
88
|
+
logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
|
89
|
+
},
|
90
|
+
contact: {
|
91
|
+
id: 'b62f62a3-0cd4-4512-9b52-121cb2f3e72f',
|
92
|
+
name: 'Aaron Williams',
|
93
|
+
roleTitle: 'Software Engineer'
|
94
|
+
},
|
95
|
+
captions: {
|
96
|
+
current:
|
97
|
+
"WEBVTT\r\n\r\n1\r\n00:00:01.710 --> 00:00:05.250\r\nwe are trying to solve, uh, world hunger.\r\n\r\n2\r\n00:00:05.420 --> 00:00:08.369\r\nI think it's an important goal. Uh, we\r\n\r\n3\r\n00:00:08.380 --> 00:00:09.489\r\nalso would like to get rid of\r\n\r\n4\r\n00:00:09.500 --> 00:00:12.050\r\ntuberculosis. Um, in general. And\r\n\r\n5\r\n00:00:12.060 --> 00:00:15.329\r\nprobably malaria, too. Uh, it's gonna be\r\n\r\n6\r\n00:00:15.340 --> 00:00:17.180\r\na couple of weeks, but I think we can do\r\n\r\n7\r\n00:00:17.190 --> 00:00:17.319\r\nit.\r\n"
|
98
|
+
}
|
99
|
+
}
|
100
|
+
},
|
101
|
+
{
|
102
|
+
id: 'e77c81a7-f6ef-4eae-91fc-b620d092d8d6',
|
103
|
+
title: 'What are the priorities for your business/team this quarter?',
|
104
|
+
answer: {
|
105
|
+
id: 'e77c81a7-f6ef-4eae-91fc-b620d092d8d6',
|
106
|
+
label: null,
|
107
|
+
metadata: {
|
108
|
+
duration: 16.167
|
109
|
+
},
|
110
|
+
settings: {
|
111
|
+
endOffset: 0,
|
112
|
+
startOffset: 0
|
113
|
+
},
|
114
|
+
media: {
|
115
|
+
input:
|
116
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/e77c81a7-f6ef-4eae-91fc-b620d092d8d6/e77c81a7-f6ef-4eae-91fc-b620d092d8d6_input.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
117
|
+
video:
|
118
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/e77c81a7-f6ef-4eae-91fc-b620d092d8d6/e77c81a7-f6ef-4eae-91fc-b620d092d8d6.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
119
|
+
playlist:
|
120
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/e77c81a7-f6ef-4eae-91fc-b620d092d8d6/e77c81a7-f6ef-4eae-91fc-b620d092d8d6.m3u8?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
121
|
+
thumbnail:
|
122
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/e77c81a7-f6ef-4eae-91fc-b620d092d8d6/e77c81a7-f6ef-4eae-91fc-b620d092d8d6_poster.0000001.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTYzMjM0Mjl9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=SGA54MFpy4jaqKJHKEuxRfjk-~NBFAh1tdW9Y6uYJwc0LFjDDgX1sraerSyohmVhj~-QVIrglY5BvglDIhrFcLJWGTkgj4vhyLprk1a7EDckv0HBgp-k1ZKvoDtt3wBOzrL4GicfXBkuMpIu5jv5MY3xemlJj2a6V~h65XJuLO4u-xS~McH6rS3mRxoNl4GcYUVm4upre1DGQx-5Suy6Ateoxl6xxoF8kg5EL02KxkIGiRpwXJTvVmUuVF0rpBj-IE40MfmhLBQ1NNSXiqb3-HjpkKwhYPvB5APVh23mzGmqJ0P3jbr2F1cU4Jvlqsjb6GVP61wGOz9ITeWPZkOy8A__'
|
123
|
+
},
|
124
|
+
client: {
|
125
|
+
id: '03540d70-1c75-4867-a235-bac842ed6ce4',
|
126
|
+
name: 'Vouch',
|
127
|
+
logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
|
128
|
+
},
|
129
|
+
contact: {
|
130
|
+
id: 'b62f62a3-0cd4-4512-9b52-121cb2f3e72f',
|
131
|
+
name: 'Aaron Williams',
|
132
|
+
roleTitle: 'Software Engineer'
|
133
|
+
},
|
134
|
+
captions: {
|
135
|
+
current:
|
136
|
+
'WEBVTT\r\n\r\n1\r\n00:00:00.709 --> 00:00:03.059\r\npriorities for this business. Uh, for\r\n\r\n2\r\n00:00:03.069 --> 00:00:06.010\r\nthis quarter, uh, to make more money,\r\n\r\n3\r\n00:00:06.019 --> 00:00:09.050\r\nmore profits, Uh, get everything, uh,\r\n\r\n4\r\n00:00:09.069 --> 00:00:13.439\r\nswept away. All our heuristics should be\r\n\r\n5\r\n00:00:13.529 --> 00:00:15.119\r\ntop of the line.\r\n'
|
137
|
+
}
|
138
|
+
}
|
139
|
+
},
|
140
|
+
{
|
141
|
+
id: '39fd188d-a4dc-43b9-bac8-32fd71bfbc90',
|
142
|
+
title: 'What are your biggest pain points?',
|
143
|
+
answer: {
|
144
|
+
id: '39fd188d-a4dc-43b9-bac8-32fd71bfbc90',
|
145
|
+
label: null,
|
146
|
+
metadata: {
|
147
|
+
duration: 13.792
|
148
|
+
},
|
149
|
+
settings: {
|
150
|
+
endOffset: 0,
|
151
|
+
startOffset: 0
|
152
|
+
},
|
153
|
+
media: {
|
154
|
+
input:
|
155
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/39fd188d-a4dc-43b9-bac8-32fd71bfbc90/39fd188d-a4dc-43b9-bac8-32fd71bfbc90_input.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
156
|
+
video:
|
157
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/39fd188d-a4dc-43b9-bac8-32fd71bfbc90/39fd188d-a4dc-43b9-bac8-32fd71bfbc90.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
158
|
+
playlist:
|
159
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/39fd188d-a4dc-43b9-bac8-32fd71bfbc90/39fd188d-a4dc-43b9-bac8-32fd71bfbc90.m3u8?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTQ1NDI2MzV9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=vh-ZjBnHDhIIKRe4vr8GHppegY2VIRwXvC~QdX8aV9b5eylmQ~I~EmQ2MKwLOWuQ14DHOF~GU8oAfjXTMWgmZdeu1YzHkDHpQzi1b~NLgipJmpYe9-9OR67MC8jvNTva6OQ5PKsdN6tQBn9vWbBOP5gXEMZLtBP1tsopNu7ZpaUduyPiSVIH5VlWi~KRvMRZnQpHWxfVvnvvxifuk8bODDHh1Ba7MJxrAkdoskzP7xVYO3NbROscTPZ5tKnK9SVt2tnpdW0Aqxj1e2kH6WJhqwgxFfCDqDojMEesx-om71R99U0hMjwDHUF~EDEk6L6wrmD0OfXxbeKd-g5FoTPdJg__',
|
160
|
+
thumbnail:
|
161
|
+
'https://d2rxhdlm2q91uk.cloudfront.net/TVik9uTMgE/6JQEIPeStt/39fd188d-a4dc-43b9-bac8-32fd71bfbc90/39fd188d-a4dc-43b9-bac8-32fd71bfbc90_poster.0000001.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMnJ4aGRsbTJxOTF1ay5jbG91ZGZyb250Lm5ldC9UVmlrOXVUTWdFLyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjIwMTYzMjM0Mjl9fX1dfQ__&Key-Pair-Id=K2SWKOH0FA5F6M&Signature=SGA54MFpy4jaqKJHKEuxRfjk-~NBFAh1tdW9Y6uYJwc0LFjDDgX1sraerSyohmVhj~-QVIrglY5BvglDIhrFcLJWGTkgj4vhyLprk1a7EDckv0HBgp-k1ZKvoDtt3wBOzrL4GicfXBkuMpIu5jv5MY3xemlJj2a6V~h65XJuLO4u-xS~McH6rS3mRxoNl4GcYUVm4upre1DGQx-5Suy6Ateoxl6xxoF8kg5EL02KxkIGiRpwXJTvVmUuVF0rpBj-IE40MfmhLBQ1NNSXiqb3-HjpkKwhYPvB5APVh23mzGmqJ0P3jbr2F1cU4Jvlqsjb6GVP61wGOz9ITeWPZkOy8A__'
|
162
|
+
},
|
163
|
+
client: {
|
164
|
+
id: '03540d70-1c75-4867-a235-bac842ed6ce4',
|
165
|
+
name: 'Vouch',
|
166
|
+
logoSrc: 'https://logo.clearbit.com/vouchfor.com?size=260'
|
167
|
+
},
|
168
|
+
contact: {
|
169
|
+
id: 'b62f62a3-0cd4-4512-9b52-121cb2f3e72f',
|
170
|
+
name: 'Aaron Williams',
|
171
|
+
roleTitle: 'Software Engineer'
|
172
|
+
},
|
173
|
+
captions: {
|
174
|
+
current:
|
175
|
+
"WEBVTT\r\n\r\n1\r\n00:00:00.790 --> 00:00:03.269\r\nuh, the biggest pain points this this\r\n\r\n2\r\n00:00:03.279 --> 00:00:07.170\r\nquarter. Um, Jerry has been doing the\r\n\r\n3\r\n00:00:07.179 --> 00:00:09.180\r\nworst work that he's ever been doing.\r\n\r\n4\r\n00:00:09.390 --> 00:00:11.680\r\nAnd we must fire him, Jerry. Goodbye,\r\n\r\n5\r\n00:00:11.689 --> 00:00:12.149\r\nJerry.\r\n"
|
176
|
+
}
|
177
|
+
}
|
178
|
+
}
|
179
|
+
]
|
180
|
+
}
|
181
|
+
} as Vouch;
|
182
|
+
|
183
|
+
export { data };
|
@@ -1,306 +0,0 @@
|
|
1
|
-
/* eslint-disable max-lines */
|
2
|
-
import { v4 as uuidv4 } from 'uuid';
|
3
|
-
|
4
|
-
import type { Embed } from '..';
|
5
|
-
import type { VideoEventDetail } from '@vouchfor/media-player';
|
6
|
-
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
7
|
-
|
8
|
-
import { getEnvUrls } from '~/utils/env';
|
9
|
-
|
10
|
-
const STREAMED_THROTTLE = 10000;
|
11
|
-
|
12
|
-
type EmbedHost = ReactiveControllerHost & Embed;
|
13
|
-
|
14
|
-
type TrackingEvent = 'VOUCH_LOADED' | 'VOUCH_RESPONSE_VIEWED' | 'VIDEO_PLAYED' | 'VIDEO_STREAMED';
|
15
|
-
type TrackingPayload = {
|
16
|
-
vouchId: string;
|
17
|
-
answerId?: string;
|
18
|
-
streamStart?: number;
|
19
|
-
streamEnd?: number;
|
20
|
-
};
|
21
|
-
|
22
|
-
type TimeMap = {
|
23
|
-
[key: string]: number;
|
24
|
-
};
|
25
|
-
|
26
|
-
type BooleanMap = {
|
27
|
-
[key: string]: boolean;
|
28
|
-
};
|
29
|
-
|
30
|
-
class TrackingController implements ReactiveController {
|
31
|
-
host: EmbedHost;
|
32
|
-
|
33
|
-
private _tabId: string | undefined = undefined;
|
34
|
-
private _clientId: string | undefined = undefined;
|
35
|
-
private _visitorId: string | undefined = undefined;
|
36
|
-
|
37
|
-
private _hasPlayed = false;
|
38
|
-
private _hasLoaded: BooleanMap = {};
|
39
|
-
private _answersViewed: BooleanMap = {};
|
40
|
-
private _streamedTime: TimeMap = {};
|
41
|
-
private _streamLatestTime: TimeMap = {};
|
42
|
-
private _streamedPrevTimestamp: TimeMap = {};
|
43
|
-
|
44
|
-
constructor(host: EmbedHost) {
|
45
|
-
this.host = host;
|
46
|
-
host.addController(this);
|
47
|
-
}
|
48
|
-
|
49
|
-
private _findVouchId() {
|
50
|
-
if (this.host.vouch) {
|
51
|
-
if ('uuid' in this.host.vouch) {
|
52
|
-
return this.host.vouch.uuid;
|
53
|
-
}
|
54
|
-
return this.host.vouch.id;
|
55
|
-
}
|
56
|
-
}
|
57
|
-
|
58
|
-
private _createVisitor = (visitorId: string) => {
|
59
|
-
const { publicApiUrl } = getEnvUrls(this.host.env);
|
60
|
-
window.localStorage?.setItem?.('vouch-uid-visitor', visitorId);
|
61
|
-
navigator.sendBeacon(`${publicApiUrl}/api/visitor`, JSON.stringify({ visitorId }));
|
62
|
-
return visitorId;
|
63
|
-
};
|
64
|
-
|
65
|
-
private _getUids() {
|
66
|
-
if (typeof window === 'undefined') {
|
67
|
-
return {
|
68
|
-
client: null,
|
69
|
-
tab: null,
|
70
|
-
request: uuidv4()
|
71
|
-
};
|
72
|
-
}
|
73
|
-
|
74
|
-
// Persisted for a user for the same device + browser, so we can e.g. search for all logs related to that browser
|
75
|
-
const visitorId =
|
76
|
-
this._visitorId || window.localStorage?.getItem?.('vouch-uid-visitor') || this._createVisitor(uuidv4());
|
77
|
-
// Persisted for a user for the same device + browser, so we can e.g. search for all logs related to that browser
|
78
|
-
const clientId = this._clientId || window.localStorage?.getItem?.('vouch-uid-client') || uuidv4();
|
79
|
-
// Persisted in session storage, so we can search for everything the user has done in a specific tab
|
80
|
-
const tabId = this._tabId || window.sessionStorage?.getItem?.('vouch-uid-tab') || uuidv4();
|
81
|
-
// Not persisted, allows us to search for any logs related to a single FE request
|
82
|
-
// E.g. BE should pass this request ID through all other services to be able to group logs
|
83
|
-
const requestId = uuidv4();
|
84
|
-
|
85
|
-
// Cache and persist uids
|
86
|
-
if (visitorId !== this._visitorId) {
|
87
|
-
this._visitorId = visitorId;
|
88
|
-
window.localStorage?.setItem?.('vouch-uid-visitor', visitorId);
|
89
|
-
}
|
90
|
-
|
91
|
-
if (clientId !== this._clientId) {
|
92
|
-
this._clientId = clientId;
|
93
|
-
window.localStorage?.setItem?.('vouch-uid-client', clientId);
|
94
|
-
}
|
95
|
-
|
96
|
-
if (tabId !== this._tabId) {
|
97
|
-
this._tabId = tabId;
|
98
|
-
window.sessionStorage?.setItem?.('vouch-uid-tab', tabId);
|
99
|
-
}
|
100
|
-
|
101
|
-
return {
|
102
|
-
client: clientId,
|
103
|
-
tab: tabId,
|
104
|
-
request: requestId,
|
105
|
-
visitor: visitorId
|
106
|
-
};
|
107
|
-
}
|
108
|
-
|
109
|
-
private _getReportingMetadata = () => {
|
110
|
-
const [country, region] = Intl.DateTimeFormat().resolvedOptions().timeZone?.split?.('/') ?? [];
|
111
|
-
|
112
|
-
const utmParams: any = {};
|
113
|
-
[...new URLSearchParams(location.search).entries()].forEach(([key, value]) => {
|
114
|
-
if (/utm/.test(key)) {
|
115
|
-
const param = key.toLowerCase().replace(/[-_][a-z0-9]/g, (group) => group.slice(-1).toUpperCase());
|
116
|
-
utmParams[param] = value;
|
117
|
-
}
|
118
|
-
});
|
119
|
-
|
120
|
-
return {
|
121
|
-
source: this.host.trackingSource,
|
122
|
-
time: new Date(),
|
123
|
-
region,
|
124
|
-
country,
|
125
|
-
screenHeight: window.screen.height,
|
126
|
-
screenWidth: window.screen.width,
|
127
|
-
referrer: document.referrer,
|
128
|
-
currentUrl: location.href,
|
129
|
-
...utmParams
|
130
|
-
};
|
131
|
-
};
|
132
|
-
|
133
|
-
private _sendTrackingEvent = (event: TrackingEvent, payload: TrackingPayload) => {
|
134
|
-
const { publicApiUrl } = getEnvUrls(this.host.env);
|
135
|
-
const { client, tab, request, visitor } = this._getUids();
|
136
|
-
|
137
|
-
if (this.host.disableTracking) {
|
138
|
-
return;
|
139
|
-
}
|
140
|
-
|
141
|
-
navigator.sendBeacon(
|
142
|
-
`${publicApiUrl}/api/events`,
|
143
|
-
JSON.stringify({
|
144
|
-
event,
|
145
|
-
payload,
|
146
|
-
context: {
|
147
|
-
'x-uid-client': client,
|
148
|
-
'x-uid-tab': tab,
|
149
|
-
'x-uid-request': request,
|
150
|
-
'x-uid-visitor': visitor,
|
151
|
-
'x-reporting-metadata': this._getReportingMetadata()
|
152
|
-
}
|
153
|
-
})
|
154
|
-
);
|
155
|
-
};
|
156
|
-
|
157
|
-
private _handleVouchLoaded = ({ detail: vouchId }: CustomEvent<string>) => {
|
158
|
-
if (!vouchId) {
|
159
|
-
return;
|
160
|
-
}
|
161
|
-
|
162
|
-
// Only send loaded event once per session
|
163
|
-
if (!this._hasLoaded[vouchId]) {
|
164
|
-
this._sendTrackingEvent('VOUCH_LOADED', {
|
165
|
-
vouchId
|
166
|
-
});
|
167
|
-
this._hasLoaded[vouchId] = true;
|
168
|
-
}
|
169
|
-
};
|
170
|
-
|
171
|
-
private _handlePlay = () => {
|
172
|
-
const vouchId = this._findVouchId();
|
173
|
-
|
174
|
-
if (!vouchId) {
|
175
|
-
return;
|
176
|
-
}
|
177
|
-
|
178
|
-
// Only send the video played event once per session
|
179
|
-
if (!this._hasPlayed) {
|
180
|
-
this._sendTrackingEvent('VIDEO_PLAYED', {
|
181
|
-
vouchId,
|
182
|
-
streamStart: this.host.currentTime
|
183
|
-
});
|
184
|
-
this._hasPlayed = true;
|
185
|
-
}
|
186
|
-
};
|
187
|
-
|
188
|
-
private _handleVideoPlay = ({ detail: { id, key, node } }: CustomEvent<VideoEventDetail>) => {
|
189
|
-
const vouchId = this._findVouchId();
|
190
|
-
|
191
|
-
if (!vouchId) {
|
192
|
-
return;
|
193
|
-
}
|
194
|
-
|
195
|
-
// Only increment play count once per session
|
196
|
-
if (!this._answersViewed[key]) {
|
197
|
-
this._sendTrackingEvent('VOUCH_RESPONSE_VIEWED', {
|
198
|
-
vouchId,
|
199
|
-
answerId: id
|
200
|
-
});
|
201
|
-
this._answersViewed[key] = true;
|
202
|
-
}
|
203
|
-
|
204
|
-
this._streamedTime[key] = node.currentTime;
|
205
|
-
this._streamLatestTime[key] = node.currentTime;
|
206
|
-
this._streamedPrevTimestamp[key] = Date.now();
|
207
|
-
};
|
208
|
-
|
209
|
-
private _handleVideoSeeking = ({ detail: { id, key } }: CustomEvent<VideoEventDetail>) => {
|
210
|
-
const vouchId = this._findVouchId();
|
211
|
-
|
212
|
-
if (!vouchId) {
|
213
|
-
return;
|
214
|
-
}
|
215
|
-
|
216
|
-
if (this._streamLatestTime[key]) {
|
217
|
-
this._sendTrackingEvent('VIDEO_STREAMED', {
|
218
|
-
vouchId,
|
219
|
-
answerId: id,
|
220
|
-
streamStart: this._streamedTime[key],
|
221
|
-
streamEnd: this._streamLatestTime[key]
|
222
|
-
});
|
223
|
-
}
|
224
|
-
|
225
|
-
delete this._streamedTime[key];
|
226
|
-
delete this._streamLatestTime[key];
|
227
|
-
delete this._streamedPrevTimestamp[key];
|
228
|
-
};
|
229
|
-
|
230
|
-
private _handleVideoTimeUpdate = ({ detail: { id, key, node } }: CustomEvent<VideoEventDetail>) => {
|
231
|
-
const vouchId = this._findVouchId();
|
232
|
-
|
233
|
-
if (!vouchId) {
|
234
|
-
return;
|
235
|
-
}
|
236
|
-
|
237
|
-
const currentTimestamp = Date.now();
|
238
|
-
if (
|
239
|
-
node.currentTime &&
|
240
|
-
!node.paused &&
|
241
|
-
!this.host.paused &&
|
242
|
-
// Only fire the video seeked event when this video is the active one
|
243
|
-
id === this.host.scene?.video?.id &&
|
244
|
-
// Throttle the frequency that we send streamed events while playing
|
245
|
-
currentTimestamp - this._streamedPrevTimestamp[key] > STREAMED_THROTTLE
|
246
|
-
) {
|
247
|
-
this._sendTrackingEvent('VIDEO_STREAMED', {
|
248
|
-
vouchId,
|
249
|
-
answerId: id,
|
250
|
-
streamStart: this._streamedTime[key],
|
251
|
-
streamEnd: node.currentTime
|
252
|
-
});
|
253
|
-
this._streamedTime[key] = node.currentTime;
|
254
|
-
this._streamedPrevTimestamp[key] = currentTimestamp;
|
255
|
-
}
|
256
|
-
|
257
|
-
this._streamLatestTime[key] = node.currentTime;
|
258
|
-
};
|
259
|
-
|
260
|
-
private _handleVideoPause = ({ detail: { id, key, node } }: CustomEvent<VideoEventDetail>) => {
|
261
|
-
const vouchId = this._findVouchId();
|
262
|
-
|
263
|
-
if (!vouchId) {
|
264
|
-
return;
|
265
|
-
}
|
266
|
-
|
267
|
-
// Don't send a tracking event if the video pauses when seeking backwards
|
268
|
-
if (node.currentTime > this._streamedTime[key]) {
|
269
|
-
// Send a video streamed event any time the video pauses then reset the streamed state
|
270
|
-
// We do this to capture the last bit of time that the video was played between the previous
|
271
|
-
// stream event and the video being paused manually or stopping because it ended
|
272
|
-
this._sendTrackingEvent('VIDEO_STREAMED', {
|
273
|
-
vouchId,
|
274
|
-
answerId: id,
|
275
|
-
streamStart: this._streamedTime[key],
|
276
|
-
streamEnd: node.currentTime
|
277
|
-
});
|
278
|
-
}
|
279
|
-
|
280
|
-
delete this._streamedTime[key];
|
281
|
-
delete this._streamLatestTime[key];
|
282
|
-
delete this._streamedPrevTimestamp[key];
|
283
|
-
};
|
284
|
-
|
285
|
-
hostConnected() {
|
286
|
-
requestAnimationFrame(() => {
|
287
|
-
this.host.addEventListener('vouch:loaded', this._handleVouchLoaded);
|
288
|
-
this.host.mediaPlayer?.addEventListener('play', this._handlePlay);
|
289
|
-
this.host.mediaPlayer?.addEventListener('video:play', this._handleVideoPlay);
|
290
|
-
this.host.mediaPlayer?.addEventListener('video:seeking', this._handleVideoSeeking);
|
291
|
-
this.host.mediaPlayer?.addEventListener('video:pause', this._handleVideoPause);
|
292
|
-
this.host.mediaPlayer?.addEventListener('video:timeupdate', this._handleVideoTimeUpdate);
|
293
|
-
});
|
294
|
-
}
|
295
|
-
|
296
|
-
hostDisconnected() {
|
297
|
-
this.host.removeEventListener('vouch:loaded', this._handleVouchLoaded);
|
298
|
-
this.host.mediaPlayer?.removeEventListener('play', this._handlePlay);
|
299
|
-
this.host.mediaPlayer?.removeEventListener('video:play', this._handleVideoPlay);
|
300
|
-
this.host.mediaPlayer?.removeEventListener('video:seeking', this._handleVideoSeeking);
|
301
|
-
this.host.mediaPlayer?.removeEventListener('video:pause', this._handleVideoPause);
|
302
|
-
this.host.mediaPlayer?.removeEventListener('video:timeupdate', this._handleVideoTimeUpdate);
|
303
|
-
}
|
304
|
-
}
|
305
|
-
|
306
|
-
export { TrackingController };
|
File without changes
|
File without changes
|
File without changes
|