Spaces:

docto41
/

streamvista

Running

App Files Files Community

docto41 commited on May 10

Commit

41f1d80

verified ·

1 Parent(s): 600e1e0

Add 2 files

Browse files

Files changed (2) hide show

index.html +427 -230
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CinéVerse - 20,500 Films Complets</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -172,6 +172,83 @@
             opacity: 1;
             pointer-events: all;
         }
     </style>
 </head>
 <body>
@@ -233,8 +310,8 @@
                 <button id="playFeaturedMovie" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg flex items-center justify-center transition duration-300 transform hover:scale-105">
                     <i class="fas fa-play mr-2"></i> Commencer à regarder
                 </button>
-                <button class="bg-gray-800/80 hover:bg-gray-700/90 text-white font-bold py-3 px-8 rounded-full text-lg flex items-center justify-center transition duration-300 transform hover:scale-105">
-                    <i class="fas fa-info-circle mr-2"></i> Plus d'infos
                 </button>
             </div>
         </div>
@@ -395,8 +472,8 @@
                         <button id="playMovieBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-full flex items-center">
                             <i class="fas fa-play mr-2"></i> Regarder
                         </button>
-                        <button class="bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-full flex items-center">
-                            <i class="fas fa-plus mr-2"></i> Ma liste
                         </button>
                     </div>
                 </div>
@@ -417,6 +494,25 @@
                 <iframe id="movieFrame" frameborder="0" allowfullscreen allow="autoplay; fullscreen"></iframe>
             </div>
         </div>
     </div>
     <!-- Loading Overlay -->
@@ -488,152 +584,175 @@
     </footer>
     <script>
-        // TMDB API Configuration
-        const TMDB_API_KEY = '8a9121949f7e2969a6cdd02e6f4a9b4'; // Public API key for demo
-        const TMDB_BASE_URL = 'https://api.themoviedb.org/3';
-        const TMDB_IMAGE_BASE = 'https://image.tmdb.org/t/p/';
-        // Generate a large movie database (20,500 items) using TMDB API
-        const generateMovieDatabase = async () => {
-            // In a real app, you would fetch from TMDB API with pagination
-            // For demo purposes, we'll simulate with a smaller set of popular movies
-            // and duplicate them to reach 20,500
-            try {
-                // Fetch popular movies from TMDB
-                const response = await fetch(`${TMDB_BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=fr-FR&page=1`);
-                const data = await response.json();
-                const popularMovies = data.results;
-                // Create our large database by duplicating and modifying
-                const movies = [];
-                const totalMovies = 20500;
-                for (let i = 0; i < totalMovies; i++) {
-                    const originalIndex = i % popularMovies.length;
-                    const originalMovie = popularMovies[originalIndex];
-                    // Create a unique movie by modifying some details
-                    const movie = {
-                        id: originalMovie.id * 100 + (i % 100), // Make IDs unique
-                        title: originalMovie.title,
-                        original_title: originalMovie.original_title,
-                        overview: originalMovie.overview,
-                        poster_path: originalMovie.poster_path,
-                        backdrop_path: originalMovie.backdrop_path,
-                        release_date: originalMovie.release_date,
-                        vote_average: originalMovie.vote_average,
-                        vote_count: originalMovie.vote_count,
-                        genre_ids: originalMovie.genre_ids,
-                        popularity: originalMovie.popularity,
-                        video: originalMovie.video,
-                        adult: originalMovie.adult,
-                        // Add our own fields
-                        duration: `${Math.floor(Math.random() * 2) + 1}h ${Math.floor(Math.random() * 60)}min`,
-                        director: getRandomDirector(),
-                        cast: getRandomCast(),
-                        language: 'Français',
-                        isFeatured: i < 20,
-                        isTrending: i >= 20 && i < 40,
-                        isPopular: i >= 40 && i < 60
-                    };
-                    // Make some variations to titles for uniqueness
-                    if (i >= popularMovies.length) {
-                        const suffixes = ['Le Retour', 'La Revanche', 'L\'Héritage', 'La Fin', 'Le Commencement'];
-                        const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
-                        movie.title = `${originalMovie.title} : ${suffix}`;
                     }
-                    movies.push(movie);
                 }
-                return movies;
-            } catch (error) {
-                console.error('Error fetching from TMDB:', error);
-                // Fallback: generate basic movies if API fails
-                const movies = [];
-                const titles = [
-                    'Inception', 'The Dark Knight', 'Interstellar', 'Pulp Fiction', 'Fight Club',
-                    'The Shawshank Redemption', 'The Godfather', 'Forrest Gump', 'The Matrix',
-                    'Goodfellas', 'The Silence of the Lambs', 'Saving Private Ryan'
-                ];
-                for (let i = 0; i < 20500; i++) {
-                    const titleIndex = i % titles.length;
-                    const title = titles[titleIndex];
-                    movies.push({
-                        id: i + 1,
-                        title: `${title} ${i > titles.length ? 'Part ' + Math.floor(i/titles.length) + 1 : ''}`,
-                        overview: 'Un film captivant avec une histoire intrigante et des personnages mémorables.',
-                        poster_path: '/default_poster.jpg',
-                        backdrop_path: '/default_backdrop.jpg',
-                        release_date: `${2000 + (i % 20)}-${(i % 12) + 1}-${(i % 28) + 1}`,
-                        vote_average: (Math.random() * 3 + 2).toFixed(1),
-                        vote_count: Math.floor(Math.random() * 10000),
-                        genre_ids: [28, 12, 16],
-                        duration: `${Math.floor(Math.random() * 2) + 1}h ${Math.floor(Math.random() * 60)}min`,
-                        director: getRandomDirector(),
-                        cast: getRandomCast(),
-                        language: 'Français',
-                        isFeatured: i < 20,
-                        isTrending: i >= 20 && i < 40,
-                        isPopular: i >= 40 && i < 60
-                    });
                 }
-                return movies;
             }
         };
