Spaces:

fannata
/

zeeflix

Running

zeeflix / script.js

change website logo

f28f280 verified about 1 year ago

4.77 kB

document.addEventListener('DOMContentLoaded', () => {
  // Add upcoming movies highlight animation
  highlightUpcomingMovies();
  
  // Handle search functionality
  setupSearch();
  
  // Handle movie card clicks
  setupMoviePlayback();
});
function setupMoviePlayback() {
  document.addEventListener('click', async (e) => {
    const movieCard = e.target.closest('.movie-poster');
    if (movieCard) {
      const movieId = movieCard.dataset.movieId;
      if (movieId) {
        try {
          // Fetch movie details
          const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=8f2b224acadeeebc64ef32b4c04919de&append_to_response=videos`);
          const movieData = await response.json();
          
          // Create video player
          createVideoPlayer(movieData);
        } catch (error) {
          console.error('Error fetching movie details:', error);
        }
      }
    }
    
    // Close player when clicking outside
    const player = document.querySelector('.video-player');
    if (player && !e.target.closest('.video-player') && !e.target.closest('.movie-poster')) {
      player.remove();
    }
  });
}
async function createVideoPlayer(movieData) {
  // Remove existing player if any
  const existingPlayer = document.querySelector('.video-player');
  if (existingPlayer) existingPlayer.remove();

  // Show loading state
  const player = document.createElement('div');
  player.className = 'video-player';
  player.innerHTML = `
    <div class="player-overlay"></div>
    <div class="player-content">
      <button class="close-player">×</button>
      <h3>${movieData.title || movieData.name}</h3>
      <p>${movieData.overview}</p>
      <div class="loading-spinner">
        <div></div><div></div><div></div><div></div>
      </div>
      <p class="loading-text">Preparing your stream...</p>
    </div>
  `;
  document.body.appendChild(player);

  // Fetch streaming URL (simulated)
  try {
    await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate loading
    
    // Find trailer video
    const trailer = movieData.videos?.results?.find(v => v.type === 'Trailer');
    const videoUrl = trailer 
      ? `https://www.youtube.com/embed/${trailer.key}?autoplay=1` 
      : '';

    player.innerHTML = `
      <div class="player-overlay"></div>
      <div class="player-content">
        <button class="close-player">×</button>
        <h3>${movieData.title || movieData.name}</h3>
        <p>${movieData.overview}</p>
        ${videoUrl ? `
          <iframe 
            width="100%" 
            height="500" 
            src="${videoUrl}" 
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
          </iframe>
        ` : '<p>No trailer available</p>'}
        <div class="stream-options">
          <button class="quality-btn active">HD</button>
          <button class="quality-btn">Full HD</button>
          <button class="quality-btn">4K</button>
        </div>
      </div>
    `;
document.body.appendChild(player);

  // Close button event
  player.querySelector('.close-player').addEventListener('click', () => {
    player.remove();
  });
}
function highlightUpcomingMovies() {
  // Find all upcoming movie cards and add pulse animation
  setTimeout(() => {
    const upcomingRows = document.querySelectorAll('movie-row[title="Upcoming Movies"]');
    upcomingRows.forEach(row => {
      const cards = row.shadowRoot.querySelectorAll('.movie-card');
      if (cards.length > 0) {
        // Highlight the first 3 upcoming movies
        for (let i = 0; i < Math.min(3, cards.length); i++) {
          cards[i].classList.add('upcoming-highlight');
        }
      }
    });
  }, 1000); // Wait for movies to load
}

function setupSearch() {
  // This would be connected to the navbar search functionality
  document.addEventListener('keypress', (e) => {
    if (e.target.classList.contains('search-input') && e.key === 'Enter') {
      const query = e.target.value.trim();
      if (query) {
        console.log(`Searching for: ${query}`);
        // Here you would typically redirect to search results or fetch them
        // window.location.href = `/search.html?q=${encodeURIComponent(query)}`;
      }
    }
  });
}

// Handle theme toggle
document.addEventListener('themeToggle', (e) => {
  document.body.classList.toggle('dark');
  localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
});

// Check for saved theme preference
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark');
} else if (localStorage.getItem('theme') === 'light') {
  document.body.classList.add('light');
}


	document.addEventListener('DOMContentLoaded', () => {
	// Add upcoming movies highlight animation
	highlightUpcomingMovies();

	// Handle search functionality
	setupSearch();

	// Handle movie card clicks
	setupMoviePlayback();
	});
	function setupMoviePlayback() {
	document.addEventListener('click', async (e) => {
	const movieCard = e.target.closest('.movie-poster');
	if (movieCard) {
	const movieId = movieCard.dataset.movieId;
	if (movieId) {
	try {
	// Fetch movie details
	const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=8f2b224acadeeebc64ef32b4c04919de&append_to_response=videos`);
	const movieData = await response.json();

	// Create video player
	createVideoPlayer(movieData);
	} catch (error) {
	console.error('Error fetching movie details:', error);
	}
	}
	}

	// Close player when clicking outside
	const player = document.querySelector('.video-player');
	if (player && !e.target.closest('.video-player') && !e.target.closest('.movie-poster')) {
	player.remove();
	}
	});
	}
	async function createVideoPlayer(movieData) {
	// Remove existing player if any
	const existingPlayer = document.querySelector('.video-player');
	if (existingPlayer) existingPlayer.remove();

	// Show loading state
	const player = document.createElement('div');
	player.className = 'video-player';
	player.innerHTML = `
	<div class="player-overlay"></div>
	<div class="player-content">
	<button class="close-player">×</button>
	<h3>${movieData.title \|\| movieData.name}</h3>
	<p>${movieData.overview}</p>
	<div class="loading-spinner">
	<div></div><div></div><div></div><div></div>
	</div>
	<p class="loading-text">Preparing your stream...</p>
	</div>
	`;
	document.body.appendChild(player);

	// Fetch streaming URL (simulated)
	try {
	await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate loading

	// Find trailer video
	const trailer = movieData.videos?.results?.find(v => v.type === 'Trailer');
	const videoUrl = trailer
	? `https://www.youtube.com/embed/${trailer.key}?autoplay=1`
	: '';

	player.innerHTML = `
	<div class="player-overlay"></div>
	<div class="player-content">
	<button class="close-player">×</button>
	<h3>${movieData.title \|\| movieData.name}</h3>
	<p>${movieData.overview}</p>
	${videoUrl ? `
	<iframe
	width="100%"
	height="500"
	src="${videoUrl}"
	frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen>
	</iframe>
	` : '<p>No trailer available</p>'}
	<div class="stream-options">
	<button class="quality-btn active">HD</button>
	<button class="quality-btn">Full HD</button>
	<button class="quality-btn">4K</button>
	</div>
	</div>
	`;
	document.body.appendChild(player);

	// Close button event
	player.querySelector('.close-player').addEventListener('click', () => {
	player.remove();
	});
	}
	function highlightUpcomingMovies() {
	// Find all upcoming movie cards and add pulse animation
	setTimeout(() => {
	const upcomingRows = document.querySelectorAll('movie-row[title="Upcoming Movies"]');
	upcomingRows.forEach(row => {
	const cards = row.shadowRoot.querySelectorAll('.movie-card');
	if (cards.length > 0) {
	// Highlight the first 3 upcoming movies
	for (let i = 0; i < Math.min(3, cards.length); i++) {
	cards[i].classList.add('upcoming-highlight');
	}
	}
	});
	}, 1000); // Wait for movies to load
	}

	function setupSearch() {
	// This would be connected to the navbar search functionality
	document.addEventListener('keypress', (e) => {
	if (e.target.classList.contains('search-input') && e.key === 'Enter') {
	const query = e.target.value.trim();
	if (query) {
	console.log(`Searching for: ${query}`);
	// Here you would typically redirect to search results or fetch them
	// window.location.href = `/search.html?q=${encodeURIComponent(query)}`;
	}
	}
	});
	}

	// Handle theme toggle
	document.addEventListener('themeToggle', (e) => {
	document.body.classList.toggle('dark');
	localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
	});

	// Check for saved theme preference
	if (localStorage.getItem('theme') === 'dark') {
	document.body.classList.add('dark');
	} else if (localStorage.getItem('theme') === 'light') {
	document.body.classList.add('light');
	}