From baddaa1a97f08273f3e85afb8babe69d79e16cbb Mon Sep 17 00:00:00 2001 From: Thorn Walli Date: Sun, 30 Jun 2024 15:37:49 +0200 Subject: [PATCH] fix(components): added `posterSrc` for override --- docs/src/components/booster-vimeo.md | 22 ++++++- docs/src/components/booster-youtube.md | 14 ++++- playground/pages/index.vue | 4 +- src/runtime/components/BoosterVimeo/Base.vue | 61 +++++++++++++------ .../components/BoosterYoutube/Base.vue | 44 +++++++++---- 5 files changed, 110 insertions(+), 35 deletions(-) diff --git a/docs/src/components/booster-vimeo.md b/docs/src/components/booster-vimeo.md index 63dbba2c37..2ff34f0aa0 100644 --- a/docs/src/components/booster-vimeo.md +++ b/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: '' }, - title: { type: String, default: 'Vimeo Title' }, + url: { + type: String, + default: '' + }, + title: { + type: String, + default: 'Vimeo Title' + }, options: { type: String, default() { @@ -62,6 +68,10 @@ defineProps({ md: '50vw' }; } + }, + posterSrc: { + type: String, + default: '' } }); @@ -79,7 +89,8 @@ const onPlaying = () => console.log('Vimeo Player playing!'); autoplay: false, mute: false, posterSizes: { … }, - options: { … } + options: { … }, + posterSrc: '' } ```` @@ -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 diff --git a/docs/src/components/booster-youtube.md b/docs/src/components/booster-youtube.md index eed12db130..4db40eb950 100644 --- a/docs/src/components/booster-youtube.md +++ b/docs/src/components/booster-youtube.md @@ -65,6 +65,10 @@ defineProps({ md: '50vw' }; } + }, + posterSrc: { + type: String, + default: '' } }); @@ -82,7 +86,8 @@ const onPlaying = () => console.log('Youtube Player playing!'); autoplay: false, mute: false, posterSizes: { … }, - options: { … } + options: { … }, + posterSrc: '' } ```` @@ -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 (). ::: diff --git a/playground/pages/index.vue b/playground/pages/index.vue index 599139c6d2..ab6a2dd598 100644 --- a/playground/pages/index.vue +++ b/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 = { diff --git a/src/runtime/components/BoosterVimeo/Base.vue b/src/runtime/components/BoosterVimeo/Base.vue index 2f5dd5aa7d..739b2bcd98 100644 --- a/src/runtime/components/BoosterVimeo/Base.vue +++ b/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 + } + ] + }; + } } }, diff --git a/src/runtime/components/BoosterYoutube/Base.vue b/src/runtime/components/BoosterYoutube/Base.vue index c289ad7003..ae36ce81a2 100644 --- a/src/runtime/components/BoosterYoutube/Base.vue +++ b/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 + } + ] + }; + } } },