wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finished editing docs/demo for achieml foregrouds

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-07-17 16:25:17 -04:00
parent a5e478575e
commit 096026a7eb
Failed to extract signature
6 changed files with 139 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/components/ScrollyVideo/ScrollyVideo.mdx
View file

@ -118,89 +118,102 @@ The `autoplay` option combines the autoplay and scrollytelling experience. If se
## Time-based foregrounds with ArchieML
The `ScrollyVideo` component can also be used to display foregrounds, such as headlines, blurbs, or ai2svelte components, at specific times in the video. To do so, use the `Foreground` component.
The `ScrollyVideo` component can also be used to display foregrounds, such as headlines, blurbs, or ai2svelte components, at specific times in the video. To do so, use the `ScrollyVideoForeground` component.
[Demo](?path=/story/components-graphics-scrollyvideo--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: 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
src: videos/alps.mp4
height: 800svh
# Array of foregrounds
[.foregrounds]
startTime: 3
endTime: 7
text: #### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).
startTime: 3 # When in the video to start showing the foreground
endTime: 7 # When to stop showing the foreground
width: normal # text container width
position: bottom center # Position of the text. Optional; defaults to 'center center'. Must be a combination of `top/bottom/center center/left/right`
backgroundColour: rgba(0, 0, 0, 0.8) # Optional; defaults to white
text: #### The Alps
The Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).
:end
startTime: 9
endTime: 12
width: normal
position: bottom center
backgroundColour: rgba(0, 0, 0, 0.8)
text: Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies.
:end
startTime: 16
endTime: 20
text: #### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward.Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually.
width: normal
position: bottom center
backgroundColour: rgba(0, 0, 0, 0.8)
text: #### History
The Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward.Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually.
:end
[]
[]
```
... which you'll parse out of a ArchieML block object before passing to the `ScrollyVideo` and `Foreground` components.
... which you'll parse out of a ArchieML block object before passing to the `ScrollyVideo` and `ScrollyVideoForeground` components.
```svelte
<script lang="ts">
import {
ScrollyVideo,
Foreground,
ScrollyVideoForeground
} from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths';
import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
</script>
{#if block.type == 'scrolly-video'}
<ScrollyVideo id={block.id} src={block.src} height={block.height}>
<Foreground startTime={0} endTime={2}>
<ScrollyVideo id={block.id} src={`${assets}/${block.src}}`} height={block.height}>
<!-- You can wrap components, such as `Headline`, inside `ScrollyVideoForeground` and make them appear/disappear at specific times -->
<ScrollyVideoForeground startTime={parseFloat(content.startTime)} endTime={parseFloat(content.endTime)}>
<Headline
class="custom-headline"
hed={content.hed}
dek={content.dek}
section={content.section}
sectionUrl={content.sectionUrl}
hed={content.hed}
authors={content.authors}
publishTime={content.publishedDate}
updateTime={content.updatedDate}
/>
</Foreground>
</ScrollyVideoForeground>
<!-- Loop through foregrounds to add text blurbs that appear/disappear at specific times -->
{#each block.foregrounds as foreground}
<Foreground
<ScrollyVideoForeground
startTime={parseFloat(foreground.startTime)}
endTime={parseFloat(foreground.endTime)}
width={foreground.width}
position={foreground.position}
backgroundColour={foreground.backgroundColour}
text={foreground.text}
backgroundColor="rgba(0, 0, 0, 0.8)"
position="bottom center"
/>
{/each}
</ScrollyVideo>
{/if}
<style lang="scss">
:global {
.custom-headline * {
color: white;
text-shadow: 0 0 10px black;
}
#alps-scrolly .foreground-text {
* {
color: white;
}
}
}
</style>
```
@ -208,7 +221,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
The `ScrollyVideo` component can also be used to display different foregrounds based on the current time in the video. This is useful for creating interactive experiences where the content changes as the video progresses. To throw off some ideas, one could add `Headline`, `GraphicBlock`, `FeaturePhoto` or any other component to the foreground based on the current time in the video. This can be achieved by adding `Foreground` components, along with their **startTime** and **endTime**, as a child to the main `ScrollyVideo` component.
[Demo](?path=/story/components-graphics-scrollyvideo--time-based-foregrounds)
[Demo](?path=/story/components-graphics-scrollyvideo--ai-2-svelte-foregrounds)
```svelte
<script lang="ts">

26
src/components/ScrollyVideo/ScrollyVideo.stories.svelte
View file

@ -2,7 +2,7 @@
import { defineMeta } from '@storybook/addon-svelte-csf';
import ScrollyVideo from './ScrollyVideo.svelte';
import WithScrollerBase from './demo/WithScrollerBase.svelte';
import WithTimeline from './demo/WithTimeline.svelte';
import WithAi2svelteForegrounds from './demo/WithAi2svelteForegrounds.svelte';
import WithTextForegrounds from './demo/WithTextForegrounds.svelte';
const { Story } = defineMeta({
@ -185,14 +185,22 @@
></ScrollyVideo>
</Story>
<Story
name="Time-based foregrounds with ArchieML"
exportName="ArchieMLForegrounds"
{args}
>
<WithTextForegrounds />
</Story>
<Story
name="Time-based ai2svelte foregrounds"
exportName="Ai2svelteForegrounds"
{args}
>
<WithAi2svelteForegrounds />
</Story>
<Story name="Using with ScrollerBase" exportName="ScrollerBase" {args}>
<WithScrollerBase />
</Story>
<Story name="Time based foregrounds" {args}>
<WithTimeline />
</Story>
<Story name="Basic text foreground" {args}>
<WithTextForegrounds />
</Story>

6
src/components/ScrollyVideo/ScrollyVideoForeground.svelte
View file

@ -18,7 +18,7 @@
startTime?: number;
endTime?: number;
children?: Snippet;
backgroundColor?: string;
backgroundColour?: string;
width?: ContainerWidth;
position?: ScrollyVideoForegroundPosition | string;
text?: string | undefined;
@ -30,7 +30,7 @@
startTime = 0,
endTime = 1,
children,
backgroundColor = '#000',
backgroundColour = '#000',
width = 'normal',
position = 'center center',
text,
@ -57,7 +57,7 @@
{width}
>
<div
style="background-color: {backgroundColor};"
style="background-color: {backgroundColour};"
class="foreground-text {position.split(' ')[0]}"
>
<Markdown source={text} />

0
src/components/ScrollyVideo/demo/WithTimeline.svelte → src/components/ScrollyVideo/demo/WithAi2svelteForegrounds.svelte
View file

95
src/components/ScrollyVideo/demo/WithTextForegrounds.svelte
View file

@ -3,52 +3,87 @@
import ScrollyVideoForeground from '../ScrollyVideoForeground.svelte';
import Drone from '../videos/drone.mp4';
import Headline from '../../Headline/Headline.svelte';
import type { ContainerWidth } from '../../@types/global';
const content = {
hed: 'The Alps',
authors: ['Jane Doe'],
publishTime: '2020-01-01T00:00:00Z',
startTime: '0',
endTime: '2',
blocks: [
{
type: 'scrolly-video',
id: 'alps-scrolly',
src: 'videos/alps.mp4',
height: '800svh',
foregrounds: [
{
startTime: '3',
endTime: '7',
width: 'normal',
position: 'bottom center',
backgroundColour: 'rgba(0, 0, 0, 0.8)',
text: '#### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).',
},
{
startTime: '9',
endTime: '12',
width: 'normal',
position: 'bottom center',
backgroundColour: 'rgba(0, 0, 0, 0.8)',
text: "Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies.",
},
{
startTime: '16',
endTime: '20',
width: 'normal',
position: 'bottom center',
backgroundColour: 'rgba(0, 0, 0, 0.8)',
text: '#### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward. Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually.',
},
],
},
],
};
const scrollyVideoBlock = content.blocks[0];
</script>
<ScrollyVideo
id="alps-scrolly"
height="800svh"
id={scrollyVideoBlock.id}
height={scrollyVideoBlock.height}
src={Drone}
useWebCodecs={true}
showDebugInfo
>
<ScrollyVideoForeground startTime={0} endTime={2}>
<ScrollyVideoForeground
startTime={parseFloat(content.startTime)}
endTime={parseFloat(content.endTime)}
>
<Headline
class="custom-headline"
hed="The Alps"
dek="Where better to start than with the Matterhorn?"
section={'Reuters Graphics'}
authors={['Jane Doe']}
publishTime={new Date('2020-01-01').toISOString()}
hed={content.hed}
authors={content.authors}
publishTime={new Date(content.publishTime).toISOString()}
hedSize="bigger"
/>
</ScrollyVideoForeground>
<ScrollyVideoForeground
startTime={3}
endTime={7}
backgroundColor="rgba(0, 0, 0, 0.8)"
text={'#### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).'}
position="bottom center"
></ScrollyVideoForeground>
<ScrollyVideoForeground
startTime={9}
endTime={12}
backgroundColor="rgba(0, 0, 0, 0.8)"
text={"Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies."}
position="bottom center"
></ScrollyVideoForeground>
<ScrollyVideoForeground
startTime={16}
endTime={20}
backgroundColor="rgba(0, 0, 0, 0.8)"
text={'#### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward.Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually.'}
position="bottom center"
></ScrollyVideoForeground>
{#each scrollyVideoBlock.foregrounds as foreground}
<ScrollyVideoForeground
startTime={parseFloat(foreground.startTime)}
endTime={parseFloat(foreground.endTime)}
width={foreground.width as ContainerWidth}
position={foreground.position}
text={foreground.text}
backgroundColour={foreground.backgroundColour}
/>
{/each}
</ScrollyVideo>
<style lang="scss">
:global(.custom-headline *) {
color: white;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
}

5
src/components/SiteHeadline/SiteHeadline.mdx
View file

@ -39,7 +39,10 @@ With the graphics kit, you'll likely get your text value from an ArchieML doc...
section: Global News # Optional
sectionUrl: https://www.reuters.com/graphics/ # Optional
hed: A beautiful page
authors: Samuel Granados, Dea Bankova
[authors]
* Samuel Granados
* Dea Bankova
[]
published: 2022-09-12T08:30:00.000Z
updated:
```