/* macOS Moonlight app mockup — closer to the real design, with real audio playback */ const { useState, useRef, useEffect, useCallback } = React; // ---------- Icons (minimal stroke / fill) ---------- const Ico = { nowPlaying: ( ), albums: ( ), artist: ( ), songs: ( ), favorite: ( ), composer: ( ), genres: ( ), playlist: ( ), sidebar: ( ), plus: ( ), search: ( ), play: ( ), pause: ( ), prev: ( ), next: ( ), shuffle: ( ), repeat: ( ), queue: ( ), airplay: ( ), speaker: ( ), backArrow: ( ), fwdArrow: ( ), }; // ---------- Album cover (CSS art) ---------- function AlbumCover({ hue1, hue2, motif = "discs", className = "cover", style }) { const motifs = { discs: ( <>
), bars: (
{[0.4,0.7,0.3,0.85,0.55,0.95,0.45,0.6,0.35,0.75].map((h,i)=>(
))}
), wave: ( ), moon: (
), star: ( ), pillar: (
), cross: ( <>
), arc: ( ), portrait: ( <> {/* abstract portrait silhouette */}
), landscape: ( <>
), }; return (
{motifs[motif] || motifs.discs}
); } // Albums modeled to mirror the user's screenshot const ALBUMS = [ { title: "20th Century French Wind Trios", artist: "The Chicago Chamber Musi…", h1:"#5a78a8", h2:"#1f2940", motif:"pillar" }, { title: "Alexandre Tharaud Plays Scarlatti", artist: "Alexandre Tharaud", h1:"#c6512d", h2:"#4a1408", motif:"portrait" }, { title: "Bach, Handel, Scarlatti: G…", artist: "Steven Isserlis", h1:"#3a3a44", h2:"#15151c", motif:"portrait" }, { title: "Bach: French Overture, Ita…", artist: "Angela Hewitt", h1:"#7c9a6a", h2:"#1f2c1a", motif:"landscape" }, { title: "Bach: Goldberg Variations…", artist: "Murray Perahia", h1:"#2f3f6a", h2:"#0e1430", motif:"portrait" }, { title: "Bach: Keyboard Concertos", artist: "Murray Perahia, Academy of…", h1:"#dbe1ea", h2:"#6b748a", motif:"portrait" }, { title: "Bach: The Art Of Life", artist: "Daniil Trifonov", h1:"#a7b394", h2:"#3a3f2a", motif:"landscape" }, { title: "Bach: The Well-Tempered…", artist: "Glenn Gould", h1:"#e2e2e0", h2:"#7d7c78", motif:"discs" }, { title: "Bach: Violin Concertos", artist: "Hilary Hahn, Jeffrey Kahane,…", h1:"#5a83a8", h2:"#1d2c44", motif:"portrait" }, { title: "Bach: Well Tempered Clavi…", artist: "András Schiff", h1:"#7a2920", h2:"#2a0c08", motif:"wave" }, { title: "Barber & Meyer: Violin Co…", artist: "Hilary Hahn, Hugh Wolff, Sai…", h1:"#b8893a", h2:"#3a2a14", motif:"landscape" }, { title: "Bartók: Concerto for orch…", artist: "Susanna Mälkki, Helsinki Phil…", h1:"#a8392a", h2:"#3a100a", motif:"bars" }, ]; // Format seconds → m:ss function fmtTime(s) { if (!isFinite(s) || s < 0) s = 0; const m = Math.floor(s / 60); const sec = Math.floor(s % 60); return `${m}:${sec.toString().padStart(2, "0")}`; } // Parse "Artist - Title.ext" if possible function parseFileName(name) { const base = name.replace(/\.[^.]+$/, ""); if (base.includes(" - ")) { const [a, ...rest] = base.split(" - "); return { artist: a.trim(), title: rest.join(" - ").trim() }; } return { artist: "", title: base }; } // ---------- The mockup ---------- function MacOSMockup() { // Audio state const audioRef = useRef(null); const fileInputRef = useRef(null); // Default placeholder track — matches the real app's idle state const DEFAULT_TRACK = { title: "The Well‑Tempered Clavier, Book I: Prel…", artist: "András Schiff", url: null, hue1: "#7a2920", hue2: "#2a0c08", motif: "wave", placeholder: true, }; const [track, setTrack] = useState(DEFAULT_TRACK); const [playing, setPlaying] = useState(false); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [volume, setVolume] = useState(0.7); const [shuffle, setShuffle] = useState(false); const [repeat, setRepeat] = useState(false); const [dragging, setDragging] = useState(false); const sidebar = [ { group: "Library", items: [ { ico: "nowPlaying", label: "Now Playing" }, { ico: "albums", label: "Albums", active: true }, { ico: "artist", label: "Artists" }, { ico: "songs", label: "Songs" }, { ico: "favorite", label: "Favorites" }, { ico: "composer", label: "Composers" }, { ico: "genres", label: "Genres" }, ]}, { group: "Playlists", plus: true, items: [ { ico: "playlist", label: "Ttest" }, ]}, ]; // ---------- Audio plumbing ---------- const loadFile = useCallback((file) => { if (!file || !file.type.startsWith("audio/")) return; const url = URL.createObjectURL(file); const { title, artist } = parseFileName(file.name); // Try ID3 via shake — not loading a parser, so fall back to filename setTrack(prev => { if (prev?.url) URL.revokeObjectURL(prev.url); return { title, artist: artist || "Local file", url, name: file.name, // Carry over chosen cover if the user picked one via an album tile hue1: prev?.hue1 || "#5a4a8a", hue2: prev?.hue2 || "#241b3e", motif: prev?.motif || "discs", placeholder: false, }; }); // auto-play requestAnimationFrame(() => { if (audioRef.current) { audioRef.current.src = url; audioRef.current.volume = volume; audioRef.current.play().catch(()=>{}); } }); }, [volume]); const openPicker = () => fileInputRef.current?.click(); const togglePlay = () => { if (!track || track.placeholder || !track.url) { openPicker(); return; } const a = audioRef.current; if (!a) return; if (a.paused) a.play().catch(()=>{}); else a.pause(); }; // Wire audio element events useEffect(() => { const a = audioRef.current; if (!a) return; const onPlay = () => setPlaying(true); const onPause = () => setPlaying(false); const onTime = () => setCurrentTime(a.currentTime); const onDur = () => setDuration(a.duration || 0); const onEnd = () => { if (repeat) { a.currentTime = 0; a.play().catch(()=>{}); } else setPlaying(false); }; a.addEventListener("play", onPlay); a.addEventListener("pause", onPause); a.addEventListener("timeupdate", onTime); a.addEventListener("loadedmetadata", onDur); a.addEventListener("durationchange", onDur); a.addEventListener("ended", onEnd); return () => { a.removeEventListener("play", onPlay); a.removeEventListener("pause", onPause); a.removeEventListener("timeupdate", onTime); a.removeEventListener("loadedmetadata", onDur); a.removeEventListener("durationchange", onDur); a.removeEventListener("ended", onEnd); }; }, [repeat]); useEffect(() => { if (audioRef.current) audioRef.current.volume = volume; }, [volume]); // Scrubber click/drag → seek const seekFromEvent = (e, el) => { const rect = el.getBoundingClientRect(); const pct = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)); if (audioRef.current && duration) audioRef.current.currentTime = pct * duration; }; // Volume click → set const volFromEvent = (e, el) => { const rect = el.getBoundingClientRect(); const pct = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)); setVolume(pct); }; // Drag-and-drop const onDragOver = (e) => { e.preventDefault(); setDragging(true); }; const onDragLeave = (e) => { // only set false when leaving the actual mockup window if (e.target === e.currentTarget) setDragging(false); }; const onDrop = (e) => { e.preventDefault(); setDragging(false); const f = e.dataTransfer.files?.[0]; if (f) loadFile(f); }; // Keyboard space → play/pause (when focused) // Skip — could interfere with page scrolling. const progressPct = duration ? (currentTime / duration) : 0; // Click on an album tile: remember its colors for the now-playing art, then open picker. const onAlbumClick = (album) => { setTrack(t => ({ ...(t || {}), hue1: album.h1, hue2: album.h2, motif: album.motif, // Tentatively show the album as the placeholder until a real file is loaded title: t?.placeholder ? album.title : t?.title || album.title, artist: t?.placeholder ? album.artist : t?.artist || album.artist, placeholder: t?.placeholder ? true : t?.placeholder, })); openPicker(); }; return (
{/* Hidden audio + file input */}