File size: 3,956 Bytes
cb20bdc
 
 
3b85fd7
 
0d4d44f
 
 
cb20bdc
 
 
3b85fd7
cb20bdc
3b85fd7
 
 
 
 
 
 
0d4d44f
17406e2
3b85fd7
 
 
0d4d44f
3b85fd7
 
 
 
 
 
 
17406e2
3b85fd7
 
 
 
 
 
 
 
 
cb20bdc
 
 
 
3b85fd7
cb20bdc
3b85fd7
 
 
cb20bdc
 
 
 
3b85fd7
 
 
cb20bdc
 
3b85fd7
cb20bdc
3b85fd7
cb20bdc
 
3b85fd7
cb20bdc
 
3b85fd7
cb20bdc
 
 
 
3b85fd7
 
 
cb20bdc
0d4d44f
 
cb20bdc
 
 
 
3b85fd7
cb20bdc
 
 
 
 
 
 
 
0d4d44f
 
 
 
 
3b85fd7
cb20bdc
 
 
 
3b85fd7
cb20bdc
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
'use client';
import { useState, useEffect, useRef } from 'react';
import './HeroSection.css';
import apiClient from '@/api/apiClient';
import SkeletonLoader from '@/skeletons/HeroSection';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay } from '@fortawesome/free-solid-svg-icons';
import Link from 'next/link';

const HeroSection = () => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const intervalRef = useRef(null);
    const [fadeOut, setFadeOut] = useState(false);
    const [items, setItems] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchRecentItems = async () => {
            try {
                const response = await apiClient.getRecent();
                console.log(response);
                const movies = response.movies.map(film => ({
                    title: film[0],
                    description: film[2],
                    imageUrl: film[3],
                    type: 'Movie'
                }));
                const series = response.series.map(serie => ({
                    title: serie[0],
                    description: serie[2],
                    imageUrl: serie[3],
                    type: 'Series'
                }));
                setItems([...movies, ...series]);
            } catch (error) {
                console.error('Error fetching recent items:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchRecentItems();
    }, []);

    const startAutoSwitch = () => {
        if (intervalRef.current) clearInterval(intervalRef.current);
        intervalRef.current = setInterval(() => {
            setFadeOut(true);
            setTimeout(() => {
                setCurrentIndex(prevIndex => (prevIndex + 1) % items.length);
                setFadeOut(false);
            }, 200);
        }, 5000);
    };

    useEffect(() => {
        if (items.length > 0) {
            startAutoSwitch();
        }

        return () => {
            clearInterval(intervalRef.current);
        };
    }, [items]);

    const handleIndicatorClick = (index) => {
        setFadeOut(true);
        setTimeout(() => {
            setCurrentIndex(index);
            setFadeOut(false);
        }, 100);
        startAutoSwitch();
    };

    if (loading) {
        return <SkeletonLoader />;
    }

    const { title, description, imageUrl, type } = items[currentIndex];
    const linkPath = `/${type.toLowerCase()}/${encodeURIComponent(title)}`;

    return (
        <div className="hero-container">
            <div className="hero-section">
                {items.map((item, index) => (
                    <div
                        key={index}
                        className={`hero-image ${index === currentIndex ? 'active' : ''} ${fadeOut ? 'fade-out' : ''}`}
                        style={{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.1) 0%, #11121f 100%), url("${item.imageUrl}")` }}
                    ></div>
                ))}
                <div className="hero-text">
                    <h1 className="hero-title">{title}</h1>
                    <Link href={linkPath}>
                        <button className="hero-section-play-button">
                            <FontAwesomeIcon icon={faPlay} size="lg" /> Play
                        </button>
                    </Link>
                    <p className="hero-description">{description}</p>
                </div>
            </div>

            <div className="hero-indicators">
                {items.map((_, index) => (
                    <div
                        key={index}
                        className={`indicator ${index === currentIndex ? 'active' : ''}`}
                        onClick={() => handleIndicatorClick(index)}
                    ></div>
                ))}
            </div>
        </div>
    );
};

export default HeroSection;