import * as UI from '../../src/index'

import { Canvas, Meta, Story } from "@storybook/addon-docs";
import { rawJsonDecorator } from "./decorators";

<Meta title="Media Types" />

## isAudio

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#isaudio)

<Canvas withSource="open">
  <Story name="isAudio" decorators={[rawJsonDecorator]}>
    {() => {
      const type = $rdf.namedNode("http://www.w3.org/ns/iana/media-types/audio/");
      SolidLogic.store.add($rdf.namedNode("http://example.com/audio.mpeg"), UI.ns.rdf("type"), type);
      return UI.widgets.isAudio($rdf.namedNode("http://example.com/audio.mpeg"));
    }}
  </Story>
</Canvas>

## isVideo

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#isvideo)

<Canvas withSource="open">
  <Story name="isVideo" decorators={[rawJsonDecorator]}>
    {() => {
      const type = $rdf.namedNode("http://www.w3.org/ns/iana/media-types/video/");
      SolidLogic.store.add($rdf.namedNode("http://example.com/video.mov"), UI.ns.rdf("type"), type);
      return UI.widgets.isVideo($rdf.namedNode("http://example.com/video.mov"));
    }}
  </Story>
</Canvas>

## isImage

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#isvideo)

<Canvas withSource="open">
  <Story name="isImage" decorators={[rawJsonDecorator]}>
    {() => {
      const type = $rdf.namedNode("http://www.w3.org/ns/iana/media-types/image/");
      SolidLogic.store.add($rdf.namedNode("http://example.com/image.jpeg"), UI.ns.rdf("type"), type);
      return UI.widgets.isImage($rdf.namedNode("http://example.com/image.jpeg"));
    }}
  </Story>
</Canvas>
