);
}
// Cheap hook: pulls the live artist record (with photo) by name. The
// normalizeVideo output only carries {id, name, handle}, so video tiles
// would otherwise show a letter avatar. useArtists is module-cached, so
// the lookup is effectively O(N) once and free thereafter.
function useEnrichedArtist(artist) {
const artistsState = window.useArtists();
if (!artist?.name) return artist;
const live = (artistsState.data || []).find(a => a.name === artist.name);
if (!live) return artist;
return { ...artist, photo: live.photo, profilePhoto: live.profilePhoto };
}
// Big-card row used in V1
function FeedCard({ v, accent, density, featured }) {
const nav = window.useNav();
const artist = useEnrichedArtist(v.artist);
// Home thumbnails stay clear even for non-Pro users (per spec) — but
// the tap is gated through nav.gate so the paywall sheet pops instead
// of opening the player.
return (
);
}
// ── HOME V2 — Editorial ───────────────────────────────────────
// Featured pick on top (videos[0] from the shuffled For-You source),
// Browse tags, then a personalised feed that grows with Load more.
function HomeV2({ accent = C.pink, density = 'comfortable' }) {
const nav = window.useNav();
// Incremental pagination — first page (30 rows) lands fast, the rest
// streams in only when the user actually taps Load more. Bye-bye the
// 10s+ wait that the previous useVideos(10000) caused.
const videosPage = window.usePaginatedVideos(30);
const videos = videosPage.items;
const hero = videos[0];
// Personalisation signals — only relevant for Pro users with some
// history. We don't gate the personalisation by isPro itself; the
// followed / liked lookups are no-ops outside Telegram anyway.
const followsState = window.useFollows();
const favState = window.useFavorites();
// For-you feed:
// · Pro w/ follows → 60% videos from followed artists, 40% shuffled
// rest. Mixed by an alternating zip so the rail still feels
// varied rather than chunked.
// · Pro w/ favorites only → boost artists from liked videos (same
// mechanic but the priming set comes from saves).
// · Otherwise (Pro w/ no signals OR Free user) → straight shuffle
// from the full catalog. Free users get the same surface — they
// can't actually open anything (gate kicks in), but the variety
// helps the upsell.
// useMemo keys on the source-list length + signal set sizes so the
// shuffle is stable within a single Home open. A fresh open
// reshuffles.
const feed = React.useMemo(() => {
// Backend now serves /miniapp/videos?order=random&seed=… so the raw
// catalog is already shuffled across all uploads, not just newest.
// We just need to (a) optionally boost signal artists for Pro users
// and (b) artist-spread the final list so no creator runs back to
// back. Hero (videos[0]) is excluded from the rail.
const tail = videos.slice(1);
if (tail.length <= 1) return tail;
// Greedy artist-spread: when the next slot would repeat the
// previous artist, look ahead for the first different one and
// swap. Falls back to in-order push if everything left is the
// same person.
const spread = (arr) => {
const out = [];
const pool = arr.slice();
while (pool.length) {
const last = out.length ? out[out.length - 1].artist?.name : null;
let pickIdx = 0;
if (last) {
const diff = pool.findIndex(v => v.artist?.name !== last);
if (diff > -1) pickIdx = diff;
}
out.push(pool[pickIdx]);
pool.splice(pickIdx, 1);
}
return out;
};
// Collect names of artists the user has signalled affinity for.
const followedNames = new Set((followsState.data?.artists || []).map(a => a.name));
const likedNames = new Set();
for (const v of (favState.data?.videos || [])) {
if (v.artist?.name) likedNames.add(v.artist.name);
}
const signalNames = followedNames.size ? followedNames
: likedNames.size ? likedNames
: null;
if (!signalNames) return spread(tail);
// Split tail into hits (from signal artists) and rest. Don't
// reshuffle each — backend already did. Just interleave 3:2 so
// the rail feels like a mix instead of a wall of one creator,
// then artist-spread the result so even within "hits" two videos
// from the same followed artist don't sit next to each other.
const hits = [], rest = [];
for (const v of tail) {
if (signalNames.has(v.artist?.name)) hits.push(v);
else rest.push(v);
}
if (!hits.length) return spread(rest);
if (!rest.length) return spread(hits);
const out = [];
let hi = 0, ri = 0;
while (hi < hits.length || ri < rest.length) {
for (let k = 0; k < 3 && hi < hits.length; k++) out.push(hits[hi++]);
for (let k = 0; k < 2 && ri < rest.length; k++) out.push(rest[ri++]);
}
return spread(out);
}, [videos.length, followsState.data?.artists?.length, favState.data?.videos?.length]);
const [visible, setVisible] = React.useState(8);
const shown = feed.slice(0, visible);
return (
{/* Hero — newest drop. Featured chip + tap to play. */}
{hero && (
)}
{/* Auto-ticker. Trial slide only when the user can still claim
one — paid subs + anyone who already burned the trial drop
it. suggestArtist replaces the old ad slot and is always
available — it's a real CTA, not a placeholder. */}
{(() => {
const userState = nav.user || {};
const trialEligible = !userState.isPro && !userState.trialUsed;
const slides = trialEligible
? [TickerSlides.freeTrial, TickerSlides.stats, TickerSlides.suggestArtist]
: [TickerSlides.stats, TickerSlides.suggestArtist];
return (
);
})()}
{/* Category pills — tap to open Search pre-filled with that tag. */}
{/* "New" sentinel pill — opens SearchPage in newest mode, which
skips the tag-shuffle and just lists the 24 most recently
added videos. Visually amped so it pulls focus from the
tag pills (stronger gradient + lime glow). */}
{/* Followed feed rail — only when the user has at least one
video from someone they follow. Compact horizontal tiles +
trailing "See all" CTA that opens FollowedFeedPage. */}
{/* Personalised feed */}
visible ? '' : ''}
icon={}
/>
{shown.map(v => )}
{/* Load more drives two phases:
· if visible < feed.length → just reveal next 8 from the
pages we already fetched (no network).
· if visible >= feed.length → tell the paginator to fetch
the next page, which will repopulate `feed` via the
useMemo above and the next render exposes the new rows. */}
{(feed.length > visible || videosPage.hasMore) && (
)}
);
}
// Hero artist line — pulls live photo via useEnrichedArtist so the
// hero avatar isn't a letter when the catalog ships an unenriched record.
function HeroArtistLine({ artist, age }) {
const live = useEnrichedArtist(artist);
return (
{live.name} · {age}
);
}
// Horizontal rail of videos from artists the user follows. Renders
// nothing when there are no follows or the feed is empty. Trailing
// "See all" tile opens the FollowedFeedPage.
function FollowedRail({ accent }) {
const nav = window.useNav();
const state = window.useFollowedFeed();
const items = state.data?.videos || [];
if (!items.length) return null;
const shown = items.slice(0, 7); // first 7 fit comfortably above the fold
return (
}
/>
{shown.map(v => (
))}
{/* See-all tile — same footprint so the rail stays even. */}
);
}
// Small tile for the Followed rail. ~140px wide, 16:9 thumb, tiny avatar+title underneath.
function FollowedTile({ v, accent }) {
const nav = window.useNav();
const artist = useEnrichedArtist(v.artist);
return (
);
}
// Compact horizontal row — thumbnail + title + tiny avatar/name line.
function CompactRow({ v, accent }) {
const nav = window.useNav();
// Enrich with live artist record so the avatar shows the real photo,
// not just a letter fallback (v.artist from normalizeVideo has no photo).
const artist = useEnrichedArtist(v.artist);
return (