File size: 1,314 Bytes
5cc7f12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
"use client"

import React, { useEffect } from "react"

import { cn } from "@/lib/utils/cn"
import { MediaInfo } from "@/types/general"
import { theSimps } from "@/app/latent/samples"
import { useChildController } from "./useChildController"
import { useSetupIframeOnce } from "./useSetupIframeOnce"

function LatentEngineClapper({
  media,
  width,
  height,
  className = "" }: {
  media: MediaInfo
  width?: number
  height?: number
  className?: string
}) {
  // only call this once per iframe
  useSetupIframeOnce()

  const hasLoadedBellhop = useChildController(s => s.hasLoadedBellhop)
  const sendMessage = useChildController(s => s.sendMessage)

  useEffect(() => {
    console.log('connected to the iframe player, now loading the prompt..')
    sendMessage('loadPrompt', { prompt: theSimps })
  }, [media.id, hasLoadedBellhop])

  return (
    <div
      style={{ width, height }}
      className={cn(`
      relative
      flex flex-col
      items-center justify-between
      w-full h-full
      rounded-xl overflow-hidden
      bg-black
      `, className)}>
      <iframe
        className="pointer-events-auto"
        width={width}
        height={height}
        src={`http://localhost:3000/embed?clap=/samples/claps/wasteland.clap`}
      />
    </div>
  );
}

export default LatentEngineClapper