Initial commit
This commit is contained in:
Trevor Mears
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Guide Page Controller
|
||||
*/
|
||||
|
||||
class GuidePage {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
}
|
||||
|
||||
async init() {
|
||||
// EPG guide will lazy load when shown
|
||||
}
|
||||
|
||||
async show() {
|
||||
// Always reload EPG data when page is shown to ensure fresh data
|
||||
await this.app.epgGuide.loadEpg();
|
||||
}
|
||||
|
||||
hide() {
|
||||
// Page is hidden
|
||||
}
|
||||
}
|
||||
|
||||
window.GuidePage = GuidePage;
|
||||
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* Home Page Controller
|
||||
*/
|
||||
|
||||
class HomePage {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
this.handleKeydown = this.handleKeydown.bind(this);
|
||||
}
|
||||
|
||||
async init() {
|
||||
// Load sources and channels on initial page load
|
||||
await this.app.channelList.loadSources();
|
||||
await this.app.channelList.loadChannels();
|
||||
|
||||
// Silently fetch EPG data for sidebar info
|
||||
try {
|
||||
await this.app.epgGuide.fetchEpgData();
|
||||
// Update program info in existing DOM elements without re-rendering
|
||||
this.updateProgramInfo();
|
||||
} catch (err) {
|
||||
console.warn('Background EPG fetch failed:', err);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update "Now Playing" info in existing channel elements without blocking UI
|
||||
*/
|
||||
updateProgramInfo() {
|
||||
const channelItems = Array.from(document.querySelectorAll('.channel-item'));
|
||||
if (channelItems.length === 0) return;
|
||||
|
||||
// Build a map for O(1) channel lookups
|
||||
const channelMap = new Map();
|
||||
this.app.channelList.channels.forEach(c => channelMap.set(c.id, c));
|
||||
|
||||
// Process in small batches to avoid blocking UI
|
||||
const BATCH_SIZE = 50;
|
||||
let index = 0;
|
||||
|
||||
const processBatch = () => {
|
||||
const end = Math.min(index + BATCH_SIZE, channelItems.length);
|
||||
|
||||
for (let i = index; i < end; i++) {
|
||||
const item = channelItems[i];
|
||||
const channelId = item.dataset.channelId;
|
||||
const channel = channelMap.get(channelId);
|
||||
|
||||
if (channel) {
|
||||
const programDiv = item.querySelector('.channel-program');
|
||||
if (programDiv) {
|
||||
const programTitle = this.app.channelList.getProgramInfo(channel);
|
||||
programDiv.textContent = programTitle || '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
index = end;
|
||||
if (index < channelItems.length) {
|
||||
// Yield to browser before next batch
|
||||
requestAnimationFrame(processBatch);
|
||||
}
|
||||
};
|
||||
|
||||
// Start processing
|
||||
requestAnimationFrame(processBatch);
|
||||
}
|
||||
|
||||
handleKeydown(e) {
|
||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
this.app.channelList.selectPrevChannel();
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
this.app.channelList.selectNextChannel();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async show() {
|
||||
document.addEventListener('keydown', this.handleKeydown);
|
||||
|
||||
// Only reload if channels aren't already loaded
|
||||
if (this.app.channelList.channels.length === 0) {
|
||||
await this.app.channelList.loadSources();
|
||||
await this.app.channelList.loadChannels();
|
||||
}
|
||||
}
|
||||
|
||||
hide() {
|
||||
document.removeEventListener('keydown', this.handleKeydown);
|
||||
}
|
||||
}
|
||||
|
||||
window.HomePage = HomePage;
|
||||
@@ -0,0 +1,398 @@
|
||||
/**
|
||||
* Movies Page Controller
|
||||
* Handles VOD movie browsing and playback
|
||||
*/
|
||||
|
||||
class MoviesPage {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
this.container = document.getElementById('movies-grid');
|
||||
this.sourceSelect = document.getElementById('movies-source-select');
|
||||
this.categorySelect = document.getElementById('movies-category-select');
|
||||
this.searchInput = document.getElementById('movies-search');
|
||||
|
||||
this.movies = [];
|
||||
this.categories = [];
|
||||
this.sources = [];
|
||||
this.currentBatch = 0;
|
||||
this.batchSize = 24;
|
||||
this.filteredMovies = [];
|
||||
this.isLoading = false;
|
||||
this.observer = null;
|
||||
this.favoriteIds = new Set(); // Track favorite movie IDs
|
||||
this.showFavoritesOnly = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Source change handler
|
||||
this.sourceSelect?.addEventListener('change', () => {
|
||||
this.loadCategories();
|
||||
this.loadMovies();
|
||||
});
|
||||
|
||||
// Category change handler
|
||||
this.categorySelect?.addEventListener('change', () => {
|
||||
this.loadMovies();
|
||||
});
|
||||
|
||||
// Search with debounce
|
||||
let searchTimeout;
|
||||
this.searchInput?.addEventListener('input', () => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => this.filterAndRender(), 300);
|
||||
});
|
||||
|
||||
// Set up IntersectionObserver for lazy loading
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !this.isLoading) {
|
||||
this.renderNextBatch();
|
||||
}
|
||||
}, { rootMargin: '200px' });
|
||||
|
||||
// Favorites filter toggle
|
||||
const favBtn = document.getElementById('movies-favorites-btn');
|
||||
favBtn?.addEventListener('click', () => {
|
||||
this.showFavoritesOnly = !this.showFavoritesOnly;
|
||||
favBtn.classList.toggle('active', this.showFavoritesOnly);
|
||||
this.filterAndRender();
|
||||
});
|
||||
}
|
||||
|
||||
async show() {
|
||||
// Load sources if not loaded
|
||||
if (this.sources.length === 0) {
|
||||
await this.loadSources();
|
||||
}
|
||||
|
||||
// Load favorites
|
||||
await this.loadFavorites();
|
||||
|
||||
// Load movies if empty
|
||||
if (this.movies.length === 0) {
|
||||
await this.loadCategories();
|
||||
await this.loadMovies();
|
||||
}
|
||||
}
|
||||
|
||||
hide() {
|
||||
// Page is hidden
|
||||
}
|
||||
|
||||
async loadFavorites() {
|
||||
try {
|
||||
const favs = await API.favorites.getAll(null, 'movie');
|
||||
this.favoriteIds = new Set(favs.map(f => `${f.source_id}:${f.item_id}`));
|
||||
} catch (err) {
|
||||
console.error('Error loading favorites:', err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async loadSources() {
|
||||
try {
|
||||
const allSources = await API.sources.getAll();
|
||||
this.sources = allSources.filter(s => s.type === 'xtream' && s.enabled);
|
||||
|
||||
this.sourceSelect.innerHTML = '<option value="">All Sources</option>';
|
||||
this.sources.forEach(s => {
|
||||
const option = document.createElement('option');
|
||||
option.value = s.id;
|
||||
option.textContent = s.name;
|
||||
this.sourceSelect.appendChild(option);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error loading sources:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async loadCategories() {
|
||||
try {
|
||||
this.categories = [];
|
||||
this.hiddenCategoryIds = new Set(); // Track hidden categories
|
||||
this.categorySelect.innerHTML = '<option value="">All Categories</option>';
|
||||
|
||||
const sourceId = this.sourceSelect.value;
|
||||
const sourcesToLoad = sourceId
|
||||
? this.sources.filter(s => s.id === parseInt(sourceId))
|
||||
: this.sources;
|
||||
|
||||
// Fetch hidden items for each source
|
||||
for (const source of sourcesToLoad) {
|
||||
try {
|
||||
const hiddenItems = await API.channels.getHidden(source.id);
|
||||
hiddenItems.forEach(h => {
|
||||
if (h.item_type === 'vod_category') {
|
||||
this.hiddenCategoryIds.add(`${source.id}:${h.item_id}`);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn(`Failed to load hidden items from source ${source.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
for (const source of sourcesToLoad) {
|
||||
try {
|
||||
const cats = await API.proxy.xtream.vodCategories(source.id);
|
||||
if (cats && Array.isArray(cats)) {
|
||||
cats.forEach(c => {
|
||||
// Skip hidden categories
|
||||
if (!this.hiddenCategoryIds.has(`${source.id}:${c.category_id}`)) {
|
||||
this.categories.push({ ...c, sourceId: source.id });
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(`Failed to load categories from source ${source.id}:`, err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Populate dropdown
|
||||
this.categories.forEach(c => {
|
||||
const option = document.createElement('option');
|
||||
option.value = `${c.sourceId}:${c.category_id}`;
|
||||
option.textContent = c.category_name;
|
||||
this.categorySelect.appendChild(option);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error loading categories:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async loadMovies() {
|
||||
this.isLoading = true;
|
||||
this.container.innerHTML = '<div class="loading"><div class="loading-spinner"></div></div>';
|
||||
|
||||
try {
|
||||
this.movies = [];
|
||||
|
||||
const sourceId = this.sourceSelect.value;
|
||||
const categoryValue = this.categorySelect.value;
|
||||
|
||||
const sourcesToLoad = sourceId
|
||||
? this.sources.filter(s => s.id === parseInt(sourceId))
|
||||
: this.sources;
|
||||
|
||||
for (const source of sourcesToLoad) {
|
||||
try {
|
||||
// Parse category if selected
|
||||
let catId = null;
|
||||
if (categoryValue) {
|
||||
const [catSourceId, categoryId] = categoryValue.split(':');
|
||||
if (parseInt(catSourceId) === source.id) {
|
||||
catId = categoryId;
|
||||
} else if (sourceId) {
|
||||
continue; // Skip this source if category is from different source
|
||||
}
|
||||
}
|
||||
|
||||
const movies = await API.proxy.xtream.vodStreams(source.id, catId);
|
||||
console.log(`[Movies] Source ${source.id}, Category ${catId || 'ALL'}: Got ${movies?.length || 0} movies`);
|
||||
if (movies && Array.isArray(movies)) {
|
||||
movies.forEach(m => {
|
||||
// Skip movies from hidden categories
|
||||
if (this.hiddenCategoryIds && this.hiddenCategoryIds.has(`${source.id}:${m.category_id}`)) {
|
||||
return;
|
||||
}
|
||||
this.movies.push({
|
||||
...m,
|
||||
sourceId: source.id,
|
||||
id: `${source.id}:${m.stream_id}`
|
||||
});
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(`Failed to load movies from source ${source.id}:`, err.message);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`[Movies] Total loaded: ${this.movies.length} movies`);
|
||||
this.filterAndRender();
|
||||
} catch (err) {
|
||||
console.error('Error loading movies:', err);
|
||||
this.container.innerHTML = '<div class="empty-state"><p>Error loading movies</p></div>';
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
filterAndRender() {
|
||||
const searchTerm = this.searchInput?.value?.toLowerCase() || '';
|
||||
|
||||
this.filteredMovies = this.movies.filter(m => {
|
||||
// Filter by favorites if enabled
|
||||
if (this.showFavoritesOnly) {
|
||||
const favKey = `${m.sourceId}:${m.stream_id}`;
|
||||
if (!this.favoriteIds.has(favKey)) return false;
|
||||
}
|
||||
if (searchTerm && !m.name?.toLowerCase().includes(searchTerm)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
console.log(`[Movies] Displaying ${this.filteredMovies.length} of ${this.movies.length} movies`);
|
||||
|
||||
this.currentBatch = 0;
|
||||
this.container.innerHTML = '';
|
||||
|
||||
if (this.filteredMovies.length === 0) {
|
||||
this.container.innerHTML = '<div class="empty-state"><p>No movies found</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Create loader element
|
||||
const loader = document.createElement('div');
|
||||
loader.className = 'movies-loader';
|
||||
loader.innerHTML = '<div class="loading-spinner"></div>';
|
||||
this.container.appendChild(loader);
|
||||
|
||||
// Render initial batches (more to fill viewport)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this.renderNextBatch();
|
||||
}
|
||||
|
||||
// Start observing loader
|
||||
this.observer.observe(loader);
|
||||
}
|
||||
|
||||
renderNextBatch() {
|
||||
const start = this.currentBatch * this.batchSize;
|
||||
const end = start + this.batchSize;
|
||||
const batch = this.filteredMovies.slice(start, end);
|
||||
|
||||
console.log(`[Movies] Rendering batch ${this.currentBatch}: ${batch.length} cards (${start}-${end})`);
|
||||
|
||||
if (batch.length === 0) {
|
||||
const loader = this.container.querySelector('.movies-loader');
|
||||
if (loader) loader.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
batch.forEach(movie => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'movie-card';
|
||||
card.dataset.movieId = movie.stream_id;
|
||||
card.dataset.sourceId = movie.sourceId;
|
||||
|
||||
const poster = movie.stream_icon || movie.cover || '/img/placeholder.png';
|
||||
const year = movie.year || movie.releaseDate?.substring(0, 4) || '';
|
||||
const rating = movie.rating ? `⭐ ${movie.rating}` : '';
|
||||
|
||||
const isFav = this.favoriteIds.has(`${movie.sourceId}:${movie.stream_id}`);
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="movie-poster">
|
||||
<img src="${poster}" alt="${movie.name}"
|
||||
onerror="this.src='/img/placeholder.png'" loading="lazy">
|
||||
<div class="movie-play-overlay">
|
||||
<span class="play-icon">▶</span>
|
||||
</div>
|
||||
<button class="favorite-btn ${isFav ? 'active' : ''}" title="${isFav ? 'Remove from Favorites' : 'Add to Favorites'}">
|
||||
<span class="fav-icon">♥</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">${movie.name}</div>
|
||||
<div class="movie-meta">
|
||||
${year ? `<span>${year}</span>` : ''}
|
||||
${rating ? `<span>${rating}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Card click plays movie, but not if clicking favorite button
|
||||
card.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.favorite-btn')) {
|
||||
const btn = e.target.closest('.favorite-btn');
|
||||
this.toggleFavorite(movie, btn);
|
||||
e.stopPropagation();
|
||||
} else {
|
||||
this.playMovie(movie);
|
||||
}
|
||||
});
|
||||
fragment.appendChild(card);
|
||||
});
|
||||
|
||||
// Insert before loader
|
||||
const loader = this.container.querySelector('.movies-loader');
|
||||
if (loader) {
|
||||
this.container.insertBefore(fragment, loader);
|
||||
} else {
|
||||
this.container.appendChild(fragment);
|
||||
}
|
||||
|
||||
this.currentBatch++;
|
||||
|
||||
// Hide loader if done
|
||||
if (end >= this.filteredMovies.length && loader) {
|
||||
loader.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
async playMovie(movie) {
|
||||
try {
|
||||
// Get stream URL for movie using the actual container extension from API
|
||||
// Xtream API returns container_extension (e.g., 'mp4', 'mkv', 'avi')
|
||||
const container = movie.container_extension || 'mp4';
|
||||
const result = await API.proxy.xtream.getStreamUrl(movie.sourceId, movie.stream_id, 'vod', container);
|
||||
|
||||
if (result && result.url) {
|
||||
// Navigate to home and play
|
||||
this.app.navigateTo('home');
|
||||
|
||||
// Play the movie
|
||||
if (this.app.player) {
|
||||
const channel = {
|
||||
id: `movie:${movie.stream_id}`,
|
||||
name: movie.name,
|
||||
tvgLogo: movie.stream_icon || movie.cover,
|
||||
sourceType: 'xtream',
|
||||
sourceId: movie.sourceId,
|
||||
isVod: true // Mark as VOD for player handling
|
||||
};
|
||||
|
||||
// For VOD, use direct URL (don't proxy through HLS)
|
||||
// The video element can play mp4/mkv directly
|
||||
this.app.player.play(channel, result.url);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error playing movie:', err);
|
||||
}
|
||||
}
|
||||
async toggleFavorite(movie, btn) {
|
||||
const favKey = `${movie.sourceId}:${movie.stream_id}`;
|
||||
const isFav = this.favoriteIds.has(favKey);
|
||||
|
||||
try {
|
||||
// Optimistic update
|
||||
if (isFav) {
|
||||
this.favoriteIds.delete(favKey);
|
||||
btn.classList.remove('active');
|
||||
btn.title = 'Add to Favorites';
|
||||
await API.favorites.remove(movie.sourceId, movie.stream_id, 'movie');
|
||||
} else {
|
||||
this.favoriteIds.add(favKey);
|
||||
btn.classList.add('active');
|
||||
btn.title = 'Remove from Favorites';
|
||||
await API.favorites.add(movie.sourceId, movie.stream_id, 'movie');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error toggling favorite:', err);
|
||||
// Revert on error
|
||||
if (isFav) {
|
||||
this.favoriteIds.add(favKey);
|
||||
btn.classList.add('active');
|
||||
} else {
|
||||
this.favoriteIds.delete(favKey);
|
||||
btn.classList.remove('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.MoviesPage = MoviesPage;
|
||||
@@ -0,0 +1,481 @@
|
||||
/**
|
||||
* Series Page Controller
|
||||
* Handles TV series browsing and playback
|
||||
*/
|
||||
|
||||
class SeriesPage {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
this.container = document.getElementById('series-grid');
|
||||
this.sourceSelect = document.getElementById('series-source-select');
|
||||
this.categorySelect = document.getElementById('series-category-select');
|
||||
this.searchInput = document.getElementById('series-search');
|
||||
this.detailsPanel = document.getElementById('series-details');
|
||||
this.seasonsContainer = document.getElementById('series-seasons');
|
||||
|
||||
this.seriesList = [];
|
||||
this.categories = [];
|
||||
this.sources = [];
|
||||
this.currentBatch = 0;
|
||||
this.batchSize = 24;
|
||||
this.filteredSeries = [];
|
||||
this.isLoading = false;
|
||||
this.observer = null;
|
||||
this.hiddenCategoryIds = new Set();
|
||||
this.currentSeries = null;
|
||||
this.favoriteIds = new Set(); // Track favorite series IDs
|
||||
this.showFavoritesOnly = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Source change handler
|
||||
this.sourceSelect?.addEventListener('change', () => {
|
||||
this.loadCategories();
|
||||
this.loadSeries();
|
||||
});
|
||||
|
||||
// Category change handler
|
||||
this.categorySelect?.addEventListener('change', () => {
|
||||
this.loadSeries();
|
||||
});
|
||||
|
||||
// Search with debounce
|
||||
let searchTimeout;
|
||||
this.searchInput?.addEventListener('input', () => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => this.filterAndRender(), 300);
|
||||
});
|
||||
|
||||
// Back button
|
||||
document.querySelector('.series-back-btn')?.addEventListener('click', () => {
|
||||
this.hideDetails();
|
||||
});
|
||||
|
||||
// Set up IntersectionObserver for lazy loading
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !this.isLoading) {
|
||||
this.renderNextBatch();
|
||||
}
|
||||
}, { rootMargin: '200px' });
|
||||
|
||||
// Favorites filter toggle
|
||||
const favBtn = document.getElementById('series-favorites-btn');
|
||||
favBtn?.addEventListener('click', () => {
|
||||
this.showFavoritesOnly = !this.showFavoritesOnly;
|
||||
favBtn.classList.toggle('active', this.showFavoritesOnly);
|
||||
this.filterAndRender();
|
||||
});
|
||||
}
|
||||
|
||||
async show() {
|
||||
// Hide details panel when showing page
|
||||
this.hideDetails();
|
||||
|
||||
// Load sources if not loaded
|
||||
// Load sources if not loaded
|
||||
if (this.sources.length === 0) {
|
||||
await this.loadSources();
|
||||
}
|
||||
|
||||
// Load favorites
|
||||
await this.loadFavorites();
|
||||
|
||||
// Load series if empty
|
||||
if (this.seriesList.length === 0) {
|
||||
await this.loadCategories();
|
||||
await this.loadSeries();
|
||||
}
|
||||
}
|
||||
|
||||
hide() {
|
||||
// Page is hidden
|
||||
}
|
||||
|
||||
async loadFavorites() {
|
||||
try {
|
||||
const favs = await API.favorites.getAll(null, 'series');
|
||||
this.favoriteIds = new Set(favs.map(f => `${f.source_id}:${f.item_id}`));
|
||||
} catch (err) {
|
||||
console.error('Error loading favorites:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async loadSources() {
|
||||
try {
|
||||
const allSources = await API.sources.getAll();
|
||||
this.sources = allSources.filter(s => s.type === 'xtream' && s.enabled);
|
||||
|
||||
this.sourceSelect.innerHTML = '<option value="">All Sources</option>';
|
||||
this.sources.forEach(s => {
|
||||
const option = document.createElement('option');
|
||||
option.value = s.id;
|
||||
option.textContent = s.name;
|
||||
this.sourceSelect.appendChild(option);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error loading sources:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async loadCategories() {
|
||||
try {
|
||||
this.categories = [];
|
||||
this.hiddenCategoryIds = new Set();
|
||||
this.categorySelect.innerHTML = '<option value="">All Categories</option>';
|
||||
|
||||
const sourceId = this.sourceSelect.value;
|
||||
const sourcesToLoad = sourceId
|
||||
? this.sources.filter(s => s.id === parseInt(sourceId))
|
||||
: this.sources;
|
||||
|
||||
// Fetch hidden items for each source
|
||||
for (const source of sourcesToLoad) {
|
||||
try {
|
||||
const hiddenItems = await API.channels.getHidden(source.id);
|
||||
hiddenItems.forEach(h => {
|
||||
if (h.item_type === 'series_category') {
|
||||
this.hiddenCategoryIds.add(`${source.id}:${h.item_id}`);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn(`Failed to load hidden items from source ${source.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
for (const source of sourcesToLoad) {
|
||||
try {
|
||||
const cats = await API.proxy.xtream.seriesCategories(source.id);
|
||||
if (cats && Array.isArray(cats)) {
|
||||
cats.forEach(c => {
|
||||
// Skip hidden categories
|
||||
if (!this.hiddenCategoryIds.has(`${source.id}:${c.category_id}`)) {
|
||||
this.categories.push({ ...c, sourceId: source.id });
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(`Failed to load series categories from source ${source.id}:`, err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Populate dropdown
|
||||
this.categories.forEach(c => {
|
||||
const option = document.createElement('option');
|
||||
option.value = `${c.sourceId}:${c.category_id}`;
|
||||
option.textContent = c.category_name;
|
||||
this.categorySelect.appendChild(option);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error loading categories:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async loadSeries() {
|
||||
this.isLoading = true;
|
||||
this.container.innerHTML = '<div class="loading"><div class="loading-spinner"></div></div>';
|
||||
|
||||
try {
|
||||
this.seriesList = [];
|
||||
|
||||
const sourceId = this.sourceSelect.value;
|
||||
const categoryValue = this.categorySelect.value;
|
||||
|
||||
const sourcesToLoad = sourceId
|
||||
? this.sources.filter(s => s.id === parseInt(sourceId))
|
||||
: this.sources;
|
||||
|
||||
for (const source of sourcesToLoad) {
|
||||
try {
|
||||
// Parse category if selected
|
||||
let catId = null;
|
||||
if (categoryValue) {
|
||||
const [catSourceId, categoryId] = categoryValue.split(':');
|
||||
if (parseInt(catSourceId) === source.id) {
|
||||
catId = categoryId;
|
||||
} else if (sourceId) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
const series = await API.proxy.xtream.series(source.id, catId);
|
||||
console.log(`[Series] Source ${source.id}, Category ${catId || 'ALL'}: Got ${series?.length || 0} series`);
|
||||
if (series && Array.isArray(series)) {
|
||||
series.forEach(s => {
|
||||
// Skip series from hidden categories
|
||||
if (this.hiddenCategoryIds.has(`${source.id}:${s.category_id}`)) {
|
||||
return;
|
||||
}
|
||||
this.seriesList.push({
|
||||
...s,
|
||||
sourceId: source.id,
|
||||
id: `${source.id}:${s.series_id}`
|
||||
});
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(`Failed to load series from source ${source.id}:`, err.message);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`[Series] Total loaded: ${this.seriesList.length} series`);
|
||||
this.filterAndRender();
|
||||
} catch (err) {
|
||||
console.error('Error loading series:', err);
|
||||
this.container.innerHTML = '<div class="empty-state"><p>Error loading series</p></div>';
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
filterAndRender() {
|
||||
const searchTerm = this.searchInput?.value?.toLowerCase() || '';
|
||||
|
||||
this.filteredSeries = this.seriesList.filter(s => {
|
||||
// Filter by favorites if enabled
|
||||
if (this.showFavoritesOnly) {
|
||||
const favKey = `${s.sourceId}:${s.series_id}`;
|
||||
if (!this.favoriteIds.has(favKey)) return false;
|
||||
}
|
||||
if (searchTerm && !s.name?.toLowerCase().includes(searchTerm)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
console.log(`[Series] Displaying ${this.filteredSeries.length} of ${this.seriesList.length} series`);
|
||||
|
||||
this.currentBatch = 0;
|
||||
this.container.innerHTML = '';
|
||||
|
||||
if (this.filteredSeries.length === 0) {
|
||||
this.container.innerHTML = '<div class="empty-state"><p>No series found</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Create loader element
|
||||
const loader = document.createElement('div');
|
||||
loader.className = 'series-loader';
|
||||
loader.innerHTML = '<div class="loading-spinner"></div>';
|
||||
this.container.appendChild(loader);
|
||||
|
||||
// Render initial batches
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this.renderNextBatch();
|
||||
}
|
||||
|
||||
// Start observing loader
|
||||
this.observer.observe(loader);
|
||||
}
|
||||
|
||||
renderNextBatch() {
|
||||
const start = this.currentBatch * this.batchSize;
|
||||
const end = start + this.batchSize;
|
||||
const batch = this.filteredSeries.slice(start, end);
|
||||
|
||||
if (batch.length === 0) {
|
||||
const loader = this.container.querySelector('.series-loader');
|
||||
if (loader) loader.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
batch.forEach(series => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'series-card';
|
||||
card.dataset.seriesId = series.series_id;
|
||||
card.dataset.sourceId = series.sourceId;
|
||||
|
||||
const poster = series.cover || '/img/placeholder.png';
|
||||
const year = series.year || series.releaseDate?.substring(0, 4) || '';
|
||||
const rating = series.rating ? `⭐ ${series.rating}` : '';
|
||||
|
||||
const isFav = this.favoriteIds.has(`${series.sourceId}:${series.series_id}`);
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="series-poster">
|
||||
<img src="${poster}" alt="${series.name}"
|
||||
onerror="this.src='/img/placeholder.png'" loading="lazy">
|
||||
<div class="series-play-overlay">
|
||||
<span class="play-icon">▶</span>
|
||||
</div>
|
||||
<button class="favorite-btn ${isFav ? 'active' : ''}" title="${isFav ? 'Remove from Favorites' : 'Add to Favorites'}">
|
||||
<span class="fav-icon">♥</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="series-card-info">
|
||||
<div class="series-title">${series.name}</div>
|
||||
<div class="series-meta">
|
||||
${year ? `<span>${year}</span>` : ''}
|
||||
${rating ? `<span>${rating}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.favorite-btn')) {
|
||||
const btn = e.target.closest('.favorite-btn');
|
||||
this.toggleFavorite(series, btn);
|
||||
e.stopPropagation();
|
||||
} else {
|
||||
this.showSeriesDetails(series);
|
||||
}
|
||||
});
|
||||
fragment.appendChild(card);
|
||||
});
|
||||
|
||||
// Insert before loader
|
||||
const loader = this.container.querySelector('.series-loader');
|
||||
if (loader) {
|
||||
this.container.insertBefore(fragment, loader);
|
||||
} else {
|
||||
this.container.appendChild(fragment);
|
||||
}
|
||||
|
||||
this.currentBatch++;
|
||||
|
||||
// Hide loader if done
|
||||
if (end >= this.filteredSeries.length && loader) {
|
||||
loader.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
async showSeriesDetails(series) {
|
||||
this.currentSeries = series;
|
||||
|
||||
// Show details panel
|
||||
this.container.classList.add('hidden');
|
||||
this.detailsPanel.classList.remove('hidden');
|
||||
|
||||
// Set header info
|
||||
document.getElementById('series-poster').src = series.cover || '/img/placeholder.png';
|
||||
document.getElementById('series-title').textContent = series.name;
|
||||
document.getElementById('series-plot').textContent = series.plot || '';
|
||||
|
||||
// Show loading
|
||||
this.seasonsContainer.innerHTML = '<div class="loading"><div class="loading-spinner"></div></div>';
|
||||
|
||||
try {
|
||||
// Fetch series info (seasons/episodes)
|
||||
const info = await API.proxy.xtream.seriesInfo(series.sourceId, series.series_id);
|
||||
|
||||
if (!info || !info.episodes) {
|
||||
this.seasonsContainer.innerHTML = '<p class="hint">No episodes found</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Render seasons and episodes
|
||||
let html = '';
|
||||
const seasons = Object.keys(info.episodes).sort((a, b) => parseInt(a) - parseInt(b));
|
||||
|
||||
seasons.forEach(seasonNum => {
|
||||
const episodes = info.episodes[seasonNum];
|
||||
html += `
|
||||
<div class="season-group">
|
||||
<div class="season-header">
|
||||
<span class="season-expander">▼</span>
|
||||
<span class="season-name">Season ${seasonNum} (${episodes.length} episodes)</span>
|
||||
</div>
|
||||
<div class="episode-list">
|
||||
${episodes.map(ep => `
|
||||
<div class="episode-item" data-episode-id="${ep.id}" data-source-id="${series.sourceId}" data-container="${ep.container_extension || 'mp4'}">
|
||||
<span class="episode-number">E${ep.episode_num}</span>
|
||||
<span class="episode-title">${ep.title || `Episode ${ep.episode_num}`}</span>
|
||||
<span class="episode-duration">${ep.duration || ''}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
this.seasonsContainer.innerHTML = html;
|
||||
|
||||
// Add click handlers
|
||||
this.seasonsContainer.querySelectorAll('.season-header').forEach(header => {
|
||||
header.addEventListener('click', () => {
|
||||
header.closest('.season-group').classList.toggle('collapsed');
|
||||
});
|
||||
});
|
||||
|
||||
this.seasonsContainer.querySelectorAll('.episode-item').forEach(ep => {
|
||||
ep.addEventListener('click', () => this.playEpisode(ep));
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading series info:', err);
|
||||
this.seasonsContainer.innerHTML = '<p class="hint" style="color: var(--color-error);">Error loading episodes</p>';
|
||||
}
|
||||
}
|
||||
|
||||
hideDetails() {
|
||||
this.detailsPanel.classList.add('hidden');
|
||||
this.container.classList.remove('hidden');
|
||||
this.currentSeries = null;
|
||||
}
|
||||
|
||||
async playEpisode(episodeEl) {
|
||||
const episodeId = episodeEl.dataset.episodeId;
|
||||
const sourceId = parseInt(episodeEl.dataset.sourceId);
|
||||
const container = episodeEl.dataset.container || 'mp4';
|
||||
|
||||
try {
|
||||
// Get stream URL for episode (use 'series' type)
|
||||
const result = await API.proxy.xtream.getStreamUrl(sourceId, episodeId, 'series', container);
|
||||
|
||||
if (result && result.url) {
|
||||
// Navigate to home and play
|
||||
this.app.navigateTo('home');
|
||||
|
||||
// Play the episode
|
||||
if (this.app.player) {
|
||||
const episodeTitle = episodeEl.querySelector('.episode-title')?.textContent || 'Episode';
|
||||
const channel = {
|
||||
id: `episode:${episodeId}`,
|
||||
name: `${this.currentSeries?.name || 'Series'} - ${episodeTitle}`,
|
||||
sourceType: 'xtream',
|
||||
sourceId: sourceId,
|
||||
isVod: true
|
||||
};
|
||||
|
||||
this.app.player.play(channel, result.url);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error playing episode:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async toggleFavorite(series, btn) {
|
||||
const favKey = `${series.sourceId}:${series.series_id}`;
|
||||
const isFav = this.favoriteIds.has(favKey);
|
||||
|
||||
try {
|
||||
// Optimistic update
|
||||
if (isFav) {
|
||||
this.favoriteIds.delete(favKey);
|
||||
btn.classList.remove('active');
|
||||
btn.title = 'Add to Favorites';
|
||||
await API.favorites.remove(series.sourceId, series.series_id, 'series');
|
||||
} else {
|
||||
this.favoriteIds.add(favKey);
|
||||
btn.classList.add('active');
|
||||
btn.title = 'Remove from Favorites';
|
||||
await API.favorites.add(series.sourceId, series.series_id, 'series');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error toggling favorite:', err);
|
||||
// Revert on error
|
||||
if (isFav) {
|
||||
this.favoriteIds.add(favKey);
|
||||
btn.classList.add('active');
|
||||
} else {
|
||||
this.favoriteIds.delete(favKey);
|
||||
btn.classList.remove('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.SeriesPage = SeriesPage;
|
||||
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* Settings Page Controller
|
||||
*/
|
||||
|
||||
class SettingsPage {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
this.tabs = document.querySelectorAll('.tabs .tab');
|
||||
this.tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Tab switching
|
||||
this.tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => this.switchTab(tab.dataset.tab));
|
||||
});
|
||||
|
||||
// Player settings
|
||||
this.initPlayerSettings();
|
||||
}
|
||||
|
||||
initPlayerSettings() {
|
||||
const arrowKeysToggle = document.getElementById('setting-arrow-keys');
|
||||
const overlayDurationInput = document.getElementById('setting-overlay-duration');
|
||||
const defaultVolumeSlider = document.getElementById('setting-default-volume');
|
||||
const volumeValueDisplay = document.getElementById('volume-value');
|
||||
const rememberVolumeToggle = document.getElementById('setting-remember-volume');
|
||||
const autoPlayNextToggle = document.getElementById('setting-autoplay-next');
|
||||
|
||||
// Load current settings
|
||||
if (this.app.player?.settings) {
|
||||
arrowKeysToggle.checked = this.app.player.settings.arrowKeysChangeChannel;
|
||||
overlayDurationInput.value = this.app.player.settings.overlayDuration;
|
||||
defaultVolumeSlider.value = this.app.player.settings.defaultVolume;
|
||||
volumeValueDisplay.textContent = this.app.player.settings.defaultVolume + '%';
|
||||
rememberVolumeToggle.checked = this.app.player.settings.rememberVolume;
|
||||
autoPlayNextToggle.checked = this.app.player.settings.autoPlayNextEpisode;
|
||||
}
|
||||
|
||||
// Arrow keys toggle
|
||||
arrowKeysToggle.addEventListener('change', () => {
|
||||
this.app.player.settings.arrowKeysChangeChannel = arrowKeysToggle.checked;
|
||||
this.app.player.saveSettings();
|
||||
});
|
||||
|
||||
// Overlay duration
|
||||
overlayDurationInput.addEventListener('change', () => {
|
||||
const value = Math.min(30, Math.max(1, parseInt(overlayDurationInput.value) || 5));
|
||||
overlayDurationInput.value = value;
|
||||
this.app.player.settings.overlayDuration = value;
|
||||
this.app.player.saveSettings();
|
||||
});
|
||||
|
||||
// Default volume slider
|
||||
defaultVolumeSlider?.addEventListener('input', () => {
|
||||
const value = parseInt(defaultVolumeSlider.value);
|
||||
volumeValueDisplay.textContent = value + '%';
|
||||
this.app.player.settings.defaultVolume = value;
|
||||
this.app.player.saveSettings();
|
||||
});
|
||||
|
||||
// Remember volume toggle
|
||||
rememberVolumeToggle?.addEventListener('change', () => {
|
||||
this.app.player.settings.rememberVolume = rememberVolumeToggle.checked;
|
||||
this.app.player.saveSettings();
|
||||
});
|
||||
|
||||
// Auto-play next episode toggle
|
||||
autoPlayNextToggle?.addEventListener('change', () => {
|
||||
this.app.player.settings.autoPlayNextEpisode = autoPlayNextToggle.checked;
|
||||
this.app.player.saveSettings();
|
||||
});
|
||||
|
||||
// EPG refresh interval
|
||||
const epgRefreshSelect = document.getElementById('epg-refresh-interval');
|
||||
if (epgRefreshSelect) {
|
||||
// Load saved value
|
||||
const savedInterval = localStorage.getItem('nodecast_tv_epg_refresh_interval');
|
||||
if (savedInterval) {
|
||||
epgRefreshSelect.value = savedInterval;
|
||||
}
|
||||
|
||||
// Save on change
|
||||
epgRefreshSelect.addEventListener('change', () => {
|
||||
localStorage.setItem('nodecast_tv_epg_refresh_interval', epgRefreshSelect.value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
switchTab(tabName) {
|
||||
this.tabs.forEach(t => t.classList.toggle('active', t.dataset.tab === tabName));
|
||||
this.tabContents.forEach(c => c.classList.toggle('active', c.id === `tab-${tabName}`));
|
||||
|
||||
// Load content browser when switching to that tab
|
||||
if (tabName === 'content') {
|
||||
this.app.sourceManager.loadContentSources();
|
||||
}
|
||||
}
|
||||
|
||||
async show() {
|
||||
// Load sources when page is shown
|
||||
await this.app.sourceManager.loadSources();
|
||||
|
||||
// Refresh player settings display
|
||||
const arrowKeysToggle = document.getElementById('setting-arrow-keys');
|
||||
const overlayDurationInput = document.getElementById('setting-overlay-duration');
|
||||
if (this.app.player?.settings) {
|
||||
arrowKeysToggle.checked = this.app.player.settings.arrowKeysChangeChannel;
|
||||
overlayDurationInput.value = this.app.player.settings.overlayDuration;
|
||||
}
|
||||
}
|
||||
|
||||
hide() {
|
||||
// Page is hidden
|
||||
}
|
||||
}
|
||||
|
||||
window.SettingsPage = SettingsPage;
|
||||
Reference in New Issue
Block a user