Media Preview

import React, { useEffect, useState } from "react"

export const meta = {
  type: "fileHandler",
  componentName: "MediaPreview",
  fileHandler: {
    title: "Media Preview",
    description: "Preview image, audio, video and PDF files",
    extensions: [
      // images
      ".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp", ".ico", ".tiff",
      // audio
      ".mp3", ".wav", ".ogg", ".m4a", ".flac", ".aac",
      // video
      ".mp4", ".webm", ".ogg", ".mov", ".avi", ".mkv",
      // pdf
      ".pdf"
    ],
    icon: "🎬",
  },
}

function useFilePathFromHash() {
  const [filePath, setFilePath] = useState("")
  useEffect(() => {
    const updatePath = () => {
      const hash = window.location.hash
      const path = hash.startsWith("#") ? hash.substring(1) : hash
      setFilePath(path)
    }
    updatePath()
    window.addEventListener("hashchange", updatePath)
    return () => window.removeEventListener("hashchange", updatePath)
  }, [])
  return filePath
}

function getMediaType(filename) {
  const ext = filename.split('.').pop()?.toLowerCase()
  if (["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico", "tiff"].includes(ext)) return "image"
  if (["mp3", "wav", "ogg", "m4a", "flac", "aac"].includes(ext)) return "audio"
  if (["mp4", "webm", "ogg", "mov", "avi", "mkv"].includes(ext)) return "video"
  if (ext === "pdf") return "pdf"
  return "unknown"
}

export default function MediaPreview() {
  const [mediaUrl, setMediaUrl] = useState("")
  const [mediaType, setMediaType] = useState("unknown")
  const filePath = useFilePathFromHash()

  useEffect(() => {
    if (filePath) {
      setMediaUrl("/" + filePath)
      setMediaType(getMediaType(filePath))
    }
  }, [filePath])

  if (!mediaUrl) return null

  return (
    <div className="flex h-screen items-center justify-center bg-background">
      {mediaType === "image" && (
        <img
          src={mediaUrl}
          alt="Preview"
          className="max-w-full max-h-full object-contain"
        />
      )}
      {mediaType === "audio" && (
        <audio
          controls
          src={mediaUrl}
          className="max-w-full"
        />
      )}
      {mediaType === "video" && (
        <video
          controls
          src={mediaUrl}
          className="max-w-full max-h-full"
        />
      )}
      {mediaType === "pdf" && (
        <iframe
          src={mediaUrl}
          className="w-full h-full"
          title="PDF Preview"
        />
      )}
    </div>
  )
}