Hugging Face's logo

Spaces:
docto41
/
cinestream
Running

App Files Community
cinestream / index.html
docto41's picture
docto41
Add 2 files
4a90a5d verified
raw
history blame contribute delete
44.6 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CineStream - Films avec streaming 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">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#6d28d9',
 secondary: '#8b5cf6',
 dark: '#1e1b4b',
 light: '#f5f3ff',
 },
 fontFamily: {
 sans: ['Inter', 'sans-serif'],
 },
 }
 }
 }
 </script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Inter', sans-serif;
 background-color: #0f172a;
 color: white;
 }
.movie-card {
 transition: all 0.3s ease;
 }
.movie-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
.movie-poster {
 height: 450px;
 object-fit: cover;
 }
.loading-spinner {
 animation: spin 1s linear infinite;
 }
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
.gradient-text {
 background: linear-gradient(90deg, #8b5cf6, #ec4899);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
.search-input:focus {
 box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5);
 }
.error-message {
 background-color: rgba(239, 68, 68, 0.2);
 border-left: 4px solid #ef4444;
 }
.placeholder-poster {
 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
 display: flex;
 align-items: center;
 justify-content: center;
 }
/* Style pour le lecteur vidéo */
 .video-container {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 height: 0;
 overflow: hidden;
 }
.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: none;
 }
/* Style pour les boutons de streaming */
 .stream-btn {
 transition: all 0.2s ease;
 }
.stream-btn:hover {
 transform: scale(1.05);
 }
/* Style pour la fenêtre de streaming */
 .streaming-window {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 z-index: 1000;
 display: flex;
 flex-direction: column;
 }
