From 867155c189fd6d1e7fd0cca7c6fe1f7ee2121066 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 1 Dec 2025 13:42:14 -0500 Subject: [PATCH 01/12] type files refactoring/cleaning --- .../ScrollerLottie/ScrollerLottie.svelte | 55 +++---------------- src/components/ScrollerLottie/ts/types.ts | 46 ++++++++++++++++ 2 files changed, 55 insertions(+), 46 deletions(-) create mode 100644 src/components/ScrollerLottie/ts/types.ts diff --git a/src/components/ScrollerLottie/ScrollerLottie.svelte b/src/components/ScrollerLottie/ScrollerLottie.svelte index 36772dcb..ce4cfd0b 100644 --- a/src/components/ScrollerLottie/ScrollerLottie.svelte +++ b/src/components/ScrollerLottie/ScrollerLottie.svelte @@ -1,57 +1,20 @@ - + diff --git a/src/components/ScrollerLottie/ScrollerLottie.svelte b/src/components/ScrollerLottie/ScrollerLottie.svelte index c3cdff8f..90c03afa 100644 --- a/src/components/ScrollerLottie/ScrollerLottie.svelte +++ b/src/components/ScrollerLottie/ScrollerLottie.svelte @@ -107,14 +107,17 @@ } } - const hoverHandler = (event: MouseEvent) => { - if (!playOnHover || !lottiePlayer?.isLoaded) return; - if (event.type === 'mouseenter') { - lottiePlayer?.play(); - } else if (event.type === 'mouseleave') { - lottiePlayer?.pause(); + function handleMouseEnter() { + if (playOnHover && lottiePlayer?.isLoaded) { + lottiePlayer.play(); } - }; + } + + function handleMouseLeave() { + if (playOnHover && lottiePlayer?.isLoaded) { + lottiePlayer.pause(); + } + } onMount(() => { const shouldAutoplay = autoplay && !playOnHover; @@ -149,12 +152,7 @@ dotLottieRefCallback(lottiePlayer); } - canvas.addEventListener('mouseenter', hoverHandler); - canvas.addEventListener('mouseleave', hoverHandler); - return () => { - canvas.removeEventListener('mouseenter', hoverHandler); - canvas.removeEventListener('mouseleave', hoverHandler); lottiePlayer?.destroy(); }; }); @@ -391,6 +389,8 @@ bind:this={canvas} bind:clientWidth={canvasWidth} bind:clientHeight={canvasHeight} + onmouseenter={handleMouseEnter} + onmouseleave={handleMouseLeave} > From 87749bf6b83c0aae7927e1ab82e625c7f636148f Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 1 Dec 2025 14:00:07 -0500 Subject: [PATCH 04/12] clean up event listener destroy redundancy --- .../ScrollerLottie/ScrollerLottie.svelte | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/ScrollerLottie/ScrollerLottie.svelte b/src/components/ScrollerLottie/ScrollerLottie.svelte index 90c03afa..bf242e5b 100644 --- a/src/components/ScrollerLottie/ScrollerLottie.svelte +++ b/src/components/ScrollerLottie/ScrollerLottie.svelte @@ -153,18 +153,15 @@ } return () => { - lottiePlayer?.destroy(); + if (lottiePlayer) { + lottiePlayer.removeEventListener('load', onLoadEvent); + lottiePlayer.removeEventListener('frame', onRenderEvent); + lottiePlayer.removeEventListener('complete', onCompleteEvent); + lottiePlayer.destroy(); + } }; }); - onDestroy(() => { - if (lottiePlayer) { - lottiePlayer.removeEventListener('render', onRender); - lottiePlayer.removeEventListener('load', onLoad); - lottiePlayer.destroy(); - } - }); - // Handles progress change $effect(() => { if (lottieState.isLoaded && lottieState.progress !== progress) { From a4e4d66218e934ffa9edfee7bb4ff2f045749a46 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 1 Dec 2025 14:03:01 -0500 Subject: [PATCH 05/12] gets rid of Block for SREP support --- src/components/ScrollerLottie/ScrollerLottie.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ScrollerLottie/ScrollerLottie.svelte b/src/components/ScrollerLottie/ScrollerLottie.svelte index bf242e5b..9b55dd21 100644 --- a/src/components/ScrollerLottie/ScrollerLottie.svelte +++ b/src/components/ScrollerLottie/ScrollerLottie.svelte @@ -1,6 +1,6 @@ - +
{#if showDebugInfo && lottiePlayer} {/if} @@ -394,12 +393,13 @@ {#if children} {@render children()} {/if} - +
@@ -279,41 +241,90 @@ The `Lottie` component can be used in conjunction with the `ScrollerBase` compon ## With foregrounds -The `Lottie` component can also be used to display captions or even components, such as `Headline` or ai2svelte files, as foregrounds at specific times in the animation. To do so, add LottieForeground components as children of the Lottie component. +The `Lottie` component can also be used with the `LottieForeground` component to display foreground elements at specific times in the animation. -[Demo](?path=/story/components-graphics-scrollerlottie--with-foregrounds) +[Demo](?path=/story/components-graphics-scrollerlottie--with-foregrounds). +```svelte + + + + + + +
+ + + +
+
+ + + +
+``` +### Using with ArchieML With the graphics kit, you'll likely get your text and prop values from an ArchieML doc... ```yaml # ArchieML doc [blocks] type: lottie - src: LottieFile.zip + + # Lottie file stored in `src/statics/lottie/` folder + src: lottie/LottieFile.zip # Array of foregrounds [.foregrounds] + + # Foreground 1: Headline component startFrame: 0 # When in the animation to start showing the foreground endFrame: 50 # When to stop showing the foreground - type: text - {.foregroundProps} - text: Some text for the foreground - {} - startFrame: 50 # When in the animation to start showing the foreground - endFrame: 100 # When to stop showing the foreground - type: component - {.foregroundProps} - componentType: Headline - hed: Some headline text - dek: Some deck text - [.authors] - * Jane Doe - * John Smith - [] - {} - [] - :end + # Set foreground type + type: component + + # Set props to pass into `LottieForeground` + {.foregroundProps} + componentName: Headline + hed: Headline + dek: Some deck text + [.authors] + * Jane Doe + * John Smith + [] + {} + + # Foreground 2: Text only + startFrame: 50 + endFrame: 100 + + # Set foreground type + type: text + + # If the foreground type is `text`, set text prop here + {.foregroundProps} + text: Some text for the foreground + {} [] ``` @@ -328,35 +339,29 @@ With the graphics kit, you'll likely get your text and prop values from an Archi } from '@reuters-graphics/graphics-components'; import { assets } from '$app/paths'; + // Make an object of components to use as foregrounds const Components = $state({ Headline, - Video, }); {#each content.blocks as block} {#if block.type == 'lottie'} - + {#each block.foregrounds as foreground} {#if foreground.type == 'text'} {:else if foreground.type == 'component'} {@const Component = - Components[foreground.foregroundProps.componentType]} + Components[foreground.foregroundProps.componentName]} diff --git a/src/components/Lottie/Lottie.stories.svelte b/src/components/Lottie/Lottie.stories.svelte index 4af36fdf..a8a318a4 100644 --- a/src/components/Lottie/Lottie.stories.svelte +++ b/src/components/Lottie/Lottie.stories.svelte @@ -1,5 +1,7 @@ - +
{#if componentState?.currentFrame && componentState.currentFrame >= startFrame && componentState.currentFrame <= endFrame}
{#if text} - +
{/if} - +