@linktr.ee/messaging-react 3.10.0-rc-1783607891 → 3.10.0-rc-1783660962
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-415OfRhw.cjs +2 -0
- package/dist/Card-415OfRhw.cjs.map +1 -0
- package/dist/Card-CyWdUMCB.cjs +2 -0
- package/dist/Card-CyWdUMCB.cjs.map +1 -0
- package/dist/Card-V5d6qhDT.js +694 -0
- package/dist/Card-V5d6qhDT.js.map +1 -0
- package/dist/Card-qS17qnN0.js +103 -0
- package/dist/Card-qS17qnN0.js.map +1 -0
- package/dist/LoadingDots-Ct3WmVlT.js +59 -0
- package/dist/LoadingDots-Ct3WmVlT.js.map +1 -0
- package/dist/LoadingDots-D9GGphgM.cjs +2 -0
- package/dist/LoadingDots-D9GGphgM.cjs.map +1 -0
- package/dist/assets/index.css +1 -1
- package/dist/index-Bx_zjNMR.cjs +2 -0
- package/dist/index-Bx_zjNMR.cjs.map +1 -0
- package/dist/{index-BRBoCyPQ.js → index-DFZrAiLB.js} +1277 -1249
- package/dist/index-DFZrAiLB.js.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +164 -101
- package/dist/index.js +1 -1
- package/dist/testing.d.ts +1 -0
- package/package.json +2 -2
- package/src/components/ChannelList/CustomChannelPreview.test.tsx +95 -0
- package/src/components/ChannelList/CustomChannelPreview.tsx +21 -9
- package/src/components/CustomMessage/CustomMessage.stories.tsx +54 -1
- package/src/components/CustomMessage/LockedAttachment/LockedAttachment.stories.tsx +541 -0
- package/src/components/CustomMessage/LockedAttachment/LockedAttachment.test.tsx +117 -0
- package/src/components/CustomMessage/LockedAttachment/components/Media/Card.tsx +358 -0
- package/src/components/{LockedAttachment/components/Received → CustomMessage/LockedAttachment/components/Media}/CardActions.tsx +9 -2
- package/src/components/CustomMessage/LockedAttachment/components/Media/types.ts +79 -0
- package/src/components/CustomMessage/LockedAttachment/components/Text/Card.tsx +153 -0
- package/src/components/CustomMessage/LockedAttachment/components/Text/types.ts +58 -0
- package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/CardBody.tsx +8 -7
- package/src/components/CustomMessage/LockedAttachment/components/_shared/CardThumbnail.tsx +92 -0
- package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/GalleryThumbnail.tsx +31 -39
- package/src/components/CustomMessage/LockedAttachment/components/_shared/LoadingDots.tsx +36 -0
- package/src/components/CustomMessage/LockedAttachment/components/_shared/LockBadge.tsx +63 -0
- package/src/components/{LockedAttachment/components/_shared/LockedCardShell.tsx → CustomMessage/LockedAttachment/components/_shared/MediaShell.tsx} +8 -8
- package/src/components/CustomMessage/LockedAttachment/components/_shared/PreviewToggle.tsx +58 -0
- package/src/components/CustomMessage/LockedAttachment/components/_shared/PriceLockRow.tsx +21 -0
- package/src/components/CustomMessage/LockedAttachment/components/_shared/PurchaseStatusBadge.tsx +74 -0
- package/src/components/{LockedAttachment/components/_shared/LockedThumbnail.tsx → CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx} +11 -7
- package/src/components/CustomMessage/LockedAttachment/components/_shared/SkeletonTextLines.tsx +29 -0
- package/src/components/CustomMessage/LockedAttachment/components/_shared/TextShell.tsx +28 -0
- package/src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.test.ts +67 -0
- package/src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.ts +89 -0
- package/src/components/CustomMessage/LockedAttachment/components/_shared/useReceivedSource.ts +83 -0
- package/src/components/CustomMessage/LockedAttachment/index.tsx +105 -0
- package/src/components/CustomMessage/LockedAttachment/types.ts +44 -0
- package/src/components/CustomMessage/MessageTag.tsx +8 -0
- package/src/components/CustomMessage/context.tsx +1 -1
- package/src/components/CustomMessage/index.tsx +76 -42
- package/src/components/CustomMessageInput/CustomMessageInput.stories.tsx +5 -3
- package/src/components/MessageBubble/MessageBubble.test.tsx +6 -0
- package/src/components/MessageBubble/components/_shared/BubbleShell.tsx +7 -0
- package/src/index.ts +3 -8
- package/src/stream-custom-data.ts +1 -0
- package/src/styles.css +12 -0
- package/src/types.ts +1 -1
- package/dist/Card-6hroGp5h.cjs +0 -2
- package/dist/Card-6hroGp5h.cjs.map +0 -1
- package/dist/Card-BSNPq8EZ.cjs +0 -2
- package/dist/Card-BSNPq8EZ.cjs.map +0 -1
- package/dist/Card-BXbIfAPG.cjs +0 -2
- package/dist/Card-BXbIfAPG.cjs.map +0 -1
- package/dist/Card-CITMJ1J_.js +0 -163
- package/dist/Card-CITMJ1J_.js.map +0 -1
- package/dist/Card-CdY2J5UR.js +0 -132
- package/dist/Card-CdY2J5UR.js.map +0 -1
- package/dist/Card-FjJ3xKYh.js +0 -107
- package/dist/Card-FjJ3xKYh.js.map +0 -1
- package/dist/LockedThumbnail-B8_nHryj.js +0 -220
- package/dist/LockedThumbnail-B8_nHryj.js.map +0 -1
- package/dist/LockedThumbnail-DKXJ1UCH.cjs +0 -2
- package/dist/LockedThumbnail-DKXJ1UCH.cjs.map +0 -1
- package/dist/index-BPKdQxLc.cjs +0 -2
- package/dist/index-BPKdQxLc.cjs.map +0 -1
- package/dist/index-BRBoCyPQ.js.map +0 -1
- package/src/components/LockedAttachment/LockedAttachment.stories.tsx +0 -450
- package/src/components/LockedAttachment/components/Composer/Card.tsx +0 -221
- package/src/components/LockedAttachment/components/Composer/index.ts +0 -2
- package/src/components/LockedAttachment/components/Received/Card.tsx +0 -191
- package/src/components/LockedAttachment/components/Received/index.ts +0 -2
- package/src/components/LockedAttachment/components/Sent/Card.tsx +0 -177
- package/src/components/LockedAttachment/components/Sent/index.ts +0 -2
- package/src/components/LockedAttachment/components/_shared/LockBadge.tsx +0 -39
- package/src/components/LockedAttachment/index.tsx +0 -63
- package/src/components/LockedAttachment/types.ts +0 -51
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("@phosphor-icons/react"),d=require("./LoadingDots-D9GGphgM.cjs"),x=require("classnames"),r=({children:s})=>e.jsxs("div",{className:"flex items-center gap-1 text-xs font-medium",children:[e.jsx(h.LockSimpleIcon,{className:"size-3.5 shrink-0 opacity-55",weight:"fill","aria-hidden":!0}),s]}),c=({variant:s="dark"})=>{const a=s==="dark"?"bg-white/25":"bg-black/15";return e.jsxs("div",{className:"flex flex-col gap-2 str-chat__message-text my-1 animate-pulse","aria-hidden":!0,children:[e.jsx("div",{className:x("h-3 w-40 rounded-full",a)}),e.jsx("div",{className:x("h-3 w-24 rounded-full",a)})]})},n=({isMine:s,children:a,className:i})=>e.jsx("div",{className:x("message-locked-attachment-text","relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3","text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]",s?"bg-[#1e2330] text-white":"bg-[#f2f1ef] text-black","shadow-[0_1px_2px_rgba(0,0,0,0.08)]",i),children:a}),u=({renderedText:s,amountText:a,placeholderAmountText:i,onDismiss:t})=>e.jsxs(n,{isMine:!0,className:"pr-8",children:[s||e.jsx(c,{variant:"dark"}),e.jsx(r,{children:e.jsx("span",{className:a?"text-white/55":"text-white/30",children:a||i})}),t&&e.jsx("button",{type:"button",onClick:t,className:"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15","aria-label":"Dismiss attachment",children:e.jsx(h.XIcon,{className:"size-3",weight:"bold"})})]}),j=({amountText:s,placeholderAmountText:a})=>e.jsxs(n,{isMine:!1,children:[e.jsx(c,{variant:"light"}),e.jsx(r,{children:e.jsx("span",{className:"opacity-55",children:s||a})})]}),m=({renderedText:s,amountText:a,paymentStatus:i="pending"})=>{const t=i==="paid";return e.jsxs(n,{isMine:!0,children:[t&&s?s:e.jsx(c,{variant:"dark"}),e.jsxs(r,{children:[a&&e.jsx("span",{className:"text-white/55",children:a}),e.jsx(d.PurchaseStatusBadge,{isMine:!0,paymentStatus:i})]})]})},f=({renderedText:s,amountText:a,paymentStatus:i,onUnlockClick:t,isUnlocking:l=!1})=>{if(i==="paid"&&s)return e.jsxs(n,{isMine:!1,children:[s,e.jsxs(r,{children:[a!=null&&e.jsx("span",{className:"opacity-55",children:a}),e.jsx(d.PurchaseStatusBadge,{isMine:!1,paymentStatus:"paid"})]})]});const o=l?"Unlocking message.":"Unlock this message.";return e.jsx(n,{isMine:!1,children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex flex-1 flex-col gap-2",children:[e.jsx(c,{variant:"light"}),e.jsx("span",{className:"sr-only","aria-live":"polite",children:o}),e.jsx(r,{children:a!=null&&e.jsx("span",{className:"opacity-55",children:a})})]}),e.jsx("button",{type:"button",onClick:t,disabled:l,"aria-label":l?"Unlocking message":"Unlock message","aria-busy":l,title:l?"Unlocking message":"Unlock message",className:"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]",children:l?e.jsx(d.LoadingDots,{}):e.jsx(h.LockSimpleIcon,{className:"size-4",weight:"fill","aria-hidden":!0})})]})})},g=s=>s.isDraft?e.jsx(u,{...s}):s.isPreview?e.jsx(j,{...s}):s.isMine?e.jsx(m,{...s}):e.jsx(f,{...s});exports.default=g;
|
|
2
|
+
//# sourceMappingURL=Card-415OfRhw.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card-415OfRhw.cjs","sources":["../src/components/CustomMessage/LockedAttachment/components/_shared/PriceLockRow.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/SkeletonTextLines.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/TextShell.tsx","../src/components/CustomMessage/LockedAttachment/components/Text/Card.tsx"],"sourcesContent":["import { LockSimpleIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\n/**\n * The lock-icon + amount/status row shared by every LockedAttachment text-mode\n * card. Only the wrapper and the leading lock icon are shared — the amount and\n * any trailing status live in `children`, since they genuinely differ per card\n * (placeholder fallback vs. paid badge vs. bare amount).\n */\nconst PriceLockRow: React.FC<React.PropsWithChildren> = ({ children }) => (\n <div className=\"flex items-center gap-1 text-xs font-medium\">\n <LockSimpleIcon\n className=\"size-3.5 shrink-0 opacity-55\"\n weight=\"fill\"\n aria-hidden\n />\n {children}\n </div>\n)\n\nexport default PriceLockRow\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport interface SkeletonTextLinesProps {\n /** Matches the bubble it sits in — \"dark\" for the sender's own bubble. */\n variant: 'light' | 'dark'\n}\n\n/**\n * Two skeleton bars standing in for the redacted text of a paid text-only\n * message — the real content is never sent to the client until purchase, so\n * there's nothing to render yet.\n *\n * Uses explicit black/white (not `bg-current`) because Tailwind doesn't\n * support opacity modifiers on the `current` color — `bg-current/30` silently\n * produces no CSS rule at all.\n */\nconst SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({ variant = 'dark' }) => {\n const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'\n\n return (\n <div className=\"flex flex-col gap-2 str-chat__message-text my-1 animate-pulse\" aria-hidden>\n <div className={classNames('h-3 w-40 rounded-full', colour)} />\n <div className={classNames('h-3 w-24 rounded-full', colour)} />\n </div>\n )\n}\n\nexport default SkeletonTextLines\n","import classNames from 'classnames'\nimport React from 'react'\n\n/**\n * Chat-bubble chrome for a paid text-only message/preview. Deliberately\n * doesn't lean on `.str-chat`'s CSS variables (`--str-chat__message-bubble-*`)\n * — this renders in the Composer preview too, which sits outside any\n * `.str-chat` ancestor, so every value here (radius, colour, type scale) is\n * hardcoded to match the Figma spec directly.\n */\nconst TextShell: React.FC<\n React.PropsWithChildren<{ isMine: boolean; className?: string }>\n> = ({ isMine, children, className }) => (\n <div\n className={classNames(\n 'message-locked-attachment-text',\n 'relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3',\n 'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',\n isMine ? 'bg-[#1e2330] text-white' : 'bg-[#f2f1ef] text-black',\n 'shadow-[0_1px_2px_rgba(0,0,0,0.08)]',\n className\n )}\n >\n {children}\n </div>\n)\n\nexport default TextShell\n","import { LockSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport LoadingDots from '../_shared/LoadingDots'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\n\nimport type {\n TextCardDraftProps,\n TextCardOtherProps,\n TextCardOwnProps,\n TextCardPreviewProps,\n TextCardProps,\n} from './types'\n\nexport type { TextCardProps } from './types'\n\nconst DraftTextCard: React.FC<TextCardDraftProps> = ({\n renderedText,\n amountText,\n placeholderAmountText,\n onDismiss,\n}) => (\n <TextShell isMine className=\"pr-8\">\n {renderedText || <SkeletonTextLines variant=\"dark\" />}\n <PriceLockRow>\n <span className={amountText ? 'text-white/55' : 'text-white/30'}>\n {amountText || placeholderAmountText}\n </span>\n </PriceLockRow>\n {onDismiss && (\n <button\n type=\"button\"\n onClick={onDismiss}\n className=\"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n aria-label=\"Dismiss attachment\"\n >\n <XIcon className=\"size-3\" weight=\"bold\" />\n </button>\n )}\n </TextShell>\n)\n\nconst PreviewTextCard: React.FC<TextCardPreviewProps> = ({\n amountText,\n placeholderAmountText,\n}) => (\n <TextShell isMine={false}>\n <SkeletonTextLines variant=\"light\" />\n <PriceLockRow>\n <span className=\"opacity-55\">{amountText || placeholderAmountText}</span>\n </PriceLockRow>\n </TextShell>\n)\n\nconst OwnTextCard: React.FC<TextCardOwnProps> = ({\n renderedText,\n amountText,\n paymentStatus = 'pending',\n}) => {\n const isPaid = paymentStatus === 'paid'\n\n return (\n <TextShell isMine>\n {isPaid && renderedText ? (\n renderedText\n ) : (\n <SkeletonTextLines variant=\"dark\" />\n )}\n <PriceLockRow>\n {amountText && <span className=\"text-white/55\">{amountText}</span>}\n <PurchaseStatusBadge isMine paymentStatus={paymentStatus} />\n </PriceLockRow>\n </TextShell>\n )\n}\n\nconst OtherTextCard: React.FC<TextCardOtherProps> = ({\n renderedText,\n amountText,\n paymentStatus,\n onUnlockClick,\n isUnlocking = false,\n}) => {\n const isPaid = paymentStatus === 'paid'\n\n if (isPaid && renderedText) {\n return (\n <TextShell isMine={false}>\n {renderedText}\n <PriceLockRow>\n {amountText != null && (\n <span className=\"opacity-55\">{amountText}</span>\n )}\n <PurchaseStatusBadge isMine={false} paymentStatus=\"paid\" />\n </PriceLockRow>\n </TextShell>\n )\n }\n\n const ariaLabel = isUnlocking\n ? 'Unlocking message.'\n : 'Unlock this message.'\n\n return (\n <TextShell isMine={false}>\n <div className=\"flex items-center gap-3\">\n <div className=\"flex flex-1 flex-col gap-2\">\n <SkeletonTextLines variant=\"light\" />\n <span className=\"sr-only\" aria-live=\"polite\">\n {ariaLabel}\n </span>\n <PriceLockRow>\n {amountText != null && (\n <span className=\"opacity-55\">{amountText}</span>\n )}\n </PriceLockRow>\n </div>\n <button\n type=\"button\"\n onClick={onUnlockClick}\n disabled={isUnlocking}\n aria-label={isUnlocking ? 'Unlocking message' : 'Unlock message'}\n aria-busy={isUnlocking}\n title={isUnlocking ? 'Unlocking message' : 'Unlock message'}\n className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]\"\n >\n {isUnlocking ? (\n <LoadingDots />\n ) : (\n <LockSimpleIcon className=\"size-4\" weight=\"fill\" aria-hidden />\n )}\n </button>\n </div>\n </TextShell>\n )\n}\n\nconst TextCard: React.FC<TextCardProps> = (props) => {\n if (props.isDraft) {\n return <DraftTextCard {...props} />\n } else if (props.isPreview) {\n return <PreviewTextCard {...props} />\n } else if (props.isMine) {\n return <OwnTextCard {...props} />\n } else {\n return <OtherTextCard {...props} />\n }\n}\n\nexport default TextCard\n"],"names":["PriceLockRow","children","jsxs","jsx","LockSimpleIcon","SkeletonTextLines","variant","colour","classNames","TextShell","isMine","className","DraftTextCard","renderedText","amountText","placeholderAmountText","onDismiss","XIcon","PreviewTextCard","OwnTextCard","paymentStatus","isPaid","PurchaseStatusBadge","OtherTextCard","onUnlockClick","isUnlocking","ariaLabel","LoadingDots","TextCard","props"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("@phosphor-icons/react"),h=require("react"),v=require("classnames"),k=require("./index-Bx_zjNMR.cjs"),T=require("./LoadingDots-D9GGphgM.cjs"),P=({variant:t,title:s,placeholderTitle:n="Attachment title",mimeType:i,detail:a,statusBadge:r,action:c,icon:u,trailingAction:d})=>{const l=t==="dark",o=s||n,x=!s,f=u??k.renderTypeIcon(i,{className:v("size-5 shrink-0",l?"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:[o.trim()!==""&&e.jsx("p",{className:v("truncate text-base font-medium leading-6",{"text-black/90":!l&&!x,"text-black/30":!l&&x,"text-white/30":l&&x,"text-white":l&&!x}),children:o}),e.jsxs("div",{className:"flex flex-wrap items-center gap-1",children:[f,a!=null&&a!==""&&e.jsx("span",{className:v("text-xs font-medium",l?"text-white/55":"text-black/55"),children:a}),r]})]}),d&&e.jsx("div",{className:"shrink-0",children:d})]}),c]})},M=({paymentStatus:t,mimeType:s,isPlayable:n,isLocked:i})=>{const a=s?k.getSourceType(s):void 0,c=(n??(a==="video"||a==="audio"))&&!i?b.PlayIcon:t==="paid"?b.LockOpenIcon:b.LockSimpleIcon;return e.jsx("div",{className:"pointer-events-none absolute inset-0 flex items-center justify-center",children:e.jsx("div",{className:v("flex size-12 items-center justify-center rounded-full bg-black/30 text-white",c===b.PlayIcon&&"group-hover:bg-black/40"),children:e.jsx(c,{className:"size-6",weight:"fill"})})})};function q(t){const s=k.getSourceType(t.mimeType);return s==="video"||s==="audio"}const O=({variant:t,gallery:s,title:n,showLocked:i,paymentStatus:a,topRight:r})=>{const[c,u]=h.useState(0),d=s.length,l=Math.min(c,d-1),o=s[l],x=q(o),f=g=>{g.stopPropagation(),u(N=>Math.max(0,N-1))},w=g=>{g.stopPropagation(),u(N=>Math.min(d-1,N+1))},j=l===0,m=l===d-1,p=t==="dark";return e.jsxs("div",{className:v("group relative overflow-hidden rounded-t-md",i?"aspect-[337/386]":void 0),children:[i?e.jsx("div",{className:v("absolute inset-0",p?"bg-white/10":"bg-black/5"),children:o.thumbnailUrl&&e.jsx("img",{src:o.thumbnailUrl,alt:"","aria-hidden":!0,draggable:!1,className:"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"})}):e.jsx(k.AttachmentThumbnail,{mimeType:o.mimeType,sourceUrl:o.sourceUrl,thumbnailUrl:o.thumbnailUrl,title:n,variant:t,mediaPlayerProps:{autoPlay:!0}},l),i&&e.jsx(M,{paymentStatus:a,isPlayable:x,isLocked:i}),d>1&&e.jsxs(h.Fragment,{children:[e.jsx("button",{type:"button",onClick:f,disabled:j,"aria-label":"Previous item",className:v("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(b.CaretLeftIcon,{className:"size-5",weight:"bold"})}),e.jsx("button",{type:"button",onClick:w,disabled:m,"aria-label":"Next item",className:v("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",m?"opacity-40":"hover:bg-black/40"),children:e.jsx(b.CaretRightIcon,{className:"size-5",weight:"bold"})}),e.jsx("div",{className:"pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30",children:e.jsxs("span",{className:"text-xs font-medium leading-none text-white",children:[l+1,"/",d]})})]}),r&&e.jsx("div",{className:"pointer-events-auto absolute right-3 top-3 z-10",children:r})]})},A=({variant:t,mimeType:s,thumbnailUrl:n,title:i,source:a,showLocked:r,paymentStatus:c,topRight:u,containedImage:d=!1})=>{const l=r||a==null?void 0:a.sourceUrl,o=r?n:(a==null?void 0:a.thumbnailUrl)??n,x=t==="dark";return e.jsxs("div",{className:"relative overflow-hidden rounded-t-md",children:[r?e.jsxs("div",{className:v("relative aspect-video overflow-hidden",x?"bg-white/10":"bg-black/5"),children:[o?e.jsx("img",{src:o,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:k.renderTypeIcon(s,{className:x?"size-12 text-white/20":"size-12 text-black/20",weight:"regular"})}),e.jsx(M,{paymentStatus:c,mimeType:s,isLocked:r})]}):e.jsx(k.AttachmentThumbnail,{mimeType:s,sourceUrl:l,thumbnailUrl:o,title:i,variant:t,containedImage:d,mediaPlayerProps:l?{autoPlay:!0,loop:!0,controls:!0,muted:!1}:void 0}),u&&e.jsx("div",{className:"pointer-events-auto absolute right-3 top-3 z-10",children:u})]})},y=t=>t.length>=2,I=t=>e.jsx(b.ImagesIcon,{className:t==="dark"?"size-5 shrink-0 text-white/55":"size-5 shrink-0 text-black/55"}),z=({variant:t,gallery:s,title:n,showLocked:i,paymentStatus:a,mimeType:r,thumbnailUrl:c,source:u,containedImage:d,topRight:l})=>y(s)?e.jsx(O,{variant:t,gallery:s,title:n,showLocked:i,paymentStatus:a,topRight:l}):e.jsx(A,{variant:t,mimeType:r,thumbnailUrl:c,title:n,source:u,showLocked:i,paymentStatus:a,topRight:l,containedImage:d}),U=({variant:t,children:s,rootRef:n,"data-testid":i})=>e.jsx("div",{ref:n,"data-testid":i,className:v("relative w-[280px] select-none overflow-hidden rounded-md",t==="dark"?"bg-[#1e2330]":"bg-white","shadow-[0_1px_2px_rgba(0,0,0,0.08)]"),children:s}),C=({onToggle:t,isBusy:s,isPreviewVisible:n,children:i})=>t?e.jsx("div",{role:"button",tabIndex:s?-1:0,"aria-label":"Toggle preview","aria-busy":s,"aria-pressed":n,"aria-disabled":s||void 0,onClick:s?void 0:t,onKeyDown:a=>{s||a.target===a.currentTarget&&(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),t())},className:s?"block w-full text-left":"block w-full cursor-pointer text-left",children:i}):e.jsx(h.Fragment,{children:i});function R({isGallery:t,onFetchSource:s,onPreviewClick:n}){const[i,a]=h.useState(),[r,c]=h.useState(!1),[u,d]=h.useState(!1),l=h.useRef(!1),o=h.useCallback(async()=>{if(n==null||n(),r){c(!1);return}if(t){c(!0);return}if(i){c(!0);return}if(s&&!l.current){l.current=!0,d(!0);try{const f=await s();f&&(a(f),c(!0))}finally{l.current=!1,d(!1)}}},[r,t,i,n,s]),x=t||s!=null||n!=null?o:void 0;return{source:i,isPreviewVisible:r,isLoadingPreview:u,handleToggle:o,togglePreview:x}}function G({paymentStatus:t,onFetchSource:s,onUnlockClick:n}){const[i,a]=h.useState(),r=h.useRef(null),c=h.useRef(!1),u=h.useRef(s);u.current=s;const d=h.useCallback(async()=>{var o;if(!c.current){c.current=!0;try{const x=await((o=u.current)==null?void 0:o.call(u));x&&a(x)}finally{c.current=!1}}},[]),l=h.useCallback(()=>{t==="paid"?d():n==null||n()},[t,d,n]);return h.useEffect(()=>{if(!r.current||t!=="paid"||i!==void 0)return;const o=new IntersectionObserver(([x])=>{x.isIntersecting&&(d(),o.disconnect())},{threshold:1});return o.observe(r.current),()=>o.disconnect()},[t,i,d]),{source:i,cardRef:r,handleUnlockClick:l}}const S="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928]",_=({isLocked:t,sourceUrl:s,redeemUrl:n,onUnlockClicked:i,onDownloadClicked:a,isUnlocking:r=!1})=>{if(t&&i!=null)return e.jsx("button",{type:"button",onClick:i,disabled:r,"aria-label":r?"Unlocking":"Unlock","aria-busy":r,title:r?"Unlocking":"Unlock",className:S,children:r?e.jsx(T.LoadingDots,{}):e.jsxs(h.Fragment,{children:[e.jsx(b.LockSimpleIcon,{className:"size-4",weight:"fill"}),"Unlock"]})});if(!t&&a!=null){const c=n??s;return c!=null?e.jsxs("a",{href:c,"aria-label":"Download",target:"_blank",rel:"noopener noreferrer",onClick:a,className:`${S} !text-white`,children:[e.jsx(b.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]}):e.jsxs("button",{type:"button",onClick:a,"aria-label":"Download",className:S,children:[e.jsx(b.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]})}return null},E=({title:t,mimeType:s="application/octet-stream",thumbnailUrl:n,detail:i,amountText:a,placeholderTitle:r,placeholderAmountText:c,gallery:u=[],onDismiss:d,onPreviewClick:l,onFetchSource:o,onEditClick:x})=>{const f=y(u),{source:w,isPreviewVisible:j,isLoadingPreview:m,togglePreview:p}=R({isGallery:f,onFetchSource:o,onPreviewClick:l}),g=!j,N=m,D=e.jsxs(h.Fragment,{children:[e.jsx("span",{className:"text-xs font-medium text-white/55",children:"•"}),e.jsx("span",{className:a?"text-xs font-medium text-white/55":"text-xs font-medium text-white/30",children:a||c})]}),L=d?e.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),d()},className:"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white","aria-label":"Dismiss attachment",children:e.jsx(b.XIcon,{className:"size-3",weight:"bold"})}):void 0,B=x?e.jsx("button",{type:"button",onClick:x,"aria-label":"Edit attachment",className:"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",children:e.jsx(b.PencilSimpleIcon,{className:"size-5",weight:"regular"})}):void 0;return e.jsxs(U,{variant:"dark",children:[e.jsx(C,{onToggle:p,isBusy:N,isPreviewVisible:!g,children:e.jsx(z,{variant:"dark",gallery:u,title:t,showLocked:g,mimeType:s,thumbnailUrl:n,source:w,topRight:L})}),e.jsx(P,{variant:"dark",title:t,placeholderTitle:r,mimeType:s,detail:i,statusBadge:D,icon:f?I("dark"):void 0,trailingAction:B})]})},$=({title:t,mimeType:s="application/octet-stream",thumbnailUrl:n,detail:i,amountText:a,placeholderTitle:r,placeholderAmountText:c,gallery:u=[]})=>{const d=y(u),l=e.jsxs(h.Fragment,{children:[e.jsx("span",{className:"text-xs font-medium text-black/55",children:"•"}),e.jsx("span",{className:a?"text-xs font-medium text-black/55":"text-xs font-medium text-black/30",children:a||c})]});return e.jsxs(U,{variant:"light",children:[e.jsx(z,{variant:"light",gallery:u,title:t,showLocked:!0,mimeType:s,thumbnailUrl:n}),e.jsx(P,{variant:"light",title:t,placeholderTitle:r,mimeType:s,detail:i,statusBadge:l,icon:d?I("light"):void 0})]})},K=({title:t,mimeType:s="application/octet-stream",thumbnailUrl:n,detail:i,amountText:a,placeholderTitle:r,paymentStatus:c="pending",gallery:u=[],onPreviewClick:d,onFetchSource:l})=>{const o=y(u),{source:x,isPreviewVisible:f,isLoadingPreview:w,togglePreview:j}=R({isGallery:o,onFetchSource:l,onPreviewClick:d}),m=!f,p=w;return e.jsxs(U,{variant:"dark",children:[e.jsx(C,{onToggle:j,isBusy:p,isPreviewVisible:!m,children:e.jsx(z,{variant:"dark",gallery:u,title:t,showLocked:m,paymentStatus:c,mimeType:s,thumbnailUrl:n,source:x})}),e.jsx(P,{variant:"dark",title:t,placeholderTitle:r,mimeType:s,detail:i,statusBadge:e.jsx(T.PurchaseStatusBadge,{isMine:!0,paymentStatus:c,amountText:a}),icon:o?I("dark"):void 0})]})},X=({title:t,amountText:s,thumbnailUrl:n,mimeType:i="application/octet-stream",detail:a,gallery:r=[],onUnlockClick:c,onFetchSource:u,onDownloadClick:d,paymentStatus:l,isUnlocking:o=!1})=>{const x=y(r),{source:f,cardRef:w,handleUnlockClick:j}=G({paymentStatus:l,onFetchSource:u,onUnlockClick:c}),m=f==null?void 0:f.sourceUrl,p=f==null?void 0:f.redeemUrl,g=x?l!=="paid":m===void 0,N=k.getSourceType(i),D=x?void 0:m;return e.jsxs(U,{variant:"light",rootRef:w,"data-testid":"locked-attachment",children:[e.jsx(z,{variant:"light",gallery:r,title:t,showLocked:g,paymentStatus:l,mimeType:i,thumbnailUrl:n,source:f,containedImage:!g&&N==="document"}),e.jsx(P,{variant:"light",title:t,mimeType:i,detail:a,statusBadge:e.jsx(T.PurchaseStatusBadge,{isMine:!1,paymentStatus:l,amountText:s}),icon:x?I("light"):void 0,action:e.jsx(_,{isLocked:g,isUnlocking:o,sourceUrl:D,redeemUrl:p,onUnlockClicked:j,onDownloadClicked:d})})]})},F=t=>t.isDraft?e.jsx(E,{...t}):t.isPreview?e.jsx($,{...t}):t.isMine?e.jsx(K,{...t}):e.jsx(X,{...t});exports.default=F;
|
|
2
|
+
//# sourceMappingURL=Card-CyWdUMCB.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card-CyWdUMCB.cjs","sources":["../src/components/CustomMessage/LockedAttachment/components/_shared/CardBody.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/CardThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/MediaShell.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/PreviewToggle.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.ts","../src/components/CustomMessage/LockedAttachment/components/_shared/useReceivedSource.ts","../src/components/CustomMessage/LockedAttachment/components/Media/CardActions.tsx","../src/components/CustomMessage/LockedAttachment/components/Media/Card.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../../../AttachmentCard'\n\nimport type { CardVariant } from './MediaShell'\n\nexport interface CardBodyProps {\n variant: CardVariant\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 and `LockedAttachment.Media`.\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 = title || placeholderTitle\n const titleDimmed = !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 && !titleDimmed,\n 'text-black/30': !isDark && titleDimmed,\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 { LockOpenIcon, LockSimpleIcon, PlayIcon } from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React from 'react'\n\nimport { getSourceType } from '../../../../AttachmentCard'\nimport type { PaymentStatus } from '../../types'\n\nexport interface LockBadgeProps {\n paymentStatus?: PaymentStatus\n mimeType?: string\n /**\n * Overrides the `mimeType`-derived playable check. Lets a caller that\n * already knows per-item playability (e.g. `GalleryThumbnail`, checking a\n * carousel item's own mimeType rather than the card's single `mimeType`)\n * skip re-deriving it.\n */\n isPlayable?: boolean\n /** Whether the item is still locked. Play only ever shows once unlocked —\n * a locked item always shows the lock, even for otherwise-playable media. */\n isLocked: boolean\n}\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/30`. Stays `pointer-events-none` so clicks pass through to\n * the underlying player/toggle; the play state highlights via `group-hover`\n * (same `bg-black/40` as the gallery's prev/next arrows) — the ancestor\n * providing `group` must wrap the actual clickable/hoverable player area.\n *\n * For playable media (video/audio) that's unlocked, the badge shows a play\n * icon instead of a lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC<LockBadgeProps> = ({\n paymentStatus,\n mimeType,\n isPlayable,\n isLocked,\n}) => {\n const sourceType = mimeType ? getSourceType(mimeType) : undefined\n const resolvedIsPlayable =\n isPlayable ?? (sourceType === 'video' || sourceType === 'audio')\n\n const Icon =\n resolvedIsPlayable && !isLocked\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\n className={classNames(\n 'flex size-12 items-center justify-center rounded-full bg-black/30 text-white',\n Icon === PlayIcon && 'group-hover:bg-black/40'\n )}\n >\n <Icon className=\"size-6\" weight=\"fill\" />\n </div>\n </div>\n )\n}\n\nexport default LockBadge\n","import { CaretLeftIcon, CaretRightIcon } 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 { LockBadge } from './LockBadge'\nimport type { CardVariant } from './MediaShell'\n\nexport interface GalleryThumbnailProps {\n variant: CardVariant\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 // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n // wrapper on PreviewMediaCard / OwnMediaCard.\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).\n //\n // The locked placeholder is absolutely positioned, so it needs the fixed\n // 337/386 box for height; unlocked content (video, natural-sized image)\n // manages its own height and can expand/shrink per item.\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 SingleThumbnail).\n return (\n <div\n className={classNames(\n 'group relative overflow-hidden rounded-t-md',\n showLocked ? 'aspect-[337/386]' : undefined\n )}\n >\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 key={safeIndex}\n mimeType={current.mimeType}\n sourceUrl={current.sourceUrl}\n thumbnailUrl={current.thumbnailUrl}\n title={title}\n variant={variant}\n mediaPlayerProps={{ autoPlay: true }}\n />\n )}\n\n {/* LOCK while locked. Once unlocked, video/audio autoplays via\n `mediaPlayerProps` and MediaPlayer already has its own inline\n controls, so no separate Play affordance is shown. */}\n {showLocked && (\n <LockBadge\n paymentStatus={paymentStatus}\n isPlayable={isVideoItem}\n isLocked={showLocked}\n />\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-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30\">\n <span className=\"text-xs font-medium leading-none 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\nimport {\n AttachmentThumbnail,\n renderTypeIcon,\n} from '../../../../AttachmentCard'\nimport type { LockedAttachmentSource, PaymentStatus } from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { CardVariant } from './MediaShell'\n\nexport interface SingleThumbnailProps {\n variant: CardVariant\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 SingleThumbnail: React.FC<SingleThumbnailProps> = ({\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-md\">\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\n paymentStatus={paymentStatus}\n mimeType={mimeType}\n isLocked={showLocked}\n />\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 SingleThumbnail\n","import { ImagesIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport type {\n LockedAttachmentGalleryItem,\n LockedAttachmentSource,\n PaymentStatus,\n} from '../../types'\n\nimport GalleryThumbnail from './GalleryThumbnail'\nimport type { CardVariant } from './MediaShell'\nimport SingleThumbnail from './SingleThumbnail'\n\nexport interface CardThumbnailProps {\n variant: CardVariant\n gallery: LockedAttachmentGalleryItem[]\n title?: string\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Single-asset props — ignored when the card renders as a gallery. */\n mimeType: string\n thumbnailUrl?: string\n source?: LockedAttachmentSource\n containedImage?: boolean\n /** Top-right overlay (e.g. Composer dismiss X). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n}\n\n/** True when the card should render as a mixed-media carousel (2+ items). */\nexport const isGalleryCard = (\n gallery: LockedAttachmentGalleryItem[]\n): boolean => gallery.length >= 2\n\n/**\n * The body-row icon a card shows when it renders as a gallery — `CardBody`\n * otherwise auto-detects the icon from `mimeType`. Returned as a ready node so\n * every card shares the same size/tone treatment.\n */\nexport const galleryBodyIcon = (\n variant: CardVariant\n): React.ReactNode => (\n <ImagesIcon\n className={\n variant === 'dark'\n ? 'size-5 shrink-0 text-white/55'\n : 'size-5 shrink-0 text-black/55'\n }\n />\n)\n\n/**\n * Owns the single-vs-gallery thumbnail decision shared by Composer /\n * `LockedAttachment.Media` cards: renders `GalleryThumbnail` for a 2+ item `gallery`,\n * else `SingleThumbnail` for the single asset. Callers pass the superset of\n * props; the unused half is ignored by whichever branch renders.\n */\nconst CardThumbnail: React.FC<CardThumbnailProps> = ({\n variant,\n gallery,\n title,\n showLocked,\n paymentStatus,\n mimeType,\n thumbnailUrl,\n source,\n containedImage,\n topRight,\n}) =>\n isGalleryCard(gallery) ? (\n <GalleryThumbnail\n variant={variant}\n gallery={gallery}\n title={title}\n showLocked={showLocked}\n paymentStatus={paymentStatus}\n topRight={topRight}\n />\n ) : (\n <SingleThumbnail\n variant={variant}\n mimeType={mimeType}\n thumbnailUrl={thumbnailUrl}\n title={title}\n source={source}\n showLocked={showLocked}\n paymentStatus={paymentStatus}\n topRight={topRight}\n containedImage={containedImage}\n />\n )\n\nexport default CardThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport type CardVariant = 'dark' | 'light'\n\nexport interface MediaShellProps {\n variant: CardVariant\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 16px radius treatment from the Figma design system.\n */\nconst MediaShell: React.FC<MediaShellProps> = ({\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 variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white',\n 'shadow-[0_1px_2px_rgba(0,0,0,0.08)]'\n )}\n >\n {children}\n </div>\n)\n\nexport default MediaShell\n","import React from 'react'\n\nexport interface PreviewToggleProps {\n /** Toggles the preview; omit to render `children` with no wrapper at all (nothing to toggle). */\n onToggle: (() => void | Promise<void>) | undefined\n isBusy: boolean\n isPreviewVisible: boolean\n children: React.ReactNode\n}\n\n/**\n * Makes a locked thumbnail clickable to toggle its preview. Uses a\n * `role=\"button\"` div rather than a native `<button>` because the thumbnail\n * it wraps can itself contain interactive children (gallery carousel arrows,\n * a Composer dismiss X) — nesting a real `<button>` around those would\n * produce invalid, inaccessible nested-interactive-element markup.\n */\nconst PreviewToggle: React.FC<PreviewToggleProps> = ({\n onToggle,\n isBusy,\n isPreviewVisible,\n children,\n}) => {\n if (!onToggle) return <React.Fragment>{children}</React.Fragment>\n\n return (\n <div\n role=\"button\"\n tabIndex={isBusy ? -1 : 0}\n aria-label=\"Toggle preview\"\n aria-busy={isBusy}\n aria-pressed={isPreviewVisible}\n aria-disabled={isBusy || undefined}\n onClick={isBusy ? undefined : onToggle}\n onKeyDown={(e) => {\n if (isBusy) return\n // Only handle keys that originate on the wrapper itself, not on\n // inner interactive elements (dismiss X, 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 onToggle()\n }\n }}\n className={\n !isBusy\n ? 'block w-full cursor-pointer text-left'\n : 'block w-full text-left'\n }\n >\n {children}\n </div>\n )\n}\n\nexport default PreviewToggle\n","import { useCallback, useRef, useState } from 'react'\n\nimport type { LockedAttachmentSource } from '../../types'\n\nexport interface UsePreviewToggleOptions {\n /** Gallery items carry their own per-item sources on the `gallery` prop already, so toggling skips the async fetch entirely. */\n isGallery: boolean\n /**\n * Lazily loads the underlying source; the resolved value is cached in\n * `source` and reused on subsequent toggles.\n */\n onFetchSource?: () => Promise<LockedAttachmentSource | void>\n /** Fired on every toggle tap, before any visibility/fetch logic runs. */\n onPreviewClick?: () => void\n}\n\nexport interface UsePreviewToggleResult {\n source: LockedAttachmentSource | undefined\n isPreviewVisible: boolean\n isLoadingPreview: boolean\n handleToggle: () => Promise<void>\n /**\n * `handleToggle` when the card can actually be previewed (gallery, or a\n * fetch/click handler is wired), else `undefined` — pass straight to\n * `PreviewToggle.onToggle` so a non-previewable card renders no\n * toggle affordance.\n */\n togglePreview: (() => Promise<void>) | undefined\n}\n\n/**\n * Shared preview-toggle state for Composer/Media isMine: flips a locked thumbnail to\n * its unlocked preview, lazily fetching and caching the source on first\n * reveal. Media !isMine doesn't use this — it fetches on scroll-into-view/paid\n * instead of on a toggle tap.\n */\nexport function usePreviewToggle({\n isGallery,\n onFetchSource,\n onPreviewClick,\n}: UsePreviewToggleOptions): UsePreviewToggleResult {\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 handleToggle = useCallback(async () => {\n onPreviewClick?.()\n if (isPreviewVisible) {\n setIsPreviewVisible(false)\n return\n }\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 const togglePreview =\n isGallery || onFetchSource != null || onPreviewClick != null\n ? handleToggle\n : undefined\n\n return {\n source,\n isPreviewVisible,\n isLoadingPreview,\n handleToggle,\n togglePreview,\n }\n}\n","import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n FetchSourceHandler,\n LockedAttachmentSource,\n PaymentStatus,\n} from '../../types'\n\nexport interface UseReceivedSourceOptions {\n paymentStatus?: PaymentStatus\n onFetchSource?: FetchSourceHandler\n /** Called on Unlock click while the card is still unpaid (opens checkout). */\n onUnlockClick?: () => void\n}\n\nexport interface UseReceivedSourceResult {\n source: LockedAttachmentSource | undefined\n /** Attach to the card root so the paid-source auto-fetch can observe it. */\n cardRef: React.RefObject<HTMLDivElement>\n /** Fetches the source when already paid, else defers to `onUnlockClick`. */\n handleUnlockClick: () => void\n}\n\n/**\n * Media !isMine's source-reveal logic: unlike Composer/Media isMine's\n * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source\n * by fetching once — on click when already paid, or automatically the first\n * time a paid card scrolls fully into view. The fetch is guarded so it runs\n * at most once in flight.\n */\nexport function useReceivedSource({\n paymentStatus,\n onFetchSource,\n onUnlockClick,\n}: UseReceivedSourceOptions): UseReceivedSourceResult {\n const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n\n const cardRef = useRef<HTMLDivElement>(null)\n const fetchingRef = useRef(false)\n\n const onFetchSourceRef = useRef(onFetchSource)\n onFetchSourceRef.current = onFetchSource\n\n const fetchSource = useCallback(async (): Promise<void> => {\n if (fetchingRef.current) return\n fetchingRef.current = true\n try {\n const result = await onFetchSourceRef.current?.()\n if (result) setSource(result)\n } finally {\n fetchingRef.current = false\n }\n }, [])\n\n const handleUnlockClick = useCallback(() => {\n if (paymentStatus === 'paid') {\n void fetchSource()\n } else {\n onUnlockClick?.()\n }\n }, [paymentStatus, fetchSource, onUnlockClick])\n\n // Auto-fetch the source once the paid card scrolls into view.\n useEffect(() => {\n if (!cardRef.current) return\n if (paymentStatus !== 'paid' || source !== undefined) return\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n void fetchSource()\n observer.disconnect()\n }\n },\n { threshold: 1.0 }\n )\n\n observer.observe(cardRef.current)\n return () => observer.disconnect()\n }, [paymentStatus, source, fetchSource])\n\n return { source, cardRef, handleUnlockClick }\n}\n","import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport LoadingDots from '../_shared/LoadingDots'\n\nexport interface ReceivedCardActionsProps {\n /** Whether the card is currently locked. Drives which CTA we render. */\n isLocked: boolean\n /**\n * When unlocked, the URL used as the Download link's `href` (opens in a new\n * tab). When omitted, the Download CTA falls back to a plain `<button>`\n * that just calls `onDownloadClicked` — useful for galleries where the\n * single-source URL doesn't exist.\n */\n sourceUrl?: string\n /** Optional alternate href that takes precedence over `sourceUrl`. */\n redeemUrl?: string\n onUnlockClicked?: () => void\n onDownloadClicked?: () => void\n isUnlocking?: boolean\n}\n\nconst buttonClass =\n 'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928]'\n\n/**\n * Renders the primary CTA below the body of a Received card.\n * - Locked + onUnlockClicked → \"Unlock\" button\n * - Unlocked + onDownloadClicked + (redeemUrl || sourceUrl) → \"Download\" link\n * - Unlocked + onDownloadClicked + no URL → \"Download\" button (e.g. gallery)\n * Otherwise renders nothing.\n */\nconst ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({\n isLocked,\n sourceUrl,\n redeemUrl,\n onUnlockClicked,\n onDownloadClicked,\n isUnlocking = false,\n}) => {\n if (isLocked && onUnlockClicked != null) {\n return (\n <button\n type=\"button\"\n onClick={onUnlockClicked}\n disabled={isUnlocking}\n aria-label={isUnlocking ? 'Unlocking' : 'Unlock'}\n aria-busy={isUnlocking}\n title={isUnlocking ? 'Unlocking' : 'Unlock'}\n className={buttonClass}\n >\n {isUnlocking ? (\n <LoadingDots />\n ) : (\n <React.Fragment>\n <LockSimpleIcon className=\"size-4\" weight=\"fill\" />\n Unlock\n </React.Fragment>\n )}\n </button>\n )\n }\n\n if (!isLocked && onDownloadClicked != null) {\n const href = redeemUrl ?? sourceUrl\n if (href != null) {\n return (\n <a\n href={href}\n aria-label=\"Download\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n onClick={onDownloadClicked}\n className={`${buttonClass} !text-white`}\n >\n <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n Download\n </a>\n )\n }\n\n return (\n <button\n type=\"button\"\n onClick={onDownloadClicked}\n aria-label=\"Download\"\n className={buttonClass}\n >\n <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n Download\n </button>\n )\n }\n\n return null\n}\n\nexport default ReceivedCardActions\n","import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../../AttachmentCard'\nimport CardBody from '../_shared/CardBody'\nimport CardThumbnail, {\n galleryBodyIcon,\n isGalleryCard,\n} from '../_shared/CardThumbnail'\nimport MediaShell from '../_shared/MediaShell'\nimport PreviewToggle from '../_shared/PreviewToggle'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\nimport { useReceivedSource } from '../_shared/useReceivedSource'\n\nimport ReceivedCardActions from './CardActions'\nimport type {\n MediaCardDraftProps,\n MediaCardOtherProps,\n MediaCardOwnProps,\n MediaCardPreviewProps,\n MediaCardProps,\n} from './types'\n\nexport type { MediaCardProps } from './types'\n\n/**\n * Media card while still drafting — the locked thumbnail (single or gallery)\n * the composer taps to preview the attachment they're about to send, plus\n * the title/price body with optional dismiss X and edit pencil.\n */\nconst DraftMediaCard: React.FC<MediaCardDraftProps> = ({\n title,\n mimeType = 'application/octet-stream',\n thumbnailUrl,\n detail,\n amountText,\n placeholderTitle,\n placeholderAmountText,\n gallery = [],\n onDismiss,\n onPreviewClick,\n onFetchSource,\n onEditClick,\n}) => {\n const isGallery = isGalleryCard(gallery)\n\n // Gallery is always previewable in the composer because each item's source\n // is already provided up-front via `gallery[*].sourceUrl`.\n const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n const showLocked = !isPreviewVisible\n const isBusy = isLoadingPreview\n\n const statusBadge = (\n <React.Fragment>\n <span className=\"text-xs font-medium text-white/55\">•</span>\n <span\n className={\n amountText\n ? 'text-xs font-medium text-white/55'\n : 'text-xs font-medium text-white/30'\n }\n >\n {amountText || placeholderAmountText}\n </span>\n </React.Fragment>\n )\n\n const dismissButton = onDismiss ? (\n <button\n type=\"button\"\n onClick={(e) => {\n // Stop the click from bubbling up into the outer preview-toggle\n // wrapper when both are wired up at the same time.\n e.stopPropagation()\n onDismiss()\n }}\n className=\"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white\"\n aria-label=\"Dismiss attachment\"\n >\n <XIcon className=\"size-3\" weight=\"bold\" />\n </button>\n ) : undefined\n\n const editButton = onEditClick ? (\n <button\n type=\"button\"\n onClick={onEditClick}\n aria-label=\"Edit attachment\"\n className=\"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n >\n <PencilSimpleIcon className=\"size-5\" weight=\"regular\" />\n </button>\n ) : undefined\n\n return (\n <MediaShell variant=\"dark\">\n <PreviewToggle\n onToggle={togglePreview}\n isBusy={isBusy}\n isPreviewVisible={!showLocked}\n >\n <CardThumbnail\n variant=\"dark\"\n gallery={gallery}\n title={title}\n showLocked={showLocked}\n mimeType={mimeType}\n thumbnailUrl={thumbnailUrl}\n source={source}\n topRight={dismissButton}\n />\n </PreviewToggle>\n\n <CardBody\n variant=\"dark\"\n title={title}\n placeholderTitle={placeholderTitle}\n mimeType={mimeType}\n detail={detail}\n statusBadge={statusBadge}\n icon={isGallery ? galleryBodyIcon('dark') : undefined}\n trailingAction={editButton}\n />\n </MediaShell>\n )\n}\n\n/**\n * Static mockup of what the recipient will see before purchase — always\n * locked/blurred (the lock badge renders from `showLocked` alone, no toggle\n * wiring needed), no interactivity, no real content revealed.\n */\nconst PreviewMediaCard: React.FC<MediaCardPreviewProps> = ({\n title,\n mimeType = 'application/octet-stream',\n thumbnailUrl,\n detail,\n amountText,\n placeholderTitle,\n placeholderAmountText,\n gallery = [],\n}) => {\n const isGallery = isGalleryCard(gallery)\n\n const statusBadge = (\n <React.Fragment>\n <span className=\"text-xs font-medium text-black/55\">•</span>\n <span\n className={\n amountText\n ? 'text-xs font-medium text-black/55'\n : 'text-xs font-medium text-black/30'\n }\n >\n {amountText || placeholderAmountText}\n </span>\n </React.Fragment>\n )\n\n return (\n <MediaShell variant=\"light\">\n <CardThumbnail\n variant=\"light\"\n gallery={gallery}\n title={title}\n showLocked\n mimeType={mimeType}\n thumbnailUrl={thumbnailUrl}\n />\n\n <CardBody\n variant=\"light\"\n title={title}\n placeholderTitle={placeholderTitle}\n mimeType={mimeType}\n detail={detail}\n statusBadge={statusBadge}\n icon={isGallery ? galleryBodyIcon('light') : undefined}\n />\n </MediaShell>\n )\n}\n/**\n * The sender's ('mine') view of a paid media attachment: the locked\n * thumbnail (single or gallery) they can tap to preview their own\n * attachment, plus the title/purchase-status body.\n */\nconst OwnMediaCard: React.FC<MediaCardOwnProps> = ({\n title,\n mimeType = 'application/octet-stream',\n thumbnailUrl,\n detail,\n amountText,\n placeholderTitle,\n paymentStatus = 'pending',\n gallery = [],\n onPreviewClick,\n onFetchSource,\n}) => {\n const isGallery = isGalleryCard(gallery)\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 { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n const showLocked = !isPreviewVisible\n const isBusy = isLoadingPreview\n\n return (\n <MediaShell variant=\"dark\">\n <PreviewToggle\n onToggle={togglePreview}\n isBusy={isBusy}\n isPreviewVisible={!showLocked}\n >\n <CardThumbnail\n variant=\"dark\"\n gallery={gallery}\n title={title}\n showLocked={showLocked}\n paymentStatus={paymentStatus}\n mimeType={mimeType}\n thumbnailUrl={thumbnailUrl}\n source={source}\n />\n </PreviewToggle>\n\n <CardBody\n variant=\"dark\"\n title={title}\n placeholderTitle={placeholderTitle}\n mimeType={mimeType}\n detail={detail}\n statusBadge={\n <PurchaseStatusBadge\n isMine={true}\n paymentStatus={paymentStatus}\n amountText={amountText}\n />\n }\n icon={isGallery ? galleryBodyIcon('dark') : undefined}\n />\n </MediaShell>\n )\n}\n\n/**\n * The recipient's ('other') view of a paid media attachment: the locked\n * thumbnail (single or gallery) with an Unlock/Download CTA. The source is\n * revealed by fetching once — on click when already paid, or automatically\n * the first time a paid card scrolls into view.\n */\nconst OtherMediaCard: React.FC<MediaCardOtherProps> = ({\n title,\n amountText,\n thumbnailUrl,\n mimeType = 'application/octet-stream',\n detail,\n gallery = [],\n onUnlockClick,\n onFetchSource,\n onDownloadClick,\n paymentStatus,\n isUnlocking = false,\n}) => {\n const isGallery = isGalleryCard(gallery)\n\n const { source, cardRef, handleUnlockClick } = useReceivedSource({\n paymentStatus,\n onFetchSource,\n onUnlockClick,\n })\n\n const effectiveSourceUrl = source?.sourceUrl\n const effectiveRedeemUrl = source?.redeemUrl\n\n // For gallery, the per-item sources are carried by `gallery` itself, so\n // the lock state is driven by paymentStatus rather than the single\n // `effectiveSourceUrl`. Everything else still respects the source fetch.\n const isLocked = isGallery\n ? paymentStatus !== 'paid'\n : effectiveSourceUrl === undefined\n const sourceType = getSourceType(mimeType)\n\n // For gallery, ReceivedCardActions falls back to a plain <button>\n // (no anchor) because the gallery has no single sourceUrl to link to —\n // the per-item sources live on `gallery` itself.\n const actionSourceUrl = isGallery ? undefined : effectiveSourceUrl\n\n return (\n <MediaShell\n variant=\"light\"\n rootRef={cardRef}\n data-testid=\"locked-attachment\"\n >\n <CardThumbnail\n variant=\"light\"\n gallery={gallery}\n title={title}\n showLocked={isLocked}\n paymentStatus={paymentStatus}\n mimeType={mimeType}\n thumbnailUrl={thumbnailUrl}\n source={source}\n containedImage={!isLocked && sourceType === 'document'}\n />\n\n <CardBody\n variant=\"light\"\n title={title}\n mimeType={mimeType}\n detail={detail}\n statusBadge={\n <PurchaseStatusBadge\n isMine={false}\n paymentStatus={paymentStatus}\n amountText={amountText}\n />\n }\n icon={isGallery ? galleryBodyIcon('light') : undefined}\n action={\n <ReceivedCardActions\n isLocked={isLocked}\n isUnlocking={isUnlocking}\n sourceUrl={actionSourceUrl}\n redeemUrl={effectiveRedeemUrl}\n onUnlockClicked={handleUnlockClick}\n onDownloadClicked={onDownloadClick}\n />\n }\n />\n </MediaShell>\n )\n}\n\n/**\n * The card either party sees for a paid media attachment. `isDraft`/`isPreview`\n * select the composer's own drafting view / a static receiver-side mockup;\n * otherwise `isMine` selects the sender's sent view vs. the recipient's\n * unlock/download view.\n */\nconst MediaCard: React.FC<MediaCardProps> = (props) => {\n if (props.isDraft) {\n return <DraftMediaCard {...props} />\n } else if (props.isPreview) {\n return <PreviewMediaCard {...props} />\n } else if (props.isMine) {\n return <OwnMediaCard {...props} />\n } else {\n return <OtherMediaCard {...props} />\n }\n}\n\nexport default MediaCard\n"],"names":["CardBody","variant","title","placeholderTitle","mimeType","detail","statusBadge","action","icon","trailingAction","isDark","displayTitle","titleDimmed","typeIcon","renderTypeIcon","classNames","jsxs","jsx","LockBadge","paymentStatus","isPlayable","isLocked","sourceType","getSourceType","Icon","PlayIcon","LockOpenIcon","LockSimpleIcon","isPlayableItem","item","GalleryThumbnail","gallery","showLocked","topRight","index","setIndex","useState","total","safeIndex","current","isVideoItem","goPrev","e","i","goNext","atStart","atEnd","AttachmentThumbnail","React","CaretLeftIcon","CaretRightIcon","SingleThumbnail","thumbnailUrl","source","containedImage","effectiveSourceUrl","effectiveThumbnailUrl","isGalleryCard","galleryBodyIcon","ImagesIcon","CardThumbnail","MediaShell","children","rootRef","dataTestId","PreviewToggle","onToggle","isBusy","isPreviewVisible","usePreviewToggle","isGallery","onFetchSource","onPreviewClick","setSource","setIsPreviewVisible","isLoadingPreview","setIsLoadingPreview","fetchingRef","useRef","handleToggle","useCallback","result","togglePreview","useReceivedSource","onUnlockClick","cardRef","onFetchSourceRef","fetchSource","_a","handleUnlockClick","useEffect","observer","entry","buttonClass","ReceivedCardActions","sourceUrl","redeemUrl","onUnlockClicked","onDownloadClicked","isUnlocking","LoadingDots","href","DownloadSimpleIcon","DraftMediaCard","amountText","placeholderAmountText","onDismiss","onEditClick","dismissButton","XIcon","editButton","PencilSimpleIcon","PreviewMediaCard","OwnMediaCard","PurchaseStatusBadge","OtherMediaCard","onDownloadClick","effectiveRedeemUrl","actionSourceUrl","MediaCard","props"],"mappings":"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"}
|