@linktr.ee/messaging-react 1.37.0 → 1.38.0

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

@@ -1,114 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-
-import { renderTypeIcon } from '../../utils/icons'
-import { getSourceType } from '../../utils/mimeType'
-import MediaPlayer from '../MediaPlayer'
-
-interface CardThumbnailProps {
-  title?: string
-  sourceUrl?: string
-  thumbnailUrl?: string
-  mimeType: string
-  onToggle?: () => void
-}
-
-const CardThumbnail: React.FC<CardThumbnailProps> = ({
-  title,
-  sourceUrl,
-  thumbnailUrl,
-  mimeType,
-  onToggle,
-}) => {
-  const isExpanded = onToggle && sourceUrl && thumbnailUrl
-
-  return (
-    <button
-      type="button"
-      disabled={!onToggle}
-      className={classNames(
-        '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}
-      aria-label={onToggle ? 'Toggle preview' : undefined}
-    >
-      {isExpanded ? (
-        <ThumbnailMedia
-          sourceUrl={sourceUrl}
-          thumbnailUrl={thumbnailUrl}
-          mimeType={mimeType}
-        />
-      ) : thumbnailUrl ? (
-        <div className="aspect-video overflow-hidden">
-          <img
-            src={thumbnailUrl}
-            alt={title}
-            draggable={false}
-            className="absolute inset-0 h-full w-full object-cover"
-          />
-        </div>
-      ) : (
-        <div className="aspect-video flex items-center justify-center">
-          {renderTypeIcon(mimeType, {
-            className: 'size-12 text-white/20',
-            weight: 'regular',
-          })}
-        </div>
-      )}
-
-      {!isExpanded && (
-        <div className="pointer-events-none absolute inset-0 bg-black/30" />
-      )}
-    </button>
-  )
-}
-
-interface ThumbnailMediaProps {
-  sourceUrl: string
-  thumbnailUrl: string
-  mimeType: string
-}
-
-const ThumbnailMedia: React.FC<ThumbnailMediaProps> = ({
-  sourceUrl,
-  thumbnailUrl,
-  mimeType,
-}) => {
-  const sourceType = getSourceType(mimeType)
-
-  if (sourceType === 'video' || sourceType === 'audio') {
-    return (
-      <MediaPlayer
-        mimeType={mimeType}
-        source={sourceUrl}
-        poster={thumbnailUrl}
-        autoPlay={true}
-        loop={true}
-        controls={true}
-        muted={false}
-      />
-    )
-  }
-
-  if (sourceType === 'image') {
-    return (
-      <img src={sourceUrl} alt="" className="block w-full" draggable={false} />
-    )
-  }
-
-  if (sourceType === 'document') {
-    return (
-      <img
-        src={thumbnailUrl}
-        alt=""
-        className="block w-full"
-        draggable={false}
-      />
-    )
-  }
-
-  return null
-}
-
-export default CardThumbnail

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

@@ -1,81 +0,0 @@
-import { LockOpenIcon, LockSimpleIcon } from '@phosphor-icons/react'
-import React, { useState } from 'react'
-
-import { PaymentStatus } from '../../types'
-import { renderTypeIcon } from '../../utils/icons'
-import { getSourceType } from '../../utils/mimeType'
-import MediaPlayer from '../MediaPlayer'
-
-interface CardThumbnailProps {
-  title?: string
-  sourceUrl?: string
-  thumbnailUrl?: string
-  mimeType: string
-  paymentStatus?: PaymentStatus
-}
-
-const CardThumbnail: React.FC<CardThumbnailProps> = ({
-  title,
-  sourceUrl,
-  thumbnailUrl,
-  mimeType,
-  paymentStatus,
-}) => {
-  const [sourceReady, setSourceReady] = useState(false)
-
-  const isLocked = sourceUrl === undefined
-  const sourceType = getSourceType(mimeType)
-
-  if (!isLocked) {
-    if (sourceType === 'audio' || sourceType === 'video') {
-      return (
-        <MediaPlayer
-          source={sourceUrl}
-          poster={thumbnailUrl}
-          mimeType={mimeType}
-        />
-      )
-    }
-
-    return (
-      <div className="relative aspect-video overflow-hidden bg-black/5">
-        <img
-          src={sourceType === 'document' ? thumbnailUrl : sourceUrl}
-          alt={title}
-          className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
-          draggable={false}
-          onLoad={() => setSourceReady(true)}
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className="relative aspect-video overflow-hidden bg-black/5">
-      {thumbnailUrl != null ? (
-        <img
-          src={thumbnailUrl}
-          alt=""
-          className="absolute inset-0 h-full w-full object-cover"
-          draggable={false}
-        />
-      ) : (
-        <div className="absolute inset-0 flex items-center justify-center">
-          {renderTypeIcon(mimeType, {
-            className: 'size-12 text-black/20',
-            weight: 'regular',
-          })}
-        </div>
-      )}
-      {isLocked && (
-        <div className="absolute inset-0 bg-black/30">
-          <div className="absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white">
-            {paymentStatus === 'paid' ? <LockOpenIcon /> : <LockSimpleIcon />}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default CardThumbnail