@vanillaskyai/video 0.8.0 → 0.8.1

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +4 -0
  3. package/dist/assets/vanillasky-logo.svg +151 -0
  4. package/dist/react.js +381 -153
  5. package/docs/customization.md +11 -6
  6. package/docs/immersive-interface.md +87 -0
  7. package/docs/reference/design-system.html +115 -0
  8. package/package.json +1 -1
  9. package/starters/video-chat/index.html +2 -1
  10. package/starters/video-chat/package.json +1 -1
  11. package/styles/video-chat.css +650 -246
package/CHANGELOG.md CHANGED
@@ -4,6 +4,10 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
4
4
 
5
5
  ## Unreleased
6
6
 
7
+ ## 0.8.1
8
+
9
+ - Gives the default `VideoChat` an immersive video canvas, floating voice and text input, contextual playback controls, readable on-video subtitles, and unified dark settings and history. Controls yield to the first subtitle and return on interaction; the stage adapts across desktop and mobile.
10
+
7
11
  ## 0.8.0
8
12
 
9
13
  - The default chat silently recovers from optional failures. Non-fatal diagnostics remain available to applications without appearing in the viewer interface; actionable errors remain visible.
package/README.md CHANGED
@@ -71,6 +71,10 @@ export function App() {
71
71
  }
