// Shared UI: Phone frame, icons, header, thumbnails, bottom navs
// All names prefixed/specific to avoid collisions.
// Nav context — created here so screen files (loaded after ui.jsx) can read it
// without worrying about load order. app.jsx provides the value at the root.
window.NavContext = window.NavContext || React.createContext(null);
// Safe consumer: returns a no-op stub when no provider is mounted (e.g. when a
// component is used outside the AppShell, like in standalone previews).
function useNav() {
const ctx = React.useContext(window.NavContext);
return ctx || { go: () => {}, back: () => {}, replace: () => {}, reset: () => {},
onTab: () => {}, activeTab: '', centerMode: 'subscribe',
isPro: false, screen: 'home', params: {}, canGoBack: false };
}
window.useNav = useNav;
const C = {
pink: '#FF7EC8',
lime: '#CCFF00',
blue: '#44C8FF',
purple: '#C86BFF',
orange: '#FF9F44',
dark: '#0E0E0F',
dark2: '#161617',
dark3: '#1E1E20',
dark4: '#252527',
text: '#FFFFFF',
muted: 'rgba(255,255,255,0.45)',
muted2: 'rgba(255,255,255,0.65)',
border: 'rgba(255,255,255,0.08)',
border2: 'rgba(255,255,255,0.14)',
};
const tagColor = (tag) => ({
pink: C.pink, lime: C.lime, blue: C.blue, purple: C.purple, orange: C.orange
}[tag] || C.pink);
// Phone wrapper — 390x844 on desktop (preview look), full-screen on mobile/Telegram.
// data-phone="true" lets the .phone-fill CSS in app.jsx override the desktop
// styling regardless of how many layers of wrapper sit between this and the
// .phone-fill root (needed for the persistent ShortsTab layer).
function Phone({ children, label, width = 390, height = 844 }) {
// NOTE: the safe-area inset is applied at the PhoneStage outer container
// (app.jsx) so every screen — including the persistent ShortsTab layer —
// gets it for free. Don't add paddingTop here or you'll double-pad.
return (
);
}
// Round avatar — uses real photo when artist has one, falls back to a
// gradient circle with the first letter.
function Avatar({ artist, size = 36, ring }) {
const palette = ['#FF7EC8', '#C86BFF', '#44C8FF', '#CCFF00', '#FF9F44'];
const idx = (artist?.id?.charCodeAt(1) || 0) % palette.length;
// Real artists from /miniapp/artists have .photo; videos.artist may not.
// profilePhoto > photo > letter fallback.
const photoUrl = artist?.profilePhoto || artist?.photo || '';
const baseStyle = {
width: size, height: size, borderRadius: '50%',
flexShrink: 0,
border: ring ? `2px solid ${ring}` : 'none',
display: 'flex', alignItems: 'center', justifyContent: 'center',
};
if (photoUrl) {
return (
);
}
return (
{artist?.name?.[0]}
);
}
// Tier color palette — matches the live miniapp.
const TIER_COLORS = {
plus: '#FF7EC8', // pink
pro: '#00E5FF', // cyan
elite: '#FFD700', // gold
vip: '#C86BFF', // purple
founder: '#FF9F44', // orange
};
// App Header — avatar + name + tier, clickable area on left → profile.
// Pulls user data from nav context (live API or Telegram fallback).
function AppHeader({ user: userProp, accent = C.pink }) {
const nav = useNav();
const user = userProp || nav.user || { name: 'You', daysLeft: 0, isPro: false };
// While /miniapp/profile is in flight we don't yet know the user's tier.
// Skip the badge entirely so we don't flash FREE → ELITE.
const userLoading = nav.userLoading;
const tier = (user.tier || 'free').toLowerCase();
const tierColor = TIER_COLORS[tier] || accent;
const daysLabel = user.isInfinite ? '∞' : (user.daysLeft || 0);
// Tier badge only when the user actually has access (days>0 or
// lifetime). The previous fallback on `tier !== 'free'` left expired
// subscribers wearing their last tier badge — which conflicts with
// the gated /content/play behaviour on the backend.
// Grace users get their own orange badge so they don't look like
// strangers — same UX as the live miniapp.
const showGrace = !userLoading && user.isGrace;
const showTier = !userLoading && user.isPro;
const showFree = !userLoading && !user.isPro && !user.isGrace;
const GRACE_COLOR = '#FF9800';
return (
);
}
const iconBtn = {
position: 'relative',
width: 38, height: 38, borderRadius: 12,
background: 'transparent',
border: `1px solid ${C.border}`,
color: C.text, cursor: 'pointer',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
};
// Bell → notifications panel. Reads invite link from /miniapp/my_invite
// and surfaces it as a notification entry (so the user can always come
// back to the link even after dismissing the post-checkout celebration).
// Future notification sources (new videos from followed artists, etc.)
// plug into the same `notifications` array.
//
// Pink "unread" dot is driven by localStorage:
// asmr.notifications.seenAt = last-opened timestamp (ms)
// asmr.notifications.firstSeen[] = when we first saw that notif
// On open we stamp seenAt = now, so the dot only re-lights when a newer
// notification appears.
const NOTIF_SEEN_KEY = 'asmr.notifications.seenAt';
const NOTIF_FIRST_SEEN_KEY = 'asmr.notifications.firstSeen';
function _lsGetJson(key, fallback) {
try {
const raw = localStorage.getItem(key);
return raw ? JSON.parse(raw) : fallback;
} catch (_) { return fallback; }
}
function _lsSetJson(key, value) {
try { localStorage.setItem(key, JSON.stringify(value)); } catch (_) {}
}
function _getNotifSeenAt() {
try { return Number(localStorage.getItem(NOTIF_SEEN_KEY) || 0) || 0; }
catch (_) { return 0; }
}
function _setNotifSeenAt(ts) {
try { localStorage.setItem(NOTIF_SEEN_KEY, String(ts)); } catch (_) {}
}
// Returns ms epoch of when we first observed this notif key. Persists so
// "Subscription active · Jun 1" stays Jun 1 even if the user reopens it
// on Jun 5. Auto-records on first call.
function _firstSeenAt(key) {
const map = _lsGetJson(NOTIF_FIRST_SEEN_KEY, {});
if (map[key]) return map[key];
map[key] = Date.now();
_lsSetJson(NOTIF_FIRST_SEEN_KEY, map);
return map[key];
}
function AppHeaderBell({ accent = C.pink }) {
const myInvite = window.useMyInvite ? window.useMyInvite() : { data: { invite_link: null } };
const link = myInvite.data?.invite_link;
// Build the notifications array. Newest first. Each item:
// { id, kind, createdAt, render({ accent, onClose }) => ReactNode }
// For now only the invite-link entry exists; new kinds slot in here.
const notifications = React.useMemo(() => {
const out = [];
if (link) {
const createdAt = _firstSeenAt('invite:' + link);
out.push({
id: 'invite:' + link,
kind: 'invite',
createdAt,
link,
});
}
// Sort newest first.
out.sort((a, b) => b.createdAt - a.createdAt);
return out;
}, [link]);
// Bump on every open so we re-read seenAt from storage after stamping.
const [openTick, setOpenTick] = React.useState(0);
const seenAt = React.useMemo(() => _getNotifSeenAt(), [openTick]);
const hasUnread = notifications.some(n => n.createdAt > seenAt);
const [open, setOpen] = React.useState(false);
const onTap = () => {
// Mark seen the moment the panel opens — the dot should clear even
// if the user just glances at the panel and dismisses it.
_setNotifSeenAt(Date.now());
setOpenTick(t => t + 1);
setOpen(true);
};
const onClose = () => setOpen(false);
return (
{open && (
)}
);
}
// NEW Bottom nav — 5 tabs with center action (Subscribe → Profile after subscribing)
// `active` / `centerMode` props from screens override; otherwise pulled from nav context.
function BottomNav({ active, centerMode, accent = C.pink, subAccent = C.lime }) {
const nav = useNav();
const activeTab = active != null ? active : nav.activeTab;
const center = centerMode != null ? centerMode : nav.centerMode;
const tabs = [
{ id: 'home', label: 'Home', icon: 'home', filled: 'homeFilled' },
{ id: 'shorts', label: 'Shorts', icon: 'shorts', filled: 'shortsFilled' },
{ id: 'center', label: center === 'subscribe' ? 'Subscribe' : 'Profile', center: true },
{ id: 'artists', label: 'Artists', icon: 'artists', filled: 'artists' },
{ id: 'favorites', label: 'Saved', icon: 'star', filled: 'starFilled' },
];
return (
{tabs.map(t => {
if (t.center) {
const isSub = center === 'subscribe';
if (isSub) {
return (
);
}
// Profile avatar in the center slot — uses the live user from
// context so it shows the real Telegram photo, not a letter.
const u = nav.user || {};
return (
);
}
// ── TICKER BANNER ─────────────────────────────────────────────
// Auto-rotating lime panel that cycles between: free trial, content stats, custom ads.
// Swipeable, dots indicator, 5s auto-advance.
function TickerBanner({ accent = C.pink, lime = C.lime, slides, interval = 10000 /* was 5000 — slides need more dwell time so users can read the CTA */ }) {
const [idx, setIdx] = React.useState(0);
const [paused, setPaused] = React.useState(false);
const total = slides.length;
React.useEffect(() => {
if (paused) return;
const t = setTimeout(() => setIdx(i => (i + 1) % total), interval);
return () => clearTimeout(t);
}, [idx, paused, total, interval]);
// touch swipe
const startX = React.useRef(null);
const onStart = e => { startX.current = (e.touches?.[0]||e).clientX; setPaused(true); };
const onEnd = e => {
if (startX.current == null) return;
const dx = ((e.changedTouches?.[0]||e).clientX) - startX.current;
if (Math.abs(dx) > 30) setIdx(i => (i + (dx < 0 ? 1 : total - 1)) % total);
startX.current = null;
setTimeout(() => setPaused(false), 600);
};
return (
{slides.map((Slide, i) => (
))}
{/* dots */}
{slides.map((_, i) => (
))}
);
}
// Slide builders — pure render fns so the ticker can lazy-render
const TickerSlides = {
// Renders a slide as a real React component so hooks (useNav) are
// legal inside. TickerBanner consumes these as JSX .
freeTrial: function FreeTrialSlide({ accent, lime }) {
const nav = useNav();
const [busy, setBusy] = React.useState(false);
const onGet = async (e) => {
e?.stopPropagation?.();
if (busy) return;
setBusy(true);
try {
const res = await window.actionStartFreeTrial();
if (res?.ok) {
if (res.invite_link) nav.openInvite?.(res.invite_link);
// New tier / days / link are fresh — drop the cached profile so
// the AppHeader badge and bell reflect them immediately.
window.invalidate?.('user');
window.invalidate?.('my_invite');
return;
}
if (res?.reason === 'trial-used') {
alert('You\'ve already used your free trial.');
} else if (res?.reason === 'no-tg') {
alert('Open from Telegram to activate trial');
} else {
alert(res?.message || 'Could not activate trial. Try again.');
}
} finally {
setBusy(false);
}
};
return (
Tap below to open your private group. Save the link — it's yours.
{/* Link preview row */}
{link || '—'}
{/* CTA */}
);
}
// ── NotificationsPanel ────────────────────────────────────────
// Slide-down sheet opened by the AppHeader bell. Lists user-facing
// events — currently just the "subscription active" entry that holds
// the private-group invite link. Designed to grow: new kinds register
// in AppHeaderBell's `notifications` builder and render here.
function NotificationsPanel({ notifications, accent = C.pink, onClose }) {
const items = Array.isArray(notifications) ? notifications : [];
return (
Subscription updates and new drops from artists you follow will show up here.
);
}
// Human-readable "Jun 1" / "Today" / "Yesterday" for the notification
// timestamp. Keeps the panel compact without bringing in a date lib.
function _formatNotifDate(ts) {
if (!ts) return '';
const d = new Date(ts);
const now = new Date();
const day = (x) => Math.floor(x.getTime() / 86400000);
const diff = day(now) - day(d);
if (diff <= 0) return 'Today';
if (diff === 1) return 'Yesterday';
// "Jun 1" — fall back to "1/6" if locale lookup chokes inside the
// Telegram WebView.
try {
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
} catch (_) {
return `${d.getDate()}/${d.getMonth() + 1}`;
}
}
// Invite-link card — the visual is similar to InviteModal but compacted
// into a row that lives inside the panel. Tap "Join" to open the group;
// "Copy" lifts the URL onto the clipboard.
function NotifInviteCard({ link, createdAt, accent = C.pink, onClose }) {
const [copied, setCopied] = React.useState(false);
const openLink = (e) => {
e?.preventDefault?.();
if (!link) return;
const tg = window.Telegram?.WebApp;
const isTg = /^https?:\/\/(t\.me|telegram\.me)\//i.test(link) || /^tg:\/\//i.test(link);
if (isTg && tg && typeof tg.openTelegramLink === 'function') {
tg.openTelegramLink(link);
} else if (tg && typeof tg.openLink === 'function') {
tg.openLink(link);
} else {
window.open(link, '_blank', 'noopener');
}
onClose && onClose();
};
const copy = async (e) => {
e?.stopPropagation?.();
try {
await navigator.clipboard.writeText(link);
} catch (_) {
const ta = document.createElement('textarea');
ta.value = link; document.body.appendChild(ta);
ta.select(); try { document.execCommand('copy'); } catch (_) {}
ta.remove();
}
setCopied(true);
setTimeout(() => setCopied(false), 1400);
};
return (
{/* Title row */}
🎉
Subscription active
{_formatNotifDate(createdAt)} · Tap to open your private group
{/* Link preview */}
{link || '—'}
{/* CTA */}
);
}
// ── Paywall: BlurLock + PaywallSheet ─────────────────────────
// BlurLock wraps a tile so non-Pro users see a blurred preview with a
// padlock badge. PaywallSheet is the bottom-of-screen "subscribe to
// unlock" modal opened by nav.openPaywall — single source of truth so
// every gated tap surfaces the same UX. Tapping the wrapper itself
// fires onClick (typically nav.openPaywall) so the user always lands
// on the same upsell.
function BlurLock({ children, onClick, badge = '🔒', accent = C.pink, blur = 7, dim = 0.7 }) {
return (
{/* Real content with strong blur + dim. pointer-events:none so taps
go to the overlay, not the (possibly clickable) child. */}
{children}
{/* Lock badge in the center */}
{badge}
);
}
function PaywallSheet({ accent = C.pink, onClose }) {
const nav = useNav();
const go = () => { onClose && onClose(); nav.go('subscription'); };
return (