.streaming-header {
 padding: 15px;
 background-color: rgba(0, 0, 0, 0.7);
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
.streaming-content {
 flex: 1;
 display: flex;
 justify-content: center;
 align-items: center;
 }
.streaming-controls {
 padding: 15px;
 background-color: rgba(0, 0, 0, 0.7);
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
/* Style pour la sélection de serveur */
 .server-list {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin-top: 10px;
 }
.server-btn {
 padding: 8px 12px;
 border-radius: 20px;
 font-size: 14px;
 cursor: pointer;
 transition: all 0.2s;
 }
.server-btn.active {
 background-color: #6d28d9;
 color: white;
 }
.server-btn.inactive {
 background-color: #334155;
 color: #94a3b8;
 }
/* Animation de chargement du streaming */
 .stream-loading {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 20px;
 }
.stream-loading-spinner {
 width: 50px;
 height: 50px;
 border: 5px solid rgba(255, 255, 255, 0.1);
 border-radius: 50%;
 border-top-color: #6d28d9;
 animation: spin 1s linear infinite;
 }
 </style>
</head>
<body class="min-h-screen">
 <!-- Navigation -->
 <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-lg">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex items-center justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <span class="text-2xl font-bold gradient-text">CineStream</span>
 </div>
 <div class="hidden md:block ml-10">
 <div class="flex space-x-4">
 <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-primary">Accueil</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Films</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Séries</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tendances</a>
 </div>
 </div>
 </div>
 <div class="hidden md:block">
 <div class="ml-4 flex items-center md:ml-6">
 <div class="relative mx-4">
 <input type="text" id="search-input" placeholder="Rechercher un film..."
class="search-input bg-gray-800 text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-200">
 <button onclick="searchMovies()" class="absolute right-3 top-2 text-gray-400 hover:text-white">
 <i class="fas fa-search"></i>
 </button>
 </div>
 <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
 <i class="fas fa-user-circle text-xl"></i>
 </button>
 </div>
 </div>
 <div class="-mr-2 flex md:hidden">
 <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 </div>
 </nav>
<!-- Main Content -->
 <main class="pt-24 pb-12">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <!-- Featured Section -->
 <section class="mb-12">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-bold text-white">Films populaires</h2>
 <div class="flex space-x-2">
 <button onclick="filterMovies('popular')" class="px-4 py-1 rounded-full text-sm bg-primary text-white">Populaires</button>
 <button onclick="filterMovies('top_rated')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Mieux notés</button>
 <button onclick="filterMovies('upcoming')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Prochainement</button>
 </div>
 </div>
<div id="movies-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
 <!-- Movies will be loaded here -->
 <div class="flex justify-center items-center py-12 col-span-full">
 <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>
 </div>
 </div>
<div id="load-more-container" class="mt-8 flex justify-center">
 <button onclick="loadMoreMovies()" class="px-6 py-2 bg-primary text-white rounded-full hover:bg-secondary transition flex items-center">
 <span>Voir plus</span>
 <i class="fas fa-chevron-down ml-2"></i>
 </button>
 </div>
 </section>
<!-- Genres Section -->
 <section class="mb-12">
 <h2 class="text-2xl font-bold text-white mb-6">Par genres</h2>
 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
 <button onclick="filterByGenre(28)" class="genre-btn px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-full text-sm">Action</button>
 <button onclick="filterByGenre(12)" class="genre-btn px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full text-sm">Aventure</button>
 <button onclick="filterByGenre(16)" class="genre-btn px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-full text-sm">Animation</button>
 <button onclick="filterByGenre(35)" class="genre-btn px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-full text-sm">Comédie</button>
 <button onclick="filterByGenre(80)" class="genre-btn px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full text-sm">Crime</button>
 <button onclick="filterByGenre(18)" class="genre-btn px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-sm">Drame</button>
 </div>
 </section>
 </div>
 </main>
<!-- Footer -->
 <footer class="bg-gray-900 text-gray-400 py-8">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-white text-lg font-semibold mb-4">CineStream</h3>
 <p class="text-sm">La meilleure plateforme pour regarder des films avec streaming automatique.</p>
 </div>
 <div>
 <h3 class="text-white text-lg font-semibold mb-4">Navigation</h3>
 <ul class="space-y-2 text-sm">
 <li><a href="#" class="hover:text-white">Accueil</a></li>
 <li><a href="#" class="hover:text-white">Films</a></li>
 <li><a href="#" class="hover:text-white">Séries</a></li>
 <li><a href="#" class="hover:text-white">Nouveautés</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-lg font-semibold mb-4">Légal</h3>
 <ul class="space-y-2 text-sm">
 <li><a href="#" class="hover:text-white">Conditions d'utilisation</a></li>
 <li><a href="#" class="hover:text-white">Politique de confidentialité</a></li>
 <li><a href="#" class="hover:text-white">DMCA</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-lg font-semibold mb-4">Contact</h3>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>
 </div>
 </div>
 </div>
 <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center">
 <p>© 2023 CineStream. Tous droits réservés.</p>
 </div>
 </div>
 </footer>
<!-- Movie Details Modal -->
 <div id="movie-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 transition-opacity" aria-hidden="true">
 <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
 </div>
 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
 <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 <div class="sm:flex sm:items-start">
 <div id="modal-poster" class="flex-shrink-0 w-full sm:w-1/3 mb-4 sm:mb-0 sm:mr-6">
 <img class="w-full rounded-lg shadow-lg" src="" alt="Movie Poster">
 </div>
 <div class="mt-3 text-center sm:mt-0 sm:text-left w-full sm:w-2/3">
 <h3 id="modal-title" class="text-2xl leading-6 font-bold text-white mb-2"></h3>
 <div class="flex items-center mb-4">
 <span id="modal-rating" class="bg-yellow-500 text-white text-xs font-semibold px-2 py-1 rounded mr-3"></span>
 <span id="modal-year" class="text-gray-300 text-sm"></span>
 <span id="modal-runtime" class="ml-3 text-gray-300 text-sm"></span>
 </div>
 <p id="modal-overview" class="text-gray-300 mb-4"></p>
 <div id="modal-genres" class="flex flex-wrap gap-2 mb-4"></div>
<!-- Serveurs de streaming -->
 <div class="mb-4">
 <h4 class="text-sm font-semibold text-gray-400 mb-2">CHOISIR UN SERVEUR :</h4>
 <div class="server-list">
 <button onclick="selectServer('hdvip')" class="server-btn active" data-server="hdvip">
 <i class="fas fa-crown mr-1"></i> HD VIP
 </button>
 <button onclick="selectServer('streamlare')" class="server-btn inactive" data-server="streamlare">
 <i class="fas fa-play-circle mr-1"></i> Streamlare
 </button>
 <button onclick="selectServer('streamtape')" class="server-btn inactive" data-server="streamtape">
 <i class="fas fa-tape mr-1"></i> Streamtape
 </button>
 <button onclick="selectServer('younetu')" class="server-btn inactive" data-server="younetu">
 <i class="fas fa-film mr-1"></i> Younetu
 </button>
 <button onclick="selectServer('uptostream')" class="server-btn inactive" data-server="uptostream">
 <i class="fas fa-cloud mr-1"></i> Uptostream
 </button>
 <button onclick="selectServer('vidsrc')" class="server-btn inactive" data-server="vidsrc">
 <i class="fas fa-server mr-1"></i> VidSrc
 </button>
 </div>
 </div>
<div class="mt-4">
 <button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-secondary focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
 Fermer
 </button>
 <button id="watch-now-btn" onclick="startStreaming()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
 <i class="fas fa-play mr-2"></i> Lecture auto
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Streaming Window (hidden by default) -->
 <div id="streaming-window" class="streaming-window hidden">
 <div class="streaming-header">
 <h3 id="streaming-title" class="text-xl font-bold text-white"></h3>
 <button onclick="closeStreamingWindow()" class="text-gray-400 hover:text-white">
 <i class="fas fa-times text-xl"></i>
 </button>
 </div>
 <div class="streaming-content">
 <div id="streaming-player-container" class="w-full h-full" style="max-width: 1200px;">
 <!-- Contenu du lecteur sera chargé ici -->
 <div id="stream-loading" class="stream-loading w-full h-full">
 <div class="stream-loading-spinner"></div>
 <p class="text-gray-300">Chargement du flux vidéo...</p>
 </div>
 </div>
 </div>
 <div class="streaming-controls">
 <div class="flex space-x-2">
 <button onclick="changeQuality('720p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">720p</button>
 <button onclick="changeQuality('1080p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">1080p</button>
 <button onclick="changeQuality('4k')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">4K</button>
 </div>
 <div>
 <button onclick="toggleFullscreen()" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">
 <i class="fas fa-expand mr-1"></i> Plein écran
 </button>
 </div>
 </div>
 </div>
<script>
 // Configuration
 const API_KEY = 'c45a857c193f6302f2b5061c3b85e743'; // Clé API TMDB valide
 const BASE_URL = 'https://api.themoviedb.org/3';
// Serveurs de streaming avec URLs de base fonctionnelles
 const STREAMING_SERVERS = {
 hdvip: {
 name: 'Lecteur HD VIP',
 url: 'https://database.gdriveplayer.us/player.php?tmdb=',
 autoPlay: true,
 requiresTMDB: true,
 requiresIMDB: false
 },
 streamlare: {
 name: 'Streamlare',
 url: 'https://streamlare.com/e/',
 autoPlay: true,
 requiresTMDB: false,
 requiresIMDB: true
 },
 streamtape: {
 name: 'Streamtape',
 url: 'https://streamtape.com/e/',
 autoPlay: true,
 requiresTMDB: false,
 requiresIMDB: true
 },
 younetu: {
 name: 'Younetu',
 url: 'https://younetu.com/embed/',
 autoPlay: true,
 requiresTMDB: false,
 requiresIMDB: true
 },
 uptostream: {
 name: 'Uptostream',
 url: 'https://uptostream.com/iframe/',
 autoPlay: true,
 requiresTMDB: false,
 requiresIMDB: true
 },
 vidsrc: {
 name: 'VidSrc',
 url: 'https://vidsrc.to/embed/movie/',
 autoPlay: true,
 requiresTMDB: true,
 requiresIMDB: false
 }
 };
let currentPage = 1;
 let currentFilter = 'popular';
 let currentGenre = null;
 let currentSearch = '';
 let totalPages = 1;
 let isLoading = false;
 let currentMovieId = null;
 let currentIMDBId = null;
 let selectedServer = 'hdvip';
// Fonction utilitaire pour faire les requêtes API
 async function fetchAPI(endpoint, params = {}) {
 const url = new URL(`${BASE_URL}${endpoint}`);
// Ajouter les paramètres par défaut
 const defaultParams = {
 language: 'fr-FR',
 page: currentPage,
 api_key: API_KEY
 };
// Fusionner les paramètres
 const queryParams = {...defaultParams, ...params};
// Ajouter les paramètres à l'URL
 Object.keys(queryParams).forEach(key => {
 if (queryParams[key] !== undefined && queryParams[key] !== null) {
 url.searchParams.append(key, queryParams[key]);
 }
 });
try {
 const response = await fetch(url);
if (!response.ok) {
 throw new Error(`Erreur HTTP: ${response.status}`);
 }
return await response.json();
 } catch (error) {
 console.error('Erreur API:', error);
 throw error;
 }
 }
// Charger les films au démarrage
 document.addEventListener('DOMContentLoaded', function() {
 loadMovies();
// Écouter la touche Entrée dans la recherche
 document.getElementById('search-input').addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
 searchMovies();
 }
 });
 });
