@linktr.ee/messaging-react 2.3.0-rc-1779486690 → 2.3.3-rc-1779777764
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Card-DdpdnSh_.js → Card-Bz1cMPwJ.js} +16 -16
- package/dist/{Card-DdpdnSh_.js.map → Card-Bz1cMPwJ.js.map} +1 -1
- package/dist/{Card-ot16XqS2.cjs → Card-CBWof9at.cjs} +2 -2
- package/dist/{Card-ot16XqS2.cjs.map → Card-CBWof9at.cjs.map} +1 -1
- package/dist/{Card-CexShqpK.cjs → Card-D2KIDqPs.cjs} +2 -2
- package/dist/{Card-CexShqpK.cjs.map → Card-D2KIDqPs.cjs.map} +1 -1
- package/dist/{Card-4takoN_-.js → Card-D9iWkHKh.js} +6 -6
- package/dist/{Card-4takoN_-.js.map → Card-D9iWkHKh.js.map} +1 -1
- package/dist/{Card-BuROm0u7.js → Card-DFG3rvzF.js} +19 -19
- package/dist/{Card-BuROm0u7.js.map → Card-DFG3rvzF.js.map} +1 -1
- package/dist/{Card-CgpHBx-W.cjs → Card-DgXoTo6c.cjs} +2 -2
- package/dist/{Card-CgpHBx-W.cjs.map → Card-DgXoTo6c.cjs.map} +1 -1
- package/dist/{LockedThumbnail-Drsh4B5o.js → LockedThumbnail-BkeCwTCw.js} +8 -8
- package/dist/{LockedThumbnail-Drsh4B5o.js.map → LockedThumbnail-BkeCwTCw.js.map} +1 -1
- package/dist/{LockedThumbnail-CydtYOSA.cjs → LockedThumbnail-CD9YTQ0r.cjs} +2 -2
- package/dist/{LockedThumbnail-CydtYOSA.cjs.map → LockedThumbnail-CD9YTQ0r.cjs.map} +1 -1
- package/dist/assets/index.css +1 -1
- package/dist/index-DuGzAVyy.cjs +18 -0
- package/dist/index-DuGzAVyy.cjs.map +1 -0
- package/dist/index-v6yofqub.js +8128 -0
- package/dist/index-v6yofqub.js.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/ChannelView.tsx +8 -2
- package/src/components/CustomMessage/CustomMessage.stories.tsx +140 -0
- package/src/components/CustomMessage/CustomMessageActions.tsx +35 -0
- package/src/components/CustomMessage/index.tsx +20 -15
- package/src/components/CustomMessageInput/CustomMessageInput.test.tsx +12 -11
- package/src/components/CustomMessageInput/index.tsx +7 -3
- package/src/styles.css +129 -19
- package/dist/index-BCbVXFHI.js +0 -4698
- package/dist/index-BCbVXFHI.js.map +0 -1
- package/dist/index-CQ913euH.cjs +0 -2
- package/dist/index-CQ913euH.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card-
|
|
1
|
+
{"version":3,"file":"Card-DgXoTo6c.cjs","sources":["../src/components/LockedAttachment/components/Sent/Card.tsx"],"sourcesContent":["import { CheckCircleIcon, ImagesIcon } from '@phosphor-icons/react'\nimport React, { useCallback, useRef, useState } from 'react'\n\nimport type {\n LockedAttachmentBaseProps,\n LockedAttachmentSource,\n} from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport GalleryThumbnail from '../_shared/GalleryThumbnail'\nimport LockedCardShell from '../_shared/LockedCardShell'\nimport LockedThumbnail from '../_shared/LockedThumbnail'\n\nexport interface SentCardProps extends LockedAttachmentBaseProps {\n /** Placeholder shown in the title slot when no title is set. */\n placeholderTitle?: string\n /** Fired the first time the sender taps the thumbnail to preview their own attachment. */\n onPreviewClick?: () => void\n /**\n * Lazily loads the underlying source so the sender can preview the attachment.\n * Called the first time the thumbnail is tapped; the returned source is cached\n * and reused on subsequent toggles.\n */\n onFetchSource?: () => Promise<LockedAttachmentSource | void>\n}\n\n/**\n * The card the sender sees in chat after a paid attachment has been posted.\n * Matches the Sent column of the messaging design system in Figma.\n */\nconst SentCard: React.FC<SentCardProps> = ({\n title,\n mimeType = 'application/octet-stream',\n thumbnailUrl,\n detail,\n amountText,\n placeholderTitle = 'Attachment title',\n paymentStatus,\n gallery,\n onPreviewClick,\n onFetchSource,\n}) => {\n const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n const [isPreviewVisible, setIsPreviewVisible] = useState(false)\n const [isLoadingPreview, setIsLoadingPreview] = useState(false)\n const fetchingRef = useRef(false)\n\n const isGallery = (gallery?.length ?? 0) >= 2\n\n const handleToggle = useCallback(async () => {\n onPreviewClick?.()\n if (isPreviewVisible) {\n setIsPreviewVisible(false)\n return\n }\n // Gallery items carry their own per-item sources on the `gallery` prop, so\n // we just flip visibility — no async source fetch is needed.\n if (isGallery) {\n setIsPreviewVisible(true)\n return\n }\n if (source) {\n setIsPreviewVisible(true)\n return\n }\n if (!onFetchSource) return\n if (fetchingRef.current) return\n fetchingRef.current = true\n setIsLoadingPreview(true)\n try {\n const result = await onFetchSource()\n if (result) {\n setSource(result)\n setIsPreviewVisible(true)\n }\n } finally {\n fetchingRef.current = false\n setIsLoadingPreview(false)\n }\n }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])\n\n // Gallery is always previewable for the sender because each item's source\n // is already provided up-front via `gallery[*].sourceUrl`.\n const togglePreview =\n isGallery || onFetchSource || onPreviewClick ? handleToggle : undefined\n const showLocked = !isPreviewVisible\n const isBusy = isLoadingPreview\n\n const statusBadge =\n paymentStatus === 'paid' ? (\n <React.Fragment>\n <span className=\"text-xs font-medium text-white/55\">•</span>\n <span className=\"text-xs font-medium text-[#34c759]\">Sold</span>\n <CheckCircleIcon className=\"size-4 text-[#34c759]\" weight=\"bold\" />\n </React.Fragment>\n ) : amountText ? (\n <React.Fragment>\n <span className=\"text-xs font-medium text-white/55\">•</span>\n <span className=\"text-xs font-medium text-white/55\">{amountText}</span>\n </React.Fragment>\n ) : null\n\n const thumbnail = isGallery ? (\n <GalleryThumbnail\n variant=\"dark\"\n gallery={gallery!}\n title={title}\n showLocked={showLocked}\n paymentStatus={paymentStatus}\n />\n ) : (\n <LockedThumbnail\n variant=\"dark\"\n mimeType={mimeType}\n thumbnailUrl={thumbnailUrl}\n title={title}\n source={source}\n showLocked={showLocked}\n paymentStatus={paymentStatus}\n />\n )\n\n return (\n <LockedCardShell variant=\"dark\">\n {togglePreview ? (\n // Uses a `<div role=\"button\">` rather than a native `<button>` so the\n // gallery's carousel arrow `<button>`s rendered inside `thumbnail`\n // don't produce invalid nested interactive elements.\n <div\n role=\"button\"\n tabIndex={isBusy ? -1 : 0}\n aria-label=\"Toggle preview\"\n aria-busy={isBusy}\n aria-pressed={!showLocked}\n aria-disabled={isBusy || undefined}\n onClick={isBusy ? undefined : togglePreview}\n onKeyDown={(e) => {\n if (isBusy) return\n // Only handle keys that originate on the wrapper itself, not on\n // inner interactive elements (gallery carousel arrows). Without\n // this guard, pressing Enter/Space on a focused child would bubble\n // up and toggle the preview in addition to activating the child.\n if (e.target !== e.currentTarget) return\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n void togglePreview()\n }\n }}\n className={\n !isBusy\n ? 'block w-full cursor-pointer text-left'\n : 'block w-full text-left'\n }\n >\n {thumbnail}\n </div>\n ) : (\n thumbnail\n )}\n\n <CardBody\n variant=\"dark\"\n title={title}\n placeholderTitle={placeholderTitle}\n mimeType={mimeType}\n detail={detail}\n statusBadge={statusBadge}\n icon={\n isGallery ? (\n <ImagesIcon className=\"size-5 shrink-0 text-white/55\" />\n ) : undefined\n }\n />\n </LockedCardShell>\n )\n}\n\nexport default SentCard\n"],"names":["SentCard","title","mimeType","thumbnailUrl","detail","amountText","placeholderTitle","paymentStatus","gallery","onPreviewClick","onFetchSource","source","setSource","useState","isPreviewVisible","setIsPreviewVisible","isLoadingPreview","setIsLoadingPreview","fetchingRef","useRef","isGallery","handleToggle","useCallback","result","togglePreview","showLocked","isBusy","statusBadge","jsxs","React","jsx","CheckCircleIcon","thumbnail","GalleryThumbnail","LockedThumbnail","LockedCardShell","e","CardBody","ImagesIcon"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as o, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import m from "classnames";
|
|
3
|
-
import { r as N, A as y, g as w } from "./index-
|
|
4
|
-
import
|
|
3
|
+
import { r as N, A as y, g as w } from "./index-v6yofqub.js";
|
|
4
|
+
import P, { useState as U } from "react";
|
|
5
5
|
import { CaretLeftIcon as T, CaretRightIcon as C, PlayIcon as k, LockOpenIcon as z, LockSimpleIcon as I } from "@phosphor-icons/react";
|
|
6
6
|
const F = ({
|
|
7
7
|
variant: l,
|
|
@@ -67,9 +67,9 @@ const O = ({
|
|
|
67
67
|
paymentStatus: s,
|
|
68
68
|
topRight: d
|
|
69
69
|
}) => {
|
|
70
|
-
const [b, u] =
|
|
70
|
+
const [b, u] = U(0), r = t.length, a = Math.min(b, r - 1), i = t[a], h = S(i), f = h ? /* @__PURE__ */ e(k, { className: "size-6", weight: "fill" }) : c ? s === "paid" ? /* @__PURE__ */ e(z, { className: "size-6", weight: "fill" }) : /* @__PURE__ */ e(I, { className: "size-6", weight: "fill" }) : null, _ = (p) => {
|
|
71
71
|
p.stopPropagation(), u((x) => Math.max(0, x - 1));
|
|
72
|
-
},
|
|
72
|
+
}, j = (p) => {
|
|
73
73
|
p.stopPropagation(), u((x) => Math.min(r - 1, x + 1));
|
|
74
74
|
}, g = a === 0, v = a === r - 1;
|
|
75
75
|
return /* @__PURE__ */ o("div", { className: "relative aspect-[337/386] overflow-hidden rounded-t-2xl", children: [
|
|
@@ -102,12 +102,12 @@ const O = ({
|
|
|
102
102
|
}
|
|
103
103
|
),
|
|
104
104
|
f && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "flex size-12 items-center justify-center rounded-full bg-black/25 text-white", children: f }) }),
|
|
105
|
-
r > 1 && /* @__PURE__ */ o(
|
|
105
|
+
r > 1 && /* @__PURE__ */ o(P.Fragment, { children: [
|
|
106
106
|
/* @__PURE__ */ e(
|
|
107
107
|
"button",
|
|
108
108
|
{
|
|
109
109
|
type: "button",
|
|
110
|
-
onClick:
|
|
110
|
+
onClick: _,
|
|
111
111
|
disabled: g,
|
|
112
112
|
"aria-label": "Previous item",
|
|
113
113
|
className: m(
|
|
@@ -121,7 +121,7 @@ const O = ({
|
|
|
121
121
|
"button",
|
|
122
122
|
{
|
|
123
123
|
type: "button",
|
|
124
|
-
onClick:
|
|
124
|
+
onClick: j,
|
|
125
125
|
disabled: v,
|
|
126
126
|
"aria-label": "Next item",
|
|
127
127
|
className: m(
|
|
@@ -217,4 +217,4 @@ export {
|
|
|
217
217
|
V as L,
|
|
218
218
|
q as a
|
|
219
219
|
};
|
|
220
|
-
//# sourceMappingURL=LockedThumbnail-
|
|
220
|
+
//# sourceMappingURL=LockedThumbnail-BkeCwTCw.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LockedThumbnail-Drsh4B5o.js","sources":["../src/components/LockedAttachment/components/_shared/CardBody.tsx","../src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/LockedAttachment/components/_shared/LockedCardShell.tsx","../src/components/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/LockedAttachment/components/_shared/LockedThumbnail.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../../AttachmentCard'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface CardBodyProps {\n variant: LockedCardVariant\n title?: string\n placeholderTitle?: string\n mimeType: string\n detail?: string\n statusBadge?: React.ReactNode\n action?: React.ReactNode\n /** Overrides the auto-detected type icon (used by Gallery to swap in an `Images` icon). */\n icon?: React.ReactNode\n /** Optional control rendered on the right of the title/status block (e.g. Composer edit pencil). */\n trailingAction?: React.ReactNode\n}\n\n/**\n * Title + status row layout shared by Composer / Sent / Received cards.\n * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,\n * 4px gap between title and status row, 4px gap inside status row).\n */\nconst CardBody: React.FC<CardBodyProps> = ({\n variant,\n title,\n placeholderTitle = 'Attachment title',\n mimeType,\n detail,\n statusBadge,\n action,\n icon,\n trailingAction,\n}) => {\n const isDark = variant === 'dark'\n const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')\n const titleDimmed = isDark && !title\n\n const typeIcon =\n icon ??\n renderTypeIcon(mimeType, {\n className: classNames(\n 'size-5 shrink-0',\n isDark ? 'text-white/55' : 'text-black/55'\n ),\n weight: 'regular',\n })\n\n return (\n <div className=\"px-4 py-3\">\n <div className=\"flex items-end gap-3\">\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n {displayTitle.trim() !== '' && (\n <p\n className={classNames('truncate text-base font-medium leading-6', {\n 'text-black/90': !isDark,\n 'text-white/30': isDark && titleDimmed,\n 'text-white': isDark && !titleDimmed,\n })}\n >\n {displayTitle}\n </p>\n )}\n\n <div className=\"flex flex-wrap items-center gap-1\">\n {typeIcon}\n\n {detail != null && detail !== '' && (\n <span\n className={classNames(\n 'text-xs font-medium',\n isDark ? 'text-white/55' : 'text-black/55'\n )}\n >\n {detail}\n </span>\n )}\n\n {statusBadge}\n </div>\n </div>\n\n {trailingAction && <div className=\"shrink-0\">{trailingAction}</div>}\n </div>\n\n {action}\n </div>\n )\n}\n\nexport default CardBody\n","import {\n CaretLeftIcon,\n CaretRightIcon,\n LockOpenIcon,\n LockSimpleIcon,\n PlayIcon,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'\nimport type {\n LockedAttachmentGalleryItem,\n PaymentStatus,\n} from '../../types'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface GalleryThumbnailProps {\n variant: LockedCardVariant\n gallery: LockedAttachmentGalleryItem[]\n title?: string\n /** When true, all items are shown blurred + the locked/play badge is overlaid. */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n}\n\nfunction isPlayableItem(item: LockedAttachmentGalleryItem): boolean {\n const sourceType = getSourceType(item.mimeType)\n return sourceType === 'video' || sourceType === 'audio'\n}\n\n/**\n * Mixed-media carousel used by every LockedAttachment card when its `gallery`\n * prop has 2+ items. Matches the \"Gallery\" frames in the Figma design system:\n * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center\n * lock / play indicator that swaps based on the current item.\n */\nconst GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({\n variant,\n gallery,\n title,\n showLocked,\n paymentStatus,\n topRight,\n}) => {\n const [index, setIndex] = useState(0)\n const total = gallery.length\n const safeIndex = Math.min(index, total - 1)\n const current = gallery[safeIndex]\n const isVideoItem = isPlayableItem(current)\n\n // Center badge: PLAY for video items, LOCK for non-video locked items.\n // Unlocked image items show no center badge — the image is the content.\n const centerBadge = (() => {\n if (isVideoItem) {\n return <PlayIcon className=\"size-6\" weight=\"fill\" />\n }\n if (showLocked) {\n return paymentStatus === 'paid' ? (\n <LockOpenIcon className=\"size-6\" weight=\"fill\" />\n ) : (\n <LockSimpleIcon className=\"size-6\" weight=\"fill\" />\n )\n }\n return null\n })()\n\n // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n // wrapper on ComposerCard / SentCard.\n const goPrev = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.max(0, i - 1))\n }\n const goNext = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.min(total - 1, i + 1))\n }\n const atStart = safeIndex === 0\n const atEnd = safeIndex === total - 1\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary\n // inside the taller 337/386 gallery aspect).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — so the rounded corners are clipped\n // normally without any clip-path workarounds (see LockedThumbnail).\n return (\n <div className=\"relative aspect-[337/386] overflow-hidden rounded-t-2xl\">\n {showLocked ? (\n <div\n className={classNames(\n 'absolute inset-0',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {current.thumbnailUrl && (\n <img\n src={current.thumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy edge that `filter: blur` leaves\n // around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n )}\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={current.mimeType}\n sourceUrl={current.sourceUrl}\n thumbnailUrl={current.thumbnailUrl}\n title={title}\n variant={variant}\n />\n )}\n\n {centerBadge && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n {centerBadge}\n </div>\n </div>\n )}\n\n {total > 1 && (\n <React.Fragment>\n <button\n type=\"button\"\n onClick={goPrev}\n disabled={atStart}\n aria-label=\"Previous item\"\n className={classNames(\n 'absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atStart ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretLeftIcon className=\"size-5\" weight=\"bold\" />\n </button>\n <button\n type=\"button\"\n onClick={goNext}\n disabled={atEnd}\n aria-label=\"Next item\"\n className={classNames(\n 'absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atEnd ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretRightIcon className=\"size-5\" weight=\"bold\" />\n </button>\n\n <div className=\"pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1\">\n <span className=\"text-xs font-medium leading-4 text-white\">\n {safeIndex + 1}/{total}\n </span>\n </div>\n </React.Fragment>\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default GalleryThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport type LockedCardVariant = 'dark' | 'light'\n\nexport interface LockedCardShellProps {\n variant: LockedCardVariant\n children: React.ReactNode\n rootRef?: React.Ref<HTMLDivElement>\n 'data-testid'?: string\n}\n\n/**\n * Outer chrome for every LockedAttachment card.\n * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.\n */\nconst LockedCardShell: React.FC<LockedCardShellProps> = ({\n variant,\n children,\n rootRef,\n 'data-testid': dataTestId,\n}) => (\n <div\n ref={rootRef}\n data-testid={dataTestId}\n className={classNames(\n 'relative w-[280px] select-none overflow-hidden rounded-md',\n 'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',\n variant === 'dark' ? 'bg-[#121110]' : 'bg-white'\n )}\n >\n {children}\n </div>\n)\n\nexport default LockedCardShell\n","import {\n LockOpenIcon,\n LockSimpleIcon,\n PlayIcon,\n} from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type { PaymentStatus } from '../../types'\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/25` from the design system's `alpha-black-25` token.\n *\n * For playable media (video/audio), the badge shows a play icon instead of a\n * lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC<{\n paymentStatus?: PaymentStatus\n mimeType?: string\n}> = ({ paymentStatus, mimeType }) => {\n const sourceType = mimeType ? getSourceType(mimeType) : undefined\n const isPlayable = sourceType === 'video' || sourceType === 'audio'\n\n const Icon = isPlayable\n ? PlayIcon\n : paymentStatus === 'paid'\n ? LockOpenIcon\n : LockSimpleIcon\n return (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n <Icon className=\"size-6\" weight=\"fill\" />\n </div>\n </div>\n )\n}\n\nexport default LockBadge\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {\n AttachmentThumbnail,\n renderTypeIcon,\n} from '../../../AttachmentCard'\nimport type { LockedAttachmentSource, PaymentStatus } from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface LockedThumbnailProps {\n variant: LockedCardVariant\n mimeType: string\n thumbnailUrl?: string\n title?: string\n /**\n * When provided, the underlying source is shown unblurred (preview / unlocked state).\n * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.\n */\n source?: LockedAttachmentSource\n /**\n * Forces the locked appearance even when a source is provided. Used for the\n * Composer card where the locked treatment is the default and the user toggles\n * a preview in place.\n */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n /** When true, renders the unlocked image with aspect-video + object-contain. */\n containedImage?: boolean\n}\n\n/**\n * Renders the 180px-tall media area for a LockedAttachment card.\n * Handles three visual states:\n * - locked: blurred thumbnail + centered 48px lock badge\n * - preview/paid: clear thumbnail (the underlying source)\n * - empty: type-icon placeholder\n */\nconst LockedThumbnail: React.FC<LockedThumbnailProps> = ({\n variant,\n mimeType,\n thumbnailUrl,\n title,\n source,\n showLocked,\n paymentStatus,\n topRight,\n containedImage = false,\n}) => {\n const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl\n const effectiveThumbnailUrl = showLocked\n ? thumbnailUrl\n : (source?.thumbnailUrl ?? thumbnailUrl)\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — because `backdrop-filter` paints in its\n // own compositing layer that escapes ancestor `overflow: hidden` on\n // Chrome/Safari and flattens the card's top corners. `filter` is\n // clipped normally, so the rounded corners stay round without any\n // clip-path workarounds.\n return (\n <div className=\"relative overflow-hidden rounded-t-2xl\">\n {showLocked ? (\n <div\n className={classNames(\n 'relative aspect-video overflow-hidden',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {effectiveThumbnailUrl ? (\n <img\n src={effectiveThumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy semi-transparent edge that\n // `filter: blur` leaves around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n ) : (\n <div className=\"absolute inset-0 flex items-center justify-center\">\n {renderTypeIcon(mimeType, {\n className: isDark\n ? 'size-12 text-white/20'\n : 'size-12 text-black/20',\n weight: 'regular',\n })}\n </div>\n )}\n <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={mimeType}\n sourceUrl={effectiveSourceUrl}\n thumbnailUrl={effectiveThumbnailUrl}\n title={title}\n variant={variant}\n containedImage={containedImage}\n mediaPlayerProps={\n effectiveSourceUrl\n ? { autoPlay: true, loop: true, controls: true, muted: false }\n : undefined\n }\n />\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default LockedThumbnail\n"],"names":["CardBody","variant","title","placeholderTitle","mimeType","detail","statusBadge","action","icon","trailingAction","isDark","displayTitle","titleDimmed","typeIcon","renderTypeIcon","classNames","jsxs","jsx","isPlayableItem","item","sourceType","getSourceType","GalleryThumbnail","gallery","showLocked","paymentStatus","topRight","index","setIndex","useState","total","safeIndex","current","isVideoItem","centerBadge","PlayIcon","LockOpenIcon","LockSimpleIcon","goPrev","e","i","goNext","atStart","atEnd","AttachmentThumbnail","React","CaretLeftIcon","CaretRightIcon","LockedCardShell","children","rootRef","dataTestId","LockBadge","LockedThumbnail","thumbnailUrl","source","containedImage","effectiveSourceUrl","effectiveThumbnailUrl"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LockedThumbnail-BkeCwTCw.js","sources":["../src/components/LockedAttachment/components/_shared/CardBody.tsx","../src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/LockedAttachment/components/_shared/LockedCardShell.tsx","../src/components/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/LockedAttachment/components/_shared/LockedThumbnail.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../../AttachmentCard'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface CardBodyProps {\n variant: LockedCardVariant\n title?: string\n placeholderTitle?: string\n mimeType: string\n detail?: string\n statusBadge?: React.ReactNode\n action?: React.ReactNode\n /** Overrides the auto-detected type icon (used by Gallery to swap in an `Images` icon). */\n icon?: React.ReactNode\n /** Optional control rendered on the right of the title/status block (e.g. Composer edit pencil). */\n trailingAction?: React.ReactNode\n}\n\n/**\n * Title + status row layout shared by Composer / Sent / Received cards.\n * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,\n * 4px gap between title and status row, 4px gap inside status row).\n */\nconst CardBody: React.FC<CardBodyProps> = ({\n variant,\n title,\n placeholderTitle = 'Attachment title',\n mimeType,\n detail,\n statusBadge,\n action,\n icon,\n trailingAction,\n}) => {\n const isDark = variant === 'dark'\n const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')\n const titleDimmed = isDark && !title\n\n const typeIcon =\n icon ??\n renderTypeIcon(mimeType, {\n className: classNames(\n 'size-5 shrink-0',\n isDark ? 'text-white/55' : 'text-black/55'\n ),\n weight: 'regular',\n })\n\n return (\n <div className=\"px-4 py-3\">\n <div className=\"flex items-end gap-3\">\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n {displayTitle.trim() !== '' && (\n <p\n className={classNames('truncate text-base font-medium leading-6', {\n 'text-black/90': !isDark,\n 'text-white/30': isDark && titleDimmed,\n 'text-white': isDark && !titleDimmed,\n })}\n >\n {displayTitle}\n </p>\n )}\n\n <div className=\"flex flex-wrap items-center gap-1\">\n {typeIcon}\n\n {detail != null && detail !== '' && (\n <span\n className={classNames(\n 'text-xs font-medium',\n isDark ? 'text-white/55' : 'text-black/55'\n )}\n >\n {detail}\n </span>\n )}\n\n {statusBadge}\n </div>\n </div>\n\n {trailingAction && <div className=\"shrink-0\">{trailingAction}</div>}\n </div>\n\n {action}\n </div>\n )\n}\n\nexport default CardBody\n","import {\n CaretLeftIcon,\n CaretRightIcon,\n LockOpenIcon,\n LockSimpleIcon,\n PlayIcon,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'\nimport type {\n LockedAttachmentGalleryItem,\n PaymentStatus,\n} from '../../types'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface GalleryThumbnailProps {\n variant: LockedCardVariant\n gallery: LockedAttachmentGalleryItem[]\n title?: string\n /** When true, all items are shown blurred + the locked/play badge is overlaid. */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n}\n\nfunction isPlayableItem(item: LockedAttachmentGalleryItem): boolean {\n const sourceType = getSourceType(item.mimeType)\n return sourceType === 'video' || sourceType === 'audio'\n}\n\n/**\n * Mixed-media carousel used by every LockedAttachment card when its `gallery`\n * prop has 2+ items. Matches the \"Gallery\" frames in the Figma design system:\n * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center\n * lock / play indicator that swaps based on the current item.\n */\nconst GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({\n variant,\n gallery,\n title,\n showLocked,\n paymentStatus,\n topRight,\n}) => {\n const [index, setIndex] = useState(0)\n const total = gallery.length\n const safeIndex = Math.min(index, total - 1)\n const current = gallery[safeIndex]\n const isVideoItem = isPlayableItem(current)\n\n // Center badge: PLAY for video items, LOCK for non-video locked items.\n // Unlocked image items show no center badge — the image is the content.\n const centerBadge = (() => {\n if (isVideoItem) {\n return <PlayIcon className=\"size-6\" weight=\"fill\" />\n }\n if (showLocked) {\n return paymentStatus === 'paid' ? (\n <LockOpenIcon className=\"size-6\" weight=\"fill\" />\n ) : (\n <LockSimpleIcon className=\"size-6\" weight=\"fill\" />\n )\n }\n return null\n })()\n\n // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n // wrapper on ComposerCard / SentCard.\n const goPrev = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.max(0, i - 1))\n }\n const goNext = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.min(total - 1, i + 1))\n }\n const atStart = safeIndex === 0\n const atEnd = safeIndex === total - 1\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary\n // inside the taller 337/386 gallery aspect).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — so the rounded corners are clipped\n // normally without any clip-path workarounds (see LockedThumbnail).\n return (\n <div className=\"relative aspect-[337/386] overflow-hidden rounded-t-2xl\">\n {showLocked ? (\n <div\n className={classNames(\n 'absolute inset-0',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {current.thumbnailUrl && (\n <img\n src={current.thumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy edge that `filter: blur` leaves\n // around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n )}\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={current.mimeType}\n sourceUrl={current.sourceUrl}\n thumbnailUrl={current.thumbnailUrl}\n title={title}\n variant={variant}\n />\n )}\n\n {centerBadge && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n {centerBadge}\n </div>\n </div>\n )}\n\n {total > 1 && (\n <React.Fragment>\n <button\n type=\"button\"\n onClick={goPrev}\n disabled={atStart}\n aria-label=\"Previous item\"\n className={classNames(\n 'absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atStart ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretLeftIcon className=\"size-5\" weight=\"bold\" />\n </button>\n <button\n type=\"button\"\n onClick={goNext}\n disabled={atEnd}\n aria-label=\"Next item\"\n className={classNames(\n 'absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atEnd ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretRightIcon className=\"size-5\" weight=\"bold\" />\n </button>\n\n <div className=\"pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1\">\n <span className=\"text-xs font-medium leading-4 text-white\">\n {safeIndex + 1}/{total}\n </span>\n </div>\n </React.Fragment>\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default GalleryThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport type LockedCardVariant = 'dark' | 'light'\n\nexport interface LockedCardShellProps {\n variant: LockedCardVariant\n children: React.ReactNode\n rootRef?: React.Ref<HTMLDivElement>\n 'data-testid'?: string\n}\n\n/**\n * Outer chrome for every LockedAttachment card.\n * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.\n */\nconst LockedCardShell: React.FC<LockedCardShellProps> = ({\n variant,\n children,\n rootRef,\n 'data-testid': dataTestId,\n}) => (\n <div\n ref={rootRef}\n data-testid={dataTestId}\n className={classNames(\n 'relative w-[280px] select-none overflow-hidden rounded-md',\n 'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',\n variant === 'dark' ? 'bg-[#121110]' : 'bg-white'\n )}\n >\n {children}\n </div>\n)\n\nexport default LockedCardShell\n","import {\n LockOpenIcon,\n LockSimpleIcon,\n PlayIcon,\n} from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type { PaymentStatus } from '../../types'\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/25` from the design system's `alpha-black-25` token.\n *\n * For playable media (video/audio), the badge shows a play icon instead of a\n * lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC<{\n paymentStatus?: PaymentStatus\n mimeType?: string\n}> = ({ paymentStatus, mimeType }) => {\n const sourceType = mimeType ? getSourceType(mimeType) : undefined\n const isPlayable = sourceType === 'video' || sourceType === 'audio'\n\n const Icon = isPlayable\n ? PlayIcon\n : paymentStatus === 'paid'\n ? LockOpenIcon\n : LockSimpleIcon\n return (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n <Icon className=\"size-6\" weight=\"fill\" />\n </div>\n </div>\n )\n}\n\nexport default LockBadge\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {\n AttachmentThumbnail,\n renderTypeIcon,\n} from '../../../AttachmentCard'\nimport type { LockedAttachmentSource, PaymentStatus } from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface LockedThumbnailProps {\n variant: LockedCardVariant\n mimeType: string\n thumbnailUrl?: string\n title?: string\n /**\n * When provided, the underlying source is shown unblurred (preview / unlocked state).\n * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.\n */\n source?: LockedAttachmentSource\n /**\n * Forces the locked appearance even when a source is provided. Used for the\n * Composer card where the locked treatment is the default and the user toggles\n * a preview in place.\n */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n /** When true, renders the unlocked image with aspect-video + object-contain. */\n containedImage?: boolean\n}\n\n/**\n * Renders the 180px-tall media area for a LockedAttachment card.\n * Handles three visual states:\n * - locked: blurred thumbnail + centered 48px lock badge\n * - preview/paid: clear thumbnail (the underlying source)\n * - empty: type-icon placeholder\n */\nconst LockedThumbnail: React.FC<LockedThumbnailProps> = ({\n variant,\n mimeType,\n thumbnailUrl,\n title,\n source,\n showLocked,\n paymentStatus,\n topRight,\n containedImage = false,\n}) => {\n const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl\n const effectiveThumbnailUrl = showLocked\n ? thumbnailUrl\n : (source?.thumbnailUrl ?? thumbnailUrl)\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — because `backdrop-filter` paints in its\n // own compositing layer that escapes ancestor `overflow: hidden` on\n // Chrome/Safari and flattens the card's top corners. `filter` is\n // clipped normally, so the rounded corners stay round without any\n // clip-path workarounds.\n return (\n <div className=\"relative overflow-hidden rounded-t-2xl\">\n {showLocked ? (\n <div\n className={classNames(\n 'relative aspect-video overflow-hidden',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {effectiveThumbnailUrl ? (\n <img\n src={effectiveThumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy semi-transparent edge that\n // `filter: blur` leaves around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n ) : (\n <div className=\"absolute inset-0 flex items-center justify-center\">\n {renderTypeIcon(mimeType, {\n className: isDark\n ? 'size-12 text-white/20'\n : 'size-12 text-black/20',\n weight: 'regular',\n })}\n </div>\n )}\n <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={mimeType}\n sourceUrl={effectiveSourceUrl}\n thumbnailUrl={effectiveThumbnailUrl}\n title={title}\n variant={variant}\n containedImage={containedImage}\n mediaPlayerProps={\n effectiveSourceUrl\n ? { autoPlay: true, loop: true, controls: true, muted: false }\n : undefined\n }\n />\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default LockedThumbnail\n"],"names":["CardBody","variant","title","placeholderTitle","mimeType","detail","statusBadge","action","icon","trailingAction","isDark","displayTitle","titleDimmed","typeIcon","renderTypeIcon","classNames","jsxs","jsx","isPlayableItem","item","sourceType","getSourceType","GalleryThumbnail","gallery","showLocked","paymentStatus","topRight","index","setIndex","useState","total","safeIndex","current","isVideoItem","centerBadge","PlayIcon","LockOpenIcon","LockSimpleIcon","goPrev","e","i","goNext","atStart","atEnd","AttachmentThumbnail","React","CaretLeftIcon","CaretRightIcon","LockedCardShell","children","rootRef","dataTestId","LockBadge","LockedThumbnail","thumbnailUrl","source","containedImage","effectiveSourceUrl","effectiveThumbnailUrl"],"mappings":";;;;;AA0BA,MAAMA,IAAoC,CAAC;AAAA,EACzC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACJ,QAAMC,IAAST,MAAY,QACrBU,IAAeD,IAAUR,KAASC,IAAqBD,KAAS,IAChEU,IAAcF,KAAU,CAACR,GAEzBW,IACJL,KACAM,EAAeV,GAAU;AAAA,IACvB,WAAWW;AAAA,MACT;AAAA,MACAL,IAAS,kBAAkB;AAAA,IAAA;AAAA,IAE7B,QAAQ;AAAA,EAAA,CACT;AAEH,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,sCACZ,UAAA;AAAA,QAAAL,EAAa,WAAW,MACvB,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAW,4CAA4C;AAAA,cAChE,iBAAiB,CAACL;AAAA,cAClB,iBAAiBA,KAAUE;AAAA,cAC3B,cAAcF,KAAU,CAACE;AAAA,YAAA,CAC1B;AAAA,YAEA,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAIL,gBAAAK,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,UAAAH;AAAA,UAEAR,KAAU,QAAQA,MAAW,MAC5B,gBAAAY;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF;AAAA,gBACT;AAAA,gBACAL,IAAS,kBAAkB;AAAA,cAAA;AAAA,cAG5B,UAAAL;AAAA,YAAA;AAAA,UAAA;AAAA,UAIJC;AAAA,QAAA,EAAA,CACH;AAAA,MAAA,GACF;AAAA,MAECG,KAAkB,gBAAAQ,EAAC,OAAA,EAAI,WAAU,YAAY,UAAAR,EAAA,CAAe;AAAA,IAAA,GAC/D;AAAA,IAECF;AAAA,EAAA,GACH;AAEJ;AC9DA,SAASW,EAAeC,GAA4C;AAClE,QAAMC,IAAaC,EAAcF,EAAK,QAAQ;AAC9C,SAAOC,MAAe,WAAWA,MAAe;AAClD;AAQA,MAAME,IAAoD,CAAC;AAAA,EACzD,SAAArB;AAAA,EACA,SAAAsB;AAAA,EACA,OAAArB;AAAA,EACA,YAAAsB;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,CAAC,GAC9BC,IAAQP,EAAQ,QAChBQ,IAAY,KAAK,IAAIJ,GAAOG,IAAQ,CAAC,GACrCE,IAAUT,EAAQQ,CAAS,GAC3BE,IAAcf,EAAec,CAAO,GAIpCE,IACAD,IACK,gBAAAhB,EAACkB,GAAA,EAAS,WAAU,UAAS,QAAO,QAAO,IAEhDX,IACKC,MAAkB,SACvB,gBAAAR,EAACmB,GAAA,EAAa,WAAU,UAAS,QAAO,OAAA,CAAO,IAE/C,gBAAAnB,EAACoB,GAAA,EAAe,WAAU,UAAS,QAAO,QAAO,IAG9C,MAKHC,IAAS,CAACC,MAAwB;AACtC,IAAAA,EAAE,gBAAA,GACFX,EAAS,CAACY,MAAM,KAAK,IAAI,GAAGA,IAAI,CAAC,CAAC;AAAA,EACpC,GACMC,IAAS,CAACF,MAAwB;AACtC,IAAAA,EAAE,gBAAA,GACFX,EAAS,CAACY,MAAM,KAAK,IAAIV,IAAQ,GAAGU,IAAI,CAAC,CAAC;AAAA,EAC5C,GACME,IAAUX,MAAc,GACxBY,IAAQZ,MAAcD,IAAQ;AAapC,SACE,gBAAAd,EAAC,OAAA,EAAI,WAAU,2DACZ,UAAA;AAAA,IAAAQ,IACC,gBAAAP;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWF;AAAA,UACT;AAAA,UAhBKd,MAAY,SAiBR,gBAAgB;AAAA,QAAA;AAAA,QAG1B,YAAQ,gBACP,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKe,EAAQ;AAAA,YACb,KAAI;AAAA,YACJ,eAAW;AAAA,YACX,WAAW;AAAA,YAGX,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA,IAIJ,gBAAAf;AAAA,MAAC2B;AAAA,MAAA;AAAA,QACC,UAAUZ,EAAQ;AAAA,QAClB,WAAWA,EAAQ;AAAA,QACnB,cAAcA,EAAQ;AAAA,QACtB,OAAA9B;AAAA,QACA,SAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,IAIHiC,KACC,gBAAAjB,EAAC,OAAA,EAAI,WAAU,yEACb,4BAAC,OAAA,EAAI,WAAU,gFACZ,UAAAiB,EAAA,CACH,EAAA,CACF;AAAA,IAGDJ,IAAQ,KACP,gBAAAd,EAAC6B,EAAM,UAAN,EACC,UAAA;AAAA,MAAA,gBAAA5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASqB;AAAA,UACT,UAAUI;AAAA,UACV,cAAW;AAAA,UACX,WAAW3B;AAAA,YACT;AAAA,YACA2B,IAAU,eAAe;AAAA,UAAA;AAAA,UAG3B,UAAA,gBAAAzB,EAAC6B,GAAA,EAAc,WAAU,UAAS,QAAO,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAElD,gBAAA7B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASwB;AAAA,UACT,UAAUE;AAAA,UACV,cAAW;AAAA,UACX,WAAW5B;AAAA,YACT;AAAA,YACA4B,IAAQ,eAAe;AAAA,UAAA;AAAA,UAGzB,UAAA,gBAAA1B,EAAC8B,GAAA,EAAe,WAAU,UAAS,QAAO,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,wBAGlD,OAAA,EAAI,WAAU,oGACb,UAAA,gBAAA/B,EAAC,QAAA,EAAK,WAAU,4CACb,UAAA;AAAA,QAAAe,IAAY;AAAA,QAAE;AAAA,QAAED;AAAA,MAAA,EAAA,CACnB,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAGDJ,KACC,gBAAAT,EAAC,OAAA,EAAI,WAAU,mDACZ,UAAAS,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ,GC/JMsB,IAAkD,CAAC;AAAA,EACvD,SAAA/C;AAAA,EACA,UAAAgD;AAAA,EACA,SAAAC;AAAA,EACA,eAAeC;AACjB,MACE,gBAAAlC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAKiC;AAAA,IACL,eAAaC;AAAA,IACb,WAAWpC;AAAA,MACT;AAAA,MACA;AAAA,MACAd,MAAY,SAAS,iBAAiB;AAAA,IAAA;AAAA,IAGvC,UAAAgD;AAAA,EAAA;AACH,GCfWG,IAGR,CAAC,EAAE,eAAA3B,GAAe,UAAArB,QAAe;AACpC,QAAMgB,IAAahB,IAAWiB,EAAcjB,CAAQ,IAAI;AAQxD,SACE,gBAAAa,EAAC,OAAA,EAAI,WAAU,yEACb,4BAAC,OAAA,EAAI,WAAU,gFACb,UAAA,gBAAAA,EAVaG,MAAe,WAAWA,MAAe,UAGxDe,IACAV,MAAkB,SAChBW,IACAC,KAIM,WAAU,UAAS,QAAO,OAAA,CAAO,GACzC,GACF;AAEJ,GCMMgB,IAAkD,CAAC;AAAA,EACvD,SAAApD;AAAA,EACA,UAAAG;AAAA,EACA,cAAAkD;AAAA,EACA,OAAApD;AAAA,EACA,QAAAqD;AAAA,EACA,YAAA/B;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAA8B,IAAiB;AACnB,MAAM;AACJ,QAAMC,IAAqBjC,KAAyB+B,KAAA,OAAZ,SAAYA,EAAQ,WACtDG,IAAwBlC,IAC1B8B,KACCC,KAAA,gBAAAA,EAAQ,iBAAgBD,GAEvB5C,IAAST,MAAY;AAa3B,SACE,gBAAAe,EAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,IAAAQ,IACC,gBAAAR;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACAL,IAAS,gBAAgB;AAAA,QAAA;AAAA,QAG1B,UAAA;AAAA,UAAAgD,IACC,gBAAAzC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKyC;AAAA,cACL,KAAI;AAAA,cACJ,eAAW;AAAA,cACX,WAAW;AAAA,cAGX,WAAU;AAAA,YAAA;AAAA,UAAA,IAGZ,gBAAAzC,EAAC,OAAA,EAAI,WAAU,qDACZ,YAAeb,GAAU;AAAA,YACxB,WAAWM,IACP,0BACA;AAAA,YACJ,QAAQ;AAAA,UAAA,CACT,GACH;AAAA,UAEF,gBAAAO,EAACmC,GAAA,EAAU,eAAA3B,GAA8B,UAAArB,EAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAG/D,gBAAAa;AAAA,MAAC2B;AAAA,MAAA;AAAA,QACC,UAAAxC;AAAA,QACA,WAAWqD;AAAA,QACX,cAAcC;AAAA,QACd,OAAAxD;AAAA,QACA,SAAAD;AAAA,QACA,gBAAAuD;AAAA,QACA,kBACEC,IACI,EAAE,UAAU,IAAM,MAAM,IAAM,UAAU,IAAM,OAAO,GAAA,IACrD;AAAA,MAAA;AAAA,IAAA;AAAA,IAKT/B,KACC,gBAAAT,EAAC,OAAA,EAAI,WAAU,mDACZ,UAAAS,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),u=require("classnames"),h=require("./index-
|
|
2
|
-
//# sourceMappingURL=LockedThumbnail-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),u=require("classnames"),h=require("./index-DuGzAVyy.cjs"),N=require("react"),d=require("@phosphor-icons/react"),I=({variant:l,title:t,placeholderTitle:n="Attachment title",mimeType:r,detail:a,statusBadge:o,action:b,icon:x,trailingAction:c})=>{const s=l==="dark",i=s?t??n:t??"",m=s&&!t,f=x??h.renderTypeIcon(r,{className:u("size-5 shrink-0",s?"text-white/55":"text-black/55"),weight:"regular"});return e.jsxs("div",{className:"px-4 py-3",children:[e.jsxs("div",{className:"flex items-end gap-3",children:[e.jsxs("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[i.trim()!==""&&e.jsx("p",{className:u("truncate text-base font-medium leading-6",{"text-black/90":!s,"text-white/30":s&&m,"text-white":s&&!m}),children:i}),e.jsxs("div",{className:"flex flex-wrap items-center gap-1",children:[f,a!=null&&a!==""&&e.jsx("span",{className:u("text-xs font-medium",s?"text-white/55":"text-black/55"),children:a}),o]})]}),c&&e.jsx("div",{className:"shrink-0",children:c})]}),b]})};function z(l){const t=h.getSourceType(l.mimeType);return t==="video"||t==="audio"}const T=({variant:l,gallery:t,title:n,showLocked:r,paymentStatus:a,topRight:o})=>{const[b,x]=N.useState(0),c=t.length,s=Math.min(b,c-1),i=t[s],m=z(i),f=m?e.jsx(d.PlayIcon,{className:"size-6",weight:"fill"}):r?a==="paid"?e.jsx(d.LockOpenIcon,{className:"size-6",weight:"fill"}):e.jsx(d.LockSimpleIcon,{className:"size-6",weight:"fill"}):null,y=p=>{p.stopPropagation(),x(g=>Math.max(0,g-1))},k=p=>{p.stopPropagation(),x(g=>Math.min(c-1,g+1))},j=s===0,v=s===c-1,w=l==="dark";return e.jsxs("div",{className:"relative aspect-[337/386] overflow-hidden rounded-t-2xl",children:[r?e.jsx("div",{className:u("absolute inset-0",w?"bg-white/10":"bg-black/5"),children:i.thumbnailUrl&&e.jsx("img",{src:i.thumbnailUrl,alt:"","aria-hidden":!0,draggable:!1,className:"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"})}):e.jsx(h.AttachmentThumbnail,{mimeType:i.mimeType,sourceUrl:i.sourceUrl,thumbnailUrl:i.thumbnailUrl,title:n,variant:l}),f&&e.jsx("div",{className:"pointer-events-none absolute inset-0 flex items-center justify-center",children:e.jsx("div",{className:"flex size-12 items-center justify-center rounded-full bg-black/25 text-white",children:f})}),c>1&&e.jsxs(N.Fragment,{children:[e.jsx("button",{type:"button",onClick:y,disabled:j,"aria-label":"Previous item",className:u("absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",j?"opacity-40":"hover:bg-black/40"),children:e.jsx(d.CaretLeftIcon,{className:"size-5",weight:"bold"})}),e.jsx("button",{type:"button",onClick:k,disabled:v,"aria-label":"Next item",className:u("absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",v?"opacity-40":"hover:bg-black/40"),children:e.jsx(d.CaretRightIcon,{className:"size-5",weight:"bold"})}),e.jsx("div",{className:"pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1",children:e.jsxs("span",{className:"text-xs font-medium leading-4 text-white",children:[s+1,"/",c]})})]}),o&&e.jsx("div",{className:"pointer-events-auto absolute right-3 top-3 z-10",children:o})]})},P=({variant:l,children:t,rootRef:n,"data-testid":r})=>e.jsx("div",{ref:n,"data-testid":r,className:u("relative w-[280px] select-none overflow-hidden rounded-md","shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]",l==="dark"?"bg-[#121110]":"bg-white"),children:t}),U=({paymentStatus:l,mimeType:t})=>{const n=t?h.getSourceType(t):void 0,a=n==="video"||n==="audio"?d.PlayIcon:l==="paid"?d.LockOpenIcon:d.LockSimpleIcon;return e.jsx("div",{className:"pointer-events-none absolute inset-0 flex items-center justify-center",children:e.jsx("div",{className:"flex size-12 items-center justify-center rounded-full bg-black/25 text-white",children:e.jsx(a,{className:"size-6",weight:"fill"})})})},_=({variant:l,mimeType:t,thumbnailUrl:n,title:r,source:a,showLocked:o,paymentStatus:b,topRight:x,containedImage:c=!1})=>{const s=o||a==null?void 0:a.sourceUrl,i=o?n:(a==null?void 0:a.thumbnailUrl)??n,m=l==="dark";return e.jsxs("div",{className:"relative overflow-hidden rounded-t-2xl",children:[o?e.jsxs("div",{className:u("relative aspect-video overflow-hidden",m?"bg-white/10":"bg-black/5"),children:[i?e.jsx("img",{src:i,alt:"","aria-hidden":!0,draggable:!1,className:"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"}):e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:h.renderTypeIcon(t,{className:m?"size-12 text-white/20":"size-12 text-black/20",weight:"regular"})}),e.jsx(U,{paymentStatus:b,mimeType:t})]}):e.jsx(h.AttachmentThumbnail,{mimeType:t,sourceUrl:s,thumbnailUrl:i,title:r,variant:l,containedImage:c,mediaPlayerProps:s?{autoPlay:!0,loop:!0,controls:!0,muted:!1}:void 0}),x&&e.jsx("div",{className:"pointer-events-auto absolute right-3 top-3 z-10",children:x})]})};exports.CardBody=I;exports.GalleryThumbnail=T;exports.LockedCardShell=P;exports.LockedThumbnail=_;
|
|
2
|
+
//# sourceMappingURL=LockedThumbnail-CD9YTQ0r.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LockedThumbnail-CydtYOSA.cjs","sources":["../src/components/LockedAttachment/components/_shared/CardBody.tsx","../src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/LockedAttachment/components/_shared/LockedCardShell.tsx","../src/components/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/LockedAttachment/components/_shared/LockedThumbnail.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../../AttachmentCard'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface CardBodyProps {\n variant: LockedCardVariant\n title?: string\n placeholderTitle?: string\n mimeType: string\n detail?: string\n statusBadge?: React.ReactNode\n action?: React.ReactNode\n /** Overrides the auto-detected type icon (used by Gallery to swap in an `Images` icon). */\n icon?: React.ReactNode\n /** Optional control rendered on the right of the title/status block (e.g. Composer edit pencil). */\n trailingAction?: React.ReactNode\n}\n\n/**\n * Title + status row layout shared by Composer / Sent / Received cards.\n * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,\n * 4px gap between title and status row, 4px gap inside status row).\n */\nconst CardBody: React.FC<CardBodyProps> = ({\n variant,\n title,\n placeholderTitle = 'Attachment title',\n mimeType,\n detail,\n statusBadge,\n action,\n icon,\n trailingAction,\n}) => {\n const isDark = variant === 'dark'\n const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')\n const titleDimmed = isDark && !title\n\n const typeIcon =\n icon ??\n renderTypeIcon(mimeType, {\n className: classNames(\n 'size-5 shrink-0',\n isDark ? 'text-white/55' : 'text-black/55'\n ),\n weight: 'regular',\n })\n\n return (\n <div className=\"px-4 py-3\">\n <div className=\"flex items-end gap-3\">\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n {displayTitle.trim() !== '' && (\n <p\n className={classNames('truncate text-base font-medium leading-6', {\n 'text-black/90': !isDark,\n 'text-white/30': isDark && titleDimmed,\n 'text-white': isDark && !titleDimmed,\n })}\n >\n {displayTitle}\n </p>\n )}\n\n <div className=\"flex flex-wrap items-center gap-1\">\n {typeIcon}\n\n {detail != null && detail !== '' && (\n <span\n className={classNames(\n 'text-xs font-medium',\n isDark ? 'text-white/55' : 'text-black/55'\n )}\n >\n {detail}\n </span>\n )}\n\n {statusBadge}\n </div>\n </div>\n\n {trailingAction && <div className=\"shrink-0\">{trailingAction}</div>}\n </div>\n\n {action}\n </div>\n )\n}\n\nexport default CardBody\n","import {\n CaretLeftIcon,\n CaretRightIcon,\n LockOpenIcon,\n LockSimpleIcon,\n PlayIcon,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'\nimport type {\n LockedAttachmentGalleryItem,\n PaymentStatus,\n} from '../../types'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface GalleryThumbnailProps {\n variant: LockedCardVariant\n gallery: LockedAttachmentGalleryItem[]\n title?: string\n /** When true, all items are shown blurred + the locked/play badge is overlaid. */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n}\n\nfunction isPlayableItem(item: LockedAttachmentGalleryItem): boolean {\n const sourceType = getSourceType(item.mimeType)\n return sourceType === 'video' || sourceType === 'audio'\n}\n\n/**\n * Mixed-media carousel used by every LockedAttachment card when its `gallery`\n * prop has 2+ items. Matches the \"Gallery\" frames in the Figma design system:\n * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center\n * lock / play indicator that swaps based on the current item.\n */\nconst GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({\n variant,\n gallery,\n title,\n showLocked,\n paymentStatus,\n topRight,\n}) => {\n const [index, setIndex] = useState(0)\n const total = gallery.length\n const safeIndex = Math.min(index, total - 1)\n const current = gallery[safeIndex]\n const isVideoItem = isPlayableItem(current)\n\n // Center badge: PLAY for video items, LOCK for non-video locked items.\n // Unlocked image items show no center badge — the image is the content.\n const centerBadge = (() => {\n if (isVideoItem) {\n return <PlayIcon className=\"size-6\" weight=\"fill\" />\n }\n if (showLocked) {\n return paymentStatus === 'paid' ? (\n <LockOpenIcon className=\"size-6\" weight=\"fill\" />\n ) : (\n <LockSimpleIcon className=\"size-6\" weight=\"fill\" />\n )\n }\n return null\n })()\n\n // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n // wrapper on ComposerCard / SentCard.\n const goPrev = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.max(0, i - 1))\n }\n const goNext = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.min(total - 1, i + 1))\n }\n const atStart = safeIndex === 0\n const atEnd = safeIndex === total - 1\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary\n // inside the taller 337/386 gallery aspect).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — so the rounded corners are clipped\n // normally without any clip-path workarounds (see LockedThumbnail).\n return (\n <div className=\"relative aspect-[337/386] overflow-hidden rounded-t-2xl\">\n {showLocked ? (\n <div\n className={classNames(\n 'absolute inset-0',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {current.thumbnailUrl && (\n <img\n src={current.thumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy edge that `filter: blur` leaves\n // around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n )}\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={current.mimeType}\n sourceUrl={current.sourceUrl}\n thumbnailUrl={current.thumbnailUrl}\n title={title}\n variant={variant}\n />\n )}\n\n {centerBadge && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n {centerBadge}\n </div>\n </div>\n )}\n\n {total > 1 && (\n <React.Fragment>\n <button\n type=\"button\"\n onClick={goPrev}\n disabled={atStart}\n aria-label=\"Previous item\"\n className={classNames(\n 'absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atStart ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretLeftIcon className=\"size-5\" weight=\"bold\" />\n </button>\n <button\n type=\"button\"\n onClick={goNext}\n disabled={atEnd}\n aria-label=\"Next item\"\n className={classNames(\n 'absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atEnd ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretRightIcon className=\"size-5\" weight=\"bold\" />\n </button>\n\n <div className=\"pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1\">\n <span className=\"text-xs font-medium leading-4 text-white\">\n {safeIndex + 1}/{total}\n </span>\n </div>\n </React.Fragment>\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default GalleryThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport type LockedCardVariant = 'dark' | 'light'\n\nexport interface LockedCardShellProps {\n variant: LockedCardVariant\n children: React.ReactNode\n rootRef?: React.Ref<HTMLDivElement>\n 'data-testid'?: string\n}\n\n/**\n * Outer chrome for every LockedAttachment card.\n * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.\n */\nconst LockedCardShell: React.FC<LockedCardShellProps> = ({\n variant,\n children,\n rootRef,\n 'data-testid': dataTestId,\n}) => (\n <div\n ref={rootRef}\n data-testid={dataTestId}\n className={classNames(\n 'relative w-[280px] select-none overflow-hidden rounded-md',\n 'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',\n variant === 'dark' ? 'bg-[#121110]' : 'bg-white'\n )}\n >\n {children}\n </div>\n)\n\nexport default LockedCardShell\n","import {\n LockOpenIcon,\n LockSimpleIcon,\n PlayIcon,\n} from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type { PaymentStatus } from '../../types'\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/25` from the design system's `alpha-black-25` token.\n *\n * For playable media (video/audio), the badge shows a play icon instead of a\n * lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC<{\n paymentStatus?: PaymentStatus\n mimeType?: string\n}> = ({ paymentStatus, mimeType }) => {\n const sourceType = mimeType ? getSourceType(mimeType) : undefined\n const isPlayable = sourceType === 'video' || sourceType === 'audio'\n\n const Icon = isPlayable\n ? PlayIcon\n : paymentStatus === 'paid'\n ? LockOpenIcon\n : LockSimpleIcon\n return (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n <Icon className=\"size-6\" weight=\"fill\" />\n </div>\n </div>\n )\n}\n\nexport default LockBadge\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {\n AttachmentThumbnail,\n renderTypeIcon,\n} from '../../../AttachmentCard'\nimport type { LockedAttachmentSource, PaymentStatus } from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface LockedThumbnailProps {\n variant: LockedCardVariant\n mimeType: string\n thumbnailUrl?: string\n title?: string\n /**\n * When provided, the underlying source is shown unblurred (preview / unlocked state).\n * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.\n */\n source?: LockedAttachmentSource\n /**\n * Forces the locked appearance even when a source is provided. Used for the\n * Composer card where the locked treatment is the default and the user toggles\n * a preview in place.\n */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n /** When true, renders the unlocked image with aspect-video + object-contain. */\n containedImage?: boolean\n}\n\n/**\n * Renders the 180px-tall media area for a LockedAttachment card.\n * Handles three visual states:\n * - locked: blurred thumbnail + centered 48px lock badge\n * - preview/paid: clear thumbnail (the underlying source)\n * - empty: type-icon placeholder\n */\nconst LockedThumbnail: React.FC<LockedThumbnailProps> = ({\n variant,\n mimeType,\n thumbnailUrl,\n title,\n source,\n showLocked,\n paymentStatus,\n topRight,\n containedImage = false,\n}) => {\n const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl\n const effectiveThumbnailUrl = showLocked\n ? thumbnailUrl\n : (source?.thumbnailUrl ?? thumbnailUrl)\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — because `backdrop-filter` paints in its\n // own compositing layer that escapes ancestor `overflow: hidden` on\n // Chrome/Safari and flattens the card's top corners. `filter` is\n // clipped normally, so the rounded corners stay round without any\n // clip-path workarounds.\n return (\n <div className=\"relative overflow-hidden rounded-t-2xl\">\n {showLocked ? (\n <div\n className={classNames(\n 'relative aspect-video overflow-hidden',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {effectiveThumbnailUrl ? (\n <img\n src={effectiveThumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy semi-transparent edge that\n // `filter: blur` leaves around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n ) : (\n <div className=\"absolute inset-0 flex items-center justify-center\">\n {renderTypeIcon(mimeType, {\n className: isDark\n ? 'size-12 text-white/20'\n : 'size-12 text-black/20',\n weight: 'regular',\n })}\n </div>\n )}\n <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={mimeType}\n sourceUrl={effectiveSourceUrl}\n thumbnailUrl={effectiveThumbnailUrl}\n title={title}\n variant={variant}\n containedImage={containedImage}\n mediaPlayerProps={\n effectiveSourceUrl\n ? { autoPlay: true, loop: true, controls: true, muted: false }\n : undefined\n }\n />\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default LockedThumbnail\n"],"names":["CardBody","variant","title","placeholderTitle","mimeType","detail","statusBadge","action","icon","trailingAction","isDark","displayTitle","titleDimmed","typeIcon","renderTypeIcon","classNames","jsxs","jsx","isPlayableItem","item","sourceType","getSourceType","GalleryThumbnail","gallery","showLocked","paymentStatus","topRight","index","setIndex","useState","total","safeIndex","current","isVideoItem","centerBadge","PlayIcon","LockOpenIcon","LockSimpleIcon","goPrev","e","i","goNext","atStart","atEnd","AttachmentThumbnail","React","CaretLeftIcon","CaretRightIcon","LockedCardShell","children","rootRef","dataTestId","LockBadge","Icon","LockedThumbnail","thumbnailUrl","source","containedImage","effectiveSourceUrl","effectiveThumbnailUrl"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LockedThumbnail-CD9YTQ0r.cjs","sources":["../src/components/LockedAttachment/components/_shared/CardBody.tsx","../src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/LockedAttachment/components/_shared/LockedCardShell.tsx","../src/components/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/LockedAttachment/components/_shared/LockedThumbnail.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../../AttachmentCard'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface CardBodyProps {\n variant: LockedCardVariant\n title?: string\n placeholderTitle?: string\n mimeType: string\n detail?: string\n statusBadge?: React.ReactNode\n action?: React.ReactNode\n /** Overrides the auto-detected type icon (used by Gallery to swap in an `Images` icon). */\n icon?: React.ReactNode\n /** Optional control rendered on the right of the title/status block (e.g. Composer edit pencil). */\n trailingAction?: React.ReactNode\n}\n\n/**\n * Title + status row layout shared by Composer / Sent / Received cards.\n * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,\n * 4px gap between title and status row, 4px gap inside status row).\n */\nconst CardBody: React.FC<CardBodyProps> = ({\n variant,\n title,\n placeholderTitle = 'Attachment title',\n mimeType,\n detail,\n statusBadge,\n action,\n icon,\n trailingAction,\n}) => {\n const isDark = variant === 'dark'\n const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')\n const titleDimmed = isDark && !title\n\n const typeIcon =\n icon ??\n renderTypeIcon(mimeType, {\n className: classNames(\n 'size-5 shrink-0',\n isDark ? 'text-white/55' : 'text-black/55'\n ),\n weight: 'regular',\n })\n\n return (\n <div className=\"px-4 py-3\">\n <div className=\"flex items-end gap-3\">\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n {displayTitle.trim() !== '' && (\n <p\n className={classNames('truncate text-base font-medium leading-6', {\n 'text-black/90': !isDark,\n 'text-white/30': isDark && titleDimmed,\n 'text-white': isDark && !titleDimmed,\n })}\n >\n {displayTitle}\n </p>\n )}\n\n <div className=\"flex flex-wrap items-center gap-1\">\n {typeIcon}\n\n {detail != null && detail !== '' && (\n <span\n className={classNames(\n 'text-xs font-medium',\n isDark ? 'text-white/55' : 'text-black/55'\n )}\n >\n {detail}\n </span>\n )}\n\n {statusBadge}\n </div>\n </div>\n\n {trailingAction && <div className=\"shrink-0\">{trailingAction}</div>}\n </div>\n\n {action}\n </div>\n )\n}\n\nexport default CardBody\n","import {\n CaretLeftIcon,\n CaretRightIcon,\n LockOpenIcon,\n LockSimpleIcon,\n PlayIcon,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'\nimport type {\n LockedAttachmentGalleryItem,\n PaymentStatus,\n} from '../../types'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface GalleryThumbnailProps {\n variant: LockedCardVariant\n gallery: LockedAttachmentGalleryItem[]\n title?: string\n /** When true, all items are shown blurred + the locked/play badge is overlaid. */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n}\n\nfunction isPlayableItem(item: LockedAttachmentGalleryItem): boolean {\n const sourceType = getSourceType(item.mimeType)\n return sourceType === 'video' || sourceType === 'audio'\n}\n\n/**\n * Mixed-media carousel used by every LockedAttachment card when its `gallery`\n * prop has 2+ items. Matches the \"Gallery\" frames in the Figma design system:\n * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center\n * lock / play indicator that swaps based on the current item.\n */\nconst GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({\n variant,\n gallery,\n title,\n showLocked,\n paymentStatus,\n topRight,\n}) => {\n const [index, setIndex] = useState(0)\n const total = gallery.length\n const safeIndex = Math.min(index, total - 1)\n const current = gallery[safeIndex]\n const isVideoItem = isPlayableItem(current)\n\n // Center badge: PLAY for video items, LOCK for non-video locked items.\n // Unlocked image items show no center badge — the image is the content.\n const centerBadge = (() => {\n if (isVideoItem) {\n return <PlayIcon className=\"size-6\" weight=\"fill\" />\n }\n if (showLocked) {\n return paymentStatus === 'paid' ? (\n <LockOpenIcon className=\"size-6\" weight=\"fill\" />\n ) : (\n <LockSimpleIcon className=\"size-6\" weight=\"fill\" />\n )\n }\n return null\n })()\n\n // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n // wrapper on ComposerCard / SentCard.\n const goPrev = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.max(0, i - 1))\n }\n const goNext = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.min(total - 1, i + 1))\n }\n const atStart = safeIndex === 0\n const atEnd = safeIndex === total - 1\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary\n // inside the taller 337/386 gallery aspect).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — so the rounded corners are clipped\n // normally without any clip-path workarounds (see LockedThumbnail).\n return (\n <div className=\"relative aspect-[337/386] overflow-hidden rounded-t-2xl\">\n {showLocked ? (\n <div\n className={classNames(\n 'absolute inset-0',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {current.thumbnailUrl && (\n <img\n src={current.thumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy edge that `filter: blur` leaves\n // around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n )}\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={current.mimeType}\n sourceUrl={current.sourceUrl}\n thumbnailUrl={current.thumbnailUrl}\n title={title}\n variant={variant}\n />\n )}\n\n {centerBadge && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n {centerBadge}\n </div>\n </div>\n )}\n\n {total > 1 && (\n <React.Fragment>\n <button\n type=\"button\"\n onClick={goPrev}\n disabled={atStart}\n aria-label=\"Previous item\"\n className={classNames(\n 'absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atStart ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretLeftIcon className=\"size-5\" weight=\"bold\" />\n </button>\n <button\n type=\"button\"\n onClick={goNext}\n disabled={atEnd}\n aria-label=\"Next item\"\n className={classNames(\n 'absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n atEnd ? 'opacity-40' : 'hover:bg-black/40'\n )}\n >\n <CaretRightIcon className=\"size-5\" weight=\"bold\" />\n </button>\n\n <div className=\"pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1\">\n <span className=\"text-xs font-medium leading-4 text-white\">\n {safeIndex + 1}/{total}\n </span>\n </div>\n </React.Fragment>\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default GalleryThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport type LockedCardVariant = 'dark' | 'light'\n\nexport interface LockedCardShellProps {\n variant: LockedCardVariant\n children: React.ReactNode\n rootRef?: React.Ref<HTMLDivElement>\n 'data-testid'?: string\n}\n\n/**\n * Outer chrome for every LockedAttachment card.\n * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.\n */\nconst LockedCardShell: React.FC<LockedCardShellProps> = ({\n variant,\n children,\n rootRef,\n 'data-testid': dataTestId,\n}) => (\n <div\n ref={rootRef}\n data-testid={dataTestId}\n className={classNames(\n 'relative w-[280px] select-none overflow-hidden rounded-md',\n 'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',\n variant === 'dark' ? 'bg-[#121110]' : 'bg-white'\n )}\n >\n {children}\n </div>\n)\n\nexport default LockedCardShell\n","import {\n LockOpenIcon,\n LockSimpleIcon,\n PlayIcon,\n} from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type { PaymentStatus } from '../../types'\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/25` from the design system's `alpha-black-25` token.\n *\n * For playable media (video/audio), the badge shows a play icon instead of a\n * lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC<{\n paymentStatus?: PaymentStatus\n mimeType?: string\n}> = ({ paymentStatus, mimeType }) => {\n const sourceType = mimeType ? getSourceType(mimeType) : undefined\n const isPlayable = sourceType === 'video' || sourceType === 'audio'\n\n const Icon = isPlayable\n ? PlayIcon\n : paymentStatus === 'paid'\n ? LockOpenIcon\n : LockSimpleIcon\n return (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n <Icon className=\"size-6\" weight=\"fill\" />\n </div>\n </div>\n )\n}\n\nexport default LockBadge\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {\n AttachmentThumbnail,\n renderTypeIcon,\n} from '../../../AttachmentCard'\nimport type { LockedAttachmentSource, PaymentStatus } from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface LockedThumbnailProps {\n variant: LockedCardVariant\n mimeType: string\n thumbnailUrl?: string\n title?: string\n /**\n * When provided, the underlying source is shown unblurred (preview / unlocked state).\n * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.\n */\n source?: LockedAttachmentSource\n /**\n * Forces the locked appearance even when a source is provided. Used for the\n * Composer card where the locked treatment is the default and the user toggles\n * a preview in place.\n */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n /** When true, renders the unlocked image with aspect-video + object-contain. */\n containedImage?: boolean\n}\n\n/**\n * Renders the 180px-tall media area for a LockedAttachment card.\n * Handles three visual states:\n * - locked: blurred thumbnail + centered 48px lock badge\n * - preview/paid: clear thumbnail (the underlying source)\n * - empty: type-icon placeholder\n */\nconst LockedThumbnail: React.FC<LockedThumbnailProps> = ({\n variant,\n mimeType,\n thumbnailUrl,\n title,\n source,\n showLocked,\n paymentStatus,\n topRight,\n containedImage = false,\n}) => {\n const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl\n const effectiveThumbnailUrl = showLocked\n ? thumbnailUrl\n : (source?.thumbnailUrl ?? thumbnailUrl)\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `<img>` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary).\n //\n // The locked branch uses `filter: blur` on a single full-size `<img>`\n // — not `backdrop-filter` — because `backdrop-filter` paints in its\n // own compositing layer that escapes ancestor `overflow: hidden` on\n // Chrome/Safari and flattens the card's top corners. `filter` is\n // clipped normally, so the rounded corners stay round without any\n // clip-path workarounds.\n return (\n <div className=\"relative overflow-hidden rounded-t-2xl\">\n {showLocked ? (\n <div\n className={classNames(\n 'relative aspect-video overflow-hidden',\n isDark ? 'bg-white/10' : 'bg-black/5'\n )}\n >\n {effectiveThumbnailUrl ? (\n <img\n src={effectiveThumbnailUrl}\n alt=\"\"\n aria-hidden\n draggable={false}\n // `scale-110` hides the fuzzy semi-transparent edge that\n // `filter: blur` leaves around the image bounds.\n className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n />\n ) : (\n <div className=\"absolute inset-0 flex items-center justify-center\">\n {renderTypeIcon(mimeType, {\n className: isDark\n ? 'size-12 text-white/20'\n : 'size-12 text-black/20',\n weight: 'regular',\n })}\n </div>\n )}\n <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />\n </div>\n ) : (\n <AttachmentThumbnail\n mimeType={mimeType}\n sourceUrl={effectiveSourceUrl}\n thumbnailUrl={effectiveThumbnailUrl}\n title={title}\n variant={variant}\n containedImage={containedImage}\n mediaPlayerProps={\n effectiveSourceUrl\n ? { autoPlay: true, loop: true, controls: true, muted: false }\n : undefined\n }\n />\n )}\n\n {topRight && (\n <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n {topRight}\n </div>\n )}\n </div>\n )\n}\n\nexport default LockedThumbnail\n"],"names":["CardBody","variant","title","placeholderTitle","mimeType","detail","statusBadge","action","icon","trailingAction","isDark","displayTitle","titleDimmed","typeIcon","renderTypeIcon","classNames","jsxs","jsx","isPlayableItem","item","sourceType","getSourceType","GalleryThumbnail","gallery","showLocked","paymentStatus","topRight","index","setIndex","useState","total","safeIndex","current","isVideoItem","centerBadge","PlayIcon","LockOpenIcon","LockSimpleIcon","goPrev","e","i","goNext","atStart","atEnd","AttachmentThumbnail","React","CaretLeftIcon","CaretRightIcon","LockedCardShell","children","rootRef","dataTestId","LockBadge","Icon","LockedThumbnail","thumbnailUrl","source","containedImage","effectiveSourceUrl","effectiveThumbnailUrl"],"mappings":"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"}
|