import { Meta, Story, Preview } from "@storybook/addon-docs/blocks"
import VueTube from "../VueTube"

<Meta title='Components/VueTube' component={ VueTube } />

# VueTube

## Preview

<Preview className="custom-preview">
  <Story id='components-vuetube--default' />
</Preview>

## Example

### Props

<table>
  <tr>
    <td>
      Prop
    </td>
    <td>
      Type
    </td>
    <td>
      Description
    </td>
    <td>
      Default value
    </td>
  </tr>
  <tr>
    <td>
      <code>videoId</code>
    </td>
    <td>
      <code>string</code>
    </td>
    <td>
      The ID of YouTube video (required)
    </td>
    <td>
      -
    </td>
  </tr>
  <tr>
    <td>
      <code>isPlaylist</code>
    </td>
    <td>
      <code>boolean</code>
    </td>
    <td>
      Should embed a playlist of several videos
    </td>
    <td>
      <code>false</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>aspectRatio</code>
    </td>
    <td>
      <code>number</code>
    </td>
    <td>
      The aspect ratio for iframe
    </td>
    <td>
      <code>16 / 9</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>enableCookies</code>
    </td>
    <td>
      <code>boolean</code>
    </td>
    <td>
      Change video host to <code>www.youtube.com</code>. By default, video loaded from <code>https://www.youtube-nocookie.com</code>.
    </td>
    <td>
      <code>false</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>playerVars</code>
    </td>
    <td>
      <code>object</code>
    </td>
    <td>
      <a href="https://developers.google.com/youtube/player_parameters#Parameters">Parameters</a> that are available in the YouTube embedded player.
    </td>
    <td>
      <code>{}</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>disableWarming</code>
    </td>
    <td>
      <code>boolean</code>
    </td>
    <td>
      Disable warming up connections to origins that are in the critical path on component hover.
    </td>
    <td>
      <code>false</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>disableWebp</code>
    </td>
    <td>
      <code>boolean</code>
    </td>
    <td>
      Disable webp thumbnail.
    </td>
    <td>
      <code>false</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>imageAlt</code>
    </td>
    <td>
      <code>string</code>
    </td>
    <td>
      Alt attribute for image
    </td>
    <td>
      <code>''</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>imageLoading</code>
    </td>
    <td>
      <code>string</code>
    </td>
    <td>
      <a href="https://caniuse.com/loading-lazy-attr">Loading attribute</a> for image
    </td>
    <td>
      <code>'lazy'</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>resolution</code>
    </td>
    <td>
      <code>string</code>
    </td>
    <td>
      <a href="https://stackoverflow.com/a/18400445/13374604">Thumbnail resolution</a> from YouTube API.
    </td>
    <td>
      <code>'sddefault'</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>buttonLabel</code>
    </td>
    <td>
      <code>string</code>
    </td>
    <td>
      Aria-label attribute for button
    </td>
    <td>
      <code>'Play video'</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>iframeTitle</code>
    </td>
    <td>
      <code>string</code>
    </td>
    <td>
      Title attribute for iframe
    </td>
    <td>
      <code>''</code>
    </td>
  </tr>
  <tr>
    <td>
      <code>iframeAllow</code>
    </td>
    <td>
      <code>string</code>
    </td>
    <td>
      Allow attribute for iframe
    </td>
    <td>
      <code>'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture'</code>
    </td>
  </tr>
</table>

### Events