// Charger les films
 async function loadMovies() {
 if (isLoading) return;
isLoading = true;
 showLoadingState();
try {
 let data;
if (currentSearch) {
 data = await fetchAPI('/search/movie', {
 query: currentSearch,
 include_adult: false,
 page: currentPage
 });
 } else if (currentGenre) {
 data = await fetchAPI('/discover/movie', {
 include_adult: false,
 include_video: false,
 sort_by: 'popularity.desc',
 with_genres: currentGenre,
 page: currentPage
 });
 } else {
 data = await fetchAPI(`/movie/${currentFilter}`, {
 page: currentPage
 });
 }
totalPages = data.total_pages || 1;
if (currentPage === 1) {
 document.getElementById('movies-container').innerHTML = '';
 }
if (data.results && data.results.length > 0) {
 displayMovies(data.results);
 updateLoadMoreButton();
 } else {
 showNoResults();
 }
 } catch (error) {
 console.error('Error fetching movies:', error);
 showErrorState(error.message);
 } finally {
 isLoading = false;
 }
 }
// Afficher l'état de chargement
 function showLoadingState() {
 const container = document.getElementById('movies-container');
 container.innerHTML = `
 <div class="flex justify-center items-center py-12 col-span-full">
 <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>
 </div>
 `;
 }
