feat(stories): add new stories for btn and thumb

webistomin · Mar 17, 2021 · 7221f17 · 7221f17
1 parent c943c1d
commit 7221f17
Show file tree

Hide file tree

Showing 5 changed files with 277 additions and 18 deletions.
diff --git a/src/components/VueTube/VueTube.css b/src/components/VueTube/VueTube.css
@@ -35,6 +35,7 @@
   height: inherit;
   object-fit: cover;
   object-position: center;
+  vertical-align: top;
 }
 
 .vuetube__button {

diff --git a/src/components/VueTube/docs/VueTube.stories.css b/src/components/VueTube/docs/VueTube.stories.css
@@ -8,3 +8,27 @@
   width: 100%;
   height: 100%;
 }
+
+.story-vuetube-thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.story-vuetube-aspect-ratio {
+  position: relative;
+}
+
+.story-vuetube-aspect-ratio::before {
+  display: block;
+  padding-bottom: 56.25%;
+  content: '';
+}
+
+.story-vuetube-aspect-ratio .story-vuetube-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
diff --git a/src/components/VueTube/docs/VueTube.stories.ts b/src/components/VueTube/docs/VueTube.stories.ts
@@ -4,6 +4,7 @@ import VueTube from '../VueTube';
 import SVueTubeMDX from './VueTube.mdx';
 import './VueTube.stories.css';
 import '../VueTube.css';
+import placeholder from './assets/placeholder.png';
 
 export default {
   title: 'Components/VueTube',
@@ -15,6 +16,11 @@ export default {
   },
 };
 
+const thumbnail = {
+  src: placeholder,
+  alt: 'Video coming soon',
+};
+
 const Template: Story = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { VueTube },
