@design-edito/tools 0.3.10 → 0.3.12

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 (133) hide show
  1. package/agnostic/colors/index.d.ts +2 -2
  2. package/agnostic/colors/index.js +2 -2
  3. package/agnostic/css/clss/index.d.ts +53 -1
  4. package/agnostic/css/clss/index.js +1 -1
  5. package/agnostic/css/index.d.ts +1 -1
  6. package/agnostic/css/index.js +1 -1
  7. package/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts +15 -15
  8. package/agnostic/html/hyper-json/smart-tags/coalesced/index.js +15 -15
  9. package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts +6 -6
  10. package/agnostic/html/hyper-json/smart-tags/isolated/index.js +6 -6
  11. package/agnostic/index.d.ts +4 -4
  12. package/agnostic/index.js +4 -4
  13. package/agnostic/misc/assert/index.d.ts +3 -0
  14. package/agnostic/misc/index.d.ts +2 -2
  15. package/agnostic/misc/index.js +2 -2
  16. package/agnostic/misc/logs/index.d.ts +1 -1
  17. package/agnostic/misc/logs/index.js +1 -1
  18. package/agnostic/misc/logs/logger/index.d.ts +10 -0
  19. package/agnostic/misc/logs/logger/index.js +40 -10
  20. package/agnostic/misc/logs/styles/index.d.ts +1 -0
  21. package/agnostic/misc/logs/styles/index.js +27 -9
  22. package/agnostic/numbers/index.d.ts +2 -2
  23. package/agnostic/numbers/index.js +2 -2
  24. package/agnostic/objects/index.d.ts +2 -2
  25. package/agnostic/objects/index.js +2 -2
  26. package/agnostic/optim/index.d.ts +1 -1
  27. package/agnostic/optim/index.js +1 -1
  28. package/agnostic/random/index.d.ts +1 -1
  29. package/agnostic/random/index.js +1 -1
  30. package/agnostic/sanitization/index.d.ts +2 -2
  31. package/agnostic/sanitization/index.js +2 -2
  32. package/agnostic/strings/index.d.ts +1 -1
  33. package/agnostic/strings/index.js +1 -1
  34. package/agnostic/time/index.d.ts +1 -1
  35. package/agnostic/time/index.js +1 -1
  36. package/agnostic/time/transitions/index.d.ts +3 -3
  37. package/agnostic/time/transitions/index.js +4 -4
  38. package/components/BeforeAfter/index.controlled.d.ts +46 -0
  39. package/components/BeforeAfter/index.d.ts +55 -0
  40. package/components/BeforeAfter/index.js +40 -0
  41. package/components/BeforeAfter/utils.d.ts +4 -0
  42. package/components/Disclaimer/index.d.ts +45 -0
  43. package/components/Disclaimer/index.js +70 -0
  44. package/components/Disclaimer/styles.module.css +0 -0
  45. package/components/Drawer/index.d.ts +45 -0
  46. package/components/Drawer/index.js +82 -0
  47. package/components/Drawer/styles.module.css +0 -0
  48. package/components/EventListener/index.d.ts +20 -3
  49. package/components/EventListener/index.js +15 -22
  50. package/components/Gallery/index.d.ts +67 -0
  51. package/components/Gallery/index.js +173 -0
  52. package/components/Gallery/styles.module.css +33 -0
  53. package/components/Gallery/utils.d.ts +1 -0
  54. package/components/Image/index.d.ts +60 -0
  55. package/components/Image/index.js +99 -0
  56. package/components/Image/styles.module.css +0 -0
  57. package/components/IntersectionObserver/index.d.ts +48 -11
  58. package/components/IntersectionObserver/index.js +13 -22
  59. package/components/Paginator/index.d.ts +72 -0
  60. package/components/Paginator/index.js +116 -0
  61. package/components/Paginator/styles.module.css +9 -0
  62. package/components/ResizeObserver/index.d.ts +27 -0
  63. package/components/ResizeObserver/index.js +81 -0
  64. package/components/Scrllgngn/index.d.ts +123 -0
  65. package/components/Scrllgngn/index.js +175 -0
  66. package/components/Scrllgngn/styles.module.css +74 -0
  67. package/components/ScrollListener/index.d.ts +47 -0
  68. package/components/ScrollListener/index.js +110 -0
  69. package/components/ScrollListener/styles.module.css +0 -0
  70. package/components/ScrollListener/utils.d.ts +41 -0
  71. package/components/Sequencer/index.controlled.d.ts +78 -0
  72. package/components/Sequencer/index.d.ts +85 -0
  73. package/components/Sequencer/index.js +109 -0
  74. package/components/Sequencer/styles.module.css +0 -0
  75. package/components/ShadowRoot/index.d.ts +35 -0
  76. package/components/ShadowRoot/index.js +56 -0
  77. package/components/ShadowRoot/styles.module.css +0 -0
  78. package/components/Subtitles/index.d.ts +58 -0
  79. package/components/Subtitles/index.js +111 -0
  80. package/components/Subtitles/styles.module.css +0 -0
  81. package/components/Subtitles/types.d.ts +10 -0
  82. package/components/Subtitles/types.js +0 -0
  83. package/components/Subtitles/utils.d.ts +28 -0
  84. package/components/Theatre/index.d.ts +64 -0
  85. package/components/Theatre/index.js +97 -0
  86. package/components/Theatre/styles.module.css +0 -0
  87. package/components/UIModule/index.d.ts +85 -0
  88. package/components/UIModule/index.js +134 -0
  89. package/components/UIModule/styles.module.css +0 -0
  90. package/components/Video/index.d.ts +139 -0
  91. package/components/Video/index.js +385 -0
  92. package/components/Video/styles.module.css +0 -0
  93. package/components/Video/utils.d.ts +14 -0
  94. package/components/_WIP_AudioQuote/index.d.ts +1 -0
  95. package/components/_WIP_AudioQuote/index.js +0 -0
  96. package/components/_WIP_Icon/index.d.ts +1 -0
  97. package/components/_WIP_Icon/index.js +0 -0
  98. package/components/index.d.ts +18 -1
  99. package/components/index.js +18 -1
  100. package/components/public-classnames.d.ts +17 -3
  101. package/components/utils/index.d.ts +1 -0
  102. package/components/utils/index.js +12 -0
  103. package/components/utils/types.d.ts +3 -0
  104. package/components/utils/types.js +0 -0
  105. package/index.d.ts +1 -1
  106. package/index.js +1 -1
  107. package/node/@aws-s3/index.test.d.ts +1 -0
  108. package/node/@aws-s3/storage/file/index.d.ts +3 -3
  109. package/node/@aws-s3/storage/file/index.js +3 -3
  110. package/node/@google-cloud/storage/directory/index.d.ts +1 -1
  111. package/node/@google-cloud/storage/directory/index.js +1 -1
  112. package/node/@google-cloud/storage/file/index.d.ts +4 -4
  113. package/node/@google-cloud/storage/file/index.js +4 -4
  114. package/node/cloud-storage/operations/index.d.ts +1 -1
  115. package/node/cloud-storage/operations/index.js +1 -1
  116. package/node/ftps/directory/index.d.ts +1 -1
  117. package/node/ftps/directory/index.js +1 -1
  118. package/node/ftps/file/index.d.ts +1 -1
  119. package/node/ftps/file/index.js +1 -1
  120. package/node/images/index.d.ts +1 -1
  121. package/node/images/index.js +1 -1
  122. package/node/images/transform/operations/index.d.ts +4 -4
  123. package/node/images/transform/operations/index.js +4 -4
  124. package/node/index.d.ts +3 -3
  125. package/node/index.js +3 -3
  126. package/node/process/spawner/index.d.ts +61 -2
  127. package/node/process/spawner/index.js +6 -6
  128. package/node/sftp/file/index.d.ts +3 -3
  129. package/node/sftp/file/index.js +3 -3
  130. package/package.json +1051 -13
  131. package/components/Input/index.d.ts +0 -7
  132. package/components/Input/index.js +0 -29
  133. /package/components/{Input → BeforeAfter}/styles.module.css +0 -0