// Afficher les films avec boutons de streaming
 function displayMovies(movies) {
 const container = document.getElementById('movies-container');
movies.forEach(movie => {
 const movieCard = document.createElement('div');
 movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300';
// Utiliser l'image originale en haute qualité si disponible
 const posterPath = movie.poster_path
? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
: 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
movieCard.innerHTML = `
 <div>
 <div class="movie-poster w-full rounded-t-lg overflow-hidden ${!movie.poster_path ? 'placeholder-poster' : ''}">
 <img src="${posterPath}"
alt="${movie.title || 'Titre inconnu'}"
class="w-full h-full object-cover"
 onerror="this.src='https://via.placeholder.com/500x750?text=Image+non+chargée'; this.classList.add('placeholder-poster')">
 </div>
 <div class="p-4">
 <h3 class="text-lg font-semibold text-white truncate">${movie.title || 'Titre inconnu'}</h3>
 <div class="flex items-center mt-2">
 <span class="text-yellow-400 text-sm">
 <i class="fas fa-star"></i> ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}
 </span>
 <span class="text-gray-400 text-sm ml-auto">${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span>
 </div>
 <div class="mt-3">
 <button onclick="startAutoStreaming(${movie.id}, '${movie.title || 'Film'}')" class="w-full stream-btn px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm">
 <i class="fas fa-play-circle mr-1"></i> Lecture auto
 </button>
 <button onclick="showMovieDetails(${movie.id})" class="w-full mt-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded text-sm">
 <i class="fas fa-info-circle mr-1"></i> Détails
 </button>
 </div>
 </div>
 </div>
 `;
container.appendChild(movieCard);
 });
 }