@@ -30,28 +36,184 @@ const Template: Story = (_args, { argTypes }) => ({
   },
   template: `
     <div class="story-vuetube-container">
-      <vue-tube
-        v-bind="$props"
-        @player:ready="onReady"
-        @player:statechange="onStateChange"
-        @player:playbackqualitychange="onPlaybackRateChange"
-        @player:error="onError"
-        @player:apichange="onApiChange"
-        @player:load="onLoad"
-        @player:play="onPlay"
-      >
-      </vue-tube>
+    <vue-tube
+      v-bind="$props"
+      @player:ready="onReady"
+      @player:statechange="onStateChange"
+      @player:playbackqualitychange="onPlaybackRateChange"
+      @player:error="onError"
+      @player:apichange="onApiChange"
+      @player:load="onLoad"
+      @player:play="onPlay"
+    >
+    </vue-tube>
     </div>
-`,
+  `,
 });
 
-const NativeIframeTemplate: Story = () => ({
+const TemplateWithAPI: Story = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { VueTube },
+  methods: {
+    onReady: action('emit player:ready'),
+    onStateChange: action('emit player:statechange'),
+    onPlaybackQualityChange: action('emit player:playbackqualitychange'),
+    onPlaybackRateChange: action('emit player:playbackratechange'),
+    onError: action('emit player:error'),
+    onApiChange: action('emit player:apichange'),
+    onLoad: action('emit player:load'),
+    onPlay: action('emit player:play'),
+  },
+  template: `
+    <div class="story-vuetube-container">
+    <vue-tube
+      v-bind="$props"
+      @player:ready="onReady"
+      @player:statechange="onStateChange"
+      @player:playbackqualitychange="onPlaybackRateChange"
+      @player:error="onError"
+      @player:apichange="onApiChange"
+      @player:load="onLoad"
+      @player:play="onPlay"
+    >
+    </vue-tube>
+    </div>
+  `,
+});
+
+const TemplateWithCustomButton: Story = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { VueTube },
+  methods: {
+    onReady: action('emit player:ready'),
+    onStateChange: action('emit player:statechange'),
+    onPlaybackQualityChange: action('emit player:playbackqualitychange'),
+    onPlaybackRateChange: action('emit player:playbackratechange'),
+    onError: action('emit player:error'),
+    onApiChange: action('emit player:apichange'),
+    onLoad: action('emit player:load'),
+    onPlay: action('emit player:play'),
+  },
+  template: `
+    <div class="story-vuetube-container">
+    <vue-tube
+      v-bind="$props"
+      @player:ready="onReady"
+      @player:statechange="onStateChange"
+      @player:playbackqualitychange="onPlaybackRateChange"
+      @player:error="onError"
+      @player:apichange="onApiChange"
+      @player:load="onLoad"
+      @player:play="onPlay"
+    >
+      <template #icon>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 24 24">
+          <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>
+    </div>
+  `,
+});
+
+const TemplateWithCustomThumbnail: Story = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { VueTube },
+  computed: {
+    src() {
+      return thumbnail.src;
+    },
+    alt() {
+      return thumbnail.alt;
+    },
+  },
+  methods: {
+    onReady: action('emit player:ready'),
+    onStateChange: action('emit player:statechange'),
+    onPlaybackQualityChange: action('emit player:playbackqualitychange'),
+    onPlaybackRateChange: action('emit player:playbackratechange'),
+    onError: action('emit player:error'),
+    onApiChange: action('emit player:apichange'),
+    onLoad: action('emit player:load'),
+    onPlay: action('emit player:play'),
+  },
+  template: `
+    <div class="story-vuetube-container">
+    <vue-tube
+      v-bind="$props"
+      @player:ready="onReady"
+      @player:statechange="onStateChange"
+      @player:playbackqualitychange="onPlaybackRateChange"
+      @player:error="onError"
+      @player:apichange="onApiChange"
+      @player:load="onLoad"
+      @player:play="onPlay"
+    >
+      <template #thumbnail>
+        <img class="story-vuetube-thumbnail" :src="src" :alt="alt">
+      </template>
+    </vue-tube>
+    </div>
+  `,
+});
+
+const TemplateWithMultipleVideos: Story = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { VueTube },
+  methods: {
+    onReady: action('emit player:ready'),
+    onStateChange: action('emit player:statechange'),
+    onPlaybackQualityChange: action('emit player:playbackqualitychange'),
+    onPlaybackRateChange: action('emit player:playbackratechange'),
+    onError: action('emit player:error'),
+    onApiChange: action('emit player:apichange'),
+    onLoad: action('emit player:load'),
+    onPlay: action('emit player:play'),
+  },
   template: `
     <div class="story-vuetube-container">
+    <vue-tube
+      v-bind="$props"
+      @player:ready="onReady"
+      @player:statechange="onStateChange"
+      @player:playbackqualitychange="onPlaybackRateChange"
+      @player:error="onError"
+      @player:apichange="onApiChange"
+      @player:load="onLoad"
+      @player:play="onPlay"
+    >
+    </vue-tube>
+    <vue-tube
+      v-bind="$props"
+      video-id="QH2-TGUlwu4"
+      image-alt="Nyan Cat"
+      iframe-title="Nyan Cat [original]"
+      @player:ready="onReady"
+      @player:statechange="onStateChange"
+      @player:playbackqualitychange="onPlaybackRateChange"
+      @player:error="onError"
+      @player:apichange="onApiChange"
+      @player:load="onLoad"
+      @player:play="onPlay"
+    >
+    </vue-tube>
+    </div>
+  `,
+});
+
+const NativeIframeTemplate: Story = () => ({
+  template: `
+    <div class="story-vuetube-container story-vuetube-aspect-ratio">
       <iframe
         class="story-vuetube-iframe"
         src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
-        frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen>
       </iframe>
@@ -61,20 +223,88 @@ const NativeIframeTemplate: Story = () => ({
 
 export const Default = Template.bind({});
 Default.args = {
+  videoId: 'dQw4w9WgXcQ',
+  isPlaylist: false,
+  aspectRatio: 16 / 9,
+  enableCookies: false,
+  playerVars: {},
+  disableWarming: false,
+  disableWebp: false,
+  imageAlt: 'Rick Astley',
+  imageLoading: 'lazy',
+  resolution: 'sddefault',
+  buttonLabel: 'Play video',
+  iframeTitle: 'Rick Astley - Never Gonna Give You Up (Video)',
+  iframeAllow: 'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture',
+};
+
+export const withAPI = TemplateWithAPI.bind({});
+withAPI.args = {
+  videoId: 'dQw4w9WgXcQ',
+  isPlaylist: false,
+  aspectRatio: 16 / 9,
+  enableCookies: false,
+  playerVars: { enablejsapi: 1 },
+  disableWarming: false,
+  disableWebp: false,
+  imageAlt: 'Rick Astley',
+  imageLoading: 'lazy',
+  resolution: 'sddefault',
+  buttonLabel: 'Play video',
+  iframeTitle: 'Rick Astley - Never Gonna Give You Up (Video)',
+  iframeAllow: 'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture',
+};
+
+export const withCustomButton = TemplateWithCustomButton.bind({});
+withCustomButton.args = {
+  videoId: 'dQw4w9WgXcQ',
+  isPlaylist: false,
+  aspectRatio: 16 / 9,
+  enableCookies: false,
+  playerVars: {},
+  disableWarming: false,
+  disableWebp: false,
+  imageAlt: 'Rick Astley',
+  imageLoading: 'lazy',
+  resolution: 'sddefault',
+  buttonLabel: 'Play video',
+  iframeTitle: 'Rick Astley - Never Gonna Give You Up (Video)',
+  iframeAllow: 'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture',
+};
+
+export const withCustomThumbnail = TemplateWithCustomThumbnail.bind({});
+withCustomThumbnail.args = {
+  videoId: 'dQw4w9WgXcQ',
+  isPlaylist: false,
+  aspectRatio: 16 / 9,
+  enableCookies: false,
+  playerVars: {},
+  disableWarming: false,
+  disableWebp: false,
+  imageAlt: 'Rick Astley',
+  imageLoading: 'lazy',
+  resolution: 'sddefault',
+  buttonLabel: 'Play video',
+  iframeTitle: 'Rick Astley - Never Gonna Give You Up (Video)',
+  iframeAllow: 'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture',
+};
+
+export const withMultipleVideos = TemplateWithMultipleVideos.bind({});
+withMultipleVideos.args = {
   videoId: 'dQw4w9WgXcQ',
   isPlaylist: false,
   aspectRatio: 16 / 9,
   enableCookies: false,
   playerVars: { enablejsapi: 1 },
   disableWarming: false,
   disableWebp: false,
-  imageAlt: '',
+  imageAlt: 'Rick Astley',
   imageLoading: 'lazy',
   resolution: 'sddefault',
   buttonLabel: 'Play video',
-  iframeTitle: undefined,
+  iframeTitle: 'Rick Astley - Never Gonna Give You Up (Video)',
   iframeAllow: 'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture',
 };
 
-export const NativeIframe = NativeIframeTemplate.bind({});
-NativeIframe.args = {};
+export const withNativeIframe = NativeIframeTemplate.bind({});
+withNativeIframe.args = {};
diff --git a/src/components/VueTube/docs/assets/placeholder.png b/src/components/VueTube/docs/assets/placeholder.png
diff --git a/types/shims-png.d.ts b/types/shims-png.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: unknown;
+  export default value;
+}