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

finished demos, docs updates

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-07-21 14:02:56 -04:00
parent 346827ef65
commit 48679a970c
Failed to extract signature
6 changed files with 71 additions and 257 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -64,11 +64,6 @@ The `ScrollerBase` component powers the [`Scroller` component](?path=/story/comp
<style lang="scss"> <style lang="scss">
@use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins; @use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;
.scroller-demo-container {
width: mixins.$column-width-normal;
margin: auto;
}
.step-foreground-container { .step-foreground-container {
height: 100vh; height: 100vh;
width: 50%; width: 50%;

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

@ -343,176 +343,62 @@ endTime: 0.3 # When to stop showing the headline
## Using with `ScrollerBase` ## Using with `ScrollerBase`
The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs) component to add foreground content. This allows for more complex interactions and layouts, such as adding ai2svelte components in the foreground. The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs) component to add foreground content. This allows for foreground that scrolls up and down over the video, instead of fading in and out at specific times.
> **Note**: To use `ScrollyVideo` with `ScrollerBase`, set `trackScroll` to `false` and pass the bindable prop `progress` from `ScrollerBase` as `videoPercentage` to `ScrollyVideo`.
[Demo](?path=/story/components-graphics-scrollyvideo--scroller-base) [Demo](?path=/story/components-graphics-scrollyvideo--scroller-base)
```svelte ```svelte
<script lang="ts"> <script lang="ts">
import { import {
Headline,
GraphicBlock,
ScrollyVideo, ScrollyVideo,
ScrollerBase, ScrollerBase,
} from '@reuters-graphics/graphics-components'; } from '@reuters-graphics/graphics-components';
import AiMap from './ai2svelte/ai-chart.svelte';
// ScrollerBase props // Pass `progress` as `videoPercentage` to ScrollyVideo
let count = $state(1);
let index = $state(0);
let offset = $state(0);
let progress = $state(0); let progress = $state(0);
let top = $state(0);
let threshold = $state(0);
let bottom = $state(1);
</script> </script>
<div class="scroller-demo-container">
<ScrollerBase <ScrollerBase
{top}
{threshold}
{bottom}
bind:count
bind:index
bind:offset
bind:progress bind:progress
query="div.step-foreground-container" query="div.step-foreground-container"
visible
> >
{#snippet backgroundSnippet()} {#snippet backgroundSnippet()}
<!-- Add custom background HTML or component --> <!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` -->
<div id="progress-bar">
<p>
Current step: <strong>{index + 1}/{count}</strong>
</p>
<progress value={(index + 1) / count}></progress>
<p>Offset in current step</p>
<progress value={offset}></progress>
<p>Total progress</p>
<progress value={progress}></progress>
</div>
<ScrollyVideo <ScrollyVideo
src={`src/components/ScrollyVideo/videos/goldengate.mp4`} src='my-video.mp4'
height="100svh"
trackScroll={false}
videoPercentage={progress} videoPercentage={progress}
objectFit="cover" trackScroll={false}
showDebugInfo
{embedded}
/> />
{/snippet} {/snippet}
{#snippet foregroundSnippet()} {#snippet foregroundSnippet()}
<!-- Add custom foreground HTML or component --> <!-- Add custom foreground HTML or component -->
<div class="step-foreground-container"> <div class="step-foreground-container">
<div class="fg-child-container"> <h3 class="text-center">Step 1</h3>
<Headline </div>
class="custom-headline" <div class="step-foreground-container">
hed="ScrollyVideo inside ScrollerBase" <h3 class="text-center">Step 2</h3>
dek="This is a demo of ScrollyVideo inside ScrollerBase component." </div>
section={'Reuters Graphics'} <div class="step-foreground-container">
authors={['Jane Doe']} <h3 class="text-center">Step 3</h3>
publishTime={new Date('2020-01-01').toISOString()} </div>
/>
</div>
</div>
<div class="step-foreground-container"><p>Step 2</p></div>
<div class="step-foreground-container">
<div class="fg-child-container">
<GraphicBlock
title="Earthquake in Haiti"
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
>
<AiMap />
</GraphicBlock>
</div>
</div>
<div class="step-foreground-container"><p>Step 4</p></div>
<div class="step-foreground-container"><p>Step 5</p></div>
{/snippet} {/snippet}
</ScrollerBase> </ScrollerBase>
</div>
<style lang="scss"> <style lang="scss">
@use '../../../scss/mixins' as mixins;
#progress-bar {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
z-index: 2;
right: 0;
padding: 1rem;
progress {
height: 6px;
background-color: #ff000044; /* Background color of the entire bar */
}
progress::-webkit-progress-value {
background-color: white;
border-radius: 10px;
}
progress::-webkit-progress-bar {
background-color: #444444;
border-radius: 10px;
}
p {
font-family: var(--theme-font-family-sans-serif);
color: white;
font-size: var(--theme-font-size-xs);
padding: 0;
margin: 0;
}
}
#debugger {
width: 100%;
height: 100vh;
background-color: hotpink;
position: absolute;
top: 0;
left: 0;
z-index: 1;
img {
width: 100%;
height: 100%;
object-fit: cover;
padding: 0;
margin: 0;
}
}
.step-foreground-container { .step-foreground-container {
height: 100vh; height: 100vh;
width: 100%; width: 50%;
padding: 1em; padding: 1em;
position: relative; margin: auto;
border: 1px solid red;
.fg-child-container { h3 {
position: absolute; display: flex;
top: 50%; align-items: center;
left: 50%; justify-content: center;
transform: translate(-50%, -50%); height: 100%;
text-align: center;
width: 100%;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-size: 2em;
color: white; color: white;
font-family: var(--theme-font-family-sans-serif);
} }
} }
</style> </style>
@ -522,6 +408,8 @@ The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/
For advanced use cases such as looping a particular section of the video, or jumping to a specific time in the video, you can bind `scrollyVideo` prop and take benefits of methods such as `setVideoPercentage` or bindable methods such as `onReady` and `onChange`. This allows for fine-grained control over the video playback and interaction with the scroll position. For advanced use cases such as looping a particular section of the video, or jumping to a specific time in the video, you can bind `scrollyVideo` prop and take benefits of methods such as `setVideoPercentage` or bindable methods such as `onReady` and `onChange`. This allows for fine-grained control over the video playback and interaction with the scroll position.
[Demo](?path=/story/components-graphics-scrollyvideo--advanced)
```js ```js
scrollyVideo.setVideoPercentage(0.5, { scrollyVideo.setVideoPercentage(0.5, {
jump: false, jump: false,

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

@ -129,6 +129,7 @@
import Video_MD from './videos/waves_md.mp4'; import Video_MD from './videos/waves_md.mp4';
import Video_LG from './videos/waves_lg.mp4'; import Video_LG from './videos/waves_lg.mp4';
import Goldengate from './videos/goldengate.mp4'; import Goldengate from './videos/goldengate.mp4';
import AdvancedUsecases from './demo/AdvancedUsecases.svelte';
const videoSrc = { const videoSrc = {
Video_SM, Video_SM,
@ -204,3 +205,7 @@
<Story name="Using with ScrollerBase" exportName="ScrollerBase" {args}> <Story name="Using with ScrollerBase" exportName="ScrollerBase" {args}>
<WithScrollerBase /> <WithScrollerBase />
</Story> </Story>
<Story name="Advanced usecases" exportName="Advanced" {args}>
<AdvancedUsecases />
</Story>

8
src/components/ScrollyVideo/ScrollyVideo.svelte
View file

@ -138,7 +138,7 @@
// If we need to update the target time percent // If we need to update the target time percent
if ( if (
scrollyVideo && scrollyVideo &&
typeof videoPercentage === 'number' && videoPercentage &&
videoPercentage >= 0 && videoPercentage >= 0 &&
videoPercentage <= 1 videoPercentage <= 1
) { ) {
@ -193,12 +193,6 @@
{#if showDebugInfo && dev} {#if showDebugInfo && dev}
<div class="debug-info"> <div class="debug-info">
<Debug componentState={scrollyVideo.componentState} /> <Debug componentState={scrollyVideo.componentState} />
<!-- <p class="text-xxs font-sans"> -->
<!-- {@html JSON.stringify(flattenObject(scrollyVideo.componentState))
.replace(/[{}"]/g, '')
.split(',')
.join('<br>')} -->
<!-- </p> -->
</div> </div>
{/if} {/if}

5
src/components/ScrollyVideo/demo/AdvancedUsecases.svelte Normal file
View file

@ -0,0 +1,5 @@
<script lang="ts">
/** Sudev -- Can you add a demo for the advanced use cases? I'm not sure what the use case would be and seeing an example would help*/
</script>
TKTK

135
src/components/ScrollyVideo/demo/WithScrollerBase.svelte
View file

@ -1,88 +1,35 @@
<script lang="ts"> <script lang="ts">
import ScrollyVideo from '../ScrollyVideo.svelte'; import ScrollyVideo from '../ScrollyVideo.svelte';
import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte'; import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
import Headline from '../../Headline/Headline.svelte';
import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
import AiMap from './graphic/ai2svelte/ai-chart.svelte';
import Goldengate from '../videos/goldengate.mp4'; import Goldengate from '../videos/goldengate.mp4';
// ScrollerBase props // ScrollerBase props
let count = $state(1);
let index = $state(0);
let offset = $state(0);
let progress = $state(0); let progress = $state(0);
let top = $state(0);
let threshold = $state(0);
let bottom = $state(1);
</script> </script>
<div class="scroller-demo-container"> <ScrollerBase bind:progress query="div.step-foreground-container" visible>
<ScrollerBase {#snippet backgroundSnippet()}
{top} <ScrollyVideo
{threshold} src={Goldengate}
{bottom} height="100svh"
bind:count trackScroll={false}
bind:index videoPercentage={progress}
bind:offset showDebugInfo
bind:progress />
query="div.step-foreground-container" {/snippet}
visible {#snippet foregroundSnippet()}
> <!-- Add custom foreground HTML or component -->
{#snippet backgroundSnippet()} <div class="step-foreground-container">
<!-- Add custom background HTML or component --> <h3 class="text-center">Step 1</h3>
<div id="progress-bar"> </div>
<p> <div class="step-foreground-container">
Current step: <strong>{index + 1}/{count}</strong> <h3 class="text-center">Step 2</h3>
</p> </div>
<progress value={(index + 1) / count}></progress> <div class="step-foreground-container">
<h3 class="text-center">Step 3</h3>
<p>Offset in current step</p> </div>
<progress value={offset}></progress> {/snippet}
</ScrollerBase>
<p>Total progress</p>
<progress value={progress}></progress>
</div>
<ScrollyVideo
src={Goldengate}
height="100svh"
trackScroll={false}
videoPercentage={progress}
objectFit="cover"
showDebugInfo
/>
{/snippet}
{#snippet foregroundSnippet()}
<!-- Add custom foreground HTML or component -->
<div class="step-foreground-container">
<div class="fg-child-container">
<Headline
class="custom-headline"
hed="ScrollyVideo inside ScrollerBase"
dek="This is a demo of ScrollyVideo inside ScrollerBase component."
section={'Reuters Graphics'}
authors={['Jane Doe']}
publishTime={new Date('2020-01-01').toISOString()}
/>
</div>
</div>
<div class="step-foreground-container"><p>Step 2</p></div>
<div class="step-foreground-container">
<div class="fg-child-container">
<GraphicBlock
title="Earthquake in Haiti"
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
>
<AiMap />
</GraphicBlock>
</div>
</div>
<div class="step-foreground-container"><p>Step 4</p></div>
<div class="step-foreground-container"><p>Step 5</p></div>
{/snippet}
</ScrollerBase>
</div>
<style lang="scss"> <style lang="scss">
@use '../../../scss/mixins' as mixins; @use '../../../scss/mixins' as mixins;
@ -120,37 +67,17 @@
.step-foreground-container { .step-foreground-container {
height: 100vh; height: 100vh;
width: 100%; width: 50%;
padding: 1em; padding: 1em;
position: relative; margin: auto;
border: 1px solid red;
.fg-child-container { h3 {
position: absolute; // align center
top: 50%; display: flex;
left: 50%; align-items: center;
transform: translate(-50%, -50%); justify-content: center;
text-align: center; height: 100%;
width: 100%;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-size: 2em;
color: white; color: white;
font-family: var(--theme-font-family-sans-serif);
}
:global(.custom-headline *) {
color: white;
}
:global(.fg-child-container:last-child *) {
color: white !important;
} }
} }
</style> </style>