// components.jsx — UI building blocks. Reads app context from window.PFCtx.
(function () {
const { useContext } = React;
const useApp = () => useContext(window.PFCtx);
const { Icon } = window;
// brand colors for streaming services
const SERVICES = [
{ key: 'spotify', label: 'Spotify', color: '#1DB954', glyph: 'S' },
{ key: 'apple', label: 'Apple', color: '#FA243C', glyph: '' },
{ key: 'yt', label: 'YT Music', color: '#FF0000', glyph: '▶' },
{ key: 'amazon', label: 'Amazon', color: '#25D1DA', glyph: 'a' },
];
function serviceUrl(key, track) {
const q = encodeURIComponent(`${track.artist} ${track.title}`);
switch (key) {
case 'spotify': return `https://open.spotify.com/search/${q}`;
case 'apple': return `https://music.apple.com/jp/search?term=${q}`;
case 'yt': return `https://music.youtube.com/search?q=${q}`;
case 'amazon': return `https://music.amazon.co.jp/search/${q}`;
default: return '#';
}
}
window.serviceUrl = serviceUrl;
// deterministic 2-hue from a string
function hashHue(s) {
let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 360;
return h;
}
function hashInt(s) {
let h = 0; for (let i = 0; i < s.length; i++) h = (h * 131 + s.charCodeAt(i)) >>> 0;
return h;
}
function RetroCover({ track, size = 64, radius = 12 }) {
const n = hashInt(track.id);
const palettes = [
{ sky: '#e7c45a', sun: '#df5b3b', ink: '#284440', cloud: '#f6efd2' },
{ sky: '#8fc7bd', sun: '#e0795a', ink: '#1f5a63', cloud: '#f2efe0' },
{ sky: '#e7b34a', sun: '#d8442f', ink: '#2d2a4a', cloud: '#f6efd2' },
{ sky: '#bba6d6', sun: '#e86a92', ink: '#3a2f6b', cloud: '#fbf3df' },
{ sky: '#9ec9cf', sun: '#d8442f', ink: '#1d3a57', cloud: '#eef4ec' },
{ sky: '#e2a06b', sun: '#f0c14b', ink: '#5a2f3a', cloud: '#f6efd2' },
];
const p = palettes[n % palettes.length];
const motif = Math.floor(n / 7) % 3;
const night = motif === 1;
const bg = night ? p.ink : p.sky;
const orb = night ? p.cloud : p.sun;
const cx = 32 + (n % 5) * 8;
const oy = 36;
const rays = [];
for (let i = 0; i < 8; i++) { const a = i * Math.PI / 4; rays.push([cx + Math.cos(a) * 22, oy + Math.sin(a) * 22, cx + Math.cos(a) * 28, oy + Math.sin(a) * 28]); }
const stars = [[18, 16], [70, 12], [84, 30], [30, 40], [58, 24], [12, 34]];
return (
);
}
// ── Album cover (generated, vinyl motif) ─────────────────────
function Cover({ track, size = 64, radius = 12 }) {
const app = useApp();
if (app && app.theme && app.theme.coverStyle === 'retro') return ;
const h = hashHue(track.id);
const h2 = (h + 48) % 360;
const disc = Math.round(size * 0.62);
return (
);
}
// ── Equalizer (playing indicator) ────────────────────────────
function Equalizer({ color = '#fff', size = 16, playing = true }) {
const bars = [0, 1, 2, 3];
return (
);
}
// ── Avatar ───────────────────────────────────────────────────
function Avatar({ user, size = 44 }) {
const app = useApp();
const u = typeof user === 'string' ? app.users[user] : user;
const init = (u.name || '?').trim().charAt(0);
return (
);
}
// ── Name line (name + badges + handle + time) ────────────────
function NameLine({ user, time, app }) {
const u = typeof user === 'string' ? app.users[user] : user;
const accent = app.theme.accent;
return (
{u.name}
{u.papa && }
{u.passed && !u.papa && (
合格
)}
@{u.handle}
{time && · {time}}
);
}
// ── Track card (cover + meta + service links + play) ─────────
function TrackCard({ track, compact = false }) {
const app = useApp();
const T = app.theme;
const playing = app.nowPlaying && app.nowPlaying.id === track.id;
return (
{ e.stopPropagation(); app.play(track); }}>
{playing ? : }
{track.title}
{playing && }
{track.artist} · {track.year}
#{track.tag}
);
}
// ── Action bar (reply / repost / like / share) ───────────────
function Actions({ post, app }) {
const T = app.theme;
const liked = app.isLiked(post.id);
const btn = (icon, label, opts = {}) => (
);
return (
{btn(, (post.replies || []).length || '', { onClick: () => app.go('detail', { id: post.id }) })}
{btn(liked ? : , app.likeCount(post),
{ onClick: () => app.like(post.id, 'post'), active: liked, activeColor: '#ff5a7a' })}
{btn(, null, { onClick: () => app.share(post) })}
);
}
// ── Post card ────────────────────────────────────────────────
function PostCard({ post, onOpen }) {
const app = useApp();
const T = app.theme;
const track = app.trackById[post.track_id];
return (
{post.text &&
{post.text}
}
{track &&
}
);
}
// ── Reply card ───────────────────────────────────────────────
function ReplyCard({ reply, app }) {
const T = app.theme;
const liked = app.isLiked(reply.id);
return (
{reply.text}
);
}
// ── App header (glass) ───────────────────────────────────────
function Header({ title, left, right, big }) {
const app = useApp();
const T = app.theme;
return (
{left}
{big ? big :
{title}
}
{right}
);
}
// ── Wordmark ─────────────────────────────────────────────────
function Wordmark({ app, size = 20 }) {
const T = app.theme;
return (
);
}
// ── Mini player ──────────────────────────────────────────────
function MiniPlayer() {
const app = useApp();
const T = app.theme;
const np = app.nowPlaying;
if (!np) return null;
const pct = Math.min(100, (app.playPos / np._dur) * 100 || 0);
return (
);
}
// ── Bottom tab bar ───────────────────────────────────────────
function TabBar() {
const app = useApp();
const T = app.theme;
const cur = app.tab;
const item = (key, IconOff, IconOn, label, badge) => {
const active = cur === key;
return (
);
};
return (
{item('home', Icon.home, Icon.homeFill, 'ホーム')}
{item('profile', Icon.person, Icon.personFill, 'あなた')}
{grid.map((id, i) => )}
);
}
Object.assign(window, {
Cover, AlbumCover, Equalizer, Avatar, NameLine, TrackCard, PostCard, ReplyCard,
Header, Wordmark, MiniPlayer, TabBar, SERVICES,
});
})();