Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 08:42:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: show each slide based on video time

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2024-06-10 13:43:50 +00:00
parent 1b849d1fb8
commit 1fda9ed2a6
1 changed files with 62 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
apps/marketing/src/components/(marketing)/carousel.tsx
View File

@ -57,9 +57,10 @@ export const Carousel = () => {
const [progress, setProgress] = useState(0);
const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
const { theme } = useTheme();
const [autoplayDelay, setAutoplayDelay] = useState<number[]>([]);
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
Autoplay({ playOnInit: true, delay: 5000 }),
Autoplay({ playOnInit: true, delay: autoplayDelay[selectedIndex] || 5000 }),
]);
const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel(
{
@ -67,7 +68,7 @@ export const Carousel = () => {
containScroll: 'keepSnaps',
dragFree: true,
},
[Autoplay({ playOnInit: true, delay: 5000 })],
[Autoplay({ playOnInit: true, delay: autoplayDelay[selectedIndex] || 5000 })],
);
const onThumbClick = useCallback(
@ -95,6 +96,27 @@ export const Carousel = () => {
setProgress(0);
}, []);
useEffect(() => {
const setVideoDurations = async () => {
const durations = await Promise.all(
videoRefs.current.map(
async (video) =>
new Promise<number>((resolve) => {
if (video) {
video.onloadedmetadata = () => resolve(video.duration * 1000);
} else {
resolve(5000);
}
}),
),
);
setAutoplayDelay(durations);
};
void setVideoDurations();
}, [slides, theme]);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
@ -144,22 +166,54 @@ export const Carousel = () => {
.on('reInit', () => setIsPlaying(autoplay.isPlaying()));
}, [emblaApi]);
// useEffect(() => {
// const updateInterval = 50;
// const increment = 100 / (autoplayDelay[selectedIndex] / updateInterval);
// const timer = setInterval(() => {
// setProgress((prevProgress) => {
// if (prevProgress >= 100) {
// clearInterval(timer);
// return 100;
// }
// return prevProgress + increment;
// });
// }, updateInterval);
// return () => clearInterval(timer);
// }, [selectedIndex, autoplayDelay]);
useEffect(() => {
if (autoplayDelay[selectedIndex] === undefined) return;
const updateInterval = 50;
const increment = 100 / (5000 / updateInterval);
const increment = 100 / (autoplayDelay[selectedIndex] / updateInterval);
let progressValue = 0;
const timer = setInterval(() => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
progressValue = prevProgress + increment;
if (progressValue >= 100) {
clearInterval(timer);
if (emblaApi) {
emblaApi.scrollNext();
}
return 100;
}
return prevProgress + increment;
return progressValue;
});
}, updateInterval);
return () => clearInterval(timer);
}, [selectedIndex]);
}, [selectedIndex, autoplayDelay, emblaApi]);
useEffect(() => {
videoRefs.current.forEach((video) => {
if (video) {
video.load();
}
});
}, [theme]);
useEffect(() => {
if (!emblaApi) return;
@ -170,7 +224,7 @@ export const Carousel = () => {
};
resetCarousel();
}, [theme, emblaApi]);
}, [theme, emblaApi, autoplayDelay]);
return (
<>
@ -188,7 +242,7 @@ export const Carousel = () => {
className="h-auto w-full rounded-xl"
>
<source
src={theme === 'light' ? slide.srcLight : slide.srcDark}
src={theme === 'dark' ? slide.srcDark : slide.srcLight}
type="video/webm"
/>
Your browser does not support the video tag.