72
72
  ```
73
73
 
74
+ The default interface puts video behind a floating conversation field, with
75
+ on-video subtitles and contextual controls. See the [immersive interface guide](docs/immersive-interface.md)
76
+ for behavior and [customization](docs/customization.md) for application branding.
77
+
74
78
  Use `useVideoChat` when you want a custom interface while keeping the SDK-owned
75
79
  conversation and playback lifecycle. Edit the generated server when you want a
76
80
  different provider. The [provider guide](docs/provider-integration.md) explains
package/dist/assets/vanillasky-logo.svg ADDED
@@ -0,0 +1,151 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="155 113 1690 422" style="enable-background:new 155 113 1690 422;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:url(#SVGID_1_);}
7
+ .st1{fill:url(#SVGID_00000013179247793313673660000009502464524047179686_);}
8
+ .st2{fill:url(#SVGID_00000114075610170620746300000013076857327503059852_);}
9
+ .st3{fill:url(#SVGID_00000039843953785229242880000008403333920122705328_);}
10
+ .st4{fill:url(#SVGID_00000027592513576487483300000016740846738938619792_);}
11
+ .st5{fill:url(#SVGID_00000073682567659135379460000004291859613832367246_);}
12
+ .st6{fill:url(#SVGID_00000043429283857969444190000007842397841101616017_);}
13
+ .st7{fill:#FFFFFF;}
14
+ </style>
15
+ <g>
16
+ <g>
17
+ <g>
18
+
19
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="144.7388" y1="361.5422" x2="1145.3866" y2="308.5907" gradientTransform="matrix(1 0 0 -1 0 650)">
20
+ <stop offset="0" style="stop-color:#E04F8A"/>
21
+ <stop offset="1" style="stop-color:#EC9A2C"/>
22
+ </linearGradient>
23
+ <path class="st0" d="M431.93,298.67c-0.62-0.6-1.36-1.11-2.19-1.57c-2.42-1.32-5.64-1.98-9.7-1.98
24
+ c-16.12,0-30.44-1.06-42.97-3.19c11.83-32.2,17.76-61.92,17.76-89.15c0-18.93-4.45-33.84-13.32-44.74
25
+ c-8.89-10.87-20.89-16.32-36.05-16.32c-12.32,0-23.5,3.19-33.55,9.59c-10.08,6.4-18,16.04-23.8,28.95
26
+ c-5.81,12.89-8.7,28.7-8.7,47.41c0,18.7,3.66,35.21,11,49.54c7.34,14.32,18.23,25.99,32.67,34.97
27
+ c-12.06,25.82-25.33,47.24-39.76,64.28c-14.46,17.06-27.82,25.57-40.14,25.57c-12.06,0-21.12-9.4-27.16-28.23
28
+ c-6.04-18.82-9.06-46.33-9.06-82.56c0-34.55,3.55-73.15,10.66-115.76c0.47-3.79,0.7-6.4,0.7-7.81c0-13.51-7.81-20.25-23.44-20.25
29
+ c-9.47,0-16.15,2.19-20.06,6.57s-6.93,12.74-9.06,25.04c-5.93,33.14-8.87,70.54-8.87,112.21c0,48.78,6.04,87.49,18.1,116.12
30
+ c12.08,28.67,30.42,42.97,55.05,42.97c23.91,0,47.76-11.64,71.56-34.97c23.8-23.33,44.08-52.61,60.9-87.89
31
+ c10.61,2.4,22.33,3.79,35.14,4.21c4.93,0.17,10.02,0.17,15.29,0.04c7.81-0.23,13.55-2.72,17.23-7.45
32
+ c3.66-4.74,5.51-10.17,5.51-16.32C435.67,304.12,434.42,301.04,431.93,298.67z M337.65,276.66
33
+ c-14.91-11.13-22.38-28.29-22.38-51.5c0-13.72,2.02-24.33,6.04-31.78c4.04-7.45,9.25-11.19,15.63-11.19
34
+ c4.49,0,8.06,2.3,10.66,6.93c2.6,4.62,3.91,11.89,3.91,21.83C351.5,228.24,346.87,250.15,337.65,276.66z"/>
35
+
36
+ <linearGradient id="SVGID_00000089552835387640609890000004811904622646062732_" gradientUnits="userSpaceOnUse" x1="137.2535" y1="308.8966" x2="1137.9014" y2="255.9451" gradientTransform="matrix(1 0 0 -1 0 650)">
37
+ <stop offset="0" style="stop-color:#E04F8A"/>
38
+ <stop offset="1" style="stop-color:#EC9A2C"/>
39
+ </linearGradient>
40
+ <path style="fill:url(#SVGID_00000089552835387640609890000004811904622646062732_);" d="M747.9,373.61
41
+ c-1.77-2.85-4.21-4.27-7.28-4.27c-3.55,0-6.74,1.66-9.59,4.96c-4.1,4.91-7.87,9.27-11.32,13.13c-5.77,6.45-10.7,11.47-14.78,15.1
42
+ c-6.51,5.81-12.13,8.7-16.87,8.7c-6.87,0-10.3-4.72-10.3-14.19c0-6.62,2.26-20.25,6.76-40.84c5.21-24.16,7.81-40.84,7.81-50.09
43
+ c0-15.38-7.7-23.08-23.08-23.08c-7.81,0-16.4,2.74-25.74,8.17c-9.36,5.45-18.89,14.57-28.59,27.35
44
+ c-9.72,12.78-18.48,29.36-26.29,49.71c0.94-10.4,2.13-19.17,3.55-26.27c1.43-7.1,3.32-15.38,5.7-24.85
45
+ c3.55-13.27,5.32-21.78,5.32-25.57c0-3.32-0.96-5.57-2.85-6.76c-1.89-1.17-5.21-1.77-9.95-1.77c-8.76,0-15.57,1.6-20.42,4.79
46
+ c-4.85,3.21-8.34,8.23-10.47,15.1c-8.34,26.38-12.7,54.16-13.1,83.34c-0.02,1.45-0.04,2.91-0.04,4.38c0,16,1.08,28.67,3.26,37.97
47
+ c0.64,2.79,1.4,5.3,2.25,7.49c3.66,9.47,9.98,14.19,18.98,14.19c7.34,0,12.74-1.94,16.17-5.85c3.42-3.91,6.44-11.42,9.04-22.55
48
+ c3.57-14.44,8.23-28.18,14.04-41.2c5.79-13.02,11.47-23.5,17.04-31.42c5.57-7.93,9.89-11.91,12.96-11.91
49
+ c2.6,0,3.91,1.91,3.91,5.68c0,5.7-1.55,15.98-4.62,30.91c-3.32,17.04-4.96,28.87-4.96,35.5c0,13.27,3.08,23.38,9.23,30.36
50
+ c6.15,6.98,15.27,10.47,27.35,10.47c14.91,0,28.23-4.02,39.95-12.06c5.17-3.57,10.19-7.55,15.08-11.96
51
+ c6.15-5.62,12.08-11.93,17.78-18.95c4.49-5.19,6.74-12.53,6.74-22C750.56,380.34,749.67,376.44,747.9,373.61z"/>
52
+
53
+ <linearGradient id="SVGID_00000036966288452028103980000006149552115154721948_" gradientUnits="userSpaceOnUse" x1="139.7428" y1="355.9382" x2="1140.3907" y2="302.9867" gradientTransform="matrix(1 0 0 -1 0 650)">
54
+ <stop offset="0" style="stop-color:#E04F8A"/>
55
+ <stop offset="1" style="stop-color:#EC9A2C"/>
56
+ </linearGradient>
57
+ <path style="fill:url(#SVGID_00000036966288452028103980000006149552115154721948_);" d="M833.48,373.61
58
+ c-1.77-2.85-4.21-4.27-7.28-4.27c-3.55,0-6.76,1.66-9.59,4.96c-2.13,2.57-4.17,4.98-6.13,7.27c-7.85,9.13-14.32,16.08-19.44,20.8
59
+ c-6.4,5.93-11.72,8.87-15.98,8.87c-4.49,0-7.7-1.89-9.59-5.68c-1.89-3.77-2.83-9.23-2.83-16.32c0-9.25,2.83-26.87,8.51-52.92
60
+ c4.49-21.53,6.76-35.27,6.76-41.2c0-8.04-6.04-12.08-18.12-12.08c-7.81,0-13.49,1.43-17.04,4.27c-3.55,2.85-6.4,8.06-8.53,15.63
61
+ c-4.27,14.44-7.76,30.01-10.47,46.71c-2.45,15.06-3.79,27.65-4.04,37.8c-0.02,1.09-0.04,2.17-0.04,3.21
62
+ c0,14.04,2.13,25.91,6.38,35.63c1.19,2.74,2.57,5.3,4.1,7.7c6.98,10.89,18.15,16.32,33.55,16.32c17.87,0,36.91-11.02,57.16-33.1
63
+ c2.81-3.08,5.66-6.36,8.53-9.87c4.51-5.19,6.76-12.53,6.76-22C836.14,380.34,835.26,376.44,833.48,373.61z M792.12,210.61
64
+ c-5.45-4.27-12.57-6.4-21.32-6.4c-9.7,0-17.82,2.77-24.33,8.34c-6.51,5.57-9.76,12.49-9.76,20.78c0,8.28,2.49,14.74,7.45,19.34
65
+ c4.98,4.62,12.44,6.93,22.38,6.93c10.17,0,18.34-2.77,24.5-8.34c6.15-5.55,9.23-13.08,9.23-22.55
66
+ C800.27,220.9,797.55,214.86,792.12,210.61z"/>
67
+
68
+ <linearGradient id="SVGID_00000169544057931982140620000003630908253046604471_" gradientUnits="userSpaceOnUse" x1="142.4382" y1="406.8747" x2="1143.0861" y2="353.9232" gradientTransform="matrix(1 0 0 -1 0 650)">
69
+ <stop offset="0" style="stop-color:#E04F8A"/>
70
+ <stop offset="1" style="stop-color:#EC9A2C"/>
71
+ </linearGradient>
72
+ <path style="fill:url(#SVGID_00000169544057931982140620000003630908253046604471_);" d="M947.47,373.61
73
+ c-1.77-2.85-4.21-4.27-7.28-4.27c-3.55,0-6.74,1.66-9.59,4.96c-2.11,2.53-4.17,4.91-6.15,7.13
74
+ c-8.62,9.79-15.93,16.95-21.89,21.46c-7.34,5.57-15.87,8.34-25.57,8.34c-6.17,0-11.13-2.06-14.93-6.21
75
+ c-3.79-4.13-6.51-11.06-8.17-20.78c26.76-36.44,47.95-73.26,63.58-110.44c15.63-37.16,23.44-69.84,23.44-98.02
76
+ c0-19.65-3.26-34.74-9.78-45.27c-6.51-10.53-15.44-15.8-26.8-15.8c-20.14,0-37.48,13.25-52.03,39.76
77
+ c-14.57,26.51-25.57,58.24-33.03,95.17c-7.45,36.93-11.19,69.84-11.19,98.74c0,11.95,0.79,23,2.4,33.18
78
+ c2.06,13.4,5.53,25.27,10.38,35.63c0.74,1.6,1.51,3.17,2.32,4.7c10.06,18.95,25.5,28.4,46.35,28.4
79
+ c15.14,0,28.69-4.02,40.65-12.06c8.68-5.85,16.89-12.87,24.65-21.1c2.91-3.09,5.77-6.38,8.57-9.81c4.49-5.19,6.74-12.53,6.74-22
80
+ C950.13,380.34,949.24,376.44,947.47,373.61z M859.92,252.51c5.21-29.12,11.25-53.5,18.12-73.15
81
+ c6.87-19.66,13.02-29.48,18.48-29.48c6.62,0,9.95,9,9.95,26.99c0,22.97-4.98,48.35-14.93,76.17s-23.33,55.58-40.12,83.28
82
+ C851.88,309.55,854.71,281.62,859.92,252.51z"/>
83
+
84
+ <linearGradient id="SVGID_00000096039497548379239460000017680087458738225565_" gradientUnits="userSpaceOnUse" x1="142.7565" y1="412.8883" x2="1143.4043" y2="359.9368" gradientTransform="matrix(1 0 0 -1 0 650)">
85
+ <stop offset="0" style="stop-color:#E04F8A"/>
86
+ <stop offset="1" style="stop-color:#EC9A2C"/>
87
+ </linearGradient>
88
+ <path style="fill:url(#SVGID_00000096039497548379239460000017680087458738225565_);" d="M1061.45,373.61
89
+ c-1.77-2.85-4.21-4.27-7.27-4.27c-3.57,0-6.76,1.66-9.61,4.96c-7.17,8.53-13.55,15.47-19.12,20.83
90
+ c-3.25,3.13-6.23,5.72-8.93,7.76c-7.34,5.57-15.87,8.34-25.57,8.34c-6.15,0-11.13-2.06-14.91-6.21
91
+ c-3.79-4.13-6.53-11.06-8.17-20.78c26.74-36.44,47.93-73.26,63.56-110.44c15.63-37.16,23.44-69.84,23.44-98.02
92
+ c0-19.65-3.25-34.74-9.76-45.27c-6.53-10.53-15.46-15.8-26.82-15.8c-20.12,0-37.46,13.25-52.03,39.76
93
+ c-14.55,26.51-25.57,58.24-33.03,95.17c-7.45,36.93-11.19,69.84-11.19,98.74c0,11.89,0.79,22.91,2.38,33.04
94
+ c2.06,13.42,5.53,25.33,10.38,35.71c0.74,1.62,1.53,3.21,2.34,4.76c10.06,18.95,25.51,28.4,46.35,28.4
95
+ c15.15,0,28.7-4.02,40.65-12.06c3.79-2.57,7.51-5.34,11.12-8.36c7.78-6.45,15.14-13.97,22.1-22.55c4.49-5.19,6.74-12.53,6.74-22
96
+ C1064.11,380.34,1063.23,376.44,1061.45,373.61z M973.93,252.51c5.19-29.12,11.23-53.5,18.1-73.15
97
+ c6.87-19.66,13.02-29.48,18.48-29.48c6.62,0,9.95,9,9.95,26.99c0,22.97-4.98,48.35-14.91,76.17
98
+ c-9.95,27.82-23.33,55.58-40.14,83.28C965.87,309.55,968.72,281.62,973.93,252.51z"/>
99
+
100
+ <linearGradient id="SVGID_00000044864459818499834480000014750879372102463397_" gradientUnits="userSpaceOnUse" x1="138.5894" y1="334.1405" x2="1139.2372" y2="281.189" gradientTransform="matrix(1 0 0 -1 0 650)">
101
+ <stop offset="0" style="stop-color:#E04F8A"/>
102
+ <stop offset="1" style="stop-color:#EC9A2C"/>
103
+ </linearGradient>
104
+ <path style="fill:url(#SVGID_00000044864459818499834480000014750879372102463397_);" d="M1202.52,382.74
105
+ c-4.43,5.76-10.3,12.57-17.23,18.7c0,0-11.12,9.85-21.38,9.79c-2.3,0-4.09-0.91-4.09-0.91c-1.06-0.53-2-1.28-2.83-2.28
106
+ c-1.77-2.13-2.66-4.96-2.66-8.53c0-10.64,2.72-29.59,8.17-56.8c4.06-20.27,7.44-30.11,5.32-35.52
107
+ c-7.26-18.57-37.45-27.07-60.7-23.77c-15.58,2.21-26.43,9.3-33.58,14.36c-14.57,10.3-26.23,23.91-34.99,40.84
108
+ s-13.13,34.88-13.13,53.8c0,0.91,0.02,1.81,0.06,2.72c0.36,13.78,3.62,25.36,9.81,34.74c1,1.55,2.09,3.02,3.26,4.45
109
+ c8.76,10.64,20.48,15.97,35.16,15.97c18.7,0,34.21-9.95,46.52-29.82c3.32,9.23,8.23,16.51,14.74,21.83
110
+ c6.51,5.32,13.68,7.98,21.49,7.98c10.17,0,20.7-4.13,31.61-12.42c8.4-6.38,16.42-13.89,24.1-22.53
111
+ C1205.62,403.16,1203.28,391.23,1202.52,382.74z M1111.71,380.7c-2.13,10.19-5.57,18.34-10.3,24.51
112
+ c-4.74,6.15-9.7,9.23-14.91,9.23c-5.21,0-9.3-1.77-12.25-5.32c-2.96-3.57-4.45-9-4.45-16.34c0-13.27,2.49-25.8,7.45-37.65
113
+ c4.98-11.83,11.66-21.36,20.08-28.59c8.4-7.21,17.57-10.95,27.51-11.17L1111.71,380.7z"/>
114
+
115
+ <linearGradient id="SVGID_00000013884149551300710510000009456133956152894612_" gradientUnits="userSpaceOnUse" x1="132.0788" y1="299.9178" x2="1132.7267" y2="246.9664" gradientTransform="matrix(1 0 0 -1 0 650)">
116
+ <stop offset="0" style="stop-color:#E04F8A"/>
117
+ <stop offset="1" style="stop-color:#EC9A2C"/>
118
+ </linearGradient>
119
+ <path style="fill:url(#SVGID_00000013884149551300710510000009456133956152894612_);" d="M549.29,382.74
120
+ c-4.43,5.76-10.3,12.57-17.23,18.7c0,0-11.12,9.85-21.38,9.79c-2.3,0-4.09-0.91-4.09-0.91c-1.06-0.53-2-1.28-2.83-2.28
121
+ c-1.77-2.13-2.66-4.96-2.66-8.53c0-10.64,2.72-29.59,8.17-56.8c4.06-20.27,7.44-30.11,5.32-35.52
122
+ c-7.26-18.57-37.45-27.07-60.7-23.77c-15.58,2.21-26.43,9.3-33.58,14.36c-14.57,10.3-26.23,23.91-34.99,40.84
123
+ c-8.76,16.93-13.13,34.88-13.13,53.8c0,0.91,0.02,1.81,0.06,2.72c0.36,13.78,3.62,25.36,9.81,34.74c1,1.55,2.09,3.02,3.26,4.45
124
+ c8.76,10.64,20.48,15.97,35.16,15.97c18.7,0,34.21-9.95,46.52-29.82c3.32,9.23,8.23,16.51,14.74,21.83
125
+ c6.51,5.32,13.68,7.98,21.49,7.98c10.17,0,20.7-4.13,31.61-12.42c8.4-6.38,16.42-13.89,24.1-22.53
126
+ C552.39,403.16,550.05,391.23,549.29,382.74z M458.48,380.7c-2.13,10.19-5.57,18.34-10.3,24.51c-4.74,6.15-9.7,9.23-14.91,9.23
127
+ s-9.3-1.77-12.25-5.32c-2.96-3.57-4.45-9-4.45-16.34c0-13.27,2.49-25.8,7.45-37.65c4.98-11.83,11.66-21.36,20.08-28.59
128
+ c8.4-7.21,17.57-10.95,27.51-11.17L458.48,380.7z"/>
129
+ </g>
130
+ </g>
131
+ <g>
132
+ <path class="st7" d="M1288.59,230.72c3.64-2.91,7.9-5.1,12.76-6.56c4.86-1.46,9.99-2.19,15.32-2.19c8.53,0,15.88,1.15,22.09,3.45
133
+ c6.2,2.33,11.84,5.43,16.97,9.3c5.1,3.9,9.77,8.46,14.03,13.68c4.25,5.24,8.69,10.9,13.32,16.97l37.22-32.83
134
+ c-7.31-8.51-14.59-16.05-21.9-22.63c-7.28-6.56-15.09-12.15-23.33-16.78c-8.27-4.61-17.11-8.13-26.46-10.57
135
+ c-9.38-2.42-19.88-3.64-31.56-3.64c-11.91,0-23.59,1.69-35.04,5.1c-11.42,3.41-21.64,8.39-30.64,14.97
136
+ c-9,6.56-16.24,14.83-21.71,24.79c-5.45,9.99-8.2,21.52-8.2,34.66c0,13.63,3.41,25.05,10.22,34.31
137
+ c6.81,9.23,15.37,17.08,25.71,23.52c10.34,6.46,21.55,11.91,33.58,16.42c12.03,4.49,23.22,8.93,33.55,13.32
138
+ c10.34,4.37,18.92,9.05,25.73,14.03c6.79,5,10.22,11.26,10.22,18.8c0,5.59-1.41,10.39-4.21,14.4c-2.8,4.02-6.27,7.35-10.39,10.03
139
+ c-4.16,2.68-8.76,4.7-13.86,6.02c-5.12,1.34-10.1,2.02-14.97,2.02c-9,0-17.08-1.29-24.27-3.83c-1.36-0.49-10.55-3.69-19.5-10.22
140
+ c-19.69-14.38-26.97-36.63-29.11-44.13c-10.97,9.4-21.92,18.8-32.9,28.2c1.36,9.85,5.4,26.67,18.59,40.74
141
+ c8.27,8.81,17.53,13.6,24.63,17.51c8.65,4.75,17.93,8.27,27.92,10.57c9.96,2.3,21.15,3.48,33.55,3.48
142
+ c10.71,0,21.9-1.72,33.58-5.12c11.68-3.38,22.37-8.39,32.1-14.94c9.73-6.58,17.76-14.66,24.08-24.27
143
+ c6.32-9.59,9.47-20.61,9.47-33.01c0-13.61-3.41-25.05-10.2-34.28c-6.81-9.26-15.39-17.04-25.73-23.36
144
+ c-10.34-6.32-21.48-11.68-33.37-16.05c-11.94-4.37-23.05-8.69-33.39-12.95c-10.34-4.25-18.92-8.95-25.73-14.05
145
+ c-6.81-5.1-10.2-11.42-10.2-18.96c0-5.59,1.08-10.6,3.27-14.97C1282.01,237.3,1284.95,233.65,1288.59,230.72z"/>
146
+ <path class="st7" d="M1787.65,254.8l-53.27,119.3l-53.62-119.3h-35.39h-20.8h-45.23l-78.06,62.39c0,0-0.82-146.55-1.15-154.17
147
+ c-8.72,7.61-17.41,15.23-26.13,22.84c-8.67,7.59-17.32,15.16-25.99,22.72v30.52v207.95h53.27V374.1l12.38-10.22l63.49,83.18h61.28
148
+ l-85.72-115.28l77.47-64.36l75.73,170.52l-41.59,94.86h55.45l123.31-278L1787.65,254.8L1787.65,254.8z"/>
149
+ </g>
150
+ </g>
151
+ </svg>