import VideoWidget from '../components/VideoWidget/VideoWidget';
import React from 'react';

export default {
  title: 'page-ui/VideoWidget',
  component: VideoWidget,
};

const Template = (args) => <VideoWidget  {...args} />;


const configYoutube = {
  youtube: {
    playerVars: { showinfo: 1 }
  }
}


export const VideoWidgetCustomYoutube = Template.bind({});
VideoWidgetCustomYoutube.args = {
  config: configYoutube,
  url: 'https://www.youtube.com/watch?v=a0M_QUS3kC0&ab_channel=Whattheduck',
  // url: 'https://fb.watch/eFG2la3H2x/',
  // url: 'https://www.facebook.com/nanny.unloveable/videos/4105085632922108/?fs=e&s=cl',
  // url: '../static/video/video-cat.mp4',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,

}

export const VideoWidgetCustomYoutubeAutoPlay = Template.bind({});
VideoWidgetCustomYoutubeAutoPlay.args = {
  config: configYoutube,
  url: 'https://www.youtube.com/watch?v=a0M_QUS3kC0&ab_channel=Whattheduck',
  // url: 'https://fb.watch/eFG2la3H2x/',
  // url: 'https://www.facebook.com/nanny.unloveable/videos/4105085632922108/?fs=e&s=cl',
  // url: '../static/video/video-cat.mp4',
  playing: true,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,

}

export const VideoWidgetCustomFBVideos = Template.bind({});
VideoWidgetCustomFBVideos.args = {
  url: 'https://www.facebook.com/nanny.unloveable/videos/4105085632922108/?fs=e&s=cl',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,

}
export const VideoWidgetCustomStatic = Template.bind({});
VideoWidgetCustomStatic.args = {
  url: '../static/video/video-cat.mp4',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,

}