continue watching section, recently added section, new endpoints in collab with server, scan for new files, and more
This commit is contained in:
Brandon4466
1
accessToken.json
Normal file
1
accessToken.json
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJuZXh0IiwiZXhwIjoxNzc4NjYzNzg1fQ.Q85axmzZ8CBxtLopbJIF-WhVfBziwmkXnkiNTSObAF8"}
|
||||||
232
index.html
232
index.html
@@ -2,23 +2,231 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Movie Streamer</title>
|
<title>NotPlexApp</title>
|
||||||
|
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script>
|
||||||
<style>
|
<style>
|
||||||
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
|
html, body {
|
||||||
#container { display: flex; }
|
margin: 0;
|
||||||
#movies-list { width: 30%; overflow-y: auto; }
|
padding: 0;
|
||||||
.movie-item { cursor: pointer; margin-bottom: 10px; display: flex; align-items: center; }
|
height: 100%;
|
||||||
.movie-item img { width: 50px; height: auto; margin-right: 10px; }
|
font-family: Arial, sans-serif;
|
||||||
#movie-details { flex-grow: 1; padding-left: 20px; }
|
}
|
||||||
video { max-width: 100%; margin-top: 10px; }
|
/* Tabs style */
|
||||||
|
#tabs {
|
||||||
|
display: flex;
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
#tabs button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
color: #fff;
|
||||||
|
background: #444;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
#tabs button.active {
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
/* Content lists (item grids inside each section) */
|
||||||
|
.content-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
overflow-x: visible; /* ensure no horizontal scrolling */
|
||||||
|
/* Optional: force items to wrap into multiple rows */
|
||||||
|
grid-auto-rows: auto;
|
||||||
|
}
|
||||||
|
/* Section‐container: stack each <section> as a row */
|
||||||
|
.section-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 40px; /* space between sections */
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: calc(100% - 48px); /* adjust for tab height */
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
.movie-item {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
.movie-item img {
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
/* Overlay for details/stream */
|
||||||
|
#overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.8);
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
#overlay-content {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 800px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 90%;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#close-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
background: red;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
padding: 5px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
/* Authentication Page Styles */
|
||||||
|
#auth-page {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 200;
|
||||||
|
background: rgba(0,0,0,0.8);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#auth-content {
|
||||||
|
background: #fff;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
#auth-content input {
|
||||||
|
width: 90%;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
#auth-content button {
|
||||||
|
width: 45%;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* show a “Remuxing…” banner above the video */
|
||||||
|
.remuxing-indicator {
|
||||||
|
color: #ff0;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
/* new: horizontal scrolling row */
|
||||||
|
.content-row {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
gap: 20px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.content-row::-webkit-scrollbar {
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.content-row::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
/* hide native scrollbar */
|
||||||
|
.content-row {
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
-ms-overflow-style: none; /* IE 10+ */
|
||||||
|
}
|
||||||
|
.content-row::-webkit-scrollbar { /* WebKit */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* wrap arrows + row */
|
||||||
|
.scroll-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.scroll-arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
width: 30px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.scroll-arrow.left { left: 0; }
|
||||||
|
.scroll-arrow.right { right: 0; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Movie Streamer</h1>
|
<div id="auth-page">
|
||||||
<div id="container">
|
<div id="auth-content">
|
||||||
<div id="movies-list"></div>
|
<h2>Login / Register</h2>
|
||||||
<div id="movie-details"></div>
|
<input type="text" id="username" placeholder="Username" />
|
||||||
|
<input type="password" id="password" placeholder="Password" />
|
||||||
|
<div>
|
||||||
|
<button id="login-btn">Login</button>
|
||||||
|
<button id="register-btn">Register</button>
|
||||||
</div>
|
</div>
|
||||||
|
<p id="auth-error" style="color:red;"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="tabs">
|
||||||
|
<button id="movies-tab" class="active">Movies</button>
|
||||||
|
<button id="shows-tab">TV Shows</button>
|
||||||
|
<button id="scan-btn">Scan for New Files</button> <!-- New button -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="sync-controls" style="text-align: center; margin: 10px;">
|
||||||
|
<input type="text" id="sync-session-id" placeholder="Enter Sync Session ID" />
|
||||||
|
<button id="join-sync-btn">Join Sync Session</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- use section-list instead of content-list on the containers -->
|
||||||
|
<div id="movies-list" class="section-list"></div>
|
||||||
|
<div id="shows-list" class="section-list" style="display:none;"></div>
|
||||||
|
|
||||||
|
<div id="overlay">
|
||||||
|
<div id="overlay-content">
|
||||||
|
<button id="close-overlay">Close</button>
|
||||||
|
<div id="movie-details"></div>
|
||||||
|
<!-- Add Sync Controls inside the overlay -->
|
||||||
|
<div id="overlay-sync-controls" style="text-align: center; margin-top: 10px;">
|
||||||
|
<input type="text" id="overlay-sync-session-id" placeholder="Enter Sync Session ID" />
|
||||||
|
<button id="overlay-join-sync-btn">Join Sync Session</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="renderer.js"></script>
|
<script src="renderer.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
24
main.js
24
main.js
@@ -1,14 +1,31 @@
|
|||||||
const { app, BrowserWindow } = require('electron');
|
const { app, BrowserWindow } = require('electron');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
|
// Catch unhandled exceptions to prevent crashes
|
||||||
|
process.on('uncaughtException', (error) => {
|
||||||
|
console.error('Unhandled exception:', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
process.on('unhandledRejection', (reason, promise) => {
|
||||||
|
console.error('Unhandled rejection at:', promise, 'reason:', reason);
|
||||||
|
});
|
||||||
|
|
||||||
function createWindow() {
|
function createWindow() {
|
||||||
const win = new BrowserWindow({
|
const win = new BrowserWindow({
|
||||||
width: 1000,
|
width: 1000,
|
||||||
height: 700,
|
height: 700,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
preload: path.join(__dirname, 'preload.js')
|
preload: path.join(__dirname, 'preload.js'),
|
||||||
|
contextIsolation: true,
|
||||||
|
nodeIntegration: false,
|
||||||
|
sandbox: false // disable sandbox to enable Node built-ins in preload
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
win.webContents.on('preload-error', (event, preloadPath, error) => {
|
||||||
|
console.error(`Failed to load preload script from ${preloadPath}:`, error);
|
||||||
|
});
|
||||||
|
|
||||||
win.loadFile('index.html');
|
win.loadFile('index.html');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -19,3 +36,8 @@ app.on('window-all-closed', () => {
|
|||||||
app.on('activate', () => {
|
app.on('activate', () => {
|
||||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
app.on('renderer-process-crashed', (event, webContents, killed) => {
|
||||||
|
console.error('Renderer process crashed. Restarting...');
|
||||||
|
createWindow(); // Restart the renderer process
|
||||||
|
});
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
"description": "Stream media from the NotPlexServer",
|
"description": "Stream media from the NotPlexServer",
|
||||||
"main": "main.js",
|
"main": "main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "electron ."
|
"start": "electron . --enable-logging"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
126
preload.js
126
preload.js
@@ -1,7 +1,121 @@
|
|||||||
const { contextBridge } = require('electron');
|
console.log("Preload script starting...");
|
||||||
|
try {
|
||||||
|
const { contextBridge } = require('electron');
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
console.log("Node modules loaded successfully.");
|
||||||
|
|
||||||
contextBridge.exposeInMainWorld('api', {
|
// Location to store the token (adjust the location as needed)
|
||||||
getMovies: () => fetch('http://localhost:8000/movies').then(r => r.json()),
|
const tokenFile = path.join(__dirname, 'accessToken.json');
|
||||||
getMovieDetails: (id) => fetch(`http://localhost:8000/movies/${id}`).then(r => r.json()),
|
console.log("Token file path:", tokenFile);
|
||||||
getStreamUrl: (id) => `http://localhost:8000/stream/${id}`
|
|
||||||
});
|
function loadToken() {
|
||||||
|
try {
|
||||||
|
const data = fs.readFileSync(tokenFile, 'utf8');
|
||||||
|
const parsed = JSON.parse(data);
|
||||||
|
console.log("Token loaded:", parsed.token);
|
||||||
|
return parsed.token;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn("loadToken error:", error.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveToken(token) {
|
||||||
|
try {
|
||||||
|
fs.writeFileSync(tokenFile, JSON.stringify({ token }), 'utf8');
|
||||||
|
console.log("Token saved:", token);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("saveToken error:", error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let accessToken = loadToken();
|
||||||
|
|
||||||
|
// Updated fetchWithAuth: if JSON returns "Invalid or expired token" then
|
||||||
|
// dispatch a custom event that the renderer will catch.
|
||||||
|
function fetchWithAuth(url, options = {}) {
|
||||||
|
options.headers = options.headers || {};
|
||||||
|
if (accessToken) {
|
||||||
|
options.headers['Authorization'] = `Bearer ${accessToken}`;
|
||||||
|
}
|
||||||
|
return fetch(url, options)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.detail && data.detail === "Invalid or expired token") {
|
||||||
|
console.error("API reports expired token.");
|
||||||
|
accessToken = null;
|
||||||
|
// Dispatch custom event on the window so that the renderer can show the login overlay.
|
||||||
|
window.dispatchEvent(new CustomEvent("tokenExpired", { detail: data.detail }));
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Now update getStreamUrl and getEpisodeStreamUrl to use fetchWithAuth.
|
||||||
|
contextBridge.exposeInMainWorld('api', {
|
||||||
|
// Movies API calls
|
||||||
|
getMovies: () => fetchWithAuth('http://bbrunson.com:8495/movies'),
|
||||||
|
getMovieDetails: (id) => fetchWithAuth(`http://bbrunson.com:8495/movies/${id}`),
|
||||||
|
getStream: (id) => `http://bbrunson.com:8495/stream/${id}`,
|
||||||
|
// TV Shows API calls
|
||||||
|
getShows: () => fetchWithAuth('http://bbrunson.com:8495/shows'),
|
||||||
|
getShowDetails: (showId) => fetchWithAuth(`http://bbrunson.com:8495/shows/${showId}`),
|
||||||
|
getShowSeasons: (showId) => fetchWithAuth(`http://bbrunson.com:8495/shows/${showId}/seasons`),
|
||||||
|
getSeasonEpisodes: (showId, season) =>
|
||||||
|
fetchWithAuth(`http://bbrunson.com:8495/shows/${showId}/seasons/${season}/episodes`),
|
||||||
|
getEpisodeStream: (episodeId) => `http://bbrunson.com:8495/stream_episode/${episodeId}`,
|
||||||
|
getSubtitles: (id) => `http://bbrunson.com:8495/subtitles/${id}`,
|
||||||
|
|
||||||
|
// New: In Progress API call
|
||||||
|
getInProgress: () => fetchWithAuth('http://bbrunson.com:8495/in_progress'),
|
||||||
|
|
||||||
|
// New: Get Episode Details API call
|
||||||
|
getEpisodeDetails: (id) => fetchWithAuth(`http://bbrunson.com:8495/episodes/${id}`),
|
||||||
|
|
||||||
|
// New: Use the /episodes/{episode_id}/show endpoint to fetch TV show details for an episode
|
||||||
|
getShowByEpisode: (episodeId) => fetchWithAuth(`http://bbrunson.com:8495/episodes/${episodeId}/show`),
|
||||||
|
|
||||||
|
// Authentication functions
|
||||||
|
login: (username, password) => {
|
||||||
|
return fetch('http://bbrunson.com:8495/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ username, password })
|
||||||
|
})
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.access_token) {
|
||||||
|
accessToken = data.access_token;
|
||||||
|
saveToken(accessToken);
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
register: (username, password) => {
|
||||||
|
return fetch('http://bbrunson.com:8495/register', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ username, password })
|
||||||
|
})
|
||||||
|
.then(r => r.json());
|
||||||
|
},
|
||||||
|
getToken: () => accessToken,
|
||||||
|
scanForNewFiles: () => fetchWithAuth('http://bbrunson.com:8495/scan', { method: 'POST' }),
|
||||||
|
getSessionDetails: (sessionId) => fetchWithAuth(`http://bbrunson.com:8495/sessions/${sessionId}`),
|
||||||
|
|
||||||
|
// new progress APIs
|
||||||
|
saveProgress: (mediaType, mediaId, lastPosition) =>
|
||||||
|
fetchWithAuth(`http://bbrunson.com:8495/save_progress/${mediaType}/${mediaId}`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ last_position: lastPosition })
|
||||||
|
}),
|
||||||
|
getProgress: (mediaType, mediaId) =>
|
||||||
|
fetchWithAuth(`http://bbrunson.com:8495/get_progress/${mediaType}/${mediaId}`)
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("Preload script finished register API.");
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in preload.js:', error);
|
||||||
|
}
|
||||||
845
renderer.js
845
renderer.js
@@ -1,30 +1,849 @@
|
|||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
const listEl = document.getElementById('movies-list');
|
let cancelAutoAdvance = false; // Global flag for auto-advance cancellation
|
||||||
const detailsEl = document.getElementById('movie-details');
|
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
|
// Load and display movie list
|
||||||
|
function loadMovies() {
|
||||||
|
// New: Load and display in-progress movies
|
||||||
|
loadInProgressMovies();
|
||||||
|
|
||||||
window.api.getMovies().then(movies => {
|
window.api.getMovies().then(movies => {
|
||||||
movies.forEach(movie => {
|
// --- 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');
|
const item = document.createElement('div');
|
||||||
item.classList.add('movie-item');
|
item.classList.add('movie-item');
|
||||||
item.innerHTML = `
|
item.innerHTML = `
|
||||||
<img src="${movie.poster !== 'N/A' ? movie.poster : ''}" alt="${movie.title}" />
|
<img src="${movie.poster !== 'N/A' ? movie.poster : ''}" alt="${movie.title}" />
|
||||||
<span>${movie.title}</span>
|
<span>${movie.title}</span>
|
||||||
`;
|
`;
|
||||||
item.addEventListener('click', () => loadDetails(movie.id));
|
item.addEventListener('click', () => {
|
||||||
listEl.appendChild(item);
|
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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Fetch and display details + stream
|
sectionInProgress.appendChild(gridInProgress);
|
||||||
function loadDetails(id) {
|
showsListEl.insertBefore(sectionInProgress, showsListEl.firstChild);
|
||||||
window.api.getMovieDetails(id).then(movie => {
|
}
|
||||||
detailsEl.innerHTML = `
|
}).catch(err => console.error('Error loading in progress shows:', err));
|
||||||
<h2>${movie.title}</h2>
|
}
|
||||||
<p><strong>Year:</strong> ${movie.year}</p>
|
|
||||||
<p><strong>Released:</strong> ${movie.released}</p>
|
scanBtn.addEventListener('click', () => {
|
||||||
<video controls src="${window.api.getStreamUrl(movie.id)}"></video>
|
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);
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user