{"id":50925423,"url":"https://github.com/chriz-3656/streamflix","last_synced_at":"2026-06-16T22:30:35.247Z","repository":{"id":337543037,"uuid":"1154103629","full_name":"chriz-3656/streamflix","owner":"chriz-3656","description":"Netflix-style IPTV web player with HLS.js, M3U channel browsing, and responsive live streaming UI.","archived":false,"fork":false,"pushed_at":"2026-02-17T18:38:18.000Z","size":347,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-17T22:39:04.462Z","etag":null,"topics":["hls","iptv","live-tv","m3u","netflix-clone","streaming","vanilla-javascript","web-player"],"latest_commit_sha":null,"homepage":"https://streamflix-watch.pages.dev/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chriz-3656.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-10T02:37:27.000Z","updated_at":"2026-02-17T18:38:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/chriz-3656/streamflix","commit_stats":null,"previous_names":["chriz-3656/streamflix"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chriz-3656/streamflix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriz-3656%2Fstreamflix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriz-3656%2Fstreamflix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriz-3656%2Fstreamflix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriz-3656%2Fstreamflix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chriz-3656","download_url":"https://codeload.github.com/chriz-3656/streamflix/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriz-3656%2Fstreamflix/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34426737,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-16T02:00:06.860Z","response_time":126,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hls","iptv","live-tv","m3u","netflix-clone","streaming","vanilla-javascript","web-player"],"created_at":"2026-06-16T22:30:32.900Z","updated_at":"2026-06-16T22:30:35.238Z","avatar_url":"https://github.com/chriz-3656.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StreamFlix - Netflix-Style IPTV Player\n\n![StreamFlix Banner](https://placehold.co/800x200/141414/FFFFFF?text=StreamFlix+IPTV+Player)\n\n🌐 **Live Demo**: [https://streamflix-watch.pages.dev/](https://streamflix-watch.pages.dev/)\n\nA modern, Netflix-inspired web-based IPTV player that streams live TV channels from M3U playlists with a premium user experience. Built with vanilla JavaScript and HLS.js for seamless HLS streaming support.\n\n## ✨ Latest Updates (v2.5)\n\n### 🚀 New Features, Fixes, and UX Improvements\n\n#### **YouTube \u0026 Custom Stream Support**\n- **Play URL Feature**: Added a \"Play URL\" button to the homepage and player sidebar.\n- **YouTube Integration**: Paste any YouTube video or live stream URL to watch it directly in the player.\n- **Custom Streams**: Support for direct `.m3u8`, `.mp4`, and `.ts` stream URLs not listed in the default playlists.\n- **Seamless Switching**: Automatically switches between the standard HLS player and YouTube iframe based on the content type.\n\n#### **Playback \u0026 Channel Selection**\n- **Deterministic Channel Handoff**: Channel selected on homepage now opens the exact same stream on player page (URL now carries `channel`, `stream`, `name`, `group`, `logo`).\n- **No Random Channel Fallback**: Removed behavior where first/random channel could play when opening from homepage.\n- **Start Watching Behavior Updated**: `Start Watching` opens a blank player state (no autoplay) until user explicitly selects a channel.\n- **Play Race Condition Fix**: Handled `AbortError` during rapid channel switches by adding load-token based cancellation safety.\n\n#### **Sidebar UX**\n- **Sidebar Search Reliability**: Searched channels now render/select correctly with pagination and filtering.\n- **Collapsible Now Playing Card**: Added up/down toggle to hide/show current-channel details and free space for channel list browsing.\n- **Keyboard Shortcut Guard**: Player keyboard shortcuts are disabled while sidebar is open and re-enabled when closed.\n- **Scrollable Sidebar Improvements**: Refined scroll containers and behavior for smooth up/down browsing.\n\n#### **Channel Loading Performance**\n- **Fixed Chunk Loading**: Replaced half-split loading with fixed chunks for better scaling:\n  - Homepage channel grid: **50 per load**\n  - Sidebar channel list: **10 per load**\n- **Load More Buttons**: Added and optimized `Load More` controls for homepage and sidebar.\n- **Rendering Optimization**: Reduced runtime UI overhead and added lightweight rendering hints for large channel lists.\n\n#### **Player Overlay \u0026 Controls**\n- **Pause-State Overlay Rule**: Channel info overlay on video hides when playback is paused.\n- **Overlay Sync**: Channel info visibility now follows control visibility behavior.\n- **Overlay Auto-Hide Timing**: Controls + channel overlay now auto-hide after **5 seconds** of inactivity.\n- **PiP/Theater Stability**: Added missing handlers and improved mode toggles.\n\n#### **Responsive \u0026 Mobile**\n- **Responsive Hardening Pass**: Improved behavior across phones/tablets/desktop/large screens.\n- **Safe-Area Support**: Better spacing for notches/home indicators.\n- **Landscape Short-Height Tuning**: Compact controls for small-height landscape screens.\n- **Touch Tap Behavior Fix**: On mobile/touch devices, tapping video now toggles controls overlay visibility (show/hide) instead of play/pause.\n\n#### **Branding / Assets**\n- **Custom Favicon Wired**: Added `assets/favicon.ico` to homepage and player page.\n- **PWA Ready Icons**: Added Android/iOS favicon set for install experience.\n\n#### **PWA Support**\n- **Web App Manifest**: Added `manifest.webmanifest` with app metadata, theme color, and install icons.\n- **Service Worker**: Added `sw.js` for app-shell caching and offline-friendly static asset loading.\n- **Auto Registration**: Added `js/pwa-register.js` and wired it to homepage/player.\n\n#### **Backend Relay \u0026 Desktop Deployment**\n- **Browser-Safe Stream Relay**: The Electron desktop app now bundles `lib/streamflix-app.js` and starts an Express relay at `http://127.0.0.1:\u003cport\u003e/api/relay` before loading the UI so every stream goes through localhost.\n- **Manifest Rewriting**: The relay rewrites nested HLS URLs (segments/keys) so the browser always requests proxied endpoints, preventing CORS/mixed-content failures.\n- **CORS + HTTPS Friendly**: Enables streaming of HTTP/HTTPS playlists inside the Electron UI and the hosted web build without browser blocking.\n- **Smart Player Integration**: Frontend auto-detects `/api/relay/health` and prefers relay playback for all HTTP/HTTPS URLs (including status probes and `playSpecificChannelById`).\n- **Cloudflare Worker Starter**: `worker/` contains a Cloudflare Worker relay template (`worker/src/index.js`) and `worker/wrangler.toml` in case you need a global edge relay.\n\n#### **Downloads \u0026 Releases**\n- **Dedicated Download Page**: Added `download.html` with platform cards, install steps, and release metadata.\n- **Windows + Linux Artifacts**: GitHub release `v2.3.0` ships both `streamflix.Setup.2.3.0.exe` and `streamflix_2.3.0_amd64.deb`.\n- **Homepage Navigation Update**: Added homepage menu/sidebar navigation entry to open the Downloads page directly.\n- **Android APK Status**: Added Android APK section as **Coming Soon** with planned packaging notes.\n\n## ✨ Previous Updates (v2.1)\n\n### 🎉 Major Fixes \u0026 Improvements\n\n#### **Audio \u0026 Video Playback** ✅\n- **HLS.js Integration**: Added industry-standard HLS.js library for proper `.m3u8` stream support\n- **Fixed Audio Playback**: Resolved audio not playing issue by implementing HLS.js streaming\n- **Multi-format Support**: Handles both HLS (.m3u8) and direct streams (MP4, TS, etc.)\n- **Safari Compatibility**: Native HLS support fallback for Apple devices\n- **Auto-recovery**: Smart error handling with automatic network/media error recovery\n\n#### **UI/UX Redesign** 🎨\n- **Netflix-Style Layout**: Video player fixed at top, content scrolls below (authentic Netflix experience)\n- **Netflix Splash Screen**: Animated logo with glowing effects on app load (2.5s)\n- **Fixed Overlay Issues**: Channel cards and search bar no longer overlay video player\n- **Proper Z-Index Management**: Clean layering system prevents UI conflicts\n- **Enhanced Controls**: Smooth opacity transitions for player controls\n- **Responsive Hero Section**: Adaptive video player sizing (50vh mobile, 100vh desktop)\n- **Mobile Optimizations**: Persistent controls and touch-friendly interface\n\n#### **Advanced Player Controls** 🎮\n- **Fullscreen Mode** (F key): True fullscreen with exit controls\n- **Theater Mode** (T key): Full viewport height with scrollable content\n- **Picture-in-Picture** (P key): Float video while browsing other tabs\n- **Simplified Playback Logic**: Streamlined HLS instance management\n- **Better Volume Controls**: Clean mute/unmute functionality\n- **Loading States**: Professional loading indicators with error messages\n- **Progress Bar**: Real-time playback progress tracking\n- **Enhanced Keyboard Shortcuts**: F/T/P keys for view modes\n\n#### **Mobile Excellence** 📱\n- **Touch-Optimized Controls**: 44x44px minimum tap targets (Apple HIG compliant)\n- **3-Row Stacked Layout**: Progress, playback, and settings rows on mobile\n- **Always-Visible Controls**: No hover needed on touch devices\n- **Tap-to-Play**: Direct video tapping for play/pause\n- **Adaptive Button Sizing**: Larger play button (65px) on mobile\n- **Smart Feature Hiding**: Theater mode hidden on small screens\n- **Device Detection**: Automatic mobile initialization\n- **Comprehensive Mobile Pass**: Added dedicated mobile UX tuning and troubleshooting guidance\n\n#### **Developer Improvements** 🛠️\n- **Fixed Syntax Error**: Resolved class method positioning bug\n- **Debug Logging**: Comprehensive console logs for troubleshooting\n- **Code Validation**: Node.js syntax checking integration\n- **Test Tools**: Created test-channels.html for isolated debugging\n\n## 🎬 Features\n\n### 🎯 Core Functionality\n- **Live Streaming**: Play live TV channels from IPTV playlists with HLS.js\n- **HLS Support**: Full support for .m3u8 streams (HTTP Live Streaming)\n- **Multiple Sources**: India and Global channel playlists\n- **Channel Search**: Real-time search by name or category\n- **Category Filtering**: Browse channels by genre/type\n- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile\n\n### 🎨 Premium UI/UX\n- **Netflix-Style Interface**: Authentic dark theme with red accents\n- **Animated Splash Screen**: StreamFlix logo with glowing effects on load\n- **Hero Video Section**: Full-screen video player at top\n- **Scrollable Content**: Channel grid below video (no overlays!)\n- **Smooth Animations**: Polished transitions and hover effects\n- **Channel Cards**: Beautiful grid layout with channel logos and metadata\n- **Overlay Controls**: Elegant player controls that appear on hover\n- **Loading States**: Professional loading spinners and error messages\n- **Theater Mode**: Cinematic full-viewport viewing experience\n- **Picture-in-Picture**: Multitask while watching\n\n### 🎮 Controls \u0026 Navigation\n- **Keyboard Shortcuts**: \n  - `Space`: Play/Pause\n  - `← →`: Previous/Next Channel\n  - `↑ ↓`: Volume Control\n  - `M`: Toggle Mute\n  - `F`: Toggle Fullscreen\n  - `T`: Toggle Theater Mode\n  - `P`: Toggle Picture-in-Picture\n- **Touch Support**: Mobile-friendly touch controls with tap-to-play\n- **Volume Control**: Precise volume slider (0-100%) with mute toggle\n- **Fullscreen Mode**: One-click fullscreen viewing\n- **Theater Mode**: Full viewport height for immersive viewing\n- **Picture-in-Picture**: Float video over other windows/tabs\n- **Channel History**: Easy navigation between channels\n- **Previous/Next**: Quick channel switching with dedicated buttons\n\n## 🚀 Quick Start\n\n### 🌐 Live Access\n**Just visit**: [https://streamflix-watch.pages.dev/](https://streamflix-watch.pages.dev/)\n\nNo installation needed! Works instantly on any device.\n\n### 💻 Local Development\n\n**Prerequisites:**\n- Modern web browser (Chrome 70+, Firefox 65+, Safari 12+, Edge 79+)\n- Node.js 18+ and npm\n\n**Setup:**\n```bash\n# Clone repository\ngit clone https://github.com/chriz-3656/streamflix.git\ncd streamflix\n\n# Install dependencies\nnpm install\n\n# Start relay + web server\nnpm run dev\n\n# Open browser\n# Visit: http://localhost:8080\n```\n\n### 🖥️ Desktop App (Electron)\n\nStreamFlix can run as a native desktop app on Windows/Linux/macOS using Electron.\nThe app starts a local internal relay server automatically and loads the same StreamFlix UI from localhost.\n\n```bash\n# Install dependencies (includes Electron)\nnpm install\n\n# Launch desktop app\nnpm run desktop\n```\n\n**Create distributables**\n\n```bash\n# Build Linux packages (.AppImage + .deb)\nnpm run dist\n\n# Build Windows NSIS installer (requires Wine + working network)\nnpm run dist -- --win\n```\n\nDesktop behavior:\n- Starts local server on `127.0.0.1` with dynamic port\n- Uses local relay (`/api/relay`) for channel playback\n- Avoids browser mixed-content and cross-origin restrictions that affect normal web hosting\n\n### ☁️ Cloudflare Worker Relay (Production)\n1. Deploy the Worker in `worker/`:\n```bash\ncd worker\nnpx wrangler deploy\n```\n2. Bind a custom domain (recommended): `relay.yourdomain.com`.\n3. Update relay base in app HTML:\n   - `index.html` meta `streamflix-relay-base`\n   - `player.html` meta `streamflix-relay-base`\n   Example value: `https://relay.yourdomain.com`\n   Current deployed worker: `https://streamflix-relay.chrizmonsaji.workers.dev`\n\n## 🎯 Usage\n\n### Basic Operations\n- **Select Channel**: Click any channel card to start streaming\n- **Search Channels**: Use the search bar to find specific channels\n- **Filter Categories**: Use the dropdown to browse by category\n- **Change Playlist**: Switch between India and Global channels\n- **Volume Control**: Click volume icon or use slider to adjust audio\n- **Fullscreen**: Hover over video and click fullscreen button\n\n### Keyboard Controls\n- **Spacebar**: Play/Pause current channel\n- **← →**: Navigate Previous/Next Channel\n- **↑ ↓**: Increase/Decrease Volume\n- **M**: Toggle Mute\n- **F**: Toggle Fullscreen mode\n- **T**: Toggle Theater Mode (full viewport height)\n- **P**: Toggle Picture-in-Picture (multitasking)\n\n### Mobile Usage\n- **Tap channel cards** to start playing\n- **Tap video** to play/pause\n- **Controls always visible** - no hover needed\n- **44x44px touch targets** - Apple HIG compliant\n- **3-row stacked layout** - progress, playback, settings\n- **Larger play button** (65px) for easy access\n- **Responsive grid** adapts to screen size\n- Install as a PWA from mobile browser while Android APK is in progress\n\n## 📁 Project Structure\n\n```\nstreamflix/\n├── index.html                # Homepage (hero, rows, search, channel grid)\n├── player.html               # Dedicated player page (video + sidebar)\n├── splash-preview.html       # Isolated splash screen preview\n├── download.html             # Download center for desktop installers + APK status\n├── test-channels.html        # Debugging tool for playlist testing\n├── css/\n│   └── netflix-style.css     # Unified Netflix-style UI + responsive system\n├── js/\n│   ├── homepage.js           # Homepage data/render logic + navigation\n│   ├── netflix-player.js     # Core player logic (HLS.js, sidebar, controls)\n│   └── pwa-register.js       # Service worker registration\n├── worker/                   # Cloudflare Worker relay template\n│   ├── wrangler.toml\n│   └── src/index.js\n├── assets/                   # App icons (favicon + Android/iOS install icons)\n├── manifest.webmanifest      # PWA manifest\n├── sw.js                     # Service worker (app shell cache)\n├── 404.html                  # Error page\n├── _routes.json              # Cloudflare routing config\n├── package.json              # Project metadata\n└── README.md                 # This file\n```\n\n## 🛠️ Technical Details\n\n### Technology Stack\n- **Frontend**: Pure HTML5, CSS3, Vanilla JavaScript (No frameworks!)\n- **Backend**: Node.js + Express relay server\n- **Streaming**: HLS.js v1.5+ for HLS stream support\n- **Video**: HTML5 `\u003cvideo\u003e` element\n- **Icons**: Font Awesome 6.4.0\n- **Fonts**: Google Fonts (Poppins)\n- **Deployment**: Node host (for relay) + optional CDN/static edge\n\n### Supported Formats\n- **Playlist Format**: M3U/M3U8 (EXTINF metadata parsing)\n- **Streaming Protocols**: HLS (.m3u8), Direct HTTP streams (MP4, TS)\n- **Video Codecs**: H.264, H.265 (HEVC)\n- **Audio Codecs**: AAC, MP3\n\n### Browser Support\n| Browser | Version | HLS Support |\n|---------|---------|-------------|\n| Chrome | 70+ | HLS.js |\n| Firefox | 65+ | HLS.js |\n| Safari | 12+ | Native HLS |\n| Edge | 79+ | HLS.js |\n| Mobile Safari | iOS 12+ | Native HLS |\n| Chrome Mobile | Latest | HLS.js |\n\n### Performance\n- **Lightweight**: ~40KB total code size (uncompressed)\n- **No NPM Dependencies**: Pure browser APIs\n- **Efficient Memory**: Smart HLS instance cleanup\n- **Fast Loading**: Minimal external resources\n- **Auto-recovery**: Network error handling with retry logic\n- **GPU Accelerated**: CSS transforms for smooth animations\n\n## 🔧 Customization\n\n### Adding New Playlists\nModify the `playlists` object in `js/netflix-player.js`:\n```javascript\nthis.playlists = {\n    india: 'https://iptv-org.github.io/iptv/countries/in.m3u',\n    global: 'https://iptv-org.github.io/iptv/index.m3u',\n    custom: 'your-custom-playlist-url.m3u'\n};\n```\n\n### Styling Changes\nEdit `css/netflix-style.css` to customize:\n```css\n:root {\n    --netflix-black: #141414;\n    --netflix-red: #e50914;\n    --netflix-gray: #808080;\n    /* Customize your theme colors */\n}\n```\n\n### HLS.js Configuration\nAdjust HLS.js settings in `loadChannel()` function:\n```javascript\nconst hls = new Hls({\n    enableWorker: true,\n    lowLatencyMode: false,\n    backBufferLength: 90\n    // Add more HLS.js options\n});\n```\n\n## 📱 Mobile Features\n\n### Touch Optimizations\n- Larger tap targets (min 44x44px - Apple HIG compliant)\n- Persistent controls (always visible on touch devices)\n- Tap-to-play on video element\n- 3-row stacked control layout (progress/playback/settings)\n- Enlarged play button (65x65px vs 60x60px desktop)\n- Swipe-friendly card layout\n- Adaptive grid layouts (2-6 columns)\n- Theater mode hidden on mobile (not useful on small screens)\n- PiP button conditionally hidden on \u003c480px screens\n\n### Responsive Breakpoints\n- **Desktop**: 1200px+ (6 columns grid)\n- **Tablet**: 768-1199px (4 columns grid)\n- **Mobile**: \u003c768px (2-3 columns, stacked controls)\n- **Small Mobile**: \u003c480px (2 columns, minimal buttons)\n\n### Performance\n- Reduced animations on mobile\n- Efficient resource loading\n- Battery-friendly operation\n- Adaptive video quality\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n#### 1. **No Audio / Video Plays but No Sound**\n   ✅ **Fixed in v2.0!** HLS.js now properly handles audio tracks\n   - Ensure volume is not at 0%\n   - Click volume/mute icon to unmute\n   - Check browser console for errors\n\n#### 2. **Channels Not Loading**\n   - Check internet connection\n   - Verify playlist URLs are accessible\n   - Some streams may be geo-restricted\n   - Open Console (F12) to see error details\n\n#### 3. **Channel Cards Overlay Video**\n   ✅ **Fixed in v2.0!** Proper z-index and layout structure\n   - Clear browser cache if issue persists\n   - Video is now fixed at top, content scrolls below\n\n#### 4. **HLS Streams Not Playing**\n   ✅ **Fixed in v2.0!** HLS.js integration complete\n   - HLS.js automatically handles .m3u8 streams\n   - Safari uses native HLS support\n   - Check Console for \"HLS Manifest parsed\" message\n\n#### 5. **Mobile Playback Problems**\n   - Ensure sufficient bandwidth (3G+ recommended)\n   - Close other streaming applications\n   - Try different network connection\n   - Controls are persistent on mobile\n   - Check latest release notes and known issues section for mobile-specific guidance\n\n#### 6. **Channels Not Loading / Syntax Errors**\n   ✅ **Fixed in v2.1!** JavaScript syntax error resolved\n   - Hard refresh browser: Ctrl+Shift+R (Win) or Cmd+Shift+R (Mac)\n   - Clear browser cache if issue persists\n   - Check Console for \"Player initialized\" message\n   - Use test-channels.html for isolated debugging\n\n### Browser Console Debugging\nOpen Developer Tools (F12) and check console for:\n- ✅ \"🎬 StreamFlix Player Initializing...\"\n- ✅ \"Player initialized\"\n- ✅ \"📡 Loading india playlist...\"\n- ✅ \"✅ Parsed XXX valid channels\"\n- ✅ \"🎨 Rendering XXX channels to grid\"\n- ✅ \"Using HLS.js\" (when playing channel)\n- ✅ \"HLS Manifest parsed, playing...\"\n\n## 🚀 Deployment\n\n### 🌐 Live Production\n**Current Deployment**: [https://streamflix-watch.pages.dev/](https://streamflix-watch.pages.dev/)\n- Hosted on **Cloudflare Pages**\n- Auto-deploys on push to `main` branch\n- Global CDN with edge caching\n- Zero-configuration static hosting\n\n### Cloudflare Pages (Recommended)\nThis project is optimized for Cloudflare Pages:\n\n1. Connect your GitHub repository to Cloudflare Pages\n2. Build settings: **None** (static site, no build step)\n3. Output directory: `/` (root)\n4. Auto-deploys on push to `main` branch\n5. Custom domain supported\n\n### GitHub Pages\n```bash\n# Enable GitHub Pages in repository settings\n# Set source to main branch, / (root)\n# Access at: https://chriz-3656.github.io/streamflix\n```\n\n### Manual Deployment\nUpload these files to any static hosting:\n- `index.html`, `splash-preview.html`, `test-channels.html`\n- `css/` directory\n- `js/` directory\n- `assets/` directory (if any)\n- `404.html`\n- `_routes.json` (for Cloudflare routing)\n\n## 📊 Changelog\n\n### Version 2.5 (February 18, 2026) - Current\n- ✅ **YouTube Live Support** – Added native support for playing YouTube videos and live streams directly within the player.\n- ✅ **Play Custom URL** – New feature allowing users to input and play any custom stream URL (HLS, MP4, YouTube).\n- ✅ **Smart Relay Fallback** – Automatically detects when a direct stream connection fails (e.g., due to CORS or mixed content) and seamlessly switches to the internal relay for playback.\n- ✅ **Browser Identity Masquerading** – The relay now uses a modern browser User-Agent and proper Origin/Referer headers, preventing upstream servers from blocking the proxy.\n- ✅ **Enhanced HTTPS Support** – Solves the \"green lock\" issue where secure sites couldn't play insecure HTTP streams. The player now intelligently routes these through the relay.\n- ✅ **Desktop Compatibility Boost** – Electron app now runs with relaxed web security, allowing a wider range of streams to play natively without needing the relay.\n\n### Version 2.3 (February 14, 2026)\n- ✅ **Native Relay Desktop Build** – The Electron bundle now launches `lib/streamflix-app.js`, proxies every upstream stream through `http://127.0.0.1:\u003cport\u003e/api/relay`, and rewrites nested HLS URLs so the renderer only talks to localhost.\n- ✅ **Windows Installer** – `npm run dist -- --win` produces `streamflix Setup 2.3.0.exe` (NSIS installer) on top of the Linux `.AppImage`/`.deb` artifacts.\n- ✅ **Branded Icons** – Added high-resolution StreamFlix icons so the Linux/Windows packages carry the new visual identity.\n- ✅ **Playlist/Relay Sync** – The homepage \u0026 player share metadata (`channel`, `stream`, `logo`) and the player uses the relay for status probes to ensure deterministic playback across both web and desktop.\n- ✅ **Platform Notes** – Shipping the existing web UI via a localhost relay mimics VLC-like streaming while avoiding CORS/mixed-content limitations.\n- ✅ **Download Center** – Added `download.html` with direct Windows/Linux release links and installation instructions.\n- ✅ **Android Coming Soon** – Added Android APK placeholder/status block and roadmap notes in the download center.\n\n### Version 2.1 (February 10, 2026)\n- ✅ **Fixed JavaScript Syntax Error** - Channels now load properly\n- ✅ **Added Netflix Splash Screen** - Animated logo on app load (2.5s)\n- ✅ **Advanced Player Controls** - Fullscreen, Theater Mode, Picture-in-Picture\n- ✅ **Mobile Excellence** - 3-row stacked layout, 44px touch targets\n- ✅ **Tap-to-Play** - Direct video tapping on mobile\n- ✅ **Keyboard Shortcuts** - F/T/P keys for view modes\n- ✅ **Debug Logging** - Comprehensive console logs with emojis\n- ✅ **Mobile Guide** - Completed mobile-focused documentation and optimization pass\n- ✅ **Test Tools** - Added test-channels.html for debugging\n- ✅ **Live Deployment** - Published to Cloudflare Pages\n- 🔧 **Code Cleanup** - Fixed class method positioning bug\n\n### Version 2.0 (February 5, 2026)\n- ✅ Added HLS.js library for proper HLS streaming\n- ✅ Fixed audio playback issues\n- ✅ Redesigned UI layout (video top, content below)\n- ✅ Fixed z-index overlay issues\n- ✅ Improved error handling and auto-recovery\n- ✅ Enhanced mobile responsiveness\n- ✅ Simplified player logic\n- ✅ Cleaned up volume controls\n- 🗑️ Removed unused documentation files\n\n### Version 1.0 (January 20, 2026)\n- 🎉 Netflix-style IPTV player\n- 📺 M3U playlist support\n- 🔍 Search and filtering\n- 📱 Responsive design\n- ⌨️ Keyboard shortcuts\n\n## 🤝 Contributing\n\nContributions are welcome! Areas for improvement:\n\n- [ ] Playlist management (add/remove custom playlists)\n- [ ] Favorites system (save favorite channels to localStorage)\n- [ ] Watch history tracking with resume playback\n- [ ] Quality selection (auto/720p/1080p for adaptive streams)\n- [ ] Chromecast support for TV casting\n- [ ] EPG (Electronic Program Guide) integration\n- [ ] Subtitle/closed caption support\n- [x] ✅ PWA manifest for \"Add to Home Screen\" (completed v2.3)\n- [x] ✅ Picture-in-Picture mode (completed v2.1)\n- [x] ✅ Fullscreen mode (completed v2.1)\n- [x] ✅ Theater mode (completed v2.1)\n- [x] ✅ Mobile optimization (completed v2.1)\n- [x] ✅ YouTube \u0026 Custom URL support (completed v2.5)\n\n## ⚠️ Disclaimer\n\nThis player is for **educational purposes only**. Please ensure you have proper authorization to access any IPTV content you stream. The playlist sources used are from publicly available repositories (IPTV-org).\n\n**We do not host, distribute, or provide any IPTV content.**\n\n## 📄 License\n\nMIT License - Feel free to modify and distribute.\n\n## 🙏 Acknowledgments\n\n- **Netflix** for UI/UX inspiration\n- **IPTV-org** for open playlist sources\n- **HLS.js** team for the excellent streaming library\n- **Font Awesome** for icon library\n- **Google Fonts** for Poppins typography\n- All contributors and users of StreamFlix\n\n## 📞 Support\n\nFound a bug or have a feature request?\n- 🐛 **Open an issue** on [GitHub Issues](https://github.com/chriz-3656/streamflix/issues)\n- 📖 **Check existing issues** before creating new ones\n- 🔍 **Provide browser console logs** (F12) for bug reports\n- 📱 **Mobile issues**: include device model + browser version in bug report\n- 🧪 **Use test-channels.html** for debugging playlist loading\n\n## 🔗 Links\n\n- 🌐 **Live Demo**: [https://streamflix-watch.pages.dev/](https://streamflix-watch.pages.dev/)\n- 💻 **GitHub Repository**: [https://github.com/chriz-3656/streamflix](https://github.com/chriz-3656/streamflix)\n- ⬇️ **Download Page**: [https://streamflix-watch.pages.dev/download.html](https://streamflix-watch.pages.dev/download.html)\n- 🏷️ **Latest Release**: [https://github.com/chriz-3656/streamflix/releases/tag/v2.3.0](https://github.com/chriz-3656/streamflix/releases/tag/v2.3.0)\n- 🔬 **Test Tool**: [test-channels.html](test-channels.html)\n- 🎬 **Splash Preview**: [splash-preview.html](splash-preview.html)\n\n---\n\n**Made with ❤️ for premium IPTV streaming experience**\n\n[![GitHub](https://img.shields.io/github/license/chriz-3656/streamflix)](LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/chriz-3656/streamflix)](https://github.com/chriz-3656/streamflix/stargazers)\n[![HLS.js](https://img.shields.io/badge/HLS.js-v1.5+-blue)](https://github.com/video-dev/hls.js)\n[![Live Demo](https://img.shields.io/badge/Live-Demo-success)](https://streamflix-watch.pages.dev/)\n[![Cloudflare Pages](https://img.shields.io/badge/Deployed%20on-Cloudflare%20Pages-orange)](https://pages.cloudflare.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchriz-3656%2Fstreamflix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchriz-3656%2Fstreamflix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchriz-3656%2Fstreamflix/lists"}