// Afficher un message d'erreur
 function showErrorState(errorMessage) {
 const container = document.getElementById('movies-container');
 container.innerHTML = `
 <div class="col-span-full py-6 px-4 error-message rounded-lg">
 <div class="flex items-center">
 <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3"></i>
 <div>
 <h3 class="text-lg font-medium text-white">Erreur lors du chargement des films</h3>
 <p class="text-gray-300 mt-1">${errorMessage || 'Veuillez réessayer plus tard'}</p>
 <button onclick="retryLoading()" class="mt-3 px-4 py-2 bg-primary text-white rounded-full hover:bg-secondary transition text-sm">
 <i class="fas fa-sync-alt mr-2"></i> Réessayer
 </button>
 </div>
 </div>
 </div>
 `;
document.getElementById('load-more-container').classList.add('hidden');
 }
// Afficher un message quand aucun résultat n'est trouvé
 function showNoResults() {
 const container = document.getElementById('movies-container');
 container.innerHTML = `
 <div class="col-span-full text-center py-12">
 <i class="fas fa-film text-4xl text-gray-500 mb-4"></i>
 <h3 class="text-xl text-white">Aucun film trouvé</h3>
 <p class="text-gray-400 mt-2">Essayez avec d'autres critères de recherche</p>
 </div>
 `;
document.getElementById('load-more-container').classList.add('hidden');
 }
// Réessayer le chargement
 function retryLoading() {
 currentPage = 1;
 loadMovies();
 }
// Mettre à jour le bouton "Voir plus"
 function updateLoadMoreButton() {
 const loadMoreContainer = document.getElementById('load-more-container');
if (currentPage >= totalPages) {
 loadMoreContainer.innerHTML = `
 <p class="text-gray-400">Vous avez atteint la fin des résultats</p>
 `;
 } else {
 loadMoreContainer.classList.remove('hidden');
 }
 }
// Filtrer les films
 function filterMovies(filter) {
 currentFilter = filter;
 currentGenre = null;
 currentSearch = '';
 currentPage = 1;
 document.getElementById('search-input').value = '';
 loadMovies();
// Mettre à jour les boutons actifs
 document.querySelectorAll('button').forEach(btn => {
 if (btn.textContent.toLowerCase().includes(filter.replace('_', ' '))) {
 btn.classList.remove('bg-gray-700');
 btn.classList.add('bg-primary');
 } else {
 btn.classList.remove('bg-primary');
 btn.classList.add('bg-gray-700');
 }
 });
 }
// Filtrer par genre
 function filterByGenre(genreId) {
 currentGenre = genreId;
 currentSearch = '';
 currentPage = 1;
 document.getElementById('search-input').value = '';
 loadMovies();
// Mettre à jour les boutons actifs
 document.querySelectorAll('.genre-btn').forEach(btn => {
 btn.classList.remove('bg-primary');
 if (btn.onclick.toString().includes(genreId.toString())) {
 btn.classList.add('bg-primary');
 }
 });
 }
// Rechercher des films
 function searchMovies() {
 const query = document.getElementById('search-input').value.trim();
 if (query) {
 currentSearch = query;
 currentGenre = null;
 currentPage = 1;
 loadMovies();
 }
 }
// Charger plus de films
 function loadMoreMovies() {
 if (currentPage < totalPages) {
 currentPage++;
 loadMovies();
 }
 }
