CSE-Media/core/page/videos.all.php

<?php
$videos = fichier::getAll();
?>

<nav aria-label="breadcrumb" class="ariane">
    <ol class="breadcrumb" style="border-radius: 0 0 5px 5px; padding:5px 10px;">
        <li class="breadcrumb-item">Toutes les vidéos</li>
    </ol>
</nav>

<div class="container" style="margin-top:0;">
    <div class="row mb-10">
        <div class="col-md-6">
            <input type="text" id="searchTitle" class="form-control" placeholder="Rechercher par titre...">
        </div>
        <div class="col-md-2">
            <select id="searchMonth" class="form-control">
                <option value="">Mois</option>
                <option value="01">01 - Janvier</option>
                <option value="02">02 - Février</option>
                <option value="03">03 - Mars</option>
                <option value="04">04 - Avril</option>
                <option value="05">05 - Mai</option>
                <option value="06">06 - Juin</option>
                <option value="07">07 - Juillet</option>
                <option value="08">08 - Août</option>
                <option value="09">09 - Septembre</option>
                <option value="10">10 - Octobre</option>
                <option value="11">11 - Novembre</option>
                <option value="12">12 - Décembre</option>
            </select>
        </div>
        <div class="col-md-2">
            <input type="number" id="searchYear" class="form-control" placeholder="Année" min="1900" max="2100">
        </div>

        <div class="col-md-2 text-end">
            <button id="resetButton" class="btn btn-secondary">Réinitialiser</button>
        </div>
    </div>
</div>

<div class="container" style="margin-top:-30px;">
    <?php

    foreach ($videos as $video) {
        fichier::generatePreview($video["md5"]);
            echo '<div class="video-container big_topic" id="topic-big-' . $video["id"] . '">
                    <div class="video-content">
                        <img src="https://' . DOMAIN_MEDIAS . "/preview/" . $video["hash"] . '" alt="Preview" class="video-preview" style="width:350; height:auto;">
                        <div class="video-details">
                            <div class="actions">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-outline-primary" onclick="window.open(\'/edit/' . $video["hash"] . '\', \'_self\')">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                </div>
                            </div>
                            <div style="margin-top:-35px">
                                <div class="video-title">' . $video["title"] . '</div>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Lien</span>
                                    </div>
                                    <input type="text" class="form-control" value="https://' . DOMAIN_MEDIAS . "/video/" . $video["hash"] . '" style="background-color: #fff !important;" readonly>
                                </div>
                                <div class="video-info" style="text-align: right;">
                                    Date : ' . $video["dateEvent"] . ' | Durée : ' . core::formatDuration($video["duration"]) . ' | Statut : ' . ($video["active"] == 1 ? "<span style='color:green'>Vidéo en ligne</span>" : "<span style='color:red'>Vidéo suspendue</span>") . '
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                ';
            echo '<div class="video-container little_topic" id="topic-little-' . $video["id"] . '" onclick="showTopic(' . $video["id"] . ')">
                    <div class="video-content">
                        <div class="video-details">
                            <div>
                                <div class="video-title title-little">' . $video["title"] . '</div>
                                <div class="video-info">
                                    Date : ' . $video["dateEvent"] . ' | Durée : ' . core::formatDuration($video["duration"]) . ' | Statut : ' . ($video["active"] == 1 ? "<span style='color:green'>Vidéo en ligne</span>" : "<span style='color:red'>Vidéo suspendue</span>") . '
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                ';
    }

    ?>
</div>

<script>
    document.getElementById('searchTitle').addEventListener('input', filterVideos);
    document.getElementById('searchYear').addEventListener('input', filterVideos);
    document.getElementById('searchMonth').addEventListener('change', filterVideos);
    document.getElementById('resetButton').addEventListener('click', resetFilters);

    function filterVideos() {
        var searchTitle = document.getElementById('searchTitle').value.toLowerCase();
        var searchYear = document.getElementById('searchYear').value;
        var searchMonth = document.getElementById('searchMonth').value;

        var videos = document.querySelectorAll('.video-container');

        videos.forEach(function(video) {
            var title = video.querySelector('.video-title').textContent.toLowerCase();
            var dateText = video.querySelector('.video-info').textContent.toLowerCase();

            // Extraire la date (format attendu : 'Date : YYYY-MM-DD')
            var videoDateMatch = dateText.match(/date\s*:\s*(\d{4})-(\d{2})/i); // Extrait YYYY-MM
            var videoYear = videoDateMatch ? videoDateMatch[1] : '';
            var videoMonth = videoDateMatch ? videoDateMatch[2] : '';

            // Vérifier si le titre, l'année et le mois correspondent à la recherche
            var titleMatch = title.includes(searchTitle) || searchTitle === '';
            var yearMatch = videoYear === searchYear || searchYear === '';
            var monthMatch = videoMonth === searchMonth || searchMonth === '';

            if (titleMatch && yearMatch && monthMatch) {
                video.style.display = ''; // Afficher la vidéo si elle correspond aux critères
            } else {
                video.style.display = 'none'; // Masquer sinon
            }
        });
    }

    function resetFilters() {
        document.getElementById('searchTitle').value = '';
        document.getElementById('searchYear').value = '';
        document.getElementById('searchMonth').value = '';
        filterVideos(); // Réinitialiser le filtre
    }

    function showTopic(id){
        $(".little_topic").show();
        $(".big_topic").hide();
        filterVideos();
        $("#topic-little-" + id).hide();
        $("#topic-big-" + id).show();
    }
</script>