441 lines
13 KiB
TypeScript
441 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import type { CSSProperties } from "react";
|
|
import { useEffect, useMemo, useRef } from "react";
|
|
import Image from "next/image";
|
|
import {
|
|
Camera,
|
|
ImageIcon,
|
|
LockKeyhole,
|
|
MessageCircle,
|
|
RefreshCw,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
|
|
import type { PrivateRoomMoment } from "@/data/dto/private-room";
|
|
import { MobileShell } from "@/app/_components/core";
|
|
import { useGuestLoginBootstrap } from "@/hooks/use-guest-login-bootstrap";
|
|
import { ROUTES } from "@/router/routes";
|
|
import { useAppNavigator } from "@/router/use-app-navigator";
|
|
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
|
import {
|
|
usePrivateRoomDispatch,
|
|
usePrivateRoomState,
|
|
} from "@/stores/private-room";
|
|
import { useUserDispatch } from "@/stores/user/user-context";
|
|
|
|
import styles from "./private-room-screen.module.css";
|
|
|
|
const FALLBACK_PROFILE = {
|
|
name: "Elio Silvestri",
|
|
handle: "@elio.private",
|
|
avatar: "/images/chat/pic-chat-elio.png",
|
|
title: "Elio Private room",
|
|
subtitle: "Join me, unlock my private room",
|
|
bio: "Soft moments, private photos, and a little sweetness just for you.",
|
|
} as const;
|
|
|
|
export function PrivateRoomScreen() {
|
|
const navigator = useAppNavigator();
|
|
const authState = useAuthState();
|
|
const authDispatch = useAuthDispatch();
|
|
const userDispatch = useUserDispatch();
|
|
const state = usePrivateRoomState();
|
|
const dispatch = usePrivateRoomDispatch();
|
|
const previousLoginStatusRef = useRef(authState.loginStatus);
|
|
const lastUnlockSuccessNonceRef = useRef(0);
|
|
|
|
useGuestLoginBootstrap({
|
|
dispatch: authDispatch,
|
|
hasInitialized: authState.hasInitialized,
|
|
isLoading: authState.isLoading,
|
|
loginStatus: authState.loginStatus,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!authState.hasInitialized || authState.isLoading) return;
|
|
if (authState.loginStatus === "notLoggedIn") return;
|
|
|
|
const previousLoginStatus = previousLoginStatusRef.current;
|
|
previousLoginStatusRef.current = authState.loginStatus;
|
|
|
|
if (state.status === "idle") {
|
|
dispatch({ type: "PrivateRoomInit" });
|
|
return;
|
|
}
|
|
|
|
if (
|
|
previousLoginStatus !== authState.loginStatus &&
|
|
state.status !== "loading"
|
|
) {
|
|
dispatch({ type: "PrivateRoomRefresh" });
|
|
}
|
|
}, [
|
|
authState.hasInitialized,
|
|
authState.isLoading,
|
|
authState.loginStatus,
|
|
dispatch,
|
|
state.status,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
const request = state.unlockPaywallRequest;
|
|
if (!request) return;
|
|
|
|
if (
|
|
authState.loginStatus === "guest" ||
|
|
authState.loginStatus === "notLoggedIn"
|
|
) {
|
|
navigator.openAuth(ROUTES.privateRoom);
|
|
} else {
|
|
navigator.openSubscription({ type: "topup" });
|
|
}
|
|
dispatch({ type: "PrivateRoomUnlockPaywallConsumed" });
|
|
}, [
|
|
authState.loginStatus,
|
|
dispatch,
|
|
navigator,
|
|
state.unlockPaywallRequest,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (state.unlockSuccessNonce <= lastUnlockSuccessNonceRef.current) return;
|
|
lastUnlockSuccessNonceRef.current = state.unlockSuccessNonce;
|
|
userDispatch({ type: "UserFetch" });
|
|
}, [state.unlockSuccessNonce, userDispatch]);
|
|
|
|
const profile = state.profile;
|
|
const displayName =
|
|
profile?.displayName || profile?.authorName || FALLBACK_PROFILE.name;
|
|
const avatarUrl = profile?.avatarUrl || FALLBACK_PROFILE.avatar;
|
|
const title = profile?.title || FALLBACK_PROFILE.title;
|
|
const subtitle = profile?.subtitle || FALLBACK_PROFILE.subtitle;
|
|
const pendingMoment = useMemo(
|
|
() =>
|
|
state.items.find(
|
|
(item) => item.momentId === state.pendingConfirmMomentId,
|
|
) ?? null,
|
|
[state.items, state.pendingConfirmMomentId],
|
|
);
|
|
|
|
const handleTopUpClick = () => {
|
|
if (
|
|
authState.loginStatus === "guest" ||
|
|
authState.loginStatus === "notLoggedIn"
|
|
) {
|
|
navigator.openAuth(ROUTES.privateRoom);
|
|
return;
|
|
}
|
|
navigator.openSubscription({ type: "topup" });
|
|
};
|
|
|
|
return (
|
|
<MobileShell background="#fff7ed">
|
|
<main className={styles.shell}>
|
|
<div className={styles.backgroundGlowOne} />
|
|
<div className={styles.backgroundGlowTwo} />
|
|
|
|
<section className={styles.hero} aria-labelledby="private-room-title">
|
|
<div className={styles.heroTopline}>
|
|
<span className={styles.liveDot} aria-hidden="true" />
|
|
<span>Private room is open</span>
|
|
</div>
|
|
|
|
<div className={styles.identity}>
|
|
<div className={styles.avatarFrame}>
|
|
<Image
|
|
src={avatarUrl}
|
|
alt={displayName}
|
|
width={72}
|
|
height={72}
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.identityText}>
|
|
<h1 id="private-room-title" className={styles.title}>
|
|
{displayName}
|
|
</h1>
|
|
<p className={styles.handle}>{title}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className={styles.bio}>{subtitle || FALLBACK_PROFILE.bio}</p>
|
|
|
|
<button
|
|
type="button"
|
|
className={styles.primaryCta}
|
|
onClick={handleTopUpClick}
|
|
>
|
|
<Sparkles size={16} aria-hidden="true" />
|
|
<span>Top up credits</span>
|
|
</button>
|
|
</section>
|
|
|
|
<section className={styles.postsSection} aria-labelledby="posts-title">
|
|
<div className={styles.sectionHeader}>
|
|
<div>
|
|
<p className={styles.kicker}>Posts</p>
|
|
<h2 id="posts-title" className={styles.sectionTitle}>
|
|
Private moments
|
|
</h2>
|
|
</div>
|
|
<span className={styles.postCount}>{state.items.length}</span>
|
|
</div>
|
|
|
|
{state.errorMessage ? (
|
|
<StatusCard
|
|
message={state.errorMessage}
|
|
actionLabel="Retry"
|
|
onAction={() => dispatch({ type: "PrivateRoomRefresh" })}
|
|
/>
|
|
) : null}
|
|
|
|
{state.isLoading && state.items.length === 0 ? (
|
|
<StatusCard message="Loading private moments..." />
|
|
) : null}
|
|
|
|
{!state.isLoading && state.items.length === 0 && !state.errorMessage ? (
|
|
<StatusCard
|
|
message="No private moments yet."
|
|
actionLabel="Refresh"
|
|
onAction={() => dispatch({ type: "PrivateRoomRefresh" })}
|
|
/>
|
|
) : null}
|
|
|
|
<div className={styles.timeline}>
|
|
{state.items.map((moment, index) => (
|
|
<PrivateRoomPostCard
|
|
key={moment.momentId}
|
|
moment={moment}
|
|
displayName={displayName}
|
|
avatarUrl={avatarUrl}
|
|
index={index}
|
|
isUnlocking={state.unlockingMomentId === moment.momentId}
|
|
onUnlock={() =>
|
|
dispatch({
|
|
type: "PrivateRoomUnlockRequested",
|
|
momentId: moment.momentId,
|
|
})
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{state.hasMore ? (
|
|
<button
|
|
type="button"
|
|
className={styles.loadMoreButton}
|
|
disabled={state.isLoadingMore}
|
|
onClick={() => dispatch({ type: "PrivateRoomLoadMore" })}
|
|
>
|
|
<RefreshCw size={15} aria-hidden="true" />
|
|
{state.isLoadingMore ? "Loading..." : "Load more"}
|
|
</button>
|
|
) : null}
|
|
</section>
|
|
|
|
<nav className={styles.bottomNav} aria-label="Private room navigation">
|
|
<button
|
|
type="button"
|
|
className={styles.navButton}
|
|
onClick={() => navigator.openChat({ replace: false })}
|
|
>
|
|
<MessageCircle size={20} aria-hidden="true" />
|
|
<span>Chat</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`${styles.navButton} ${styles.navButtonActive}`}
|
|
aria-current="page"
|
|
>
|
|
<Camera size={20} aria-hidden="true" />
|
|
<span>Elio Private room</span>
|
|
</button>
|
|
</nav>
|
|
|
|
{pendingMoment ? (
|
|
<UnlockConfirmDialog
|
|
moment={pendingMoment}
|
|
isUnlocking={state.isUnlocking}
|
|
errorMessage={state.unlockErrorMessage}
|
|
onCancel={() => dispatch({ type: "PrivateRoomUnlockCancelled" })}
|
|
onConfirm={() => dispatch({ type: "PrivateRoomUnlockConfirmed" })}
|
|
/>
|
|
) : state.unlockErrorMessage ? (
|
|
<div className={styles.toast} role="status">
|
|
{state.unlockErrorMessage}
|
|
</div>
|
|
) : null}
|
|
</main>
|
|
</MobileShell>
|
|
);
|
|
}
|
|
|
|
function PrivateRoomPostCard({
|
|
moment,
|
|
displayName,
|
|
avatarUrl,
|
|
index,
|
|
isUnlocking,
|
|
onUnlock,
|
|
}: {
|
|
moment: PrivateRoomMoment;
|
|
displayName: string;
|
|
avatarUrl: string;
|
|
index: number;
|
|
isUnlocking: boolean;
|
|
onUnlock: () => void;
|
|
}) {
|
|
const isLocked = moment.locked || moment.lockDetail.locked;
|
|
const imageUrls = moment.images
|
|
.filter((image) => !image.locked && image.url)
|
|
.map((image) => image.url as string);
|
|
const photoCount = moment.mediaCount || moment.images.length || 1;
|
|
|
|
return (
|
|
<article
|
|
className={styles.postCard}
|
|
style={{ "--reveal-index": index } as CSSProperties}
|
|
>
|
|
<header className={styles.postHeader}>
|
|
<div className={styles.postAuthor}>
|
|
<Image
|
|
src={avatarUrl}
|
|
alt=""
|
|
width={38}
|
|
height={38}
|
|
className={styles.postAvatar}
|
|
/>
|
|
<div>
|
|
<p className={styles.authorName}>{moment.author.name || displayName}</p>
|
|
<p className={styles.authorSubline}>
|
|
{moment.title || "Private room drop"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<time className={styles.postTime}>
|
|
{moment.timeText || formatMomentTime(moment.publishedAt)}
|
|
</time>
|
|
</header>
|
|
|
|
{moment.text || moment.content ? (
|
|
<p className={styles.postText}>{moment.text || moment.content}</p>
|
|
) : null}
|
|
|
|
{isLocked ? (
|
|
<button
|
|
type="button"
|
|
className={styles.lockedPreview}
|
|
disabled={isUnlocking}
|
|
onClick={onUnlock}
|
|
aria-label={`Unlock ${photoCount} private room photos from ${displayName}`}
|
|
>
|
|
<div className={styles.previewIcon}>
|
|
<LockKeyhole size={18} aria-hidden="true" />
|
|
</div>
|
|
<div className={styles.previewText}>
|
|
<strong>{moment.unlockCost} credits</strong>
|
|
<span>{moment.textPreview || "Unlock to view"}</span>
|
|
<small>
|
|
<ImageIcon size={13} aria-hidden="true" />
|
|
{photoCount} {photoCount === 1 ? "photo" : "photos"}
|
|
</small>
|
|
</div>
|
|
</button>
|
|
) : (
|
|
<div className={styles.imageGrid}>
|
|
{imageUrls.map((url, imageIndex) => (
|
|
<Image
|
|
key={`${moment.momentId}-${imageIndex}`}
|
|
src={url}
|
|
alt=""
|
|
width={420}
|
|
height={420}
|
|
className={styles.unlockedImage}
|
|
sizes="(max-width: 540px) 86vw, 460px"
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function UnlockConfirmDialog({
|
|
moment,
|
|
isUnlocking,
|
|
errorMessage,
|
|
onCancel,
|
|
onConfirm,
|
|
}: {
|
|
moment: PrivateRoomMoment;
|
|
isUnlocking: boolean;
|
|
errorMessage: string | null;
|
|
onCancel: () => void;
|
|
onConfirm: () => void;
|
|
}) {
|
|
return (
|
|
<div className={styles.dialogOverlay} role="alertdialog" aria-modal="true">
|
|
<div className={styles.dialog}>
|
|
<h2 className={styles.dialogTitle}>Unlock private moment?</h2>
|
|
<p className={styles.dialogCopy}>
|
|
This will use {moment.unlockCost} credits.
|
|
</p>
|
|
{errorMessage ? (
|
|
<p className={styles.dialogError}>{errorMessage}</p>
|
|
) : null}
|
|
<div className={styles.dialogActions}>
|
|
<button
|
|
type="button"
|
|
className={styles.dialogSecondary}
|
|
disabled={isUnlocking}
|
|
onClick={onCancel}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={styles.dialogPrimary}
|
|
disabled={isUnlocking}
|
|
onClick={onConfirm}
|
|
>
|
|
{isUnlocking ? "Unlocking..." : "Unlock"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatusCard({
|
|
message,
|
|
actionLabel,
|
|
onAction,
|
|
}: {
|
|
message: string;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
}) {
|
|
return (
|
|
<div className={styles.statusCard}>
|
|
<p>{message}</p>
|
|
{actionLabel && onAction ? (
|
|
<button type="button" onClick={onAction}>
|
|
{actionLabel}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatMomentTime(value: string | null): string {
|
|
if (!value) return "";
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return "";
|
|
return date.toLocaleDateString(undefined, {
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
}
|