// Afficher les détails du film
 async function showMovieDetails(movieId) {
 try {
 const movie = await fetchAPI(`/movie/${movieId}`);
 currentMovieId = movieId;
// Récupérer l'ID IMDB si disponible
 if (movie.imdb_id) {
 currentIMDBId = movie.imdb_id;
 } else {
 // Si l'ID IMDB n'est pas disponible, essayer de le récupérer via l'API
 const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`);
 currentIMDBId = externalIds.imdb_id || null;
 }
// Remplir la modal
 const modalPoster = document.querySelector('#modal-poster img');
 modalPoster.src = movie.poster_path
? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
: 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
modalPoster.onerror = function() {
 this.src = 'https://via.placeholder.com/500x750?text=Image+non+chargée';
 };
document.getElementById('modal-title').textContent = movie.title || 'Titre inconnu';
 document.getElementById('modal-rating').textContent = `${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}/10`;
 document.getElementById('modal-year').textContent = movie.release_date ? movie.release_date.substring(0, 4) : 'N/A';
 document.getElementById('modal-runtime').textContent = movie.runtime ? `${movie.runtime} min` : '';
 document.getElementById('modal-overview').textContent = movie.overview || 'Aucun synopsis disponible.';
// Afficher les genres
 const genresContainer = document.getElementById('modal-genres');
 genresContainer.innerHTML = '';
 if (movie.genres && movie.genres.length > 0) {
 movie.genres.forEach(genre => {
 const genreBadge = document.createElement('span');
 genreBadge.className = 'bg-gray-700 text-white text-xs px-2 py-1 rounded';
 genreBadge.textContent = genre.name;
 genresContainer.appendChild(genreBadge);
 });
 } else {
 genresContainer.innerHTML = '<span class="text-gray-400 text-sm">Aucun genre spécifié</span>';
 }
// Afficher la modal
 document.getElementById('movie-modal').classList.remove('hidden');
 } catch (error) {
 console.error('Error fetching movie details:', error);
 alert('Erreur lors du chargement des détails du film: ' + (error.message || 'Veuillez réessayer'));
 }
 }
// Fermer la modal de détails
 function closeModal() {
 document.getElementById('movie-modal').classList.add('hidden');
 }
// Sélectionner un serveur de streaming
 function selectServer(serverId) {
 selectedServer = serverId;
// Mettre à jour l'état des boutons
 document.querySelectorAll('.server-btn').forEach(btn => {
 if (btn.dataset.server === serverId) {
 btn.classList.remove('inactive');
 btn.classList.add('active');
 } else {
 btn.classList.remove('active');
 btn.classList.add('inactive');
 }
 });
 }
// Démarrer le streaming depuis la modal
 function startStreaming() {
 if (currentMovieId) {
 const movieTitle = document.getElementById('modal-title').textContent;
 startAutoStreaming(currentMovieId, movieTitle);
 closeModal();
 }
 }
// Démarrer le streaming automatique dans une nouvelle fenêtre
 async function startAutoStreaming(movieId, movieTitle) {
 currentMovieId = movieId;
// Afficher la fenêtre de streaming
 const streamingWindow = document.getElementById('streaming-window');
 document.getElementById('streaming-title').textContent = movieTitle;
// Afficher l'état de chargement
 const playerContainer = document.getElementById('streaming-player-container');
 playerContainer.innerHTML = `
 <div id="stream-loading" class="stream-loading w-full h-full">
 <div class="stream-loading-spinner"></div>
 <p class="text-gray-300">Chargement du flux vidéo...</p>
 </div>
 `;
// Afficher la fenêtre de streaming
 streamingWindow.classList.remove('hidden');
// Récupérer les informations du film pour l'ID IMDB si nécessaire
 let imdbId = currentIMDBId;
 if (!imdbId && STREAMING_SERVERS[selectedServer].requiresIMDB) {
 try {
 const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`);
 imdbId = externalIds.imdb_id;
 if (!imdbId) {
 throw new Error("ID IMDB non disponible");
 }
 } catch (error) {
 console.error("Erreur lors de la récupération de l'ID IMDB:", error);
 playerContainer.innerHTML = `
 <div class="flex flex-col items-center justify-center h-full text-red-400">
 <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>
 <p class="text-lg">Impossible de trouver l'ID IMDB pour ce film</p>
 <p class="text-sm text-gray-400 mt-2">Essayez avec un autre serveur</p>
 </div>
 `;
 return;
 }
 }
