fix(components): added posterSrc for override

docs/src/components/booster-vimeo.md

@@ -44,8 +44,14 @@ Important: For using `BoosterVimeo` do not disable `@nuxt/image` via `disableNux
 import BoosterVimeo from '#booster/components/BoosterVimeo';
 
 defineProps({
-  url: { type: String, default: '<vimeo-url>' },
-  title: { type: String, default: 'Vimeo Title' },
+  url: { 
+    type: String, 
+    default: '<vimeo-url>' 
+  },
+  title: { 
+    type: String, 
+    default: 'Vimeo Title' 
+  },
   options: {
     type: String,
     default() {
@@ -62,6 +68,10 @@ defineProps({
         md: '50vw'
       };
     }
+  },
+  posterSrc: {
+    type: String,
+    default: '<poster-override-src>'
   }
 });
 
@@ -79,7 +89,8 @@ const onPlaying = () => console.log('Vimeo Player playing!');
   autoplay: false,
   mute: false,
   posterSizes: { … },
-  options: { … }
+  options: { … },
+  posterSrc: '<poster-override-src>'
 }
 ````
 
@@ -133,6 +144,11 @@ Option `playsinline` is always set, `mute` is set automatically for touch device
 This is important for autoplay on mobile devices.
 :::
 
+### `posterSrc`
+
+- Type: `String`
+  - default: `undefined`
+
 ## Slots
 
 ````html

docs/src/components/booster-youtube.md

@@ -65,6 +65,10 @@ defineProps({
         md: '50vw'
       };
     }
+  },
+  posterSrc: {
+    type: String,
+    default: '<poster-override-src>'
   }
 });
 
@@ -82,7 +86,8 @@ const onPlaying = () => console.log('Youtube Player playing!');
   autoplay: false,
   mute: false,
   posterSizes: { … },
-  options: { … }
+  options: { … },
+  posterSrc: '<poster-override-src>'
 }
 ````
 
@@ -145,6 +150,13 @@ This is important for autoplay on mobile devices.
 
 Sets the host for the player.
 
+### `posterSrc`
+
+- Type: `String`
+  - default: `undefined`
+
+Overrides the poster source.
+
 ::: info
 It is recommended to use the default (<https://www.youtube-nocookie.com>).
 :::

playground/pages/index.vue

@@ -91,6 +91,7 @@ const imageTextA = {
 };
 
 const videoYoutube = {
+  posterSrc: '/img/image-text-b.jpg',
   title: 'Youtube',
   url: 'https://www.youtube.com/watch?v=cLKvbhfVBUU',
   text: 'Nunc odio nisl dapibus consequat recusandae doloremque nisi natus repudiandae do accusantium corrupti. Harum quisquam, maxime, perspiciatis lobortis earum iure.'
@@ -123,7 +124,8 @@ const imageTextB = {
 
 const videoVimeoA = {
   url: 'https://vimeo.com/288344114',
-  text: 'Nunc odio nisl dapibus consequat recusandae doloremque nisi natus repudiandae do accusantium corrupti. Harum quisquam, maxime, perspiciatis lobortis earum iure.'
+  text: 'Nunc odio nisl dapibus consequat recusandae doloremque nisi natus repudiandae do accusantium corrupti. Harum quisquam, maxime, perspiciatis lobortis earum iure.',
+  posterSrc: '/img/image-text-b.jpg'
 };
 
 const textB = {

src/runtime/components/BoosterVimeo/Base.vue

@@ -88,6 +88,16 @@ export default {
     posterDensities: {
       type: [String, Number],
       default: undefined
+    },
+
+    posterOverride: {
+      type: Object,
+      default: undefined
+    },
+
+    posterSrc: {
+      type: String,
+      default: undefined
     }
   },
   emits: ['playing', 'ready'],
@@ -175,24 +185,39 @@ export default {
       if (!this.videoData) {
         return null;
       }
-      return {
-        formats: this.$booster.targetFormats,
-        title: this.playerTitle,
-        sources: [
-          {
-            format: 'jpg',
-            src:
-              this.videoData &&
-              this.videoData.thumbnail_url?.replace(
-                'https://i.vimeocdn.com',
-                'vimeo'
-              ),
-            sizes: this.posterSizes,
-            media: 'all',
-            densities: this.posterDensities
-          }
-        ]
-      };
+      if (this.posterSrc) {
+        return {
+          formats: this.$booster.targetFormats,
+          title: this.title,
+          sources: [
+            {
+              src: this.posterSrc,
+              sizes: this.posterSizes,
+              media: 'all',
+              densities: this.posterDensities
+            }
+          ]
+        };
+      } else {
+        return {
+          formats: this.$booster.targetFormats,
+          title: this.playerTitle,
+          sources: [
+            {
+              format: 'jpg',
+              src:
+                this.videoData &&
+                this.videoData.thumbnail_url?.replace(
+                  'https://i.vimeocdn.com',
+                  'vimeo'
+                ),
+              sizes: this.posterSizes,
+              media: 'all',
+              densities: this.posterDensities
+            }
+          ]
+        };
+      }
     }
   },
 

src/runtime/components/BoosterYoutube/Base.vue

@@ -88,6 +88,11 @@ export default {
     posterDensities: {
       type: [String, Number],
       default: undefined
+    },
+
+    posterSrc: {
+      type: String,
+      default: undefined
     }
   },
 
@@ -118,18 +123,33 @@ export default {
 
   computed: {
     pictureDataset() {
-      return {
-        formats: this.$booster.targetFormats,
-        title: this.title,
-        sources: [
-          {
-            src: `/youtube/vi/${this.videoId}/maxresdefault.jpg`,
-            sizes: this.posterSizes,
-            media: 'all',
-            densities: this.posterDensities
-          }
-        ]
-      };
+      if (this.posterSrc) {
+        return {
+          formats: this.$booster.targetFormats,
+          title: this.title,
+          sources: [
+            {
+              src: this.posterSrc,
+              sizes: this.posterSizes,
+              media: 'all',
+              densities: this.posterDensities
+            }
+          ]
+        };
+      } else {
+        return {
+          formats: this.$booster.targetFormats,
+          title: this.title,
+          sources: [
+            {
+              src: `/youtube/vi/${this.videoId}/maxresdefault.jpg`,
+              sizes: this.posterSizes,
+              media: 'all',
+              densities: this.posterDensities
+            }
+          ]
+        };
+      }
     }
   },