sim/apps/docs/components/ui/action-media.tsx at 47519e34d9768d759727a1d662d5405f43c79583 · simstudioai/sim · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
'use client'

import { useRef, useState } from 'react'
import { cn, getAssetUrl } from '@/lib/utils'
import { Lightbox } from './lightbox'

interface ActionImageProps {
  src: string
  alt: string
  enableLightbox?: boolean
}

interface ActionVideoProps {
  src: string
  alt: string
  enableLightbox?: boolean
}

export function ActionImage({ src, alt, enableLightbox = true }: ActionImageProps) {
  const [isLightboxOpen, setIsLightboxOpen] = useState(false)

  const handleClick = () => {
    if (enableLightbox) {
      setIsLightboxOpen(true)
    }
  }

  return (
    <>
      <img
        src={src}
        alt={alt}
        onClick={handleClick}
        className={cn(
          'inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700',
          enableLightbox && 'cursor-pointer transition-opacity hover:opacity-90'
        )}
      />
      {enableLightbox && (
        <Lightbox
          isOpen={isLightboxOpen}
          onClose={() => setIsLightboxOpen(false)}
          src={src}
          alt={alt}
          type='image'
        />
      )}
    </>
  )
}

export function ActionVideo({ src, alt, enableLightbox = true }: ActionVideoProps) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const startTimeRef = useRef(0)
  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
  const resolvedSrc = getAssetUrl(src)

  const handleClick = () => {
    if (enableLightbox) {
      startTimeRef.current = videoRef.current?.currentTime ?? 0
      setIsLightboxOpen(true)
    }
  }

  return (
    <>
      <video
        ref={videoRef}
        src={resolvedSrc}
        autoPlay
        loop
        muted
        playsInline
        onClick={handleClick}
        className={cn(
          'inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700',
          enableLightbox && 'cursor-pointer transition-opacity hover:opacity-90'
        )}
      />
      {enableLightbox && (
        <Lightbox
          isOpen={isLightboxOpen}
          onClose={() => setIsLightboxOpen(false)}
          src={src}
          alt={alt}
          type='video'
          startTime={startTimeRef.current}
        />
      )}
    </>
  )
}