@linktr.ee/messaging-react 1.33.3 → 1.35.0-rc-1777516745

package/src/components/CustomTypingIndicator/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import type { Event } from 'stream-chat'
+import {
+  useChannelStateContext,
+  useChatContext,
+  useTypingContext,
+} from 'stream-chat-react'
+
+import { Avatar } from '../Avatar'
+
+interface CustomTypingIndicatorProps {
+  threadList?: boolean
+}
+
+const Circle = ({ cx, index }: { cx: string; index: number }) => (
+  <circle className="fill-pebble" cx={cx} cy="4" r="3.9">
+    <animateTransform
+      attributeName="transform"
+      type="translate"
+      values="0 0; 0 -2.25; 0 0;"
+      dur="900ms"
+      begin={`${120 * index}ms`} // 0ms, 120ms, 240ms
+      repeatCount="indefinite"
+    />
+  </circle>
+)
+
+const CustomTypingIndicator = ({ threadList }: CustomTypingIndicatorProps) => {
+  const { channel, channelConfig, thread } = useChannelStateContext()
+  const { client } = useChatContext()
+  const { typing = {} } = useTypingContext()
+
+  if (channelConfig?.typing_events === false) {
+    return null
+  }
+
+  const typingInChannel = !threadList
+    ? Object.values(typing).filter(
+        ({ parent_id, user }: Event) =>
+          user?.id !== client.user?.id && !parent_id
+      )
+    : []
+
+  const typingInThread = threadList
+    ? Object.values(typing).filter(
+        ({ parent_id, user }: Event) =>
+          user?.id !== client.user?.id && parent_id === thread?.id
+      )
+    : []
+
+  const typingUsers = threadList ? typingInThread : typingInChannel
+  if (!typingUsers.length) {
+    return null
+  }
+
+  const typingUser = typingUsers[0]?.user
+  const memberUser =
+    typingUser?.id && channel.state.members[typingUser.id]
+      ? channel.state.members[typingUser.id].user
+      : undefined
+
+  const avatarId = typingUser?.id ?? memberUser?.id ?? 'typing-user'
+  const avatarName =
+    typingUser?.name ?? memberUser?.name ?? typingUser?.id ?? 'Typing user'
+  const avatarImage = typingUser?.image ?? memberUser?.image
+
+  return (
+    <div
+      className="str-chat__typing-indicator !items-end"
+      data-testid="typing-indicator"
+      style={{ insetInlineStart: 0, insetInlineEnd: 'auto' }}
+    >
+      <div className="shrink-0" aria-hidden="true">
+        <Avatar
+          id={avatarId}
+          name={avatarName}
+          image={avatarImage}
+          size={24}
+          shape="circle"
+        />
+      </div>
+
+      <div className="px-4 py-3 rounded-lg bg-[#F1F0EE] h-12 flex flex-col justify-end">
+        <svg
+          aria-hidden="true"
+          className="block overflow-visible"
+          viewBox="0 0 32 8"
+          width="32"
+          height="8"
+          overflow="visible"
+        >
+          <Circle cx="4" index={0} />
+          <Circle cx="16" index={1} />
+          <Circle cx="28" index={2} />
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+export default CustomTypingIndicator

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

@@ -20,8 +20,8 @@ const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
 const AUDIO_SOURCE = '/audio-source.mp3'
 
 const meta: Meta = {
-  title: 'Components/LockedAttachment',
-  parameters: { layout: 'centered' },
+  title: 'LockedAttachment',
+  parameters: { layout: 'fullscreen' },
 }
 export default meta
 
@@ -62,10 +62,19 @@ const VARIANTS = [
     thumbnailUnlockedUrl: DOCUMENT_THUMBNAIL,
     sourceUrl: DOCUMENT_SOURCE,
   },
+  {
+    label: 'Unknown',
+    title: 'Unknown Attachment',
+    mimeType: 'application/octet-stream',
+    detail: '2.4 MB',
+    thumbnailUrl: undefined,
+    thumbnailUnlockedUrl: undefined,
+    sourceUrl: DOCUMENT_SOURCE,
+  },
 ]
 
 const Table = ({ children }: { children: React.ReactNode }) => (
-  <div className="p-12">
+  <div className="min-h-screen w-full p-12 bg-[#F9F7F4]">
     <table className="border-separate border-spacing-4">{children}</table>
   </div>
 )
@@ -90,8 +99,9 @@ const TableHead = ({
   </thead>
 )
 
-export const Visitor: StoryFn = () => {
+export const Received: StoryFn = () => {
   const [isPaid, setPaid] = useState<string | undefined>()
+  const [isUnlocking, setUnlocking] = useState<string | undefined>()
 
   return (
     <Table>
@@ -118,38 +128,24 @@ export const Visitor: StoryFn = () => {
                   detail={detail}
                   paymentStatus={isPaid === mimeType ? 'paid' : undefined}
                   amountText="AU$9.99"
-                  onUnlockClick={() => setPaid(mimeType)}
-                  onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => {
-                    return Promise.resolve({
-                      sourceUrl: sourceUrl,
-                      thumbnailUrl: thumbnailUnlockedUrl,
-                    })
+                  isUnlocking={isUnlocking === mimeType}
+                  onUnlockClick={() => {
+                    setUnlocking(mimeType)
+                    setTimeout(() => {
+                      setUnlocking(undefined)
+                      setPaid(mimeType)
+                    }, 1500)
                   }}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => ({
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  })}
                 />
               </td>
             )
           )}
         </tr>
-        <tr>
-          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-            Purchased
-          </td>
-          {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
-            <td key={mimeType} className="align-top">
-              <LockedAttachment.Visitor
-                title={title}
-                thumbnailUrl={thumbnailUrl}
-                mimeType={mimeType}
-                detail={detail}
-                amountText="AU$9.99"
-                paymentStatus="paid"
-                onUnlockClick={() => alert('Unlock clicked')}
-                onDownloadClick={() => alert('Download clicked')}
-              />
-            </td>
-          ))}
-        </tr>
         <tr>
           <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
             Unlocked
@@ -171,15 +167,12 @@ export const Visitor: StoryFn = () => {
                   detail={detail}
                   amountText="AU$9.99"
                   paymentStatus="paid"
-                  onUnlockClick={() => console.log('Unlock clicked')}
+                  onUnlockClick={() => alert('Unlock clicked')}
                   onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => {
-                    await new Promise((resolve) => setTimeout(resolve, 500))
-                    return Promise.resolve({
-                      sourceUrl: sourceUrl,
-                      thumbnailUrl: thumbnailUnlockedUrl,
-                    })
-                  }}
+                  onFetchSource={async () => ({
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  })}
                 />
               </td>
             )