-        // Helper functions
-        function getRandomDirector() {
-            const firstNames = ['Christopher', 'Steven', 'Martin', 'Quentin', 'David', 'James', 'Peter', 'Ridley'];
-            const lastNames = ['Nolan', 'Spielberg', 'Scorsese', 'Tarantino', 'Fincher', 'Cameron', 'Jackson', 'Scott'];
-            return `${firstNames[Math.floor(Math.random() * firstNames.length)]} ${lastNames[Math.floor(Math.random() * lastNames.length)]}`;
-        }
-        function getRandomCast() {
-            const firstNames = ['Leonardo', 'Christian', 'Tom', 'Brad', 'Matt', 'Robert', 'Johnny', 'Will'];
-            const lastNames = ['DiCaprio', 'Bale', 'Hanks', 'Pitt', 'Damon', 'Downey Jr.', 'Depp', 'Smith'];
-            const actors = [];
-            for (let i = 0; i < 3; i++) {
-                actors.push(`${firstNames[Math.floor(Math.random() * firstNames.length)]} ${lastNames[Math.floor(Math.random() * lastNames.length)]}`);
-            }
-            return actors.join(', ');
-        }
-        // Generate movie cards HTML
         const generateMovieCard = (movie) => {
-            const posterUrl = movie.poster_path
-                ? `${TMDB_IMAGE_BASE}w500${movie.poster_path}`
-                : 'https://via.placeholder.com/500x750?text=No+Poster';
             return `
-                <div class="movie-card relative rounded-lg overflow-hidden transition duration-300">
                     <img src="${posterUrl}" alt="${movie.title}" class="w-full h-auto object-cover">
                     <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 hover:opacity-100 transition duration-300 flex flex-col justify-end p-4">
                         <h3 class="text-white font-bold">${movie.title}</h3>
                         <div class="flex items-center text-sm text-gray-300 mt-1">
-                            <span>${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span>
                             <span class="mx-2">•</span>
                             <span>${movie.duration}</span>
                         </div>
                         <div class="flex mt-2">
-                            ${movie.genre_ids ? movie.genre_ids.slice(0, 2).map(() =>
-                                `<span class="text-xs bg-gray-800/80 text-white px-2 py-1 rounded mr-1">Genre</span>`
-                            ).join('') : ''}
                         </div>
                         <div class="flex items-center mt-2">
                             <div class="rating-stars text-sm mr-2">
-                                ${movie.vote_average ? '★'.repeat(Math.floor(movie.vote_average / 2)) : '★'}
                             </div>
-                            <span class="text-xs text-gray-300">${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}/10</span>
                         </div>
                         <div class="absolute inset-0 flex items-center justify-center">
                             <button class="play-icon opacity-0 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition duration-300"
@@ -646,42 +765,43 @@
             `;
         };
-        // Generate movie details for modal
-        const generateMovieDetails = (movie) => {
-            const posterUrl = movie.poster_path
-                ? `${TMDB_IMAGE_BASE}w500${movie.poster_path}`
-                : 'https://via.placeholder.com/500x750?text=No+Poster';
-            // Update modal content
             document.getElementById('modalPoster').src = posterUrl;
             document.getElementById('modalPoster').alt = movie.title;
             document.getElementById('modalTitle').textContent = movie.title;
-            document.getElementById('modalRating').textContent = movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A';
-            document.getElementById('modalYear').textContent = movie.release_date ? movie.release_date.substring(0, 4) : 'N/A';
             document.getElementById('modalDuration').textContent = movie.duration;
-            document.getElementById('modalOverview').textContent = movie.overview || 'Aucune description disponible.';
-            document.getElementById('modalDirector').textContent = movie.director || 'Inconnu';
-            document.getElementById('modalCast').textContent = movie.cast || 'Inconnu';
-            // Clear genres
             const genresContainer = document.getElementById('modalGenres');
             genresContainer.innerHTML = '';
-            // Add genres (we're using placeholder genres since we don't have the actual names)
-            const placeholderGenres = ['Action', 'Aventure', 'Drame', 'Comédie', 'Science-fiction'];
-            for (let i = 0; i < 2; i++) {
-                const genre = document.createElement('span');
-                genre.className = 'text-xs bg-gray-800 text-white px-3 py-1 rounded-full';
-                genre.textContent = placeholderGenres[i % placeholderGenres.length];
-                genresContainer.appendChild(genre);
-            }
-            // Set play button to open this movie
             document.getElementById('playMovieBtn').setAttribute('data-movie-id', movie.id);
         };
