feat (video background): add thumbnail option for video background (#…

…3040) * add backgroundMediaThumbnail * add const
gambitph · Mar 22, 2024 · 9488a58 · 9488a58
1 parent c7cbea2
commit 9488a58
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 2 deletions.
diff --git a/src/block-components/block-div/index.js b/src/block-components/block-div/index.js
@@ -87,6 +87,9 @@ export const BlockDiv = props => {
 		backgroundUrl={ attributes.blockBackgroundMediaUrl || attributes.blockBackgroundMediaExternalUrl }
 		backgroundUrlTablet={ attributes.blockBackgroundMediaUrlTablet || attributes.blockBackgroundMediaExternalUrlTablet }
 		backgroundUrlMobile={ attributes.blockBackgroundMediaUrlMobile || attributes.blockBackgroundMediaExternalUrlMobile }
+		backgroundThumbnailUrl={ attributes.blockBackgroundMediaThumbnailUrl }
+		backgroundThumbnailUrlTablet={ attributes.blockBackgroundMediaThumbnailUrlTablet }
+		backgroundThumbnailUrlMobile={ attributes.blockBackgroundMediaThumbnailUrlMobile }
 		backgroundColorType={ attributes.blockBackgroundColorType }
 		{ ...applyFilters( 'stackable.block-components.block-div.attributes', {}, attributes ) }
 	>
@@ -151,6 +154,9 @@ BlockDiv.Content = props => {
 		backgroundUrl={ attributes.blockBackgroundMediaUrl || attributes.blockBackgroundMediaExternalUrl }
 		backgroundUrlTablet={ attributes.blockBackgroundMediaUrlTablet || attributes.blockBackgroundMediaExternalUrlTablet }
 		backgroundUrlMobile={ attributes.blockBackgroundMediaUrlMobile || attributes.blockBackgroundMediaExternalUrlMobile }
+		backgroundThumbnailUrl={ attributes.blockBackgroundMediaThumbnailUrl }
+		backgroundThumbnailUrlTablet={ attributes.blockBackgroundMediaThumbnailUrlTablet }
+		backgroundThumbnailUrlMobile={ attributes.blockBackgroundMediaThumbnailUrlMobile }
 		backgroundColorType={ attributes.blockBackgroundColorType }
 		{ ...applyFilters( 'stackable.block-components.block-div.attributes.content', {}, attributes ) }
 	/>

diff --git a/src/block-components/helpers/backgrounds/attributes.js b/src/block-components/helpers/backgrounds/attributes.js
@@ -20,6 +20,16 @@ export const backgroundAttributes = {
 		type: 'string',
 		default: '',
 	},
+	backgroundMediaThumbnailId: {
+		stkResponsive: true,
+		type: 'string',
+		default: '',
+	},
+	backgroundMediaThumbnailUrl: {
+		stkResponsive: true,
+		type: 'string',
+		default: '',
+	},
 	backgroundGradientBlendMode: {
 		type: 'string',
 		default: '',

diff --git a/src/block-components/helpers/backgrounds/edit.js b/src/block-components/helpers/backgrounds/edit.js
@@ -61,13 +61,15 @@ export const BackgroundControls = props => {
 	getAttribute( 'backgroundMediaExternalUrl' ) ||
 	getAttribute( 'backgroundMediaExternalUrlTablet' ) ||
 	getAttribute( 'backgroundMediaExternalUrlMobile' )
-	const isBackgroundVideo = () => {
+	const checkIsBackgroundVideo = () => {
 		return [ getAttribute( 'backgroundMediaUrl' ), getAttribute( 'backgroundMediaUrlTablet' ), getAttribute( 'backgroundMediaUrlMobile' ) ]
 			.filter( value => value )
 			.filter( urlIsVideo )
 			.length > 0
 	}
 
+	const isBackgroundVideo = checkIsBackgroundVideo()
+
 	return (
 		<Fragment>
 			{ props.hasGradient &&
@@ -173,7 +175,34 @@ export const BackgroundControls = props => {
 				/>
 			}
 
-			{ hasBackgroundMedia && ! isBackgroundVideo() &&
+			{ hasBackgroundMedia && isBackgroundVideo &&
+				<ImageControl2
+					label={ __( 'Background Video Thumbnail', i18n ) }
+					allowedTypes={ IMAGE_TYPES }
+					attribute={ getAttrName( 'backgroundMediaThumbnail' ) }
+					onChange={ image => {
+						const attrNameId = getAttributeName( `${ getAttrName( 'backgroundMediaThumbnail' ) }Id`, deviceType )
+						const attrNameUrl = getAttributeName( `${ getAttrName( 'backgroundMediaThumbnail' ) }Url`, deviceType )
+						const attrWidthAttribute = getAttributeName( `${ getAttrName( 'backgroundMediaThumbnail' ) }HeightAttribute`, deviceType )
+						const attrHeightAttribute = getAttributeName( `${ getAttrName( 'backgroundMediaThumbnail' ) }WidthAttribute`, deviceType )
+						const attrAlt = getAttributeName( `${ getAttrName( 'backgroundMediaThumbnail' ) }Alt`, deviceType )
+
+						const attributes = {
+							[ attrNameId ]: image.id,
+							[ attrNameUrl ]: image.url,
+							[ attrWidthAttribute ]: image.width || '',
+							[ attrHeightAttribute ]: image.height || '',
+							[ attrAlt ]: image.alt || '',
+						}
+
+						setAttributes( attributes )
+					}
+					}
+					responsive="all"
+				/>
+			}
+
+			{ hasBackgroundMedia && ! isBackgroundVideo &&
 				<AdvancedToggleControl
 					help={ __( 'Note: Fixed Background works on Desktop and Android devices only.', i18n ) }
 					label={ __( 'Fixed Background', i18n ) }

diff --git a/src/components/div/index.js b/src/components/div/index.js
@@ -12,6 +12,9 @@ const Div = props => {
 		backgroundUrl,
 		backgroundUrlTablet,
 		backgroundUrlMobile,
+		backgroundThumbnailUrl,
+		backgroundThumbnailUrlTablet,
+		backgroundThumbnailUrlMobile,
 		backgroundColorType,
 		...propsToPass
 	} = props
@@ -29,6 +32,9 @@ const Div = props => {
 				videoUrl={ backgroundUrl }
 				videoUrlTablet={ backgroundUrlTablet }
 				videoUrlMobile={ backgroundUrlMobile }
+				videoThumbnailUrl={ backgroundThumbnailUrl }
+				videoThumbnailUrlTablet={ backgroundThumbnailUrlTablet }
+				videoThumbnailUrlMobile={ backgroundThumbnailUrlMobile }
 			/>
 		</BlockTag>
 	)
@@ -52,6 +58,9 @@ Div.Content = props => {
 		backgroundUrl,
 		backgroundUrlTablet,
 		backgroundUrlMobile,
+		backgroundThumbnailUrl,
+		backgroundThumbnailUrlTablet,
+		backgroundThumbnailUrlMobile,
 		backgroundColorType,
 		...propsToPass
 	} = props
@@ -69,6 +78,9 @@ Div.Content = props => {
 				videoUrl={ backgroundUrl }
 				videoUrlTablet={ backgroundUrlTablet }
 				videoUrlMobile={ backgroundUrlMobile }
+				videoThumbnailUrl={ backgroundThumbnailUrl }
+				videoThumbnailUrlTablet={ backgroundThumbnailUrlTablet }
+				videoThumbnailUrlMobile={ backgroundThumbnailUrlMobile }
 			/>
 		</BlockTag>
 	)

diff --git a/src/components/div/video-background.js b/src/components/div/video-background.js
@@ -12,6 +12,7 @@ import { Fragment } from '@wordpress/element'
 
 const VideoBackground = props => {
 	let backgroundSrc = props.videoUrl
+	let backgroundThumbnailSrc = props.videoThumbnailUrl
 	const deviceType = useDeviceType()
 	if ( deviceType !== 'Desktop' && props.videoUrlTablet ) {
 		backgroundSrc = props.videoUrlTablet
@@ -20,6 +21,13 @@ const VideoBackground = props => {
 		backgroundSrc = props.videoUrlMobile
 	}
 
+	if ( deviceType !== 'Desktop' && props.videoThumbnailUrlTablet ) {
+		backgroundThumbnailSrc = props.videoThumbnailUrlTablet
+	}
+	if ( deviceType === 'Mobile' && props.videoThumbnailUrlMobile ) {
+		backgroundThumbnailSrc = props.videoThumbnailUrlMobile
+	}
+
 	if ( ! urlIsVideo( backgroundSrc ) ) {
 		return null
 	}
@@ -32,6 +40,7 @@ const VideoBackground = props => {
 			loop
 			playsinline
 			src={ backgroundSrc }
+			poster={ backgroundThumbnailSrc }
 		/>
 	)
 }
@@ -40,6 +49,9 @@ VideoBackground.defaultProps = {
 	videoUrl: '',
 	videoUrlTablet: '',
 	videoUrlMobile: '',
+	videoThumbnailUrl: '',
+	videoThumbnailUrlTablet: '',
+	videoThumbnailUrlMobile: '',
 }
 
 VideoBackground.Content = props => {
@@ -72,6 +84,7 @@ VideoBackground.Content = props => {
 					loop
 					playsinline
 					src={ props.videoUrl }
+					poster={ props.videoThumbnailUrl }
 				/>
 			}
 			{ urlIsVideo( props.videoUrlTablet ) &&
@@ -82,6 +95,7 @@ VideoBackground.Content = props => {
 					loop
 					playsinline
 					src={ props.videoUrlTablet }
+					poster={ props.videoThumbnailUrlTablet }
 				/>
 			}
 			{ urlIsVideo( props.videoUrlMobile ) &&
@@ -92,6 +106,7 @@ VideoBackground.Content = props => {
 					loop
 					playsinline
 					src={ props.videoUrlMobile }
+					poster={ props.videoThumbnailUrlMobile }
 				/>
 			}
 		</Fragment>
@@ -102,6 +117,9 @@ VideoBackground.Content.defaultProps = {
 	videoUrl: '',
 	videoUrlTablet: '',
 	videoUrlMobile: '',
+	videoThumbnailUrl: '',
+	videoThumbnailUrlTablet: '',
+	videoThumbnailUrlMobile: '',
 }
 
 export default VideoBackground