<table>
  <tr>
    <td>Event name</td>
    <td>Description</td>
  </tr>
  <tr>
    <td><code>player:play</code></td>
    <td>The user clicked on the play button</td>
  </tr>
  <tr>
    <td><code>player:load</code></td>
    <td>Iframe has been loaded</td>
  </tr>
  <tr>
    <td><code>player:ready</code></td>
    <td>This event fires whenever a player has finished loading and is ready to begin receiving API calls. <br/><br/> <strong>Make sure you pass <code>enablejsapi: 1</code> to the <code>playerVars</code> props object</strong> <br/><br/> This event is similar to <code>onReady</code> event from <a href="https://developers.google.com/youtube/iframe_api_reference#Events">Youtube API documentation</a>.</td>
  </tr>
  <tr>
    <td><code>player:statechange</code></td>
    <td>This event fires whenever the player's state changes. <br/><br/> <strong>Make sure you pass <code>enablejsapi: 1</code> to the <code>playerVars</code> props object</strong> <br/><br/> This event is similar to <code>onStateChange</code> event from <a href="https://developers.google.com/youtube/iframe_api_reference#Events">Youtube API documentation</a>.</td>
  </tr>
  <tr>
    <td><code>player:playbackqualitychange</code></td>
    <td>This event fires whenever the video playback quality changes. <br/><br/> <strong>Make sure you pass <code>enablejsapi: 1</code> to the <code>playerVars</code> props object</strong> <br/><br/> This event is similar to <code>onPlaybackQualityChange</code> event from <a href="https://developers.google.com/youtube/iframe_api_reference#Events">Youtube API documentation</a>.</td>
  </tr>
  <tr>
    <td><code>player:playbackratechange</code></td>
    <td>This event fires whenever the video playback rate changes.  <br/><br/> <strong>Make sure you pass <code>enablejsapi: 1</code> to the <code>playerVars</code> props object</strong> <br/><br/> This event is similar to <code>onPlaybackRateChange</code> event from <a href="https://developers.google.com/youtube/iframe_api_reference#Events">Youtube API documentation</a>.</td>
  </tr>
  <tr>
    <td><code>player:error</code></td>
    <td>This event fires if an error occurs in the player. <br/><br/> <strong>Make sure you pass <code>enablejsapi: 1</code> to the <code>playerVars</code> props object</strong> <br/><br/> This event is similar to <code>onError</code> event from <a href="https://developers.google.com/youtube/iframe_api_reference#Events">Youtube API documentation</a>.</td>
  </tr>
  <tr>
    <td><code>player:apichange</code></td>
    <td>This event is fired to indicate that the player has loaded (or unloaded) a module with exposed API methods. <br/><br/> <strong>Make sure you pass <code>enablejsapi: 1</code> to the <code>playerVars</code> props object</strong> <br/><br/> This event is similar to <code>onApiChange</code> event from <a href="https://developers.google.com/youtube/iframe_api_reference#Events">Youtube API documentation</a>.</td>
  </tr>
</table>

## FAQ 🗯️

### How to get access to player API?

You need to pass <code>enablejsapi: 1</code> to the <code>playerVars</code> props object. Then subscribe on <code>player:ready</code> event.

```vue
  <template>
    <vue-tube @player:ready="onPlayerReady"></vue-tube>
  </template>

  <script>
    export default {
      data() {
        return {
          playerInstance: null,
        }
      },

      methods: {
        onPlayerReady(event) {
          this.playerInstance = event.target
        }
      }
    }
  </script>
```

Now you have a player instance in the `playerInstance`. You can do whatever you want with video.

`this.playerInstance.playVideo()`, `this.playerInstance.pauseVideo()` etc. All methods can be found [here](https://developers.google.com/youtube/iframe_api_reference#Playback_controls).

### How to use my play button?

You can pass your button through the `icon` slot.

```vue
  <template>
    <vue-tube>
      <template #icon>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="48"
          height="48"
          viewBox="0 0 24 24"
          aria-hidden="true"
          focusable="false"
        >
          <path
            fill="#fff"
            d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"
          />
        </svg>
      </template>
    </vue-tube>
  </template>
```

### How to use my thumbnail?

You can pass your thumbnail through the `thumbnail` slot.

```vue
  <template>
    <vue-tube>
      <template #thumbnail>
        <img src="#" alt="">
      </template>
    </vue-tube>
  </template>
```