@simpledotstudio/simple-media-preview/meta.json

SimpleMediaPreview - A reusable React component

{
  "name": "SimpleMediaPreview",
  "package": "@simpledotstudio/simple-media-preview",
  "description": "A media preview component that supports images, videos, and audio files with custom playback controls and loading states.",
  "tags": ["media", "image", "video", "audio", "preview", "simple-ui"],
  "attributes": [
    {
      "name": "src",
      "type": "string",
      "default": "undefined",
      "description": "Media source URL",
      "required": true
    },
    {
      "name": "alt",
      "type": "string",
      "default": "'Media preview'",
      "description": "Alternative text for accessibility",
      "required": false
    },
    {
      "name": "type",
      "type": "'image' | 'video' | 'audio' | 'auto'",
      "default": "'auto'",
      "description": "Media type (auto-detected if not specified)",
      "required": false
    },
    {
      "name": "width",
      "type": "string | number",
      "default": "'100%'",
      "description": "Width of the media container",
      "required": false
    },
    {
      "name": "height",
      "type": "string | number",
      "default": "'auto'",
      "description": "Height of the media container",
      "required": false
    },
    {
      "name": "objectFit",
      "type": "'contain' | 'cover' | 'fill' | 'none' | 'scale-down'",
      "default": "'contain'",
      "description": "How the media should fit within its container",
      "required": false
    },
    {
      "name": "autoPlay",
      "type": "boolean",
      "default": "false",
      "description": "Auto-play video/audio content",
      "required": false
    },
    {
      "name": "loop",
      "type": "boolean",
      "default": "false",
      "description": "Loop video/audio playback",
      "required": false
    },
    {
      "name": "muted",
      "type": "boolean",
      "default": "false",
      "description": "Start video/audio muted",
      "required": false
    },
    {
      "name": "controls",
      "type": "boolean",
      "default": "true",
      "description": "Show playback controls for video/audio",
      "required": false
    },
    {
      "name": "onLoad",
      "type": "() => void",
      "default": "undefined",
      "description": "Callback when media loads successfully",
      "required": false
    },
    {
      "name": "onError",
      "type": "(error: Event) => void",
      "default": "undefined",
      "description": "Callback when media fails to load",
      "required": false
    }
  ],
  "usage": "Import and use to display various media types with automatic type detection and appropriate controls.",
  "example": "import { SimpleMediaPreview } from '@simpledotstudio/simple-media-preview';\n\nfunction Example() {\n  return (\n    <SimpleMediaPreview\n      src=\"/path/to/video.mp4\"\n      width={640}\n      height={360}\n      autoPlay\n      muted\n    />\n  );\n}",
  "goodPractices": [
    "Provide meaningful alt text for images",
    "Use muted with autoPlay for better browser compatibility",
    "Set appropriate dimensions to prevent layout shifts",
    "Handle loading and error states for better UX",
    "Use objectFit to control how media scales"
  ],
  "badPractices": [
    "Avoid auto-playing audio without user interaction",
    "Don't use very large media files without optimization",
    "Avoid relying solely on auto-detection for critical media"
  ],
  "notes": "Automatically detects media type from file extension. Shows loading state while media is loading. Supports custom controls for video and audio playback."
}