@@ -190,7 +183,7 @@ export const Visitor: StoryFn = () => {
   )
 }
 
-export const Creator: StoryFn = () => (
+export const Sent: StoryFn = () => (
   <Table>
     <TableHead variants={VARIANTS} />
     <tbody>
@@ -213,10 +206,13 @@ export const Creator: StoryFn = () => (
                 thumbnailUrl={thumbnailUrl}
                 mimeType={mimeType}
                 detail={detail}
-                onPreviewClick={() => ({
-                  sourceUrl: sourceUrl,
-                  thumbnailUrl: thumbnailUnlockedUrl,
-                })}
+                onFetchSource={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1500))
+                  return {
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  }
+                }}
               />
             </td>
           )
@@ -243,34 +239,66 @@ export const Creator: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sent
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Creator
-              title={title}
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              amountText="AU$9.99"
-            />
-          </td>
-        ))}
+        {VARIANTS.map(
+          ({
+            title,
+            mimeType,
+            detail,
+            thumbnailUrl,
+            thumbnailUnlockedUrl,
+            sourceUrl,
+          }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Creator
+                title={title}
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                onFetchSource={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1500))
+                  return {
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  }
+                }}
+              />
+            </td>
+          )
+        )}
       </tr>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sold
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Creator
-              title={title}
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              amountText="AU$9.99"
-              paymentStatus="paid"
-            />
-          </td>
-        ))}
+        {VARIANTS.map(
+          ({
+            title,
+            mimeType,
+            detail,
+            thumbnailUrl,
+            thumbnailUnlockedUrl,
+            sourceUrl,
+          }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Creator
+                title={title}
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                paymentStatus="paid"
+                onFetchSource={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1500))
+                  return {
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  }
+                }}
+              />
+            </td>
+          )
+        )}
       </tr>
     </tbody>
   </Table>

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

