Add loop and bounce controls

build/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '268a3589728f24d9210f');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '5dbc33742ad49afcc4d5');

build/lottie.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '669de2d941d2e967a675');
+<?php return array('dependencies' => array(), 'version' => 'f12c4d76ad493df42f29');

src/editor.js

@@ -19,7 +19,7 @@ import LottieLogo from '../assets/lottie-logo.png';
 
 import './editor.css';
 
-const SUPPORTED_BLOCKS = [ 'core/image', 'core/cover' ];
+const SUPPORTED_BLOCKS = [ 'core/image', 'core/cover', 'core/media-text' ];
 
 function useLottie( args = {} ) {
 	const dotLottie = useRef( null );
@@ -123,15 +123,61 @@ function LottieAnimationPanel( BlockEdit ) {
 							help={
 								lottie?.overlay
 									? __(
-											'Animation will be overlaid on image',
+											'Animation will be overlaid on the image',
 											'lottie-lite'
 									  )
 									: __(
-											'Image will be replaced by animation',
+											'The image will be replaced by the animation',
 											'lottie-lite'
 									  )
 							}
 						/>
+						{ lottie?.trigger !== 'hover' && (
+							<ToggleControl
+								label={ __( 'Loop', 'lottie-lite' ) }
+								help={
+									lottie?.loop ?? true
+										? __(
+												'The animation will loop continuously',
+												'lottie-lite'
+										  )
+										: __(
+												'The animation will play only once',
+												'lottie-lite'
+										  )
+								}
+								checked={ lottie?.loop ?? true }
+								defaultChecked={ true }
+								onChange={ ( value ) =>
+									setAttributes( {
+										lottie: { ...lottie, loop: value },
+									} )
+								}
+							/>
+						) }
+						{ lottie?.bounce !== 'hover' && (
+							<ToggleControl
+								label={ __( 'Bounce', 'lottie-lite' ) }
+								help={
+									lottie?.bounce ?? false
+										? __(
+												'The animation will play in reverse once it reaches the end',
+												'lottie-lite'
+										  )
+										: __(
+												'The animation will stop once it reaches the end',
+												'lottie-lite'
+										  )
+								}
+								checked={ lottie?.bounce ?? false }
+								defaultChecked={ false }
+								onChange={ ( value ) =>
+									setAttributes( {
+										lottie: { ...lottie, bounce: value },
+									} )
+								}
+							/>
+						) }
 						{ ( lottie?.breakpoints || [] ).map(
 							( breakpoint, index ) => (
 								<div
@@ -326,6 +372,10 @@ function addAttribute( settings ) {
 						type: 'bool',
 						default: false,
 					},
+					loop: {
+						type: 'bool',
+						default: true,
+					},
 				},
 			},
 			lottieFile: {

src/lottie.css

@@ -1,4 +1,5 @@
-[data-lottie] {
+[data-lottie],
+[data-lottie] .wp-block-media-text__media {
 	position: relative;
 }
 

src/lottie.js

@@ -22,6 +22,8 @@ document.querySelectorAll( '[data-lottie]' ).forEach( ( lottie ) => {
 		canvas.style.aspectRatio = `${ pxWidth } / ${ pxHeight }`;
 	}
 
+	const isLazy = img.loading === 'lazy';
+
 	// Append - ensure if a link is used the canvas is inside to pick up clickable area.
 	img.parentElement.appendChild( canvas );
 
@@ -37,11 +39,54 @@ document.querySelectorAll( '[data-lottie]' ).forEach( ( lottie ) => {
 
 	if ( ! config.trigger ) {
 		playerConfig.autoplay = true;
-		playerConfig.loop = true;
+	}
+
+	if ( config?.trigger !== 'hover' ) {
+		playerConfig.loop = config?.loop ?? true;
+	}
+
+	if ( config?.bounce ) {
+		playerConfig.mode = 'bounce';
 	}
 
 	let current = {};
 	let dotLottie;
+	let observer;
+	let loaded = false;
+	let started = false;
+
+	// Only animate when in view.
+	observer = new IntersectionObserver(
+		( entries ) => {
+			entries.forEach( ( entry ) => {
+				if ( ! dotLottie ) {
+					return;
+				}
+
+				if ( entry.isIntersecting ) {
+					if ( ! loaded && isLazy ) {
+						loaded = true;
+						dotLottie.load( {
+							src: breakpoint.src,
+						} );
+					}
+					console.log( 'unfreeze' );
+					if ( ! started || playerConfig.loop ) {
+						started = true;
+						dotLottie.play();
+					}
+				} else {
+					console.log( 'freeze' );
+					dotLottie.pause();
+				}
+			} );
+		},
+		{
+			threshold: [ 0, 1 ],
+		}
+	);
+
+	observer.observe( canvas );
 
 	function setAnimation() {
 		let breakpoint = null;
@@ -59,9 +104,12 @@ document.querySelectorAll( '[data-lottie]' ).forEach( ( lottie ) => {
 				dotLottie.destroy();
 			}
 
+			if ( ! isLazy ) {
+				playerConfig.src = breakpoint.src;
+			}
+
 			dotLottie = new DotLottie( {
 				canvas,
-				src: breakpoint.src,
 				...playerConfig,
 			} );
 
@@ -72,11 +120,11 @@ document.querySelectorAll( '[data-lottie]' ).forEach( ( lottie ) => {
 			}
 
 			if ( config.trigger === 'hover' ) {
-				canvas.addEventListener( 'mouseover', () => {
+				img.parentElement.addEventListener( 'mouseenter', () => {
 					dotLottie.setMode( 'forward' );
 					dotLottie.play();
 				} );
-				canvas.addEventListener( 'mouseout', () => {
+				img.parentElement.addEventListener( 'mouseleave', () => {
 					dotLottie.setMode( 'reverse' );
 				} );
 			}