Favorite Channels
-
-
Loading favorites...
+
+
+
@@ -44,8 +52,16 @@ class HomePage {
+
+
Loading favorites...
+ Continue Watching
-
-
Loading history...
+
+
+
@@ -53,8 +69,16 @@ class HomePage {
+
+
Loading history...
+ Recently Added Movies
-
-
@@ -223,6 +308,9 @@ class HomePage {
}
});
});
+
+ // Update scroll arrows after content renders
+ this.updateScrollArrows();
}
navigateToSeries(item) {
@@ -268,6 +356,9 @@ class HomePage {
if (item) this.playItem(item);
});
});
+
+ // Update scroll arrows after content renders
+ this.updateScrollArrows();
} catch (err) {
console.error('[Dashboard] Error loading recent movies:', err);
}
@@ -294,6 +385,9 @@ class HomePage {
if (item) this.navigateToSeries(item);
});
});
+
+ // Update scroll arrows after content renders
+ this.updateScrollArrows();
} catch (err) {
console.error('[Dashboard] Error loading recent series:', err);
}
@@ -311,7 +405,7 @@ class HomePage {
return `
Coming soon
+
+
+
@@ -62,15 +86,73 @@ class HomePage {
+
+
Coming soon
+ Recently Added Series
-
`;
this.container = document.getElementById('home-content');
+
+ // Attach scroll arrow handlers
+ this.initScrollArrows();
}
+ initScrollArrows() {
+ this.container.querySelectorAll('.scroll-wrapper').forEach(wrapper => {
+ const scrollContainer = wrapper.querySelector('.horizontal-scroll');
+ const leftBtn = wrapper.querySelector('.scroll-left');
+ const rightBtn = wrapper.querySelector('.scroll-right');
+
+ if (!scrollContainer || !leftBtn || !rightBtn) return;
+
+ const scrollAmount = 300; // pixels to scroll per click
+
+ leftBtn.addEventListener('click', () => {
+ scrollContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+ });
+
+ rightBtn.addEventListener('click', () => {
+ scrollContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+ });
+
+ // Update arrow visibility based on scroll position
+ const updateArrows = () => {
+ const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+ leftBtn.classList.toggle('hidden', scrollLeft <= 0);
+ rightBtn.classList.toggle('hidden', scrollLeft + clientWidth >= scrollWidth - 5);
+ };
+
+ // Store reference for later updates
+ wrapper._updateArrows = updateArrows;
+
+ scrollContainer.addEventListener('scroll', updateArrows);
+ // Initial check after content loads
+ setTimeout(updateArrows, 100);
+ });
+ }
+
+ /**
+ * Re-check scroll arrow visibility for all sections
+ * Call this after dynamically loading content
+ */
+ updateScrollArrows() {
+ this.container?.querySelectorAll('.scroll-wrapper').forEach(wrapper => {
+ if (wrapper._updateArrows) {
+ wrapper._updateArrows();
+ }
+ });
+ }
+
+
async loadDashboardData() {
if (this.isLoading) return;
this.isLoading = true;
@@ -147,6 +229,9 @@ class HomePage {
});
});
+ // Update scroll arrows after content renders
+ this.updateScrollArrows();
+
} catch (err) {
console.error('[Dashboard] Error loading favorite channels:', err);
list.innerHTML = 'Coming soon
+
+
+
+
+
Coming soon
+ Error loading favorites
';
@@ -161,7 +246,7 @@ class HomePage {
return `
- 
+
${name}
- 
+
@@ -336,7 +430,7 @@ class HomePage {
return `
-
+
diff --git a/public/js/pages/WatchPage.js b/public/js/pages/WatchPage.js
index 3f3041c..53061e7 100644
--- a/public/js/pages/WatchPage.js
+++ b/public/js/pages/WatchPage.js
@@ -888,7 +888,14 @@ class WatchPage {
renderDetails() {
if (!this.content) return;
- this.posterEl.src = this.content.poster || '/img/placeholder.png';
+ const isChannel = this.content.type === 'channel' || !this.content.type; // Default to channel if unknown
+ const fallback = isChannel ? '/img/placeholder.png' : '/img/poster-placeholder.jpg';
+
+ this.posterEl.onerror = () => {
+ this.posterEl.onerror = null;
+ this.posterEl.src = fallback;
+ };
+ this.posterEl.src = this.content.poster || fallback;
this.posterEl.alt = this.content.title || '';
this.contentTitleEl.textContent = this.content.title || '';
this.yearEl.textContent = this.content.year || '';
@@ -984,7 +991,7 @@ class WatchPage {
+ onerror="this.onerror=null;this.src='/img/placeholder.png'" loading="lazy">
`).join('');
diff --git a/server/routes/channels.js b/server/routes/channels.js
index 4c84d3d..15965a1 100644
--- a/server/routes/channels.js
+++ b/server/routes/channels.js
@@ -298,9 +298,17 @@ router.get('/recent', async (req, res) => {
const db = getDb();
const recentItems = db.prepare(`
- SELECT * FROM playlist_items
- WHERE type = ? AND is_hidden = 0
- ORDER BY added_at DESC
+ SELECT * FROM playlist_items p
+ WHERE p.type = ?
+ AND p.is_hidden = 0
+ AND NOT EXISTS (
+ SELECT 1 FROM categories c
+ WHERE c.source_id = p.source_id
+ AND c.category_id = p.category_id
+ AND c.type = p.type
+ AND c.is_hidden = 1
+ )
+ ORDER BY p.added_at DESC
LIMIT ?
`).all(type, parseInt(limit));
+ onerror="this.onerror=null;this.src='/img/placeholder.png'" loading="lazy">
${movie.name}