// Construire l'URL de streaming en fonction du serveur sélectionné
 let streamingUrl;
 const serverConfig = STREAMING_SERVERS[selectedServer];
if (serverConfig.requiresTMDB) {
 streamingUrl = serverConfig.url + movieId;
 } else if (serverConfig.requiresIMDB && imdbId) {
 streamingUrl = serverConfig.url + imdbId;
 } else {
 // Si aucun ID n'est disponible, utiliser TMDB par défaut
 streamingUrl = serverConfig.url + movieId;
 }
// Ajouter le paramètre de lecture automatique si pris en charge
 if (serverConfig.autoPlay) {
 streamingUrl += '/auto';
 }
// Créer l'iframe pour le lecteur vidéo
 const iframe = document.createElement('iframe');
 iframe.id = 'streaming-player';
 iframe.src = streamingUrl;
 iframe.setAttribute('allowfullscreen', '');
 iframe.setAttribute('scrolling', 'no');
 iframe.setAttribute('frameborder', '0');
 iframe.setAttribute('marginwidth', '0');
 iframe.setAttribute('marginheight', '0');
 iframe.style.width = '100%';
 iframe.style.height = '100%';
 iframe.style.border = 'none';
// Gestion des erreurs de chargement
 iframe.onerror = function() {
 playerContainer.innerHTML = `
 <div class="flex flex-col items-center justify-center h-full text-red-400">
 <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>
 <p class="text-lg">Erreur lors du chargement du flux vidéo</p>
 <p class="text-sm text-gray-400 mt-2">Le serveur peut être temporairement indisponible</p>
 <button onclick="tryAlternativeServer()" class="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition">
 <i class="fas fa-sync-alt mr-2"></i> Essayer un autre serveur
 </button>
 </div>
 `;
 };
// Remplacer le chargement par le lecteur
 playerContainer.innerHTML = '';
 playerContainer.appendChild(iframe);
// Mettre le focus sur la fenêtre de streaming
 streamingWindow.focus();
// Tentative de lecture automatique (peut être bloquée par le navigateur)
 setTimeout(() => {
 try {
 iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
 } catch (e) {
 console.log("Auto-play blocked by browser");
 }
 }, 2000);
 }
// Essayer un autre serveur en cas d'erreur
 function tryAlternativeServer() {
 const servers = Object.keys(STREAMING_SERVERS);
 const currentIndex = servers.indexOf(selectedServer);
 const nextIndex = (currentIndex + 1) % servers.length;
selectedServer = servers[nextIndex];
 startAutoStreaming(currentMovieId, document.getElementById('streaming-title').textContent);
 }
// Fermer la fenêtre de streaming
 function closeStreamingWindow() {
 const playerContainer = document.getElementById('streaming-player-container');
 playerContainer.innerHTML = '';
 document.getElementById('streaming-window').classList.add('hidden');
 }
// Changer la qualité de streaming (simulé)
 function changeQuality(quality) {
 alert(`Qualité changée en ${quality}. Note: Ceci est une démonstration.`);
 // En réalité, vous devriez mettre à jour la source du lecteur vidéo
 }
// Basculer en plein écran
 function toggleFullscreen() {
 const playerContainer = document.getElementById('streaming-player-container');
 if (playerContainer.requestFullscreen) {
 playerContainer.requestFullscreen();
 } else if (playerContainer.webkitRequestFullscreen) {
 playerContainer.webkitRequestFullscreen();
 } else if (playerContainer.msRequestFullscreen) {
 playerContainer.msRequestFullscreen();
 }
 }
 </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/cinestream" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>