@lobehub/ui 6.0.0-beta.2 → 6.0.0-beta.4
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/es/Accordion/style.d.mts +3 -3
- package/es/AutoComplete/style.d.mts +1 -1
- package/es/Tabs/style.d.mts +1 -1
- package/es/Video/Video.mjs +46 -0
- package/es/Video/Video.mjs.map +1 -0
- package/es/Video/context.mjs +14 -0
- package/es/Video/context.mjs.map +1 -0
- package/es/Video/index.d.mts +23 -39
- package/es/Video/index.mjs +21 -111
- package/es/Video/index.mjs.map +1 -1
- package/es/Video/parts/Caption.d.mts +9 -0
- package/es/Video/parts/Caption.mjs +37 -0
- package/es/Video/parts/Caption.mjs.map +1 -0
- package/es/Video/parts/CenterPlay.d.mts +8 -0
- package/es/Video/parts/CenterPlay.mjs +34 -0
- package/es/Video/parts/CenterPlay.mjs.map +1 -0
- package/es/Video/parts/Controls.d.mts +9 -0
- package/es/Video/parts/Controls.mjs +128 -0
- package/es/Video/parts/Controls.mjs.map +1 -0
- package/es/Video/parts/Frame.d.mts +9 -0
- package/es/Video/parts/Frame.mjs +101 -0
- package/es/Video/parts/Frame.mjs.map +1 -0
- package/es/Video/parts/HoverPreview.mjs +93 -0
- package/es/Video/parts/HoverPreview.mjs.map +1 -0
- package/es/Video/parts/LoadError.d.mts +8 -0
- package/es/Video/parts/LoadError.mjs +47 -0
- package/es/Video/parts/LoadError.mjs.map +1 -0
- package/es/Video/parts/PlayPauseIcon.mjs +48 -0
- package/es/Video/parts/PlayPauseIcon.mjs.map +1 -0
- package/es/Video/parts/RateMenu.mjs +48 -0
- package/es/Video/parts/RateMenu.mjs.map +1 -0
- package/es/Video/parts/Root.d.mts +9 -0
- package/es/Video/parts/Root.mjs +110 -0
- package/es/Video/parts/Root.mjs.map +1 -0
- package/es/Video/parts/SectionList.d.mts +9 -0
- package/es/Video/parts/SectionList.mjs +32 -0
- package/es/Video/parts/SectionList.mjs.map +1 -0
- package/es/Video/parts/SectionMenu.mjs +63 -0
- package/es/Video/parts/SectionMenu.mjs.map +1 -0
- package/es/Video/parts/Timeline.d.mts +9 -0
- package/es/Video/parts/Timeline.mjs +169 -0
- package/es/Video/parts/Timeline.mjs.map +1 -0
- package/es/Video/store.mjs +241 -0
- package/es/Video/store.mjs.map +1 -0
- package/es/Video/style.mjs +393 -23
- package/es/Video/style.mjs.map +1 -1
- package/es/Video/time.mjs +60 -0
- package/es/Video/time.mjs.map +1 -0
- package/es/Video/type.d.mts +125 -0
- package/es/Video/useControlsIdle.mjs +39 -0
- package/es/Video/useControlsIdle.mjs.map +1 -0
- package/es/Video/useFullscreen.mjs +17 -0
- package/es/Video/useFullscreen.mjs.map +1 -0
- package/es/Video/useKeyboard.mjs +60 -0
- package/es/Video/useKeyboard.mjs.map +1 -0
- package/es/Video/useVideo.d.mts +9 -0
- package/es/Video/useVideo.mjs +17 -0
- package/es/Video/useVideo.mjs.map +1 -0
- package/es/i18n/resources/en/index.d.mts +3 -2
- package/es/i18n/resources/en/index.mjs +4 -2
- package/es/i18n/resources/en/index.mjs.map +1 -1
- package/es/i18n/resources/en/video.d.mts +23 -0
- package/es/i18n/resources/en/video.mjs +24 -0
- package/es/i18n/resources/en/video.mjs.map +1 -0
- package/es/i18n/resources/zhCn/index.d.mts +3 -2
- package/es/i18n/resources/zhCn/index.mjs +4 -2
- package/es/i18n/resources/zhCn/index.mjs.map +1 -1
- package/es/i18n/resources/zhCn/video.d.mts +23 -0
- package/es/i18n/resources/zhCn/video.mjs +24 -0
- package/es/i18n/resources/zhCn/video.mjs.map +1 -0
- package/es/i18n/types.d.mts +2 -1
- package/es/index.d.mts +4 -2
- package/es/index.mjs +2 -1
- package/es/mdx/mdxComponents/Video.d.mts +2 -1
- package/es/mdx/mdxComponents/Video.mjs +5 -3
- package/es/mdx/mdxComponents/Video.mjs.map +1 -1
- package/es/style.css +263 -23
- package/package.json +1 -1
- package/es/Video/marker.stylex.mjs +0 -9
- package/es/Video/marker.stylex.mjs.map +0 -1
package/es/Video/style.mjs
CHANGED
|
@@ -1,47 +1,417 @@
|
|
|
1
|
+
import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
|
|
1
2
|
//#region src/Video/style.ts
|
|
2
|
-
const maskHoverCls = "lobe-video-mask";
|
|
3
3
|
const styles = {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
barButton: {
|
|
5
|
+
kmVPX3: "lb1717udv",
|
|
6
|
+
kaIpWk: "lb1kogg8i",
|
|
7
|
+
ksu8eU: "lbng3xce",
|
|
8
|
+
kUk6DE: "lb1okw0bk",
|
|
9
|
+
kI3sdo: "lb1a2a7pz lb1aklsn",
|
|
10
|
+
kGNEyG: "lb6s0dn4",
|
|
11
|
+
kWkggS: "lbjbqb8w lb19ait8a",
|
|
12
|
+
kMwMTN: "lb1heor9g",
|
|
13
|
+
kkrTdU: "lb1ypdohk",
|
|
14
|
+
k1xSpc: "lb3nfvp2",
|
|
15
|
+
kMv6JI: "lbjb2p0i",
|
|
16
|
+
kGuDYH: "lbfifm61",
|
|
17
|
+
kjj79g: "lbl56j7k",
|
|
18
|
+
kZKoxP: "lb1fgtraw",
|
|
19
|
+
k7Eaqz: "lb1264ykn",
|
|
20
|
+
$$css: true
|
|
21
|
+
},
|
|
22
|
+
barButtonActive: {
|
|
23
|
+
kWkggS: "lb1cqq46t",
|
|
24
|
+
$$css: true
|
|
25
|
+
},
|
|
26
|
+
caption: {
|
|
27
|
+
kaIpWk: "lbur7f20",
|
|
28
|
+
k8WAf4: "lb1vvogim",
|
|
29
|
+
kg3NbH: "lbaope02",
|
|
30
|
+
kmkexE: "lbjltk9q lb9kvfbb",
|
|
31
|
+
kWkggS: "lb1a9z08n",
|
|
32
|
+
kMwMTN: "lbfungia",
|
|
33
|
+
kGuDYH: "lb4z9k3i",
|
|
34
|
+
krVfgx: "lb191j7n5",
|
|
35
|
+
kLqNvP: "lbzwoauc",
|
|
36
|
+
kLWn49: "lb1evy7pa",
|
|
37
|
+
kVAEAm: "lb10l6tqk",
|
|
38
|
+
kY2c9j: "lbhtitgo",
|
|
39
|
+
ks0D6T: "lb1cxeki3",
|
|
40
|
+
$$css: true
|
|
41
|
+
},
|
|
42
|
+
captionItem: {
|
|
43
|
+
keoZOQ: "lb1xmf6yo lb14l7nz5",
|
|
44
|
+
$$css: true
|
|
45
|
+
},
|
|
46
|
+
captionRaised: {
|
|
47
|
+
krVfgx: "lbhjxwu4",
|
|
48
|
+
$$css: true
|
|
49
|
+
},
|
|
50
|
+
captionTitle: {
|
|
51
|
+
kOIVth: "lb17d4w8g",
|
|
52
|
+
kGNEyG: "lb6s0dn4",
|
|
53
|
+
k1xSpc: "lb78zum5",
|
|
54
|
+
k63SB2: "lb1s688f",
|
|
55
|
+
$$css: true
|
|
56
|
+
},
|
|
57
|
+
centerPlay: {
|
|
58
|
+
kaIpWk: "lb16rqkct",
|
|
59
|
+
ksu8eU: "lbng3xce",
|
|
60
|
+
kGNEyG: "lb6s0dn4",
|
|
61
|
+
kWkggS: "lb12cimdh",
|
|
62
|
+
kMwMTN: "lbfungia",
|
|
63
|
+
kkrTdU: "lb1ypdohk",
|
|
64
|
+
k1xSpc: "lb78zum5",
|
|
65
|
+
k87sOh: "lbwa60dl",
|
|
66
|
+
kLqNvP: "lbbudbmw",
|
|
67
|
+
kjj79g: "lbl56j7k",
|
|
68
|
+
kVAEAm: "lb10l6tqk",
|
|
69
|
+
k3aq6I: "lb11lhmoz",
|
|
70
|
+
kY2c9j: "lbhtitgo",
|
|
71
|
+
kZKoxP: "lbnnlda6",
|
|
72
|
+
kzqmXN: "lb15yg21f",
|
|
73
|
+
$$css: true
|
|
74
|
+
},
|
|
75
|
+
chip: {
|
|
76
|
+
kaIpWk: "lb1kogg8i",
|
|
77
|
+
ksu8eU: "lbng3xce",
|
|
78
|
+
kOIVth: "lb195vfkc",
|
|
79
|
+
kVQacm: "lbb3r6kr",
|
|
80
|
+
kGNEyG: "lb6s0dn4",
|
|
81
|
+
kWkggS: "lbhkldz1 lb117i599",
|
|
82
|
+
kMwMTN: "lb1heor9g",
|
|
83
|
+
kkrTdU: "lb1ypdohk",
|
|
84
|
+
k1xSpc: "lb3nfvp2",
|
|
85
|
+
kMv6JI: "lbjb2p0i",
|
|
86
|
+
kGuDYH: "lbfifm61",
|
|
87
|
+
kwRFfy: "lb11lfxj5",
|
|
88
|
+
kZCmMZ: "lbmzvs34",
|
|
89
|
+
kZKoxP: "lbxk0z11",
|
|
90
|
+
ks0D6T: "lb8jryan",
|
|
91
|
+
k7Eaqz: "lbeuugli",
|
|
92
|
+
$$css: true
|
|
93
|
+
},
|
|
94
|
+
chipLabelBackward: {
|
|
95
|
+
k44tkh: "lbw6taxk lb1u6grsq",
|
|
96
|
+
kKVMdj: "lb6ojt31",
|
|
97
|
+
kyAemX: "lbvjiv3b",
|
|
98
|
+
$$css: true
|
|
99
|
+
},
|
|
100
|
+
chipLabelForward: {
|
|
101
|
+
k44tkh: "lbw6taxk lb1u6grsq",
|
|
102
|
+
kKVMdj: "lbvvj72e",
|
|
103
|
+
kyAemX: "lbvjiv3b",
|
|
104
|
+
$$css: true
|
|
105
|
+
},
|
|
106
|
+
chipText: {
|
|
107
|
+
kVQacm: "lbb3r6kr",
|
|
108
|
+
k1xSpc: "lb1lliihq",
|
|
109
|
+
kg5iWk: "lblyipyv",
|
|
110
|
+
khDVqt: "lbuxw1ft",
|
|
111
|
+
$$css: true
|
|
112
|
+
},
|
|
113
|
+
controls: {
|
|
114
|
+
kg3NbH: "lbaope02",
|
|
115
|
+
kMwMTN: "lbfungia",
|
|
116
|
+
kGO01o: "lb10b6aqq",
|
|
117
|
+
$$css: true
|
|
118
|
+
},
|
|
119
|
+
controlsBelow: {
|
|
120
|
+
kWkggS: "lb1aje6hn",
|
|
121
|
+
kLKAdn: "lb1yrsyyn",
|
|
122
|
+
$$css: true
|
|
123
|
+
},
|
|
124
|
+
controlsHidden: {
|
|
125
|
+
kSiTet: "lbg01cxk",
|
|
126
|
+
kfzvcC: "lb47corl",
|
|
127
|
+
$$css: true
|
|
128
|
+
},
|
|
129
|
+
controlsOverlay: {
|
|
130
|
+
kkqhue: "lb17y0mx6",
|
|
131
|
+
kmkexE: "lbzdg38j lb9kvfbb",
|
|
132
|
+
kKwaWg: "lbl8g59w",
|
|
133
|
+
krVfgx: "lb1ey2m1c",
|
|
134
|
+
kLKAdn: "lb13zrc24",
|
|
135
|
+
kVAEAm: "lb10l6tqk",
|
|
136
|
+
kY2c9j: "lbzkaem6",
|
|
137
|
+
$$css: true
|
|
138
|
+
},
|
|
139
|
+
disabled: {
|
|
140
|
+
kSiTet: "lbti2d7y",
|
|
141
|
+
kfzvcC: "lb47corl",
|
|
142
|
+
$$css: true
|
|
143
|
+
},
|
|
144
|
+
dot: {
|
|
145
|
+
kaIpWk: "lb16rqkct",
|
|
146
|
+
kUk6DE: "lb1okw0bk",
|
|
147
|
+
kZKoxP: "lbols6we",
|
|
148
|
+
kzqmXN: "lb1v4s8kt",
|
|
149
|
+
$$css: true
|
|
150
|
+
},
|
|
151
|
+
error: {
|
|
152
|
+
kpwlN0: "lb10a8y8t",
|
|
153
|
+
kOIVth: "lb883omv",
|
|
154
|
+
kGNEyG: "lb6s0dn4",
|
|
155
|
+
kWkggS: "lb1r1mewj",
|
|
156
|
+
kMwMTN: "lb1qk1tsj",
|
|
157
|
+
k1xSpc: "lb78zum5",
|
|
158
|
+
kXwgrk: "lbdt5ytf",
|
|
159
|
+
kGuDYH: "lb4z9k3i",
|
|
160
|
+
kjj79g: "lbl56j7k",
|
|
161
|
+
kVAEAm: "lb10l6tqk",
|
|
162
|
+
kY2c9j: "lboegz02",
|
|
163
|
+
$$css: true
|
|
164
|
+
},
|
|
165
|
+
errorActions: {
|
|
166
|
+
kOIVth: "lb167g77z",
|
|
167
|
+
k1xSpc: "lb78zum5",
|
|
168
|
+
$$css: true
|
|
169
|
+
},
|
|
170
|
+
errorButton: {
|
|
171
|
+
kVAM5u: "lb1e75yku",
|
|
172
|
+
kaIpWk: "lb1kogg8i",
|
|
6
173
|
ksu8eU: "lb1y0btm7",
|
|
7
174
|
kMzoRj: "lbmkeg23",
|
|
8
|
-
|
|
175
|
+
kOIVth: "lb17d4w8g",
|
|
176
|
+
kg3NbH: "lb1awh872",
|
|
177
|
+
kybGjl: "lb1hl2dhg",
|
|
178
|
+
kGNEyG: "lb6s0dn4",
|
|
179
|
+
kWkggS: "lblw48vq lb16gz26q",
|
|
180
|
+
kMwMTN: "lbfungia",
|
|
181
|
+
kkrTdU: "lb1ypdohk",
|
|
182
|
+
k1xSpc: "lb3nfvp2",
|
|
183
|
+
kMv6JI: "lbjb2p0i",
|
|
184
|
+
kGuDYH: "lbfifm61",
|
|
185
|
+
kZKoxP: "lb1fgtraw",
|
|
9
186
|
$$css: true
|
|
10
187
|
},
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
188
|
+
frame: {
|
|
189
|
+
kVQacm: "lbb3r6kr",
|
|
190
|
+
kWkggS: "lb1r1mewj",
|
|
191
|
+
kVAEAm: "lb1n2onr6",
|
|
192
|
+
kzqmXN: "lbh8yej3",
|
|
193
|
+
$$css: true
|
|
194
|
+
},
|
|
195
|
+
frameNo: {
|
|
196
|
+
kMwMTN: "lb1ko894a",
|
|
197
|
+
kMv6JI: "lb2xbw48",
|
|
198
|
+
kcqcaj: "lbss6m8b",
|
|
199
|
+
khDVqt: "lbuxw1ft",
|
|
200
|
+
$$css: true
|
|
201
|
+
},
|
|
202
|
+
hairline: {
|
|
203
|
+
kWkggS: "lb12cimdh",
|
|
204
|
+
k87sOh: "lbfr5jun",
|
|
205
|
+
kfzvcC: "lb47corl",
|
|
206
|
+
kVAEAm: "lb10l6tqk",
|
|
207
|
+
kZKoxP: "lbqu0tyb",
|
|
208
|
+
kzqmXN: "lb1i1rx1s",
|
|
209
|
+
$$css: true
|
|
210
|
+
},
|
|
211
|
+
head: {
|
|
212
|
+
kaIpWk: "lb16rqkct",
|
|
213
|
+
kWkggS: "lb83z2og",
|
|
214
|
+
k87sOh: "lbndqk7f",
|
|
215
|
+
keTefX: "lbw01apr",
|
|
16
216
|
kfzvcC: "lb47corl",
|
|
17
217
|
kVAEAm: "lb10l6tqk",
|
|
218
|
+
kZKoxP: "lb1kpxq89",
|
|
219
|
+
kzqmXN: "lbsmyaan",
|
|
220
|
+
$$css: true
|
|
221
|
+
},
|
|
222
|
+
marker: {
|
|
223
|
+
kmVPX3: "lb1717udv",
|
|
224
|
+
kVAM5u: "lb1bmaitd",
|
|
225
|
+
kaIpWk: "lb16rqkct",
|
|
226
|
+
ksu8eU: "lb1y0btm7",
|
|
227
|
+
kMzoRj: "lbvndefy",
|
|
228
|
+
kI3sdo: "lb1a2a7pz lbwv73w1",
|
|
229
|
+
kmkexE: "lb1ri61pi lb9kvfbb",
|
|
230
|
+
kkrTdU: "lb1ypdohk",
|
|
231
|
+
k87sOh: "lb1qiirwl",
|
|
232
|
+
keTefX: "lb137kccz",
|
|
233
|
+
kVAEAm: "lb10l6tqk",
|
|
234
|
+
k3aq6I: "lbqzx2ld",
|
|
18
235
|
kY2c9j: "lb1vjfegm",
|
|
19
|
-
kZKoxP: "
|
|
20
|
-
kzqmXN: "
|
|
236
|
+
kZKoxP: "lb170jfvy",
|
|
237
|
+
kzqmXN: "lb1fsd2vl",
|
|
238
|
+
$$css: true
|
|
239
|
+
},
|
|
240
|
+
preview: {
|
|
241
|
+
kOIVth: "lb1jnr06f",
|
|
242
|
+
kGNEyG: "lb6s0dn4",
|
|
243
|
+
k1xSpc: "lb78zum5",
|
|
244
|
+
kXwgrk: "lbdt5ytf",
|
|
245
|
+
krVfgx: "lby58vm5",
|
|
246
|
+
keTefX: "lbyjvg7b",
|
|
247
|
+
kfzvcC: "lb47corl",
|
|
248
|
+
kVAEAm: "lb10l6tqk",
|
|
249
|
+
kY2c9j: "lbhtitgo",
|
|
250
|
+
kzqmXN: "lb1f1nzxn",
|
|
251
|
+
$$css: true
|
|
252
|
+
},
|
|
253
|
+
previewCanvas: {
|
|
254
|
+
kVAM5u: "lb165c8v",
|
|
255
|
+
kaIpWk: "lbur7f20",
|
|
256
|
+
ksu8eU: "lb1y0btm7",
|
|
257
|
+
kMzoRj: "lbmkeg23",
|
|
258
|
+
kWkggS: "lb1r1mewj",
|
|
259
|
+
k1xSpc: "lb1lliihq",
|
|
260
|
+
kZKoxP: "lb1q7kiqf",
|
|
261
|
+
kzqmXN: "lb1f1nzxn",
|
|
262
|
+
$$css: true
|
|
263
|
+
},
|
|
264
|
+
previewLabel: {
|
|
265
|
+
kaIpWk: "lb1kogg8i",
|
|
266
|
+
kVQacm: "lbb3r6kr",
|
|
267
|
+
k8WAf4: "lbf4egzd",
|
|
268
|
+
kg3NbH: "lbdqyycr",
|
|
269
|
+
kWkggS: "lb1pl4qn3",
|
|
270
|
+
kGuDYH: "lbfifm61",
|
|
271
|
+
kLWn49: "lb37zpob",
|
|
272
|
+
k9WMMc: "lb2b8uid",
|
|
273
|
+
kg5iWk: "lblyipyv",
|
|
274
|
+
ks0D6T: "lb1gocmvm",
|
|
275
|
+
$$css: true
|
|
276
|
+
},
|
|
277
|
+
previewTime: {
|
|
278
|
+
kMwMTN: "lb1a853yn",
|
|
279
|
+
kMv6JI: "lb2xbw48",
|
|
280
|
+
kGuDYH: "lb1j6dyjg",
|
|
281
|
+
$$css: true
|
|
282
|
+
},
|
|
283
|
+
previewTitle: {
|
|
284
|
+
k63SB2: "lb1s688f",
|
|
285
|
+
khDVqt: "lbuxw1ft",
|
|
21
286
|
$$css: true
|
|
22
287
|
},
|
|
23
288
|
root: {
|
|
24
|
-
kaIpWk: "
|
|
289
|
+
kaIpWk: "lb1ndkxwp",
|
|
290
|
+
kI3sdo: "lb1a2a7pz",
|
|
25
291
|
kVQacm: "lbb3r6kr",
|
|
26
|
-
kWkggS: "
|
|
27
|
-
|
|
28
|
-
|
|
292
|
+
kWkggS: "lb1r1mewj",
|
|
293
|
+
kGVxlE: "lb2pgxse",
|
|
294
|
+
kMwMTN: "lbfungia",
|
|
295
|
+
kLWn49: "lbo5v014",
|
|
29
296
|
kVAEAm: "lb1n2onr6",
|
|
30
|
-
|
|
31
|
-
kskxy: "lbjyiegp",
|
|
32
|
-
ks0D6T: "lb1mm0wbm",
|
|
33
|
-
kAzted: "lb1p3ldy4",
|
|
34
|
-
k7Eaqz: "lbuxkfb3",
|
|
35
|
-
kzqmXN: "lbh8yej3",
|
|
297
|
+
ks0D6T: "lb193iq5w",
|
|
36
298
|
$$css: true
|
|
37
299
|
},
|
|
38
|
-
|
|
300
|
+
rateButton: {
|
|
301
|
+
kg3NbH: "lb1xijbu4",
|
|
302
|
+
kMv6JI: "lb2xbw48",
|
|
303
|
+
$$css: true
|
|
304
|
+
},
|
|
305
|
+
row: {
|
|
306
|
+
kOIVth: "lb1jnr06f",
|
|
307
|
+
kGNEyG: "lb6s0dn4",
|
|
308
|
+
k1xSpc: "lb78zum5",
|
|
309
|
+
kGuDYH: "lbfifm61",
|
|
310
|
+
kZKoxP: "lb10w6t97",
|
|
311
|
+
$$css: true
|
|
312
|
+
},
|
|
313
|
+
sectionChip: {
|
|
314
|
+
kVAM5u: "lb786t8j",
|
|
315
|
+
kaIpWk: "lb1kogg8i",
|
|
316
|
+
ksu8eU: "lb1y0btm7",
|
|
317
|
+
kMzoRj: "lbmkeg23",
|
|
318
|
+
kOIVth: "lb17d4w8g",
|
|
319
|
+
kI3sdo: "lb1a2a7pz lb1aklsn",
|
|
320
|
+
kg3NbH: "lbdqyycr",
|
|
321
|
+
kGNEyG: "lb6s0dn4",
|
|
322
|
+
kWkggS: "lbjbqb8w lb1cbgfi2",
|
|
323
|
+
kMwMTN: "lbjmch63 lb1iih0q2",
|
|
39
324
|
kkrTdU: "lb1ypdohk",
|
|
325
|
+
k1xSpc: "lb3nfvp2",
|
|
326
|
+
kMv6JI: "lbjb2p0i",
|
|
327
|
+
kGuDYH: "lbfifm61",
|
|
328
|
+
kZKoxP: "lbxk0z11",
|
|
329
|
+
$$css: true
|
|
330
|
+
},
|
|
331
|
+
sectionChipActive: {
|
|
332
|
+
kWkggS: "lbxywgfh",
|
|
333
|
+
kMwMTN: "lbfungia",
|
|
334
|
+
$$css: true
|
|
335
|
+
},
|
|
336
|
+
sectionChipTime: {
|
|
337
|
+
kMv6JI: "lb2xbw48",
|
|
338
|
+
kSiTet: "lb1ks1olk",
|
|
339
|
+
$$css: true
|
|
340
|
+
},
|
|
341
|
+
sectionList: {
|
|
342
|
+
kOIVth: "lb17d4w8g",
|
|
343
|
+
k8WAf4: "lb1vvogim",
|
|
344
|
+
kg3NbH: "lbaope02",
|
|
345
|
+
kWkggS: "lb1aje6hn",
|
|
346
|
+
k1xSpc: "lb78zum5",
|
|
347
|
+
kwnvtZ: "lb1a02dak",
|
|
348
|
+
$$css: true
|
|
349
|
+
},
|
|
350
|
+
segment: {
|
|
351
|
+
kaIpWk: "lb1cum3z5",
|
|
352
|
+
kVQacm: "lbb3r6kr",
|
|
353
|
+
kmkexE: "lbgy48lf lb9kvfbb",
|
|
354
|
+
kWkggS: "lbyuqjph",
|
|
355
|
+
k87sOh: "lbfr5jun",
|
|
356
|
+
kVAEAm: "lb10l6tqk",
|
|
357
|
+
kZKoxP: "lbqu0tyb",
|
|
358
|
+
$$css: true
|
|
359
|
+
},
|
|
360
|
+
segmentFill: {
|
|
361
|
+
kYYq5F: "lb10no89f",
|
|
362
|
+
kLqNvP: "lb1o0tod",
|
|
363
|
+
kVAEAm: "lb10l6tqk",
|
|
364
|
+
$$css: true
|
|
365
|
+
},
|
|
366
|
+
segmentHovered: {
|
|
367
|
+
k87sOh: "lb1atx4j1",
|
|
368
|
+
kZKoxP: "lbdk7pt",
|
|
369
|
+
$$css: true
|
|
370
|
+
},
|
|
371
|
+
spacer: {
|
|
372
|
+
kUk6DE: "lb98rzlu",
|
|
373
|
+
$$css: true
|
|
374
|
+
},
|
|
375
|
+
surface: {
|
|
376
|
+
kpwlN0: "lb10a8y8t",
|
|
377
|
+
kkrTdU: "lb1ypdohk",
|
|
378
|
+
kVAEAm: "lb10l6tqk",
|
|
379
|
+
$$css: true
|
|
380
|
+
},
|
|
381
|
+
time: {
|
|
382
|
+
kMwMTN: "lb1a853yn",
|
|
383
|
+
kMv6JI: "lb2xbw48",
|
|
384
|
+
kcqcaj: "lbss6m8b",
|
|
385
|
+
khDVqt: "lbuxw1ft",
|
|
386
|
+
$$css: true
|
|
387
|
+
},
|
|
388
|
+
track: {
|
|
389
|
+
kI3sdo: "lb1a2a7pz",
|
|
390
|
+
kkrTdU: "lb1ypdohk",
|
|
391
|
+
kVAEAm: "lb1n2onr6",
|
|
392
|
+
kFalU9: "lb5ve5x3",
|
|
393
|
+
kZKoxP: "lb1qx5ct2",
|
|
394
|
+
$$css: true
|
|
395
|
+
},
|
|
396
|
+
video: {
|
|
397
|
+
k1xSpc: "lb1lliihq",
|
|
398
|
+
kVIFPx: "lb19kjcj4",
|
|
399
|
+
kZKoxP: "lb5yr21d",
|
|
40
400
|
kzqmXN: "lbh8yej3",
|
|
41
401
|
$$css: true
|
|
42
402
|
}
|
|
43
403
|
};
|
|
404
|
+
const markerColor = (color) => {
|
|
405
|
+
switch (color) {
|
|
406
|
+
case void 0:
|
|
407
|
+
case "info": return cssVar.colorInfo;
|
|
408
|
+
case "success": return cssVar.colorSuccess;
|
|
409
|
+
case "warning": return cssVar.colorWarning;
|
|
410
|
+
case "error": return cssVar.colorError;
|
|
411
|
+
default: return color;
|
|
412
|
+
}
|
|
413
|
+
};
|
|
44
414
|
//#endregion
|
|
45
|
-
export {
|
|
415
|
+
export { markerColor, styles };
|
|
46
416
|
|
|
47
417
|
//# sourceMappingURL=style.mjs.map
|
package/es/Video/style.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Video/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { videoMarker } from './marker.stylex';\n\nexport const maskHoverCls = 'lobe-video-mask';\n\nexport const styles = stylex.create({\n filled: {\n borderColor: cssVar.colorBorderSecondary,\n borderStyle: 'solid',\n borderWidth: 1,\n backgroundColor: cssVar.colorFillTertiary,\n },\n mask: {\n inset: 0,\n transition: 'opacity 0.2s ease',\n backgroundColor: cssVar.colorBgMask,\n opacity: { default: 0, [stylex.when.ancestor(':hover', videoMarker)]: 1 },\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 1,\n height: '100%',\n width: '100%',\n },\n root: {\n borderRadius: cssVar.borderRadius,\n overflow: 'hidden',\n backgroundColor: cssVar.colorFillTertiary,\n marginBlockEnd: '1em',\n marginBlockStart: 0,\n position: 'relative',\n height: 'auto',\n maxHeight: 'var(--video-max-height, 100%)',\n maxWidth: 'var(--video-max-width, 100%)',\n minHeight: 'var(--video-min-height, unset)',\n minWidth: 'var(--video-min-width, unset)',\n width: '100%',\n },\n video: {\n cursor: 'pointer',\n width: '100%',\n },\n});\n"],"mappings":";AAKA,MAAa,eAAe;AAC5B,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Video/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst chromeBar = '#151515';\n\nconst labelFromBelow = stylex.keyframes({\n from: { opacity: 0, transform: 'translateY(70%)' },\n to: { opacity: 1, transform: 'none' },\n});\nconst labelFromAbove = stylex.keyframes({\n from: { opacity: 0, transform: 'translateY(-70%)' },\n to: { opacity: 1, transform: 'none' },\n});\n\n// The chrome stays dark in both themes: it sits on the black letterbox and\n// must not flash white around a dark recording.\nexport const styles = stylex.create({\n barButton: {\n padding: 0,\n borderRadius: 6,\n borderStyle: 'none',\n flex: 'none',\n outline: { 'default': 'none', ':focus-visible': '2px solid rgb(255 255 255 / 60%)' },\n alignItems: 'center',\n backgroundColor: {\n 'default': 'transparent',\n ':hover': 'rgb(255 255 255 / 12%)',\n },\n color: 'inherit',\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'inherit',\n fontSize: 12,\n justifyContent: 'center',\n height: 28,\n minWidth: 28,\n },\n barButtonActive: {\n backgroundColor: 'rgb(255 255 255 / 18%)',\n },\n caption: {\n borderRadius: 8,\n paddingBlock: 8,\n paddingInline: 12,\n transition: { default: 'inset-block-end 200ms ease', [reducedMotion]: 'none' },\n backgroundColor: 'rgb(0 0 0 / 78%)',\n color: '#fff',\n fontSize: 13,\n insetBlockEnd: 16,\n insetInlineStart: 16,\n lineHeight: 1.5,\n position: 'absolute',\n zIndex: 2,\n maxWidth: '70%',\n },\n captionItem: {\n marginBlockStart: { 'default': 8, ':first-child': 0 },\n },\n captionRaised: {\n insetBlockEnd: 76,\n },\n captionTitle: {\n gap: 6,\n alignItems: 'center',\n display: 'flex',\n fontWeight: 600,\n },\n centerPlay: {\n borderRadius: '50%',\n borderStyle: 'none',\n alignItems: 'center',\n backgroundColor: 'rgb(0 0 0 / 55%)',\n color: '#fff',\n cursor: 'pointer',\n display: 'flex',\n insetBlockStart: '50%',\n insetInlineStart: '50%',\n justifyContent: 'center',\n position: 'absolute',\n transform: 'translate(-50%, -50%)',\n zIndex: 2,\n height: 56,\n width: 56,\n },\n chip: {\n borderRadius: 6,\n borderStyle: 'none',\n gap: 2,\n overflow: 'hidden',\n alignItems: 'center',\n backgroundColor: { 'default': 'rgb(255 255 255 / 10%)', ':hover': 'rgb(255 255 255 / 16%)' },\n color: 'inherit',\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'inherit',\n fontSize: 12,\n paddingInlineEnd: 4,\n paddingInlineStart: 8,\n height: 24,\n maxWidth: '40%',\n minWidth: 0,\n },\n chipLabelBackward: {\n animationDuration: { default: '220ms', [reducedMotion]: '0s' },\n animationName: labelFromAbove,\n animationTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',\n },\n chipLabelForward: {\n animationDuration: { default: '220ms', [reducedMotion]: '0s' },\n animationName: labelFromBelow,\n animationTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',\n },\n chipText: {\n overflow: 'hidden',\n display: 'block',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n controls: {\n paddingInline: 12,\n color: '#fff',\n paddingBlockEnd: 6,\n },\n controlsBelow: {\n backgroundColor: chromeBar,\n paddingBlockStart: 6,\n },\n controlsHidden: {\n opacity: 0,\n pointerEvents: 'none',\n },\n controlsOverlay: {\n insetInline: 0,\n transition: { default: 'opacity 200ms ease', [reducedMotion]: 'none' },\n backgroundImage: 'linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 72%))',\n insetBlockEnd: 0,\n paddingBlockStart: 40,\n position: 'absolute',\n zIndex: 3,\n },\n disabled: {\n opacity: 0.4,\n pointerEvents: 'none',\n },\n dot: {\n borderRadius: '50%',\n flex: 'none',\n height: 6,\n width: 6,\n },\n error: {\n inset: 0,\n gap: 10,\n alignItems: 'center',\n backgroundColor: '#000',\n color: '#ccc',\n display: 'flex',\n flexDirection: 'column',\n fontSize: 13,\n justifyContent: 'center',\n position: 'absolute',\n zIndex: 4,\n },\n errorActions: {\n gap: 8,\n display: 'flex',\n },\n errorButton: {\n borderColor: 'rgb(255 255 255 / 20%)',\n borderRadius: 6,\n borderStyle: 'solid',\n borderWidth: 1,\n gap: 6,\n paddingInline: 10,\n textDecoration: 'none',\n alignItems: 'center',\n backgroundColor: { 'default': 'rgb(255 255 255 / 8%)', ':hover': 'rgb(255 255 255 / 14%)' },\n color: '#fff',\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'inherit',\n fontSize: 12,\n height: 28,\n },\n frame: {\n overflow: 'hidden',\n backgroundColor: '#000',\n position: 'relative',\n width: '100%',\n },\n frameNo: {\n color: '#8a8a8a',\n fontFamily: cssVar.fontFamilyCode,\n fontVariantNumeric: 'tabular-nums',\n whiteSpace: 'nowrap',\n },\n hairline: {\n backgroundColor: 'rgb(0 0 0 / 55%)',\n insetBlockStart: 8,\n pointerEvents: 'none',\n position: 'absolute',\n height: 4,\n width: 1,\n },\n head: {\n borderRadius: '50%',\n backgroundColor: '#fff',\n insetBlockStart: 4,\n marginInlineStart: -6,\n pointerEvents: 'none',\n position: 'absolute',\n height: 12,\n width: 12,\n },\n marker: {\n padding: 0,\n borderColor: 'rgb(0 0 0 / 60%)',\n borderRadius: '50%',\n borderStyle: 'solid',\n borderWidth: 1.5,\n outline: { 'default': 'none', ':focus-visible': '2px solid #fff' },\n transition: { default: 'transform 120ms ease', [reducedMotion]: 'none' },\n cursor: 'pointer',\n insetBlockStart: -2,\n marginInlineStart: -5,\n position: 'absolute',\n transform: { 'default': null, ':hover': 'scale(1.3)' },\n zIndex: 1,\n height: 10,\n width: 10,\n },\n preview: {\n gap: 4,\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n insetBlockEnd: 24,\n marginInlineStart: -88,\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 2,\n width: 176,\n },\n previewCanvas: {\n borderColor: '#333',\n borderRadius: 8,\n borderStyle: 'solid',\n borderWidth: 1,\n backgroundColor: '#000',\n display: 'block',\n height: 99,\n width: 176,\n },\n previewLabel: {\n borderRadius: 6,\n overflow: 'hidden',\n paddingBlock: 3,\n paddingInline: 8,\n backgroundColor: 'rgb(0 0 0 / 82%)',\n fontSize: 12,\n lineHeight: 1.4,\n textAlign: 'center',\n textOverflow: 'ellipsis',\n maxWidth: 176,\n },\n previewTime: {\n color: '#ddd',\n fontFamily: cssVar.fontFamilyCode,\n fontSize: 11,\n },\n previewTitle: {\n fontWeight: 600,\n whiteSpace: 'nowrap',\n },\n root: {\n borderRadius: cssVar.borderRadiusLG,\n outline: 'none',\n overflow: 'hidden',\n backgroundColor: '#000',\n boxShadow: { 'default': null, ':focus-visible': `0 0 0 2px ${cssVar.colorPrimaryBorder}` },\n color: '#fff',\n lineHeight: 1,\n position: 'relative',\n maxWidth: '100%',\n },\n rateButton: {\n paddingInline: 6,\n fontFamily: cssVar.fontFamilyCode,\n },\n row: {\n gap: 4,\n alignItems: 'center',\n display: 'flex',\n fontSize: 12,\n height: 32,\n },\n sectionChip: {\n borderColor: 'rgb(255 255 255 / 14%)',\n borderRadius: 6,\n borderStyle: 'solid',\n borderWidth: 1,\n gap: 6,\n outline: { 'default': 'none', ':focus-visible': '2px solid rgb(255 255 255 / 60%)' },\n paddingInline: 8,\n alignItems: 'center',\n backgroundColor: { 'default': 'transparent', ':hover': 'rgb(255 255 255 / 8%)' },\n color: { 'default': '#bbb', ':hover': '#fff' },\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'inherit',\n fontSize: 12,\n height: 24,\n },\n sectionChipActive: {\n backgroundColor: 'rgb(255 255 255 / 16%)',\n color: '#fff',\n },\n sectionChipTime: {\n fontFamily: cssVar.fontFamilyCode,\n opacity: 0.7,\n },\n sectionList: {\n gap: 6,\n paddingBlock: 8,\n paddingInline: 12,\n backgroundColor: '#151515',\n display: 'flex',\n flexWrap: 'wrap',\n },\n segment: {\n borderRadius: 2,\n overflow: 'hidden',\n transition: {\n default: 'height 120ms ease, inset-block-start 120ms ease',\n [reducedMotion]: 'none',\n },\n backgroundColor: 'rgb(255 255 255 / 24%)',\n insetBlockStart: 8,\n position: 'absolute',\n height: 4,\n },\n segmentFill: {\n insetBlock: 0,\n insetInlineStart: 0,\n position: 'absolute',\n },\n segmentHovered: {\n insetBlockStart: 6,\n height: 8,\n },\n spacer: {\n flex: '1',\n },\n surface: {\n inset: 0,\n cursor: 'pointer',\n position: 'absolute',\n },\n time: {\n color: '#ddd',\n fontFamily: cssVar.fontFamilyCode,\n fontVariantNumeric: 'tabular-nums',\n whiteSpace: 'nowrap',\n },\n track: {\n outline: 'none',\n cursor: 'pointer',\n position: 'relative',\n touchAction: 'none',\n height: 20,\n },\n video: {\n display: 'block',\n objectFit: 'contain',\n height: '100%',\n width: '100%',\n },\n});\n\nexport const markerColor = (color?: string) => {\n switch (color) {\n case undefined:\n case 'info': {\n return cssVar.colorInfo;\n }\n case 'success': {\n return cssVar.colorSuccess;\n }\n case 'warning': {\n return cssVar.colorWarning;\n }\n case 'error': {\n return cssVar.colorError;\n }\n default: {\n return color;\n }\n }\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
const pad = (value) => String(value).padStart(2, "0");
|
|
2
|
+
const formatTime = (seconds) => {
|
|
3
|
+
const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
|
|
4
|
+
const hours = Math.floor(total / 3600);
|
|
5
|
+
const minutes = Math.floor(total % 3600 / 60);
|
|
6
|
+
const rest = total % 60;
|
|
7
|
+
return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;
|
|
8
|
+
};
|
|
9
|
+
const frameOf = (seconds, fps) => Math.floor(seconds * fps + 1e-6);
|
|
10
|
+
const steppedTime = (current, frames, duration, fps) => Math.min(Math.max((frameOf(current, fps) + frames + .5) / fps, 0), duration);
|
|
11
|
+
const sortSections = (sections) => [...sections].sort((a, b) => a.start - b.start);
|
|
12
|
+
const sectionAt = (sorted, time) => sorted.findLast((section) => section.start <= time + .01);
|
|
13
|
+
const markersAt = (markers, time, fps) => {
|
|
14
|
+
let latest;
|
|
15
|
+
for (const marker of markers) {
|
|
16
|
+
if (marker.content === void 0 || marker.content === null) continue;
|
|
17
|
+
if (time >= marker.time - .5 / fps && time < marker.time + 2 && (latest === void 0 || marker.time > latest)) latest = marker.time;
|
|
18
|
+
}
|
|
19
|
+
if (latest === void 0) return [];
|
|
20
|
+
return markers.filter((marker) => marker.time === latest && marker.content !== void 0 && marker.content !== null);
|
|
21
|
+
};
|
|
22
|
+
const mergeSegments = (sorted, duration, trackPx, minPx = 12) => {
|
|
23
|
+
if (!(duration > 0)) return {
|
|
24
|
+
hairlines: [],
|
|
25
|
+
segments: []
|
|
26
|
+
};
|
|
27
|
+
const bounds = [
|
|
28
|
+
0,
|
|
29
|
+
...[...new Set(sorted.map((s) => s.start).filter((start) => start > 0 && start < duration))],
|
|
30
|
+
duration
|
|
31
|
+
];
|
|
32
|
+
const segments = [];
|
|
33
|
+
const hairlines = [];
|
|
34
|
+
const minSeconds = trackPx > 0 ? minPx / trackPx * duration : 0;
|
|
35
|
+
let carry = false;
|
|
36
|
+
for (let i = 0; i < bounds.length - 1; i++) {
|
|
37
|
+
const raw = {
|
|
38
|
+
end: bounds[i + 1],
|
|
39
|
+
start: bounds[i]
|
|
40
|
+
};
|
|
41
|
+
const narrow = raw.end - raw.start < minSeconds;
|
|
42
|
+
const last = segments.at(-1);
|
|
43
|
+
if (last && (narrow || carry)) {
|
|
44
|
+
last.end = raw.end;
|
|
45
|
+
hairlines.push(raw.start);
|
|
46
|
+
carry = false;
|
|
47
|
+
continue;
|
|
48
|
+
}
|
|
49
|
+
segments.push(raw);
|
|
50
|
+
carry = narrow;
|
|
51
|
+
}
|
|
52
|
+
return {
|
|
53
|
+
hairlines,
|
|
54
|
+
segments
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
//#endregion
|
|
58
|
+
export { formatTime, frameOf, markersAt, mergeSegments, sectionAt, sortSections, steppedTime };
|
|
59
|
+
|
|
60
|
+
//# sourceMappingURL=time.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"time.mjs","names":[],"sources":["../../src/Video/time.ts"],"sourcesContent":["import type { VideoMarker, VideoSection } from './type';\n\nexport const CAPTION_SECONDS = 2;\nexport const MIN_SEGMENT_PX = 12;\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\nexport const formatTime = (seconds: number) => {\n const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;\n const hours = Math.floor(total / 3600);\n const minutes = Math.floor((total % 3600) / 60);\n const rest = total % 60;\n return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;\n};\n\n// The epsilon absorbs float error at exact frame boundaries.\nexport const frameOf = (seconds: number, fps: number) => Math.floor(seconds * fps + 1e-6);\n\n// Landing on frame centres means repeated steps never skip a frame or show one twice.\nexport const steppedTime = (current: number, frames: number, duration: number, fps: number) =>\n Math.min(Math.max((frameOf(current, fps) + frames + 0.5) / fps, 0), duration);\n\nexport const sortSections = (sections: VideoSection[]) =>\n [...sections].sort((a, b) => a.start - b.start);\n\nexport const sectionAt = (sorted: VideoSection[], time: number) =>\n sorted.findLast((section) => section.start <= time + 0.01);\n\nexport const markersAt = (markers: VideoMarker[], time: number, fps: number): VideoMarker[] => {\n let latest: number | undefined;\n for (const marker of markers) {\n if (marker.content === undefined || marker.content === null) continue;\n const onScreen = time >= marker.time - 0.5 / fps && time < marker.time + CAPTION_SECONDS;\n if (onScreen && (latest === undefined || marker.time > latest)) latest = marker.time;\n }\n if (latest === undefined) return [];\n return markers.filter(\n (marker) => marker.time === latest && marker.content !== undefined && marker.content !== null,\n );\n};\n\nexport interface Segment {\n end: number;\n start: number;\n}\n\nexport const mergeSegments = (\n sorted: VideoSection[],\n duration: number,\n trackPx: number,\n minPx = MIN_SEGMENT_PX,\n): { hairlines: number[]; segments: Segment[] } => {\n if (!(duration > 0)) return { hairlines: [], segments: [] };\n\n const cuts = [\n ...new Set(sorted.map((s) => s.start).filter((start) => start > 0 && start < duration)),\n ];\n const bounds = [0, ...cuts, duration];\n const segments: Segment[] = [];\n const hairlines: number[] = [];\n const minSeconds = trackPx > 0 ? (minPx / trackPx) * duration : 0;\n let carry = false;\n\n for (let i = 0; i < bounds.length - 1; i++) {\n const raw = { end: bounds[i + 1], start: bounds[i] };\n const narrow = raw.end - raw.start < minSeconds;\n const last = segments.at(-1);\n if (last && (narrow || carry)) {\n last.end = raw.end;\n hairlines.push(raw.start);\n carry = false;\n continue;\n }\n segments.push(raw);\n carry = narrow;\n }\n\n return { hairlines, segments };\n};\n"],"mappings":"AAKA,MAAM,OAAO,UAAkB,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;AAE5D,MAAa,cAAc,YAAoB;CAC7C,MAAM,QAAQ,OAAO,SAAS,OAAO,KAAK,UAAU,IAAI,KAAK,MAAM,OAAO,IAAI;CAC9E,MAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI;CACrC,MAAM,UAAU,KAAK,MAAO,QAAQ,OAAQ,EAAE;CAC9C,MAAM,OAAO,QAAQ;CACrB,OAAO,QAAQ,IAAI,GAAG,MAAM,GAAG,IAAI,OAAO,EAAE,GAAG,IAAI,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI,IAAI;AACrF;AAGA,MAAa,WAAW,SAAiB,QAAgB,KAAK,MAAM,UAAU,MAAM,IAAI;AAGxF,MAAa,eAAe,SAAiB,QAAgB,UAAkB,QAC7E,KAAK,IAAI,KAAK,KAAK,QAAQ,SAAS,GAAG,IAAI,SAAS,MAAO,KAAK,CAAC,GAAG,QAAQ;AAE9E,MAAa,gBAAgB,aAC3B,CAAC,GAAG,QAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AAEhD,MAAa,aAAa,QAAwB,SAChD,OAAO,UAAU,YAAY,QAAQ,SAAS,OAAO,GAAI;AAE3D,MAAa,aAAa,SAAwB,MAAc,QAA+B;CAC7F,IAAI;CACJ,KAAK,MAAM,UAAU,SAAS;EAC5B,IAAI,OAAO,YAAY,KAAA,KAAa,OAAO,YAAY,MAAM;EAE7D,IADiB,QAAQ,OAAO,OAAO,KAAM,OAAO,OAAO,OAAO,OAAA,MACjD,WAAW,KAAA,KAAa,OAAO,OAAO,SAAS,SAAS,OAAO;CAClF;CACA,IAAI,WAAW,KAAA,GAAW,OAAO,CAAC;CAClC,OAAO,QAAQ,QACZ,WAAW,OAAO,SAAS,UAAU,OAAO,YAAY,KAAA,KAAa,OAAO,YAAY,IAC3F;AACF;AAOA,MAAa,iBACX,QACA,UACA,SACA,QAAA,OACiD;CACjD,IAAI,EAAE,WAAW,IAAI,OAAO;EAAE,WAAW,CAAC;EAAG,UAAU,CAAC;CAAE;CAK1D,MAAM,SAAS;EAAC;EAAG,GAAG,CAFpB,GAAG,IAAI,IAAI,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,UAAU,QAAQ,KAAK,QAAQ,QAAQ,CAAC,CAE/D;EAAG;CAAQ;CACpC,MAAM,WAAsB,CAAC;CAC7B,MAAM,YAAsB,CAAC;CAC7B,MAAM,aAAa,UAAU,IAAK,QAAQ,UAAW,WAAW;CAChE,IAAI,QAAQ;CAEZ,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,SAAS,GAAG,KAAK;EAC1C,MAAM,MAAM;GAAE,KAAK,OAAO,IAAI;GAAI,OAAO,OAAO;EAAG;EACnD,MAAM,SAAS,IAAI,MAAM,IAAI,QAAQ;EACrC,MAAM,OAAO,SAAS,GAAG,EAAE;EAC3B,IAAI,SAAS,UAAU,QAAQ;GAC7B,KAAK,MAAM,IAAI;GACf,UAAU,KAAK,IAAI,KAAK;GACxB,QAAQ;GACR;EACF;EACA,SAAS,KAAK,GAAG;EACjB,QAAQ;CACV;CAEA,OAAO;EAAE;EAAW;CAAS;AAC/B"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { CSSProperties, Key, ReactEventHandler, ReactNode, Ref } from "react";
|
|
2
|
+
//#region src/Video/type.d.ts
|
|
3
|
+
export interface VideoSection {
|
|
4
|
+
start: number;
|
|
5
|
+
title: string;
|
|
6
|
+
}
|
|
7
|
+
export type VideoMarkerColor = 'success' | 'warning' | 'error' | 'info' | (string & {});
|
|
8
|
+
export interface VideoMarker {
|
|
9
|
+
color?: VideoMarkerColor;
|
|
10
|
+
content?: ReactNode;
|
|
11
|
+
key?: Key;
|
|
12
|
+
label?: ReactNode;
|
|
13
|
+
time: number;
|
|
14
|
+
}
|
|
15
|
+
export type VideoStatus = 'loading' | 'ready' | 'error';
|
|
16
|
+
export interface VideoState {
|
|
17
|
+
activeMarkers: VideoMarker[];
|
|
18
|
+
activeSection?: VideoSection;
|
|
19
|
+
captions: boolean;
|
|
20
|
+
duration: number;
|
|
21
|
+
muted: boolean;
|
|
22
|
+
paused: boolean;
|
|
23
|
+
rate: number;
|
|
24
|
+
size?: {
|
|
25
|
+
height: number;
|
|
26
|
+
width: number;
|
|
27
|
+
};
|
|
28
|
+
status: VideoStatus;
|
|
29
|
+
time: number;
|
|
30
|
+
}
|
|
31
|
+
export interface VideoPlayer {
|
|
32
|
+
getState: () => VideoState;
|
|
33
|
+
pause: () => void;
|
|
34
|
+
play: () => Promise<void>;
|
|
35
|
+
requestFullscreen: () => Promise<void>;
|
|
36
|
+
readonly root: HTMLDivElement | null;
|
|
37
|
+
seek: (seconds: number) => void;
|
|
38
|
+
setCaptions: (captions: boolean) => void;
|
|
39
|
+
setMuted: (muted: boolean) => void;
|
|
40
|
+
setRate: (rate: number) => void;
|
|
41
|
+
step: (frames: number) => void;
|
|
42
|
+
subscribe: (listener: (state: VideoState) => void) => () => void;
|
|
43
|
+
toggle: () => void;
|
|
44
|
+
toggleMute: () => void;
|
|
45
|
+
readonly video: HTMLVideoElement | null;
|
|
46
|
+
}
|
|
47
|
+
export interface VideoMediaProps {
|
|
48
|
+
autoPlay?: boolean;
|
|
49
|
+
loop?: boolean;
|
|
50
|
+
onEnded?: ReactEventHandler<HTMLVideoElement>;
|
|
51
|
+
onError?: ReactEventHandler<HTMLVideoElement>;
|
|
52
|
+
onPause?: ReactEventHandler<HTMLVideoElement>;
|
|
53
|
+
onPlay?: ReactEventHandler<HTMLVideoElement>;
|
|
54
|
+
onTimeUpdate?: ReactEventHandler<HTMLVideoElement>;
|
|
55
|
+
poster?: string;
|
|
56
|
+
preload?: HTMLVideoElement['preload'];
|
|
57
|
+
src: string;
|
|
58
|
+
}
|
|
59
|
+
export interface VideoRootProps extends VideoMediaProps {
|
|
60
|
+
captions?: boolean;
|
|
61
|
+
children?: ReactNode;
|
|
62
|
+
className?: string;
|
|
63
|
+
defaultPlaybackRate?: number;
|
|
64
|
+
fps?: number;
|
|
65
|
+
height?: number | string;
|
|
66
|
+
markers?: VideoMarker[];
|
|
67
|
+
maxHeight?: number;
|
|
68
|
+
muted?: boolean;
|
|
69
|
+
onMarkerClick?: (marker: VideoMarker) => void;
|
|
70
|
+
onMutedChange?: (muted: boolean) => void;
|
|
71
|
+
onRateChange?: (rate: number) => void;
|
|
72
|
+
onRetry?: () => Promise<unknown> | void;
|
|
73
|
+
playbackRates?: number[];
|
|
74
|
+
player?: VideoPlayer;
|
|
75
|
+
ref?: Ref<VideoPlayer>;
|
|
76
|
+
sections?: VideoSection[];
|
|
77
|
+
style?: CSSProperties;
|
|
78
|
+
width?: number | string;
|
|
79
|
+
}
|
|
80
|
+
export interface VideoTimelineProps {
|
|
81
|
+
children?: ReactNode;
|
|
82
|
+
className?: string;
|
|
83
|
+
style?: CSSProperties;
|
|
84
|
+
thumbnails?: boolean;
|
|
85
|
+
}
|
|
86
|
+
export interface VideoControlsProps {
|
|
87
|
+
children?: ReactNode;
|
|
88
|
+
className?: string;
|
|
89
|
+
extra?: ReactNode;
|
|
90
|
+
frameStep?: boolean;
|
|
91
|
+
style?: CSSProperties;
|
|
92
|
+
}
|
|
93
|
+
export interface VideoCaptionProps {
|
|
94
|
+
action?: (marker: VideoMarker) => ReactNode;
|
|
95
|
+
className?: string;
|
|
96
|
+
style?: CSSProperties;
|
|
97
|
+
}
|
|
98
|
+
export interface VideoFrameProps {
|
|
99
|
+
children?: ReactNode;
|
|
100
|
+
className?: string;
|
|
101
|
+
style?: CSSProperties;
|
|
102
|
+
}
|
|
103
|
+
export interface VideoSectionListProps {
|
|
104
|
+
className?: string;
|
|
105
|
+
style?: CSSProperties;
|
|
106
|
+
}
|
|
107
|
+
export interface VideoProps extends Omit<VideoRootProps, 'children'> {
|
|
108
|
+
classNames?: {
|
|
109
|
+
controls?: string;
|
|
110
|
+
frame?: string;
|
|
111
|
+
root?: string;
|
|
112
|
+
timeline?: string;
|
|
113
|
+
};
|
|
114
|
+
frameStep?: boolean;
|
|
115
|
+
overlay?: (state: VideoState) => ReactNode;
|
|
116
|
+
styles?: {
|
|
117
|
+
controls?: CSSProperties;
|
|
118
|
+
frame?: CSSProperties;
|
|
119
|
+
root?: CSSProperties;
|
|
120
|
+
timeline?: CSSProperties;
|
|
121
|
+
};
|
|
122
|
+
thumbnails?: boolean;
|
|
123
|
+
}
|
|
124
|
+
//#endregion
|
|
125
|
+
//# sourceMappingURL=type.d.mts.map
|