@@ -7,7 +7,7 @@ import {
   XIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 
 import type {
   LockedAttachmentBaseProps,
@@ -21,8 +21,10 @@ import CardThumbnail from './CardThumbnail'
 export interface CreatorCardProps extends LockedAttachmentBaseProps {
   placeholderTitle?: string
   placeholderAmountText?: string
+  isUnlocking?: boolean
   onDismiss?: () => void
-  onPreviewClick?: () => LockedAttachmentSource
+  onPreviewClick?: () => void
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
 }
 
 const CreatorCard: React.FC<CreatorCardProps> = ({
@@ -34,29 +36,56 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
   placeholderTitle = 'Attachment title',
   placeholderAmountText,
   paymentStatus,
+  isUnlocking,
   onDismiss,
   onPreviewClick,
+  onFetchSource,
 }) => {
   const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-
-  const effectiveSourceUrl = source?.sourceUrl
-  const effectiveThumbnailUrl = source?.thumbnailUrl ?? thumbnailUrl
-
-  const handleToggle = useCallback(() => {
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
+  const [isLoadingPreview, setLoadingPreview] = useState(false)
+  const fetchingRef = useRef(false)
+
+  const effectiveSourceUrl = isPreviewVisible ? source?.sourceUrl : undefined
+  const effectiveThumbnailUrl = isPreviewVisible ? (source?.thumbnailUrl ?? thumbnailUrl) : thumbnailUrl
+  const isBusy = isLoadingPreview || isUnlocking
+
+  const handleToggle = useCallback(async () => {
+    onPreviewClick?.()
+    if (isPreviewVisible) {
+      setIsPreviewVisible(false)
+      return
+    }
     if (source) {
-      setSource(undefined)
-    } else if (onPreviewClick) {
-      setSource(onPreviewClick())
+      setIsPreviewVisible(true)
+      return
     }
-  }, [source, onPreviewClick])
+    if (!onFetchSource) return
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    setLoadingPreview(true)
+    try {
+      const result = await onFetchSource()
+      if (result) {
+        setSource(result)
+        setIsPreviewVisible(true)
+      }
+    } finally {
+      fetchingRef.current = false
+      setLoadingPreview(false)
+    }
+  }, [isPreviewVisible, source, onPreviewClick, onFetchSource])
+
+  const toggleHandler = onFetchSource || onPreviewClick ? handleToggle : undefined
 
   return (
-    <div className="relative w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]">
+    <div className="relative w-[280px] select-none overflow-hidden rounded-[24px] bg-[#121110] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]">
       <CardHeader
         onDismiss={onDismiss}
-        onToggle={onPreviewClick ? handleToggle : undefined}
-        isExpanded={!!source}
+        onToggle={isBusy ? undefined : toggleHandler}
+        isExpanded={isPreviewVisible}
         paymentStatus={paymentStatus}
+        isLoading={isBusy}
       />
 
       <CardThumbnail
@@ -64,12 +93,12 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
         sourceUrl={effectiveSourceUrl}
         thumbnailUrl={effectiveThumbnailUrl}
         mimeType={mimeType}
-        onToggle={onPreviewClick ? handleToggle : undefined}
+        onToggle={isBusy ? undefined : toggleHandler}
       />
 
-      <div className="px-4 pb-3 pt-3 bg-black">
+      <div className="px-4 pb-3 pt-3">
         <p
-          className={classNames('mb-1.5 truncate text-base font-medium', {
+          className={classNames('mb-0.5 truncate text-base font-medium', {
             'text-white/30': !title,
             'text-white': !!title,
           })}
@@ -90,11 +119,8 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
           {paymentStatus === 'paid' ? (
             <React.Fragment>
               <span className="text-xs font-medium text-white/55">&bull;</span>
-              <span className="text-xs font-medium text-[#4ade80]">Sold</span>
-              <CheckCircleIcon
-                className="size-4 text-[#4ade80]"
-                weight="bold"
-              />
+              <span className="text-xs font-medium text-[#34c759]">Sold</span>
+              <CheckCircleIcon className="size-4 text-[#34c759]" weight="bold" />
             </React.Fragment>
           ) : (
             <React.Fragment>
@@ -120,6 +146,7 @@ interface CardHeaderProps {
   onToggle?: () => void
   isExpanded?: boolean
   paymentStatus?: PaymentStatus
+  isLoading?: boolean
 }
 
 const CardHeader: React.FC<CardHeaderProps> = ({
@@ -127,6 +154,7 @@ const CardHeader: React.FC<CardHeaderProps> = ({
   onToggle,
   isExpanded,
   paymentStatus,
+  isLoading,
 }) => {
   if (onDismiss) {
     return (
@@ -160,7 +188,11 @@ const CardHeader: React.FC<CardHeaderProps> = ({
 
   return (
     <div className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3">
-      <Icon className="size-4" weight="fill" />
+      {isLoading ? (
+        <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+      ) : (
+        <Icon className="size-4" weight="fill" />
+      )}
     </div>
   )
 }

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

@@ -27,7 +27,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
       type="button"
       disabled={!onToggle}
       className={classNames(
-        'relative block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none',
+        'relative block w-full overflow-hidden border-0 bg-white/10 p-0 text-left appearance-none',
         { 'cursor-pointer': !!onToggle, 'cursor-default': !onToggle }
       )}
       onClick={onToggle}
@@ -51,7 +51,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
       ) : (
         <div className="aspect-video flex items-center justify-center">
           {renderTypeIcon(mimeType, {
-            className: 'size-12 text-black/20',
+            className: 'size-12 text-white/20',
             weight: 'regular',
           })}
         </div>

package/src/components/LockedAttachment/components/Visitor/Card.tsx

@@ -111,37 +111,30 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
         paymentStatus={paymentStatus}
       />
 
-      <div className="px-4 pb-3 pt-3 bg-black">
-        <p className="mb-1.5 truncate text-base font-medium text-white">
+      <div className="px-4 pb-3 pt-3">
+        <p className="mb-0.5 truncate text-base font-medium text-black">
           {title}
         </p>
         <div className="flex items-center gap-1">
           {renderTypeIcon(mimeType, {
-            className: 'size-5 shrink-0 text-white/55',
+            className: 'size-5 shrink-0 text-black/55',
             weight: 'regular',
           })}
 
           {detail && (
-            <span className="text-xs font-medium text-white/55">{detail}</span>
+            <span className="text-xs font-medium text-black/55">{detail}</span>
           )}
 
           {paymentStatus === 'paid' ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-white/55">&bull;</span>
-              <span className="text-xs font-medium text-[#4ade80]">
-                Purchased
-              </span>
-              <CheckCircleIcon
-                className="size-4 text-[#4ade80]"
-                weight="bold"
-              />
+              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span className="text-xs font-medium text-[#008236]">Purchased</span>
+              <CheckCircleIcon className="size-4 text-[#008236]" weight="bold" />
             </React.Fragment>
           ) : amountText != null ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-white/55">&bull;</span>
-              <span className="text-xs font-medium text-white/55">
-                {amountText}
-              </span>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span className="text-xs font-medium text-black/55">{amountText}</span>
             </React.Fragment>
           ) : null}
         </div>

package/src/components/LockedAttachment/components/Visitor/CardActions.tsx

@@ -26,10 +26,10 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
         type="button"
         onClick={onUnlockClicked}
         disabled={isUnlocking}
-        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none text-[#121110] hover:bg-white/90 disabled:opacity-70"
+        className="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] disabled:opacity-70"
       >
         {isUnlocking ? (
-          <LoadingDots />
+          <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
         ) : (
           <React.Fragment>
             <LockSimpleIcon className="size-4" weight="fill" />
@@ -47,7 +47,7 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
         target="_blank"
         rel="noopener noreferrer"
         onClick={onDownloadClicked}
-        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none !text-[#121110] hover:bg-white/90"
+        className="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]"
       >
         <DownloadSimpleIcon className="size-4" weight="bold" />
         Download
@@ -58,14 +58,5 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
   return null
 }
 
-const LoadingDots: React.FC = () => {
-  return (
-    <span className="flex items-center gap-1">
-      <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]" />
-      <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]" />
-      <span className="size-1 rounded-full bg-white animate-bounce" />
-    </span>
-  )
-}
 
 export default CardActions

package/src/components/LockedAttachment/components/Visitor/CardThumbnail.tsx

@@ -38,11 +38,11 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
     }
 
     return (
-      <div className="relative overflow-hidden bg-black/5">
+      <div className="relative aspect-video overflow-hidden bg-black/5">
         <img
           src={sourceType === 'document' ? thumbnailUrl : sourceUrl}
           alt={title}
-          className={`block w-full transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
+          className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
           draggable={false}
           onLoad={() => setSourceReady(true)}
         />