// ===== Teuanjai Radio — shared UI primitives ===== const { useState, useEffect, useRef, useMemo } = React; // Simple line icons (stroke). Only geometric primitives — safe to hand-draw. function Icon({ name, size = 22, stroke = 2 }) { const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", }; switch (name) { case "play": return ; case "pause": return ; case "prev": return ; case "next": return ; case "library":return ; case "clock": return ; case "logout": return ; case "chevron-down": return ; case "check": return ; case "user": return ; case "wave": return ; case "globe": return ; case "spark": return ; case "dot": return ; case "volume": return ; case "mute": return ; case "sun": return ; case "sunset": return ; case "moon": return ; default: return null; } } // Cover art — pastel gradient w/ soft sheen + tiny EQ glyph function Cover({ track, size = 56, radius = 16, playing = false }) { const g = track ? track.g : ["#9CC2F2", "#A9E6DA"]; return (
); } // Animated equalizer bars function EQ({ playing = true, bars = 5, h = 22, w = 3, gap = 3, color = "var(--accent)" }) { const delays = [0, 0.25, 0.5, 0.15, 0.4, 0.32, 0.1]; return (
{Array.from({ length: bars }).map((_, i) => ( ))}
); } // Big circular progress ring used in Now Playing function ProgressRing({ progress = 0, size = 250, stroke = 6, children }) { const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const off = c * (1 - Math.min(1, Math.max(0, progress))); return (
{children}
); } // thin progress bar function Bar({ progress = 0, h = 5 }) { return (
); } // pill chip function Chip({ children, tone = "soft" }) { const styles = tone === "solid" ? { background: "linear-gradient(120deg, var(--accent), var(--accent-2))", color: "#fff" } : { background: "oklch(1 0 0 / 0.6)", color: "var(--ink-soft)", border: "1px solid var(--glass-line)" }; return {children}; } // keyframes injected once (function injectKeyframes() { if (document.getElementById("tj-kf")) return; const s = document.createElement("style"); s.id = "tj-kf"; s.textContent = ` @keyframes eq { 0%,100%{transform:scaleY(0.3)} 50%{transform:scaleY(1)} } @keyframes pop { 0%{transform:scale(0.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} } @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 oklch(0.7 0.12 200 / 0.35)} 50%{box-shadow:0 0 0 10px oklch(0.7 0.12 200 / 0)} } @keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} } @keyframes livedot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} } @keyframes flow { from{background-position:0 0} to{background-position:40px 0} } @media (prefers-reduced-motion: reduce){ @keyframes eq {0%,100%{transform:scaleY(0.6)}} } `; document.head.appendChild(s); })(); // Live ring — faint full ring + slowly rotating accent arc (no "end") function LiveRing({ size = 244, stroke = 7, isPlaying = true, children }) { const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const arc = c * 0.28; // ~100deg visible arc return (
{children}
); } // pulsing "ถ่ายทอดสด" pill function LivePill({ playing = true }) { return (
ถ่ายทอดสด
); } Object.assign(window, { Icon, Cover, EQ, ProgressRing, LiveRing, LivePill, Bar, Chip, useState, useEffect, useRef, useMemo });