Free app nptv Media player 2 TV stations Edition

Free app nptv Media player 2 TV stations Edition

Here is the Ultimate Design & Architecture Prompt for this application. You can copy, save, or feed this prompt to any advanced coding AI to recreate this exact, high-performance web media player and Live TV/Radio center from scratch:

Master Design Prompt: Fullscreen PWA Media Player & Live TV/Radio Center

1. Design & Visual Identity (UX/UI)

• Theme: Deep Carbon Slate (#0b0f1a / #0f172a). Modern, sleek, dark-mode-first styling with absolutely no borders, no boxes, and no heavy headers.
• Cinematic Distraction-Free Mode:
• When media is playing, if the mouse is inactive for 2 seconds, all controls, overlays, panels, and the mouse cursor must fade out completely (opacity-0), leaving only the movie.
• Controls instantly fade back in upon mouse movement or playback pause.
• Footer Controls Panel: Consolidated footer bar that houses all player keys: play, pause, stop, frame step, playback speed, timeline track, volume boost, aspect ratio, equalizer, subtitle synchronizer, and debugger.
• Interactive Overlays: All setting panels (Media, History, EQ, Subtitles, TV, Radio, Diagnostics) slide up elegantly from the footer with a frosted glass backdrop blur (backdrop-blur-md).
• Dynamic Theme Skins: A color picker in the settings page allowing the user to switch the entire application's accent color (Orange, Cyan, Emerald Green, Purple, Rose, or Amber). This must dynamically update all icons, progress bars, active borders, and visualizers globally in real-time.

2. Core Playback & Codec Pipeline (HTML5 / HLS.js / YouTube IFrame)

• Triple-Engine Viewport: Conditionally render either a native HTML5 <video> tag (for local files, MP4, WebM, MP3), an HLS.js pipeline (for adaptive IPTV .m3u8 streams), or a YouTube <iframe> embed (for live streams).
• YouTube IFrame Integration: Detect YouTube streams by their 11-character video IDs.
• Bypass standard decoding and load a secure, responsive iframe.
• Overlay a transparent click-catcher on top of the iframe to capture click-gestures for customized play/pause toggles and autohiding overlays.
• Sync play/pause, volume, and mute states using the YouTube postMessage command API.
• Multi-Stage Decoder Chain: If a network stream fails, automatically transition: HLS.js ➔ Safari Native HLS ➔ MPEG-DASH (MSE) ➔ Direct system decoders.

3. High-Fidelity Web Audio Pipeline (EQ, Delay, Compressor)

• 200% Audio Volume Boost: Implement a Web Audio API GainNode to amplify audio signals up to 200%. The volume slider should show a color-coded transition (theme-color up to 100%, red/orange for the amplified boost zone).
• 10-Band Graphic Equalizer: Connect BiquadFilter peaking nodes centered at standard frequencies (32Hz to 16kHz). Include 16 pre-programmed presets (Flat, Full Bass, Rock, Vocal, etc.) and custom sliders.
• dynamics Compressor (Clipping Protection): Add a DynamicsCompressorNode at the end of the audio graph (threshold -12dB, knee 30, ratio 12, attack 3ms, release 80ms). This must automatically compress peaks during a 200% boost, preventing speaker distortion and keeping audio crystal clear.
• Lip-Sync Audio Delay: Add a DelayNode in the pipeline to offset audio latency by 0ms to 2000ms. Map hotkeys J (decrease delay) and K (increase delay) for instant keyboard sync alignment.

4. Standalone Radio.js Center (Audio-Only Mode)

• Isolated Database: Store radio stations in a separate catalog (player-radio-stations in localStorage), completely independent of the TV Guide database.
• Audio Pipeline: Integrate a dedicated <audio> tag. When playing a radio station:
• Unload and halt all video/YouTube iframe operations completely.
• Route audio streams through the CORS proxy (https://corsproxy.io/?) to bypass browser cross-origin blocks.
• Set the viewport to a dark carbon slate, automatically launch the visualizer, and bind play/pause/mute controls to the audio element.
• Race Condition Protection: Track the audio play() Promise using a ref. When switching stations or pausing, await the active play promise before calling .pause() or changing .src to prevent browser AbortError DOM exceptions.
• Diagnostics Terminal: A dedicated, toggleable multilevel debugger inside the Radio Panel. Listen to all audio events (loadstart, playing, pause, stalled, progress, error) and output them to a scrollable console, showing buffer health and Web Audio context states.

5. Eased, High-Transparency Canvas Visualizers

• Temporal Easing (Anti-Jitter): Run a 60fps canvas loop. Interpolate current audio frequency buffers with the previous frame's values using an 0.82 easing factor. This low-pass filter completely eliminates erratic, jittery "heart attack" spikes and creates a fluid, liquid wave motion.
• High-Transparency Overlay: Clear the canvas using ctx.clearRect for vector modes and rgba(11, 15, 26, 0.08) clear-fills for trails. This leaves subtle, transparent trails that overlay beautifully on top of video playback without obstructing the movie.
• 7 Simple, Static Visualizer Styles:

1. LED 30: 30 vertical segmented towers composed of lit-only LED blocks in the theme color (unlit backgrounds are completely transparent).
2. LED 20: 20 vertical segmented towers transitioning from Green (low), Yellow (mid), to Red (high/clip).
3. Lines: 50 thin vertical stroked pure neon lines (2.5px width) growing purely vertically at fixed X-coordinates.
4. Wave: Smooth, liquid ribbon waves (overlapping sine waves oscillating at different phases).
5. Circle: A perfect, non-moving circular ring that deforms and warps fluidly to the beat, surrounded by glowing radial spokes.
6. Dual VU: Dual-channel stereo VU meters.
7. Bass Glow: Volumetric neon floor glow that flares up on heavy bass beats.

• YouTube Mock Sync: For YouTube streams (which restrict cross-origin audio analysis), generate a smart simulated beat generator syncing bass kicks to the playback speed and volume.

6. Smart Channel Scanner, CORS Auto-Healing, & Diagnostics

• CORS Auto-Healing: If an HLS or native stream fails with a manifestLoadError or MEDIA_ERR_4, automatically route the URL through https://corsproxy.io/? and reload, solving CORS blockades seamlessly in the background.
• YouTube Channel ID Live-Routing: Map TV channels using their permanent 24-character YouTube Channel IDs (UC...). Query youtube.com/embed/live?channel=CHANNEL_ID so that even if broadcasters restart their streams and change their Video IDs, the player automatically resolves and plays their active live stream!
• Background Scraper Scanner: Implement a scanner that fetches the channel page via CORS proxy, extracts the active live "videoId":"..." using regex, and updates the local state and localStorage on the fly.
• Diagnostics Panel: Provide a developer console overlay showing live logs, system capabilities, HLS quality levels, and audio graph states.
• Selectable & Copyable Text: Add the select-text CSS class to the debug console, quick diagnostics overlay, and radio terminal, allowing users to highlight, select, and copy logs or error codes easily.
• JSON Backups: Add dedicated Import/Export buttons to backup and restore TV and Radio catalogs independently.

Deployed the project