849 lines
34 KiB
JavaScript
849 lines
34 KiB
JavaScript
window.addEventListener('DOMContentLoaded', () => {
|
||
let cancelAutoAdvance = false; // Global flag for auto-advance cancellation
|
||
let syncSocket = null; // WebSocket for video sync
|
||
let isSyncing = false; // Flag to prevent infinite loops during sync
|
||
|
||
const authPage = document.getElementById('auth-page');
|
||
const loginBtn = document.getElementById('login-btn');
|
||
const registerBtn = document.getElementById('register-btn');
|
||
const authError = document.getElementById('auth-error');
|
||
|
||
const moviesListEl = document.getElementById('movies-list');
|
||
const showsListEl = document.getElementById('shows-list');
|
||
const overlay = document.getElementById('overlay');
|
||
const movieDetailsEl = document.getElementById('movie-details');
|
||
const closeOverlayBtn = document.getElementById('close-overlay');
|
||
const moviesTabBtn = document.getElementById('movies-tab');
|
||
const showsTabBtn = document.getElementById('shows-tab');
|
||
const scanBtn = document.getElementById('scan-btn');
|
||
|
||
// Listen for token expiration events from preload.
|
||
window.addEventListener("tokenExpired", () => {
|
||
console.warn("Access token expired. Redirecting to login screen.");
|
||
authPage.style.display = 'flex';
|
||
});
|
||
|
||
// Modified authentication check: hide the login overlay if a token is loaded.
|
||
function checkAuth() {
|
||
if (window.api.getToken()) {
|
||
authPage.style.display = 'none';
|
||
} else {
|
||
authPage.style.display = 'flex';
|
||
}
|
||
}
|
||
|
||
loginBtn.addEventListener('click', () => {
|
||
const username = document.getElementById('username').value.trim();
|
||
const password = document.getElementById('password').value;
|
||
window.api.login(username, password).then(data => {
|
||
if(data.access_token) {
|
||
authPage.style.display = 'none';
|
||
loadMovies();
|
||
} else {
|
||
authError.textContent = data.error || 'Login failed';
|
||
}
|
||
}).catch(err => {
|
||
authError.textContent = 'Login error';
|
||
console.error(err);
|
||
});
|
||
});
|
||
|
||
registerBtn.addEventListener('click', () => {
|
||
const username = document.getElementById('username').value.trim();
|
||
const password = document.getElementById('password').value;
|
||
window.api.register(username, password).then(data => {
|
||
if(data.success) {
|
||
authError.textContent = 'Registration successful. Please log in.';
|
||
} else {
|
||
authError.textContent = data.error || 'Registration failed';
|
||
}
|
||
}).catch(err => {
|
||
authError.textContent = 'Registration error';
|
||
console.error(err);
|
||
});
|
||
});
|
||
|
||
// Helper to boost video volume using the Web Audio API
|
||
function boostVideoVolume(video) {
|
||
try {
|
||
const AudioContext = window.AudioContext || window.webkitAudioContext;
|
||
const audioContext = new AudioContext();
|
||
const source = audioContext.createMediaElementSource(video);
|
||
const gainNode = audioContext.createGain();
|
||
gainNode.gain.value = 5; // 200% volume boost
|
||
source.connect(gainNode);
|
||
gainNode.connect(audioContext.destination);
|
||
} catch (err) {
|
||
console.error('Error boosting video volume:', err);
|
||
}
|
||
}
|
||
|
||
// New: transcodeAudioStream uses ffmpeg.wasm to re-encode the audio
|
||
async function transcodeAudioStream(videoUrl) {
|
||
// Ensure ffmpeg is loaded only once
|
||
if (!window.ffmpegInstance) {
|
||
const { createFFmpeg, fetchFile } = FFmpeg;
|
||
window.ffmpegInstance = createFFmpeg({ log: true });
|
||
await window.ffmpegInstance.load();
|
||
}
|
||
const ffmpeg = window.ffmpegInstance;
|
||
|
||
try {
|
||
// Fetch the original video file as an ArrayBuffer
|
||
const response = await fetch(videoUrl);
|
||
const data = await response.arrayBuffer();
|
||
ffmpeg.FS('writeFile', 'input.mp4', new Uint8Array(data));
|
||
|
||
// Run ffmpeg command to copy the video stream and transcode the audio to AAC
|
||
await ffmpeg.run('-i', 'input.mp4', '-c:v', 'copy', '-c:a', 'aac', 'output.mp4');
|
||
const outputData = ffmpeg.FS('readFile', 'output.mp4');
|
||
// Clean up the virtual FS
|
||
ffmpeg.FS('unlink', 'input.mp4');
|
||
ffmpeg.FS('unlink', 'output.mp4');
|
||
|
||
const blob = new Blob([outputData.buffer], { type: 'video/mp4' });
|
||
const transcodedUrl = URL.createObjectURL(blob);
|
||
return transcodedUrl;
|
||
} catch (error) {
|
||
console.error("Transcoding error:", error);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// New: try direct play, detect “no audio” or error, then remux on demand
|
||
async function safePlayVideo(videoElement, videoUrl, subtitlesUrl = null) {
|
||
// 1) wire up subtitles (same as you had)
|
||
if (subtitlesUrl) {
|
||
let track = videoElement.querySelector('track');
|
||
if (!track) {
|
||
track = document.createElement('track');
|
||
track.kind = 'subtitles';
|
||
track.label = 'English';
|
||
track.srclang = 'en';
|
||
videoElement.appendChild(track);
|
||
}
|
||
track.src = subtitlesUrl;
|
||
track.default = true;
|
||
}
|
||
|
||
// 2) helper that tries to play + checks for audioTracks.length
|
||
const tryPlay = url => new Promise((resolve, reject) => {
|
||
videoElement.src = url;
|
||
videoElement.load();
|
||
const onErr = () => cleanup() || reject();
|
||
const onPlay = () => {
|
||
setTimeout(() => {
|
||
const hasAudio = videoElement.audioTracks
|
||
? videoElement.audioTracks.length > 0
|
||
: true; // assume “ok” if browser doesn’t support audioTracks
|
||
cleanup();
|
||
hasAudio ? resolve() : reject();
|
||
}, 200);
|
||
};
|
||
function cleanup() {
|
||
videoElement.removeEventListener('error', onErr);
|
||
videoElement.removeEventListener('play', onPlay);
|
||
return true;
|
||
}
|
||
videoElement.addEventListener('error', onErr);
|
||
videoElement.addEventListener('play', onPlay);
|
||
videoElement.play().catch(onErr);
|
||
});
|
||
|
||
try {
|
||
// first attempt: raw MKV
|
||
await tryPlay(videoUrl);
|
||
} catch (_) {
|
||
console.warn('Direct play failed or no audio → remuxing…');
|
||
|
||
// insert the indicator right above the video
|
||
const indicator = document.createElement('div');
|
||
indicator.classList.add('remuxing-indicator');
|
||
indicator.textContent = 'Remuxing...';
|
||
videoElement.parentNode.insertBefore(indicator, videoElement);
|
||
|
||
// do the heavy FFmpeg step
|
||
const mp4url = await transcodeAudioStream(videoUrl);
|
||
await tryPlay(mp4url);
|
||
|
||
// remove the banner
|
||
indicator.remove();
|
||
}
|
||
}
|
||
|
||
// Add error handling for video playback
|
||
function playVideo(videoElement, videoUrl, subtitlesUrl = null) {
|
||
try {
|
||
const mediaType = videoElement.dataset.mediaType;
|
||
const mediaId = videoElement.dataset.mediaId;
|
||
|
||
window.api.getProgress(mediaType, mediaId)
|
||
.then(data => {
|
||
// Determine progress; default to 0 if none found.
|
||
const progress = (data.last_position && data.last_position > 0) ? data.last_position : 0;
|
||
|
||
// Listen for metadata load to seek to the progress point.
|
||
videoElement.addEventListener('loadedmetadata', function setProgress() {
|
||
if (progress > 0) {
|
||
videoElement.currentTime = progress;
|
||
}
|
||
videoElement.removeEventListener('loadedmetadata', setProgress);
|
||
});
|
||
|
||
safePlayVideo(videoElement, videoUrl, subtitlesUrl)
|
||
.then(() => {
|
||
// Define helper functions to start and stop the progress timer.
|
||
function startProgressTimer() {
|
||
if (!videoElement.progressTimer) {
|
||
videoElement.progressTimer = setInterval(() => {
|
||
window.api.saveProgress(mediaType, mediaId, videoElement.currentTime)
|
||
.catch(err => console.error("Error saving progress:", err));
|
||
}, 60000); // 5 minutes in ms
|
||
}
|
||
}
|
||
function stopProgressTimer() {
|
||
if (videoElement.progressTimer) {
|
||
clearInterval(videoElement.progressTimer);
|
||
videoElement.progressTimer = null;
|
||
}
|
||
}
|
||
videoElement.addEventListener('play', startProgressTimer);
|
||
videoElement.addEventListener('pause', stopProgressTimer);
|
||
videoElement.addEventListener('ended', stopProgressTimer);
|
||
|
||
if (!videoElement.paused) {
|
||
startProgressTimer();
|
||
}
|
||
})
|
||
.catch(err => console.error('Playback failed even after remux:', err));
|
||
})
|
||
.catch(err => {
|
||
console.warn('Failed to fetch progress:', err);
|
||
// Continue with playback even if fetching progress failed.
|
||
safePlayVideo(videoElement, videoUrl, subtitlesUrl)
|
||
.then(() => {
|
||
function startProgressTimer() {
|
||
if (!videoElement.progressTimer) {
|
||
videoElement.progressTimer = setInterval(() => {
|
||
window.api.saveProgress(mediaType, mediaId, videoElement.currentTime)
|
||
.catch(err => console.error("Error saving progress:", err));
|
||
}, 300000);
|
||
}
|
||
}
|
||
function stopProgressTimer() {
|
||
if (videoElement.progressTimer) {
|
||
clearInterval(videoElement.progressTimer);
|
||
videoElement.progressTimer = null;
|
||
}
|
||
}
|
||
videoElement.addEventListener('play', startProgressTimer);
|
||
videoElement.addEventListener('pause', stopProgressTimer);
|
||
videoElement.addEventListener('ended', stopProgressTimer);
|
||
|
||
if (!videoElement.paused) {
|
||
startProgressTimer();
|
||
}
|
||
})
|
||
.catch(err => console.error('Playback failed even after remux:', err));
|
||
});
|
||
} catch (err) {
|
||
console.error('Unexpected playback error:', err);
|
||
alert('An unexpected error occurred. Please try again.');
|
||
}
|
||
}
|
||
|
||
// Helper to switch active tab and content
|
||
function setActiveTab(tab) {
|
||
if (tab === 'movies') {
|
||
moviesTabBtn.classList.add('active');
|
||
showsTabBtn.classList.remove('active');
|
||
moviesListEl.style.display = ''; // use CSS default (i.e. .section-list)
|
||
showsListEl.style.display = 'none';
|
||
} else {
|
||
moviesTabBtn.classList.remove('active');
|
||
showsTabBtn.classList.add('active');
|
||
moviesListEl.style.display = 'none';
|
||
showsListEl.style.display = ''; // use CSS default (i.e. .section-list)
|
||
}
|
||
}
|
||
|
||
moviesTabBtn.addEventListener('click', () => {
|
||
setActiveTab('movies');
|
||
});
|
||
showsTabBtn.addEventListener('click', () => {
|
||
setActiveTab('shows');
|
||
if (!showsListEl.hasChildNodes()) loadShows();
|
||
});
|
||
|
||
// Load and display movie list
|
||
function loadMovies() {
|
||
// New: Load and display in-progress movies
|
||
loadInProgressMovies();
|
||
|
||
window.api.getMovies().then(movies => {
|
||
// --- Newest Movies Section ---
|
||
const sectionNewest = document.createElement('section');
|
||
const headerNewest = document.createElement('h2');
|
||
headerNewest.textContent = 'Newest Movies';
|
||
sectionNewest.appendChild(headerNewest);
|
||
|
||
const gridNewest = document.createElement('div');
|
||
gridNewest.classList.add('content-row');
|
||
// sort by created_at descending (newest first)
|
||
const moviesByNewest = [...movies].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
|
||
moviesByNewest.forEach(movie => {
|
||
const item = document.createElement('div');
|
||
item.classList.add('movie-item');
|
||
item.innerHTML = `
|
||
<img src="${movie.poster !== 'N/A' ? movie.poster : ''}" alt="${movie.title}" />
|
||
<span>${movie.title}</span>
|
||
`;
|
||
item.addEventListener('click', () => {
|
||
window.api.getMovieDetails(movie.id).then(movieDetails => {
|
||
movieDetailsEl.innerHTML = `
|
||
<h2>${movieDetails.title}</h2>
|
||
<p>${movieDetails.plot}</p>
|
||
<p><strong>Year:</strong> ${movieDetails.year}</p>
|
||
<p><strong>Released:</strong> ${movieDetails.released}</p>
|
||
<video id="movie-video" controls autoplay
|
||
data-media-id="${movieDetails.id}"
|
||
data-media-type="movie"></video>
|
||
`;
|
||
overlay.style.display = 'flex';
|
||
const movieVideo = document.getElementById('movie-video');
|
||
boostVideoVolume(movieVideo);
|
||
const streamUrl = window.api.getStream(movieDetails.id);
|
||
const subtitlesUrl = window.api.getSubtitles(movieDetails.id);
|
||
playVideo(movieVideo, streamUrl, subtitlesUrl);
|
||
});
|
||
});
|
||
gridNewest.appendChild(item);
|
||
});
|
||
// wrap row + arrows
|
||
const scrollWrap = document.createElement('div');
|
||
scrollWrap.classList.add('scroll-container');
|
||
|
||
// left arrow
|
||
const leftBtn = document.createElement('button');
|
||
leftBtn.classList.add('scroll-arrow','left');
|
||
leftBtn.innerHTML = '◀';
|
||
leftBtn.addEventListener('click', ()=> {
|
||
gridNewest.scrollBy({ left: -300, behavior: 'smooth' });
|
||
});
|
||
|
||
// right arrow
|
||
const rightBtn = document.createElement('button');
|
||
rightBtn.classList.add('scroll-arrow','right');
|
||
rightBtn.innerHTML = '▶';
|
||
rightBtn.addEventListener('click', ()=> {
|
||
gridNewest.scrollBy({ left: 300, behavior: 'smooth' });
|
||
});
|
||
|
||
scrollWrap.append(leftBtn, gridNewest, rightBtn);
|
||
sectionNewest.appendChild(scrollWrap);
|
||
moviesListEl.appendChild(sectionNewest);
|
||
|
||
// --- Alphabetical Movies Section ---
|
||
const sectionAlpha = document.createElement('section');
|
||
const headerAlpha = document.createElement('h2');
|
||
headerAlpha.textContent = 'All Movies (A–Z)';
|
||
sectionAlpha.appendChild(headerAlpha);
|
||
|
||
const gridAlpha = document.createElement('div');
|
||
gridAlpha.classList.add('content-list');
|
||
// sort by title ascending
|
||
const moviesAlpha = [...movies].sort((a, b) => a.title.localeCompare(b.title));
|
||
moviesAlpha.forEach(movie => {
|
||
const item = document.createElement('div');
|
||
item.classList.add('movie-item');
|
||
item.innerHTML = `
|
||
<img src="${movie.poster !== 'N/A' ? movie.poster : ''}" alt="${movie.title}" />
|
||
<span>${movie.title}</span>
|
||
`;
|
||
item.addEventListener('click', () => {
|
||
window.api.getMovieDetails(movie.id).then(movieDetails => {
|
||
movieDetailsEl.innerHTML = `
|
||
<h2>${movieDetails.title}</h2>
|
||
<p>${movieDetails.plot}</p>
|
||
<p><strong>Year:</strong> ${movieDetails.year}</p>
|
||
<p><strong>Released:</strong> ${movieDetails.released}</p>
|
||
<video id="movie-video" controls autoplay
|
||
data-media-id="${movieDetails.id}"
|
||
data-media-type="movie"></video>
|
||
`;
|
||
overlay.style.display = 'flex';
|
||
const movieVideo = document.getElementById('movie-video');
|
||
boostVideoVolume(movieVideo);
|
||
const streamUrl = window.api.getStream(movieDetails.id);
|
||
const subtitlesUrl = window.api.getSubtitles(movieDetails.id);
|
||
playVideo(movieVideo, streamUrl, subtitlesUrl);
|
||
});
|
||
});
|
||
gridAlpha.appendChild(item);
|
||
});
|
||
sectionAlpha.appendChild(gridAlpha);
|
||
moviesListEl.appendChild(sectionAlpha);
|
||
});
|
||
}
|
||
|
||
// New: Function to load currently in-progress movies
|
||
function loadInProgressMovies() {
|
||
window.api.getInProgress().then(data => {
|
||
const movieProgress = data.movies || [];
|
||
if (movieProgress.length > 0) {
|
||
const sectionInProgress = document.createElement('section');
|
||
const headerInProgress = document.createElement('h2');
|
||
headerInProgress.textContent = 'Continue Watching';
|
||
sectionInProgress.appendChild(headerInProgress);
|
||
|
||
const gridInProgress = document.createElement('div');
|
||
gridInProgress.classList.add('content-row');
|
||
|
||
movieProgress.forEach(item => {
|
||
// item.media_id holds the movie id.
|
||
window.api.getMovieDetails(item.media_id).then(movieDetails => {
|
||
const movieItem = document.createElement('div');
|
||
movieItem.classList.add('movie-item');
|
||
movieItem.innerHTML = `
|
||
<img src="${movieDetails.poster !== 'N/A' ? movieDetails.poster : ''}" alt="${movieDetails.title}" />
|
||
<span>${movieDetails.title}</span>
|
||
`;
|
||
movieItem.addEventListener('click', () => {
|
||
movieDetailsEl.innerHTML = `
|
||
<h2>${movieDetails.title}</h2>
|
||
<p>${movieDetails.plot}</p>
|
||
<p><strong>Year:</strong> ${movieDetails.year}</p>
|
||
<p><strong>Released:</strong> ${movieDetails.released}</p>
|
||
<video id="movie-video" controls autoplay
|
||
data-media-id="${movieDetails.id}"
|
||
data-media-type="movie"></video>
|
||
`;
|
||
overlay.style.display = 'flex';
|
||
const movieVideo = document.getElementById('movie-video');
|
||
boostVideoVolume(movieVideo);
|
||
const streamUrl = window.api.getStream(movieDetails.id);
|
||
const subtitlesUrl = window.api.getSubtitles(movieDetails.id);
|
||
playVideo(movieVideo, streamUrl, subtitlesUrl);
|
||
});
|
||
gridInProgress.appendChild(movieItem);
|
||
}).catch(err => console.error("Failed to load movie details for progress item:", err));
|
||
});
|
||
|
||
sectionInProgress.appendChild(gridInProgress);
|
||
moviesListEl.insertBefore(sectionInProgress, moviesListEl.firstChild);
|
||
}
|
||
}).catch(err => console.error('Error loading in progress movies:', err));
|
||
}
|
||
|
||
// Load and display TV shows list
|
||
async function loadShows() {
|
||
// New: Load and display in-progress episodes for TV shows
|
||
loadInProgressShows();
|
||
|
||
const shows = await window.api.getShows();
|
||
showsListEl.innerHTML = '';
|
||
|
||
// --- Newest TV Shows Section (by latest episode added) ---
|
||
const sectionNewest = document.createElement('section');
|
||
const headerNewest = document.createElement('h2');
|
||
headerNewest.textContent = 'Newest TV Shows (by latest episode)';
|
||
sectionNewest.appendChild(headerNewest);
|
||
|
||
const gridNewest = document.createElement('div');
|
||
gridNewest.classList.add('content-row');
|
||
|
||
// Fetch seasons & episodes for each show to find the most recent episode date
|
||
const showsWithLatestEp = await Promise.all(shows.map(async show => {
|
||
let seasons = await window.api.getShowSeasons(show.id);
|
||
if (!Array.isArray(seasons)) seasons = Object.values(seasons);
|
||
const episodeLists = await Promise.all(
|
||
seasons.map(season => window.api.getSeasonEpisodes(show.id, season))
|
||
);
|
||
const allEpisodes = episodeLists.flat();
|
||
const latestDate = allEpisodes.reduce((max, ep) => {
|
||
const dt = new Date(ep.created_at);
|
||
return dt > max ? dt : max;
|
||
}, new Date(0));
|
||
return { show, latestDate };
|
||
}));
|
||
|
||
// Sort shows by their latest episode date (newest first)
|
||
const showsByNewest = showsWithLatestEp
|
||
.sort((a, b) => b.latestDate - a.latestDate)
|
||
.map(item => item.show);
|
||
|
||
showsByNewest.forEach(show => {
|
||
const item = document.createElement('div');
|
||
item.classList.add('movie-item');
|
||
item.innerHTML = `
|
||
<img src="${show.poster || ''}" alt="${show.name}" />
|
||
<span>${show.name}</span>
|
||
`;
|
||
item.addEventListener('click', () => {
|
||
window.api.getShowDetails(show.id).then(showDetails => {
|
||
const showHTML = `
|
||
<h2>${showDetails.name}</h2>
|
||
<img src="${showDetails.poster}" alt="${showDetails.name}" style="max-width:200px;"/>
|
||
<p><strong>Rating:</strong> ${showDetails.rating}</p>
|
||
<p><strong>Genres:</strong> ${showDetails.genres}</p>
|
||
<p>${showDetails.summary}</p>
|
||
<h3>Seasons:</h3>
|
||
`;
|
||
window.api.getShowSeasons(show.id).then(seasons => {
|
||
if (!Array.isArray(seasons)) seasons = Object.values(seasons);
|
||
const seasonsHTML = seasons
|
||
.map(s => `<button class="season-btn" data-show-id="${show.id}" data-season="${s}">Season ${s}</button>`)
|
||
.join('');
|
||
movieDetailsEl.innerHTML = showHTML + seasonsHTML;
|
||
overlay.style.display = 'flex';
|
||
overlay.querySelectorAll('.season-btn').forEach(btn =>
|
||
btn.addEventListener('click', seasonBtnHandler)
|
||
);
|
||
});
|
||
});
|
||
});
|
||
gridNewest.appendChild(item);
|
||
});
|
||
sectionNewest.appendChild(gridNewest);
|
||
showsListEl.appendChild(sectionNewest);
|
||
|
||
// --- Alphabetical TV Shows Section ---
|
||
const sectionAlpha = document.createElement('section');
|
||
const headerAlpha = document.createElement('h2');
|
||
headerAlpha.textContent = 'All TV Shows (A–Z)';
|
||
sectionAlpha.appendChild(headerAlpha);
|
||
|
||
const gridAlpha = document.createElement('div');
|
||
gridAlpha.classList.add('content-list');
|
||
const showsAlpha = [...shows].sort((a, b) => a.name.localeCompare(b.name));
|
||
showsAlpha.forEach(show => {
|
||
const item = document.createElement('div');
|
||
item.classList.add('movie-item');
|
||
item.innerHTML = `
|
||
<img src="${show.poster || ''}" alt="${show.name}" />
|
||
<span>${show.name}</span>
|
||
`;
|
||
item.addEventListener('click', () => {
|
||
window.api.getShowDetails(show.id).then(showDetails => {
|
||
const showHTML = `
|
||
<h2>${showDetails.name}</h2>
|
||
<img src="${showDetails.poster}" alt="${showDetails.name}" style="max-width:200px;"/>
|
||
<p><strong>Rating:</strong> ${showDetails.rating}</p>
|
||
<p><strong>Genres:</strong> ${showDetails.genres}</p>
|
||
<p>${showDetails.summary}</p>
|
||
<h3>Seasons:</h3>
|
||
`;
|
||
window.api.getShowSeasons(show.id).then(seasons => {
|
||
if (!Array.isArray(seasons)) seasons = Object.values(seasons);
|
||
const seasonsHTML = seasons
|
||
.map(s => `<button class="season-btn" data-show-id="${show.id}" data-season="${s}">Season ${s}</button>`)
|
||
.join('');
|
||
movieDetailsEl.innerHTML = showHTML + seasonsHTML;
|
||
overlay.style.display = 'flex';
|
||
overlay.querySelectorAll('.season-btn').forEach(btn =>
|
||
btn.addEventListener('click', seasonBtnHandler)
|
||
);
|
||
});
|
||
});
|
||
});
|
||
gridAlpha.appendChild(item);
|
||
});
|
||
sectionAlpha.appendChild(gridAlpha);
|
||
showsListEl.appendChild(sectionAlpha);
|
||
}
|
||
|
||
// Updated function to stream the episode without calling getEpisodeDetails
|
||
function loadInProgressShows() {
|
||
window.api.getInProgress().then(data => {
|
||
const episodesProgress = data.episodes || [];
|
||
if (episodesProgress.length > 0) {
|
||
const sectionInProgress = document.createElement('section');
|
||
const headerInProgress = document.createElement('h2');
|
||
headerInProgress.textContent = 'Continue Watching';
|
||
sectionInProgress.appendChild(headerInProgress);
|
||
|
||
const gridInProgress = document.createElement('div');
|
||
gridInProgress.classList.add('content-row');
|
||
|
||
episodesProgress.forEach(item => {
|
||
window.api.getShowByEpisode(item.media_id)
|
||
.then(showDetails => {
|
||
const episodeItem = document.createElement('div');
|
||
episodeItem.classList.add('movie-item');
|
||
episodeItem.innerHTML = `
|
||
<img src="${showDetails.poster || ''}" alt="${showDetails.name}" />
|
||
<span>${showDetails.name}</span>
|
||
`;
|
||
episodeItem.addEventListener('click', () => {
|
||
movieDetailsEl.innerHTML = `
|
||
<h2>Episode ${item.media_id}</h2>
|
||
<video id="episode-video" controls autoplay
|
||
data-media-id="${item.media_id}"
|
||
data-media-type="episode"></video>
|
||
`;
|
||
overlay.style.display = 'flex';
|
||
const videoElement = document.getElementById('episode-video');
|
||
const episodeStreamUrl = window.api.getEpisodeStream(item.media_id);
|
||
playVideo(videoElement, episodeStreamUrl);
|
||
});
|
||
gridInProgress.appendChild(episodeItem);
|
||
})
|
||
.catch(err => {
|
||
console.error("Failed to fetch show by episode details:", err);
|
||
});
|
||
});
|
||
|
||
sectionInProgress.appendChild(gridInProgress);
|
||
showsListEl.insertBefore(sectionInProgress, showsListEl.firstChild);
|
||
}
|
||
}).catch(err => console.error('Error loading in progress shows:', err));
|
||
}
|
||
|
||
scanBtn.addEventListener('click', () => {
|
||
scanBtn.disabled = true; // Disable the button to prevent multiple clicks
|
||
scanBtn.textContent = 'Scanning...';
|
||
|
||
window.api.scanForNewFiles().then(response => {
|
||
if (response.success) {
|
||
alert('Scan completed successfully!');
|
||
loadMovies();
|
||
loadShows();
|
||
} else {
|
||
alert('Scan failed: ' + (response.error || 'Unknown error'));
|
||
}
|
||
}).catch(err => {
|
||
console.error('Error during scan:', err);
|
||
alert('An error occurred while scanning for new files.');
|
||
}).finally(() => {
|
||
scanBtn.disabled = false;
|
||
scanBtn.textContent = 'Scan for New Files';
|
||
});
|
||
});
|
||
|
||
// Initial auth check; hide login overlay if token exists and load movies.
|
||
checkAuth();
|
||
if (window.api.getToken()) {
|
||
loadMovies();
|
||
}
|
||
|
||
closeOverlayBtn.addEventListener('click', () => {
|
||
cancelAutoAdvance = true;
|
||
const video = overlay.querySelector('video');
|
||
if (video) {
|
||
video.pause();
|
||
video.currentTime = 0;
|
||
// Stop the progress timer if it's running
|
||
if (video.progressTimer) {
|
||
clearInterval(video.progressTimer);
|
||
video.progressTimer = null;
|
||
}
|
||
video.removeAttribute('src');
|
||
video.load();
|
||
}
|
||
overlay.style.display = 'none';
|
||
});
|
||
|
||
// Add handler for season buttons
|
||
function seasonBtnHandler(event) {
|
||
const btn = event.currentTarget;
|
||
const showId = btn.dataset.showId;
|
||
const season = btn.dataset.season;
|
||
|
||
// Clear previous details and show season header
|
||
movieDetailsEl.innerHTML = `<h2>Season ${season} Episodes</h2>`;
|
||
|
||
window.api.getSeasonEpisodes(showId, season)
|
||
.then(episodes => {
|
||
if (episodes && episodes.length) {
|
||
const episodesContainer = document.createElement('div');
|
||
episodesContainer.classList.add('episodes-list');
|
||
episodes.forEach(ep => {
|
||
const epBtn = document.createElement('button');
|
||
epBtn.classList.add('episode-btn');
|
||
epBtn.textContent = ep.title || `Episode ${ep.id}`;
|
||
epBtn.dataset.episodeId = ep.id;
|
||
epBtn.addEventListener('click', () => {
|
||
// Display selected episode video in the overlay
|
||
movieDetailsEl.innerHTML = `
|
||
<h2>${ep.title}</h2>
|
||
<video id="episode-video" controls autoplay
|
||
data-media-id="${ep.id}"
|
||
data-media-type="episode"></video>
|
||
`;
|
||
const videoElement = document.getElementById('episode-video');
|
||
const episodeStreamUrl = window.api.getEpisodeStream(ep.id);
|
||
playVideo(videoElement, episodeStreamUrl);
|
||
});
|
||
episodesContainer.appendChild(epBtn);
|
||
});
|
||
movieDetailsEl.appendChild(episodesContainer);
|
||
} else {
|
||
movieDetailsEl.innerHTML += '<p>No episodes found for this season.</p>';
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error('Error fetching episodes:', err);
|
||
movieDetailsEl.innerHTML += '<p>Error loading episodes.</p>';
|
||
});
|
||
}
|
||
|
||
function connectToSyncSession(sessionId, mediaId, mediaType, videoElement = null) {
|
||
if (syncSocket) {
|
||
syncSocket.close();
|
||
}
|
||
|
||
// Include media_id and media_type as query parameters in the WebSocket URL
|
||
syncSocket = new WebSocket(`ws://bbrunson.com:8495/ws/sync/${sessionId}?media_id=${mediaId}&media_type=${mediaType}`);
|
||
|
||
syncSocket.onopen = () => {
|
||
console.log("Connected to sync session:", sessionId);
|
||
};
|
||
|
||
syncSocket.onmessage = async (event) => {
|
||
if (isSyncing) return; // Prevent loops caused by local updates
|
||
const message = JSON.parse(event.data);
|
||
|
||
// Ensure the media_id and media_type match the current video
|
||
if (message.media_id !== mediaId || message.media_type !== mediaType) {
|
||
console.warn("Received sync message for a different media_id or media_type. Ignoring.");
|
||
return;
|
||
}
|
||
|
||
const data = JSON.parse(message.data);
|
||
|
||
// If no video element is provided, fetch video details and start playback
|
||
if (!videoElement) {
|
||
try {
|
||
let videoDetails;
|
||
if (mediaType === "movie") {
|
||
videoDetails = await window.api.getMovieDetails(mediaId); // Fetch movie details
|
||
} else if (mediaType === "episode") {
|
||
videoDetails = await window.api.getEpisodeDetails(mediaId); // Fetch episode details
|
||
} else {
|
||
throw new Error("Unknown media type");
|
||
}
|
||
|
||
movieDetailsEl.innerHTML = `
|
||
<h2>${videoDetails.title}</h2>
|
||
<p>${videoDetails.plot}</p>
|
||
<p><strong>Year:</strong> ${videoDetails.year}</p>
|
||
<p><strong>Released:</strong> ${videoDetails.released}</p>
|
||
<video id="movie-video" controls autoplay data-media-id="${videoDetails.id}" data-media-type="${mediaType}"></video>
|
||
`;
|
||
overlay.style.display = 'flex';
|
||
videoElement = document.getElementById('movie-video');
|
||
boostVideoVolume(videoElement);
|
||
|
||
const streamUrl = mediaType === "movie"
|
||
? window.api.getStream(videoDetails.id)
|
||
: window.api.getEpisodeStream(videoDetails.id);
|
||
playVideo(videoElement, streamUrl);
|
||
} catch (error) {
|
||
console.error("Error fetching video details:", error);
|
||
alert("Failed to load video for the sync session.");
|
||
return;
|
||
}
|
||
}
|
||
|
||
const currentTime = videoElement.currentTime;
|
||
const timeDifference = Math.abs(currentTime - data.currentTime);
|
||
|
||
if (data.type === "play") {
|
||
if (timeDifference > 5) {
|
||
videoElement.currentTime = data.currentTime;
|
||
}
|
||
videoElement.play();
|
||
} else if (data.type === "pause") {
|
||
if (timeDifference > 5) {
|
||
videoElement.currentTime = data.currentTime;
|
||
}
|
||
videoElement.pause();
|
||
} else if (data.type === "seek") {
|
||
if (timeDifference > 5) {
|
||
videoElement.currentTime = data.currentTime;
|
||
}
|
||
}
|
||
};
|
||
|
||
syncSocket.onclose = () => {
|
||
console.log("Disconnected from sync session:", sessionId);
|
||
};
|
||
|
||
syncSocket.onerror = (error) => {
|
||
console.error("WebSocket error:", error);
|
||
};
|
||
|
||
// Sync video events with the server
|
||
if (videoElement) {
|
||
videoElement.addEventListener("play", () => {
|
||
if (syncSocket.readyState === WebSocket.OPEN) {
|
||
isSyncing = true;
|
||
syncSocket.send(JSON.stringify({ type: "play", currentTime: videoElement.currentTime }));
|
||
isSyncing = false;
|
||
}
|
||
});
|
||
|
||
videoElement.addEventListener("pause", () => {
|
||
if (syncSocket.readyState === WebSocket.OPEN) {
|
||
isSyncing = true;
|
||
syncSocket.send(JSON.stringify({ type: "pause", currentTime: videoElement.currentTime }));
|
||
isSyncing = false;
|
||
}
|
||
});
|
||
|
||
videoElement.addEventListener("seeked", () => {
|
||
if (syncSocket.readyState === WebSocket.OPEN) {
|
||
isSyncing = true;
|
||
syncSocket.send(JSON.stringify({ type: "seek", currentTime: videoElement.currentTime }));
|
||
isSyncing = false;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
document.getElementById("join-sync-btn").addEventListener("click", async () => {
|
||
const sessionId = document.getElementById("sync-session-id").value.trim();
|
||
if (!sessionId) {
|
||
alert("Please enter a valid session ID.");
|
||
return;
|
||
}
|
||
|
||
// Fetch session details from the server
|
||
let mediaId, mediaType;
|
||
try {
|
||
const sessionDetails = await window.api.getSessionDetails(sessionId);
|
||
mediaId = sessionDetails.media_id;
|
||
mediaType = sessionDetails.media_type;
|
||
} catch (error) {
|
||
console.error("Error fetching session details:", error);
|
||
alert("Failed to retrieve session details. Please try again.");
|
||
return;
|
||
}
|
||
|
||
if (!mediaId || !mediaType) {
|
||
alert("Media ID or type is missing. Unable to join the sync session.");
|
||
return;
|
||
}
|
||
|
||
const videoElement = document.querySelector("video");
|
||
connectToSyncSession(sessionId, mediaId, mediaType, videoElement);
|
||
});
|
||
|
||
document.getElementById("overlay-join-sync-btn").addEventListener("click", () => {
|
||
const sessionId = document.getElementById("overlay-sync-session-id").value.trim();
|
||
if (!sessionId) {
|
||
alert("Please enter a valid session ID.");
|
||
return;
|
||
}
|
||
|
||
// Automatically retrieve the mediaId from the currently playing video in the overlay
|
||
const videoElement = document.querySelector("#overlay video");
|
||
if (!videoElement || !videoElement.dataset.mediaId) {
|
||
alert("No video is currently playing or media ID is missing.");
|
||
return;
|
||
}
|
||
|
||
const mediaId = videoElement.dataset.mediaId; // Retrieve mediaId from the video element
|
||
connectToSyncSession(sessionId, mediaId, "movie", videoElement);
|
||
});
|
||
}); |