feat(media): library view with virtualized grid, filters, sources and studio chrome
This commit is contained in:
Claude
parent
159fafdb55
commit
9a3423e458
80
apps/web/src/components/media/library/AssetGrid.tsx
Normal file
80
apps/web/src/components/media/library/AssetGrid.tsx
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
import { useLingui } from "@lingui/react/macro";
|
||||||
|
import type { MediaAsset } from "@rakazo/contracts";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import { useCallback, useRef, useState } from "react";
|
||||||
|
import { AssetTile } from "./AssetTile";
|
||||||
|
import { VirtualGrid } from "./VirtualGrid";
|
||||||
|
|
||||||
|
/** Selected asset ids; shift-click selects the range since the last click. */
|
||||||
|
export function useAssetSelection() {
|
||||||
|
const [selected, setSelected] = useState<ReadonlySet<string>>(() => new Set());
|
||||||
|
const anchor = useRef<number | null>(null);
|
||||||
|
|
||||||
|
const toggle = useCallback((assets: readonly MediaAsset[], index: number, range: boolean) => {
|
||||||
|
const target = assets[index];
|
||||||
|
if (!target) return;
|
||||||
|
const start = anchor.current;
|
||||||
|
setSelected((current) => {
|
||||||
|
const next = new Set(current);
|
||||||
|
if (range && start !== null) {
|
||||||
|
const [from, to] = [Math.min(start, index), Math.max(start, index)];
|
||||||
|
for (const asset of assets.slice(from, to + 1)) next.add(asset.id);
|
||||||
|
} else if (next.has(target.id)) {
|
||||||
|
next.delete(target.id);
|
||||||
|
} else {
|
||||||
|
next.add(target.id);
|
||||||
|
}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
anchor.current = index;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const clear = useCallback(() => {
|
||||||
|
anchor.current = null;
|
||||||
|
setSelected(new Set());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return { selected, toggle, clear };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AssetGrid({
|
||||||
|
assets,
|
||||||
|
selection,
|
||||||
|
scrub = false,
|
||||||
|
onNearEnd,
|
||||||
|
footer,
|
||||||
|
}: {
|
||||||
|
assets: readonly MediaAsset[];
|
||||||
|
selection: ReturnType<typeof useAssetSelection>;
|
||||||
|
scrub?: boolean;
|
||||||
|
onNearEnd?: () => void;
|
||||||
|
footer?: ReactNode;
|
||||||
|
}) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
const selecting = selection.selected.size > 0;
|
||||||
|
return (
|
||||||
|
<VirtualGrid
|
||||||
|
testId="media-asset-grid"
|
||||||
|
label={t`Clips`}
|
||||||
|
count={assets.length}
|
||||||
|
getKey={(index) => assets[index]?.id ?? index}
|
||||||
|
minTileWidth={150}
|
||||||
|
tileAspect={9 / 16}
|
||||||
|
onNearEnd={onNearEnd}
|
||||||
|
footer={footer}
|
||||||
|
renderItem={(index) => {
|
||||||
|
const asset = assets[index];
|
||||||
|
if (!asset) return null;
|
||||||
|
return (
|
||||||
|
<AssetTile
|
||||||
|
asset={asset}
|
||||||
|
scrub={scrub}
|
||||||
|
selecting={selecting}
|
||||||
|
selected={selection.selected.has(asset.id)}
|
||||||
|
onToggle={(event) => selection.toggle(assets, index, event.shiftKey)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
155
apps/web/src/components/media/library/AssetTile.tsx
Normal file
155
apps/web/src/components/media/library/AssetTile.tsx
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
import { useLingui } from "@lingui/react/macro";
|
||||||
|
import type { MediaAsset } from "@rakazo/contracts";
|
||||||
|
import { Checkbox, cn } from "@rakazo/ui-web";
|
||||||
|
import { Image as ImageIcon, Star, Video } from "lucide-react";
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { mediaAssetPath, useMediaObjectUrl } from "../../../lib/media-bytes";
|
||||||
|
import { formatDuration, scrubFraction } from "../../../lib/media-library";
|
||||||
|
|
||||||
|
/** Poster of an asset, or a quiet placeholder until the proxy job made one. */
|
||||||
|
export function AssetThumb({
|
||||||
|
assetId,
|
||||||
|
hasThumbnail,
|
||||||
|
kind,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
assetId: string | null;
|
||||||
|
hasThumbnail: boolean;
|
||||||
|
kind?: MediaAsset["kind"];
|
||||||
|
className?: string;
|
||||||
|
}) {
|
||||||
|
const thumb = useMediaObjectUrl(
|
||||||
|
assetId && hasThumbnail ? mediaAssetPath(assetId, "thumb") : null,
|
||||||
|
{ keep: true },
|
||||||
|
);
|
||||||
|
if (thumb.url) {
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
src={thumb.url}
|
||||||
|
alt=""
|
||||||
|
draggable={false}
|
||||||
|
className={cn("size-full object-cover", className)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const Icon = kind === "photo" || kind === "live_photo" ? ImageIcon : Video;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"grid size-full place-items-center bg-muted text-muted-foreground/60",
|
||||||
|
thumb.status === "loading" && "animate-pulse",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon strokeWidth={1.6} className="size-icon-lg" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Plays the proxy under the pointer: left edge is the first frame, right edge the last. */
|
||||||
|
function Scrubber({ asset, fraction }: { asset: MediaAsset; fraction: number }) {
|
||||||
|
const proxy = useMediaObjectUrl(mediaAssetPath(asset.id, "proxy"));
|
||||||
|
const videoRef = useRef<HTMLVideoElement>(null);
|
||||||
|
const duration = (asset.durationMs ?? 0) / 1000;
|
||||||
|
useEffect(() => {
|
||||||
|
const video = videoRef.current;
|
||||||
|
if (!proxy.url || !video || duration <= 0) return;
|
||||||
|
const target = fraction * duration;
|
||||||
|
if (Math.abs(video.currentTime - target) > 0.04) video.currentTime = target;
|
||||||
|
}, [proxy.url, fraction, duration]);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{proxy.url ? (
|
||||||
|
<video
|
||||||
|
ref={videoRef}
|
||||||
|
src={proxy.url}
|
||||||
|
muted
|
||||||
|
playsInline
|
||||||
|
preload="auto"
|
||||||
|
className="absolute inset-0 size-full object-cover"
|
||||||
|
onLoadedMetadata={(event) => {
|
||||||
|
event.currentTarget.currentTime = fraction * (event.currentTarget.duration || 0);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute bottom-0 left-0 h-0.5 bg-primary-foreground"
|
||||||
|
style={{ width: `${fraction * 100}%` }}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AssetTile({
|
||||||
|
asset,
|
||||||
|
selected,
|
||||||
|
selecting,
|
||||||
|
onToggle,
|
||||||
|
scrub = false,
|
||||||
|
}: {
|
||||||
|
asset: MediaAsset;
|
||||||
|
selected: boolean;
|
||||||
|
/** Show checkboxes on every tile, not only on hover. */
|
||||||
|
selecting: boolean;
|
||||||
|
onToggle: (event: React.MouseEvent | React.KeyboardEvent) => void;
|
||||||
|
scrub?: boolean;
|
||||||
|
}) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
const [fraction, setFraction] = useState<number | null>(null);
|
||||||
|
const canScrub = scrub && asset.kind !== "photo" && asset.hasProxy && (asset.durationMs ?? 0) > 0;
|
||||||
|
const duration = asset.kind === "photo" ? "" : formatDuration(asset.durationMs);
|
||||||
|
const captured = asset.capturedAt ? new Date(asset.capturedAt).toLocaleString() : "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-testid="media-asset-tile"
|
||||||
|
data-asset-id={asset.id}
|
||||||
|
aria-pressed={selected}
|
||||||
|
aria-label={captured || t`Clip`}
|
||||||
|
onClick={onToggle}
|
||||||
|
onPointerMove={
|
||||||
|
canScrub
|
||||||
|
? (event) => {
|
||||||
|
const box = event.currentTarget.getBoundingClientRect();
|
||||||
|
setFraction(scrubFraction(event.clientX, box.left, box.width));
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
onPointerLeave={canScrub ? () => setFraction(null) : undefined}
|
||||||
|
className={cn(
|
||||||
|
"group/tile relative size-full overflow-hidden rounded-lg bg-muted outline-none ring-offset-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring",
|
||||||
|
selected && "ring-2 ring-primary",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<AssetThumb assetId={asset.id} hasThumbnail={asset.hasThumbnail} kind={asset.kind} />
|
||||||
|
{canScrub && fraction !== null ? <Scrubber asset={asset} fraction={fraction} /> : null}
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"absolute left-1.5 top-1.5 transition-opacity",
|
||||||
|
selecting || selected ? "opacity-100" : "opacity-0 group-hover/tile:opacity-100",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
checked={selected}
|
||||||
|
tabIndex={-1}
|
||||||
|
aria-hidden="true"
|
||||||
|
className="pointer-events-none bg-background/80"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
{asset.isFavorite ? (
|
||||||
|
<Star
|
||||||
|
aria-hidden="true"
|
||||||
|
fill="currentColor"
|
||||||
|
className="absolute right-1.5 top-1.5 size-icon-sm text-primary-foreground drop-shadow"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{duration ? (
|
||||||
|
<span className="absolute bottom-1.5 right-1.5 rounded bg-foreground/70 px-1 font-mono text-ui-caption tabular-nums text-background">
|
||||||
|
{duration}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
57
apps/web/src/components/media/library/ConfirmDialog.tsx
Normal file
57
apps/web/src/components/media/library/ConfirmDialog.tsx
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import { Trans } from "@lingui/react/macro";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from "@rakazo/ui-web";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
export function ConfirmDialog({
|
||||||
|
open,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
action,
|
||||||
|
destructive = false,
|
||||||
|
onConfirm,
|
||||||
|
onCancel,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
title: ReactNode;
|
||||||
|
description?: ReactNode;
|
||||||
|
action: ReactNode;
|
||||||
|
destructive?: boolean;
|
||||||
|
onConfirm: () => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<AlertDialog
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(next) => {
|
||||||
|
if (!next) onCancel();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>{title}</AlertDialogTitle>
|
||||||
|
{description ? <AlertDialogDescription>{description}</AlertDialogDescription> : null}
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>
|
||||||
|
<Trans>Cancel</Trans>
|
||||||
|
</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
variant={destructive ? "destructive" : "default"}
|
||||||
|
onClick={() => onConfirm()}
|
||||||
|
>
|
||||||
|
{action}
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
248
apps/web/src/components/media/library/ConnectSourceDialog.tsx
Normal file
248
apps/web/src/components/media/library/ConnectSourceDialog.tsx
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
import { Trans, useLingui } from "@lingui/react/macro";
|
||||||
|
import type { MediaSource } from "@rakazo/contracts";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
Field,
|
||||||
|
FieldLabel,
|
||||||
|
Input,
|
||||||
|
} from "@rakazo/ui-web";
|
||||||
|
import { FolderOpen, Images, RefreshCw, Trash2 } from "lucide-react";
|
||||||
|
import { useId, useState } from "react";
|
||||||
|
import { desktopBridge } from "../../../lib/desktop";
|
||||||
|
import { rpcErrorMessage } from "../../../lib/media-studio";
|
||||||
|
import { rpc } from "../../../lib/rpc";
|
||||||
|
import { ConfirmDialog } from "./ConfirmDialog";
|
||||||
|
import type { usePhotosSync } from "./usePhotosSync";
|
||||||
|
|
||||||
|
const SERVER_SYNCED = new Set<MediaSource["kind"]>(["folder", "emulator"]);
|
||||||
|
|
||||||
|
export function ConnectSourceDialog({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
sources,
|
||||||
|
canLinkFolder,
|
||||||
|
photos,
|
||||||
|
onChanged,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
sources: readonly MediaSource[];
|
||||||
|
canLinkFolder: boolean;
|
||||||
|
photos: ReturnType<typeof usePhotosSync>;
|
||||||
|
onChanged: () => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
const labelId = useId();
|
||||||
|
const pathId = useId();
|
||||||
|
const [label, setLabel] = useState("");
|
||||||
|
const [path, setPath] = useState("");
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [removing, setRemoving] = useState<MediaSource | null>(null);
|
||||||
|
const picker = desktopBridge()?.files?.pickDirectory;
|
||||||
|
const nothingToConnect = !canLinkFolder && !photos.available;
|
||||||
|
|
||||||
|
const run = async (action: () => Promise<unknown>) => {
|
||||||
|
setBusy(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
await action();
|
||||||
|
onChanged();
|
||||||
|
return true;
|
||||||
|
} catch (cause) {
|
||||||
|
setError(rpcErrorMessage(cause, t`That did not work. Try again.`));
|
||||||
|
return false;
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const connectFolder = async () => {
|
||||||
|
const ok = await run(() =>
|
||||||
|
rpc.media.sources.createFolder({
|
||||||
|
label: label.trim() || folderName(path) || t`Folder`,
|
||||||
|
path: path.trim(),
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
if (ok) {
|
||||||
|
setLabel("");
|
||||||
|
setPath("");
|
||||||
|
onOpenChange(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent data-testid="media-connect-source" className="sm:max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
<Trans>Sources</Trans>
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{sources.length > 0 ? (
|
||||||
|
<ul className="flex flex-col divide-y divide-border rounded-lg border border-border">
|
||||||
|
{sources.map((source) => (
|
||||||
|
<li key={source.id} className="flex items-center gap-2 px-3 py-2">
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="truncate text-ui-body-sm font-medium" dir="auto">
|
||||||
|
{source.label}
|
||||||
|
</div>
|
||||||
|
<div className="truncate text-ui-caption text-muted-foreground">
|
||||||
|
{source.status === "error" && source.error ? (
|
||||||
|
<span className="text-destructive">{source.error}</span>
|
||||||
|
) : (
|
||||||
|
<Trans>{source.assetCount} items</Trans>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{SERVER_SYNCED.has(source.kind) ? (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
aria-label={t`Sync`}
|
||||||
|
disabled={busy || source.status === "syncing"}
|
||||||
|
onClick={() => void run(() => rpc.media.sources.sync({ sourceId: source.id }))}
|
||||||
|
>
|
||||||
|
<RefreshCw className={source.status === "syncing" ? "animate-spin" : ""} />
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
aria-label={t`Remove ${source.label}`}
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => setRemoving(source)}
|
||||||
|
>
|
||||||
|
<Trash2 />
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{photos.available ? (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="justify-start"
|
||||||
|
disabled={photos.syncing || photos.denied}
|
||||||
|
onClick={() => {
|
||||||
|
void photos.sync();
|
||||||
|
onOpenChange(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Images aria-hidden="true" />
|
||||||
|
<Trans>Apple Photos</Trans>
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
{photos.denied ? (
|
||||||
|
<p className="text-ui-body-sm text-muted-foreground">
|
||||||
|
<Trans>Allow evOo to access Photos in System Settings.</Trans>
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{canLinkFolder ? (
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-3"
|
||||||
|
onSubmit={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
void connectFolder();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Field>
|
||||||
|
<FieldLabel htmlFor={pathId}>
|
||||||
|
<Trans>Folder</Trans>
|
||||||
|
</FieldLabel>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
id={pathId}
|
||||||
|
value={path}
|
||||||
|
onChange={(event) => setPath(event.target.value)}
|
||||||
|
placeholder={t`/Users/you/Movies`}
|
||||||
|
spellCheck={false}
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
{picker ? (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
aria-label={t`Choose folder`}
|
||||||
|
onClick={() => {
|
||||||
|
void picker()
|
||||||
|
.then((picked) => {
|
||||||
|
if (picked) setPath(picked);
|
||||||
|
})
|
||||||
|
.catch(() => undefined);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FolderOpen aria-hidden="true" />
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</Field>
|
||||||
|
{path.trim() ? (
|
||||||
|
<Field>
|
||||||
|
<FieldLabel htmlFor={labelId}>
|
||||||
|
<Trans>Name</Trans>
|
||||||
|
</FieldLabel>
|
||||||
|
<Input
|
||||||
|
id={labelId}
|
||||||
|
value={label}
|
||||||
|
maxLength={60}
|
||||||
|
onChange={(event) => setLabel(event.target.value)}
|
||||||
|
placeholder={folderName(path)}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
) : null}
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="submit" disabled={busy || !path.trim()}>
|
||||||
|
<Trans>Connect</Trans>
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{nothingToConnect && sources.length === 0 ? (
|
||||||
|
<p className="text-ui-body-sm text-muted-foreground">
|
||||||
|
<Trans>Only the owner of this evOo can connect a folder.</Trans>
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{error || photos.error ? (
|
||||||
|
<p role="alert" className="text-ui-body-sm text-destructive">
|
||||||
|
{error ?? photos.error}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
<ConfirmDialog
|
||||||
|
open={removing !== null}
|
||||||
|
destructive
|
||||||
|
title={<Trans>Remove {removing?.label ?? ""}?</Trans>}
|
||||||
|
description={
|
||||||
|
<Trans>Its clips leave the library. Your original files stay untouched.</Trans>
|
||||||
|
}
|
||||||
|
action={<Trans>Remove</Trans>}
|
||||||
|
onCancel={() => setRemoving(null)}
|
||||||
|
onConfirm={() => {
|
||||||
|
const target = removing;
|
||||||
|
setRemoving(null);
|
||||||
|
if (target) void run(() => rpc.media.sources.remove({ sourceId: target.id }));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function folderName(path: string): string {
|
||||||
|
return (
|
||||||
|
path
|
||||||
|
.trim()
|
||||||
|
.replace(/[\\/]+$/, "")
|
||||||
|
.split(/[\\/]/)
|
||||||
|
.at(-1) ?? ""
|
||||||
|
);
|
||||||
|
}
|
||||||
203
apps/web/src/components/media/library/CreateProjectDialog.tsx
Normal file
203
apps/web/src/components/media/library/CreateProjectDialog.tsx
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
import { Trans, useLingui } from "@lingui/react/macro";
|
||||||
|
import type { MediaProjectGoal, PlatformProfileSummary } from "@rakazo/contracts";
|
||||||
|
import { MediaProjectGoalSchema } from "@rakazo/contracts";
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
Field,
|
||||||
|
FieldLabel,
|
||||||
|
FieldLegend,
|
||||||
|
FieldSet,
|
||||||
|
Input,
|
||||||
|
NativeSelect,
|
||||||
|
NativeSelectOption,
|
||||||
|
} from "@rakazo/ui-web";
|
||||||
|
import { useEffect, useId, useState } from "react";
|
||||||
|
import { rpcErrorMessage } from "../../../lib/media-studio";
|
||||||
|
import { rpc } from "../../../lib/rpc";
|
||||||
|
|
||||||
|
export function useGoalLabels(): Record<MediaProjectGoal, string> {
|
||||||
|
const { t } = useLingui();
|
||||||
|
return {
|
||||||
|
teaser: t`Teaser`,
|
||||||
|
full_release: t`Full release`,
|
||||||
|
trailer: t`Trailer`,
|
||||||
|
highlight: t`Highlight`,
|
||||||
|
story: t`Story`,
|
||||||
|
custom: t`Custom`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CreateProjectDialog({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
defaultTitle,
|
||||||
|
collectionIds,
|
||||||
|
assetIds,
|
||||||
|
onCreated,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
defaultTitle: string;
|
||||||
|
collectionIds: string[];
|
||||||
|
assetIds: string[];
|
||||||
|
onCreated: (projectId: string) => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
const goals = useGoalLabels();
|
||||||
|
const titleId = useId();
|
||||||
|
const goalId = useId();
|
||||||
|
const [title, setTitle] = useState(defaultTitle);
|
||||||
|
const [goal, setGoal] = useState<MediaProjectGoal>("teaser");
|
||||||
|
const [profiles, setProfiles] = useState<PlatformProfileSummary[] | null>(null);
|
||||||
|
const [chosen, setChosen] = useState<ReadonlySet<string>>(() => new Set());
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
setTitle(defaultTitle);
|
||||||
|
setError(null);
|
||||||
|
let active = true;
|
||||||
|
rpc.media.profiles
|
||||||
|
.list({})
|
||||||
|
.then((list) => {
|
||||||
|
if (!active) return;
|
||||||
|
setProfiles(list);
|
||||||
|
setChosen((current) =>
|
||||||
|
current.size > 0 ? current : new Set(list.slice(0, 1).map((p) => p.id)),
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.catch((cause) => {
|
||||||
|
if (active) setError(rpcErrorMessage(cause, t`Could not load platforms.`));
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
active = false;
|
||||||
|
};
|
||||||
|
}, [open, defaultTitle, t]);
|
||||||
|
|
||||||
|
const create = async () => {
|
||||||
|
setBusy(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const project = await rpc.media.projects.create({
|
||||||
|
title: title.trim(),
|
||||||
|
goal,
|
||||||
|
collectionIds,
|
||||||
|
assetIds,
|
||||||
|
profileIds: [...chosen],
|
||||||
|
brandKitId: null,
|
||||||
|
});
|
||||||
|
onOpenChange(false);
|
||||||
|
onCreated(project.id);
|
||||||
|
} catch (cause) {
|
||||||
|
setError(rpcErrorMessage(cause, t`Could not create the project.`));
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent data-testid="media-create-project" className="sm:max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
<Trans>New project</Trans>
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<form
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
onSubmit={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
void create();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Field>
|
||||||
|
<FieldLabel htmlFor={titleId}>
|
||||||
|
<Trans>Title</Trans>
|
||||||
|
</FieldLabel>
|
||||||
|
<Input
|
||||||
|
id={titleId}
|
||||||
|
value={title}
|
||||||
|
maxLength={120}
|
||||||
|
onChange={(event) => setTitle(event.target.value)}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
<Field>
|
||||||
|
<FieldLabel htmlFor={goalId}>
|
||||||
|
<Trans>Goal</Trans>
|
||||||
|
</FieldLabel>
|
||||||
|
<NativeSelect
|
||||||
|
id={goalId}
|
||||||
|
className="w-full"
|
||||||
|
value={goal}
|
||||||
|
onChange={(event) => setGoal(event.target.value as MediaProjectGoal)}
|
||||||
|
>
|
||||||
|
{MediaProjectGoalSchema.options.map((option) => (
|
||||||
|
<NativeSelectOption key={option} value={option}>
|
||||||
|
{goals[option]}
|
||||||
|
</NativeSelectOption>
|
||||||
|
))}
|
||||||
|
</NativeSelect>
|
||||||
|
</Field>
|
||||||
|
<FieldSet>
|
||||||
|
<FieldLegend variant="label">
|
||||||
|
<Trans>Platforms</Trans>
|
||||||
|
</FieldLegend>
|
||||||
|
<div className="flex max-h-56 flex-col gap-1 overflow-y-auto">
|
||||||
|
{(profiles ?? []).map((profile) => (
|
||||||
|
<div
|
||||||
|
key={profile.id}
|
||||||
|
className="flex items-center gap-2.5 rounded-md px-1 py-1.5 text-ui-body-sm hover:bg-muted"
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id={`${goalId}-${profile.id}`}
|
||||||
|
checked={chosen.has(profile.id)}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
setChosen((current) => {
|
||||||
|
const next = new Set(current);
|
||||||
|
if (checked) next.add(profile.id);
|
||||||
|
else next.delete(profile.id);
|
||||||
|
return next;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor={`${goalId}-${profile.id}`}
|
||||||
|
className="min-w-0 flex-1 cursor-pointer truncate"
|
||||||
|
>
|
||||||
|
{profile.name}
|
||||||
|
</label>
|
||||||
|
<span className="text-ui-caption text-muted-foreground">
|
||||||
|
{profile.aspectRatios.join(" · ")}
|
||||||
|
</span>
|
||||||
|
{profile.unverified || profile.stale ? (
|
||||||
|
<Badge variant="outline">
|
||||||
|
<Trans>Unverified</Trans>
|
||||||
|
</Badge>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
{error ? (
|
||||||
|
<p role="alert" className="text-ui-body-sm text-destructive">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="submit" disabled={busy || !title.trim() || chosen.size === 0}>
|
||||||
|
<Trans>Create project</Trans>
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
172
apps/web/src/components/media/library/LibraryChrome.tsx
Normal file
172
apps/web/src/components/media/library/LibraryChrome.tsx
Normal file
@ -0,0 +1,172 @@
|
|||||||
|
import { Plural, Trans, useLingui } from "@lingui/react/macro";
|
||||||
|
import type { MediaCollection } from "@rakazo/contracts";
|
||||||
|
import {
|
||||||
|
InputGroup,
|
||||||
|
InputGroupAddon,
|
||||||
|
InputGroupInput,
|
||||||
|
Tabs,
|
||||||
|
TabsList,
|
||||||
|
TabsTrigger,
|
||||||
|
Toggle,
|
||||||
|
} from "@rakazo/ui-web";
|
||||||
|
import { Search } from "lucide-react";
|
||||||
|
import type { LibraryFilter } from "../../../lib/media-library";
|
||||||
|
import { formatDuration, LIBRARY_FILTERS } from "../../../lib/media-library";
|
||||||
|
import { LoadingState } from "../../ai/primitives";
|
||||||
|
import { AssetThumb } from "./AssetTile";
|
||||||
|
|
||||||
|
export type LibraryMode = "sessions" | "themes" | "people";
|
||||||
|
|
||||||
|
/** Sessions | Themes | People, shared by the library and people views. */
|
||||||
|
export function LibraryModeToggle({
|
||||||
|
mode,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
mode: LibraryMode;
|
||||||
|
onChange: (mode: LibraryMode) => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
return (
|
||||||
|
<Tabs value={mode} onValueChange={(value) => onChange(value as LibraryMode)}>
|
||||||
|
<TabsList aria-label={t`Group by`}>
|
||||||
|
<TabsTrigger value="sessions">
|
||||||
|
<Trans>Sessions</Trans>
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="themes">
|
||||||
|
<Trans>Themes</Trans>
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="people">
|
||||||
|
<Trans>People</Trans>
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</Tabs>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LibrarySearch({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
value: string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
return (
|
||||||
|
<InputGroup className="w-full max-w-64">
|
||||||
|
<InputGroupAddon>
|
||||||
|
<Search strokeWidth={1.8} aria-hidden="true" className="size-icon-md" />
|
||||||
|
</InputGroupAddon>
|
||||||
|
<InputGroupInput
|
||||||
|
type="search"
|
||||||
|
value={value}
|
||||||
|
onChange={(event) => onChange(event.target.value)}
|
||||||
|
placeholder={t`Search`}
|
||||||
|
aria-label={t`Search media`}
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
</InputGroup>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FilterChips({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
value: ReadonlySet<LibraryFilter>;
|
||||||
|
onChange: (value: ReadonlySet<LibraryFilter>) => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
const labels: Record<LibraryFilter, string> = {
|
||||||
|
videos: t`Videos`,
|
||||||
|
photos: t`Photos`,
|
||||||
|
favorites: t`Favorites`,
|
||||||
|
best: t`Best`,
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<fieldset aria-label={t`Filters`} className="flex flex-wrap items-center gap-1.5">
|
||||||
|
{LIBRARY_FILTERS.map((filter) => (
|
||||||
|
<Toggle
|
||||||
|
key={filter}
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="rounded-full"
|
||||||
|
pressed={value.has(filter)}
|
||||||
|
onPressedChange={(pressed) => {
|
||||||
|
const next = new Set(value);
|
||||||
|
if (pressed) next.add(filter);
|
||||||
|
else next.delete(filter);
|
||||||
|
onChange(next);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{labels[filter]}
|
||||||
|
</Toggle>
|
||||||
|
))}
|
||||||
|
</fieldset>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Only rendered while indexing runs; disappears when the work is done. */
|
||||||
|
export function IndexingProgress({ done, total }: { done?: number; total?: number }) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
return (
|
||||||
|
<div data-testid="media-indexing" className="flex items-center gap-3 px-4 py-2">
|
||||||
|
<LoadingState label={t`Indexing`} />
|
||||||
|
{total ? (
|
||||||
|
<span className="font-mono text-ui-body-sm tabular-nums text-muted-foreground">
|
||||||
|
{done ?? 0}/{total}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CollectionCard({
|
||||||
|
collection,
|
||||||
|
onOpen,
|
||||||
|
}: {
|
||||||
|
collection: MediaCollection;
|
||||||
|
onOpen: () => void;
|
||||||
|
}) {
|
||||||
|
const range = collectionDateRange(collection);
|
||||||
|
const count = collection.assetCount;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-testid="media-collection-card"
|
||||||
|
onClick={onOpen}
|
||||||
|
className="group/card flex size-full min-w-0 flex-col gap-1.5 rounded-lg text-left outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||||
|
>
|
||||||
|
<div className="relative min-h-0 flex-1 overflow-hidden rounded-lg bg-muted">
|
||||||
|
<AssetThumb
|
||||||
|
assetId={collection.coverAssetId}
|
||||||
|
hasThumbnail={collection.coverAssetId !== null}
|
||||||
|
className="transition-transform group-hover/card:scale-[1.02]"
|
||||||
|
/>
|
||||||
|
{collection.totalDurationMs > 0 ? (
|
||||||
|
<span className="absolute bottom-1.5 right-1.5 rounded bg-foreground/70 px-1 font-mono text-ui-caption tabular-nums text-background">
|
||||||
|
{formatDuration(collection.totalDurationMs)}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 px-0.5">
|
||||||
|
<div className="truncate text-ui-body-sm font-medium text-foreground" dir="auto">
|
||||||
|
{collection.title}
|
||||||
|
</div>
|
||||||
|
<div className="truncate text-ui-caption text-muted-foreground">
|
||||||
|
{range ? `${range} · ` : ""}
|
||||||
|
<Plural value={count} one="# item" other="# items" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function collectionDateRange(
|
||||||
|
collection: Pick<MediaCollection, "startAt" | "endAt">,
|
||||||
|
): string {
|
||||||
|
if (!collection.startAt) return "";
|
||||||
|
const start = new Date(collection.startAt);
|
||||||
|
const end = collection.endAt ? new Date(collection.endAt) : start;
|
||||||
|
const day = (date: Date) => date.toLocaleDateString(undefined, { dateStyle: "medium" });
|
||||||
|
return day(start) === day(end) ? day(start) : `${day(start)} – ${day(end)}`;
|
||||||
|
}
|
||||||
128
apps/web/src/components/media/library/VirtualGrid.tsx
Normal file
128
apps/web/src/components/media/library/VirtualGrid.tsx
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
import { cn } from "@rakazo/ui-web";
|
||||||
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||||
|
import { gridColumns, gridRowCount } from "../../../lib/media-library";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Row-virtualized grid: only the rows in view (plus overscan) are mounted, so
|
||||||
|
* 50k items cost the same DOM as fifty. Tiles share one size derived from the
|
||||||
|
* container width; `onNearEnd` asks for the next page before the end shows.
|
||||||
|
*/
|
||||||
|
export function VirtualGrid({
|
||||||
|
count,
|
||||||
|
renderItem,
|
||||||
|
getKey,
|
||||||
|
minTileWidth = 168,
|
||||||
|
gap = 8,
|
||||||
|
tileAspect = 9 / 16,
|
||||||
|
extraHeight = 0,
|
||||||
|
overscan = 4,
|
||||||
|
onNearEnd,
|
||||||
|
footer,
|
||||||
|
className,
|
||||||
|
label,
|
||||||
|
testId,
|
||||||
|
}: {
|
||||||
|
count: number;
|
||||||
|
renderItem: (index: number) => ReactNode;
|
||||||
|
getKey?: (index: number) => string | number;
|
||||||
|
minTileWidth?: number;
|
||||||
|
gap?: number;
|
||||||
|
/** Media height / width. */
|
||||||
|
tileAspect?: number;
|
||||||
|
/** Fixed height under the media (title lines). */
|
||||||
|
extraHeight?: number;
|
||||||
|
overscan?: number;
|
||||||
|
onNearEnd?: () => void;
|
||||||
|
footer?: ReactNode;
|
||||||
|
className?: string;
|
||||||
|
label?: string;
|
||||||
|
testId?: string;
|
||||||
|
}) {
|
||||||
|
const scrollRef = useRef<HTMLElement>(null);
|
||||||
|
const [width, setWidth] = useState(0);
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
const element = scrollRef.current;
|
||||||
|
if (!element) return;
|
||||||
|
const measure = () => setWidth(element.clientWidth);
|
||||||
|
measure();
|
||||||
|
const observer = new ResizeObserver(measure);
|
||||||
|
observer.observe(element);
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const padding = 16;
|
||||||
|
const inner = Math.max(0, width - padding * 2);
|
||||||
|
const columns = gridColumns(inner, minTileWidth, gap);
|
||||||
|
const tileWidth = columns > 0 ? (inner - gap * (columns - 1)) / columns : minTileWidth;
|
||||||
|
const rowHeight = Math.round(tileWidth * tileAspect) + extraHeight + gap;
|
||||||
|
const rows = gridRowCount(count, columns);
|
||||||
|
|
||||||
|
const virtualizer = useVirtualizer({
|
||||||
|
count: rows,
|
||||||
|
getScrollElement: () => scrollRef.current,
|
||||||
|
estimateSize: () => rowHeight,
|
||||||
|
overscan,
|
||||||
|
paddingStart: padding,
|
||||||
|
paddingEnd: padding,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
virtualizer.measure();
|
||||||
|
}, [virtualizer, rowHeight]);
|
||||||
|
|
||||||
|
const items = virtualizer.getVirtualItems();
|
||||||
|
const lastRow = items.at(-1)?.index ?? -1;
|
||||||
|
const nearEnd = rows > 0 && lastRow >= rows - overscan - 1;
|
||||||
|
const latestNearEnd = useRef(onNearEnd);
|
||||||
|
latestNearEnd.current = onNearEnd;
|
||||||
|
useEffect(() => {
|
||||||
|
if (nearEnd) latestNearEnd.current?.();
|
||||||
|
}, [nearEnd, count]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
ref={scrollRef}
|
||||||
|
aria-label={label}
|
||||||
|
data-testid={testId}
|
||||||
|
data-count={count}
|
||||||
|
className={cn("rk-scroll relative min-h-0 flex-1 overflow-y-auto", className)}
|
||||||
|
>
|
||||||
|
<div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
|
||||||
|
{width > 0
|
||||||
|
? items.map((row) => {
|
||||||
|
const start = row.index * columns;
|
||||||
|
const end = Math.min(count, start + columns);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={row.key}
|
||||||
|
className="absolute inset-x-4 grid"
|
||||||
|
style={{
|
||||||
|
top: row.start,
|
||||||
|
gap,
|
||||||
|
gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Array.from({ length: end - start }, (_, offset) => {
|
||||||
|
const index = start + offset;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={getKey ? getKey(index) : index}
|
||||||
|
style={{ height: rowHeight - gap }}
|
||||||
|
className="min-w-0"
|
||||||
|
>
|
||||||
|
{renderItem(index)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
{footer}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
72
apps/web/src/components/media/library/usePhotosSync.ts
Normal file
72
apps/web/src/components/media/library/usePhotosSync.ts
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import type { PhotosSourceStatus, PhotosSyncOutcome, PhotosSyncProgress } from "@rakazo/contracts";
|
||||||
|
import { useCallback, useEffect, useState } from "react";
|
||||||
|
import { desktopBridge } from "../../../lib/desktop";
|
||||||
|
import { selectedSpaceId } from "../../../lib/rpc";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apple Photos runs in the desktop main process; the renderer only asks for a
|
||||||
|
* sync and shows progress. Absent outside the macOS desktop app.
|
||||||
|
*/
|
||||||
|
export function usePhotosSync(onFinished?: (outcome: PhotosSyncOutcome) => void) {
|
||||||
|
const photos = desktopBridge()?.media?.photos;
|
||||||
|
const [status, setStatus] = useState<PhotosSourceStatus>({ available: false });
|
||||||
|
const [progress, setProgress] = useState<PhotosSyncProgress | null>(null);
|
||||||
|
const [syncing, setSyncing] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!photos) return;
|
||||||
|
let active = true;
|
||||||
|
photos
|
||||||
|
.status()
|
||||||
|
.then((value) => {
|
||||||
|
if (!active) return;
|
||||||
|
setStatus(value);
|
||||||
|
if (value.available && value.syncing) setSyncing(true);
|
||||||
|
})
|
||||||
|
.catch(() => undefined);
|
||||||
|
const off = photos.onProgress((value) => {
|
||||||
|
if (active) setProgress(value);
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
active = false;
|
||||||
|
off();
|
||||||
|
};
|
||||||
|
}, [photos]);
|
||||||
|
|
||||||
|
const sync = useCallback(async () => {
|
||||||
|
if (!photos) return;
|
||||||
|
setSyncing(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const outcome = await photos.sync({ spaceId: selectedSpaceId() });
|
||||||
|
if (!outcome.ok) setError(outcome.message);
|
||||||
|
onFinished?.(outcome);
|
||||||
|
} catch (cause) {
|
||||||
|
setError(cause instanceof Error ? cause.message : String(cause));
|
||||||
|
} finally {
|
||||||
|
setSyncing(false);
|
||||||
|
setProgress(null);
|
||||||
|
photos
|
||||||
|
.status()
|
||||||
|
.then(setStatus)
|
||||||
|
.catch(() => undefined);
|
||||||
|
}
|
||||||
|
}, [photos, onFinished]);
|
||||||
|
|
||||||
|
const cancel = useCallback(() => {
|
||||||
|
void photos?.cancel().catch(() => undefined);
|
||||||
|
}, [photos]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
available: Boolean(photos) && status.available,
|
||||||
|
denied:
|
||||||
|
status.available &&
|
||||||
|
(status.authorization === "denied" || status.authorization === "restricted"),
|
||||||
|
syncing,
|
||||||
|
progress,
|
||||||
|
error,
|
||||||
|
sync,
|
||||||
|
cancel,
|
||||||
|
};
|
||||||
|
}
|
||||||
91
apps/web/src/lib/media-bytes.test.ts
Normal file
91
apps/web/src/lib/media-bytes.test.ts
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
import { describe, expect, it, vi } from "vitest";
|
||||||
|
import {
|
||||||
|
createMediaObjectUrlCache,
|
||||||
|
mediaAssetPath,
|
||||||
|
mediaBundlePath,
|
||||||
|
mediaRenderFilePath,
|
||||||
|
mediaUploadChunkPath,
|
||||||
|
} from "./media-bytes";
|
||||||
|
|
||||||
|
function setup(idleLimit = 2) {
|
||||||
|
let next = 0;
|
||||||
|
const revoked: string[] = [];
|
||||||
|
const loads: string[] = [];
|
||||||
|
const pending = new Map<string, (blob: Blob) => void>();
|
||||||
|
const cache = createMediaObjectUrlCache({
|
||||||
|
load: (path, signal) => {
|
||||||
|
loads.push(path);
|
||||||
|
return new Promise<Blob>((resolve, reject) => {
|
||||||
|
pending.set(path, resolve);
|
||||||
|
signal.addEventListener("abort", () => reject(new DOMException("Aborted", "AbortError")));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
createUrl: () => {
|
||||||
|
next += 1;
|
||||||
|
return `blob:${next}`;
|
||||||
|
},
|
||||||
|
revokeUrl: (url) => revoked.push(url),
|
||||||
|
spaceId: () => "space-1",
|
||||||
|
idleLimit,
|
||||||
|
});
|
||||||
|
const finish = (path: string) => pending.get(path)?.(new Blob(["x"]));
|
||||||
|
return { cache, revoked, loads, finish };
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("media byte paths", () => {
|
||||||
|
it("encodes ids into the byte routes", () => {
|
||||||
|
expect(mediaAssetPath("a/b", "thumb")).toBe("/api/media/assets/a%2Fb/thumb");
|
||||||
|
expect(mediaRenderFilePath("r1", "video.mp4", { download: true })).toBe(
|
||||||
|
"/api/media/renders/r1/files/video.mp4?download=1",
|
||||||
|
);
|
||||||
|
expect(mediaBundlePath("p1")).toBe("/api/media/bundles/p1");
|
||||||
|
expect(mediaUploadChunkPath("u1", 3)).toBe("/api/media/uploads/u1/chunks/3");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("media object URL cache", () => {
|
||||||
|
it("shares one load between holders", async () => {
|
||||||
|
const { cache, loads, finish } = setup();
|
||||||
|
const a = cache.acquire("/t/1", { keep: true });
|
||||||
|
const b = cache.acquire("/t/1", { keep: true });
|
||||||
|
finish("/t/1");
|
||||||
|
await expect(a.promise).resolves.toBe("blob:1");
|
||||||
|
await expect(b.promise).resolves.toBe("blob:1");
|
||||||
|
expect(loads).toEqual(["/t/1"]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps thumbnails idle up to the limit, evicting the oldest", async () => {
|
||||||
|
const { cache, revoked, finish } = setup(2);
|
||||||
|
for (const id of ["1", "2", "3"]) {
|
||||||
|
const handle = cache.acquire(`/t/${id}`, { keep: true });
|
||||||
|
finish(`/t/${id}`);
|
||||||
|
await handle.promise;
|
||||||
|
handle.release();
|
||||||
|
}
|
||||||
|
expect(cache.size()).toBe(2);
|
||||||
|
expect(revoked).toEqual(["blob:1"]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("drops large files as soon as the last holder releases", async () => {
|
||||||
|
const { cache, revoked, finish } = setup();
|
||||||
|
const handle = cache.acquire("/p/1");
|
||||||
|
finish("/p/1");
|
||||||
|
await handle.promise;
|
||||||
|
handle.release();
|
||||||
|
handle.release();
|
||||||
|
expect(cache.size()).toBe(0);
|
||||||
|
expect(revoked).toEqual(["blob:1"]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("aborts a load nobody waits for anymore", async () => {
|
||||||
|
const { cache } = setup();
|
||||||
|
const handle = cache.acquire("/p/2");
|
||||||
|
const settled = vi.fn();
|
||||||
|
handle.promise.catch(settled);
|
||||||
|
handle.release();
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
expect(settled).toHaveBeenCalled();
|
||||||
|
expect(cache.size()).toBe(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
182
apps/web/src/lib/media-library.test.ts
Normal file
182
apps/web/src/lib/media-library.test.ts
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
import {
|
||||||
|
assetQueryFor,
|
||||||
|
BEST_QUALITY,
|
||||||
|
consentInput,
|
||||||
|
consentState,
|
||||||
|
csvHeaders,
|
||||||
|
dayToIso,
|
||||||
|
formatDuration,
|
||||||
|
funnelTotals,
|
||||||
|
funnelWidths,
|
||||||
|
gridColumns,
|
||||||
|
gridRowCount,
|
||||||
|
guessColumns,
|
||||||
|
guessDelimiter,
|
||||||
|
guessPublicationKey,
|
||||||
|
hasAssetQuery,
|
||||||
|
type LibraryFilter,
|
||||||
|
scrubFraction,
|
||||||
|
splitCsvLine,
|
||||||
|
} from "./media-library";
|
||||||
|
|
||||||
|
describe("library filters", () => {
|
||||||
|
it("maps chips to an asset query", () => {
|
||||||
|
const filters = new Set<LibraryFilter>(["videos", "favorites", "best"]);
|
||||||
|
expect(assetQueryFor(filters, " beach ")).toEqual({
|
||||||
|
kinds: ["video"],
|
||||||
|
favoritesOnly: true,
|
||||||
|
minQuality: BEST_QUALITY,
|
||||||
|
text: "beach",
|
||||||
|
});
|
||||||
|
expect(assetQueryFor(new Set(["photos"]), "")).toEqual({ kinds: ["photo", "live_photo"] });
|
||||||
|
expect(assetQueryFor(new Set(), "")).toEqual({});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("knows when a query is active", () => {
|
||||||
|
expect(hasAssetQuery(new Set(), " ")).toBe(false);
|
||||||
|
expect(hasAssetQuery(new Set(), "x")).toBe(true);
|
||||||
|
expect(hasAssetQuery(new Set(["videos"]), "")).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("grid geometry", () => {
|
||||||
|
it("fits columns to the width", () => {
|
||||||
|
expect(gridColumns(0, 160, 8)).toBe(1);
|
||||||
|
expect(gridColumns(159, 160, 8)).toBe(1);
|
||||||
|
expect(gridColumns(328, 160, 8)).toBe(2);
|
||||||
|
expect(gridColumns(1000, 160, 8)).toBe(6);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("counts rows for 50k assets without materializing them", () => {
|
||||||
|
expect(gridRowCount(50_000, 6)).toBe(8334);
|
||||||
|
expect(gridRowCount(0, 6)).toBe(0);
|
||||||
|
expect(gridRowCount(5, 0)).toBe(5);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("clamps the scrub position", () => {
|
||||||
|
expect(scrubFraction(50, 0, 100)).toBe(0.5);
|
||||||
|
expect(scrubFraction(-10, 0, 100)).toBe(0);
|
||||||
|
expect(scrubFraction(200, 0, 100)).toBe(1);
|
||||||
|
expect(scrubFraction(5, 0, 0)).toBe(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("formatDuration", () => {
|
||||||
|
it("formats clip lengths", () => {
|
||||||
|
expect(formatDuration(4000)).toBe("0:04");
|
||||||
|
expect(formatDuration(62_400)).toBe("1:02");
|
||||||
|
expect(formatDuration(3_723_000)).toBe("1:02:03");
|
||||||
|
expect(formatDuration(null)).toBe("");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("consent", () => {
|
||||||
|
const now = new Date("2026-10-03T10:00:00Z");
|
||||||
|
|
||||||
|
it("records platform verification with its date", () => {
|
||||||
|
expect(
|
||||||
|
consentInput(
|
||||||
|
"p1",
|
||||||
|
{ consentDate: "2026-10-01", method: "platform_verified", verifiedDate: "2026-09-30" },
|
||||||
|
now,
|
||||||
|
),
|
||||||
|
).toEqual({
|
||||||
|
personId: "p1",
|
||||||
|
consentArtifactId: null,
|
||||||
|
consentRecordedAt: "2026-10-01T12:00:00.000Z",
|
||||||
|
ageVerificationMethod: "platform_verified",
|
||||||
|
ageVerifiedAt: "2026-09-30T12:00:00.000Z",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("drops the verification date when there is no age proof", () => {
|
||||||
|
expect(
|
||||||
|
consentInput("p1", { consentDate: "2026-10-01", method: "none", verifiedDate: "x" }, now)
|
||||||
|
?.ageVerifiedAt,
|
||||||
|
).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects incomplete or future dates", () => {
|
||||||
|
expect(
|
||||||
|
consentInput("p1", { consentDate: "", method: "none", verifiedDate: "" }, now),
|
||||||
|
).toBeNull();
|
||||||
|
expect(
|
||||||
|
consentInput(
|
||||||
|
"p1",
|
||||||
|
{ consentDate: "2026-10-01", method: "document_on_file", verifiedDate: "" },
|
||||||
|
now,
|
||||||
|
),
|
||||||
|
).toBeNull();
|
||||||
|
expect(
|
||||||
|
consentInput("p1", { consentDate: "2026-12-01", method: "none", verifiedDate: "" }, now),
|
||||||
|
).toBeNull();
|
||||||
|
expect(dayToIso("2026-13-45")).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("summarizes a person's state", () => {
|
||||||
|
const base = { consentRecordedAt: null, ageVerificationMethod: "none", ageVerifiedAt: null };
|
||||||
|
expect(consentState({ ...base, ageVerificationMethod: "none" })).toBe("missing");
|
||||||
|
expect(consentState({ ...base, consentRecordedAt: "2026-10-01T12:00:00.000Z" } as never)).toBe(
|
||||||
|
"consent_only",
|
||||||
|
);
|
||||||
|
expect(
|
||||||
|
consentState({
|
||||||
|
consentRecordedAt: "2026-10-01T12:00:00.000Z",
|
||||||
|
ageVerificationMethod: "platform_verified",
|
||||||
|
ageVerifiedAt: "2026-10-01T12:00:00.000Z",
|
||||||
|
}),
|
||||||
|
).toBe("complete");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("csv mapping", () => {
|
||||||
|
it("splits quoted cells", () => {
|
||||||
|
expect(splitCsvLine('a,"b, c","d ""e"""', ",")).toEqual(["a", "b, c", 'd "e"']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("detects the delimiter and headers", () => {
|
||||||
|
const csv = "Datum;utm_content;Aufrufe;Klicks;Käufe;Umsatz\n2026-10-01;a;1;2;3;4";
|
||||||
|
const delimiter = guessDelimiter(csv.split("\n")[0] ?? "");
|
||||||
|
expect(delimiter).toBe(";");
|
||||||
|
const headers = csvHeaders(csv, delimiter);
|
||||||
|
expect(headers).toEqual(["Datum", "utm_content", "Aufrufe", "Klicks", "Käufe", "Umsatz"]);
|
||||||
|
expect(guessColumns(headers)).toEqual({
|
||||||
|
publication: "utm_content",
|
||||||
|
observedAt: "Datum",
|
||||||
|
views: "Aufrufe",
|
||||||
|
clicks: "Klicks",
|
||||||
|
conversions: "Käufe",
|
||||||
|
revenue: "Umsatz",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("guesses how publications are identified", () => {
|
||||||
|
expect(guessPublicationKey("utm_content")).toBe("utm_content");
|
||||||
|
expect(guessPublicationKey("tracking_url")).toBe("tracking_url");
|
||||||
|
expect(guessPublicationKey("Post URL")).toBe("external_url");
|
||||||
|
expect(guessPublicationKey("publication_id")).toBe("id");
|
||||||
|
expect(guessPublicationKey(undefined)).toBe("utm_content");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("funnel", () => {
|
||||||
|
it("sums steps and keeps currencies apart", () => {
|
||||||
|
const totals = funnelTotals([
|
||||||
|
{ views: 1000, clicks: 100, conversions: 10, revenueCents: 9900, currency: "EUR" },
|
||||||
|
{ views: 500, clicks: 20, conversions: 1, revenueCents: 1500, currency: "USD" },
|
||||||
|
{ views: 10, clicks: 0, conversions: 0, revenueCents: 0, currency: "EUR" },
|
||||||
|
]);
|
||||||
|
expect(totals).toEqual({
|
||||||
|
views: 1510,
|
||||||
|
clicks: 120,
|
||||||
|
conversions: 11,
|
||||||
|
revenue: [
|
||||||
|
{ currency: "EUR", cents: 9900 },
|
||||||
|
{ currency: "USD", cents: 1500 },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
expect(funnelWidths(totals).views).toBe(1);
|
||||||
|
expect(funnelWidths({ views: 0, clicks: 0, conversions: 0 }).views).toBe(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
312
apps/web/src/lib/media-library.ts
Normal file
312
apps/web/src/lib/media-library.ts
Normal file
@ -0,0 +1,312 @@
|
|||||||
|
import type {
|
||||||
|
AgeVerificationMethod,
|
||||||
|
ConsentInput,
|
||||||
|
FunnelRow,
|
||||||
|
MediaAssetKind,
|
||||||
|
MediaAssetQuery,
|
||||||
|
MediaPerson,
|
||||||
|
MetricCsvMapping,
|
||||||
|
} from "@rakazo/contracts";
|
||||||
|
|
||||||
|
/* Pure helpers behind the Media Studio library, people and results views. */
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Library filters
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export const LIBRARY_FILTERS = ["videos", "photos", "favorites", "best"] as const;
|
||||||
|
export type LibraryFilter = (typeof LIBRARY_FILTERS)[number];
|
||||||
|
|
||||||
|
/** Quality floor for the "best" chip. */
|
||||||
|
export const BEST_QUALITY = 0.6;
|
||||||
|
|
||||||
|
export function assetQueryFor(
|
||||||
|
filters: ReadonlySet<LibraryFilter>,
|
||||||
|
text: string,
|
||||||
|
): Partial<MediaAssetQuery> {
|
||||||
|
const query: Partial<MediaAssetQuery> = {};
|
||||||
|
const kinds: MediaAssetKind[] = [];
|
||||||
|
if (filters.has("videos")) kinds.push("video");
|
||||||
|
if (filters.has("photos")) kinds.push("photo", "live_photo");
|
||||||
|
if (kinds.length > 0) query.kinds = kinds;
|
||||||
|
if (filters.has("favorites")) query.favoritesOnly = true;
|
||||||
|
if (filters.has("best")) query.minQuality = BEST_QUALITY;
|
||||||
|
const trimmed = text.trim();
|
||||||
|
if (trimmed) query.text = trimmed.slice(0, 200);
|
||||||
|
return query;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hasAssetQuery(filters: ReadonlySet<LibraryFilter>, text: string): boolean {
|
||||||
|
return filters.size > 0 || text.trim().length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ingest states that mean the server still has work queued for an asset. */
|
||||||
|
export const INGEST_PENDING_STATES = ["indexed", "proxying", "proxied", "analyzing"] as const;
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Grid geometry
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/** Columns that fit `width` with tiles at least `minTile` wide. */
|
||||||
|
export function gridColumns(width: number, minTile: number, gap: number): number {
|
||||||
|
if (!Number.isFinite(width) || width <= 0) return 1;
|
||||||
|
return Math.max(1, Math.floor((width + gap) / (minTile + gap)));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function gridRowCount(items: number, columns: number): number {
|
||||||
|
return Math.ceil(items / Math.max(1, columns));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Formatting
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export function formatDuration(ms: number | null | undefined): string {
|
||||||
|
if (ms == null || !Number.isFinite(ms) || ms < 0) return "";
|
||||||
|
const total = Math.round(ms / 1000);
|
||||||
|
const hours = Math.floor(total / 3600);
|
||||||
|
const minutes = Math.floor((total % 3600) / 60);
|
||||||
|
const seconds = String(total % 60).padStart(2, "0");
|
||||||
|
if (hours > 0) return `${hours}:${String(minutes).padStart(2, "0")}:${seconds}`;
|
||||||
|
return `${minutes}:${seconds}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatMoney(cents: number, currency: string, locale?: string): string {
|
||||||
|
try {
|
||||||
|
return new Intl.NumberFormat(locale, { style: "currency", currency }).format(cents / 100);
|
||||||
|
} catch {
|
||||||
|
return `${(cents / 100).toFixed(2)} ${currency}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatRate(numerator: number, denominator: number, locale?: string): string {
|
||||||
|
if (denominator <= 0) return "–";
|
||||||
|
return new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }).format(
|
||||||
|
numerator / denominator,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Position of the pointer across an element as 0..1, for hover scrubbing. */
|
||||||
|
export function scrubFraction(clientX: number, left: number, width: number): number {
|
||||||
|
if (width <= 0) return 0;
|
||||||
|
return Math.min(1, Math.max(0, (clientX - left) / width));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Consent
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export type ConsentState = "complete" | "consent_only" | "missing";
|
||||||
|
|
||||||
|
export function consentState(
|
||||||
|
person: Pick<MediaPerson, "consentRecordedAt" | "ageVerificationMethod" | "ageVerifiedAt">,
|
||||||
|
): ConsentState {
|
||||||
|
if (!person.consentRecordedAt) return "missing";
|
||||||
|
if (person.ageVerificationMethod !== "none" && person.ageVerifiedAt) return "complete";
|
||||||
|
return "consent_only";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConsentForm {
|
||||||
|
/** yyyy-mm-dd from a date input. */
|
||||||
|
consentDate: string;
|
||||||
|
method: AgeVerificationMethod;
|
||||||
|
/** yyyy-mm-dd; ignored when method is "none". */
|
||||||
|
verifiedDate: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DAY = /^\d{4}-\d{2}-\d{2}$/;
|
||||||
|
|
||||||
|
/** yyyy-mm-dd → ISO timestamp at UTC noon, so the calendar day survives any time zone. */
|
||||||
|
export function dayToIso(day: string): string | null {
|
||||||
|
if (!DAY.test(day)) return null;
|
||||||
|
const date = new Date(`${day}T12:00:00.000Z`);
|
||||||
|
return Number.isNaN(date.getTime()) ? null : date.toISOString();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isoToDay(iso: string | null | undefined): string {
|
||||||
|
return iso ? iso.slice(0, 10) : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function todayDay(now: Date = new Date()): string {
|
||||||
|
const local = new Date(now.getTime() - now.getTimezoneOffset() * 60_000);
|
||||||
|
return local.toISOString().slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Build the recordConsent input, or null when the form is incomplete. */
|
||||||
|
export function consentInput(
|
||||||
|
personId: string,
|
||||||
|
form: ConsentForm,
|
||||||
|
now: Date = new Date(),
|
||||||
|
): ConsentInput | null {
|
||||||
|
const consentRecordedAt = dayToIso(form.consentDate);
|
||||||
|
if (!consentRecordedAt) return null;
|
||||||
|
const today = todayDay(now);
|
||||||
|
if (form.consentDate > today) return null;
|
||||||
|
if (form.method === "none") {
|
||||||
|
return {
|
||||||
|
personId,
|
||||||
|
consentArtifactId: null,
|
||||||
|
consentRecordedAt,
|
||||||
|
ageVerificationMethod: "none",
|
||||||
|
ageVerifiedAt: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const ageVerifiedAt = dayToIso(form.verifiedDate);
|
||||||
|
if (!ageVerifiedAt || form.verifiedDate > today) return null;
|
||||||
|
return {
|
||||||
|
personId,
|
||||||
|
consentArtifactId: null,
|
||||||
|
consentRecordedAt,
|
||||||
|
ageVerificationMethod: form.method,
|
||||||
|
ageVerifiedAt,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// CSV metric import
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export type CsvDelimiter = MetricCsvMapping["delimiter"];
|
||||||
|
|
||||||
|
/** Split one CSV line, honoring double-quoted fields. */
|
||||||
|
export function splitCsvLine(line: string, delimiter: CsvDelimiter): string[] {
|
||||||
|
const cells: string[] = [];
|
||||||
|
let cell = "";
|
||||||
|
let quoted = false;
|
||||||
|
for (let index = 0; index < line.length; index += 1) {
|
||||||
|
const char = line[index];
|
||||||
|
if (quoted) {
|
||||||
|
if (char === '"' && line[index + 1] === '"') {
|
||||||
|
cell += '"';
|
||||||
|
index += 1;
|
||||||
|
} else if (char === '"') {
|
||||||
|
quoted = false;
|
||||||
|
} else {
|
||||||
|
cell += char;
|
||||||
|
}
|
||||||
|
} else if (char === '"') {
|
||||||
|
quoted = true;
|
||||||
|
} else if (char === delimiter) {
|
||||||
|
cells.push(cell.trim());
|
||||||
|
cell = "";
|
||||||
|
} else {
|
||||||
|
cell += char;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cells.push(cell.trim());
|
||||||
|
return cells;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function firstCsvLine(csv: string): string {
|
||||||
|
const withoutBom = csv.startsWith("") ? csv.slice(1) : csv;
|
||||||
|
return withoutBom.split(/\r?\n/, 1)[0] ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function guessDelimiter(headerLine: string): CsvDelimiter {
|
||||||
|
const counts: Array<[CsvDelimiter, number]> = [
|
||||||
|
[",", headerLine.split(",").length],
|
||||||
|
[";", headerLine.split(";").length],
|
||||||
|
["\t", headerLine.split("\t").length],
|
||||||
|
];
|
||||||
|
counts.sort((a, b) => b[1] - a[1]);
|
||||||
|
return counts[0]?.[0] ?? ",";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function csvHeaders(csv: string, delimiter: CsvDelimiter): string[] {
|
||||||
|
return splitCsvLine(firstCsvLine(csv), delimiter).filter((header) => header.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MappingColumn = keyof MetricCsvMapping["columns"];
|
||||||
|
export const MAPPING_COLUMNS: MappingColumn[] = [
|
||||||
|
"publication",
|
||||||
|
"observedAt",
|
||||||
|
"views",
|
||||||
|
"clicks",
|
||||||
|
"conversions",
|
||||||
|
"revenue",
|
||||||
|
"currency",
|
||||||
|
];
|
||||||
|
|
||||||
|
const COLUMN_HINTS: Record<MappingColumn, RegExp> = {
|
||||||
|
publication: /(utm.?content|tracking|publication|post|video|url|link|^id$)/i,
|
||||||
|
observedAt: /(date|day|time|observed|datum)/i,
|
||||||
|
views: /(views?|impressions?|plays?|aufrufe)/i,
|
||||||
|
clicks: /(clicks?|taps?|klicks?)/i,
|
||||||
|
conversions: /(conversions?|purchases?|sales|orders?|käufe|kaeufe)/i,
|
||||||
|
revenue: /(revenue|earnings|amount|umsatz|income)/i,
|
||||||
|
currency: /(currency|währung|waehrung)/i,
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Best guess of which header feeds which metric; every header is used at most once. */
|
||||||
|
export function guessColumns(headers: string[]): Partial<Record<MappingColumn, string>> {
|
||||||
|
const used = new Set<string>();
|
||||||
|
const guess: Partial<Record<MappingColumn, string>> = {};
|
||||||
|
for (const column of MAPPING_COLUMNS) {
|
||||||
|
const match = headers.find((header) => !used.has(header) && COLUMN_HINTS[column].test(header));
|
||||||
|
if (match) {
|
||||||
|
guess[column] = match;
|
||||||
|
used.add(match);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return guess;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function guessPublicationKey(
|
||||||
|
header: string | undefined,
|
||||||
|
): MetricCsvMapping["publicationKey"] {
|
||||||
|
if (!header) return "utm_content";
|
||||||
|
if (/utm/i.test(header)) return "utm_content";
|
||||||
|
if (/track/i.test(header)) return "tracking_url";
|
||||||
|
if (/(url|link)/i.test(header)) return "external_url";
|
||||||
|
if (/id$/i.test(header)) return "id";
|
||||||
|
return "utm_content";
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Funnel
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export interface FunnelTotals {
|
||||||
|
views: number;
|
||||||
|
clicks: number;
|
||||||
|
conversions: number;
|
||||||
|
/** One amount per currency; revenue never mixes currencies. */
|
||||||
|
revenue: Array<{ currency: string; cents: number }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function funnelTotals(
|
||||||
|
rows: ReadonlyArray<
|
||||||
|
Pick<FunnelRow, "views" | "clicks" | "conversions" | "revenueCents" | "currency">
|
||||||
|
>,
|
||||||
|
): FunnelTotals {
|
||||||
|
const revenue = new Map<string, number>();
|
||||||
|
let views = 0;
|
||||||
|
let clicks = 0;
|
||||||
|
let conversions = 0;
|
||||||
|
for (const row of rows) {
|
||||||
|
views += row.views;
|
||||||
|
clicks += row.clicks;
|
||||||
|
conversions += row.conversions;
|
||||||
|
if (row.revenueCents > 0 || !revenue.has(row.currency)) {
|
||||||
|
revenue.set(row.currency, (revenue.get(row.currency) ?? 0) + row.revenueCents);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
views,
|
||||||
|
clicks,
|
||||||
|
conversions,
|
||||||
|
revenue: [...revenue.entries()]
|
||||||
|
.map(([currency, cents]) => ({ currency, cents }))
|
||||||
|
.sort((a, b) => b.cents - a.cents || a.currency.localeCompare(b.currency)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Bar widths for the funnel steps, each relative to views (0..1). */
|
||||||
|
export function funnelWidths(totals: Pick<FunnelTotals, "views" | "clicks" | "conversions">) {
|
||||||
|
const base = Math.max(totals.views, totals.clicks, totals.conversions, 1);
|
||||||
|
return {
|
||||||
|
views: totals.views / base,
|
||||||
|
clicks: totals.clicks / base,
|
||||||
|
conversions: totals.conversions / base,
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -1,6 +1,294 @@
|
|||||||
|
import { Plural, Trans, useLingui } from "@lingui/react/macro";
|
||||||
|
import type { MediaAsset, MediaCollection, MediaSource } from "@rakazo/contracts";
|
||||||
|
import { Button } from "@rakazo/ui-web";
|
||||||
|
import { Plus } from "lucide-react";
|
||||||
|
import { useCallback, useEffect, useRef, useState } from "react";
|
||||||
|
import { LoadingState } from "../../components/ai/primitives";
|
||||||
|
import { AssetGrid, useAssetSelection } from "../../components/media/library/AssetGrid";
|
||||||
|
import { ConnectSourceDialog } from "../../components/media/library/ConnectSourceDialog";
|
||||||
|
import { CreateProjectDialog } from "../../components/media/library/CreateProjectDialog";
|
||||||
|
import {
|
||||||
|
CollectionCard,
|
||||||
|
FilterChips,
|
||||||
|
IndexingProgress,
|
||||||
|
LibraryModeToggle,
|
||||||
|
LibrarySearch,
|
||||||
|
} from "../../components/media/library/LibraryChrome";
|
||||||
|
import { usePhotosSync } from "../../components/media/library/usePhotosSync";
|
||||||
|
import { VirtualGrid } from "../../components/media/library/VirtualGrid";
|
||||||
|
import type { LibraryFilter } from "../../lib/media-library";
|
||||||
|
import { assetQueryFor, hasAssetQuery, INGEST_PENDING_STATES } from "../../lib/media-library";
|
||||||
|
import { usePolling } from "../../lib/media-poll";
|
||||||
|
import { rpcErrorMessage, useMediaStudio } from "../../lib/media-studio";
|
||||||
|
import { rpc } from "../../lib/rpc";
|
||||||
import type { MediaViewProps } from "./nav";
|
import type { MediaViewProps } from "./nav";
|
||||||
|
|
||||||
/** Placeholder; the W3-web-library slice replaces this view. */
|
const PAGE = 200;
|
||||||
export function LibraryView(_props: MediaViewProps & Record<string, unknown>) {
|
|
||||||
return null;
|
type Paged<T> = { items: T[]; cursor: string | null; done: boolean; loading: boolean };
|
||||||
|
const emptyPage = <T,>(): Paged<T> => ({ items: [], cursor: null, done: false, loading: false });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cursor-paged list that appends on demand. A new `key` starts over and drops
|
||||||
|
* pages still in flight for the previous key.
|
||||||
|
*/
|
||||||
|
function usePagedList<T>(
|
||||||
|
key: string,
|
||||||
|
load: (cursor: string | null) => Promise<{ items: T[]; nextCursor: string | null }>,
|
||||||
|
enabled: boolean,
|
||||||
|
) {
|
||||||
|
const [state, setState] = useState<Paged<T>>(emptyPage);
|
||||||
|
const [error, setError] = useState<unknown>(null);
|
||||||
|
const generation = useRef(0);
|
||||||
|
const busy = useRef(false);
|
||||||
|
const loadRef = useRef(load);
|
||||||
|
loadRef.current = load;
|
||||||
|
const stateRef = useRef(state);
|
||||||
|
stateRef.current = state;
|
||||||
|
|
||||||
|
const more = useCallback(async () => {
|
||||||
|
const current = stateRef.current;
|
||||||
|
if (busy.current || current.done) return;
|
||||||
|
busy.current = true;
|
||||||
|
const mine = generation.current;
|
||||||
|
setState((s) => ({ ...s, loading: true }));
|
||||||
|
try {
|
||||||
|
const page = await loadRef.current(current.cursor);
|
||||||
|
if (mine !== generation.current) return;
|
||||||
|
setError(null);
|
||||||
|
setState((s) => ({
|
||||||
|
items: [...s.items, ...page.items],
|
||||||
|
cursor: page.nextCursor,
|
||||||
|
done: page.nextCursor === null,
|
||||||
|
loading: false,
|
||||||
|
}));
|
||||||
|
} catch (cause) {
|
||||||
|
if (mine !== generation.current) return;
|
||||||
|
setError(cause);
|
||||||
|
setState((s) => ({ ...s, loading: false, done: true }));
|
||||||
|
} finally {
|
||||||
|
if (mine === generation.current) busy.current = false;
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const reset = useCallback(() => {
|
||||||
|
generation.current += 1;
|
||||||
|
busy.current = false;
|
||||||
|
stateRef.current = emptyPage();
|
||||||
|
setState(emptyPage());
|
||||||
|
setError(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void key;
|
||||||
|
reset();
|
||||||
|
if (enabled) void more();
|
||||||
|
}, [key, enabled, reset, more]);
|
||||||
|
|
||||||
|
const restart = useCallback(() => {
|
||||||
|
reset();
|
||||||
|
void more();
|
||||||
|
}, [reset, more]);
|
||||||
|
|
||||||
|
return { ...state, error, more, reset: restart };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LibraryView({
|
||||||
|
navigate,
|
||||||
|
mode = "sessions",
|
||||||
|
}: MediaViewProps & { mode?: "sessions" | "themes" }) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
const { canLinkFolder } = useMediaStudio();
|
||||||
|
const [filters, setFilters] = useState<ReadonlySet<LibraryFilter>>(() => new Set());
|
||||||
|
const [text, setText] = useState("");
|
||||||
|
const [debouncedText, setDebouncedText] = useState("");
|
||||||
|
const [sources, setSources] = useState<MediaSource[] | null>(null);
|
||||||
|
const [pending, setPending] = useState(false);
|
||||||
|
const [connectOpen, setConnectOpen] = useState(false);
|
||||||
|
const [createOpen, setCreateOpen] = useState(false);
|
||||||
|
const selection = useAssetSelection();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setTimeout(() => setDebouncedText(text), 250);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [text]);
|
||||||
|
|
||||||
|
const searching = hasAssetQuery(filters, debouncedText);
|
||||||
|
const query = assetQueryFor(filters, debouncedText);
|
||||||
|
const queryKey = JSON.stringify(query);
|
||||||
|
const kind = mode === "themes" ? "theme" : "session";
|
||||||
|
|
||||||
|
const collections = usePagedList<MediaCollection>(
|
||||||
|
kind,
|
||||||
|
(cursor) => rpc.media.collections.list({ kind, cursor, limit: PAGE }),
|
||||||
|
!searching,
|
||||||
|
);
|
||||||
|
const assets = usePagedList<MediaAsset>(
|
||||||
|
queryKey,
|
||||||
|
(cursor) => rpc.media.assets.search({ ...query, cursor, limit: PAGE }),
|
||||||
|
searching,
|
||||||
|
);
|
||||||
|
|
||||||
|
const refreshStatus = useCallback(async () => {
|
||||||
|
const [list, work] = await Promise.all([
|
||||||
|
rpc.media.sources.list({}),
|
||||||
|
rpc.media.assets.search({ ingestStates: [...INGEST_PENDING_STATES], cursor: null, limit: 1 }),
|
||||||
|
]);
|
||||||
|
setSources(list);
|
||||||
|
setPending(work.items.length > 0);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const photos = usePhotosSync(
|
||||||
|
useCallback(() => {
|
||||||
|
void refreshStatus();
|
||||||
|
collections.reset();
|
||||||
|
}, [refreshStatus, collections.reset]),
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void refreshStatus().catch(() => setSources([]));
|
||||||
|
}, [refreshStatus]);
|
||||||
|
|
||||||
|
const indexing =
|
||||||
|
photos.syncing || pending || (sources ?? []).some((source) => source.status === "syncing");
|
||||||
|
usePolling(refreshStatus, indexing);
|
||||||
|
|
||||||
|
// Indexing just finished: the grouping changed underneath us.
|
||||||
|
const wasIndexing = useRef(indexing);
|
||||||
|
useEffect(() => {
|
||||||
|
if (wasIndexing.current && !indexing) {
|
||||||
|
if (searching) assets.reset();
|
||||||
|
else collections.reset();
|
||||||
|
}
|
||||||
|
wasIndexing.current = indexing;
|
||||||
|
}, [indexing, searching, assets.reset, collections.reset]);
|
||||||
|
|
||||||
|
const noSources = sources !== null && sources.length === 0 && !photos.syncing;
|
||||||
|
const selectedIds = [...selection.selected];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div data-testid="media-library" className="flex min-h-0 flex-1 flex-col">
|
||||||
|
<div className="flex flex-wrap items-center gap-2 px-4 pt-3 pb-2">
|
||||||
|
<LibraryModeToggle
|
||||||
|
mode={mode}
|
||||||
|
onChange={(next) =>
|
||||||
|
navigate(next === "people" ? { name: "people" } : { name: "library", mode: next })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<LibrarySearch value={text} onChange={setText} />
|
||||||
|
<FilterChips value={filters} onChange={setFilters} />
|
||||||
|
<div className="ml-auto flex items-center gap-2">
|
||||||
|
{selectedIds.length > 0 ? (
|
||||||
|
<>
|
||||||
|
<Button variant="ghost" size="sm" onClick={selection.clear}>
|
||||||
|
<Plural value={selectedIds.length} one="# selected" other="# selected" />
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" onClick={() => setCreateOpen(true)}>
|
||||||
|
<Trans>Create project</Trans>
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
aria-label={t`Sources`}
|
||||||
|
onClick={() => setConnectOpen(true)}
|
||||||
|
>
|
||||||
|
<Plus />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{indexing ? (
|
||||||
|
<IndexingProgress
|
||||||
|
done={photos.progress?.uploadsDone}
|
||||||
|
total={photos.progress?.uploadsTotal}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{sources === null ? (
|
||||||
|
<div className="grid flex-1 place-items-center">
|
||||||
|
<LoadingState label={t`Loading`} />
|
||||||
|
</div>
|
||||||
|
) : noSources ? (
|
||||||
|
<div className="grid flex-1 place-items-center px-8">
|
||||||
|
<div className="flex flex-col items-center gap-3 text-center">
|
||||||
|
<p className="text-ui-body text-muted-foreground">
|
||||||
|
<Trans>Connect your photos and videos.</Trans>
|
||||||
|
</p>
|
||||||
|
<Button data-testid="media-connect-source-open" onClick={() => setConnectOpen(true)}>
|
||||||
|
<Trans>Connect a source</Trans>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : searching ? (
|
||||||
|
assets.items.length === 0 && !assets.loading ? (
|
||||||
|
<EmptyMessage error={assets.error}>
|
||||||
|
<Trans>Nothing matches.</Trans>
|
||||||
|
</EmptyMessage>
|
||||||
|
) : (
|
||||||
|
<AssetGrid
|
||||||
|
assets={assets.items}
|
||||||
|
selection={selection}
|
||||||
|
scrub
|
||||||
|
onNearEnd={() => void assets.more()}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
) : collections.items.length === 0 && !collections.loading ? (
|
||||||
|
indexing ? null : (
|
||||||
|
<EmptyMessage error={collections.error}>
|
||||||
|
{mode === "themes" ? <Trans>No themes yet.</Trans> : <Trans>No sessions yet.</Trans>}
|
||||||
|
</EmptyMessage>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<VirtualGrid
|
||||||
|
testId="media-collection-grid"
|
||||||
|
label={mode === "themes" ? t`Themes` : t`Sessions`}
|
||||||
|
count={collections.items.length}
|
||||||
|
getKey={(index) => collections.items[index]?.id ?? index}
|
||||||
|
minTileWidth={220}
|
||||||
|
gap={16}
|
||||||
|
tileAspect={10 / 16}
|
||||||
|
extraHeight={44}
|
||||||
|
onNearEnd={() => void collections.more()}
|
||||||
|
renderItem={(index) => {
|
||||||
|
const collection = collections.items[index];
|
||||||
|
if (!collection) return null;
|
||||||
|
return (
|
||||||
|
<CollectionCard
|
||||||
|
collection={collection}
|
||||||
|
onOpen={() => navigate({ name: "collection", collectionId: collection.id })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ConnectSourceDialog
|
||||||
|
open={connectOpen}
|
||||||
|
onOpenChange={setConnectOpen}
|
||||||
|
sources={sources ?? []}
|
||||||
|
canLinkFolder={canLinkFolder}
|
||||||
|
photos={photos}
|
||||||
|
onChanged={() => void refreshStatus()}
|
||||||
|
/>
|
||||||
|
<CreateProjectDialog
|
||||||
|
open={createOpen}
|
||||||
|
onOpenChange={setCreateOpen}
|
||||||
|
defaultTitle={debouncedText.trim() || t`New project`}
|
||||||
|
collectionIds={[]}
|
||||||
|
assetIds={selectedIds}
|
||||||
|
onCreated={(projectId) => navigate({ name: "project", projectId })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function EmptyMessage({ error, children }: { error: unknown; children: React.ReactNode }) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
return (
|
||||||
|
<div className="grid flex-1 place-items-center px-8 text-center text-ui-body text-muted-foreground">
|
||||||
|
{error ? rpcErrorMessage(error, t`Could not load the library.`) : children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,21 +1,47 @@
|
|||||||
import { useState } from "react";
|
import { Trans, useLingui } from "@lingui/react/macro";
|
||||||
|
import type { MediaProject } from "@rakazo/contracts";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogTitle,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
Tabs,
|
||||||
|
TabsList,
|
||||||
|
TabsTrigger,
|
||||||
|
} from "@rakazo/ui-web";
|
||||||
|
import { ChevronDown, ChevronLeft, X } from "lucide-react";
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { MediaStudioContext, useMediaCapabilities } from "../../lib/media-studio";
|
||||||
|
import { rpc } from "../../lib/rpc";
|
||||||
import { BrandKitView } from "./BrandKitView";
|
import { BrandKitView } from "./BrandKitView";
|
||||||
import { CollectionView } from "./CollectionView";
|
import { CollectionView } from "./CollectionView";
|
||||||
import { EditorView } from "./EditorView";
|
import { EditorView } from "./EditorView";
|
||||||
import { LibraryView } from "./LibraryView";
|
import { LibraryView } from "./LibraryView";
|
||||||
import type { MediaView } from "./nav";
|
import type { MediaSection, MediaView } from "./nav";
|
||||||
|
import { pushView, sectionOf } from "./nav";
|
||||||
import { PeopleView } from "./PeopleView";
|
import { PeopleView } from "./PeopleView";
|
||||||
import { ProjectView } from "./ProjectView";
|
import { ProjectView } from "./ProjectView";
|
||||||
import { ResultsView } from "./ResultsView";
|
import { ResultsView } from "./ResultsView";
|
||||||
import { ReviewView } from "./ReviewView";
|
import { ReviewView } from "./ReviewView";
|
||||||
|
|
||||||
/** Media Studio surface. Chrome (header, close, tabs) belongs to the W3-web-library slice. */
|
function ViewSwitch({
|
||||||
export function MediaStudio({ onClose }: { onClose: () => void }) {
|
view,
|
||||||
const [view, setView] = useState<MediaView>({ name: "library" });
|
navigate,
|
||||||
const props = { navigate: setView, onClose };
|
onClose,
|
||||||
|
}: {
|
||||||
|
view: MediaView;
|
||||||
|
navigate: (view: MediaView) => void;
|
||||||
|
onClose: () => void;
|
||||||
|
}) {
|
||||||
|
const props = { navigate, onClose };
|
||||||
switch (view.name) {
|
switch (view.name) {
|
||||||
case "library":
|
case "library":
|
||||||
return <LibraryView {...props} />;
|
return <LibraryView {...props} mode={view.mode} />;
|
||||||
case "collection":
|
case "collection":
|
||||||
return <CollectionView {...props} collectionId={view.collectionId} />;
|
return <CollectionView {...props} collectionId={view.collectionId} />;
|
||||||
case "people":
|
case "people":
|
||||||
@ -32,3 +58,135 @@ export function MediaStudio({ onClose }: { onClose: () => void }) {
|
|||||||
return <BrandKitView {...props} brandKitId={view.brandKitId} />;
|
return <BrandKitView {...props} brandKitId={view.brandKitId} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function ProjectsMenu({
|
||||||
|
navigate,
|
||||||
|
refreshKey,
|
||||||
|
}: {
|
||||||
|
navigate: (view: MediaView) => void;
|
||||||
|
refreshKey: unknown;
|
||||||
|
}) {
|
||||||
|
const [projects, setProjects] = useState<MediaProject[]>([]);
|
||||||
|
useEffect(() => {
|
||||||
|
void refreshKey;
|
||||||
|
let active = true;
|
||||||
|
rpc.media.projects
|
||||||
|
.list({ cursor: null, limit: 20 })
|
||||||
|
.then((page) => {
|
||||||
|
if (active) setProjects(page.items.filter((project) => project.status !== "archived"));
|
||||||
|
})
|
||||||
|
.catch(() => undefined);
|
||||||
|
return () => {
|
||||||
|
active = false;
|
||||||
|
};
|
||||||
|
}, [refreshKey]);
|
||||||
|
if (projects.length === 0) return null;
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger
|
||||||
|
render={<Button variant="ghost" size="sm" data-testid="media-projects-menu" />}
|
||||||
|
>
|
||||||
|
<Trans>Projects</Trans>
|
||||||
|
<ChevronDown data-icon="inline-end" aria-hidden="true" />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="max-h-80 w-64 overflow-y-auto">
|
||||||
|
{projects.map((project) => (
|
||||||
|
<DropdownMenuItem
|
||||||
|
key={project.id}
|
||||||
|
onClick={() => navigate({ name: "project", projectId: project.id })}
|
||||||
|
>
|
||||||
|
<span className="truncate" dir="auto">
|
||||||
|
{project.title}
|
||||||
|
</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Media Studio surface: a full-window layer with its own back stack. */
|
||||||
|
export function MediaStudio({
|
||||||
|
onClose,
|
||||||
|
canLinkFolder = false,
|
||||||
|
}: {
|
||||||
|
onClose: () => void;
|
||||||
|
/** Deployment owner only: folder sources live on the host. */
|
||||||
|
canLinkFolder?: boolean;
|
||||||
|
}) {
|
||||||
|
const { t } = useLingui();
|
||||||
|
const capabilities = useMediaCapabilities();
|
||||||
|
const [stack, setStack] = useState<MediaView[]>([{ name: "library" }]);
|
||||||
|
const view = stack.at(-1) ?? { name: "library" };
|
||||||
|
const section = sectionOf(view);
|
||||||
|
const navigate = useCallback(
|
||||||
|
(next: MediaView) => setStack((current) => pushView(current, next)),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
const back = useCallback(
|
||||||
|
() => setStack((current) => (current.length > 1 ? current.slice(0, -1) : current)),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
const env = useMemo(() => ({ capabilities, canLinkFolder }), [capabilities, canLinkFolder]);
|
||||||
|
const notConfigured = capabilities !== null && !capabilities.configured;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
open
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
if (!open) onClose();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogContent
|
||||||
|
data-testid="media-studio"
|
||||||
|
data-view={view.name}
|
||||||
|
showCloseButton={false}
|
||||||
|
className="inset-0 top-0 left-0 flex h-full w-full max-w-none translate-x-0 translate-y-0 flex-col gap-0 rounded-none bg-background p-0 text-foreground ring-0 sm:max-w-none"
|
||||||
|
>
|
||||||
|
<header className="flex items-center gap-2 border-b border-sidebar-border px-3 py-2.5 md:px-[18px]">
|
||||||
|
{stack.length > 1 ? (
|
||||||
|
<Button variant="ghost" size="icon-sm" aria-label={t`Back`} onClick={back}>
|
||||||
|
<ChevronLeft />
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
<DialogTitle className="text-ui-body font-medium text-foreground">
|
||||||
|
<Trans>Media</Trans>
|
||||||
|
</DialogTitle>
|
||||||
|
<div className="flex min-w-0 flex-1 justify-center">
|
||||||
|
<Tabs
|
||||||
|
value={section ?? ""}
|
||||||
|
onValueChange={(value) => navigate({ name: value as MediaSection })}
|
||||||
|
>
|
||||||
|
<TabsList variant="line" aria-label={t`Media Studio`}>
|
||||||
|
<TabsTrigger value="library">
|
||||||
|
<Trans>Library</Trans>
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="results">
|
||||||
|
<Trans>Results</Trans>
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="brandKit">
|
||||||
|
<Trans>Brand kit</Trans>
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
<ProjectsMenu navigate={navigate} refreshKey={view} />
|
||||||
|
<DialogClose aria-label={t`Close`} render={<Button variant="ghost" size="icon-sm" />}>
|
||||||
|
<X />
|
||||||
|
</DialogClose>
|
||||||
|
</header>
|
||||||
|
<MediaStudioContext.Provider value={env}>
|
||||||
|
<main className="flex min-h-0 flex-1 flex-col">
|
||||||
|
{notConfigured ? (
|
||||||
|
<div className="grid flex-1 place-items-center px-8 text-center text-ui-body text-muted-foreground">
|
||||||
|
<Trans>Media Studio is not set up on this server.</Trans>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ViewSwitch view={view} navigate={navigate} onClose={onClose} />
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</MediaStudioContext.Provider>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
/** Screens inside Media Studio. Every view receives `navigate` to move between them. */
|
/** Screens inside Media Studio. Every view receives `navigate` to move between them. */
|
||||||
export type MediaView =
|
export type MediaView =
|
||||||
| { name: "library" }
|
| { name: "library"; mode?: "sessions" | "themes" }
|
||||||
| { name: "collection"; collectionId: string }
|
| { name: "collection"; collectionId: string }
|
||||||
| { name: "people" }
|
| { name: "people" }
|
||||||
| { name: "results" }
|
| { name: "results" }
|
||||||
@ -12,3 +12,36 @@ export type MediaView =
|
|||||||
export interface MediaViewProps {
|
export interface MediaViewProps {
|
||||||
navigate: (view: MediaView) => void;
|
navigate: (view: MediaView) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Top-level sections: opening one starts a fresh back stack. */
|
||||||
|
export type MediaSection = "library" | "results" | "brandKit";
|
||||||
|
|
||||||
|
export function sectionOf(view: MediaView): MediaSection | null {
|
||||||
|
switch (view.name) {
|
||||||
|
case "library":
|
||||||
|
case "people":
|
||||||
|
case "collection":
|
||||||
|
return "library";
|
||||||
|
case "results":
|
||||||
|
return "results";
|
||||||
|
case "brandKit":
|
||||||
|
return "brandKit";
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isRootView(view: MediaView): boolean {
|
||||||
|
return (
|
||||||
|
view.name === "library" ||
|
||||||
|
view.name === "people" ||
|
||||||
|
view.name === "results" ||
|
||||||
|
(view.name === "brandKit" && !view.brandKitId)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Push `next` onto the back stack; root views replace it. */
|
||||||
|
export function pushView(stack: readonly MediaView[], next: MediaView): MediaView[] {
|
||||||
|
if (isRootView(next)) return [next];
|
||||||
|
return [...stack, next];
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user