My80sTV Clone

My80sTV Clone

body { font-family: Arial, sans-serif; background-color: #000; color: #fff; text-align: center; margin: 0; padding: 0; } h1 { margin: 20px 0; } #player-container { display: flex; justify-content: center; align-items: center; height: 70vh; } video { max-width: 90%; max-height: 100%; background: #000; } #controls { margin: 20px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; } import { fetch80sVideos } from './tmdb.js'; const videoPlayer = document.getElementById('video-player'); const nextButton = document.getElementById('next-button'); let videos = []; let currentIndex = 0; async function init() { videos = await fetch80sVideos(); if (videos.length === 0) { alert('No videos found.'); return; } playVideo(currentIndex); } function playVideo(index) { const video = videos[index]; if (!video) return; // For demo, use YouTube trailers if available if (video.youtubeKey) { videoPlayer.src = `https://www.youtube.com/embed/${video.youtubeKey}?autoplay=1&controls=1`; videoPlayer.type = 'text/html'; } else if (video.videoUrl) { videoPlayer.src = video.videoUrl; } else { videoPlayer.src = ''; } } nextButton.addEventListener('click', () => { currentIndex = (currentIndex + 1) % videos.length; playVideo(currentIndex); }); init(); const API_KEY = '194d885d6be15594b97e2d1f3b2526be'; const BASE_URL = 'https://api.themoviedb.org/3'; async function fetch80sVideos() { const videos = []; try { // Fetch popular movies from 1980-1989 for (let year = 1980; year <= 1989; year++) { const url = `${BASE_URL}/discover/movie?api_key=${API_KEY}&language=en-US&sort_by=popularity.desc&primary_release_year=${year}&page=1&with_original_language=en`; const res = await fetch(url); const data = await res.json(); for (const movie of data.results) { const videoData = await fetchMovieTrailer(movie.id); if (videoData) { videos.push(videoData); } } } } catch (error) { console.error('Error fetching 80s videos:', error); } return videos; } async function fetchMovieTrailer(movieId) { try { const url = `${BASE_URL}/movie/${movieId}/videos?api_key=${API_KEY}&language=en-US`; const res = await fetch(url); const data = await res.json(); const trailer = data.results.find( (vid) => vid.type === 'Trailer' && vid.site === 'YouTube' ); if (trailer) { return { youtubeKey: trailer.key, title: trailer.name, }; } } catch (error) { console.error('Error fetching trailer:', error); } return null; } export { fetch80sVideos };