codesource

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../style.css">
    <title>V2 - FightStreaming</title>
</head>
<body>
    <div class="Container">
        <header>
            <div class="Entete">
                <div class="LogoTitle">
                    <a href="../index.html">
                        <h1>FightStreaming</h1>
                    </a>
                </div>
                <div class="SearchBar">
                    <form>
                        <input type="search" placeholder="Recherche..." id="searchFight">
                    </form>
                </div>
                <div class="searchBarResponsive">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" color="#000000" fill="none">
                        <path d="M17.5 17.5L22 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
                    </svg>
                </div>
            </div>
        </header>
        <main>
            <section class="section-3">
                <div class="row-3">
                    <div class="col-3">
                        <div class="WatchFight">
                            <div class="Item-WatchFight">
                                <h1 id="event-name"></h1>
                                <iframe id="event-video" src="" frameborder="0" allowfullscreen></iframe>
                            </div>
                            <div class="FightCard" id="fight-card">
                                <!-- Les éléments de fightCard seront insérés ici -->
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Fonction pour obtenir les paramètres de l'URL
            function getQueryParams() {
                const params = {};
                const queryString = window.location.search.substring(1);
                const regex = /([^&=]+)=([^&]*)/g;
                let m;
                while (m = regex.exec(queryString)) {
                    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
                }
                return params;
            }

            const params = getQueryParams();
            const eventName = params.eventName;
            const eventId = params.eventId;

            // Mettre à jour le titre de l'événement
            if (eventName) {
                document.getElementById('event-name').innerText = eventName;
            }

            // Récupérer les données fightCard de localStorage
            const fightCard = eventId ? JSON.parse(localStorage.getItem(eventId)) : [];

            // Vérifier que fightCard est un tableau
            if (Array.isArray(fightCard) && fightCard.length > 0) {
                const fightCardContainer = document.getElementById('fight-card');
                const eventVideo = document.getElementById('event-video');

                // Afficher la première vidéo par défaut
                eventVideo.src = fightCard[0].videos[0];

                fightCard.forEach((fight, index) => {
                    const fightItem = document.createElement('div');
                    fightItem.className = 'item-fightCard';
                    fightItem.innerHTML = `
                        <h1 class="fight-title">
                            <a href="#" class="video-link" data-video="${fight.videos[0]}">${fight.name}</a>
                        </h1>
                    `;
                    fightCardContainer.appendChild(fightItem);
                });

                // Ajouter un gestionnaire d'événements pour chaque lien vidéo
                document.querySelectorAll('.video-link').forEach(link => {
                    link.addEventListener('click', function(event) {
                        event.preventDefault();
                        // Mettre à jour l'iframe principale avec la vidéo du lien cliqué
                        eventVideo.src = this.getAttribute('data-video');
                    });
                });
            } else {
                console.error('fightCard est vide ou non défini');
            }
        });
    </script>
</body>
</html>


JAVASCRIPT:


const url = 'http://...';

fetch(url)
.then(response => {
    return response.json();
})
.then(data => {
    console.log(data);

    const UFC_Fights = document.querySelector('.Fights');

    // Accéder uniquement aux index 0 et 2
    const indices = [0, 2];
    indices.forEach(index => {
        const promotion = data[index];
        if (promotion && Array.isArray(promotion.events)) {
            promotion.events.forEach(event => {
                const item_UFC_Fights = document.createElement('div');
                item_UFC_Fights.className = 'item-Fights';

                // Générer un identifiant unique pour chaque événement
                const eventId = `event-${index}-${event.eventName.replace(/\s+/g, '-')}`;

                // Ajouter plusieurs liens vidéo aux données de fightCard
                const fightCardWithVideos = event.fightCard.map((fight, i) => ({
                    name: fight,
                    videos: [
                        `https://youtu.be/embed/mzO5mL2kgEo?si=Smr2AVGj2U1YTEFB&index=${i}`,
                        `https://youtu.be/DBn_dS04kMY?si=f9u91vfWn9VJeK5o&index=${i}`
                    ]
                }));

                // Stocker les données dans localStorage
                localStorage.setItem(eventId, JSON.stringify(fightCardWithVideos));

                item_UFC_Fights.innerHTML = `
                <a href="./boxingmatch.html?eventName=${encodeURIComponent(event.eventName)}&eventId=${eventId}">
                    <img src="${event.imgURL}" alt="${event.eventName}">
                    <div class="Title-item-Fights">
                        <h1>${event.eventName}</h1>
                        <p>${event.eventDate}</p>
                    </div>
                </a>
                `;
                UFC_Fights.appendChild(item_UFC_Fights);
            });
        }
    });
})
.catch(error => {
    console.error('Error fetching data:', error);
});