/* global React */ const { useState, useEffect, useRef, useMemo } = React; // ============ ICONS ============ const Icon = ({ name, size = 18, className = "", style }) => { const paths = { play: , pause: , prev: , next: , shuffle: , repeat: , heart: , heartOutline: , plus: , bell: , search: , chevDown: , chevLeft: , chevRight: , arrowRight: , share: , verified: , volume: , settings: , home: , library: , list: , user: , moreH: , lyrics: , eq: , sparkles: , clock: , download: , }; return ( ); }; // ============ BRAND LOGO ============ const Logo = ({ size = 22, color = "var(--accent)" }) => ( ); // ============ PLACEHOLDER COVER ART ============ const Placeholder = ({ variant = "stage", label, style }) => { // variants render different cinematic scenes with css/svg const presets = { stage: { bg: "linear-gradient(180deg,#1a1a20,#0a0a0c)", silhouetteIdx: 0 }, crowd: { bg: "linear-gradient(180deg,#1c1c22,#0c0c10)", silhouetteIdx: 1 }, drive: { bg: "linear-gradient(180deg,#15151a,#08080a)", silhouetteIdx: 2 }, guitar: { bg: "linear-gradient(180deg,#181820,#08080c)", silhouetteIdx: 3 }, industrial:{bg: "linear-gradient(180deg,#1a1820,#0a080c)", silhouetteIdx: 4 }, fog: { bg: "linear-gradient(180deg,#20181a,#0c0a0c)", silhouetteIdx: 5 }, iron: { bg: "linear-gradient(180deg,#18181c,#0a0a0e)", silhouetteIdx: 6 }, mic: { bg: "linear-gradient(180deg,#1a1a1f,#08080c)", silhouetteIdx: 0 }, chaos: { bg: "linear-gradient(180deg,#1c1820,#0c080e)", silhouetteIdx: 1 }, }; const p = presets[variant] || presets.stage; return (

{label &&

{label}

}

); }; const TrackArt = ({ track, variant = "stage" }) => { if (track && track.artUrl) { return (

); } return ; }; const Silhouette = ({ idx = 0 }) => { // simple abstract silhouettes (vocalist / crowd / car / guitarist / building / fog / weights / drums) const silhouettes = [ // 0 vocalist , // 1 crowd , // 2 car , // 3 guitarist , // 4 building/industrial , // 5 mic stand fog , // 6 weights / iron , ]; return silhouettes[idx % silhouettes.length]; }; // ============ TOP NAV ============ const TopNav = ({ active, onNav, accentDot, accountMode = "preview", currentTrack }) => { const links = ["Home", "Browse", "Playlists"]; return (

VIRAL TENSION

{links.map(l => ( ))}

); }; const MobileBottomNav = ({ active, onNav }) => { const items = [ { label: "Home", page: "Home", icon: "home" }, { label: "Browse", page: "Browse", icon: "search" }, { label: "Playlists", page: "Playlists", icon: "list" }, { label: "Account", page: "Account", icon: "user" }, ]; return ( ); }; // ============ BOTTOM PLAYER ============ const Player = ({ track, isPlaying, setPlaying, previewSeconds = 30, isLiked = false, onToggleLike, onNextTrack, onPrevTrack }) => { const audioRef = useRef(null); const [progress, setProgress] = useState(0); const [duration, setDuration] = useState(track.duration || 0); // animated wave const bars = 80; const waveBars = useMemo(() => { return Array.from({ length: bars }).map((_, i) => { const seed = Math.sin(i * 1.3) * 0.5 + Math.cos(i * 0.6) * 0.5; return 0.2 + Math.abs(seed) * 0.8; }); }, []); useEffect(() => { const audio = audioRef.current; if (!audio) return; if (isPlaying) { audio.play().catch(() => setPlaying(false)); } else { audio.pause(); } }, [isPlaying, track.audioUrl]); useEffect(() => { const audio = audioRef.current; if (!audio) return; audio.currentTime = 0; setProgress(0); setDuration(track.duration || 0); if (isPlaying) audio.play().catch(() => setPlaying(false)); }, [track.id]); useEffect(() => { const pageTitle = `${track.title} — VIRAL TENSION`; document.title = pageTitle; if (!("mediaSession" in navigator) || !window.MediaMetadata) return; const brandArtwork = "assets/viral-tension-profile-square.jpg"; navigator.mediaSession.metadata = new MediaMetadata({ title: track.title, artist: "VIRAL TENSION", album: "VIRAL TENSION", artwork: [ { src: brandArtwork, sizes: "512x512", type: "image/jpeg" }, { src: brandArtwork, sizes: "1024x1024", type: "image/jpeg" }, ], }); }, [track.id, track.title, track.artUrl]); const handleTimeUpdate = () => { const audio = audioRef.current; if (!audio) return; const realDuration = audio.duration && Number.isFinite(audio.duration) ? audio.duration : track.duration || 0; setDuration(realDuration); setProgress(realDuration ? audio.currentTime / realDuration : 0); if (previewSeconds && audio.currentTime >= previewSeconds) { audio.pause(); setPlaying(false); audio.currentTime = previewSeconds; } }; const seekTo = (event) => { const audio = audioRef.current; if (!audio || !duration) return; const rect = event.currentTarget.getBoundingClientRect(); const nextProgress = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)); audio.currentTime = nextProgress * duration; setProgress(nextProgress); }; const playedIdx = Math.floor(progress * bars); return (

); }; const fmtTime = (s) => { const m = Math.floor(s / 60); const ss = Math.floor(s % 60).toString().padStart(2, "0"); return `${m}:${ss}`; }; Object.assign(window, { Icon, Logo, Placeholder, TrackArt, Silhouette, TopNav, MobileBottomNav, Player, fmtTime });