{/* User badges from /miniapp/profile (FOUNDER / OLD / VIP / ELITE etc) */}
{Array.isArray(user.badges) && user.badges.length > 0 && (
{user.badges.map((b, i) => {
const bk = b.toLowerCase();
const col = window.TIER_COLORS?.[bk] || accent;
return (
{b.toUpperCase()}
);
})}
)}
{/* Stats row */}
{stats.map((s, i) => (
{s.val}{s.unit && {s.unit}}
{s.label}
))}
{/* Subscription card — three variants: active sub / grace / free */}
{user.isGrace ? (
Grace period
{user.graceDaysLeft} day{user.graceDaysLeft === 1 ? '' : 's'} left
Renew to keep access — your saves stay intact.
) : user.isPro ? (
Active plan
{/* Tier + days. > 9000 days is the bot's marker for a
lifetime account → show 'LIFETIME' instead of the
raw number; finite subscribers see '· N days'. */}
{/* Hide Manage when there are real days left — we don't want
the user to accidentally re-buy on top of an active sub. */}
{!(user.daysLeft > 0) && (
)}
{/* Skip the bar for lifetime — it'd just be a full strip
forever, no useful info there. */}
{user.daysLeft > 0 && user.daysLeft <= 9000 && (
)}
{/* Row list — only rows that actually work. Mock Language /
Notifications / Appearance / Support / Terms entries were
removed; they'll come back when their screens exist. */}
nav.go('saved')} />
nav.go('saved', { tab: 'playlists' })} />
nav.go('artists')} />
{/* Subscribe row only shown when the user has no remaining
days — otherwise we don't want to encourage a second
purchase on top of an active sub. */}
{!(user.daysLeft > 0) && (
nav.go('subscription')} />
)}
{/* Notifications group — only the expiry reminder for now.
Only meaningful for Pro users (a free account has nothing
to expire). Backend honours user.notify_expiry via the
scheduler. */}
{user.isPro && (
)}
nav.go('faq')} />
);
}
function RowGroup({ label, children }) {
return (
Cancel anytime · Card via Tribute · Crypto via admin
);
}
// ── FAQ PAGE ──────────────────────────────────────────────────
// Q&A copied from the live miniapp so answers stay consistent across
// both versions. If you change the live FAQ, mirror it here.
const FAQ_ITEMS = [
{ q: 'How do I access the group?', a: "After subscribing, you'll receive an invite link automatically. Just click it to join." },
{ q: 'Does it auto-renew?', a: 'Yes! Your subscription will automatically renew on the day it expires. You can cancel anytime.' },
{ q: 'Can I try for free?', a: 'Yes! New users get 5 free days. Just tap "Try Free" in the main menu.' },
{ q: 'I paid but no access?', a: 'Contact support — we usually fix it within minutes.' },
];
// Telegram handle for the support chat — same one the live miniapp
// uses (openTelegramChat('sonnnnnua') → https://t.me/sonnnnnua).
const SUPPORT_TG_USERNAME = 'sonnnnnua';
function FAQPage({ accent = C.pink }) {
const nav = window.useNav();
const [open, setOpen] = React.useState(0);
return (
Help
How can we help?
Most answers live here · still stuck? Ping support below.
);
}
// CompactRow-shaped placeholder used while a list of videos is in
// flight — same thumb width / row height so the layout doesn't jump
// when the real data lands. Uses the `skel-pulse` keyframe that ships
// with PlaylistPicker; we inject it here too in case the picker hasn't
// mounted yet on this session.
function CompactRowSkeleton({ delay = 0 }) {
return (
);
}
// One global keyframe definition so any skeleton anywhere in pages.jsx
// can drive itself off `skel-pulse` without re-declaring it.
function SkelPulseKeyframes() {
return (
);
}
// ── SEARCH PAGE ───────────────────────────────────────────────
// Single-screen search across artists + videos. Opened from AppHeader's
// magnifier icon and from Home's Browse pills (with the tag pre-filled).
//
// Layout:
// slim back bar + input (autofocused) + ✕ to clear
// then either:
// · no query → Browse rail (tags as quick-pick chips)
// · with query → artist row (filtered locally from useArtists by name)
// + video list (from /miniapp/search)
//
// We debounce the q → deferredQ transition by 280ms so the backend isn't
// hammered on every keystroke; the artist filter is local & instant.
function SearchPage({ accent = C.pink }) {
const nav = window.useNav();
const initialQ = nav.params?.q || '';
// Tag mode: opened from a Browse pill on Home. Behaves the same as
// free-text search except results come back in a random order (seeded)
// and a Refresh button on top re-rolls the seed. Switches off if the
// user starts typing a different query — at that point we're back to
// newest-first relevance behaviour.
const initialTagMode = nav.params?.mode === 'tag';
// Newest mode: opened from the "NEW" sentinel pill on Home. Bypasses
// the search index entirely and just lists the 24 most recent rows
// from /miniapp/videos. Switches off the moment the user starts
// typing — same UX as tag mode.
const initialNewestMode = nav.params?.mode === 'newest';
const [q, setQ] = React.useState(initialQ);
const [deferredQ, setDeferredQ] = React.useState(initialQ);
const [tagMode, setTagMode] = React.useState(initialTagMode);
const [newestMode, setNewestMode] = React.useState(initialNewestMode);
// Seed = 0 keeps the old "newest-first" path on the backend, anything
// positive triggers the md5 shuffle. We mint a fresh random seed on
// mount so the very first open of a tag is already a random sample.
const [seed, setSeed] = React.useState(() =>
initialTagMode ? Math.floor(Math.random() * 1e9) + 1 : 0
);
const inputRef = React.useRef(null);
// Debounce backend search — local artist filter responds instantly so
// the user sees something the moment they start typing.
React.useEffect(() => {
const id = setTimeout(() => setDeferredQ(q.trim()), 280);
return () => clearTimeout(id);
}, [q]);
// Exit tag / newest mode the moment the user edits the query — typing
// anything turns this back into a normal text search (relevance +
// newest-first).
React.useEffect(() => {
if (tagMode && q !== initialQ) {
setTagMode(false);
setSeed(0);
}
if (newestMode && q.length > 0) {
setNewestMode(false);
}
}, [q, tagMode, newestMode, initialQ]);
// Focus the input on mount so the keyboard pops automatically — but
// skip in tag / newest mode, otherwise the keyboard pops over the
// feed the user came here to browse.
React.useEffect(() => {
if (initialTagMode || initialNewestMode) return;
const t = setTimeout(() => { try { inputRef.current?.focus(); } catch (_) {} }, 80);
return () => clearTimeout(t);
}, [initialTagMode, initialNewestMode]);
const tagsState = window.useTags();
const tags = (tagsState.data || []);
const artistsAll = (window.useArtists().data || []);
const searchState = window.useSearch(deferredQ, 24, seed);
// Newest mode pulls straight from the videos endpoint — the search
// index has no "empty q + newest" path. 24 lines up with the count
// promised on the pill.
const newestState = window.useVideos(24);
const newestVideos = newestMode ? (newestState.data || []).slice(0, 24) : [];
const videoResults = searchState.data?.results || [];
// Refresh = new seed → useFetch sees a new cache key and refetches.
const onRefresh = () => {
setSeed(Math.floor(Math.random() * 1e9) + 1);
};
// Local artist match — case-insensitive contains. Cap to a sensible
// number so the rail stays scrollable rather than overwhelming.
const matchedArtists = React.useMemo(() => {
const needle = deferredQ.toLowerCase();
if (!needle || needle.length < 2) return [];
return artistsAll.filter(a => {
const name = (a.name || '').toLowerCase();
const handle = (a.handle || '').toLowerCase();
return name.includes(needle) || handle.includes(needle);
}).slice(0, 12);
}, [deferredQ, artistsAll]);
const showResults = deferredQ.length >= 2;
const isLoading = showResults && searchState.loading;
const noResults = showResults && !searchState.loading && matchedArtists.length === 0 && videoResults.length === 0;
return (
{/* Slim header — back + input + clear */}
{/* useFetch hands back window.VIDEOS (mock) as its fallback
while the real request is in flight, so gating purely on
`loading` keeps the mock list off-screen and shows skeleton
rows instead — much cleaner than fake titles + gradient
thumbs flashing for half a second. */}
{newestState.loading ? (
{Array.from({ length: 6 }).map((_, i) => (
))}
) : newestVideos.length > 0 ? (
{newestVideos.map(v => )}
) : null}
)}
{!newestMode && !showResults && (
Browse
{tags.map(t => (
))}
{/* Hint */}
Type 2+ characters to search across artists and videos.
);
}
// ── PAYWALL LOCK ──────────────────────────────────────────────
// Shown when a free user taps a locked video / artist
function PaywallLock({ accent = C.pink, mode = 'video' /* 'video' | 'artist' */ }) {
const nav = window.useNav();
return (
);
}
function loadMoreBtnStyle(accent) {
return {
width: '100%',
background: 'transparent',
color: accent,
border: `1px solid ${accent}55`,
borderRadius: 12,
padding: '12px',
fontSize: 13, fontWeight: 700, cursor: 'pointer',
fontFamily: 'inherit',
};
}
// ── ARTIST PAGE ───────────────────────────────────────────────
function ArtistPage({ accent = C.pink }) {
const nav = window.useNav();
const requestedId = nav.params?.id;
const artistsState = window.useArtists();
const allArtists = artistsState.data || [];
let a = allArtists.find(x => x.id === requestedId);
if (!a) a = allArtists[0] || window.ARTISTS[0];
const tColor = tagColor(a.tag);
const [tab, setTab] = React.useState('videos');
// Live content with true pagination — each list fetches /artist_content
// with offset when Load more is tapped.
const videos = window.useArtistContentList(a.name, 'video');
const shorts = window.useArtistContentList(a.name, 'short');
const photos = window.useArtistContentList(a.name, 'photo');
// Follow state + optimistic toggle.
const followStatus = window.useFollowStatus(a.name);
const [localFollow, setLocalFollow] = React.useState(null);
const isFollowing = localFollow != null ? localFollow : followStatus.following;
const onFollowClick = () => {
const next = !isFollowing;
setLocalFollow(next);
window.actionFollow(a.name).then(r => {
if (!r.ok) { setLocalFollow(!next); console.warn('[follow]', r); }
});
};
// Tab counts use the *total* from the artist record (a.videos / a.photos /
// a.shorts) when available — that's the true catalog size. Live counts as
// fallback so the UI still shows something if the artists endpoint hasn't
// landed yet.
const totalVideos = a.videos || videos.items.length;
const totalPhotos = a.photos || photos.items.length;
const totalShorts = a.shorts || shorts.items.length;
const stats = [
{ v: totalVideos, l: 'Videos' },
{ v: (totalPhotos || 0).toLocaleString(), l: 'Photos' },
{ v: totalShorts || 0, l: 'Shorts' },
];
// Photo lightbox state — null = closed, number = index in photos.items.
const [lightboxIdx, setLightboxIdx] = React.useState(null);
// Empty-state: artist exists but has no content uploaded yet — show a
// link to the group thread if the backend gave us topic_url.
const hasAnyContent = videos.items.length + shorts.items.length + photos.items.length > 0;
const topicUrl = a.topicUrl || a.raw?.topic_url || '';
const openTopic = () => {
if (!topicUrl) return;
const tg = window.Telegram?.WebApp;
tg?.openLink ? tg.openLink(topicUrl) : window.open(topicUrl, '_blank');
};
return (
{/* Slim back bar — pinned to the top of the player surface, not 44px
below it (the old offset was for the fake status bar we removed).
Share button removed — Telegram WebView already shows the user a
way to open the group via the bot if they need it. */}
{/* Phone is rendered inside PhoneStage which already reserves the
top safe area. Absolute top:8px is relative to Phone, so we
don't re-add the inset here or it would double-pad. */}
{/* Hero */}
{a.name}
{a.handle}
{a.ready && (
▶ In app
)}
{/* Stats row */}
{stats.map((s, i) => (
{s.v}
{s.l}
))}
{/* Action row: Follow + bell only (bookmark removed per request) */}
{/* Empty state when the artist exists but has nothing uploaded yet */}
{!videos.loading && !shorts.loading && !photos.loading && !hasAnyContent && (
💬
Available in the group
{a.name}'s content lives in the Telegram group for now.
{/* Videos — real list, paginated through /artist_content */}
{tab === 'videos' && (
{videos.items.map(v => )}
{videos.hasMore && (
)}
)}
{/* Shorts — real video previews, 3-col grid (gated for free) */}
{tab === 'shorts' && (
{shorts.items.map((s, i) => {
if (!nav.isPro) {
// Artist photo is the natural fallback here — we're
// already on the artist's page, and shorts rarely
// ship a thumbnail_url.
const bgUrl = s.thumb?.src || a.profilePhoto || a.photo;
return (
{/* Photo lightbox overlay — full-screen, watermarked. */}
{lightboxIdx != null && (
setLightboxIdx(i)}
onClose={() => setLightboxIdx(null)}
/>
)}
);
}
// ── FOLLOWED FEED PAGE ────────────────────────────────────────
// Full list of recent videos from artists the user follows. Reached
// from the "See all →" tile on Home's Followed rail. Just a slim
// header + a column of CompactRow tiles — no pagination on the
// backend, the endpoint already caps at 20.
function FollowedFeedPage({ accent = C.pink }) {
const nav = window.useNav();
const state = window.useFollowedFeed();
const items = state.data?.videos || [];
return (
Followed feed
{state.loading && !items.length ? (
Loading…
) : !items.length ? (
🎤
No new videos yet
Follow more artists from the Artists tab and we'll surface their fresh drops here.