@linktr.ee/messaging-react 1.26.1 → 1.27.0

package/src/components/LockedAttachment/LockedAttachment.stories.tsx

@@ -0,0 +1,249 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import LockedAttachment, { type VisitorCardProps } from '.'
+
+const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
+const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
+const VIDEO_SOURCE = '/video-source.mp4'
+
+const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
+const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
+const IMAGE_SOURCE = '/image-source.jpg'
+
+const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
+const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
+const DOCUMENT_SOURCE = '/document-source.pdf'
+
+const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
+const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
+const AUDIO_SOURCE = '/audio-source.mp3'
+
+const meta: Meta = {
+  title: 'Components/LockedAttachment',
+  component: LockedAttachment,
+  parameters: { layout: 'centered' },
+}
+export default meta
+
+type InteractiveProps = Omit<VisitorCardProps, 'onUnlock' | 'onDownload'> & {
+  unlockedSource: string
+  unlockedPoster?: string
+}
+
+const Interactive = ({ unlockedSource, unlockedPoster, ...props }: InteractiveProps) => (
+  <LockedAttachment
+    {...props}
+    onUnlock={async () => {
+      await new Promise(resolve => setTimeout(resolve, 1000))
+      const res = await fetch(unlockedSource)
+      const blob = await res.blob()
+      return { source: URL.createObjectURL(blob), poster: unlockedPoster }
+    }}
+    onDownload={() => {}}
+  />
+)
+
+const VARIANTS = [
+  { label: 'Video', title: "Alicia's Workout Plan", mimeType: 'video/mp4', detail: '1:20', poster: VIDEO_THUMBNAIL, thumbnail: VIDEO_THUMBNAIL_BLURRED, source: VIDEO_SOURCE },
+  { label: 'Audio', title: 'Morning Meditation', mimeType: 'audio/mpeg', detail: '4:35', poster: AUDIO_THUMBNAIL, thumbnail: AUDIO_THUMBNAIL_BLURRED, source: AUDIO_SOURCE },
+  { label: 'Image', title: 'Picture of my cat', mimeType: 'image/jpeg', detail: '3.2 MB', poster: IMAGE_THUMBNAIL, thumbnail: IMAGE_THUMBNAIL_BLURRED, source: IMAGE_SOURCE },
+  { label: 'Document', title: 'Strength Training Guide', mimeType: 'application/zip', detail: '14 files', poster: DOCUMENT_THUMBNAIL, thumbnail: DOCUMENT_THUMBNAIL_BLURRED, source: DOCUMENT_SOURCE },
+  { label: 'Unknown', title: 'Unknown Attachment', mimeType: 'application/octet-stream', detail: undefined, poster: undefined, thumbnail: undefined, source: DOCUMENT_SOURCE },
+]
+
+const NO_POSTER_VARIANTS = [
+  { label: 'Video', title: "Alicia's Workout Plan", mimeType: 'video/mp4', detail: '1:20', source: VIDEO_SOURCE },
+  { label: 'Audio', title: 'Morning Meditation', mimeType: 'audio/mpeg', detail: '4:35', source: AUDIO_SOURCE },
+  { label: 'Image', title: 'Picture of my cat', mimeType: 'image/jpeg', detail: '3.2 MB', source: IMAGE_SOURCE },
+  { label: 'Document', title: 'Strength Training Guide', mimeType: 'application/zip', detail: '14 files', source: DOCUMENT_SOURCE },
+]
+
+const Table = ({ children }: { children: React.ReactNode }) => (
+  <div className="p-12">
+    <table className="border-separate border-spacing-4">
+      {children}
+    </table>
+  </div>
+)
+
+const TableHead = ({ variants }: { variants: { label: string; mimeType: string }[] }) => (
+  <thead>
+    <tr>
+      <th className="text-left text-xs font-medium text-black/40 pb-2" />
+      {variants.map(({ label, mimeType }) => (
+        <th key={mimeType} className="text-left text-xs font-medium text-black/40 pb-2">{label}</th>
+      ))}
+    </tr>
+  </thead>
+)
+
+export const Visitor: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
+    <tbody>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Locked</td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, poster, source }) => (
+          <td key={mimeType} className="align-top">
+            <Interactive
+              title={title}
+              amountText="AU$9.99"
+              thumbnail={thumbnail}
+              poster={poster}
+              mimeType={mimeType}
+              detail={detail}
+              unlockedSource={source}
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Purchased</td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, poster, source }) => (
+          <td key={mimeType} className="align-top">
+            <Interactive
+              title={title}
+              amountText="AU$9.99"
+              thumbnail={thumbnail}
+              unlockedPoster={poster}
+              mimeType={mimeType}
+              detail={detail}
+              unlockedSource={source}
+              paymentStatus="paid"
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Unlocked</td>
+        {VARIANTS.map(({ title, mimeType, detail, poster, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              title={title}
+              poster={poster}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+              paymentStatus="paid"
+              onDownload={() => {}}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export const Creator: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
+    <tbody>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Preview</td>
+        {VARIANTS.map(({ mimeType, detail, thumbnail, poster, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              isCreator
+              thumbnail={thumbnail}
+              poster={poster}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              placeholderAmountText="A$0.00"
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Sent</td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, poster, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              isCreator
+              title={title}
+              thumbnail={thumbnail}
+              poster={poster}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Sold</td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnail, poster, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              isCreator
+              title={title}
+              thumbnail={thumbnail}
+              poster={poster}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+              paymentStatus="paid"
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export const NoPoster: StoryFn = () => (
+  <Table>
+    <TableHead variants={NO_POSTER_VARIANTS} />
+    <tbody>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Creator</td>
+        {NO_POSTER_VARIANTS.map(({ title, mimeType, detail, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              isCreator
+              title={title}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Locked</td>
+        {NO_POSTER_VARIANTS.map(({ title, mimeType, detail, source }) => (
+          <td key={mimeType} className="align-top">
+            <Interactive
+              title={title}
+              amountText="AU$9.99"
+              mimeType={mimeType}
+              detail={detail}
+              unlockedSource={source}
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Unlocked</td>
+        {NO_POSTER_VARIANTS.map(({ title, mimeType, detail, source }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment
+              title={title}
+              source={source}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+              paymentStatus="paid"
+              onDownload={() => {}}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </Table>
+)

package/src/components/LockedAttachment/components/Creator.tsx

@@ -0,0 +1,171 @@
+import { CheckCircleIcon, EyeIcon, EyeSlashIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useState } from 'react'
+
+import type { LockedAttachmentBaseProps, PaymentStatus } from '../types'
+import { renderTypeIcon } from '../utils/icons'
+import { getSourceType, type AttachmentSourceType } from '../utils/mimeType'
+
+import MediaPlayer from './MediaPlayer'
+
+export interface CreatorCardProps extends LockedAttachmentBaseProps {
+  title?: string
+  placeholderTitle?: string
+  placeholderAmountText?: string
+}
+
+const CloseButton = ({ onClose }: { onClose: () => void }) => (
+  <button
+    type="button"
+    onClick={onClose}
+    className="absolute right-3 top-3 z-40 flex size-8 items-center justify-center rounded-full bg-black/60 text-white"
+    aria-label="Close preview"
+  >
+    <EyeIcon className="size-4" weight="fill" />
+  </button>
+)
+
+interface CollapsedThumbnailProps {
+  thumbnail?: string
+  mimeType: string
+  canExpand: boolean
+  onExpand: () => void
+}
+
+const CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = ({ thumbnail, mimeType, canExpand, onExpand }) => {
+  return (
+    <button
+      type="button"
+      disabled={!canExpand}
+      className={classNames('relative aspect-video block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none', { 'cursor-pointer': canExpand, 'cursor-default': !canExpand })}
+      onClick={onExpand}
+      aria-label={canExpand ? 'Expand attachment preview' : undefined}
+    >
+      {thumbnail
+        ? <img src={thumbnail} alt="" className="absolute inset-0 h-full w-full object-cover" />
+        : <div className="absolute inset-0 flex items-center justify-center">{renderTypeIcon(mimeType, { className: 'size-12 text-black/20', weight: 'regular' })}</div>
+      }
+      {canExpand && (
+        <div className="pointer-events-none absolute right-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white">
+          <EyeSlashIcon className="size-4" weight="fill" />
+        </div>
+      )}
+    </button>
+  )
+}
+
+interface ExpandedMediaProps {
+  source: string
+  mimeType: string
+  sourceType: AttachmentSourceType
+  poster?: string
+  thumbnail?: string
+  title?: string
+  onCollapse: () => void
+}
+
+const getExpandedImgSrc = (sourceType: AttachmentSourceType, source: string, poster?: string, thumbnail?: string) =>
+  sourceType === 'document' ? (poster ?? thumbnail) : source
+
+const ExpandedMedia: React.FC<ExpandedMediaProps> = ({ source, mimeType, sourceType, poster, thumbnail, title, onCollapse }) => {
+  if (sourceType === 'video' || sourceType === 'audio') {
+    return (
+      <div className="relative">
+        <MediaPlayer
+          source={source}
+          mimeType={mimeType}
+          poster={poster ?? thumbnail}
+          autoPlay
+          loop
+          controls={false}
+          showProgress
+          onContainerClick={onCollapse}
+          muted={sourceType === 'video'}
+        />
+        <CloseButton onClose={onCollapse} />
+      </div>
+    )
+  }
+  const imgSrc = getExpandedImgSrc(sourceType, source, poster, thumbnail)
+  return (
+    <div className="relative">
+      <button type="button" className="block w-full cursor-pointer border-0 p-0 text-left appearance-none" onClick={onCollapse} aria-label="Close preview">
+        <img src={imgSrc} alt={title ?? ''} className="block w-full" />
+      </button>
+      <CloseButton onClose={onCollapse} />
+    </div>
+  )
+}
+
+interface CreatorCardMetaProps {
+  title?: string
+  placeholderTitle: string
+  mimeType: string
+  detail?: string
+  paymentStatus?: PaymentStatus
+  displayAmountText?: string
+  isPlaceholderAmount: boolean
+}
+
+const CreatorCardMeta: React.FC<CreatorCardMetaProps> = ({ title, placeholderTitle, mimeType, detail, paymentStatus, displayAmountText, isPlaceholderAmount }) => {
+  return (
+    <div className="px-4 pb-3 pt-3">
+      <p className={classNames('mb-1.5 truncate text-base font-medium', { 'text-black/30': !title, 'text-black': !!title })}>
+        {title || placeholderTitle}
+      </p>
+      <div className="flex items-center gap-1">
+        {renderTypeIcon(mimeType, { className: 'size-5 shrink-0 text-black/55', weight: 'regular' })}
+        {detail && <span className="text-xs font-medium text-black/55">{detail}</span>}
+        {paymentStatus === 'paid' ? (
+          <>
+            <span className="text-xs font-medium text-black/55">•</span>
+            <span className="text-xs font-medium text-[#008236]">Purchased</span>
+            <CheckCircleIcon className="size-4 text-[#008236]" weight="bold" />
+          </>
+        ) : displayAmountText && (
+          <>
+            <span className={classNames('text-xs font-medium', { 'text-black/30': isPlaceholderAmount, 'text-black/55': !isPlaceholderAmount })}>•</span>
+            <span className={classNames('text-xs font-medium', { 'text-black/30': isPlaceholderAmount, 'text-black/55': !isPlaceholderAmount })}>{displayAmountText}</span>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const CreatorCard: React.FC<CreatorCardProps> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnail,
+  poster,
+  source,
+  detail,
+  amountText,
+  placeholderTitle = 'Attachment title',
+  placeholderAmountText,
+  paymentStatus,
+}) => {
+  const sourceType = getSourceType(mimeType)
+  const [expanded, setExpanded] = useState(false)
+
+  const displayAmountText = placeholderAmountText ?? amountText
+  const isPlaceholderAmount = !!placeholderAmountText
+  const canExpand = sourceType === 'document'
+    ? !!(source && (poster || thumbnail))
+    : !!source
+
+  const collapse = () => setExpanded(false)
+
+  const mediaPreview = expanded && source
+    ? <ExpandedMedia source={source} mimeType={mimeType} sourceType={sourceType} poster={poster} thumbnail={thumbnail} title={title} onCollapse={collapse} />
+    : <CollapsedThumbnail thumbnail={thumbnail} mimeType={mimeType} canExpand={canExpand} onExpand={() => setExpanded(true)} />
+
+  return (
+    <div className="w-[280px] overflow-hidden rounded-3xl bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)]">
+      {mediaPreview}
+      <CreatorCardMeta title={title} placeholderTitle={placeholderTitle} mimeType={mimeType} detail={detail} paymentStatus={paymentStatus} displayAmountText={displayAmountText} isPlaceholderAmount={isPlaceholderAmount} />
+    </div>
+  )
+}
+
+export default CreatorCard