Universal Streamer - Advanced Vanilla JS Player

A professional, feature-rich streaming application built with 100% Vanilla JavaScript, HTML5, and CSS3. No frameworks required!

✨ Advanced Features

1. Hybrid Player Engine

• YouTube Support: Automatic detection and iframe embedding with autoplay
• IPTV Streams (M3U8): Full HLS.js integration for all browser compatibility
• Direct Video (MP4/WebM): Native HTML5 video player with controls
• Smart Auto-Detection: Regex-based URL parsing to determine playback mode

2. Enhanced Sidebar with Rich History

Thumbnails

• Automatic video frame capture using Canvas API
• Store thumbnails as base64 data URLs
• Display thumbnail previews in history cards
• 📸 "Capture from Video" button to grab frames while playing

Categories

• Tag streams as: 🎬 Movie, 🔴 Live, or ⚽ Sport
• Color-coded category badges on each card
• Filter and organize your library visually

Favorites

• ⭐ Star button on each history card
• Favorite items automatically pin to the top
• Persist across browser sessions

3. Picture-in-Picture (PiP)

• ⬜ Floating PiP button on video player
• Pop out videos to watch while browsing
• Works with MP4, WebM, and M3U8 streams
• Browser-native PiP API implementation

4. Professional Dark Theater Mode

• Deep charcoal background (#0a0a0a) for eye comfort
• Glassmorphism Effects: Frosted glass backdrop filters throughout
• Smooth 0.3s CSS transitions on all interactive elements
• Gradient accents: Electric Blue (#00d4ff) & Neon Purple (#b64aff)

5. Complete Persistence

• All data stored in localStorage
• History with custom names, categories, thumbnails, and favorites
• Automatic data recovery on refresh
• 15-item history limit (configurable)

📱 Responsive Design

Breakpoint	Layout
Desktop (>1200px)	75% player (left) + 25% sidebar (right) - CSS Grid
Tablet (≤768px)	Sidebar moves to bottom (35vh) - Stacked vertically
Mobile (≤480px)	Full-width responsive with touch optimization

🎬 How to Use

1. Open index.html in any modern browser
2. Paste a URL:
   • YouTube: https://www.youtube.com/watch?v=dQw4w9WgXcQ
   • M3U8/IPTV: https://example.com/stream.m3u8
   • MP4/WebM: https://example.com/video.mp4
3. Click "Play" or press Enter
4. Stream appears in history sidebar
5. Edit: Click ✏️ to rename, add category, capture thumbnail
6. Favorite: Click ☆ to pin to top
7. Picture-in-Picture: Click ⬜ to pop out video (when available)

🔧 Technical Stack

Player Engines

• HLS.js CDN: IPTV/M3U8 stream support
• YouTube Embed API: iframe-based YouTube playback
• HTML5 Video: Native MP4/WebM playback

Storage

• localStorage API: Persistent data storage
• Base64 Encoding: Canvas thumbnail serialization

UI/UX

• CSS Grid & Flexbox: Modern responsive layout
• Canvas API: Video frame capture
• Picture-in-Picture API: Browser-native PiP
• CSS Transitions: Smooth 0.3s animations

📦 File Structure

webProject/
├── index.html      # Semantic HTML structure
├── styles.css      # Professional dark theme with glassmorphism
├── script.js       # Complete vanilla JS logic
└── README.md       # This file

🚀 Key Functions

Core Playback

• playStream(url) - Main playback controller
• detectStreamMode(url) - URL type detection
• playYoutube() - YouTube iframe handler
• playHLS() - M3U8/IPTV with hls.js
• playHTML5Video() - MP4/WebM native playback

History Management

• addToHistory(url) - Add with enhanced fields
• toggleFavorite(url) - Pin/unpin streams
• renderHistory() - Sort by favorites then timestamp
• captureThumbnail() - Canvas frame extraction

UI Enhancement

• togglePictureInPicture() - PiP control
• openEditModal() - Edit modal with full options
• saveEdit() - Persist name, category, thumbnail

🎨 Color Palette

Element	Color	Usage
Background	#0a0a0a	Dark theater mode
Secondary	#151515	UI elements
Primary Accent	#00d4ff	Electric Blue highlights
Secondary Accent	#b64aff	Neon Purple gradients
Text Primary	#ffffff	Main text
Text Secondary	#a0a0a0	Muted text

⚡ Performance

• Zero external dependencies (except HLS.js CDN)
• Lightweight CSS with efficient selectors
• Optimized JavaScript with lazy evaluation
• Canvas thumbnails compressed to 70% JPEG quality
• Smooth animations using hardware-accelerated transforms

🔐 Browser Support

✅ Chrome/Edge 90+
✅ Firefox 88+
✅ Safari 14+
✅ Mobile browsers with PiP support

📝 Advanced Usage

Custom Categories

Edit getCategoryEmoji() in script.js to add new categories:

function getCategoryEmoji(category) {
    const emojis = {
        movie: '🎬',
        live: '🔴',
        sport: '⚽',
        news: '📰',  // Add new category
    };
    return emojis[category] || '📺';
}

Increase History Limit

Change MAX_HISTORY constant (default: 15):

const MAX_HISTORY = 30; // Store up to 30 items

🐛 Troubleshooting

Video won't play?

• Verify URL format (must start with http:// or https://)
• Check if stream is publicly accessible
• CORS may block some streams

Thumbnail not capturing?

• Wait for video to fully load
• Ensure video player is visible
• Cross-origin videos may prevent capture

PiP button missing?

• Browser must support Picture-in-Picture API
• Not all browsers have full PiP support
• Check browser compatibility

📄 License

Free to use and modify for personal and commercial projects.

---

Built with ❤️ using Vanilla JavaScript
No frameworks. No bloat. Pure performance.