@@ -0,0 +1,385 @@
1
+ // src/components/Video/index.tsx
2
+ import {
3
+ useCallback,
4
+ useEffect,
5
+ useMemo,
6
+ useRef,
7
+ useState
8
+ } from "react";
9
+ import { clss } from "../../agnostic/css/clss/index.js";
10
+ import {
11
+ Disclaimer
12
+ } from "../Disclaimer/index.js";
13
+ import { IntersectionObserverComponent } from "../IntersectionObserver/index.js";
14
+ import {
15
+ Subtitles
16
+ } from "../Subtitles/index.js";
17
+ import { mergeClassNames } from "../utils/index.js";
18
+ import { video as publicClassName } from "../public-classnames.js";
19
+ import {
20
+ formatTime,
21
+ secondsToMs,
22
+ muteAttributeWorkaround,
23
+ forcePlay,
24
+ forcePause,
25
+ forceLoud,
26
+ forceMute,
27
+ forceFullScreen,
28
+ forceExitFullScreen,
29
+ forceVolume,
30
+ forceCurrentTime,
31
+ getTimelineClickProgress,
32
+ forcePlaybackRate
33
+ } from "./utils.js";
34
+ import cssModule from "./styles.module.css";
35
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
36
+ var Video = ({
37
+ sources,
38
+ tracks,
39
+ playBtnContent,
40
+ pauseBtnContent,
41
+ loudBtnContent,
42
+ muteBtnContent,
43
+ fullScreenBtnContent,
44
+ subtitles,
45
+ disclaimer,
46
+ autoPlayWhenVisible,
47
+ autoPauseWhenHidden,
48
+ autoLoudWhenVisible,
49
+ autoMuteWhenHidden,
50
+ actionHandlers,
51
+ stateHandlers,
52
+ children,
53
+ className,
54
+ ...intrinsicVideoAttributes
55
+ }) => {
56
+ const [isPlaying, setIsPlaying] = useState(false);
57
+ const [isFullScreen, setIsFullScreen] = useState(false);
58
+ const [isLoud, setIsLoud] = useState(false);
59
+ const [currentTime, setCurrentTime] = useState(0);
60
+ const [totalTime, setTotalTime] = useState(0);
61
+ const [volume, setVolume] = useState(0);
62
+ const [playbackRate, setPlaybackRate] = useState(0);
63
+ const [hasBeenAutoPlayed, setHasBeenAutoPlayed] = useState(false);
64
+ const [isDisclaimerOn, setIsDisclaimerOn] = useState(
65
+ disclaimer?.isOn === true || disclaimer?.defaultIsOn === true || disclaimer !== void 0 && disclaimer.defaultIsOn === void 0
66
+ );
67
+ let shouldDisclaimerBeOn = isDisclaimerOn;
68
+ if (disclaimer?.isOn === true) {
69
+ shouldDisclaimerBeOn = true;
70
+ }
71
+ if (disclaimer?.isOn === false) {
72
+ shouldDisclaimerBeOn = false;
73
+ }
74
+ const currentTimeMs = secondsToMs(currentTime);
75
+ const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
76
+ const volumePercent = useMemo(() => volume * 100, [volume]);
77
+ const videoRef = useRef(null);
78
+ const $root = useRef(null);
79
+ const handleMetadataLoadEvent = useCallback((e) => {
80
+ if (videoRef.current === null) return;
81
+ const video = videoRef.current;
82
+ muteAttributeWorkaround(
83
+ video,
84
+ intrinsicVideoAttributes.muted ?? false,
85
+ setIsLoud
86
+ );
87
+ setTotalTime(video.duration);
88
+ setPlaybackRate(video.playbackRate);
89
+ setVolume(video.volume);
90
+ setIsLoud(!video.muted);
91
+ intrinsicVideoAttributes.onLoadedMetadata?.(e);
92
+ }, [intrinsicVideoAttributes.onLoadedMetadata, intrinsicVideoAttributes.muted]);
93
+ const handleVolumeChangeEvent = useCallback((e) => {
94
+ const volume2 = e.currentTarget.volume;
95
+ setVolume(volume2);
96
+ intrinsicVideoAttributes.onVolumeChange?.(e);
97
+ }, [intrinsicVideoAttributes.onVolumeChange]);
98
+ const handlePlayEvent = useCallback((e) => {
99
+ setIsPlaying(true);
100
+ setHasBeenAutoPlayed(true);
101
+ intrinsicVideoAttributes.onPlay?.(e);
102
+ }, [intrinsicVideoAttributes.onPlay]);
103
+ const handlePauseEvent = useCallback((e) => {
104
+ setIsPlaying(false);
105
+ intrinsicVideoAttributes.onPause?.(e);
106
+ }, [intrinsicVideoAttributes.onPause]);
107
+ const handleRateChangeEvent = useCallback((e) => {
108
+ const currentRate = e.currentTarget.playbackRate;
109
+ setPlaybackRate(currentRate);
110
+ intrinsicVideoAttributes.onRateChange?.(e);
111
+ }, [intrinsicVideoAttributes.onRateChange]);
112
+ const handleTimeUpdateEvent = useCallback((e) => {
113
+ const currentTime2 = e.currentTarget.currentTime;
114
+ setCurrentTime(currentTime2);
115
+ intrinsicVideoAttributes?.onTimeUpdate?.(e);
116
+ }, [totalTime, intrinsicVideoAttributes.onTimeUpdate]);
117
+ const handleVolumeRangeChange = useCallback((e) => {
118
+ const targetVolume = Number(e.currentTarget.value);
119
+ actionHandlers?.volumeRangeChange?.(e, targetVolume, volume, videoRef.current);
120
+ forceVolume(videoRef.current, targetVolume, setVolume);
121
+ }, [actionHandlers?.volumeRangeChange, volume]);
122
+ const handleLoudButtonClick = useCallback((e) => {
123
+ actionHandlers?.loudButtonClick?.(e, isLoud, videoRef.current);
124
+ forceLoud(videoRef.current, setIsLoud);
125
+ }, [actionHandlers?.loudButtonClick, isLoud]);
126
+ const handleMuteButtonClick = useCallback((e) => {
127
+ actionHandlers?.muteButtonClick?.(e, isLoud, videoRef.current);
128
+ forceMute(videoRef.current, setIsLoud);
129
+ }, [actionHandlers?.muteButtonClick, isLoud]);
130
+ const handlePlayButtonClick = useCallback((e) => {
131
+ actionHandlers?.playButtonClick?.(e, isPlaying, videoRef.current);
132
+ void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
133
+ }, [actionHandlers?.playButtonClick, isPlaying, shouldDisclaimerBeOn]);
134
+ const handlePauseButtonClick = useCallback((e) => {
135
+ actionHandlers?.pauseButtonClick?.(e, isPlaying, videoRef.current);
136
+ forcePause(videoRef.current, setIsPlaying);
137
+ }, [actionHandlers?.pauseButtonClick, isPlaying]);
138
+ const handleFullScreenButtonClick = useCallback((e) => {
139
+ actionHandlers?.fullscreenButtonClick?.(e, isFullScreen, videoRef.current);
140
+ if (isFullScreen) void forceExitFullScreen(videoRef.current, setIsFullScreen);
141
+ else void forceFullScreen(videoRef.current, shouldDisclaimerBeOn, setIsFullScreen);
142
+ }, [isFullScreen, shouldDisclaimerBeOn]);
143
+ const handleRateRangeChange = useCallback((e) => {
144
+ const rate = Number(e.currentTarget.value);
145
+ actionHandlers?.rateRangeChange?.(e, rate, playbackRate, videoRef.current);
146
+ forcePlaybackRate(videoRef.current, rate, setPlaybackRate);
147
+ }, [actionHandlers?.rateRangeChange, playbackRate]);
148
+ const handleTimelineClick = useCallback((e) => {
149
+ const progress = getTimelineClickProgress(e, e.currentTarget, videoRef.current);
150
+ const time = progress * totalTime;
151
+ actionHandlers?.timelineClick?.(e, time, currentTime, videoRef.current);
152
+ forceCurrentTime(videoRef.current, time, setCurrentTime);
153
+ }, [actionHandlers?.timelineClick, totalTime, currentTime]);
154
+ const handleDisclaimerDismiss = useCallback(() => {
155
+ setIsDisclaimerOn(false);
156
+ if (intrinsicVideoAttributes.autoPlay === true && !hasBeenAutoPlayed) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
157
+ }, [disclaimer, intrinsicVideoAttributes.autoPlay, shouldDisclaimerBeOn]);
158
+ useEffect(() => {
159
+ if (isDisclaimerOn !== shouldDisclaimerBeOn) setIsDisclaimerOn(shouldDisclaimerBeOn);
160
+ if (shouldDisclaimerBeOn) {
161
+ forceMute(videoRef.current, setIsLoud);
162
+ forcePause(videoRef.current, setIsPlaying);
163
+ void forceExitFullScreen(videoRef.current, setIsFullScreen);
164
+ } else if (intrinsicVideoAttributes.autoPlay === true) {
165
+ if (videoRef.current === null) return;
166
+ if (hasBeenAutoPlayed) return;
167
+ if (videoRef.current.paused) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
168
+ }
169
+ }, [
170
+ shouldDisclaimerBeOn,
171
+ intrinsicVideoAttributes,
172
+ hasBeenAutoPlayed
173
+ ]);
174
+ useEffect(() => {
175
+ stateHandlers?.isPlaying?.(isPlaying);
176
+ }, [isPlaying, stateHandlers?.isPlaying]);
177
+ useEffect(() => {
178
+ stateHandlers?.isFullScreen?.(isFullScreen);
179
+ }, [isFullScreen, stateHandlers?.isFullScreen]);
180
+ useEffect(() => {
181
+ stateHandlers?.isLoud?.(isLoud);
182
+ }, [isLoud, stateHandlers?.isLoud]);
183
+ useEffect(() => {
184
+ stateHandlers?.volume?.(volume);
185
+ }, [volume, stateHandlers?.volume]);
186
+ useEffect(() => {
187
+ stateHandlers?.playbackRate?.(playbackRate);
188
+ }, [playbackRate, stateHandlers?.playbackRate]);
189
+ useEffect(() => {
190
+ stateHandlers?.currentTime?.(currentTime);
191
+ }, [currentTime, stateHandlers?.currentTime]);
192
+ const parsedSources = useMemo(() => {
193
+ if (sources === void 0) return [];
194
+ if (typeof sources === "string") return [{ src: sources }];
195
+ if (Array.isArray(sources)) {
196
+ if (sources.length === 0) return [];
197
+ if (typeof sources[0] === "string") return sources.map((src) => ({ src }));
198
+ return sources;
199
+ }
200
+ return [];
201
+ }, [sources]);
202
+ const parsedTracks = useMemo(() => {
203
+ if (tracks === void 0) return [];
204
+ if (typeof tracks === "string") return [{ src: tracks }];
205
+ if (Array.isArray(tracks)) {
206
+ if (tracks.length === 0) return [];
207
+ if (typeof tracks[0] === "string") return tracks.map((src) => ({ src }));
208
+ return tracks;
209
+ }
210
+ return [];
211
+ }, [tracks]);
212
+ const c = clss(publicClassName, { cssModule });
213
+ const rootClss = mergeClassNames(c(null, {
214
+ "play-on": isPlaying,
215
+ "play-off": !isPlaying,
216
+ "fullscreen-on": isFullScreen,
217
+ "fullscreen-off": !isFullScreen,
218
+ "loud": isLoud,
219
+ "muted": !isLoud
220
+ }), className);
221
+ const rootAttributes = {
222
+ "data-play-on": isPlaying ? "" : void 0,
223
+ "data-play-off": !isPlaying ? "" : void 0,
224
+ "data-fullscreen-on": isFullScreen ? "" : void 0,
225
+ "data-fullscreen-off": !isFullScreen ? "" : void 0,
226
+ "data-loud": isLoud ? "" : void 0,
227
+ "data-muted": !isLoud ? "" : void 0,
228
+ "data-volume": volume,
229
+ "data-volume-percent": volumePercent,
230
+ "data-playback-rate": playbackRate,
231
+ "data-current-time-ms": currentTimeMs.toFixed(2),
232
+ "data-current-time-ratio": (currentTime / totalTime).toFixed(8),
233
+ "data-total-time-ms": totalTimeMs
234
+ };
235
+ const rootStyles = {
236
+ [`--${publicClassName}-elapsed-time-ratio`]: (currentTime / totalTime).toFixed(8)
237
+ };
238
+ const videoClss = c("video");
239
+ const videoControlsClss = c("video-controls");
240
+ const playBtnClss = c("play-btn");
241
+ const pauseBtnClss = c("pause-btn");
242
+ const loudBtnClss = c("loud-btn");
243
+ const muteBtnClss = c("mute-btn");
244
+ const volumePcntClss = c("volume-percent");
245
+ const fullScreenBtnClss = c("fullscreen-btn");
246
+ const volumeRangeClss = c("volume-range");
247
+ const playbackRateRangeClss = c("playback-rate-range");
248
+ const playbackRateClss = c("playback-rate");
249
+ const timeControlsClss = c("time-controls");
250
+ const currentTimeClss = c("current-time");
251
+ const totalTimeClss = c("total-time");
252
+ const timelineClss = c("timeline");
253
+ const sensitiveContent = /* @__PURE__ */ jsxs(Fragment, { children: [
254
+ /* @__PURE__ */ jsxs(
255
+ "video",
256
+ {
257
+ ref: videoRef,
258
+ className: videoClss,
259
+ onVolumeChange: handleVolumeChangeEvent,
260
+ onLoadedMetadata: handleMetadataLoadEvent,
261
+ onPlay: handlePlayEvent,
262
+ onPause: handlePauseEvent,
263
+ onTimeUpdate: handleTimeUpdateEvent,
264
+ onRateChange: handleRateChangeEvent,
265
+ ...intrinsicVideoAttributes,
266
+ autoPlay: shouldDisclaimerBeOn ? false : intrinsicVideoAttributes.autoPlay,
267
+ muted: shouldDisclaimerBeOn ? true : intrinsicVideoAttributes.muted,
268
+ children: [
269
+ parsedSources.map(
270
+ (source, index) => typeof source === "string" ? /* @__PURE__ */ jsx(
271
+ "source",
272
+ {
273
+ src: source
274
+ },
275
+ index
276
+ ) : /* @__PURE__ */ jsx(
277
+ "source",
278
+ {
279
+ src: source.src,
280
+ type: source.type
281
+ },
282
+ index
283
+ )
284
+ ),
285
+ parsedTracks.map(
286
+ (track, index) => typeof track === "string" ? /* @__PURE__ */ jsx(
287
+ "track",
288
+ {
289
+ src: track
290
+ },
291
+ index
292
+ ) : /* @__PURE__ */ jsx(
293
+ "track",
294
+ {
295
+ src: track.src,
296
+ kind: track.kind,
297
+ srcLang: track.srclang,
298
+ label: track.label,
299
+ default: track.default
300
+ },
301
+ index
302
+ )
303
+ ),
304
+ children
305
+ ]
306
+ }
307
+ ),
308
+ /* @__PURE__ */ jsxs("div", { className: videoControlsClss, children: [
309
+ /* @__PURE__ */ jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }),
310
+ /* @__PURE__ */ jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }),
311
+ /* @__PURE__ */ jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }),
312
+ /* @__PURE__ */ jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }),
313
+ /* @__PURE__ */ jsx(
314
+ "input",
315
+ {
316
+ type: "range",
317
+ className: volumeRangeClss,
318
+ value: volumePercent,
319
+ onChange: handleVolumeRangeChange,
320
+ min: 0,
321
+ max: 100,
322
+ step: 1
323
+ }
324
+ ),
325
+ /* @__PURE__ */ jsx("span", { className: volumePcntClss, children: volumePercent }),
326
+ /* @__PURE__ */ jsx("button", { className: fullScreenBtnClss, onClick: handleFullScreenButtonClick, children: fullScreenBtnContent }),
327
+ /* @__PURE__ */ jsx(
328
+ "input",
329
+ {
330
+ type: "range",
331
+ className: playbackRateRangeClss,
332
+ value: playbackRate,
333
+ onChange: handleRateRangeChange,
334
+ min: 0.25,
335
+ max: 4,
336
+ step: 0.25
337
+ }
338
+ ),
339
+ /* @__PURE__ */ jsx("span", { className: playbackRateClss, children: playbackRate })
340
+ ] }),
341
+ /* @__PURE__ */ jsxs("div", { className: timeControlsClss, children: [
342
+ /* @__PURE__ */ jsx("span", { className: currentTimeClss, children: formatTime(currentTimeMs, "mm:ss:ms") }),
343
+ /* @__PURE__ */ jsx("span", { className: totalTimeClss, children: formatTime(totalTimeMs, "mm:ss:ms") }),
344
+ /* @__PURE__ */ jsx("div", { className: timelineClss, onClick: handleTimelineClick })
345
+ ] }),
346
+ subtitles !== void 0 && /* @__PURE__ */ jsx(
347
+ Subtitles,
348
+ {
349
+ ...subtitles,
350
+ timecodeMs: currentTimeMs
351
+ }
352
+ )
353
+ ] });
354
+ const disclaimedContent = disclaimer !== void 0 ? /* @__PURE__ */ jsx(
355
+ Disclaimer,
356
+ {
357
+ ...disclaimer,
358
+ isOn: shouldDisclaimerBeOn,
359
+ actionHandlers: {
360
+ dismissClick: handleDisclaimerDismiss
361
+ },
362
+ children: sensitiveContent
363
+ }
364
+ ) : sensitiveContent;
365
+ const observedContent = autoLoudWhenVisible === true || autoMuteWhenHidden === true || autoPlayWhenVisible === true || autoPauseWhenHidden === true ? /* @__PURE__ */ jsx(IntersectionObserverComponent, { onIntersected: ({ ioEntry }) => {
366
+ const { isIntersecting = false } = ioEntry ?? {};
367
+ if (autoMuteWhenHidden === true && !isIntersecting) forceMute(videoRef.current, setIsLoud);
368
+ if (autoPauseWhenHidden === true && !isIntersecting) forcePause(videoRef.current, setIsPlaying);
369
+ if (autoPlayWhenVisible === true && !hasBeenAutoPlayed && !shouldDisclaimerBeOn && isIntersecting) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
370
+ if (autoLoudWhenVisible === true && !hasBeenAutoPlayed && !shouldDisclaimerBeOn && isIntersecting) forceLoud(videoRef.current, setIsLoud);
371
+ }, children: disclaimedContent }) : disclaimedContent;
372
+ return /* @__PURE__ */ jsx(
373
+ "figure",
374
+ {
375
+ className: rootClss,
376
+ ...rootAttributes,
377
+ ref: $root,
378
+ style: rootStyles,
379
+ children: observedContent
380
+ }
381
+ );
382
+ };
383
+ export {
384
+ Video
385
+ };
File without changes
@@ -0,0 +1,14 @@
1
+ import type { Dispatch, SetStateAction } from 'react';
2
+ export declare const muteAttributeWorkaround: (video: HTMLVideoElement | null, shouldMute: boolean, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
3
+ export declare const forceMute: (video: HTMLVideoElement | null, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
4
+ export declare const forceLoud: (video: HTMLVideoElement | null, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
5
+ export declare const forceVolume: (video: HTMLVideoElement | null, volumePercent: number, setVolume: Dispatch<SetStateAction<number>>) => void;
6
+ export declare const forceCurrentTime: (video: HTMLVideoElement | null, time: number, setCurrentTime: Dispatch<SetStateAction<number>>) => void;
7
+ export declare const forcePlay: (video: HTMLVideoElement | null, shouldDisclaimerBeOn: boolean, setIsPlaying: Dispatch<SetStateAction<boolean>>) => Promise<void>;
8
+ export declare const forcePause: (video: HTMLVideoElement | null, setIsPlaying: Dispatch<SetStateAction<boolean>>) => void;
9
+ export declare const forcePlaybackRate: (video: HTMLVideoElement | null, rate: number, setPlaybackRate: Dispatch<SetStateAction<number>>) => void;
10
+ export declare const forceFullScreen: (video: HTMLVideoElement | null, shouldDisclaimerBeOn: boolean, setIsFullscreen: Dispatch<SetStateAction<boolean>>) => Promise<void>;
11
+ export declare const forceExitFullScreen: (video: HTMLVideoElement | null, setIsFullscreen: Dispatch<SetStateAction<boolean>>) => Promise<void>;
12
+ export declare function secondsToMs(seconds: number): number;
13
+ export declare function formatTime(ms: number, format: string, fps?: number): string;
14
+ export declare const getTimelineClickProgress: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, timeline: HTMLDivElement | null, video: HTMLVideoElement | null) => number;
@@ -0,0 +1 @@
1
+ export {};
File without changes
@@ -0,0 +1 @@
1
+ export {};
File without changes
@@ -1,3 +1,20 @@
1
+ export * as beforeAfter from './BeforeAfter/index.js'
2
+ export * as disclaimer from './Disclaimer/index.js'
3
+ export * as drawer from './Drawer/index.js'
1
4
  export * as eventListener from './EventListener/index.js'
2
- export * as input from './Input/index.js'
5
+ export * as gallery from './Gallery/index.js'
6
+ export * as image from './Image/index.js'
3
7
  export * as intersectionObserver from './IntersectionObserver/index.js'
8
+ export * as paginator from './Paginator/index.js'
9
+ export * as resizeObserver from './ResizeObserver/index.js'
10
+ export * as scrllgngn from './Scrllgngn/index.js'
11
+ export * as scrollListener from './ScrollListener/index.js'
12
+ export * as sequencer from './Sequencer/index.js'
13
+ export * as shadowRoot from './ShadowRoot/index.js'
14
+ export * as subtitles from './Subtitles/index.js'
15
+ export * as theatre from './Theatre/index.js'
16
+ export * as uiModule from './UIModule/index.js'
17
+ export * as video from './Video/index.js'
18
+ export * as wipAudioQuote from './_WIP_AudioQuote/index.js'
19
+ export * as wipIcon from './_WIP_Icon/index.js'
20
+ export * as utils from './utils/index.js'
@@ -1,3 +1,20 @@
1
+ export * as beforeAfter from './BeforeAfter/index.js'
2
+ export * as disclaimer from './Disclaimer/index.js'
3
+ export * as drawer from './Drawer/index.js'
1
4
  export * as eventListener from './EventListener/index.js'
2
- export * as input from './Input/index.js'
5
+ export * as gallery from './Gallery/index.js'
6
+ export * as image from './Image/index.js'
3
7
  export * as intersectionObserver from './IntersectionObserver/index.js'
8
+ export * as paginator from './Paginator/index.js'
9
+ export * as resizeObserver from './ResizeObserver/index.js'
10
+ export * as scrllgngn from './Scrllgngn/index.js'
11
+ export * as scrollListener from './ScrollListener/index.js'
12
+ export * as sequencer from './Sequencer/index.js'
13
+ export * as shadowRoot from './ShadowRoot/index.js'
14
+ export * as subtitles from './Subtitles/index.js'
15
+ export * as theatre from './Theatre/index.js'
16
+ export * as uiModule from './UIModule/index.js'
17
+ export * as video from './Video/index.js'
18
+ export * as wipAudioQuote from './_WIP_AudioQuote/index.js'
19
+ export * as wipIcon from './_WIP_Icon/index.js'
20
+ export * as utils from './utils/index.js'
@@ -1,3 +1,17 @@
1
- export declare const eventListener = "lm-event-listener";
2
- export declare const input = "lm-input";
3
- export declare const intersectionObserver = "lm-intersection-observer";
1
+ export declare const beforeAfter = "dsed-before-after";
2
+ export declare const disclaimer = "dsed-disclaimer";
3
+ export declare const drawer = "dsed-drawer";
4
+ export declare const eventListener = "dsed-event-listener";
5
+ export declare const gallery = "dsed-gallery";
6
+ export declare const image = "dsed-image";
7
+ export declare const intersectionObserver = "dsed-intersection-observer";
8
+ export declare const paginator = "dsed-paginator";
9
+ export declare const resizeObserver = "dsed-resize-observer";
10
+ export declare const scrllgngn = "dsed-scrllgngn";
11
+ export declare const scrollListener = "dsed-scroll-listener";
12
+ export declare const sequencer = "dsed-sequencer";
13
+ export declare const shadowRoot = "dsed-shadow-root";
14
+ export declare const subtitles = "dsed-subtitles";
15
+ export declare const theatre = "dsed-theatre";
16
+ export declare const uiModule = "dsed-ui-module";
17
+ export declare const video = "dsed-video";
@@ -0,0 +1 @@
1
+ export declare function mergeClassNames(...names: Array<string | null | undefined | Array<string | null | undefined>>): string;
@@ -0,0 +1,12 @@
1
+ // src/components/utils/index.tsx
2
+ function mergeClassNames(...names) {
3
+ return names.map((name) => {
4
+ if (typeof name !== "string" && !Array.isArray(name)) return false;
5
+ if (Array.isArray(name)) return mergeClassNames(...name);
6
+ if (name.trim() === "") return false;
7
+ return name.trim();
8
+ }).filter((name) => typeof name === "string").join(" ");
9
+ }
10
+ export {
11
+ mergeClassNames
12
+ };
@@ -0,0 +1,3 @@
1
+ export type WithClassName<T extends Record<string, unknown>> = T & {
2
+ className?: string | Array<string | null | undefined>;
3
+ };
File without changes
package/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
+ export * as agnostic from './agnostic/index.js'
1
2
  export * as components from './components/index.js'
2
3
  export * as node from './node/index.js'
3
- export * as agnostic from './agnostic/index.js'
package/index.js CHANGED
@@ -1,3 +1,3 @@
1
+ export * as agnostic from './agnostic/index.js'
1
2
  export * as components from './components/index.js'
2
3
  export * as node from './node/index.js'
3
- export * as agnostic from './agnostic/index.js'
@@ -0,0 +1 @@
1
+ export {};
@@ -1,7 +1,7 @@
1
- export * as copy from './copy/index.js'
2
1
  export * as download from './download/index.js'
2
+ export * as copy from './copy/index.js'
3
3
  export * as exists from './exists/index.js'
4
- export * as remove from './remove/index.js'
5
4
  export * as move from './move/index.js'
6
- export * as upload from './upload/index.js'
5
+ export * as remove from './remove/index.js'
7
6
  export * as stat from './stat/index.js'
7
+ export * as upload from './upload/index.js'
@@ -1,7 +1,7 @@
1
- export * as copy from './copy/index.js'
2
1
  export * as download from './download/index.js'
2
+ export * as copy from './copy/index.js'
3
3
  export * as exists from './exists/index.js'
4
- export * as remove from './remove/index.js'
5
4
  export * as move from './move/index.js'
6
- export * as upload from './upload/index.js'
5
+ export * as remove from './remove/index.js'
7
6
  export * as stat from './stat/index.js'
7
+ export * as upload from './upload/index.js'
@@ -1,4 +1,4 @@
1
- export * as list from './list/index.js'
2
1
  export * as copyDir from './copy-dir/index.js'
2
+ export * as list from './list/index.js'
3
3
  export * as moveDir from './move-dir/index.js'
4
4
  export * as removeDir from './remove-dir/index.js'
@@ -1,4 +1,4 @@
1
- export * as list from './list/index.js'
2
1
  export * as copyDir from './copy-dir/index.js'
2
+ export * as list from './list/index.js'
3
3
  export * as moveDir from './move-dir/index.js'
4
4
  export * as removeDir from './remove-dir/index.js'
@@ -1,12 +1,12 @@
1
1
  export * as copy from './copy/index.js'
2
- export * as exists from './exists/index.js'
3
2
  export * as download from './download/index.js'
3
+ export * as exists from './exists/index.js'
4
4
  export * as generateSignedUrl from './generate-signed-url/index.js'
5
- export * as remove from './remove/index.js'
6
- export * as move from './move/index.js'
7
5
  export * as getMetadata from './get-metadata/index.js'
8
6
  export * as getPermissions from './get-permissions/index.js'
7
+ export * as move from './move/index.js'
8
+ export * as remove from './remove/index.js'
9
9
  export * as revokeSignedUrls from './revoke-signed-urls/index.js'
10
- export * as stat from './stat/index.js'
11
10
  export * as updateMetadata from './update-metadata/index.js'
11
+ export * as stat from './stat/index.js'
12
12
  export * as upload from './upload/index.js'
@@ -1,12 +1,12 @@
1
1
  export * as copy from './copy/index.js'
2
- export * as exists from './exists/index.js'
3
2
  export * as download from './download/index.js'
3
+ export * as exists from './exists/index.js'
4
4
  export * as generateSignedUrl from './generate-signed-url/index.js'
5
- export * as remove from './remove/index.js'
6
- export * as move from './move/index.js'
7
5
  export * as getMetadata from './get-metadata/index.js'
8
6
  export * as getPermissions from './get-permissions/index.js'
7
+ export * as move from './move/index.js'
8
+ export * as remove from './remove/index.js'
9
9
  export * as revokeSignedUrls from './revoke-signed-urls/index.js'
10
- export * as stat from './stat/index.js'
11
10
  export * as updateMetadata from './update-metadata/index.js'
11
+ export * as stat from './stat/index.js'
12
12
  export * as upload from './upload/index.js'
@@ -6,6 +6,6 @@ export * as listDir from './list-dir/index.js'
6
6
  export * as moveDir from './move-dir/index.js'
7
7
  export * as moveFile from './move-file/index.js'
8
8
  export * as removeDir from './remove-dir/index.js'
9
+ export * as removeFile from './remove-file/index.js'
9
10
  export * as statFile from './stat-file/index.js'
10
11
  export * as uploadFile from './upload-file/index.js'
11
- export * as removeFile from './remove-file/index.js'
@@ -6,6 +6,6 @@ export * as listDir from './list-dir/index.js'
6
6
  export * as moveDir from './move-dir/index.js'
7
7
  export * as moveFile from './move-file/index.js'
8
8
  export * as removeDir from './remove-dir/index.js'
9
+ export * as removeFile from './remove-file/index.js'
9
10
  export * as statFile from './stat-file/index.js'
10
11
  export * as uploadFile from './upload-file/index.js'
11
- export * as removeFile from './remove-file/index.js'
@@ -1,4 +1,4 @@
1
1
  export * as copyDir from './copy-dir/index.js'
2
- export * as list from './list/index.js'
3
2
  export * as moveDir from './move-dir/index.js'
3
+ export * as list from './list/index.js'
4
4
  export * as removeDir from './remove-dir/index.js'
@@ -1,4 +1,4 @@
1
1
  export * as copyDir from './copy-dir/index.js'
2
- export * as list from './list/index.js'
3
2
  export * as moveDir from './move-dir/index.js'
3
+ export * as list from './list/index.js'
4
4
  export * as removeDir from './remove-dir/index.js'
@@ -1,7 +1,7 @@
1
1
  export * as copy from './copy/index.js'
2
2
  export * as download from './download/index.js'
3
- export * as move from './move/index.js'
4
3
  export * as exists from './exists/index.js'
4
+ export * as move from './move/index.js'
5
5
  export * as remove from './remove/index.js'
6
6
  export * as stat from './stat/index.js'
7
7
  export * as upload from './upload/index.js'
@@ -1,7 +1,7 @@
1
1
  export * as copy from './copy/index.js'
2
2
  export * as download from './download/index.js'
3
- export * as move from './move/index.js'
4
3
  export * as exists from './exists/index.js'
4
+ export * as move from './move/index.js'
5
5
  export * as remove from './remove/index.js'
6
6
  export * as stat from './stat/index.js'
7
7
  export * as upload from './upload/index.js'
@@ -1,5 +1,5 @@
1
1
  export * as create from './create/index.js'
2
+ export * as format from './format/index.js'
2
3
  export * as metadata from './metadata/index.js'
3
4
  export * as transform from './transform/index.js'
4
5
  export * as utils from './utils/index.js'
5
- export * as format from './format/index.js'