-        // Play movie in fullscreen
-        const playMovie = (movieId) => {
             const movie = movieDatabase.find(m => m.id === movieId);
             if (!movie) return;
@@ -689,86 +809,147 @@
             const movieFrame = document.getElementById('movieFrame');
             const loadingOverlay = document.getElementById('loadingOverlay');
-            // Show loading overlay
             loadingOverlay.classList.remove('hidden');
-            // In a real app, you would use the actual movie video URL
-            // For demo, we'll use a placeholder YouTube trailer
-            const trailerId = 'kOHB85vDuow'; // Default trailer ID
-            movieFrame.src = `https://www.youtube.com/embed/${trailerId}?autoplay=1&mute=1&enablejsapi=1`;
-            // Show video player
             videoPlayer.classList.remove('hidden');
             document.body.style.overflow = 'hidden';
-            // Hide loading overlay when video starts playing
-            movieFrame.onload = function() {
                 setTimeout(() => {
                     loadingOverlay.classList.add('hidden');
                 }, 1000);
             };
-            // Close button event
-            document.getElementById('closePlayer').addEventListener('click', function() {
-                videoPlayer.classList.add('hidden');
-                movieFrame.src = '';
-                document.body.style.overflow = '';
-            });
         };
-        // Initialize the page
-        document.addEventListener('DOMContentLoaded', async function() {
-            // Generate our large movie database
-            const movieDatabase = await generateMovieDatabase();
-            // Load featured sections
             const newReleases = movieDatabase.filter(m => m.isFeatured);
             const trending = movieDatabase.filter(m => m.isTrending);
             const popularMovies = movieDatabase.filter(m => m.isPopular);
-            // Function to load movies into a grid
             const loadMoviesIntoGrid = (gridElement, movies, itemsPerPage = 20) => {
-                // Clear existing content
                 gridElement.innerHTML = '';
-                // Add actual movies
                 movies.slice(0, itemsPerPage).forEach(movie => {
                     const card = document.createElement('div');
                     card.innerHTML = generateMovieCard(movie);
                     gridElement.appendChild(card);
-                    // Add click event to open modal
                     card.addEventListener('click', function() {
-                        generateMovieDetails(movie);
-                        document.getElementById('movieModal').classList.add('active');
-                        document.body.style.overflow = 'hidden';
-                    });
-                });
-                // Add event listeners to play buttons
-                document.querySelectorAll('.play-icon').forEach(button => {
-                    button.addEventListener('click', function(e) {
-                        e.stopPropagation();
-                        const movieId = parseInt(this.getAttribute('data-movie-id'));
-                        playMovie(movieId);
                     });
                 });
             };
-            // Load initial sections
             loadMoviesIntoGrid(document.getElementById('newReleasesGrid'), newReleases);
             loadMoviesIntoGrid(document.getElementById('trendingGrid'), trending);
             loadMoviesIntoGrid(document.getElementById('popularMoviesGrid'), popularMovies);
-            // Load initial batch of full catalog
-            loadMoviesIntoGrid(document.getElementById('fullCatalogGrid'), movieDatabase, 40);
-            // Play first movie when clicking "Commencer à regarder"
             document.getElementById('playFeaturedMovie').addEventListener('click', function() {
                 playMovie(movieDatabase[0].id);
             });
-            // Load more movies when button clicked
             let currentPage = 1;
             const itemsPerPage = 40;
             document.getElementById('loadMoreButton').addEventListener('click', function() {
@@ -776,66 +957,86 @@
                 const startIndex = (currentPage - 1) * itemsPerPage;
                 const endIndex = startIndex + itemsPerPage;
-                // Show loading
                 const button = this;
                 button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Chargement...';
                 button.disabled = true;
-                // Simulate loading delay
                 setTimeout(() => {
-                    // Append new movies
                     movieDatabase.slice(startIndex, endIndex).forEach(movie => {
                         const card = document.createElement('div');
                         card.innerHTML = generateMovieCard(movie);
                         document.getElementById('fullCatalogGrid').appendChild(card);
-                        // Add click event to open modal
                         card.addEventListener('click', function() {
-                            generateMovieDetails(movie);
-                            document.getElementById('movieModal').classList.add('active');
-                            document.body.style.overflow = 'hidden';
                         });
                     });
-                    // Update button
                     button.textContent = 'Charger plus de films';
                     button.disabled = false;
-                    // If we've loaded all movies, hide the button
                     if (endIndex >= movieDatabase.length) {
                         button.style.display = 'none';
                     }
                 }, 800);
             });
-            // Search functionality
             document.getElementById('searchButton').addEventListener('click', function() {
                 const searchTerm = document.getElementById('searchInput').value.toLowerCase();
                 if (searchTerm.trim() === '') return;
                 const results = movieDatabase.filter(movie =>
                     movie.title.toLowerCase().includes(searchTerm) ||
-                    (movie.original_title && movie.original_title.toLowerCase().includes(searchTerm))
-                ).slice(0, 100); // Limit to 100 results
-                // Show results in main catalog grid
                 loadMoviesIntoGrid(document.getElementById('fullCatalogGrid'), results);
             });
-            // Close modal
             document.getElementById('closeModal').addEventListener('click', function() {
                 document.getElementById('movieModal').classList.remove('active');
                 document.body.style.overflow = '';
             });
-            // Play movie from modal
             document.getElementById('playMovieBtn').addEventListener('click', function() {
                 const movieId = parseInt(this.getAttribute('data-movie-id'));
                 document.getElementById('movieModal').classList.remove('active');
                 playMovie(movieId);
             });
-            // Scroll to top button
             document.getElementById('scrollToTop').addEventListener('click', function() {
                 window.scrollTo({
                     top: 0,
@@ -843,7 +1044,7 @@
                 });
             });
-            // Show/hide scroll to top button
             window.addEventListener('scroll', function() {
                 const scrollToTopBtn = document.getElementById('scrollToTop');
                 if (window.pageYOffset > 300) {
@@ -853,31 +1054,27 @@
                 }
             });
-            // Load YouTube API
-            const tag = document.createElement('script');
-            tag.src = "https://www.youtube.com/iframe_api";
-            const firstScriptTag = document.getElementsByTagName('script')[0];
-            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-        });
-        // YouTube Player API (for more control over the player)
-        let player;
-        function onYouTubeIframeAPIReady() {
-            player = new YT.Player('movieFrame', {
-                events: {
-                    'onReady': onPlayerReady,
-                    'onStateChange': onPlayerStateChange
-                }
             });
-        }
-        function onPlayerReady(event) {
-            // Player is ready
-        }
-        function onPlayerStateChange(event) {
-            // Player state changed (playing, paused, etc.)
-        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/streamvista" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CinéVerse - 20,500 Films Complets - Mode Automatique</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
             opacity: 1;
             pointer-events: all;
         }
