${title}
-${overview.substring(0, 100)}${overview.length > 100 ? '...' : ''}
- - -${mediaType.toUpperCase()}
+ ${mediaType.toUpperCase()}
+ ${result.vote_average ? `` : ''}
+ ${title}
+${overview.substring(0, 100)}${overview.length > 100 ? '...' : ''}
+
+
+
+
`;
container.appendChild(movieTile);
}
});
}
- function fetchTrailer(title) {
+ function fetchTrailer(title, movieId = null, mediaType = 'movie') {
showProgress('Finding trailer...');
- const youtubeSearchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=${encodeURIComponent(title + ' trailer')}&key=${youtubeApiKey}`;
+
+ // If we have a movieId, get trailer directly from TMDB
+ if (movieId) {
+ const detailsUrl = `https://api.themoviedb.org/3/${mediaType}/${movieId}/videos?api_key=${apiKey}`;
+ fetch(detailsUrl)
+ .then(response => response.json())
+ .then(data => {
+ const trailer = data.results.find(video =>
+ (video.type === 'Trailer' || video.type === 'Teaser') &&
+ video.site === 'YouTube'
+ );
+
+ if (trailer) {
+ openTrailerInPictureInPicture(trailer.key, title);
+ showProgress('Trailer loaded');
+ } else {
+ // Fall back to YouTube search if no trailer in TMDB
+ searchYouTubeForTrailer(title);
+ }
+ })
+ .catch(error => {
+ console.error('Error fetching TMDB trailer:', error);
+ // Fall back to YouTube search
+ searchYouTubeForTrailer(title);
+ });
+ } else {
+ searchYouTubeForTrailer(title);
+ }
+ }
+
+ function searchYouTubeForTrailer(title) {
+ const youtubeSearchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=${encodeURIComponent(title + ' official trailer')}&key=${youtubeApiKey}`;
fetch(youtubeSearchUrl)
.then(response => response.json())
.then(data => {
if (data.items && data.items.length > 0) {
const videoId = data.items[0].id.videoId;
- openTrailerModal(videoId);
+ openTrailerInPictureInPicture(videoId, title);
showProgress('Trailer loaded');
} else {
alert('Trailer not found.');
@@ -706,6 +940,80 @@
});
}
+ function openTrailerInPictureInPicture(videoId, title) {
+ // Remove any existing pip container
+ const existingPip = document.querySelector('.pip-container');
+ if (existingPip) {
+ existingPip.remove();
+ }
+
+ // Create the PiP container
+ const pipContainer = document.createElement('div');
+ pipContainer.className = 'pip-container';
+ pipContainer.innerHTML = `
+
+
+
+ `;
+
+ // Add to the DOM
+ document.body.appendChild(pipContainer);
+
+ // Add event listener to close button
+ const closeButton = pipContainer.querySelector('.pip-close');
+ closeButton.addEventListener('click', () => {
+ pipContainer.remove();
+ });
+
+ // Make the PiP container draggable
+ makeDraggable(pipContainer);
+ }
+
+ function makeDraggable(element) {
+ let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+ const header = element.querySelector('.pip-header');
+
+ if (header) {
+ header.onmousedown = dragMouseDown;
+ } else {
+ element.onmousedown = dragMouseDown;
+ }
+
+ function dragMouseDown(e) {
+ e = e || window.event;
+ e.preventDefault();
+ // Get the mouse cursor position at startup
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ document.onmouseup = closeDragElement;
+ // Call function when mouse moves
+ document.onmousemove = elementDrag;
+ }
+
+ function elementDrag(e) {
+ e = e || window.event;
+ e.preventDefault();
+ // Calculate the new cursor position
+ pos1 = pos3 - e.clientX;
+ pos2 = pos4 - e.clientY;
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ // Set the element's new position
+ element.style.top = (element.offsetTop - pos2) + "px";
+ element.style.left = (element.offsetLeft - pos1) + "px";
+ element.style.right = "auto"; // Clear right position when dragging
+ element.style.bottom = "auto"; // Clear bottom position when dragging
+ }
+
+ function closeDragElement() {
+ // Stop moving when mouse button is released
+ document.onmouseup = null;
+ document.onmousemove = null;
+ }
+ }
+
function openTrailerModal(videoId) {
const videoUrl = `https://www.youtube.com/embed/${videoId}`;
const modal = document.getElementById("videoModal");
@@ -727,6 +1035,133 @@
document.title = title;
}
+ // Detailed movie info modal
+ async function openMovieDetails(mediaType, id) {
+ try {
+ showProgress('Loading details...');
+
+ // Remove any existing details modal
+ const existingModal = document.getElementById('movieDetailsModal');
+ if (existingModal) {
+ existingModal.remove();
+ }
+
+ // Fetch complete movie details with append_to_response to minimize API calls
+ const url = `https://api.themoviedb.org/3/${mediaType}/${id}?api_key=${apiKey}&append_to_response=credits,videos,release_dates`;
+ const response = await fetch(url);
+ const movie = await response.json();
+
+ // Create the modal
+ const detailsModal = document.createElement('div');
+ detailsModal.className = 'details-modal';
+ detailsModal.id = 'movieDetailsModal';
+
+ // Find a trailer if available
+ const trailer = movie.videos?.results.find(video =>
+ (video.type === 'Trailer' || video.type === 'Teaser') &&
+ video.site === 'YouTube'
+ );
+
+ // Get certification (rating)
+ let certification = '';
+ if (mediaType === 'movie' && movie.release_dates?.results) {
+ const usReleases = movie.release_dates.results.find(country => country.iso_3166_1 === 'US');
+ if (usReleases && usReleases.release_dates.length > 0) {
+ certification = usReleases.release_dates.find(r => r.certification)?.certification || '';
+ }
+ }
+
+ // Prepare content
+ const title = movie.title || movie.name;
+ const backdropPath = movie.backdrop_path ?
+ `https://image.tmdb.org/t/p/w1280${movie.backdrop_path}` :
+ (movie.poster_path ? `https://image.tmdb.org/t/p/w780${movie.poster_path}` : '');
+
+ detailsModal.innerHTML = `
+ Trailer: ${title}
+
+
+
+ `;
+
+ // Add to the DOM
+ document.body.appendChild(detailsModal);
+
+ // Add event listener to close button
+ const closeBtn = detailsModal.querySelector('.details-close');
+ closeBtn.addEventListener('click', () => {
+ detailsModal.remove();
+ });
+
+ // Close on click outside content
+ detailsModal.addEventListener('click', (e) => {
+ if (e.target === detailsModal) {
+ detailsModal.remove();
+ }
+ });
+
+ showProgress('Details loaded');
+ } catch (error) {
+ console.error('Error loading movie details:', error);
+ showProgress('Error loading details');
+ }
+ }
+
// Improved openModal function with season/episode selector
async function openModal(mediaType, tmdbId, season = 1, episode = 1) {
try {
@@ -800,8 +1235,8 @@
videoUrl += `tv/${currentImdbId}/${currentSeason}/${currentEpisode}`;
}
} else {
- // vidsrc.xyz format - exactly as in the original code
- videoUrl = 'https://vidsrc.xyz/embed/';
+ // vidsrc.xyz format - exactly as in the original code
+ videoUrl = 'https://vidsrc.xyz/embed/';
if (currentMediaType === 'movie') {
videoUrl += `movie/${currentTmdbId}`;
} else if (currentMediaType === 'tv') {
@@ -990,12 +1425,21 @@
const rating = movie.vote_average ?
`` : '';
+ // Enhanced movie card with info button
movieCard.innerHTML = `
-
+
+
+
+
+
+
+
+ ${movie.genres.map(genre => `${genre.name}`).join('')}
+
+
+ ${movie.overview}
+ + + + ${movie.credits && movie.credits.cast && movie.credits.cast.length > 0 ? ` +
+
+ ` : ''}
+ Cast
+
+ ${movie.credits.cast.slice(0, 8).map(person => `
+
+
+ 
+
+ `).join('')}
+
+ ${person.name}
+ ${person.character}
+ 
${rating}
- 
-