@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260923125229 → 0.8.1-dev.20260924080906
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
// src/components/Slider.tsx
|
|
4
|
-
import React, { useState, useEffect, Children, cloneElement } from "react";
|
|
4
|
+
import React, { useState, useEffect, Children, cloneElement, useRef } from "react";
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
var Slider = ({
|
|
7
7
|
children,
|
|
@@ -30,6 +30,8 @@ var Slider = ({
|
|
|
30
30
|
typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
|
|
31
31
|
);
|
|
32
32
|
const [isPlaying, setIsPlaying] = useState(autoplay);
|
|
33
|
+
const trackRef = useRef(null);
|
|
34
|
+
console.log("trackRef:", trackRef);
|
|
33
35
|
useEffect(() => {
|
|
34
36
|
if (typeof initialSlidesToShow === "number") {
|
|
35
37
|
setSlidesToShowState(initialSlidesToShow);
|
|
@@ -50,6 +52,34 @@ var Slider = ({
|
|
|
50
52
|
}, [initialSlidesToShow]);
|
|
51
53
|
useEffect(() => {
|
|
52
54
|
if (!autoplay) return;
|
|
55
|
+
const activeSlideElement = trackRef.current?.children[currentSlide];
|
|
56
|
+
const videoElement = activeSlideElement?.querySelector("video");
|
|
57
|
+
if (videoElement) {
|
|
58
|
+
videoElement.loop = false;
|
|
59
|
+
if (videoElement.ended) {
|
|
60
|
+
videoElement.currentTime = 0;
|
|
61
|
+
}
|
|
62
|
+
videoElement.play().catch(() => {
|
|
63
|
+
});
|
|
64
|
+
const handleTimeUpdate = () => {
|
|
65
|
+
if (videoElement.duration && !isNaN(videoElement.duration)) {
|
|
66
|
+
const pct = videoElement.currentTime / videoElement.duration * 100;
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
const handleVideoEnded = () => {
|
|
70
|
+
nextSlide();
|
|
71
|
+
};
|
|
72
|
+
const handleVideoError = () => {
|
|
73
|
+
nextSlide();
|
|
74
|
+
};
|
|
75
|
+
videoElement.addEventListener("ended", handleVideoEnded, { once: true });
|
|
76
|
+
videoElement.addEventListener("error", handleVideoError, { once: true });
|
|
77
|
+
return () => {
|
|
78
|
+
videoElement.removeEventListener("ended", handleVideoEnded);
|
|
79
|
+
videoElement.removeEventListener("error", handleVideoError);
|
|
80
|
+
videoElement.pause();
|
|
81
|
+
};
|
|
82
|
+
}
|
|
53
83
|
const timer = setInterval(() => {
|
|
54
84
|
if (isPlaying) {
|
|
55
85
|
nextSlide();
|
|
@@ -160,6 +190,7 @@ var Slider = ({
|
|
|
160
190
|
/* @__PURE__ */ jsx(
|
|
161
191
|
"div",
|
|
162
192
|
{
|
|
193
|
+
ref: trackRef,
|
|
163
194
|
className: "flex h-full",
|
|
164
195
|
style: {
|
|
165
196
|
transition: transition ? "transform 0.5s ease" : "none",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"use client";
|
|
4
4
|
|
|
5
5
|
// src/components/Slider.tsx
|
|
6
|
-
import React, { useState, useEffect, Children, cloneElement } from "react";
|
|
6
|
+
import React, { useState, useEffect, Children, cloneElement, useRef } from "react";
|
|
7
7
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
var Slider = ({
|
|
9
9
|
children,
|
|
@@ -32,6 +32,8 @@ var Slider = ({
|
|
|
32
32
|
typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
|
|
33
33
|
);
|
|
34
34
|
const [isPlaying, setIsPlaying] = useState(autoplay);
|
|
35
|
+
const trackRef = useRef(null);
|
|
36
|
+
console.log("trackRef:", trackRef);
|
|
35
37
|
useEffect(() => {
|
|
36
38
|
if (typeof initialSlidesToShow === "number") {
|
|
37
39
|
setSlidesToShowState(initialSlidesToShow);
|
|
@@ -52,6 +54,34 @@ var Slider = ({
|
|
|
52
54
|
}, [initialSlidesToShow]);
|
|
53
55
|
useEffect(() => {
|
|
54
56
|
if (!autoplay) return;
|
|
57
|
+
const activeSlideElement = trackRef.current?.children[currentSlide];
|
|
58
|
+
const videoElement = activeSlideElement?.querySelector("video");
|
|
59
|
+
if (videoElement) {
|
|
60
|
+
videoElement.loop = false;
|
|
61
|
+
if (videoElement.ended) {
|
|
62
|
+
videoElement.currentTime = 0;
|
|
63
|
+
}
|
|
64
|
+
videoElement.play().catch(() => {
|
|
65
|
+
});
|
|
66
|
+
const handleTimeUpdate = () => {
|
|
67
|
+
if (videoElement.duration && !isNaN(videoElement.duration)) {
|
|
68
|
+
const pct = videoElement.currentTime / videoElement.duration * 100;
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
const handleVideoEnded = () => {
|
|
72
|
+
nextSlide();
|
|
73
|
+
};
|
|
74
|
+
const handleVideoError = () => {
|
|
75
|
+
nextSlide();
|
|
76
|
+
};
|
|
77
|
+
videoElement.addEventListener("ended", handleVideoEnded, { once: true });
|
|
78
|
+
videoElement.addEventListener("error", handleVideoError, { once: true });
|
|
79
|
+
return () => {
|
|
80
|
+
videoElement.removeEventListener("ended", handleVideoEnded);
|
|
81
|
+
videoElement.removeEventListener("error", handleVideoError);
|
|
82
|
+
videoElement.pause();
|
|
83
|
+
};
|
|
84
|
+
}
|
|
55
85
|
const timer = setInterval(() => {
|
|
56
86
|
if (isPlaying) {
|
|
57
87
|
nextSlide();
|
|
@@ -162,6 +192,7 @@ var Slider = ({
|
|
|
162
192
|
/* @__PURE__ */ jsx(
|
|
163
193
|
"div",
|
|
164
194
|
{
|
|
195
|
+
ref: trackRef,
|
|
165
196
|
className: "flex h-full",
|
|
166
197
|
style: {
|
|
167
198
|
transition: transition ? "transform 0.5s ease" : "none",
|
package/dist/index.js
CHANGED
|
@@ -6096,6 +6096,8 @@ var init_Slider = __esm({
|
|
|
6096
6096
|
typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
|
|
6097
6097
|
);
|
|
6098
6098
|
const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
|
|
6099
|
+
const trackRef = (0, import_react60.useRef)(null);
|
|
6100
|
+
console.log("trackRef:", trackRef);
|
|
6099
6101
|
(0, import_react60.useEffect)(() => {
|
|
6100
6102
|
if (typeof initialSlidesToShow === "number") {
|
|
6101
6103
|
setSlidesToShowState(initialSlidesToShow);
|
|
@@ -6116,6 +6118,34 @@ var init_Slider = __esm({
|
|
|
6116
6118
|
}, [initialSlidesToShow]);
|
|
6117
6119
|
(0, import_react60.useEffect)(() => {
|
|
6118
6120
|
if (!autoplay) return;
|
|
6121
|
+
const activeSlideElement = trackRef.current?.children[currentSlide];
|
|
6122
|
+
const videoElement = activeSlideElement?.querySelector("video");
|
|
6123
|
+
if (videoElement) {
|
|
6124
|
+
videoElement.loop = false;
|
|
6125
|
+
if (videoElement.ended) {
|
|
6126
|
+
videoElement.currentTime = 0;
|
|
6127
|
+
}
|
|
6128
|
+
videoElement.play().catch(() => {
|
|
6129
|
+
});
|
|
6130
|
+
const handleTimeUpdate = () => {
|
|
6131
|
+
if (videoElement.duration && !isNaN(videoElement.duration)) {
|
|
6132
|
+
const pct = videoElement.currentTime / videoElement.duration * 100;
|
|
6133
|
+
}
|
|
6134
|
+
};
|
|
6135
|
+
const handleVideoEnded = () => {
|
|
6136
|
+
nextSlide();
|
|
6137
|
+
};
|
|
6138
|
+
const handleVideoError = () => {
|
|
6139
|
+
nextSlide();
|
|
6140
|
+
};
|
|
6141
|
+
videoElement.addEventListener("ended", handleVideoEnded, { once: true });
|
|
6142
|
+
videoElement.addEventListener("error", handleVideoError, { once: true });
|
|
6143
|
+
return () => {
|
|
6144
|
+
videoElement.removeEventListener("ended", handleVideoEnded);
|
|
6145
|
+
videoElement.removeEventListener("error", handleVideoError);
|
|
6146
|
+
videoElement.pause();
|
|
6147
|
+
};
|
|
6148
|
+
}
|
|
6119
6149
|
const timer = setInterval(() => {
|
|
6120
6150
|
if (isPlaying) {
|
|
6121
6151
|
nextSlide();
|
|
@@ -6226,6 +6256,7 @@ var init_Slider = __esm({
|
|
|
6226
6256
|
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
6227
6257
|
"div",
|
|
6228
6258
|
{
|
|
6259
|
+
ref: trackRef,
|
|
6229
6260
|
className: "flex h-full",
|
|
6230
6261
|
style: {
|
|
6231
6262
|
transition: transition ? "transform 0.5s ease" : "none",
|
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-
|
|
2426
|
+
var Slider = dynamic13(() => import("./Slider-JZ5CNHEW.mjs"), {
|
|
2427
2427
|
ssr: false
|
|
2428
2428
|
});
|
|
2429
2429
|
function toCamelCase(str) {
|
package/dist/server.js
CHANGED
|
@@ -6094,6 +6094,8 @@ var init_Slider = __esm({
|
|
|
6094
6094
|
typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
|
|
6095
6095
|
);
|
|
6096
6096
|
const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
|
|
6097
|
+
const trackRef = (0, import_react60.useRef)(null);
|
|
6098
|
+
console.log("trackRef:", trackRef);
|
|
6097
6099
|
(0, import_react60.useEffect)(() => {
|
|
6098
6100
|
if (typeof initialSlidesToShow === "number") {
|
|
6099
6101
|
setSlidesToShowState(initialSlidesToShow);
|
|
@@ -6114,6 +6116,34 @@ var init_Slider = __esm({
|
|
|
6114
6116
|
}, [initialSlidesToShow]);
|
|
6115
6117
|
(0, import_react60.useEffect)(() => {
|
|
6116
6118
|
if (!autoplay) return;
|
|
6119
|
+
const activeSlideElement = trackRef.current?.children[currentSlide];
|
|
6120
|
+
const videoElement = activeSlideElement?.querySelector("video");
|
|
6121
|
+
if (videoElement) {
|
|
6122
|
+
videoElement.loop = false;
|
|
6123
|
+
if (videoElement.ended) {
|
|
6124
|
+
videoElement.currentTime = 0;
|
|
6125
|
+
}
|
|
6126
|
+
videoElement.play().catch(() => {
|
|
6127
|
+
});
|
|
6128
|
+
const handleTimeUpdate = () => {
|
|
6129
|
+
if (videoElement.duration && !isNaN(videoElement.duration)) {
|
|
6130
|
+
const pct = videoElement.currentTime / videoElement.duration * 100;
|
|
6131
|
+
}
|
|
6132
|
+
};
|
|
6133
|
+
const handleVideoEnded = () => {
|
|
6134
|
+
nextSlide();
|
|
6135
|
+
};
|
|
6136
|
+
const handleVideoError = () => {
|
|
6137
|
+
nextSlide();
|
|
6138
|
+
};
|
|
6139
|
+
videoElement.addEventListener("ended", handleVideoEnded, { once: true });
|
|
6140
|
+
videoElement.addEventListener("error", handleVideoError, { once: true });
|
|
6141
|
+
return () => {
|
|
6142
|
+
videoElement.removeEventListener("ended", handleVideoEnded);
|
|
6143
|
+
videoElement.removeEventListener("error", handleVideoError);
|
|
6144
|
+
videoElement.pause();
|
|
6145
|
+
};
|
|
6146
|
+
}
|
|
6117
6147
|
const timer = setInterval(() => {
|
|
6118
6148
|
if (isPlaying) {
|
|
6119
6149
|
nextSlide();
|
|
@@ -6224,6 +6254,7 @@ var init_Slider = __esm({
|
|
|
6224
6254
|
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
6225
6255
|
"div",
|
|
6226
6256
|
{
|
|
6257
|
+
ref: trackRef,
|
|
6227
6258
|
className: "flex h-full",
|
|
6228
6259
|
style: {
|
|
6229
6260
|
transition: transition ? "transform 0.5s ease" : "none",
|
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-
|
|
2394
|
+
var Slider = dynamic13(() => import("./Slider-3JMZZWGT.mjs"), {
|
|
2395
2395
|
ssr: false
|
|
2396
2396
|
});
|
|
2397
2397
|
function toCamelCase(str) {
|