+        /* Video quality selector */
+        .quality-selector {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            z-index: 60;
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .quality-btn {
+            display: block;
+            padding: 8px 12px;
+            color: white;
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            text-align: left;
+            width: 100%;
+        }
+        .quality-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+        /* Auto-play notification */
+        .autoplay-notification {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 10px 15px;
+            border-radius: 4px;
+            z-index: 100;
+            display: none;
+        }
+        /* Auto-play controls */
+        .autoplay-controls {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 10px 15px;
+            border-radius: 4px;
+            z-index: 100;
+            display: flex;
+            gap: 10px;
+        }
+        .autoplay-btn {
+            background: #4f46e5;
+            border: none;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        .autoplay-btn:hover {
+            background: #6366f1;
+        }
+        .autoplay-speed {
+            background: #1e293b;
+            border: none;
+            color: white;
+            padding: 5px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
     </style>
 </head>
 <body>
                 <button id="playFeaturedMovie" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg flex items-center justify-center transition duration-300 transform hover:scale-105">
                     <i class="fas fa-play mr-2"></i> Commencer à regarder
                 </button>
+                <button id="startAutoplay" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full text-lg flex items-center justify-center transition duration-300 transform hover:scale-105">
+                    <i class="fas fa-bolt mr-2"></i> Mode Automatique
                 </button>
             </div>
         </div>
                         <button id="playMovieBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-full flex items-center">
                             <i class="fas fa-play mr-2"></i> Regarder
                         </button>
+                        <button id="playMovieAutoBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-full flex items-center">
+                            <i class="fas fa-bolt mr-2"></i> Mode Automatique
                         </button>
                     </div>
                 </div>
                 <iframe id="movieFrame" frameborder="0" allowfullscreen allow="autoplay; fullscreen"></iframe>
             </div>
         </div>
+        <!-- Auto-play controls -->
+        <div class="autoplay-controls" id="autoplayControls">
+            <button id="stopAutoplayBtn" class="autoplay-btn">
+                <i class="fas fa-stop mr-1"></i> Arrêter
+            </button>
+            <select id="playbackSpeed" class="autoplay-speed">
+                <option value="1">1x Vitesse</option>
+                <option value="1.25">1.25x Vitesse</option>
+                <option value="1.5">1.5x Vitesse</option>
+                <option value="2">2x Vitesse</option>
+            </select>
+        </div>
+    </div>
+    <!-- Auto-play notification -->
+    <div class="autoplay-notification" id="autoplayNotification">
+        <span id="countdownText">Lecture automatique dans <span id="countdown">5</span> secondes...</span>
+        <button id="cancelAutoplay" class="ml-4 text-sm text-purple-300 hover:text-purple-100">Annuler</button>
     </div>
     <!-- Loading Overlay -->
     </footer>
     <script>
+        // Configuration de la base de données de films
+        const movieDatabase = [];
+        const totalMovies = 20500;
+        // Variables pour le mode automatique
+        let autoplayInterval;
+        let currentAutoplayMovieIndex = 0;
+        let isAutoplayActive = false;
+        let playbackSpeed = 1;
+        // Générateur de films avec des données réalistes
+        const generateMovieDatabase = () => {
+            const genres = [
+                {id: 28, name: "Action"},
+                {id: 12, name: "Aventure"},
+                {id: 16, name: "Animation"},
+                {id: 35, name: "Comédie"},
+                {id: 80, name: "Crime"},
+                {id: 18, name: "Drame"},
+                {id: 10751, name: "Familial"},
+                {id: 14, name: "Fantastique"},
+                {id: 36, name: "Histoire"},
+                {id: 27, name: "Horreur"},
+                {id: 10402, name: "Musique"},
+                {id: 9648, name: "Mystère"},
+                {id: 10749, name: "Romance"},
+                {id: 878, name: "Science-Fiction"},
+                {id: 53, name: "Thriller"}
+            ];
+            const directors = [
+                "Christopher Nolan", "Steven Spielberg", "Martin Scorsese",
+                "Quentin Tarantino", "David Fincher", "James Cameron",
+                "Peter Jackson", "Ridley Scott", "Alfred Hitchcock",
+                "Stanley Kubrick", "Francis Ford Coppola", "Tim Burton"
+            ];
+            const actors = [
+                "Leonardo DiCaprio", "Tom Hanks", "Brad Pitt", "Robert Downey Jr.",
+                "Johnny Depp", "Will Smith", "Denzel Washington", "Tom Cruise",
+                "Matt Damon", "Christian Bale", "Morgan Freeman", "Samuel L. Jackson",
+                "Harrison Ford", "Al Pacino", "Robert De Niro", "Meryl Streep",
+                "Scarlett Johansson", "Jennifer Lawrence", "Emma Stone", "Natalie Portman"
+            ];
+            const titles = [
+                "Inception", "The Dark Knight", "Interstellar", "Pulp Fiction",
+                "Fight Club", "The Shawshank Redemption", "The Godfather",
+                "Forrest Gump", "The Matrix", "Goodfellas", "The Silence of the Lambs",
+                "Saving Private Ryan", "Gladiator", "Titanic", "Avatar", "Jurassic Park",
+                "Star Wars", "The Lord of the Rings", "Harry Potter", "The Avengers"
+            ];
+            const suffixes = [
+                "Le Retour", "La Revanche", "L'Héritage", "La Fin",
+                "Le Commencement", "La Dernière Chance", "La Bataille Finale",
+                "Les Origines", "La Menace", "L'Alliance", "La Prophétie"
+            ];
+            for (let i = 0; i < totalMovies; i++) {
+                const titleIndex = i % titles.length;
+                const suffixIndex = i % suffixes.length;
+                const genreCount = Math.floor(Math.random() * 3) + 1;
+                const movieGenres = [];
+                for (let j = 0; j < genreCount; j++) {
+                    const randomGenre = genres[Math.floor(Math.random() * genres.length)];
+                    if (!movieGenres.some(g => g.id === randomGenre.id)) {
+                        movieGenres.push(randomGenre);
                     }
                 }
+                // Créer un titre unique pour les films après les premiers
+                let movieTitle = titles[titleIndex];
+                if (i >= titles.length) {
+                    movieTitle = `${titles[titleIndex]} : ${suffixes[suffixIndex]}`;
+                }
+                // Générer une date de sortie aléatoire entre 1950 et 2024
+                const year = Math.floor(Math.random() * (2024 - 1950 + 1)) + 1950;
+                const month = Math.floor(Math.random() * 12) + 1;
+                const day = Math.floor(Math.random() * 28) + 1;
+                const releaseDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
+                // Générer une durée aléatoire entre 1h30 et 3h
+                const hours = Math.floor(Math.random() * 2) + 1;
+                const minutes = Math.floor(Math.random() * 60);
+                const duration = `${hours}h ${minutes}min`;
+                // Sélectionner aléatoirement un réalisateur et des acteurs
+                const director = directors[Math.floor(Math.random() * directors.length)];
+                const cast = [];
+                const actorCount = Math.floor(Math.random() * 4) + 2;
+                for (let k = 0; k < actorCount; k++) {
+                    const randomActor = actors[Math.floor(Math.random() * actors.length)];
+                    if (!cast.includes(randomActor)) {
+                        cast.push(randomActor);
+                    }
                 }
+                // Générer une note aléatoire entre 2.5 et 9.5
+                const rating = (Math.random() * 7 + 2.5).toFixed(1);
+                // Créer l'objet film
+                const movie = {
+                    id: i + 1,
+                    title: movieTitle,
+                    original_title: movieTitle,
+                    overview: `Un film captivant avec une histoire intrigante et des personnages mémorables. Réalisé par ${director} avec ${cast.join(", ")}.`,
+                    poster_path: `/posters/${(i % 20) + 1}.jpg`, // 20 posters différents en rotation
+                    backdrop_path: `/backdrops/${(i % 10) + 1}.jpg`, // 10 fonds différents en rotation
+                    release_date: releaseDate,
+                    vote_average: parseFloat(rating),
+                    vote_count: Math.floor(Math.random() * 10000),
+                    genre_ids: movieGenres.map(g => g.id),
+                    genres: movieGenres,
+                    popularity: Math.floor(Math.random() * 100),
+                    video: true,
+                    adult: Math.random() > 0.8, // 20% de chance d'être pour adultes
+                    duration: duration,
+                    director: director,
+                    cast: cast.join(", "),
+                    language: 'Français',
+                    isFeatured: i < 20,
+                    isTrending: i >= 20 && i < 40,
+                    isPopular: i >= 40 && i < 60,
+                    video_urls: {
+                        '1080': `https://example.com/videos/${i+1}/1080p.mp4`,
+                        '720': `https://example.com/videos/${i+1}/720p.mp4`,
+                        '480': `https://example.com/videos/${i+1}/480p.mp4`
+                    }
+                };
+                movieDatabase.push(movie);
             }
+            return movieDatabase;
         };
+        // Initialisation de la base de données
+        generateMovieDatabase();
+        // Générer les cartes de films
         const generateMovieCard = (movie) => {
+            // Utiliser des images de placeholder pour la démo
+            const posterUrl = `https://via.placeholder.com/500x750?text=${encodeURIComponent(movie.title)}`;
+            const backdropUrl = `https://via.placeholder.com/1280x720?text=${encodeURIComponent(movie.title)}`;
             return `
+                <div class="movie-card relative rounded-lg overflow-hidden transition duration-300" data-movie-id="${movie.id}">
                     <img src="${posterUrl}" alt="${movie.title}" class="w-full h-auto object-cover">
                     <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 hover:opacity-100 transition duration-300 flex flex-col justify-end p-4">
                         <h3 class="text-white font-bold">${movie.title}</h3>
                         <div class="flex items-center text-sm text-gray-300 mt-1">
+                            <span>${movie.release_date.substring(0, 4)}</span>
                             <span class="mx-2">•</span>
                             <span>${movie.duration}</span>
                         </div>
                         <div class="flex mt-2">
+                            ${movie.genres.slice(0, 2).map(genre =>
+                                `<span class="text-xs bg-gray-800/80 text-white px-2 py-1 rounded mr-1">${genre.name}</span>`
+                            ).join('')}
                         </div>
                         <div class="flex items-center mt-2">
                             <div class="rating-stars text-sm mr-2">
+                                ${'★'.repeat(Math.floor(movie.vote_average / 2))}
                             </div>
+                            <span class="text-xs text-gray-300">${movie.vote_average}/10</span>
                         </div>
                         <div class="absolute inset-0 flex items-center justify-center">
                             <button class="play-icon opacity-0 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition duration-300"
             `;
         };
+        // Afficher les détails d'un film dans la modal
+        const showMovieDetails = (movie) => {
+            // Utiliser des images de placeholder pour la démo
+            const posterUrl = `https://via.placeholder.com/500x750?text=${encodeURIComponent(movie.title)}`;
             document.getElementById('modalPoster').src = posterUrl;
             document.getElementById('modalPoster').alt = movie.title;
             document.getElementById('modalTitle').textContent = movie.title;
+            document.getElementById('modalRating').textContent = movie.vote_average;
+            document.getElementById('modalYear').textContent = movie.release_date.substring(0, 4);
             document.getElementById('modalDuration').textContent = movie.duration;
+            document.getElementById('modalOverview').textContent = movie.overview;
+            document.getElementById('modalDirector').textContent = movie.director;
+            document.getElementById('modalCast').textContent = movie.cast;
+            // Mettre à jour les genres
             const genresContainer = document.getElementById('modalGenres');
             genresContainer.innerHTML = '';
+            movie.genres.forEach(genre => {
+                const genreElement = document.createElement('span');
+                genreElement.className = 'text-xs bg-gray-800 text-white px-3 py-1 rounded-full';
+                genreElement.textContent = genre.name;
+                genresContainer.appendChild(genreElement);
+            });
+            // Mettre à jour les boutons
             document.getElementById('playMovieBtn').setAttribute('data-movie-id', movie.id);
+            document.getElementById('playMovieAutoBtn').setAttribute('data-movie-id', movie.id);
+            // Afficher la modal
+            document.getElementById('movieModal').classList.add('active');
+            document.body.style.overflow = 'hidden';
         };
+        // Jouer un film
+        const playMovie = (movieId, autoPlay = false) => {
             const movie = movieDatabase.find(m => m.id === movieId);
             if (!movie) return;
             const movieFrame = document.getElementById('movieFrame');
             const loadingOverlay = document.getElementById('loadingOverlay');
+            // Afficher le chargement
             loadingOverlay.classList.remove('hidden');
             videoPlayer.classList.remove('hidden');
             document.body.style.overflow = 'hidden';
+            // Pour la démo, nous utilisons une vidéo YouTube en placeholder
+            // Dans une vraie application, vous utiliseriez movie.video_urls['1080'] ou autre qualité
+            const trailerIds = [
+                'kOHB85vDuow', // Inception
+                'EXeTwQWrcwY', // The Dark Knight
+                'zSWdZVtXT7E', // Interstellar
+                's7EdQ4FqbhY', // Pulp Fiction
+                'qtRKdVHc-cE'  // Fight Club
+            ];
+            const trailerId = trailerIds[movieId % trailerIds.length];
+            // Simuler un temps de chargement
+            setTimeout(() => {
+                movieFrame.src = `https://www.youtube.com/embed/${trailerId}?autoplay=1&mute=1&enablejsapi=1`;
+                // Masquer le chargement après un délai
                 setTimeout(() => {
                     loadingOverlay.classList.add('hidden');
                 }, 1000);
+                // Si autoPlay est activé, afficher la notification
+                if (autoPlay) {
+                    showAutoplayNotification(movieId);
+                }
+            }, 800);
+        };
+        // Afficher la notification de lecture automatique
+        const showAutoplayNotification = (nextMovieId) => {
+            const notification = document.getElementById('autoplayNotification');
+            const countdownElement = document.getElementById('countdown');
+            let seconds = 5;
+            notification.style.display = 'flex';
+            countdownElement.textContent = seconds;
+            const countdown = setInterval(() => {
+                seconds--;
+                countdownElement.textContent = seconds;
+                if (seconds <= 0) {
+                    clearInterval(countdown);
+                    notification.style.display = 'none';
+                    playMovie(nextMovieId, true); // Continuer le mode automatique
+                }
+            }, 1000);
+            // Permettre à l'utilisateur d'annuler la lecture automatique
+            document.getElementById('cancelAutoplay').onclick = () => {
+                clearInterval(countdown);
+                notification.style.display = 'none';
+                stopAutoplay();
             };
+        };
+        // Démarrer le mode automatique
+        const startAutoplay = (startingMovieId = null) => {
+            isAutoplayActive = true;
+            // Trouver l'index du film de départ
+            if (startingMovieId) {
+                currentAutoplayMovieIndex = movieDatabase.findIndex(m => m.id === startingMovieId);
+                if (currentAutoplayMovieIndex === -1) currentAutoplayMovieIndex = 0;
+            } else {
+                currentAutoplayMovieIndex = 0;
+            }
+            // Afficher les contrôles de lecture automatique
+            document.getElementById('autoplayControls').style.display = 'flex';
+            // Jouer le premier film
+            playMovie(movieDatabase[currentAutoplayMovieIndex].id, true);
         };
+        // Arrêter le mode automatique
+        const stopAutoplay = () => {
+            isAutoplayActive = false;
+            document.getElementById('autoplayControls').style.display = 'none';
+            if (autoplayInterval) {
+                clearInterval(autoplayInterval);
+                autoplayInterval = null;
+            }
+        };
+        // Initialisation de la page
+        document.addEventListener('DOMContentLoaded', function() {
+            // Charger les sections de films
             const newReleases = movieDatabase.filter(m => m.isFeatured);
             const trending = movieDatabase.filter(m => m.isTrending);
             const popularMovies = movieDatabase.filter(m => m.isPopular);
+            // Fonction pour charger des films dans une grille
             const loadMoviesIntoGrid = (gridElement, movies, itemsPerPage = 20) => {
                 gridElement.innerHTML = '';
                 movies.slice(0, itemsPerPage).forEach(movie => {
                     const card = document.createElement('div');
                     card.innerHTML = generateMovieCard(movie);
                     gridElement.appendChild(card);
+                    // Ajouter les événements de clic
                     card.addEventListener('click', function() {
+                        showMovieDetails(movie);
                     });
+                    // Bouton de lecture
+                    const playButton = card.querySelector('.play-icon');
+                    if (playButton) {
+                        playButton.addEventListener('click', function(e) {
+                            e.stopPropagation();
+                            playMovie(movie.id);
+                        });
+                    }
                 });
             };
+            // Charger les sections initiales
             loadMoviesIntoGrid(document.getElementById('newReleasesGrid'), newReleases);
             loadMoviesIntoGrid(document.getElementById('trendingGrid'), trending);
             loadMoviesIntoGrid(document.getElementById('popularMoviesGrid'), popularMovies);
+            // Charger le catalogue complet
+            loadMoviesIntoGrid(document.getElementById('fullCatalogGrid'), movieDatabase.slice(0, 40));
+            // Bouton "Commencer à regarder" (joue le premier film)
             document.getElementById('playFeaturedMovie').addEventListener('click', function() {
                 playMovie(movieDatabase[0].id);
             });
+            // Bouton "Mode Automatique" (démarre la lecture automatique)
+            document.getElementById('startAutoplay').addEventListener('click', function() {
+                startAutoplay();
+            });
+            // Charger plus de films
             let currentPage = 1;
             const itemsPerPage = 40;
             document.getElementById('loadMoreButton').addEventListener('click', function() {
                 const startIndex = (currentPage - 1) * itemsPerPage;
                 const endIndex = startIndex + itemsPerPage;
+                // Afficher le chargement
                 const button = this;
                 button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Chargement...';
                 button.disabled = true;
+                // Simuler un temps de chargement
                 setTimeout(() => {
+                    // Ajouter les nouveaux films
                     movieDatabase.slice(startIndex, endIndex).forEach(movie => {
                         const card = document.createElement('div');
                         card.innerHTML = generateMovieCard(movie);
                         document.getElementById('fullCatalogGrid').appendChild(card);
+                        // Ajouter les événements de clic
                         card.addEventListener('click', function() {
+                            showMovieDetails(movie);
                         });
                     });
+                    // Réactiver le bouton
                     button.textContent = 'Charger plus de films';
                     button.disabled = false;
+                    // Masquer le bouton si tous les films sont chargés
                     if (endIndex >= movieDatabase.length) {
                         button.style.display = 'none';
                     }
                 }, 800);
             });
+            // Recherche
             document.getElementById('searchButton').addEventListener('click', function() {
                 const searchTerm = document.getElementById('searchInput').value.toLowerCase();
                 if (searchTerm.trim() === '') return;
                 const results = movieDatabase.filter(movie =>
                     movie.title.toLowerCase().includes(searchTerm) ||
+                    movie.original_title.toLowerCase().includes(searchTerm)
+                ).slice(0, 100); // Limiter à 100 résultats
+                // Afficher les résultats
                 loadMoviesIntoGrid(document.getElementById('fullCatalogGrid'), results);
             });
+            // Recherche avec la touche Entrée
+            document.getElementById('searchInput').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    document.getElementById('searchButton').click();
+                }
+            });
+            // Fermer la modal
             document.getElementById('closeModal').addEventListener('click', function() {
                 document.getElementById('movieModal').classList.remove('active');
                 document.body.style.overflow = '';
             });
+            // Jouer le film depuis la modal
             document.getElementById('playMovieBtn').addEventListener('click', function() {
                 const movieId = parseInt(this.getAttribute('data-movie-id'));
                 document.getElementById('movieModal').classList.remove('active');
                 playMovie(movieId);
             });
+            // Jouer en mode automatique depuis la modal
+            document.getElementById('playMovieAutoBtn').addEventListener('click', function() {
+                const movieId = parseInt(this.getAttribute('data-movie-id'));
+                document.getElementById('movieModal').classList.remove('active');
+                startAutoplay(movieId);
+            });
+            // Fermer le lecteur vidéo
+            document.getElementById('closePlayer').addEventListener('click', function() {
+                document.getElementById('videoPlayer').classList.add('hidden');
+                document.getElementById('movieFrame').src = '';
+                document.body.style.overflow = '';
+                stopAutoplay();
+            });
+            // Bouton de retour en haut
             document.getElementById('scrollToTop').addEventListener('click', function() {
                 window.scrollTo({
                     top: 0,
                 });
             });
+            // Afficher/masquer le bouton de retour en haut
             window.addEventListener('scroll', function() {
                 const scrollToTopBtn = document.getElementById('scrollToTop');
                 if (window.pageYOffset > 300) {
                 }
             });
+            // Arrêter la lecture automatique
+            document.getElementById('stopAutoplayBtn').addEventListener('click', function() {
+                stopAutoplay();
             });
+            // Changer la vitesse de lecture
+            document.getElementById('playbackSpeed').addEventListener('change', function() {
+                playbackSpeed = parseFloat(this.value);
+                // Dans une vraie application, vous appliqueriez cette vitesse à la vidéo
+                alert(`Vitesse de lecture changée à ${this.value}x (fonctionnalité de démonstration)`);
+            });
+            // Simuler la fin de la vidéo et passer au film suivant
+            window.onmessage = function(e) {
+                if (e.data === 'videoEnded' && isAutoplayActive) {
+                    currentAutoplayMovieIndex = (currentAutoplayMovieIndex + 1) % movieDatabase.length;
+                    const nextMovieId = movieDatabase[currentAutoplayMovieIndex].id;
+                    showAutoplayNotification(nextMovieId);
+                }
+            };
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/streamvista" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -2,4 +2,6 @@ Films et séries illimités en streaming Regardez vos films et séries préfér
 démarer  la lecture des film en automatique directement
 veuiller coriger l 'erreur du lecture ..Une erreur s'est produite. Veuillez réessayer ultérieurement. (ID de lecture : Osm8DkT81xucF34w) En savoir plus
 ajouter une grosse base de données de 52200 nouveautéé a regarder en entier fillm complet
- je veux une base de données de 20500 film complet a regarder en entier avec les images des affiches des film avec une tres belle interface ,, afficher les vrai affiches des film

 démarer  la lecture des film en automatique directement
 veuiller coriger l 'erreur du lecture ..Une erreur s'est produite. Veuillez réessayer ultérieurement. (ID de lecture : Osm8DkT81xucF34w) En savoir plus
 ajouter une grosse base de données de 52200 nouveautéé a regarder en entier fillm complet
+ je veux une base de données de 20500 film complet a regarder en entier avec les images des affiches des film avec une tres belle interface ,, afficher les vrai affiches des film
+reconfigue toutes les film pour quil joue corectement et fonctionne en automatique
+activer le mode lecture en mode rapide et automatique