@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20261014101636 → 0.8.1-dev.20261015111022

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-MZWLONIG.mjs → Slider-3URCZ3JU.mjs} +34 -16
  2. package/dist/{Slider-3UFC3SQQ.mjs → Slider-5VE2T2QN.mjs} +34 -16
  3. package/dist/index.js +34 -16
  4. package/dist/index.mjs +1 -1
  5. package/dist/server.js +34 -16
  6. package/dist/server.mjs +1 -1
  7. package/package.json +1 -1
package/dist/{Slider-MZWLONIG.mjs → Slider-3URCZ3JU.mjs} RENAMED
@@ -33,7 +33,9 @@ var Slider = ({
33
33
  );
34
34
  const [isPlaying, setIsPlaying] = useState(autoplay);
35
35
  const trackRef = useRef(null);
36
- console.log("trackRef:", trackRef);
36
+ const prevSlideRef = useRef(currentSlide);
37
+ const nextSlideRef = useRef(() => {
38
+ });
37
39
  const [videoProgress, setVideoProgress] = useState(null);
38
40
  useEffect(() => {
39
41
  if (typeof initialSlidesToShow === "number") {
@@ -55,16 +57,36 @@ var Slider = ({
55
57
  }, [initialSlidesToShow]);
56
58
  useEffect(() => {
57
59
  if (!autoplay) return;
60
+ if (trackRef.current) {
61
+ Array.from(trackRef.current.children).forEach((child, index) => {
62
+ if (index !== currentSlide) {
63
+ const nonActiveVideos = child.querySelectorAll("video");
64
+ nonActiveVideos.forEach((vid) => {
65
+ vid.pause();
66
+ vid.currentTime = 0;
67
+ });
68
+ }
69
+ });
70
+ }
58
71
  const activeSlideElement = trackRef.current?.children[currentSlide];
59
72
  const videoElement = activeSlideElement?.querySelector("video");
73
+ const isNewSlide = prevSlideRef.current !== currentSlide;
74
+ prevSlideRef.current = currentSlide;
60
75
  if (videoElement) {
61
76
  videoElement.loop = false;
62
- setVideoProgress(0);
63
- if (videoElement.ended) {
77
+ if (isNewSlide) {
78
+ setVideoProgress(0);
64
79
  videoElement.currentTime = 0;
65
80
  }
66
- videoElement.play().catch(() => {
67
- });
81
+ if (isPlaying) {
82
+ if (videoElement.ended) {
83
+ videoElement.currentTime = 0;
84
+ }
85
+ videoElement.play().catch(() => {
86
+ });
87
+ } else {
88
+ videoElement.pause();
89
+ }
68
90
  const handleTimeUpdate = () => {
69
91
  if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
70
92
  const pct = videoElement.currentTime / videoElement.duration * 100;
@@ -73,10 +95,12 @@ var Slider = ({
73
95
  };
74
96
  const handleVideoEnded = () => {
75
97
  setVideoProgress(100);
76
- nextSlide();
98
+ nextSlideRef.current();
77
99
  };
78
100
  const handleVideoError = () => {
79
- nextSlide();
101
+ if (videoElement.error) {
102
+ nextSlideRef.current();
103
+ }
80
104
  };
81
105
  videoElement.addEventListener("timeupdate", handleTimeUpdate);
82
106
  videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
@@ -93,7 +117,7 @@ var Slider = ({
93
117
  }
94
118
  const timer = setInterval(() => {
95
119
  if (isPlaying) {
96
- nextSlide();
120
+ nextSlideRef.current();
97
121
  }
98
122
  }, autoplay_speed);
99
123
  return () => clearInterval(timer);
@@ -132,6 +156,7 @@ var Slider = ({
132
156
  setCurrentSlide(slidePositions[currentStepIndex + 1]);
133
157
  }
134
158
  };
159
+ nextSlideRef.current = nextSlide;
135
160
  const prevSlide = () => {
136
161
  if (currentStepIndex <= 0) {
137
162
  if (infinite_scroll) {
@@ -163,14 +188,7 @@ var Slider = ({
163
188
  setIsPlaying(true);
164
189
  }
165
190
  };
166
- const maxTranslatePercentage = Math.max(
167
- 0,
168
- totalSlides * slideWidthPercentage - 100
169
- );
170
- const translateX = -Math.min(
171
- currentSlide * slideWidthPercentage,
172
- maxTranslatePercentage
173
- );
191
+ const translateX = -currentSlide * slideWidthPercentage;
174
192
  const slides = Children.map(children, (child, index) => {
175
193
  if (!React.isValidElement(child)) return null;
176
194
  const childProps = child.props;
package/dist/{Slider-3UFC3SQQ.mjs → Slider-5VE2T2QN.mjs} RENAMED
@@ -31,7 +31,9 @@ var Slider = ({
31
31
  );
32
32
  const [isPlaying, setIsPlaying] = useState(autoplay);
33
33
  const trackRef = useRef(null);
34
- console.log("trackRef:", trackRef);
34
+ const prevSlideRef = useRef(currentSlide);
35
+ const nextSlideRef = useRef(() => {
36
+ });
35
37
  const [videoProgress, setVideoProgress] = useState(null);
36
38
  useEffect(() => {
37
39
  if (typeof initialSlidesToShow === "number") {
@@ -53,16 +55,36 @@ var Slider = ({
53
55
  }, [initialSlidesToShow]);
54
56
  useEffect(() => {
55
57
  if (!autoplay) return;
58
+ if (trackRef.current) {
59
+ Array.from(trackRef.current.children).forEach((child, index) => {
60
+ if (index !== currentSlide) {
61
+ const nonActiveVideos = child.querySelectorAll("video");
62
+ nonActiveVideos.forEach((vid) => {
63
+ vid.pause();
64
+ vid.currentTime = 0;
65
+ });
66
+ }
67
+ });
68
+ }
56
69
  const activeSlideElement = trackRef.current?.children[currentSlide];
57
70
  const videoElement = activeSlideElement?.querySelector("video");
71
+ const isNewSlide = prevSlideRef.current !== currentSlide;
72
+ prevSlideRef.current = currentSlide;
58
73
  if (videoElement) {
59
74
  videoElement.loop = false;
60
- setVideoProgress(0);
61
- if (videoElement.ended) {
75
+ if (isNewSlide) {
76
+ setVideoProgress(0);
62
77
  videoElement.currentTime = 0;
63
78
  }
64
- videoElement.play().catch(() => {
65
- });
79
+ if (isPlaying) {
80
+ if (videoElement.ended) {
81
+ videoElement.currentTime = 0;
82
+ }
83
+ videoElement.play().catch(() => {
84
+ });
85
+ } else {
86
+ videoElement.pause();
87
+ }
66
88
  const handleTimeUpdate = () => {
67
89
  if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
68
90
  const pct = videoElement.currentTime / videoElement.duration * 100;
@@ -71,10 +93,12 @@ var Slider = ({
71
93
  };
72
94
  const handleVideoEnded = () => {
73
95
  setVideoProgress(100);
74
- nextSlide();
96
+ nextSlideRef.current();
75
97
  };
76
98
  const handleVideoError = () => {
77
- nextSlide();
99
+ if (videoElement.error) {
100
+ nextSlideRef.current();
101
+ }
78
102
  };
79
103
  videoElement.addEventListener("timeupdate", handleTimeUpdate);
80
104
  videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
@@ -91,7 +115,7 @@ var Slider = ({
91
115
  }
92
116
  const timer = setInterval(() => {
93
117
  if (isPlaying) {
94
- nextSlide();
118
+ nextSlideRef.current();
95
119
  }
96
120
  }, autoplay_speed);
97
121
  return () => clearInterval(timer);
@@ -130,6 +154,7 @@ var Slider = ({
130
154
  setCurrentSlide(slidePositions[currentStepIndex + 1]);
131
155
  }
132
156
  };
157
+ nextSlideRef.current = nextSlide;
133
158
  const prevSlide = () => {
134
159
  if (currentStepIndex <= 0) {
135
160
  if (infinite_scroll) {
@@ -161,14 +186,7 @@ var Slider = ({
161
186
  setIsPlaying(true);
162
187
  }
163
188
  };
164
- const maxTranslatePercentage = Math.max(
165
- 0,
166
- totalSlides * slideWidthPercentage - 100
167
- );
168
- const translateX = -Math.min(
169
- currentSlide * slideWidthPercentage,
170
- maxTranslatePercentage
171
- );
189
+ const translateX = -currentSlide * slideWidthPercentage;
172
190
  const slides = Children.map(children, (child, index) => {
173
191
  if (!React.isValidElement(child)) return null;
174
192
  const childProps = child.props;
package/dist/index.js CHANGED
@@ -7194,7 +7194,9 @@ var init_Slider = __esm({
7194
7194
  );
7195
7195
  const [isPlaying, setIsPlaying] = (0, import_react62.useState)(autoplay);
7196
7196
  const trackRef = (0, import_react62.useRef)(null);
7197
- console.log("trackRef:", trackRef);
7197
+ const prevSlideRef = (0, import_react62.useRef)(currentSlide);
7198
+ const nextSlideRef = (0, import_react62.useRef)(() => {
7199
+ });
7198
7200
  const [videoProgress, setVideoProgress] = (0, import_react62.useState)(null);
7199
7201
  (0, import_react62.useEffect)(() => {
7200
7202
  if (typeof initialSlidesToShow === "number") {
@@ -7216,16 +7218,36 @@ var init_Slider = __esm({
7216
7218
  }, [initialSlidesToShow]);
7217
7219
  (0, import_react62.useEffect)(() => {
7218
7220
  if (!autoplay) return;
7221
+ if (trackRef.current) {
7222
+ Array.from(trackRef.current.children).forEach((child, index) => {
7223
+ if (index !== currentSlide) {
7224
+ const nonActiveVideos = child.querySelectorAll("video");
7225
+ nonActiveVideos.forEach((vid) => {
7226
+ vid.pause();
7227
+ vid.currentTime = 0;
7228
+ });
7229
+ }
7230
+ });
7231
+ }
7219
7232
  const activeSlideElement = trackRef.current?.children[currentSlide];
7220
7233
  const videoElement = activeSlideElement?.querySelector("video");
7234
+ const isNewSlide = prevSlideRef.current !== currentSlide;
7235
+ prevSlideRef.current = currentSlide;
7221
7236
  if (videoElement) {
7222
7237
  videoElement.loop = false;
7223
- setVideoProgress(0);
7224
- if (videoElement.ended) {
7238
+ if (isNewSlide) {
7239
+ setVideoProgress(0);
7225
7240
  videoElement.currentTime = 0;
7226
7241
  }
7227
- videoElement.play().catch(() => {
7228
- });
7242
+ if (isPlaying) {
7243
+ if (videoElement.ended) {
7244
+ videoElement.currentTime = 0;
7245
+ }
7246
+ videoElement.play().catch(() => {
7247
+ });
7248
+ } else {
7249
+ videoElement.pause();
7250
+ }
7229
7251
  const handleTimeUpdate = () => {
7230
7252
  if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
7231
7253
  const pct = videoElement.currentTime / videoElement.duration * 100;
@@ -7234,10 +7256,12 @@ var init_Slider = __esm({
7234
7256
  };
7235
7257
  const handleVideoEnded = () => {
7236
7258
  setVideoProgress(100);
7237
- nextSlide();
7259
+ nextSlideRef.current();
7238
7260
  };
7239
7261
  const handleVideoError = () => {
7240
- nextSlide();
7262
+ if (videoElement.error) {
7263
+ nextSlideRef.current();
7264
+ }
7241
7265
  };
7242
7266
  videoElement.addEventListener("timeupdate", handleTimeUpdate);
7243
7267
  videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
@@ -7254,7 +7278,7 @@ var init_Slider = __esm({
7254
7278
  }
7255
7279
  const timer = setInterval(() => {
7256
7280
  if (isPlaying) {
7257
- nextSlide();
7281
+ nextSlideRef.current();
7258
7282
  }
7259
7283
  }, autoplay_speed);
7260
7284
  return () => clearInterval(timer);
@@ -7293,6 +7317,7 @@ var init_Slider = __esm({
7293
7317
  setCurrentSlide(slidePositions[currentStepIndex + 1]);
7294
7318
  }
7295
7319
  };
7320
+ nextSlideRef.current = nextSlide;
7296
7321
  const prevSlide = () => {
7297
7322
  if (currentStepIndex <= 0) {
7298
7323
  if (infinite_scroll) {
@@ -7324,14 +7349,7 @@ var init_Slider = __esm({
7324
7349
  setIsPlaying(true);
7325
7350
  }
7326
7351
  };
7327
- const maxTranslatePercentage = Math.max(
7328
- 0,
7329
- totalSlides * slideWidthPercentage - 100
7330
- );
7331
- const translateX = -Math.min(
7332
- currentSlide * slideWidthPercentage,
7333
- maxTranslatePercentage
7334
- );
7352
+ const translateX = -currentSlide * slideWidthPercentage;
7335
7353
  const slides = import_react62.Children.map(children, (child, index) => {
7336
7354
  if (!import_react62.default.isValidElement(child)) return null;
7337
7355
  const childProps = child.props;
package/dist/index.mjs CHANGED
@@ -2551,7 +2551,7 @@ var Pagination = dynamic16(() => import("./Pagination-6R4XZLF6.mjs"), { ssr: tru
2551
2551
  var DataBindingControls = dynamic16(() => import("./DataBindingControls-VSLL4WV2.mjs"), {
2552
2552
  ssr: true
2553
2553
  });
2554
- var Slider = dynamic16(() => import("./Slider-MZWLONIG.mjs"), {
2554
+ var Slider = dynamic16(() => import("./Slider-3URCZ3JU.mjs"), {
2555
2555
  ssr: false
2556
2556
  });
2557
2557
  function toCamelCase(str) {
package/dist/server.js CHANGED
@@ -4829,7 +4829,9 @@ var init_Slider = __esm({
4829
4829
  );
4830
4830
  const [isPlaying, setIsPlaying] = (0, import_react42.useState)(autoplay);
4831
4831
  const trackRef = (0, import_react42.useRef)(null);
4832
- console.log("trackRef:", trackRef);
4832
+ const prevSlideRef = (0, import_react42.useRef)(currentSlide);
4833
+ const nextSlideRef = (0, import_react42.useRef)(() => {
4834
+ });
4833
4835
  const [videoProgress, setVideoProgress] = (0, import_react42.useState)(null);
4834
4836
  (0, import_react42.useEffect)(() => {
4835
4837
  if (typeof initialSlidesToShow === "number") {
@@ -4851,16 +4853,36 @@ var init_Slider = __esm({
4851
4853
  }, [initialSlidesToShow]);
4852
4854
  (0, import_react42.useEffect)(() => {
4853
4855
  if (!autoplay) return;
4856
+ if (trackRef.current) {
4857
+ Array.from(trackRef.current.children).forEach((child, index) => {
4858
+ if (index !== currentSlide) {
4859
+ const nonActiveVideos = child.querySelectorAll("video");
4860
+ nonActiveVideos.forEach((vid) => {
4861
+ vid.pause();
4862
+ vid.currentTime = 0;
4863
+ });
4864
+ }
4865
+ });
4866
+ }
4854
4867
  const activeSlideElement = trackRef.current?.children[currentSlide];
4855
4868
  const videoElement = activeSlideElement?.querySelector("video");
4869
+ const isNewSlide = prevSlideRef.current !== currentSlide;
4870
+ prevSlideRef.current = currentSlide;
4856
4871
  if (videoElement) {
4857
4872
  videoElement.loop = false;
4858
- setVideoProgress(0);
4859
- if (videoElement.ended) {
4873
+ if (isNewSlide) {
4874
+ setVideoProgress(0);
4860
4875
  videoElement.currentTime = 0;
4861
4876
  }
4862
- videoElement.play().catch(() => {
4863
- });
4877
+ if (isPlaying) {
4878
+ if (videoElement.ended) {
4879
+ videoElement.currentTime = 0;
4880
+ }
4881
+ videoElement.play().catch(() => {
4882
+ });
4883
+ } else {
4884
+ videoElement.pause();
4885
+ }
4864
4886
  const handleTimeUpdate = () => {
4865
4887
  if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
4866
4888
  const pct = videoElement.currentTime / videoElement.duration * 100;
@@ -4869,10 +4891,12 @@ var init_Slider = __esm({
4869
4891
  };
4870
4892
  const handleVideoEnded = () => {
4871
4893
  setVideoProgress(100);
4872
- nextSlide();
4894
+ nextSlideRef.current();
4873
4895
  };
4874
4896
  const handleVideoError = () => {
4875
- nextSlide();
4897
+ if (videoElement.error) {
4898
+ nextSlideRef.current();
4899
+ }
4876
4900
  };
4877
4901
  videoElement.addEventListener("timeupdate", handleTimeUpdate);
4878
4902
  videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
@@ -4889,7 +4913,7 @@ var init_Slider = __esm({
4889
4913
  }
4890
4914
  const timer = setInterval(() => {
4891
4915
  if (isPlaying) {
4892
- nextSlide();
4916
+ nextSlideRef.current();
4893
4917
  }
4894
4918
  }, autoplay_speed);
4895
4919
  return () => clearInterval(timer);
@@ -4928,6 +4952,7 @@ var init_Slider = __esm({
4928
4952
  setCurrentSlide(slidePositions[currentStepIndex + 1]);
4929
4953
  }
4930
4954
  };
4955
+ nextSlideRef.current = nextSlide;
4931
4956
  const prevSlide = () => {
4932
4957
  if (currentStepIndex <= 0) {
4933
4958
  if (infinite_scroll) {
@@ -4959,14 +4984,7 @@ var init_Slider = __esm({
4959
4984
  setIsPlaying(true);
4960
4985
  }
4961
4986
  };
4962
- const maxTranslatePercentage = Math.max(
4963
- 0,
4964
- totalSlides * slideWidthPercentage - 100
4965
- );
4966
- const translateX = -Math.min(
4967
- currentSlide * slideWidthPercentage,
4968
- maxTranslatePercentage
4969
- );
4987
+ const translateX = -currentSlide * slideWidthPercentage;
4970
4988
  const slides = import_react42.Children.map(children, (child, index) => {
4971
4989
  if (!import_react42.default.isValidElement(child)) return null;
4972
4990
  const childProps = child.props;
package/dist/server.mjs CHANGED
@@ -2507,7 +2507,7 @@ var Pagination = dynamic15(() => import("./Pagination-RMAXCIL7.mjs"), { ssr: tru
2507
2507
  var DataBindingControls = dynamic15(() => import("./DataBindingControls-Z2AHWFYX.mjs"), {
2508
2508
  ssr: true
2509
2509
  });
2510
- var Slider = dynamic15(() => import("./Slider-3UFC3SQQ.mjs"), {
2510
+ var Slider = dynamic15(() => import("./Slider-5VE2T2QN.mjs"), {
2511
2511
  ssr: false
2512
2512
  });
2513
2513
  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.20261014101636",
3
+ "version": "0.8.1-dev.20261015111022",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",