Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-16 09:41:35 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: theme issues and cleanup

Browse Source
This commit is contained in:
Timur Ercan
2024-06-12 11:52:38 +02:00
parent 2bf0d42fbd
commit 71f7717f0b
1 changed files with 22 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,8 +56,19 @@ export const Carousel = () => {
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0);
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const videoRefs = useRef<(HTMLVideoElement | null)[]>([]); const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
const { theme } = useTheme();
const [autoplayDelay, setAutoplayDelay] = useState<number[]>([]); const [autoplayDelay, setAutoplayDelay] = useState<number[]>([]);
const { resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
if (mounted && videoRefs.current[selectedIndex]) {
videoRefs.current[selectedIndex].load();
}
}, [selectedIndex, mounted, resolvedTheme]);
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [ const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
Autoplay({ playOnInit: true, delay: autoplayDelay[selectedIndex] || 5000 }), Autoplay({ playOnInit: true, delay: autoplayDelay[selectedIndex] || 5000 }),
@ -115,7 +126,7 @@ export const Carousel = () => {
}; };
void setVideoDurations(); void setVideoDurations();
}, [slides, theme]); }, [slides, mounted, resolvedTheme]);
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
@ -146,14 +157,14 @@ export const Carousel = () => {
return () => { return () => {
observer.disconnect(); observer.disconnect();
}; };
}, [slides, theme]); }, [slides, mounted, resolvedTheme]);
useEffect(() => { useEffect(() => {
if (!emblaApi) return; if (!emblaApi) return;
onSelect(); onSelect();
emblaApi.on('select', onSelect).on('reInit', onSelect); emblaApi.on('select', onSelect).on('reInit', onSelect);
}, [emblaApi, onSelect]); }, [emblaApi, onSelect, mounted, resolvedTheme]);
useEffect(() => { useEffect(() => {
const autoplay = emblaApi?.plugins()?.autoplay; const autoplay = emblaApi?.plugins()?.autoplay;
@ -164,24 +175,7 @@ export const Carousel = () => {
.on('autoplay:play', () => setIsPlaying(true)) .on('autoplay:play', () => setIsPlaying(true))
.on('autoplay:stop', () => setIsPlaying(false)) .on('autoplay:stop', () => setIsPlaying(false))
.on('reInit', () => setIsPlaying(autoplay.isPlaying())); .on('reInit', () => setIsPlaying(autoplay.isPlaying()));
}, [emblaApi]); }, [emblaApi, mounted, resolvedTheme]);
// 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(() => { useEffect(() => {
if (autoplayDelay[selectedIndex] === undefined) return; if (autoplayDelay[selectedIndex] === undefined) return;
@ -205,15 +199,7 @@ export const Carousel = () => {
}, updateInterval); }, updateInterval);
return () => clearInterval(timer); return () => clearInterval(timer);
}, [selectedIndex, autoplayDelay, emblaApi]); }, [selectedIndex, autoplayDelay, emblaApi, mounted, resolvedTheme]);
useEffect(() => {
videoRefs.current.forEach((video) => {
if (video) {
video.load();
}
});
}, [theme]);
useEffect(() => { useEffect(() => {
if (!emblaApi) return; if (!emblaApi) return;
@ -224,8 +210,10 @@ export const Carousel = () => {
}; };
resetCarousel(); resetCarousel();
}, [theme, emblaApi, autoplayDelay]); }, [emblaApi, autoplayDelay, mounted, resolvedTheme]);
// Ensure the component renders only after mounting to avoid theme issues
if (!mounted) return null;
return ( return (
<> <>
<Card className="mx-auto mt-12 w-full max-w-4xl rounded-2xl p-1 before:rounded-2xl" gradient> <Card className="mx-auto mt-12 w-full max-w-4xl rounded-2xl p-1 before:rounded-2xl" gradient>
@ -235,14 +223,14 @@ export const Carousel = () => {
<div className="min-w-[10rem] flex-none basis-full rounded-xl" key={index}> <div className="min-w-[10rem] flex-none basis-full rounded-xl" key={index}>
{slide.type === 'video' && ( {slide.type === 'video' && (
<video <video
key={`${theme}-${index}`} key={`${resolvedTheme}-${index}`}
ref={(el) => (videoRefs.current[index] = el)} ref={(el) => (videoRefs.current[index] = el)}
muted muted
loop loop
className="h-auto w-full rounded-xl" className="h-auto w-full rounded-xl"
> >
<source <source
src={theme === 'dark' ? slide.srcDark : slide.srcLight} src={resolvedTheme === 'dark' ? slide.srcDark : slide.srcLight}
type="video/webm" type="video/webm"
/> />
Your browser does not support the video tag. Your browser does not support the video tag.