@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260924080906 → 0.8.1-dev.20260924103055

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 (7) hide show
  1. package/dist/{Slider-JZ5CNHEW.mjs → Slider-42T6THEQ.mjs} +19 -7
  2. package/dist/{Slider-3JMZZWGT.mjs → Slider-UNNVADVP.mjs} +19 -7
  3. package/dist/index.js +19 -7
  4. package/dist/index.mjs +1 -1
  5. package/dist/server.js +19 -7
  6. package/dist/server.mjs +1 -1
  7. package/package.json +1 -1
package/dist/{Slider-JZ5CNHEW.mjs → Slider-42T6THEQ.mjs} RENAMED
@@ -34,6 +34,7 @@ var Slider = ({
34
34
  const [isPlaying, setIsPlaying] = useState(autoplay);
35
35
  const trackRef = useRef(null);
36
36
  console.log("trackRef:", trackRef);
37
+ const [videoProgress, setVideoProgress] = useState(null);
37
38
  useEffect(() => {
38
39
  if (typeof initialSlidesToShow === "number") {
39
40
  setSlidesToShowState(initialSlidesToShow);
@@ -58,28 +59,36 @@ var Slider = ({
58
59
  const videoElement = activeSlideElement?.querySelector("video");
59
60
  if (videoElement) {
60
61
  videoElement.loop = false;
62
+ setVideoProgress(0);
61
63
  if (videoElement.ended) {
62
64
  videoElement.currentTime = 0;
63
65
  }
64
66
  videoElement.play().catch(() => {
65
67
  });
66
68
  const handleTimeUpdate = () => {
67
- if (videoElement.duration && !isNaN(videoElement.duration)) {
69
+ if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
68
70
  const pct = videoElement.currentTime / videoElement.duration * 100;
71
+ setVideoProgress(pct);
69
72
  }
70
73
  };
71
74
  const handleVideoEnded = () => {
75
+ setVideoProgress(100);
72
76
  nextSlide();
73
77
  };
74
78
  const handleVideoError = () => {
75
79
  nextSlide();
76
80
  };
81
+ videoElement.addEventListener("timeupdate", handleTimeUpdate);
82
+ videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
77
83
  videoElement.addEventListener("ended", handleVideoEnded, { once: true });
78
84
  videoElement.addEventListener("error", handleVideoError, { once: true });
79
85
  return () => {
86
+ videoElement.removeEventListener("timeupdate", handleTimeUpdate);
87
+ videoElement.removeEventListener("loadedmetadata", handleTimeUpdate);
80
88
  videoElement.removeEventListener("ended", handleVideoEnded);
81
89
  videoElement.removeEventListener("error", handleVideoError);
82
90
  videoElement.pause();
91
+ setVideoProgress(null);
83
92
  };
84
93
  }
85
94
  const timer = setInterval(() => {
@@ -178,7 +187,8 @@ var Slider = ({
178
187
  activeClassName: dotActiveClassName,
179
188
  inactiveClassName: dotInactiveClassName,
180
189
  currentSlide,
181
- totalSlides
190
+ totalSlides,
191
+ customProgress: index === currentSlide ? videoProgress : null
182
192
  },
183
193
  index
184
194
  )) }),
@@ -238,7 +248,8 @@ var Slider = ({
238
248
  activeClassName: dotActiveClassName,
239
249
  inactiveClassName: dotInactiveClassName,
240
250
  currentSlide,
241
- totalSlides
251
+ totalSlides,
252
+ customProgress: index === currentSlide ? videoProgress : null
242
253
  },
243
254
  index
244
255
  )) })
@@ -274,7 +285,8 @@ var ProgressPill = ({
274
285
  activeClassName = "",
275
286
  inactiveClassName = "",
276
287
  currentSlide,
277
- totalSlides
288
+ totalSlides,
289
+ customProgress = null
278
290
  }) => {
279
291
  const [progress, setProgress] = useState(0);
280
292
  useEffect(() => {
@@ -283,7 +295,7 @@ var ProgressPill = ({
283
295
  }
284
296
  }, [active, index]);
285
297
  useEffect(() => {
286
- if (!active || !isPlaying) {
298
+ if (!active || !isPlaying || customProgress !== null) {
287
299
  if (!active) {
288
300
  setProgress(0);
289
301
  }
@@ -301,7 +313,7 @@ var ProgressPill = ({
301
313
  }
302
314
  }, 50);
303
315
  return () => clearInterval(interval);
304
- }, [active, isPlaying, duration, index]);
316
+ }, [active, isPlaying, duration, index, customProgress]);
305
317
  const isFilled = index < currentSlide;
306
318
  const isActive = index === currentSlide;
307
319
  const shouldShowProgress = isActive || style === "cumulative" && isFilled;
@@ -336,7 +348,7 @@ var ProgressPill = ({
336
348
  };
337
349
  const renderProgressBar = () => {
338
350
  if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
339
- const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
351
+ const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
340
352
  return /* @__PURE__ */ jsx(
341
353
  "div",
342
354
  {
package/dist/{Slider-3JMZZWGT.mjs → Slider-UNNVADVP.mjs} RENAMED
@@ -32,6 +32,7 @@ var Slider = ({
32
32
  const [isPlaying, setIsPlaying] = useState(autoplay);
33
33
  const trackRef = useRef(null);
34
34
  console.log("trackRef:", trackRef);
35
+ const [videoProgress, setVideoProgress] = useState(null);
35
36
  useEffect(() => {
36
37
  if (typeof initialSlidesToShow === "number") {
37
38
  setSlidesToShowState(initialSlidesToShow);
@@ -56,28 +57,36 @@ var Slider = ({
56
57
  const videoElement = activeSlideElement?.querySelector("video");
57
58
  if (videoElement) {
58
59
  videoElement.loop = false;
60
+ setVideoProgress(0);
59
61
  if (videoElement.ended) {
60
62
  videoElement.currentTime = 0;
61
63
  }
62
64
  videoElement.play().catch(() => {
63
65
  });
64
66
  const handleTimeUpdate = () => {
65
- if (videoElement.duration && !isNaN(videoElement.duration)) {
67
+ if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
66
68
  const pct = videoElement.currentTime / videoElement.duration * 100;
69
+ setVideoProgress(pct);
67
70
  }
68
71
  };
69
72
  const handleVideoEnded = () => {
73
+ setVideoProgress(100);
70
74
  nextSlide();
71
75
  };
72
76
  const handleVideoError = () => {
73
77
  nextSlide();
74
78
  };
79
+ videoElement.addEventListener("timeupdate", handleTimeUpdate);
80
+ videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
75
81
  videoElement.addEventListener("ended", handleVideoEnded, { once: true });
76
82
  videoElement.addEventListener("error", handleVideoError, { once: true });
77
83
  return () => {
84
+ videoElement.removeEventListener("timeupdate", handleTimeUpdate);
85
+ videoElement.removeEventListener("loadedmetadata", handleTimeUpdate);
78
86
  videoElement.removeEventListener("ended", handleVideoEnded);
79
87
  videoElement.removeEventListener("error", handleVideoError);
80
88
  videoElement.pause();
89
+ setVideoProgress(null);
81
90
  };
82
91
  }
83
92
  const timer = setInterval(() => {
@@ -176,7 +185,8 @@ var Slider = ({
176
185
  activeClassName: dotActiveClassName,
177
186
  inactiveClassName: dotInactiveClassName,
178
187
  currentSlide,
179
- totalSlides
188
+ totalSlides,
189
+ customProgress: index === currentSlide ? videoProgress : null
180
190
  },
181
191
  index
182
192
  )) }),
@@ -236,7 +246,8 @@ var Slider = ({
236
246
  activeClassName: dotActiveClassName,
237
247
  inactiveClassName: dotInactiveClassName,
238
248
  currentSlide,
239
- totalSlides
249
+ totalSlides,
250
+ customProgress: index === currentSlide ? videoProgress : null
240
251
  },
241
252
  index
242
253
  )) })
@@ -272,7 +283,8 @@ var ProgressPill = ({
272
283
  activeClassName = "",
273
284
  inactiveClassName = "",
274
285
  currentSlide,
275
- totalSlides
286
+ totalSlides,
287
+ customProgress = null
276
288
  }) => {
277
289
  const [progress, setProgress] = useState(0);
278
290
  useEffect(() => {
@@ -281,7 +293,7 @@ var ProgressPill = ({
281
293
  }
282
294
  }, [active, index]);
283
295
  useEffect(() => {
284
- if (!active || !isPlaying) {
296
+ if (!active || !isPlaying || customProgress !== null) {
285
297
  if (!active) {
286
298
  setProgress(0);
287
299
  }
@@ -299,7 +311,7 @@ var ProgressPill = ({
299
311
  }
300
312
  }, 50);
301
313
  return () => clearInterval(interval);
302
- }, [active, isPlaying, duration, index]);
314
+ }, [active, isPlaying, duration, index, customProgress]);
303
315
  const isFilled = index < currentSlide;
304
316
  const isActive = index === currentSlide;
305
317
  const shouldShowProgress = isActive || style === "cumulative" && isFilled;
@@ -334,7 +346,7 @@ var ProgressPill = ({
334
346
  };
335
347
  const renderProgressBar = () => {
336
348
  if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
337
- const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
349
+ const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
338
350
  return /* @__PURE__ */ jsx(
339
351
  "div",
340
352
  {
package/dist/index.js CHANGED
@@ -6098,6 +6098,7 @@ var init_Slider = __esm({
6098
6098
  const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
6099
6099
  const trackRef = (0, import_react60.useRef)(null);
6100
6100
  console.log("trackRef:", trackRef);
6101
+ const [videoProgress, setVideoProgress] = (0, import_react60.useState)(null);
6101
6102
  (0, import_react60.useEffect)(() => {
6102
6103
  if (typeof initialSlidesToShow === "number") {
6103
6104
  setSlidesToShowState(initialSlidesToShow);
@@ -6122,28 +6123,36 @@ var init_Slider = __esm({
6122
6123
  const videoElement = activeSlideElement?.querySelector("video");
6123
6124
  if (videoElement) {
6124
6125
  videoElement.loop = false;
6126
+ setVideoProgress(0);
6125
6127
  if (videoElement.ended) {
6126
6128
  videoElement.currentTime = 0;
6127
6129
  }
6128
6130
  videoElement.play().catch(() => {
6129
6131
  });
6130
6132
  const handleTimeUpdate = () => {
6131
- if (videoElement.duration && !isNaN(videoElement.duration)) {
6133
+ if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
6132
6134
  const pct = videoElement.currentTime / videoElement.duration * 100;
6135
+ setVideoProgress(pct);
6133
6136
  }
6134
6137
  };
6135
6138
  const handleVideoEnded = () => {
6139
+ setVideoProgress(100);
6136
6140
  nextSlide();
6137
6141
  };
6138
6142
  const handleVideoError = () => {
6139
6143
  nextSlide();
6140
6144
  };
6145
+ videoElement.addEventListener("timeupdate", handleTimeUpdate);
6146
+ videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
6141
6147
  videoElement.addEventListener("ended", handleVideoEnded, { once: true });
6142
6148
  videoElement.addEventListener("error", handleVideoError, { once: true });
6143
6149
  return () => {
6150
+ videoElement.removeEventListener("timeupdate", handleTimeUpdate);
6151
+ videoElement.removeEventListener("loadedmetadata", handleTimeUpdate);
6144
6152
  videoElement.removeEventListener("ended", handleVideoEnded);
6145
6153
  videoElement.removeEventListener("error", handleVideoError);
6146
6154
  videoElement.pause();
6155
+ setVideoProgress(null);
6147
6156
  };
6148
6157
  }
6149
6158
  const timer = setInterval(() => {
@@ -6242,7 +6251,8 @@ var init_Slider = __esm({
6242
6251
  activeClassName: dotActiveClassName,
6243
6252
  inactiveClassName: dotInactiveClassName,
6244
6253
  currentSlide,
6245
- totalSlides
6254
+ totalSlides,
6255
+ customProgress: index === currentSlide ? videoProgress : null
6246
6256
  },
6247
6257
  index
6248
6258
  )) }),
@@ -6302,7 +6312,8 @@ var init_Slider = __esm({
6302
6312
  activeClassName: dotActiveClassName,
6303
6313
  inactiveClassName: dotInactiveClassName,
6304
6314
  currentSlide,
6305
- totalSlides
6315
+ totalSlides,
6316
+ customProgress: index === currentSlide ? videoProgress : null
6306
6317
  },
6307
6318
  index
6308
6319
  )) })
@@ -6338,7 +6349,8 @@ var init_Slider = __esm({
6338
6349
  activeClassName = "",
6339
6350
  inactiveClassName = "",
6340
6351
  currentSlide,
6341
- totalSlides
6352
+ totalSlides,
6353
+ customProgress = null
6342
6354
  }) => {
6343
6355
  const [progress, setProgress] = (0, import_react60.useState)(0);
6344
6356
  (0, import_react60.useEffect)(() => {
@@ -6347,7 +6359,7 @@ var init_Slider = __esm({
6347
6359
  }
6348
6360
  }, [active, index]);
6349
6361
  (0, import_react60.useEffect)(() => {
6350
- if (!active || !isPlaying) {
6362
+ if (!active || !isPlaying || customProgress !== null) {
6351
6363
  if (!active) {
6352
6364
  setProgress(0);
6353
6365
  }
@@ -6365,7 +6377,7 @@ var init_Slider = __esm({
6365
6377
  }
6366
6378
  }, 50);
6367
6379
  return () => clearInterval(interval);
6368
- }, [active, isPlaying, duration, index]);
6380
+ }, [active, isPlaying, duration, index, customProgress]);
6369
6381
  const isFilled = index < currentSlide;
6370
6382
  const isActive = index === currentSlide;
6371
6383
  const shouldShowProgress = isActive || style === "cumulative" && isFilled;
@@ -6400,7 +6412,7 @@ var init_Slider = __esm({
6400
6412
  };
6401
6413
  const renderProgressBar = () => {
6402
6414
  if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
6403
- const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
6415
+ const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
6404
6416
  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
6405
6417
  "div",
6406
6418
  {
package/dist/index.mjs CHANGED
@@ -2423,7 +2423,7 @@ var Pagination = dynamic13(() => import("./Pagination-STOHS3LO.mjs"), { ssr: tru
2423
2423
  var DataBindingControls = dynamic13(() => import("./DataBindingControls-SLNZLI3I.mjs"), {
2424
2424
  ssr: true
2425
2425
  });
2426
- var Slider = dynamic13(() => import("./Slider-JZ5CNHEW.mjs"), {
2426
+ var Slider = dynamic13(() => import("./Slider-42T6THEQ.mjs"), {
2427
2427
  ssr: false
2428
2428
  });
2429
2429
  function toCamelCase(str) {
package/dist/server.js CHANGED
@@ -6096,6 +6096,7 @@ var init_Slider = __esm({
6096
6096
  const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
6097
6097
  const trackRef = (0, import_react60.useRef)(null);
6098
6098
  console.log("trackRef:", trackRef);
6099
+ const [videoProgress, setVideoProgress] = (0, import_react60.useState)(null);
6099
6100
  (0, import_react60.useEffect)(() => {
6100
6101
  if (typeof initialSlidesToShow === "number") {
6101
6102
  setSlidesToShowState(initialSlidesToShow);
@@ -6120,28 +6121,36 @@ var init_Slider = __esm({
6120
6121
  const videoElement = activeSlideElement?.querySelector("video");
6121
6122
  if (videoElement) {
6122
6123
  videoElement.loop = false;
6124
+ setVideoProgress(0);
6123
6125
  if (videoElement.ended) {
6124
6126
  videoElement.currentTime = 0;
6125
6127
  }
6126
6128
  videoElement.play().catch(() => {
6127
6129
  });
6128
6130
  const handleTimeUpdate = () => {
6129
- if (videoElement.duration && !isNaN(videoElement.duration)) {
6131
+ if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
6130
6132
  const pct = videoElement.currentTime / videoElement.duration * 100;
6133
+ setVideoProgress(pct);
6131
6134
  }
6132
6135
  };
6133
6136
  const handleVideoEnded = () => {
6137
+ setVideoProgress(100);
6134
6138
  nextSlide();
6135
6139
  };
6136
6140
  const handleVideoError = () => {
6137
6141
  nextSlide();
6138
6142
  };
6143
+ videoElement.addEventListener("timeupdate", handleTimeUpdate);
6144
+ videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
6139
6145
  videoElement.addEventListener("ended", handleVideoEnded, { once: true });
6140
6146
  videoElement.addEventListener("error", handleVideoError, { once: true });
6141
6147
  return () => {
6148
+ videoElement.removeEventListener("timeupdate", handleTimeUpdate);
6149
+ videoElement.removeEventListener("loadedmetadata", handleTimeUpdate);
6142
6150
  videoElement.removeEventListener("ended", handleVideoEnded);
6143
6151
  videoElement.removeEventListener("error", handleVideoError);
6144
6152
  videoElement.pause();
6153
+ setVideoProgress(null);
6145
6154
  };
6146
6155
  }
6147
6156
  const timer = setInterval(() => {
@@ -6240,7 +6249,8 @@ var init_Slider = __esm({
6240
6249
  activeClassName: dotActiveClassName,
6241
6250
  inactiveClassName: dotInactiveClassName,
6242
6251
  currentSlide,
6243
- totalSlides
6252
+ totalSlides,
6253
+ customProgress: index === currentSlide ? videoProgress : null
6244
6254
  },
6245
6255
  index
6246
6256
  )) }),
@@ -6300,7 +6310,8 @@ var init_Slider = __esm({
6300
6310
  activeClassName: dotActiveClassName,
6301
6311
  inactiveClassName: dotInactiveClassName,
6302
6312
  currentSlide,
6303
- totalSlides
6313
+ totalSlides,
6314
+ customProgress: index === currentSlide ? videoProgress : null
6304
6315
  },
6305
6316
  index
6306
6317
  )) })
@@ -6336,7 +6347,8 @@ var init_Slider = __esm({
6336
6347
  activeClassName = "",
6337
6348
  inactiveClassName = "",
6338
6349
  currentSlide,
6339
- totalSlides
6350
+ totalSlides,
6351
+ customProgress = null
6340
6352
  }) => {
6341
6353
  const [progress, setProgress] = (0, import_react60.useState)(0);
6342
6354
  (0, import_react60.useEffect)(() => {
@@ -6345,7 +6357,7 @@ var init_Slider = __esm({
6345
6357
  }
6346
6358
  }, [active, index]);
6347
6359
  (0, import_react60.useEffect)(() => {
6348
- if (!active || !isPlaying) {
6360
+ if (!active || !isPlaying || customProgress !== null) {
6349
6361
  if (!active) {
6350
6362
  setProgress(0);
6351
6363
  }
@@ -6363,7 +6375,7 @@ var init_Slider = __esm({
6363
6375
  }
6364
6376
  }, 50);
6365
6377
  return () => clearInterval(interval);
6366
- }, [active, isPlaying, duration, index]);
6378
+ }, [active, isPlaying, duration, index, customProgress]);
6367
6379
  const isFilled = index < currentSlide;
6368
6380
  const isActive = index === currentSlide;
6369
6381
  const shouldShowProgress = isActive || style === "cumulative" && isFilled;
@@ -6398,7 +6410,7 @@ var init_Slider = __esm({
6398
6410
  };
6399
6411
  const renderProgressBar = () => {
6400
6412
  if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
6401
- const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
6413
+ const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
6402
6414
  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
6403
6415
  "div",
6404
6416
  {
package/dist/server.mjs CHANGED
@@ -2391,7 +2391,7 @@ var Pagination = dynamic13(() => import("./Pagination-V53JCR6P.mjs"), { ssr: tru
2391
2391
  var DataBindingControls = dynamic13(() => import("./DataBindingControls-UDRT7JFF.mjs"), {
2392
2392
  ssr: true
2393
2393
  });
2394
- var Slider = dynamic13(() => import("./Slider-3JMZZWGT.mjs"), {
2394
+ var Slider = dynamic13(() => import("./Slider-UNNVADVP.mjs"), {
2395
2395
  ssr: false
2396
2396
  });
2397
2397
  function toCamelCase(str) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clyrex-digital/clyrex-controls-dev",
3
- "version": "0.8.1-dev.20260924080906",
3
+ "version": "0.8.1-dev.20260924103055",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",