diff --git a/src/components/ScrollyVideo/ScrollyVideo.mdx b/src/components/ScrollyVideo/ScrollyVideo.mdx index ba09ddf1..525e93b3 100644 --- a/src/components/ScrollyVideo/ScrollyVideo.mdx +++ b/src/components/ScrollyVideo/ScrollyVideo.mdx @@ -118,7 +118,7 @@ The `autoplay` option combines the autoplay and scrollytelling experience. If se ## Time-based text foregrounds with ArchieML -The `ScrollyVideo` component can also be used to display text as foregrounds at specific times in the video. To do so, use the `ScrollyVideoForeground` component. +The `ScrollyVideo` component can also be used to display text as foregrounds at specific times in the video. To do so, use the `text` prop in `ScrollyVideoForeground` component. [Demo](?path=/story/components-graphics-scrollyvideo--archie-ml-foregrounds) @@ -127,15 +127,6 @@ With the graphics kit, you'll likely get your text and prop values from an Archi ```yaml # ArchieML doc -# Headline -hed: The Alps -[authors] - * Jane Doe -[] -publishTime: 2020-01-01T00:00:00Z -startTime: 0 # When in the video to start showing the headline -endTime: 2 # When to stop showing the headline - [blocks] type: scrolly-video id: alps-scrolly @@ -188,49 +179,91 @@ endTime: 2 # When to stop showing the headline } from '@reuters-graphics/graphics-components'; import { assets } from '$app/paths'; // 👈 If using in the graphics kit... - -{#if block.type == 'scrolly-video'} - - - - - - - - - {#each block.foregrounds as foreground} - - {/each} - -{/if} +{#each content.blocks as block} + + {#if block.type == 'scrolly-video'} + + + {#each block.foregrounds as foreground} + + {/each} + + {/if} +{/each} ``` ## Time-based component foregrounds with ArchieML -The `ScrollyVideo` component can also be used to display components, such as `Headline` or ai2svelte files, as foregrounds at specific times in the video. To do so, use the `ScrollyVideoForeground` component. +The `ScrollyVideo` component can also be used to display components, such as `Headline` or ai2svelte files, as foregrounds at specific times in the video. To do so, use the `Foreground` prop in `ScrollyVideoForeground` component. + +> **IMPORTANT❗**: When layering ai2svelte files over a video, the aspect ratio of the ai2svelte graphics should match that of the video. If the ai2svelte graphic is responsive and has, for example, small, medium and large verisons — which is generally the case — make sure to also render small, medium and large versions of the video at the appropriate screen sizes. See [Responsive videos](#responsive-videos) for more details. [Demo](?path=/story/components-graphics-scrollyvideo--component-archie-ml-foregrounds) With the graphics kit, you'll likely get your text and prop values from an ArchieML doc... +```yaml +# ArchieML doc + +# Headline +hed: Wind and waves +[authors] + * Jane Doe +[] +publishTime: 2020-01-01T00:00:00Z +startTime: 0 # When in the video to start showing the headline +endTime: 0.3 # When to stop showing the headline + +[blocks] + type: scrolly-video + id: my-scrolly-video + height: 800svh + + # Adjust prop names as needed + srcSm: videos/my-video-sm.mp4 + srcMd: videos/my-video-md.mp4 + srcLg: videos/my-video-lg.mp4 + + # Array of foregrounds + [.foregrounds] + startTime: 0.3 # When in the video to start showing the foreground + endTime: 2.2 # When to stop showing the foreground + width: fluid # foreground container width + Foreground: Foreground1 # Name of the ai2svelte component to render + + startTime: 2.2 + endTime: 3.2 + width: fluid + Foreground: Foreground2 + + startTime: 3.2 + endTime: 4.5 + width: fluid + Foreground: Foreground3 + + startTime: 6.5 + endTime: 8 + width: fluid + Foreground: Foreground4 + [] +[] +``` + +... which you'll parse out of a ArchieML block object before passing to the `ScrollyVideo` and `ScrollyVideoForeground` components. + + ```svelte -{#snippet ScrollForeground()} - - - - - - - - - - - - - - - - - - - - - - - -{/snippet} + +{#each content.blocks as block} -{#snippet ScrollVideo(height: string, VideoSrc: string)} - - {@render ScrollForeground()} - -{/snippet} + {#if block.type == 'scrolly-video'} -{#if width < 600} - {@render ScrollVideo('800svh', `${assets}/videos/sm.mp4`)} -{:else if width < 1200} - {@render ScrollVideo('800svh', `${assets}/videos/md.mp4`)} -{:else} - {@render ScrollVideo('800svh', `${assets}/videos/lg.mp4`)} -{/if} + + {#snippet ScrollVideo(height: string, src: string)} + + + + + - + + {#if width < 600} + {@render ScrollVideo({block.height}, `${assets}/${block.srcSm}`)} + {:else if width < 1200} + {@render ScrollVideo({block.height}, `${assets}/${block.srcMd}`)} + {:else} + {@render ScrollVideo({block.height}, `${assets}/${block.srcLg}`)} + {/if} +{/each} ``` diff --git a/src/components/ScrollyVideo/ScrollyVideoForeground.svelte b/src/components/ScrollyVideo/ScrollyVideoForeground.svelte index f864a38e..7a1f304e 100644 --- a/src/components/ScrollyVideo/ScrollyVideoForeground.svelte +++ b/src/components/ScrollyVideo/ScrollyVideoForeground.svelte @@ -21,7 +21,8 @@ backgroundColour?: string; width?: ContainerWidth; position?: ScrollyVideoForegroundPosition | string; - foreground?: string | Component; + text?: string; + Foreground?: Component; } let { @@ -33,7 +34,8 @@ backgroundColour = '#000', width = 'normal', position = 'center center', - foreground, + text, + Foreground, }: ForegroundProps = $props(); let componentState: ScrollyVideoState = getContext('scrollyVideoState'); @@ -46,27 +48,31 @@ in:fade={{ delay: 100, duration: 200 }} out:fade={{ delay: 0, duration: 100 }} > -
- {#if children} - {@render children()} - {/if} -
- {#if foreground} - {#if typeof foreground === 'string'} - + {#if text} + +
-
- -
+ +
+ + + {:else if children} +
+ {@render children()} +
+ + {:else if Foreground} +
+ + - {:else} - {foreground} - {/if} +
{/if} {/if} diff --git a/src/components/ScrollyVideo/demo/WithAi2svelteForegrounds.svelte b/src/components/ScrollyVideo/demo/WithAi2svelteForegrounds.svelte index 52919120..78562110 100644 --- a/src/components/ScrollyVideo/demo/WithAi2svelteForegrounds.svelte +++ b/src/components/ScrollyVideo/demo/WithAi2svelteForegrounds.svelte @@ -5,13 +5,20 @@ import MD from '../videos/waves_md.mp4'; import LG from '../videos/waves_lg.mp4'; import Headline from '../../Headline/Headline.svelte'; - import Block from '../../Block/Block.svelte'; // Foreground ai2svelte components - import Annotation1 from './graphic/ai2svelte/annotation1.svelte'; - import Annotation2 from './graphic/ai2svelte/annotation2.svelte'; - import Annotation3 from './graphic/ai2svelte/annotation3.svelte'; - import Annotation4 from './graphic/ai2svelte/annotation4.svelte'; + import Foreground1 from './graphic/ai2svelte/annotation1.svelte'; + import Foreground2 from './graphic/ai2svelte/annotation2.svelte'; + import Foreground3 from './graphic/ai2svelte/annotation3.svelte'; + import Foreground4 from './graphic/ai2svelte/annotation4.svelte'; + + // Foreground ai2svelte graphics components + const aiChartsForeground = { + Foreground1, + Foreground2, + Foreground3, + Foreground4, + }; const content = { hed: 'Wind and waves', @@ -29,19 +36,25 @@ startTime: '0.3', endTime: '2.2', width: 'fluid', - foregroud: 'Annotation1', + foreground: 'Foreground1', }, { - startTime: '7', - endTime: '12', + startTime: '2.2', + endTime: '3.2', width: 'fluid', - foreground: 'Annotation2', + foreground: 'Foreground2', }, { - startTime: '14', - endTime: '20', + startTime: '3.2', + endTime: '4.5', width: 'fluid', - foreground: 'Annotation3', + foreground: 'Foreground3', + }, + { + startTime: '6.5', + endTime: '8', + width: 'fluid', + foreground: 'Foreground4', }, ], }, @@ -50,62 +63,49 @@ const scrollyVideoBlock = content.blocks[0]; let width = $state(1); - - let src = $derived(() => { - if (width < 600) return '../videos/waves_sm.mp4'; - else if (width < 1200) return '../videos/waves_md.mp4'; - else return '../videos/waves_lg.mp4'; - }); -{#snippet ScrollVideo(height: string, VideoSrc: string)} +{#snippet ScrollVideo(height: string, src: string)} - + - {#each scrollyVideoBlock.foregrounds as foreground, idx} - {#if foreground.foreground} - - - {#if idx === 0} - - {:else if idx === 1} - - {:else if idx === 2} - - {:else if idx === 3} - - {/if} - - - {/if} + {#each scrollyVideoBlock.foregrounds as foreground} + {/each} {/snippet} {#if width < 600} - {@render ScrollVideo('800svh', SM)} + {@render ScrollVideo(scrollyVideoBlock.height, SM)} {:else if width < 1200} - {@render ScrollVideo('800svh', MD)} + {@render ScrollVideo(scrollyVideoBlock.height, MD)} {:else} - {@render ScrollVideo('800svh', LG)} + {@render ScrollVideo(scrollyVideoBlock.height, LG)} {/if}