Thumbnails from PDF and Video

export function canvasToFile(
  canvas: HTMLCanvasElement,
  baseName: string,
  type: 'image/jpeg' | 'image/png' | 'image/webp' = 'image/jpeg',
  quality = 0.85,
): Promise<File> {
  return new Promise((resolve, reject) => {
    canvas.toBlob(
      (blob) => {
        if (!blob) return reject(new Error('썸네일 이미지를 만들지 못했습니다'))
        // 요청한 형식을 지원하지 않으면 PNG가 오므로 실제 type으로 확장자를 정합니다
        const extension = blob.type.split('/')[1]
        resolve(new File([blob], `${baseName}.${extension}`, { type: blob.type }))
      },
      type,
      quality, // JPEG와 WebP처럼 손실 압축 형식에만 쓰입니다
    )
  })
}

import { useEffect, useState } from 'react'

export function useObjectUrl(blob: Blob | null) {
  const [url, setUrl] = useState<string | null>(null)
  useEffect(() => {
    if (!blob) return setUrl(null)
    const next = URL.createObjectURL(blob)
    setUrl(next)
    return () => URL.revokeObjectURL(next)
  }, [blob])
  return url
}

type Rect = { x: number; y: number; width: number; height: number }

export function cropToCanvas(
  image: HTMLImageElement,
  crop: Rect, // 원본 픽셀 기준의 크롭 영역
  display: { width: number; height: number }, // 화면에 보일 CSS 크기
  density = 2,
): HTMLCanvasElement {
  const canvas = document.createElement('canvas')
  canvas.width = Math.round(display.width * density)
  canvas.height = Math.round(display.height * density)
  const context = canvas.getContext('2d')
  if (!context) throw new Error('2D 컨텍스트를 만들 수 없습니다')
  context.drawImage(
    image,
    crop.x, crop.y, crop.width, crop.height, // 원본에서 읽을 영역
    0, 0, canvas.width, canvas.height, // 출력 캔버스 전체
  )
  return canvas
}

// 크롭 화면을 열 때 const sourceUrl = URL.createObjectURL(file)
// 크롭 화면을 닫을 때 URL.revokeObjectURL(sourceUrl)

import { GlobalWorkerOptions, getDocument } from 'pdfjs-dist'
import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'

GlobalWorkerOptions.workerSrc = workerUrl

export async function renderPdfFirstPage(file: File, displayWidth: number, density = 2) {
  // TypedArray는 worker로 옮겨지며 소유권도 함께 넘어갑니다
  const loadingTask = getDocument({ data: new Uint8Array(await file.arrayBuffer()) })
  try {
    const pdf = await loadingTask.promise
    const page = await pdf.getPage(1)
    const base = page.getViewport({ scale: 1 })
    const viewport = page.getViewport({ scale: (displayWidth * density) / base.width })

    const canvas = document.createElement('canvas')
    canvas.width = Math.floor(viewport.width)
    canvas.height = Math.floor(viewport.height)
    await page.render({ canvas, viewport }).promise
    page.cleanup()
    return canvas
  } finally {
    await loadingTask.destroy() // 네트워크 요청을 끊고 worker를 정리합니다
  }
}

export async function captureVideoFrame(source: File | string, ratio = 0.1, width = 640) {
  const video = document.createElement('video')
  const url = typeof source === 'string' ? source : URL.createObjectURL(source)
  video.crossOrigin = 'anonymous' // 원격 영상은 src보다 먼저 지정합니다
  try {
    await once(video, 'loadedmetadata', () => { video.src = url })
    if (!Number.isFinite(video.duration)) throw new Error('길이를 알 수 없는 영상입니다')
    await once(video, 'seeked', () => { video.currentTime = video.duration * ratio })

    const canvas = document.createElement('canvas')
    canvas.width = width
    canvas.height = Math.round((width * video.videoHeight) / video.videoWidth)
    const context = canvas.getContext('2d')
    if (!context) throw new Error('2D 컨텍스트를 만들 수 없습니다')
    context.drawImage(video, 0, 0, canvas.width, canvas.height)
    return { canvas, duration: video.duration }
  } finally {
    video.removeAttribute('src')
    video.load()
    if (typeof source !== 'string') URL.revokeObjectURL(url)
  }
}

function once(media: HTMLMediaElement, type: string, start: () => void) {
  return new Promise<void>((resolve, reject) => {
    media.addEventListener(type, () => resolve(), { once: true })
    media.addEventListener('error', () => reject(media.error), { once: true })
    start()
  })
}