import React, { useState, useEffect, useCallback } from 'react'; import axios from 'axios'; import { Carousel } from 'primereact/carousel'; import { parseEvent } from '@/utils/nostr'; import { VideoTemplate } from '@/components/content/carousels/templates/VideoTemplate'; import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton'; import { useVideos } from '@/hooks/nostr/useVideos'; import useWindowWidth from '@/hooks/useWindowWidth'; import { Divider } from 'primereact/divider'; const responsiveOptions = [ { breakpoint: '3000px', numVisible: 3, numScroll: 1 }, { breakpoint: '1462px', numVisible: 2, numScroll: 1 }, { breakpoint: '575px', numVisible: 1, numScroll: 1 } ]; export default function VideosCarousel() { const [processedVideos, setProcessedVideos] = useState([]); const [paidLessons, setPaidLessons] = useState([]); const [freeLessons, setFreeLessons] = useState([]); const [zapAmounts, setZapAmounts] = useState({}); const { videos, videosLoading, videosError } = useVideos(); const windowWidth = useWindowWidth(); const isMobileView = windowWidth <= 450; const handleZapAmountChange = useCallback((videoId, amount) => { setZapAmounts(prev => ({ ...prev, [videoId]: amount })); }, []); useEffect(() => { axios.get('/api/lessons').then(res => { if (res.data) { res.data.forEach(lesson => { if (lesson?.resource?.price > 0) { setPaidLessons(prev => [...prev, lesson?.resourceId]); } else { setFreeLessons(prev => [...prev, lesson?.resourceId]); } }); } }).catch(err => { console.log('err', err); }); }, []); useEffect(() => { const fetch = async () => { try { if (videos && videos.length > 0 && paidLessons.length > 0) { const processedVideos = videos.map(video => parseEvent(video)); // Filter out videos that are in the paid lessons array const filteredVideos = processedVideos.filter(video => !paidLessons.includes(video?.d)); setProcessedVideos(filteredVideos); } else { console.log('No videos fetched or empty array returned'); } } catch (error) { console.error('Error fetching videos:', error); } }; fetch(); }, [videos, paidLessons]); useEffect(() => { if (Object.keys(zapAmounts).length === processedVideos.length) { const sortedVideos = [...processedVideos].sort((a, b) => (zapAmounts[b.id] || 0) - (zapAmounts[a.id] || 0) ); setProcessedVideos(sortedVideos); } }, [zapAmounts, processedVideos]); if (videosError) return
Error: {videosError}
; return ( <>

Videos

!processedVideos.length ? : } responsiveOptions={responsiveOptions} /> ); }