chore: update screenshots in readme and sso icon

README.md

@@ -13,6 +13,7 @@ nodecast-tv is a modern, web-based IPTV player featuring Live TV, EPG, Movies (V
 - **🎬 VOD Support**: Dedicated sections for Movies and TV Series with rich metadata, posters, and seasonal episode lists.
 - **❤️ Favorites System**: Unified favorites for channels, movies, and series with instant synchronization.
 - **🔐 Authentication**: User login system with admin and viewer roles ([details](https://github.com/technomancer702/nodecast-tv/pull/23)).
+- **🆔 OIDC SSO**: Support for Single Sign-On via OIDC providers (Authentik, Keycloak, etc.).
 - **⚡ High Performance**: Optimized for large playlists (7000+ channels) using virtual scrolling and batch rendering.
 - **⚙️ Management**: 
   - Support for Xtream Codes and M3U playlists.
@@ -26,10 +27,12 @@ nodecast-tv is a modern, web-based IPTV player featuring Live TV, EPG, Movies (V
 ## Screenshots
 
 <div align="center">
-  <img src="public/img/screenshots/screenshot-1.png" width="45%" alt="Screenshot 1" />
+  <img src="public/img/screenshots/screenshot-dashboard.png" width="45%" alt="Dashboard" />
-  <img src="public/img/screenshots/screenshot-2.png" width="45%" alt="Screenshot 2" />
+  <img src="public/img/screenshots/screenshot-1.png" width="45%" alt="Live TV" />
-  <img src="public/img/screenshots/screenshot-3.png" width="45%" alt="Screenshot 3" />
+  <img src="public/img/screenshots/screenshot-2.png" width="45%" alt="TV Guide" />
-  <img src="public/img/screenshots/screenshot-4.png" width="45%" alt="Screenshot 4" />
+  <img src="public/img/screenshots/screenshot-3.png" width="45%" alt="Movies" />
+  <img src="public/img/screenshots/screenshot-4.png" width="45%" alt="Series" />
+  <img src="public/img/screenshots/screenshot-settings.png" width="45%" alt="Settings" />
 </div>
 
 ## Getting Started

public/css/main.css

@@ -1866,6 +1866,21 @@ kbd {
   animation: spin 0.8s linear infinite;
 }
 
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-xl);
+  color: var(--color-text-muted);
+  width: 100%;
+}
+
+.horizontal-scroll .empty-state {
+  padding: var(--space-xl);
+  min-height: 150px;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -4109,7 +4124,6 @@ kbd {
   border-radius: 4px;
   font-size: 0.8rem;
   font-weight: 600;
-  margin-left: 10px;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   display: inline-flex;
@@ -4139,6 +4153,30 @@ kbd {
   pointer-events: none;
 }
 
+/* Badge Container for right alignment */
+.player-badges {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  /* Fallback for cases without flex-grow middle element */
+}
+
+/* Quality Badge */
+.quality-badge {
+  display: inline-block;
+  background: rgba(158, 158, 158, 0.8);
+  color: white;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.quality-badge.hidden {
+  display: none;
+}
+
 /* Watch Header Bar (Title + Transcode Status) */
 /* Moved to original definition around line 3311 */
 

public/index.html

@@ -168,7 +168,10 @@
                 <!-- Top Bar -->
                 <div class="watch-top-bar live-header">
                   <h2 class="watch-title-overlay" id="player-channel-name"></h2>
-                  <div class="transcode-status hidden" id="player-transcode-status">Direct</div>
+                  <div class="player-badges">
+                    <div class="transcode-status hidden" id="player-transcode-status">Direct</div>
+                    <div class="quality-badge hidden" id="player-quality-badge"></div>
+                  </div>
                 </div>
 
 
@@ -788,7 +791,10 @@
                 <h3 class="watch-title" id="watch-title"></h3>
                 <p class="watch-subtitle" id="watch-subtitle"></p>
               </div>
-              <div class="transcode-status hidden" id="watch-transcode-status">Direct</div>
+              <div class="player-badges">
+                <div class="transcode-status hidden" id="watch-transcode-status">Direct</div>
+                <div class="quality-badge hidden" id="watch-quality-badge"></div>
+              </div>
             </div>
 
             <!-- Center: Large Play Button -->

public/js/components/VideoPlayer.js

@@ -522,6 +522,17 @@ class VideoPlayer {
         // Setup custom video controls
         this.initCustomControls();
 
+        // Detect video resolution when metadata loads (works for all streams)
+        this.video.addEventListener('loadedmetadata', () => {
+            if (this.video.videoHeight > 0) {
+                this.currentStreamInfo = {
+                    width: this.video.videoWidth,
+                    height: this.video.videoHeight
+                };
+                this.updateQualityBadge();
+            }
+        });
+
         // Initialize HLS.js if supported
         if (Hls.isSupported()) {
             this.hls = new Hls(this.getHlsConfig());
@@ -775,7 +786,11 @@ class VideoPlayer {
                 try {
                     const probeRes = await fetch(`/api/probe?url=${encodeURIComponent(streamUrl)}`);
                     const info = await probeRes.json();
-                    console.log(`[Player] Probe result: video=${info.video}, audio=${info.audio}, compatible=${info.compatible}`);
+                    console.log(`[Player] Probe result: video=${info.video}, audio=${info.audio}, ${info.width}x${info.height}, compatible=${info.compatible}`);
+
+                    // Store probe result for quality badge display
+                    this.currentStreamInfo = info;
+                    this.updateQualityBadge();
 
                     // Handle subtitles from probe result
                     // Clear existing remote tracks (from previous streams)
@@ -1122,6 +1137,34 @@ class VideoPlayer {
         el.classList.remove('hidden');
     }
 
+    /**
+     * Get quality label from video height
+     */
+    getQualityLabel(height) {
+        if (height >= 2160) return '4K';
+        if (height >= 1440) return '1440p';
+        if (height >= 1080) return '1080p';
+        if (height >= 720) return '720p';
+        if (height >= 480) return '480p';
+        if (height > 0) return `${height}p`;
+        return null;
+    }
+
+    /**
+     * Update quality badge display
+     */
+    updateQualityBadge() {
+        const badge = document.getElementById('player-quality-badge');
+        if (!badge) return;
+
+        if (this.currentStreamInfo?.height > 0) {
+            badge.textContent = this.getQualityLabel(this.currentStreamInfo.height);
+            badge.classList.remove('hidden');
+        } else {
+            badge.classList.add('hidden');
+        }
+    }
+
     /**
      * Fetch EPG data for current channel
      */
@@ -1267,6 +1310,11 @@ class VideoPlayer {
         this.controlsOverlay?.classList.add('hidden'); // Hide controls
         this.loadingSpinner?.classList.remove('show');
         this.nowPlaying.classList.add('hidden');
+
+        // Hide quality badge
+        this.currentStreamInfo = null;
+        const badge = document.getElementById('player-quality-badge');
+        if (badge) badge.classList.add('hidden');
     }
 
     /**

public/js/icons.js

@@ -26,6 +26,7 @@ const Icons = {
     check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`,
     circle: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>`,
     close: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`,
+    fingerprint: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>`,
 };
 
 window.Icons = Icons;

public/js/pages/HomePage.js

@@ -40,7 +40,10 @@ class HomePage {
                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                         </button>
                         <div class="horizontal-scroll channel-tiles" id="favorite-channels-list">
-                            <div class="loading-state">Loading favorites...</div>
+                            <div class="loading-state">
+                                <div class="loading"></div>
+                                <span>Loading favorites...</span>
+                            </div>
                         </div>
                         <button class="scroll-arrow scroll-right" aria-label="Scroll right">
                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
@@ -57,7 +60,10 @@ class HomePage {
                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                         </button>
                         <div class="horizontal-scroll" id="continue-watching-list">
-                            <div class="loading-state">Loading history...</div>
+                            <div class="loading-state">
+                                <div class="loading"></div>
+                                <span>Loading history...</span>
+                            </div>
                         </div>
                         <button class="scroll-arrow scroll-right" aria-label="Scroll right">
                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
@@ -74,7 +80,10 @@ class HomePage {
                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                         </button>
                         <div class="horizontal-scroll" id="recent-movies-list">
-                            <div class="empty-state">Coming soon</div>
+                            <div class="loading-state">
+                                <div class="loading"></div>
+                                <span>Loading recently added...</span>
+                            </div>
                         </div>
                         <button class="scroll-arrow scroll-right" aria-label="Scroll right">
                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
@@ -91,7 +100,10 @@ class HomePage {
                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                         </button>
                         <div class="horizontal-scroll" id="recent-series-list">
-                            <div class="empty-state">Coming soon</div>
+                            <div class="loading-state">
+                                <div class="loading"></div>
+                                <span>Loading recently added...</span>
+                            </div>
                         </div>
                         <button class="scroll-arrow scroll-right" aria-label="Scroll right">
                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
@@ -342,7 +354,7 @@ class HomePage {
         try {
             const movies = await window.API.request('GET', '/channels/recent?type=movie&limit=12');
             if (!movies || movies.length === 0) {
-                list.innerHTML = '<div class="no-data">No recent movies found</div>';
+                list.innerHTML = '<div class="empty-state hint">No recently added movies found</div>';
                 return;
             }
 
@@ -371,7 +383,7 @@ class HomePage {
         try {
             const series = await window.API.request('GET', '/channels/recent?type=series&limit=12');
             if (!series || series.length === 0) {
-                list.innerHTML = '<div class="no-data">No recent series found</div>';
+                list.innerHTML = '<div class="empty-state hint">No recently added series found</div>';
                 return;
             }
 

public/js/pages/WatchPage.js

@@ -61,6 +61,7 @@ class WatchPage {
 
         // Transcode Status
         this.transcodeStatusEx = document.getElementById('watch-transcode-status');
+        this.qualityBadgeEl = document.getElementById('watch-quality-badge');
 
         // State
         this.hls = null;
@@ -331,6 +332,33 @@ class WatchPage {
         this.transcodeStatusEx.classList.remove('hidden');
     }
 
+    /**
+     * Get quality label from video height
+     */
+    getQualityLabel(height) {
+        if (height >= 2160) return '4K';
+        if (height >= 1440) return '1440p';
+        if (height >= 1080) return '1080p';
+        if (height >= 720) return '720p';
+        if (height >= 480) return '480p';
+        if (height > 0) return `${height}p`;
+        return null;
+    }
+
+    /**
+     * Update quality badge display
+     */
+    updateQualityBadge() {
+        if (!this.qualityBadgeEl) return;
+
+        if (this.currentStreamInfo?.height > 0) {
+            this.qualityBadgeEl.textContent = this.getQualityLabel(this.currentStreamInfo.height);
+            this.qualityBadgeEl.classList.remove('hidden');
+        } else {
+            this.qualityBadgeEl.classList.add('hidden');
+        }
+    }
+
     async loadVideo(url) {
         // Store the URL for copy functionality
         this.currentUrl = url;
@@ -361,7 +389,11 @@ class WatchPage {
                 const ua = settings.userAgentPreset === 'custom' ? settings.userAgentCustom : settings.userAgentPreset;
                 const probeRes = await fetch(`/api/probe?url=${encodeURIComponent(url)}&ua=${encodeURIComponent(ua || '')}`);
                 const info = await probeRes.json();
-                console.log(`[WatchPage] Probe result: video=${info.video}, audio=${info.audio}, compatible=${info.compatible}`);
+                console.log(`[WatchPage] Probe result: video=${info.video}, audio=${info.audio}, ${info.width}x${info.height}, compatible=${info.compatible}`);
+
+                // Store early probe info for quality display
+                this.currentStreamInfo = info;
+                this.updateQualityBadge();
 
                 if (info.needsTranscode) {
                     console.log('[WatchPage] Auto: Using HLS transcode session (incompatible audio/video)');
@@ -539,6 +571,12 @@ class WatchPage {
         this.stopTranscodeSession();
         this.updateTranscodeStatus('hidden');
 
+        // Hide quality badge
+        this.currentStreamInfo = null;
+        if (this.qualityBadgeEl) {
+            this.qualityBadgeEl.classList.add('hidden');
+        }
+
         if (this.hls) {
             this.hls.destroy();
             this.hls = null;
@@ -656,7 +694,14 @@ class WatchPage {
     }
 
     onMetadataLoaded() {
-        // Duration is unreliable for transcoded streams, so we don't display it
+        // Detect resolution
+        if (this.video && this.video.videoHeight > 0) {
+            this.currentStreamInfo = {
+                width: this.video.videoWidth,
+                height: this.video.videoHeight
+            };
+            this.updateQualityBadge();
+        }
 
         // Handle resumption
         if (this.resumeTime > 0 && this.video) {

public/login.html

@@ -205,14 +205,23 @@
             </div>
 
             <button id="btn-sso-login" class="btn-login"
-                style="background: transparent; border: 1px solid var(--color-border); color: var(--color-text-primary); display: flex; align-items: center; justify-content: center; gap: 10px;">
+                style="background: transparent; border: 1px solid var(--color-border); color: var(--color-text-primary); display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.2s;">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                     style="width: 20px; height: 20px;">
                     <path
-                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" />
+                        d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" />
                 </svg>
                 Sign in with SSO
             </button>
+
+            <style>
+                #btn-sso-login:hover {
+                    background: var(--color-bg-tertiary) !important;
+                    border-color: var(--color-accent) !important;
+                    color: var(--color-accent) !important;
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+                }
+            </style>
         </div>
     </div>
 

server/routes/probe.js

@@ -128,6 +128,8 @@ function analyzeProbeResult(probeResult, url) {
     return {
         video: videoCodec,
         audio: audioCodec,
+        width: videoStream?.width || 0,
+        height: videoStream?.height || 0,
         audioChannels: audioStream?.channels || 0, // For Smart Audio Copy
         container: container,
         compatible: compatible,