544 lines
24 KiB
TypeScript
544 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useRef, useState, type MouseEvent, type Ref } from "react";
|
|
import { canDelete, formatDuration, isPlayableVideo, relativeTime, type CardMedia, type CardPost } from "@/lib/feed-model";
|
|
import { GrowButton, SweepButton } from "./Buttons";
|
|
import { HexAvatar } from "./HexAvatar";
|
|
import { PlayIcon, PostMenu } from "./PostCard";
|
|
import { VideoPlayer } from "./VideoPlayer";
|
|
import { FeaturedCarousel } from "./FeaturedCarousel";
|
|
import { Logo } from "./Logo";
|
|
import { useTheme } from "@/lib/use-theme";
|
|
import { MobileDock } from "./MobileDock";
|
|
import { BottomSheet } from "./BottomSheet";
|
|
import { CommentsSection } from "./CommentsSection";
|
|
import { Composer } from "./Composer";
|
|
import { DiscoverPanelSheet, DiscoverSheet, type DiscoverPanel } from "./DiscoverSheet";
|
|
import type { DiscoverExpert } from "@/lib/discover";
|
|
import type { FeedViewProps } from "./FeedView";
|
|
|
|
/** The slide on screen: its index in the reel and its post (null on the loading slide). */
|
|
export interface CurrentSlide {
|
|
index: number;
|
|
/** "post" is a real post; "featured" and "load" are not posts (the dock disables like and comment on them). */
|
|
kind: "post" | "featured" | "load";
|
|
post: CardPost | null;
|
|
}
|
|
|
|
/** The featured experts slide comes after this many posts. */
|
|
export const FEATURED_AFTER = 2;
|
|
/** Two taps this close together (ms) make a double-tap. */
|
|
export const DOUBLE_TAP_MS = 300;
|
|
/** How long the heart burst stays on screen (ms). */
|
|
export const BURST_MS = 950;
|
|
|
|
/** True when a tap at `now` follows a tap at `last` closely enough to be a double-tap. */
|
|
export function isDoubleTap(last: number | null, now: number, windowMs = DOUBLE_TAP_MS): boolean {
|
|
return last !== null && now - last >= 0 && now - last <= windowMs;
|
|
}
|
|
|
|
/** Taps on controls (buttons, links, video, menus, fields) never count toward a double-tap. */
|
|
export function isTapTarget(target: EventTarget | null): boolean {
|
|
const el = target as Element | null;
|
|
if (!el || typeof el.closest !== "function") return true;
|
|
return !el.closest("button, a, video, input, textarea, select, [role='menu'], [role='menuitem']");
|
|
}
|
|
|
|
/** Index of the featured experts slide among `postCount` posts, or -1 when it is not shown. */
|
|
export function featuredSlideIndex(postCount: number, expertCount: number): number {
|
|
return expertCount > 0 && postCount >= FEATURED_AFTER ? FEATURED_AFTER : -1;
|
|
}
|
|
|
|
/** Share of a slide that must be on screen before it counts as the current one. */
|
|
const CURRENT_RATIO = 0.6;
|
|
|
|
/** Smallest finger travel, in px, that counts as a swipe to the next or previous slide. */
|
|
const SWIPE_MIN = 40;
|
|
/** Wheel steps closer together than this belong to one gesture (trackpad inertia). */
|
|
const WHEEL_QUIET_MS = 220;
|
|
/** A wheel gesture moves at most one slide in this time. */
|
|
const WHEEL_STEP_MS = 520;
|
|
|
|
/** The slide one step away from `from` in the direction of `delta`, kept inside the reel. */
|
|
export function stepTarget(from: number, delta: number, count: number): number {
|
|
if (!delta || count <= 0) return Math.min(Math.max(from, 0), Math.max(count - 1, 0));
|
|
return Math.min(Math.max(from + Math.sign(delta), 0), count - 1);
|
|
}
|
|
|
|
/** Index of the slide on screen, given which slides are now mostly visible. Keeps the old one when none is. */
|
|
export function pickCurrent(previous: number, visible: number[]): number {
|
|
if (!visible.length) return previous;
|
|
return visible.includes(previous) ? previous : Math.min(...visible);
|
|
}
|
|
|
|
function setRef<T>(ref: Ref<T> | undefined, value: T | null) {
|
|
if (typeof ref === "function") ref(value);
|
|
else if (ref) (ref as { current: T | null }).current = value;
|
|
}
|
|
|
|
/** Aspect ratio (width / height) at or below which a video fills the slide (4:5 or taller). */
|
|
export const COVER_MAX_RATIO = 0.8;
|
|
|
|
/** "cover" for portrait and near-portrait video, "contain" for wider, "cover" while the size is unknown. */
|
|
export function videoFit(width: number, height: number): "cover" | "contain" {
|
|
if (!(width > 0) || !(height > 0)) return "cover";
|
|
return width / height <= COVER_MAX_RATIO ? "cover" : "contain";
|
|
}
|
|
|
|
function SlideMedia({ media, author }: { media: CardMedia; author: string }) {
|
|
const box = useRef<HTMLDivElement>(null);
|
|
const [started, setStarted] = useState(false);
|
|
// Real video size once metadata loads; until then the thumbnail's size decides.
|
|
const [videoSize, setVideoSize] = useState<[number, number] | null>(null);
|
|
const [thumbSize, setThumbSize] = useState<[number, number] | null>(null);
|
|
const playable = isPlayableVideo(media);
|
|
useEffect(() => {
|
|
const video = box.current?.querySelector("video");
|
|
if (!video) return;
|
|
const read = () => {
|
|
if (video.videoWidth > 0 && video.videoHeight > 0) setVideoSize([video.videoWidth, video.videoHeight]);
|
|
};
|
|
read();
|
|
video.addEventListener("loadedmetadata", read);
|
|
return () => video.removeEventListener("loadedmetadata", read);
|
|
}, [playable, media.mp4Url, media.hlsUrl]);
|
|
if (playable) {
|
|
const size = videoSize ?? thumbSize;
|
|
const fit = size ? videoFit(size[0], size[1]) : "cover";
|
|
const duration = formatDuration(media.durationSeconds);
|
|
const start = () => {
|
|
setStarted(true);
|
|
void box.current?.querySelector("video")?.play().catch(() => {});
|
|
};
|
|
return (
|
|
<div className="slide-media slide-video" data-fit={fit} ref={box}>
|
|
{media.src ? (
|
|
// The thumbnail doubles as the blurred backdrop behind a contained video, and as the size fallback.
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
className="slide-backdrop"
|
|
src={media.src}
|
|
alt=""
|
|
aria-hidden="true"
|
|
onLoad={(e) => setThumbSize([e.currentTarget.naturalWidth, e.currentTarget.naturalHeight])}
|
|
/>
|
|
) : null}
|
|
<div className="slide-art">
|
|
<VideoPlayer mp4Url={media.mp4Url} hlsUrl={media.hlsUrl} poster={media.src} label={`Video from ${author}`} controls={started} />
|
|
</div>
|
|
{started ? null : (
|
|
<>
|
|
<button type="button" className="post-play slide-play" aria-label="Play video" onClick={start}>
|
|
<PlayIcon />
|
|
</button>
|
|
{duration ? <span className="post-dur slide-dur">{duration}</span> : null}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
if (media.src) {
|
|
return (
|
|
<div className="slide-media">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img className="slide-art" src={media.src} alt={media.kind === "video" ? "Video thumbnail" : ""} />
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="slide-media slide-pending" role="img" aria-label="Video is processing">
|
|
<span>Video is processing</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Several media items in one slide: a sideways scroll-snap track with a dot per item. */
|
|
function MediaTrack({ items, author }: { items: CardMedia[]; author: string }) {
|
|
const track = useRef<HTMLDivElement>(null);
|
|
const [active, setActive] = useState(0);
|
|
const onScroll = () => {
|
|
const el = track.current;
|
|
if (!el) return;
|
|
const next = Math.min(items.length - 1, Math.max(0, Math.round(el.scrollLeft / Math.max(el.clientWidth, 1))));
|
|
if (next === active) return;
|
|
setActive(next);
|
|
// A video stops when it is swiped away.
|
|
el.querySelectorAll<HTMLElement>(":scope > .slide-pane").forEach((pane, i) => {
|
|
if (i !== next) pane.querySelectorAll("video").forEach((v) => v.pause());
|
|
});
|
|
};
|
|
return (
|
|
<>
|
|
<div className="slide-track" data-testid="slide-track" ref={track} onScroll={onScroll}>
|
|
{items.map((m, i) => (
|
|
<div className="slide-pane" key={i} aria-label={`Media ${i + 1} of ${items.length}`}>
|
|
<SlideMedia media={m} author={author} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="slide-dots" data-testid="slide-dots" aria-hidden="true">
|
|
{items.map((_, i) => (
|
|
<span key={i} className={`slide-dot${i === active ? " slide-dot-on" : ""}`} />
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function PostSlide({ post, index, current, p }: { post: CardPost; index: number; current: boolean; p: FeedViewProps }) {
|
|
const items = post.media.filter((m) => m.kind === "video" || m.src);
|
|
const media = items[0] ?? null;
|
|
const own = canDelete(post, p.feedUserId) && !!p.onDelete;
|
|
// While a video plays, the author and text step aside so the native controls stay clear.
|
|
const [playing, setPlaying] = useState(false);
|
|
const cls = `slide ${media ? "slide-on-media" : "slide-on-text"}${current ? " is-cur" : ""}${playing ? " slide-playing" : ""}`;
|
|
const lastTap = useRef<number | null>(null);
|
|
const [burst, setBurst] = useState(0);
|
|
useEffect(() => {
|
|
if (!burst) return;
|
|
const t = window.setTimeout(() => setBurst(0), BURST_MS);
|
|
return () => window.clearTimeout(t);
|
|
}, [burst]);
|
|
// Double-tap likes (never unlikes) and plays the burst. A tap that scrolls or swipes never reaches click.
|
|
const onTap = (e: MouseEvent<HTMLElement>) => {
|
|
if (!isTapTarget(e.target)) { lastTap.current = null; return; }
|
|
const now = performance.now();
|
|
if (!isDoubleTap(lastTap.current, now)) { lastTap.current = now; return; }
|
|
lastTap.current = null;
|
|
if (!post.isLiked && post.id && p.onToggleLike && !p.likeBusy?.has(post.key)) p.onToggleLike(post);
|
|
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) setBurst((n) => n + 1);
|
|
};
|
|
return (
|
|
<section
|
|
className={cls}
|
|
data-index={index}
|
|
data-testid="feed-slide"
|
|
data-liked={post.isLiked ? "true" : "false"}
|
|
onClick={onTap}
|
|
aria-label={`Post by ${post.authorName}`}
|
|
onPlayCapture={() => setPlaying(true)}
|
|
onPauseCapture={() => setPlaying(false)}
|
|
onEndedCapture={() => setPlaying(false)}
|
|
>
|
|
{media ? (
|
|
<>
|
|
{items.length > 1 ? <MediaTrack items={items} author={post.authorName} /> : <SlideMedia media={media} author={post.authorName} />}
|
|
<div className="slide-scrim-top" aria-hidden="true" />
|
|
<div className="slide-scrim" aria-hidden="true" />
|
|
</>
|
|
) : (
|
|
<div className="slide-quote-w">
|
|
<p className="slide-quote">{post.text}</p>
|
|
</div>
|
|
)}
|
|
{burst ? (
|
|
<svg className="slide-burst" data-testid="like-burst" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12 20.5s-7.5-4.4-9.4-9.1C1.3 8 3.1 4.5 6.6 4.5c2 0 3.5 1.1 4.3 2.4.5.7 1.7.7 2.2 0 .8-1.3 2.3-2.4 4.3-2.4 3.5 0 5.3 3.5 4 6.9-1.9 4.7-9.4 9.1-9.4 9.1z" fill="currentColor" />
|
|
</svg>
|
|
) : null}
|
|
{own ? (
|
|
<PostMenu post={post} onDelete={p.onDelete} deleteBusy={p.deleteBusy?.has(post.key)} className="slide-menu" buttonClassName="slide-menu-btn" />
|
|
) : null}
|
|
<div className="slide-meta">
|
|
{p.deleteErrors?.has(post.key) ? <p className="slide-error" role="alert">Could not delete the post.</p> : null}
|
|
<div className="slide-who">
|
|
<HexAvatar name={post.authorName} pictureUrl={post.authorPictureUrl} size="lg" />
|
|
<div>
|
|
<strong>
|
|
{post.authorName}
|
|
{own ? <span className="post-you slide-you">You</span> : null}
|
|
</strong>
|
|
<time dateTime={post.publishedAt ?? undefined}>{relativeTime(post.publishedAt, p.now)}</time>
|
|
</div>
|
|
</div>
|
|
{media && post.text ? <p className="slide-text">{post.text}</p> : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/** Height of the progress rail, as a percent: the slide on screen out of the loaded slides. */
|
|
export function railPercent(index: number, count: number): number {
|
|
if (count <= 0) return 0;
|
|
return Math.round((Math.min(Math.max(index, 0), count - 1) + 1) / count * 100);
|
|
}
|
|
|
|
const topIcon = { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true } as const;
|
|
|
|
/** Frosted pills over the feed (spec "Top bar"): logo and wordmark left, theme toggle right. */
|
|
function TopBar() {
|
|
const { theme, toggleTheme } = useTheme();
|
|
const next = theme === "dark" ? "light" : "dark";
|
|
return (
|
|
<div className="ph-top" data-testid="top-bar">
|
|
<div className="ph-brand ph-glass">
|
|
<Logo size={24} />
|
|
<span className="type-wordmark">MINNECT</span>
|
|
</div>
|
|
<button type="button" className="ph-theme ph-glass" data-testid="top-theme" aria-label={`Switch to ${next} theme`} onClick={toggleTheme}>
|
|
{theme === "dark" ? (
|
|
<svg {...topIcon}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg>
|
|
) : (
|
|
<svg {...topIcon}><path d="M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z" /></svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChevronDown() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
<path d="m6 9 6 6 6-6" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/** Not a post: the dock disables like and comment here (data-slide-kind="featured"). */
|
|
function FeaturedSlide({ index, current, experts }: { index: number; current: boolean; experts: DiscoverExpert[] }) {
|
|
return (
|
|
<section
|
|
className={`slide slide-featured${current ? " is-cur" : ""}`}
|
|
data-index={index}
|
|
data-slide-kind="featured"
|
|
data-testid="feed-slide-featured"
|
|
aria-label="Featured experts"
|
|
>
|
|
<span className="type-eyebrow slide-feat-eyebrow">Featured experts</span>
|
|
<h2 className="type-title type-title-strong slide-feat-title">Ask the people everyone is talking about</h2>
|
|
<div className="slide-feat-cf">
|
|
<FeaturedCarousel experts={experts} size={156} variant="slide" />
|
|
</div>
|
|
<span className="slide-hint">
|
|
<ChevronDown />
|
|
Keep scrolling
|
|
</span>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function LoadSlide({ index, current, sentinelRef }: { index: number; current: boolean; sentinelRef?: Ref<HTMLDivElement> }) {
|
|
return (
|
|
<section className={`slide slide-load${current ? " is-cur" : ""}`} data-index={index} data-testid="feed-slide-load" aria-label="Loading more posts">
|
|
<div ref={sentinelRef} className="sentinel" aria-hidden="true" />
|
|
<div className="slide-load-body" role="status" aria-label="Loading more posts">
|
|
<div className="slide-skel">
|
|
<div className="slide-skel-head">
|
|
<i className="slide-skel-hex" />
|
|
<div className="slide-skel-lines">
|
|
<i style={{ width: "40%" }} />
|
|
<i style={{ width: "24%" }} />
|
|
</div>
|
|
</div>
|
|
<i style={{ width: "92%" }} />
|
|
<i style={{ width: "76%" }} />
|
|
<i style={{ width: "54%" }} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Phone feed (spec "Mobile layout" > "Full-screen feed"): one post per screen,
|
|
* snapping. Uses the same posts, delete and paging as the desktop list: the
|
|
* reel is the list ref (the infinite-scroll root) and the loading slide holds
|
|
* the sentinel. Reports the slide on screen through onCurrentChange.
|
|
*/
|
|
export function MobileFeed(p: FeedViewProps) {
|
|
const reel = useRef<HTMLDivElement | null>(null);
|
|
const [current, setCurrent] = useState(0);
|
|
// The open sheet: the comments of one post, the composer, Discover (more), one of its panels, or none.
|
|
const [sheet, setSheet] = useState<{ kind: "comments"; postId: string } | { kind: "composer" } | { kind: "more" } | { kind: "panel"; panel: DiscoverPanel } | null>(null);
|
|
const closeSheet = useCallback(() => setSheet(null), []);
|
|
// A successful post closes the composer: publishing ends with no error and an emptied draft.
|
|
const wasBusy = useRef(false);
|
|
const composerBusy = !!p.composer?.busy;
|
|
const composerClear = !!p.composer && !p.composer.error && !p.composer.value && !p.composer.file;
|
|
useEffect(() => {
|
|
if (wasBusy.current && !composerBusy && composerClear) setSheet((s) => (s?.kind === "composer" ? null : s));
|
|
wasBusy.current = composerBusy;
|
|
}, [composerBusy, composerClear]);
|
|
const onCurrentChange = p.onCurrentChange;
|
|
const showLoad = p.status === "loading" || (p.status === "ready" && !p.loadMoreFailed && (p.loadingMore || !!p.hasMore));
|
|
const experts = p.featuredExperts ?? [];
|
|
const postCount = p.status === "ready" ? p.posts.length : 0;
|
|
const featuredAt = p.status === "ready" ? featuredSlideIndex(postCount, experts.length) : -1;
|
|
const slideCount = postCount + (featuredAt >= 0 ? 1 : 0) + (showLoad ? 1 : 0);
|
|
/** Slide index of post `i`: posts after the featured slide shift down by one. */
|
|
const slideOf = (i: number) => (featuredAt >= 0 && i >= featuredAt ? i + 1 : i);
|
|
const postAt = (slide: number) => (featuredAt >= 0 && slide === featuredAt ? -1 : featuredAt >= 0 && slide > featuredAt ? slide - 1 : slide);
|
|
|
|
// Track the slide on screen. A fresh observer per change picks up new slides.
|
|
useEffect(() => {
|
|
const root = reel.current;
|
|
if (!root || typeof IntersectionObserver === "undefined") return;
|
|
const ratios = new Map<number, number>();
|
|
const io = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const e of entries) ratios.set(Number((e.target as HTMLElement).dataset.index), e.intersectionRatio);
|
|
const visible = [...ratios].filter(([, r]) => r >= CURRENT_RATIO).map(([i]) => i);
|
|
setCurrent((prev) => pickCurrent(prev, visible));
|
|
},
|
|
{ root, threshold: [0, CURRENT_RATIO, 1] },
|
|
);
|
|
root.querySelectorAll<HTMLElement>(":scope > .slide").forEach((el) => io.observe(el));
|
|
return () => io.disconnect();
|
|
}, [slideCount]);
|
|
|
|
// One wheel notch or one swipe moves exactly one slide. Native snapping alone
|
|
// sends a short or slow gesture back to the slide it started on.
|
|
useEffect(() => {
|
|
const root = reel.current;
|
|
if (!root) return;
|
|
const count = () => root.querySelectorAll(":scope > .slide").length;
|
|
const at = () => Math.round(root.scrollTop / Math.max(root.clientHeight, 1));
|
|
const go = (to: number) => {
|
|
const calm = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
root.scrollTo({ top: to * root.clientHeight, behavior: calm ? "auto" : "smooth" });
|
|
};
|
|
let lastWheel = 0;
|
|
let lastStep = 0;
|
|
let from = 0;
|
|
const onWheel = (e: WheelEvent) => {
|
|
if (e.ctrlKey || Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;
|
|
e.preventDefault();
|
|
const now = performance.now();
|
|
const fresh = now - lastWheel > WHEEL_QUIET_MS && now - lastStep > WHEEL_STEP_MS;
|
|
lastWheel = now;
|
|
if (!fresh || !e.deltaY) return;
|
|
lastStep = now;
|
|
go(stepTarget(at(), e.deltaY, count()));
|
|
};
|
|
let startY: number | null = null;
|
|
const onTouchStart = (e: TouchEvent) => {
|
|
startY = e.touches.length === 1 ? e.touches[0].clientY : null;
|
|
from = at();
|
|
};
|
|
const onTouchEnd = (e: TouchEvent) => {
|
|
if (startY === null || e.touches.length) return;
|
|
const dy = startY - (e.changedTouches[0]?.clientY ?? startY);
|
|
startY = null;
|
|
if (Math.abs(dy) >= SWIPE_MIN) go(stepTarget(from, dy, count()));
|
|
};
|
|
root.addEventListener("wheel", onWheel, { passive: false });
|
|
root.addEventListener("touchstart", onTouchStart, { passive: true });
|
|
root.addEventListener("touchend", onTouchEnd, { passive: true });
|
|
return () => {
|
|
root.removeEventListener("wheel", onWheel);
|
|
root.removeEventListener("touchstart", onTouchStart);
|
|
root.removeEventListener("touchend", onTouchEnd);
|
|
};
|
|
}, []);
|
|
|
|
// Keep the index inside the list when posts are removed.
|
|
const index = Math.min(current, Math.max(0, slideCount - 1));
|
|
const currentPostIndex = postAt(index);
|
|
const currentPost = p.status === "ready" && currentPostIndex >= 0 ? p.posts[currentPostIndex] ?? null : null;
|
|
const kind: CurrentSlide["kind"] = currentPost ? "post" : featuredAt >= 0 && index === featuredAt ? "featured" : "load";
|
|
|
|
const onMedia = !!currentPost && currentPost.media.some((m) => m.kind === "video" || m.src);
|
|
|
|
useEffect(() => {
|
|
onCurrentChange?.({ index, kind, post: currentPost });
|
|
}, [index, kind, currentPost, onCurrentChange]);
|
|
|
|
// A video keeps playing only while its slide is on screen.
|
|
useEffect(() => {
|
|
reel.current?.querySelectorAll<HTMLElement>(":scope > .slide").forEach((el) => {
|
|
if (Number(el.dataset.index) !== index) el.querySelectorAll("video").forEach((v) => v.pause());
|
|
});
|
|
}, [index]);
|
|
|
|
return (
|
|
<section className="reel-feed" aria-label="Home feed" data-on-media={onMedia ? "true" : "false"}>
|
|
{p.newCount > 0 && p.status === "ready" ? (
|
|
<div className="reel-pill">
|
|
<GrowButton label={p.newCount === 1 ? "1 new post" : `${p.newCount} new posts`} onClick={p.onShowNew} />
|
|
</div>
|
|
) : null}
|
|
<TopBar />
|
|
<div className="rail-v" data-testid="feed-rail" aria-hidden="true">
|
|
<i style={{ height: `${railPercent(index, slideCount)}%` }} />
|
|
</div>
|
|
<div
|
|
className="reel"
|
|
data-testid="feed-reel"
|
|
data-current={index}
|
|
ref={(el) => {
|
|
reel.current = el;
|
|
setRef(p.listRef, el);
|
|
}}
|
|
>
|
|
{p.status === "error" ? (
|
|
<section className="slide slide-message is-cur" data-index={0} role="alert">
|
|
<p>The feed did not load.</p>
|
|
<SweepButton label="Try again" onClick={p.onRetry} />
|
|
</section>
|
|
) : null}
|
|
{p.status === "ready" && p.posts.length === 0 && !showLoad ? (
|
|
<section className="slide slide-message is-cur" data-index={0}>
|
|
<p>No posts yet.</p>
|
|
</section>
|
|
) : null}
|
|
{p.status === "ready"
|
|
? p.posts.flatMap((post, i) => {
|
|
const node = <PostSlide key={post.key} post={post} index={slideOf(i)} current={slideOf(i) === index} p={p} />;
|
|
return i === featuredAt - 1
|
|
? [node, <FeaturedSlide key="featured" index={featuredAt} current={index === featuredAt} experts={experts} />]
|
|
: [node];
|
|
})
|
|
: null}
|
|
{p.status === "ready" && p.loadMoreFailed ? (
|
|
<section className="slide slide-message" data-index={slideCount} role="alert">
|
|
<p>The feed did not load.</p>
|
|
<SweepButton label="Try again" onClick={p.onRetry} />
|
|
</section>
|
|
) : null}
|
|
{showLoad ? (
|
|
<LoadSlide
|
|
index={slideCount - 1}
|
|
current={index === slideCount - 1}
|
|
sentinelRef={p.status === "ready" ? p.sentinelRef : undefined}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
{p.status !== "error" ? (
|
|
<MobileDock
|
|
slide={{ index, kind, post: currentPost }}
|
|
onToggleLike={p.onToggleLike}
|
|
likeBusy={currentPost ? p.likeBusy?.has(currentPost.key) : false}
|
|
onOpenComments={(postId) => {
|
|
setSheet({ kind: "comments", postId });
|
|
p.onOpenComments?.(postId);
|
|
}}
|
|
onOpenComposer={() => {
|
|
setSheet({ kind: "composer" });
|
|
p.onOpenComposer?.();
|
|
}}
|
|
onOpenMore={() => {
|
|
setSheet({ kind: "more" });
|
|
p.onOpenMore?.();
|
|
}}
|
|
/>
|
|
) : null}
|
|
{sheet?.kind === "comments" ? (
|
|
<BottomSheet title="Comments" onClose={closeSheet} className="sheet-comments">
|
|
<CommentsSection postId={sheet.postId} onSignedOut={p.onSignedOut} />
|
|
</BottomSheet>
|
|
) : null}
|
|
{sheet?.kind === "composer" && p.composer ? (
|
|
<BottomSheet title="New post" onClose={closeSheet} className="sheet-composer">
|
|
<Composer {...p.composer} />
|
|
</BottomSheet>
|
|
) : null}
|
|
{sheet?.kind === "more" ? (
|
|
<DiscoverSheet experts={experts} onOpen={(panel) => setSheet({ kind: "panel", panel })} onClose={closeSheet} />
|
|
) : null}
|
|
{sheet?.kind === "panel" ? (
|
|
<DiscoverPanelSheet panel={sheet.panel} experts={experts} trending={p.trendingMinnects ?? []} search={p.searchPanel} onClose={closeSheet} />
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|