{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-video",
  "description": "Video player component",
  "docUrl": "https://design.soracom.io/design-system/elements/video/",
  "category": "elements",
  "htmlElements": [
    "video",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "state": {
      "support": "custom",
      "values": [
        "--playing"
      ]
    },
    "layout": {
      "support": "subset",
      "values": [
        "--full-width"
      ]
    }
  },
  "cssCustomProperties": [
    {
      "name": "--ds-video-width",
      "default": "800px",
      "description": "Width of the video player before its max-width constraint"
    }
  ],
  "structure": {
    "parts": {
      "video": {
        "element": "video",
        "required": true
      },
      "playPause": {
        "element": "button",
        "selector": ".__playpause",
        "optional": true
      },
      "controls": {
        "element": "div",
        "selector": ".__controls, .ds-switch",
        "optional": true
      }
    },
    "patterns": {
      "direct": "<video class=\"ds-video\" controls src=\"{src}\"></video>",
      "wrapper": "<div class=\"ds-video\"><video controls src=\"{src}\"></video></div>",
      "custom": "<div class=\"ds-video\"><button class=\"ds-button __playpause\" type=\"button\"><span>{playLabel}</span></button><div class=\"__controls\">{controls}</div><video src=\"{src}\"></video></div>"
    }
  },
  "attributes": {
    "src": {
      "description": "URL of the video resource.",
      "appliesTo": [
        {
          "elements": [
            "video"
          ]
        },
        {
          "part": "video",
          "elements": [
            "video"
          ]
        }
      ]
    },
    "controls": {
      "description": "Displays the browser-provided video controls.",
      "appliesTo": [
        {
          "elements": [
            "video"
          ]
        },
        {
          "part": "video",
          "elements": [
            "video"
          ]
        }
      ]
    },
    "autoplay": {
      "description": "Starts playback automatically when browser policy permits it.",
      "appliesTo": [
        {
          "elements": [
            "video"
          ]
        },
        {
          "part": "video",
          "elements": [
            "video"
          ]
        }
      ]
    },
    "loop": {
      "description": "Restarts playback automatically after the video ends.",
      "appliesTo": [
        {
          "elements": [
            "video"
          ]
        },
        {
          "part": "video",
          "elements": [
            "video"
          ]
        }
      ]
    },
    "muted": {
      "description": "Mutes the video audio by default.",
      "appliesTo": [
        {
          "elements": [
            "video"
          ]
        },
        {
          "part": "video",
          "elements": [
            "video"
          ]
        }
      ]
    },
    "poster": {
      "description": "Image displayed before the video starts playing.",
      "appliesTo": [
        {
          "elements": [
            "video"
          ]
        },
        {
          "part": "video",
          "elements": [
            "video"
          ]
        }
      ]
    },
    "preload": {
      "description": "Hint for how much video data the browser should preload.",
      "values": [
        "none",
        "metadata",
        "auto"
      ],
      "appliesTo": [
        {
          "elements": [
            "video"
          ]
        },
        {
          "part": "video",
          "elements": [
            "video"
          ]
        }
      ]
    },
    "playsinline": {
      "description": "Requests inline playback on devices that otherwise use a fullscreen player.",
      "appliesTo": [
        {
          "elements": [
            "video"
          ]
        },
        {
          "part": "video",
          "elements": [
            "video"
          ]
        }
      ]
    }
  },
  "dataAttributes": [],
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-video\"><video controls src=\"video.mp4\"></video></div>"
    },
    {
      "name": "direct",
      "html": "<video class=\"ds-video\" controls src=\"video.mp4\"></video>"
    },
    {
      "name": "full-width",
      "html": "<div class=\"ds-video --full-width\"><video controls src=\"video.mp4\"></video></div>"
    },
    {
      "name": "with-playpause",
      "html": "<div class=\"ds-video\"><button class=\"ds-icon --icon-circle-play-solid --xxlarge __playpause\"><span>Play</span></button><video src=\"video.mp4\"></video></div>"
    },
    {
      "name": "with-controls",
      "html": "<div class=\"ds-video\"><div class=\"ds-switch --hide-label --bottom-right __controls\"><label class=\"--icon-minimize\"><input type=\"radio\" name=\"video-mode\" value=\"small\" checked><span>Small</span></label><label class=\"--icon-grid-row\"><input type=\"radio\" name=\"video-mode\" value=\"wide\"><span>Wide</span></label><label class=\"--icon-padding\"><input type=\"radio\" name=\"video-mode\" value=\"fullscreen\"><span>Fullscreen</span></label><label class=\"--icon-iframe\"><input type=\"radio\" name=\"video-mode\" value=\"pip\"><span>Picture in Picture</span></label></div><video controls src=\"video.mp4\"></video></div>"
    },
    {
      "name": "playing",
      "html": "<div class=\"ds-video --playing\"><button class=\"ds-icon --icon-circle-play-solid --xxlarge __playpause\"><span>Pause</span></button><video src=\"video.mp4\"></video></div>"
    }
  ]
}