feat(private-room): migrate to album APIs
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
buildPrivateAlbumGalleryUrl,
|
||||
buildPrivateRoomWithoutGalleryUrl,
|
||||
getPrivateAlbumGalleryState,
|
||||
} from "../private-album-gallery-url";
|
||||
|
||||
describe("private album gallery URL", () => {
|
||||
it("builds and parses an album image URL", () => {
|
||||
const url = buildPrivateAlbumGalleryUrl("album:91", 3);
|
||||
const params = new URL(url, "https://cozsweet.test").searchParams;
|
||||
|
||||
expect(url).toBe("/private-room?album=album%3A91&image=3");
|
||||
expect(getPrivateAlbumGalleryState(params)).toEqual({
|
||||
albumId: "album:91",
|
||||
imageIndex: 3,
|
||||
});
|
||||
});
|
||||
|
||||
it("rejects missing albums and invalid image indexes", () => {
|
||||
expect(getPrivateAlbumGalleryState(new URLSearchParams("image=0"))).toBeNull();
|
||||
expect(
|
||||
getPrivateAlbumGalleryState(
|
||||
new URLSearchParams("album=album-1&image=-1"),
|
||||
),
|
||||
).toBeNull();
|
||||
});
|
||||
|
||||
it("removes gallery params without dropping other query values", () => {
|
||||
expect(
|
||||
buildPrivateRoomWithoutGalleryUrl(
|
||||
new URLSearchParams("album=album-1&image=2&source=external"),
|
||||
),
|
||||
).toBe("/private-room?source=external");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,91 @@
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { PrivateAlbum } from "@/data/dto/private-room";
|
||||
|
||||
import { PrivateAlbumCard } from "../private-album-card";
|
||||
|
||||
const COVER_URL = "/images/private-room/banner.png";
|
||||
|
||||
function makeAlbum(
|
||||
overrides: Partial<Parameters<typeof PrivateAlbum.from>[0]> = {},
|
||||
): PrivateAlbum {
|
||||
return PrivateAlbum.from({
|
||||
albumId: "album-1",
|
||||
title: "Private morning",
|
||||
content: "A quiet morning by the water.",
|
||||
previewText: "Only for you.",
|
||||
imageCount: 8,
|
||||
images: [],
|
||||
locked: false,
|
||||
unlocked: true,
|
||||
unlockCost: 320,
|
||||
publishedAt: "2026-07-01T08:11:35+00:00",
|
||||
lockDetail: { locked: false },
|
||||
...overrides,
|
||||
});
|
||||
}
|
||||
|
||||
function renderCard(album: PrivateAlbum): string {
|
||||
return renderToStaticMarkup(
|
||||
<PrivateAlbumCard
|
||||
album={album}
|
||||
displayName="Elio Silvestri"
|
||||
avatarUrl="/images/chat/pic-chat-elio.png"
|
||||
index={0}
|
||||
isUnlocking={false}
|
||||
onOpenGallery={() => undefined}
|
||||
onUnlock={() => undefined}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
describe("PrivateAlbumCard", () => {
|
||||
it("renders only the first unlocked image and its photo count", () => {
|
||||
const html = renderCard(
|
||||
makeAlbum({
|
||||
imageCount: 8,
|
||||
images: [
|
||||
{ url: COVER_URL, locked: false, index: 0 },
|
||||
{
|
||||
url: "/images/splash/pic-bg-home.png",
|
||||
locked: false,
|
||||
index: 1,
|
||||
},
|
||||
],
|
||||
}),
|
||||
);
|
||||
|
||||
expect(html).toContain("banner.png");
|
||||
expect(html).not.toContain("pic-bg-home.png");
|
||||
expect(html).toContain("8 photos");
|
||||
expect(html).toContain("A quiet morning by the water.");
|
||||
expect(html).toContain('aria-label="Open 8 private album photos"');
|
||||
});
|
||||
|
||||
it("uses the backend first image as the locked cover", () => {
|
||||
const html = renderCard(
|
||||
makeAlbum({
|
||||
content: null,
|
||||
locked: true,
|
||||
unlocked: false,
|
||||
lockDetail: { locked: true },
|
||||
images: [{ url: COVER_URL, locked: true, index: 0 }],
|
||||
}),
|
||||
);
|
||||
|
||||
expect(html).toContain("banner.png");
|
||||
expect(html).toContain(
|
||||
'aria-label="Unlock 8 private room photos from Elio Silvestri"',
|
||||
);
|
||||
expect(html).toContain("Only for you.");
|
||||
expect(html).toContain("320 credits");
|
||||
});
|
||||
|
||||
it("renders an empty cover when an unlocked album has no image", () => {
|
||||
const html = renderCard(makeAlbum());
|
||||
|
||||
expect(html).toContain('aria-label="No private album photo available"');
|
||||
expect(html).toContain("No photo available");
|
||||
});
|
||||
});
|
||||
@@ -1,106 +0,0 @@
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { PrivateRoomMoment } from "@/data/dto/private-room";
|
||||
|
||||
import { PrivateRoomPostCard } from "../private-room-post-card";
|
||||
|
||||
function makeMoment(
|
||||
overrides: Partial<Parameters<typeof PrivateRoomMoment.from>[0]> = {},
|
||||
): PrivateRoomMoment {
|
||||
return PrivateRoomMoment.from({
|
||||
momentId: "schedule:91",
|
||||
author: {
|
||||
id: "elio",
|
||||
name: "Elio Silvestri",
|
||||
avatarUrl: null,
|
||||
},
|
||||
publishedAt: "2026-07-01T08:11:35+00:00",
|
||||
timeText: "7 days ago",
|
||||
title: "Private morning",
|
||||
content: "A quiet morning by the water.",
|
||||
text: "A quiet morning by the water.",
|
||||
textPreview: "Unlock to view private room photos",
|
||||
mediaCount: 1,
|
||||
images: [],
|
||||
locked: false,
|
||||
unlockCost: 40,
|
||||
...overrides,
|
||||
});
|
||||
}
|
||||
|
||||
function renderCard(moment: PrivateRoomMoment): string {
|
||||
return renderToStaticMarkup(
|
||||
<PrivateRoomPostCard
|
||||
moment={moment}
|
||||
displayName="Elio Silvestri"
|
||||
avatarUrl="/images/chat/pic-chat-elio.png"
|
||||
index={0}
|
||||
isUnlocking={false}
|
||||
onUnlock={() => undefined}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
describe("PrivateRoomPostCard", () => {
|
||||
it("renders only the first unlocked image and a multi-photo badge", () => {
|
||||
const html = renderCard(
|
||||
makeMoment({
|
||||
mediaCount: 3,
|
||||
images: [
|
||||
{
|
||||
url: "/images/private-room/banner.png",
|
||||
type: "image",
|
||||
locked: false,
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
url: "/images/splash/pic-bg-home.png",
|
||||
type: "image",
|
||||
locked: false,
|
||||
index: 1,
|
||||
},
|
||||
],
|
||||
}),
|
||||
);
|
||||
|
||||
expect(html).toContain("banner.png");
|
||||
expect(html).not.toContain("pic-bg-home.png");
|
||||
expect(html).toContain("3 photos");
|
||||
expect(html).toContain("A quiet morning by the water.");
|
||||
});
|
||||
|
||||
it("renders a locked cover without attempting to render a missing URL", () => {
|
||||
const html = renderCard(
|
||||
makeMoment({
|
||||
locked: true,
|
||||
mediaCount: 2,
|
||||
content: null,
|
||||
text: null,
|
||||
images: [
|
||||
{
|
||||
url: null,
|
||||
type: "image",
|
||||
locked: true,
|
||||
index: 0,
|
||||
},
|
||||
],
|
||||
}),
|
||||
);
|
||||
|
||||
expect(html).toContain(
|
||||
'aria-label="Unlock 2 private room photos from Elio Silvestri"',
|
||||
);
|
||||
expect(html).toContain("Unlock to view private room photos");
|
||||
expect(html).toContain("40 credits");
|
||||
expect(html).toContain("2 photos");
|
||||
expect(html).not.toContain("No photo available");
|
||||
});
|
||||
|
||||
it("renders an empty cover when an unlocked moment has no first image", () => {
|
||||
const html = renderCard(makeMoment());
|
||||
|
||||
expect(html).toContain('aria-label="No private moment photo available"');
|
||||
expect(html).toContain("No photo available");
|
||||
});
|
||||
});
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from "./private-room-post-card";
|
||||
export * from "./private-album-card";
|
||||
export * from "./private-album-gallery";
|
||||
export * from "./status-card";
|
||||
export * from "./unlock-confirm-dialog";
|
||||
|
||||
+39
-23
@@ -3,33 +3,34 @@ import Image from "next/image";
|
||||
import { ImageIcon, LockKeyhole } from "lucide-react";
|
||||
|
||||
import { CharacterAvatar } from "@/app/_components";
|
||||
import type { PrivateRoomMoment } from "@/data/dto/private-room";
|
||||
import type { PrivateAlbum } from "@/data/dto/private-room";
|
||||
import { isPrivateAlbumLocked } from "@/lib/private-room/private_album";
|
||||
|
||||
import styles from "../private-room-screen.module.css";
|
||||
|
||||
export interface PrivateRoomPostCardProps {
|
||||
moment: PrivateRoomMoment;
|
||||
export interface PrivateAlbumCardProps {
|
||||
album: PrivateAlbum;
|
||||
displayName: string;
|
||||
avatarUrl: string;
|
||||
index: number;
|
||||
isUnlocking: boolean;
|
||||
onOpenGallery: () => void;
|
||||
onUnlock: () => void;
|
||||
}
|
||||
|
||||
export function PrivateRoomPostCard({
|
||||
moment,
|
||||
export function PrivateAlbumCard({
|
||||
album,
|
||||
displayName,
|
||||
avatarUrl,
|
||||
index,
|
||||
isUnlocking,
|
||||
onOpenGallery,
|
||||
onUnlock,
|
||||
}: PrivateRoomPostCardProps) {
|
||||
const isLocked = moment.locked;
|
||||
const firstImage = moment.images[0];
|
||||
const firstImageUrl =
|
||||
!isLocked && firstImage?.locked !== true ? firstImage?.url : null;
|
||||
const photoCount = moment.mediaCount || moment.images.length || 1;
|
||||
const postText = moment.text || moment.content;
|
||||
}: PrivateAlbumCardProps) {
|
||||
const isLocked = isPrivateAlbumLocked(album);
|
||||
const firstImage = album.images[0];
|
||||
const firstImageUrl = firstImage?.url || null;
|
||||
const photoCount = album.imageCount || album.images.length;
|
||||
|
||||
return (
|
||||
<article
|
||||
@@ -46,14 +47,14 @@ export function PrivateRoomPostCard({
|
||||
className={styles.postAvatar}
|
||||
/>
|
||||
<div>
|
||||
<p className={styles.authorName}>{moment.author.name || displayName}</p>
|
||||
<p className={styles.authorName}>{displayName}</p>
|
||||
<p className={styles.authorSubline}>
|
||||
{moment.title || "Private room drop"}
|
||||
{album.title || "Private album"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<time className={styles.postTime}>
|
||||
{moment.timeText || formatMomentTime(moment.publishedAt)}
|
||||
{formatAlbumTime(album.publishedAt)}
|
||||
</time>
|
||||
</header>
|
||||
|
||||
@@ -65,13 +66,23 @@ export function PrivateRoomPostCard({
|
||||
onClick={onUnlock}
|
||||
aria-label={`Unlock ${photoCount} private room photos from ${displayName}`}
|
||||
>
|
||||
{firstImageUrl ? (
|
||||
<Image
|
||||
src={firstImageUrl}
|
||||
alt=""
|
||||
fill
|
||||
sizes="(max-width: 540px) calc(100vw - 36px), 484px"
|
||||
className={styles.lockedCoverImage}
|
||||
/>
|
||||
) : null}
|
||||
<span className={styles.lockedPreviewScrim} aria-hidden="true" />
|
||||
<div className={styles.lockedPreviewContent}>
|
||||
<div className={styles.previewIcon}>
|
||||
<LockKeyhole size={22} aria-hidden="true" />
|
||||
</div>
|
||||
<div className={styles.previewText}>
|
||||
<span>{moment.textPreview || "Unlock to view"}</span>
|
||||
<strong>{moment.unlockCost} credits</strong>
|
||||
<span>{album.previewText || "Unlock to view"}</span>
|
||||
<strong>{album.unlockCost} credits</strong>
|
||||
<small>
|
||||
<ImageIcon size={13} aria-hidden="true" />
|
||||
{photoCount} {photoCount === 1 ? "photo" : "photos"}
|
||||
@@ -80,10 +91,15 @@ export function PrivateRoomPostCard({
|
||||
</div>
|
||||
</button>
|
||||
) : firstImageUrl ? (
|
||||
<div className={styles.mediaCover}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.mediaCover}
|
||||
onClick={onOpenGallery}
|
||||
aria-label={`Open ${photoCount} private album photos`}
|
||||
>
|
||||
<Image
|
||||
src={firstImageUrl}
|
||||
alt={`${moment.title || displayName} private moment`}
|
||||
alt={`${album.title || displayName} private album`}
|
||||
width={720}
|
||||
height={900}
|
||||
className={styles.momentCoverImage}
|
||||
@@ -95,24 +111,24 @@ export function PrivateRoomPostCard({
|
||||
{photoCount} photos
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
) : (
|
||||
<div
|
||||
className={styles.emptyMediaCover}
|
||||
role="img"
|
||||
aria-label="No private moment photo available"
|
||||
aria-label="No private album photo available"
|
||||
>
|
||||
<ImageIcon size={32} aria-hidden="true" />
|
||||
<span>No photo available</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{postText ? <p className={styles.postText}>{postText}</p> : null}
|
||||
{album.content ? <p className={styles.postText}>{album.content}</p> : null}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function formatMomentTime(value: string | null): string {
|
||||
function formatAlbumTime(value: string | null): string {
|
||||
if (!value) return "";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return "";
|
||||
@@ -0,0 +1,113 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import Image from "next/image";
|
||||
import { ChevronLeft, ChevronRight, X } from "lucide-react";
|
||||
|
||||
import type { PrivateAlbum } from "@/data/dto/private-room";
|
||||
|
||||
import styles from "../private-room-screen.module.css";
|
||||
|
||||
export interface PrivateAlbumGalleryProps {
|
||||
album: PrivateAlbum;
|
||||
imageIndex: number;
|
||||
onClose: () => void;
|
||||
onImageIndexChange: (index: number) => void;
|
||||
}
|
||||
|
||||
export function PrivateAlbumGallery({
|
||||
album,
|
||||
imageIndex,
|
||||
onClose,
|
||||
onImageIndexChange,
|
||||
}: PrivateAlbumGalleryProps) {
|
||||
const touchStartXRef = useRef<number | null>(null);
|
||||
const currentImage = album.images[imageIndex];
|
||||
const hasPrevious = imageIndex > 0;
|
||||
const hasNext = imageIndex < album.images.length - 1;
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") onClose();
|
||||
if (event.key === "ArrowLeft" && hasPrevious) {
|
||||
onImageIndexChange(imageIndex - 1);
|
||||
}
|
||||
if (event.key === "ArrowRight" && hasNext) {
|
||||
onImageIndexChange(imageIndex + 1);
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [hasNext, hasPrevious, imageIndex, onClose, onImageIndexChange]);
|
||||
|
||||
if (!currentImage?.url) return null;
|
||||
|
||||
const handleTouchEnd = (event: React.TouchEvent) => {
|
||||
const touchStartX = touchStartXRef.current;
|
||||
touchStartXRef.current = null;
|
||||
if (touchStartX === null) return;
|
||||
const delta = event.changedTouches[0]?.clientX ?? touchStartX;
|
||||
const distance = delta - touchStartX;
|
||||
if (distance > 48 && hasPrevious) onImageIndexChange(imageIndex - 1);
|
||||
if (distance < -48 && hasNext) onImageIndexChange(imageIndex + 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.galleryOverlay}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={album.title || "Private album gallery"}
|
||||
onTouchStart={(event) => {
|
||||
touchStartXRef.current = event.touches[0]?.clientX ?? null;
|
||||
}}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.galleryClose}
|
||||
onClick={onClose}
|
||||
aria-label="Close private album gallery"
|
||||
>
|
||||
<X size={24} aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<div className={styles.galleryImageFrame}>
|
||||
<Image
|
||||
src={currentImage.url}
|
||||
alt={`${album.title || "Private album"} photo ${imageIndex + 1}`}
|
||||
fill
|
||||
priority
|
||||
draggable={false}
|
||||
sizes="(max-width: 540px) 100vw, 540px"
|
||||
className={styles.galleryImage}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className={styles.galleryCounter}>
|
||||
{imageIndex + 1} / {album.images.length}
|
||||
</span>
|
||||
|
||||
{hasPrevious ? (
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.galleryNav} ${styles.galleryPrevious}`}
|
||||
onClick={() => onImageIndexChange(imageIndex - 1)}
|
||||
aria-label="Previous photo"
|
||||
>
|
||||
<ChevronLeft size={30} aria-hidden="true" />
|
||||
</button>
|
||||
) : null}
|
||||
{hasNext ? (
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.galleryNav} ${styles.galleryNext}`}
|
||||
onClick={() => onImageIndexChange(imageIndex + 1)}
|
||||
aria-label="Next photo"
|
||||
>
|
||||
<ChevronRight size={30} aria-hidden="true" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import type { PrivateRoomMoment } from "@/data/dto/private-room";
|
||||
import type { PrivateAlbum } from "@/data/dto/private-room";
|
||||
|
||||
import styles from "../private-room-screen.module.css";
|
||||
|
||||
export interface UnlockConfirmDialogProps {
|
||||
moment: PrivateRoomMoment;
|
||||
album: PrivateAlbum;
|
||||
isUnlocking: boolean;
|
||||
errorMessage: string | null;
|
||||
onCancel: () => void;
|
||||
@@ -11,7 +11,7 @@ export interface UnlockConfirmDialogProps {
|
||||
}
|
||||
|
||||
export function UnlockConfirmDialog({
|
||||
moment,
|
||||
album,
|
||||
isUnlocking,
|
||||
errorMessage,
|
||||
onCancel,
|
||||
@@ -20,9 +20,9 @@ export function UnlockConfirmDialog({
|
||||
return (
|
||||
<div className={styles.dialogOverlay} role="alertdialog" aria-modal="true">
|
||||
<div className={styles.dialog}>
|
||||
<h2 className={styles.dialogTitle}>Unlock private moment?</h2>
|
||||
<h2 className={styles.dialogTitle}>Unlock private album?</h2>
|
||||
<p className={styles.dialogCopy}>
|
||||
This will use {moment.unlockCost} credits.
|
||||
Unlock {album.imageCount} photos for {album.unlockCost} credits.
|
||||
</p>
|
||||
{errorMessage ? (
|
||||
<p className={styles.dialogError}>{errorMessage}</p>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { ROUTES } from "@/router/routes";
|
||||
|
||||
export const PRIVATE_ALBUM_QUERY_PARAM = "album";
|
||||
export const PRIVATE_ALBUM_IMAGE_QUERY_PARAM = "image";
|
||||
|
||||
export function getPrivateAlbumGalleryState(input: {
|
||||
get: (key: string) => string | null;
|
||||
}): { albumId: string; imageIndex: number } | null {
|
||||
const albumId = input.get(PRIVATE_ALBUM_QUERY_PARAM)?.trim();
|
||||
const imageIndex = Number(input.get(PRIVATE_ALBUM_IMAGE_QUERY_PARAM) ?? "0");
|
||||
if (!albumId || !Number.isInteger(imageIndex) || imageIndex < 0) return null;
|
||||
return { albumId, imageIndex };
|
||||
}
|
||||
|
||||
export function buildPrivateAlbumGalleryUrl(
|
||||
albumId: string,
|
||||
imageIndex: number,
|
||||
): `/private-room?${string}` {
|
||||
const params = new URLSearchParams({
|
||||
[PRIVATE_ALBUM_QUERY_PARAM]: albumId,
|
||||
[PRIVATE_ALBUM_IMAGE_QUERY_PARAM]: String(imageIndex),
|
||||
});
|
||||
return `${ROUTES.privateRoom}?${params.toString()}` as const;
|
||||
}
|
||||
|
||||
export function buildPrivateRoomWithoutGalleryUrl(input: {
|
||||
toString: () => string;
|
||||
}): string {
|
||||
const params = new URLSearchParams(input.toString());
|
||||
params.delete(PRIVATE_ALBUM_QUERY_PARAM);
|
||||
params.delete(PRIVATE_ALBUM_IMAGE_QUERY_PARAM);
|
||||
const query = params.toString();
|
||||
return query ? `${ROUTES.privateRoom}?${query}` : ROUTES.privateRoom;
|
||||
}
|
||||
@@ -121,8 +121,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.primaryCta,
|
||||
.loadMoreButton {
|
||||
.primaryCta {
|
||||
display: inline-flex;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
@@ -320,7 +319,7 @@
|
||||
|
||||
.lockedPreviewContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
max-width: 260px;
|
||||
flex-direction: column;
|
||||
@@ -328,6 +327,19 @@
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.lockedCoverImage {
|
||||
object-fit: cover;
|
||||
filter: blur(18px);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.lockedPreviewScrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: rgba(28, 19, 23, 0.46);
|
||||
}
|
||||
|
||||
.previewIcon {
|
||||
display: grid;
|
||||
width: 58px;
|
||||
@@ -374,10 +386,17 @@
|
||||
|
||||
.mediaCover {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
border-radius: clamp(20px, 5.185vw, 28px);
|
||||
background: #f3eef0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: inherit;
|
||||
box-shadow: 0 14px 32px rgba(131, 72, 85, 0.14);
|
||||
}
|
||||
|
||||
@@ -439,16 +458,87 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.statusCard button,
|
||||
.loadMoreButton {
|
||||
.statusCard button {
|
||||
padding: 0 18px;
|
||||
background: rgba(255, 93, 149, 0.12);
|
||||
color: #a94c64;
|
||||
}
|
||||
|
||||
.loadMoreButton {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
.galleryOverlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
width: min(100vw, var(--app-max-width, 540px));
|
||||
height: var(--app-viewport-height, 100dvh);
|
||||
margin-inline: auto;
|
||||
overflow: hidden;
|
||||
background: #090909;
|
||||
color: #ffffff;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.galleryImageFrame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.galleryImage {
|
||||
object-fit: contain;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.galleryClose,
|
||||
.galleryNav {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 16, 16, 0.58);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(12px);
|
||||
transition: background 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.galleryClose {
|
||||
top: calc(var(--app-safe-top, 0px) + 14px);
|
||||
right: calc(var(--app-safe-right, 0px) + 14px);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.galleryNav {
|
||||
top: 50%;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.galleryPrevious {
|
||||
left: calc(var(--app-safe-left, 0px) + 10px);
|
||||
}
|
||||
|
||||
.galleryNext {
|
||||
right: calc(var(--app-safe-right, 0px) + 10px);
|
||||
}
|
||||
|
||||
.galleryCounter {
|
||||
position: absolute;
|
||||
bottom: calc(var(--app-safe-bottom, 0px) + 18px);
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
min-width: 62px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 16, 16, 0.62);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.dialogOverlay {
|
||||
@@ -535,21 +625,42 @@
|
||||
}
|
||||
|
||||
.primaryCta:hover,
|
||||
.lockedPreview:hover,
|
||||
.loadMoreButton:hover {
|
||||
.lockedPreview:hover {
|
||||
filter: brightness(1.04);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mediaCover:hover {
|
||||
filter: brightness(1.02);
|
||||
}
|
||||
|
||||
.galleryClose:hover,
|
||||
.galleryNav:hover {
|
||||
background: rgba(38, 38, 38, 0.82);
|
||||
}
|
||||
|
||||
.primaryCta:active,
|
||||
.lockedPreview:active,
|
||||
.loadMoreButton:active {
|
||||
.lockedPreview:active {
|
||||
transform: translateY(1px) scale(0.99);
|
||||
}
|
||||
|
||||
.mediaCover:active {
|
||||
transform: scale(0.995);
|
||||
}
|
||||
|
||||
.galleryClose:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
.galleryNav:active {
|
||||
transform: translateY(-50%) scale(0.94);
|
||||
}
|
||||
|
||||
.primaryCta:focus-visible,
|
||||
.lockedPreview:focus-visible,
|
||||
.loadMoreButton:focus-visible,
|
||||
.mediaCover:focus-visible,
|
||||
.galleryClose:focus-visible,
|
||||
.galleryNav:focus-visible,
|
||||
.dialogPrimary:focus-visible,
|
||||
.dialogSecondary:focus-visible {
|
||||
outline: 2px solid #ff5d95;
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import Image from "next/image";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
|
||||
import { CharacterAvatar } from "@/app/_components";
|
||||
import { AppBottomNav, MobileShell } from "@/app/_components/core";
|
||||
import { ROUTES } from "@/router/routes";
|
||||
import { useAppNavigator } from "@/router/use-app-navigator";
|
||||
import { isPrivateAlbumLocked } from "@/lib/private-room/private_album";
|
||||
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
||||
import {
|
||||
usePrivateRoomDispatch,
|
||||
@@ -15,7 +16,8 @@ import {
|
||||
} from "@/stores/private-room";
|
||||
|
||||
import {
|
||||
PrivateRoomPostCard,
|
||||
PrivateAlbumCard,
|
||||
PrivateAlbumGallery,
|
||||
StatusCard,
|
||||
UnlockConfirmDialog,
|
||||
} from "./components";
|
||||
@@ -26,21 +28,32 @@ import {
|
||||
usePrivateRoomUnlockPaywallNavigation,
|
||||
usePrivateRoomUnlockSuccessRefresh,
|
||||
} from "./use-private-room-flow";
|
||||
import {
|
||||
buildPrivateAlbumGalleryUrl,
|
||||
buildPrivateRoomWithoutGalleryUrl,
|
||||
getPrivateAlbumGalleryState,
|
||||
} from "./private-album-gallery-url";
|
||||
|
||||
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",
|
||||
} as const;
|
||||
|
||||
export function PrivateRoomScreen() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const navigator = useAppNavigator();
|
||||
const authState = useAuthState();
|
||||
const authDispatch = useAuthDispatch();
|
||||
const state = usePrivateRoomState();
|
||||
const dispatch = usePrivateRoomDispatch();
|
||||
const openedGalleryInPageRef = useRef(false);
|
||||
const galleryState = useMemo(
|
||||
() => getPrivateAlbumGalleryState(searchParams),
|
||||
[searchParams],
|
||||
);
|
||||
|
||||
usePrivateRoomBootstrapFlow({
|
||||
authDispatch,
|
||||
@@ -57,19 +70,39 @@ export function PrivateRoomScreen() {
|
||||
});
|
||||
usePrivateRoomUnlockSuccessRefresh(state.unlockSuccessNonce);
|
||||
|
||||
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(
|
||||
const displayName = FALLBACK_PROFILE.name;
|
||||
const avatarUrl = FALLBACK_PROFILE.avatar;
|
||||
const title = FALLBACK_PROFILE.title;
|
||||
const subtitle = FALLBACK_PROFILE.subtitle;
|
||||
const pendingAlbum = useMemo(
|
||||
() =>
|
||||
state.items.find(
|
||||
(item) => item.momentId === state.pendingConfirmMomentId,
|
||||
(album) => album.albumId === state.pendingConfirmAlbumId,
|
||||
) ?? null,
|
||||
[state.items, state.pendingConfirmMomentId],
|
||||
[state.items, state.pendingConfirmAlbumId],
|
||||
);
|
||||
const galleryAlbum = useMemo(
|
||||
() =>
|
||||
galleryState
|
||||
? state.items.find((album) => album.albumId === galleryState.albumId) ??
|
||||
null
|
||||
: null,
|
||||
[galleryState, state.items],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!galleryState || state.isLoading) return;
|
||||
const image = galleryAlbum?.images[galleryState.imageIndex];
|
||||
if (
|
||||
!galleryAlbum ||
|
||||
isPrivateAlbumLocked(galleryAlbum) ||
|
||||
!image?.url
|
||||
) {
|
||||
router.replace(buildPrivateRoomWithoutGalleryUrl(searchParams), {
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
}, [galleryAlbum, galleryState, router, searchParams, state.isLoading]);
|
||||
|
||||
const handleTopUpClick = () => {
|
||||
if (isPrivateRoomAuthRequired(authState.loginStatus)) {
|
||||
@@ -79,6 +112,30 @@ export function PrivateRoomScreen() {
|
||||
navigator.openSubscription({ type: "topup" });
|
||||
};
|
||||
|
||||
const handleOpenGallery = (albumId: string) => {
|
||||
openedGalleryInPageRef.current = true;
|
||||
router.push(buildPrivateAlbumGalleryUrl(albumId, 0), { scroll: false });
|
||||
};
|
||||
|
||||
const handleCloseGallery = () => {
|
||||
if (openedGalleryInPageRef.current) {
|
||||
openedGalleryInPageRef.current = false;
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
router.replace(buildPrivateRoomWithoutGalleryUrl(searchParams), {
|
||||
scroll: false,
|
||||
});
|
||||
};
|
||||
|
||||
const handleGalleryIndexChange = (imageIndex: number) => {
|
||||
if (!galleryAlbum) return;
|
||||
router.replace(
|
||||
buildPrivateAlbumGalleryUrl(galleryAlbum.albumId, imageIndex),
|
||||
{ scroll: false },
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<MobileShell background="#f3f4f2">
|
||||
<main className={styles.shell}>
|
||||
@@ -124,9 +181,9 @@ export function PrivateRoomScreen() {
|
||||
<section className={styles.postsSection} aria-labelledby="posts-title">
|
||||
<div className={styles.sectionHeader}>
|
||||
<div>
|
||||
<p className={styles.kicker}>Posts</p>
|
||||
<p className={styles.kicker}>Albums</p>
|
||||
<h2 id="posts-title" className={styles.sectionTitle}>
|
||||
Private moments
|
||||
Private albums
|
||||
</h2>
|
||||
</div>
|
||||
<span className={styles.postCount}>{state.items.length}</span>
|
||||
@@ -141,47 +198,36 @@ export function PrivateRoomScreen() {
|
||||
) : null}
|
||||
|
||||
{state.isLoading && state.items.length === 0 ? (
|
||||
<StatusCard message="Loading private moments..." />
|
||||
<StatusCard message="Loading private albums..." />
|
||||
) : null}
|
||||
|
||||
{!state.isLoading && state.items.length === 0 && !state.errorMessage ? (
|
||||
<StatusCard
|
||||
message="No private moments yet."
|
||||
message="No private albums yet."
|
||||
actionLabel="Refresh"
|
||||
onAction={() => dispatch({ type: "PrivateRoomRefresh" })}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className={styles.timeline}>
|
||||
{state.items.map((moment, index) => (
|
||||
<PrivateRoomPostCard
|
||||
key={moment.momentId}
|
||||
moment={moment}
|
||||
{state.items.map((album, index) => (
|
||||
<PrivateAlbumCard
|
||||
key={album.albumId}
|
||||
album={album}
|
||||
displayName={displayName}
|
||||
avatarUrl={avatarUrl}
|
||||
index={index}
|
||||
isUnlocking={state.unlockingMomentId === moment.momentId}
|
||||
isUnlocking={state.unlockingAlbumId === album.albumId}
|
||||
onOpenGallery={() => handleOpenGallery(album.albumId)}
|
||||
onUnlock={() =>
|
||||
dispatch({
|
||||
type: "PrivateRoomUnlockRequested",
|
||||
momentId: moment.momentId,
|
||||
albumId: album.albumId,
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
|
||||
<AppBottomNav
|
||||
@@ -190,9 +236,9 @@ export function PrivateRoomScreen() {
|
||||
onPrivateRoomClick={() => undefined}
|
||||
/>
|
||||
|
||||
{pendingMoment ? (
|
||||
{pendingAlbum ? (
|
||||
<UnlockConfirmDialog
|
||||
moment={pendingMoment}
|
||||
album={pendingAlbum}
|
||||
isUnlocking={state.isUnlocking}
|
||||
errorMessage={state.unlockErrorMessage}
|
||||
onCancel={() => dispatch({ type: "PrivateRoomUnlockCancelled" })}
|
||||
@@ -203,6 +249,18 @@ export function PrivateRoomScreen() {
|
||||
{state.unlockErrorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{galleryAlbum &&
|
||||
galleryState &&
|
||||
!isPrivateAlbumLocked(galleryAlbum) &&
|
||||
galleryAlbum.images[galleryState.imageIndex]?.url ? (
|
||||
<PrivateAlbumGallery
|
||||
album={galleryAlbum}
|
||||
imageIndex={galleryState.imageIndex}
|
||||
onClose={handleCloseGallery}
|
||||
onImageIndexChange={handleGalleryIndexChange}
|
||||
/>
|
||||
) : null}
|
||||
</main>
|
||||
</MobileShell>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user