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

formats

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-07-21 14:15:23 -04:00
parent c7e776627f
commit d76d9defaf
Failed to extract signature
1 changed files with 37 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
import { Meta } from '@storybook/blocks'; import { Meta } from '@storybook/blocks';
import * as ScrollyVideoStories from './ScrollyVideo.stories.svelte'; import * as ScrollyVideoStories from './ScrollyVideo.stories.svelte';
<Meta of={ScrollyVideoStories} /> <Meta of={ScrollyVideoStories} />;
# ScrollyVideo # ScrollyVideo
@ -19,14 +19,12 @@ To use the `ScrollyVideo` component, import it and provide the video source. Set
import { ScrollyVideo } from '@reuters-graphics/graphics-components'; import { ScrollyVideo } from '@reuters-graphics/graphics-components';
</script> </script>
<ScrollyVideo <ScrollyVideo src="my-video.mp4" height="500svh" />
src='my-video.mp4'
height="500svh"
/>
``` ```
## Optimising videos ## Optimising videos
When using the `ScrollyVideo` component, minimise the video file size and ensure that the video is encoded in a format that is widely supported across browsers. Videos encoded at higher frames per second (FPS) are bound to crash on phone devices, so 24 FPS is recommended.
When using the `ScrollyVideo` component, minimise the video file size and ensure that the video is encoded in a format that is widely supported across browsers. Videos encoded at higher frames per second (FPS) are bound to crash on phone devices, so 24 FPS is recommended.
> 💡**TIP:** Set the `showDebugInfo` prop to `true` to see video encoding information > 💡**TIP:** Set the `showDebugInfo` prop to `true` to see video encoding information
@ -38,7 +36,6 @@ npx ffmpeg -y -i <input_video_src>.mp4 -c:v libx264 -movflags faststart -crf 20
Adjust the `-crf` value to control the quality. Lower `-crf` value means higher quality, with 20 being a generally good balance. See [Testing Media Capabilities](https://cconcolato.github.io/media-mime-support/mediacapabilities.html) for more. Adjust the `-crf` value to control the quality. Lower `-crf` value means higher quality, with 20 being a generally good balance. See [Testing Media Capabilities](https://cconcolato.github.io/media-mime-support/mediacapabilities.html) for more.
## Responsive videos ## Responsive videos
To show different videos based on the screen width, use the `ScrollyVideo` component with conditional logic that uses a different video source depending on the [window width](https://svelte.dev/docs/svelte/svelte-window). To show different videos based on the screen width, use the `ScrollyVideo` component with conditional logic that uses a different video source depending on the [window width](https://svelte.dev/docs/svelte/svelte-window).
@ -56,30 +53,21 @@ To show different videos based on the screen width, use the `ScrollyVideo` compo
{#if width < 600} {#if width < 600}
<!-- Video with aspect ratio 9:16 for window width smaller than 600px --> <!-- Video with aspect ratio 9:16 for window width smaller than 600px -->
<ScrollyVideo <ScrollyVideo src="my-video-sm.mp4" height="500svh" />
src="my-video-sm.mp4"
height="500svh"
/>
{:else if width < 1200} {:else if width < 1200}
<!-- Video with aspect ratio 1:1 for window width between 600px and 1200px --> <!-- Video with aspect ratio 1:1 for window width between 600px and 1200px -->
<ScrollyVideo <ScrollyVideo src="my-video-md.mp4" height="500svh" />
src= "my-video-md.mp4"
height="500svh"
/>
{:else} {:else}
<!-- Video with aspect ratio 16:9 for window width above 1200px --> <!-- Video with aspect ratio 16:9 for window width above 1200px -->
<ScrollyVideo <ScrollyVideo src="my-video-lg.mp4" height="500svh" />
src="my-video-lg.mp4"
height="500svh"
/>
{/if} {/if}
``` ```
## Embeds ## Embeds
Scrollytelling does not work in iframes. If the prop `embedded` is set to `true`, the video will be rendered as a regular video instead. By default, the video element has the properties `loop`, `muted`, and `playsinline` and `controls`. To customise the video properties, use the `embeddedProps` prop to render the embed video. Scrollytelling does not work in iframes. If the prop `embedded` is set to `true`, the video will be rendered as a regular video instead. By default, the video element has the properties `loop`, `muted`, and `playsinline` and `controls`. To customise the video properties, use the `embeddedProps` prop to render the embed video.
To use a different video for the embedded version, pass its source to the `embeddedSrc` prop. If `embeddedSrc` is not provided, the component will use the `src` prop. To use a different video for the embedded version, pass its source to the `embeddedSrc` prop. If `embeddedSrc` is not provided, the component will use the `src` prop.
> 💡**TIP:** One way to recreate the ScrollyVideo experience for embeds is to record the desktop screen with [Scroll Capture](https://chromewebstore.google.com/detail/scroll-capture/egmhoeaacclmanaimofoooiamhpkimkk?hl=en) while scrollying through the video and use that video instead. > 💡**TIP:** One way to recreate the ScrollyVideo experience for embeds is to record the desktop screen with [Scroll Capture](https://chromewebstore.google.com/detail/scroll-capture/egmhoeaacclmanaimofoooiamhpkimkk?hl=en) while scrollying through the video and use that video instead.
@ -93,9 +81,9 @@ To use a different video for the embedded version, pass its source to the `embed
<!-- Optionally pass `embeddedSrc` and `embeddedProps` --> <!-- Optionally pass `embeddedSrc` and `embeddedProps` -->
<ScrollyVideo <ScrollyVideo
embedded={true} embedded={true}
src='my-video.mp4' src="my-video.mp4"
embeddedSrc='my-video-embedded.mp4' embeddedSrc="my-video-embedded.mp4"
embeddedProps={{ autoplay: true }} embeddedProps={{ autoplay: true }}
/> />
``` ```
@ -110,10 +98,7 @@ The `autoplay` option combines the autoplay and scrollytelling experience. If se
import { ScrollyVideo } from '@reuters-graphics/graphics-components'; import { ScrollyVideo } from '@reuters-graphics/graphics-components';
</script> </script>
<ScrollyVideo <ScrollyVideo src="my-video.mp4" autoplay={true} />
src="my-video.mp4"
autoplay={true}
/>
``` ```
## Time-based text foregrounds with ArchieML ## Time-based text foregrounds with ArchieML
@ -141,7 +126,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
position: bottom center # Position of the text. Optional; defaults to 'center center'. Must be a combination of `top/bottom/center center/left/right` 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 backgroundColour: rgba(0, 0, 0, 0.8) # Optional; defaults to white
text: #### The Alps 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). The Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).
:end :end
@ -161,7 +146,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
position: bottom center position: bottom center
backgroundColour: rgba(0, 0, 0, 0.8) backgroundColour: rgba(0, 0, 0, 0.8)
text: #### History 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. 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 :end
@ -175,14 +160,19 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
<script lang="ts"> <script lang="ts">
import { import {
ScrollyVideo, ScrollyVideo,
ScrollyVideoForeground ScrollyVideoForeground,
} from '@reuters-graphics/graphics-components'; } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the graphics kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
</script> </script>
{#each content.blocks as block} {#each content.blocks as block}
<!-- Inside the content.blocks for loop... --> <!-- Inside the content.blocks for loop... -->
{#if block.type == 'scrolly-video'} {#if block.type == 'scrolly-video'}
<ScrollyVideo id={block.id} src={`${assets}/${block.src}}`} height={block.height}> <ScrollyVideo
id={block.id}
src={`${assets}/${block.src}}`}
height={block.height}
>
<!-- Loop through foregrounds to add text blurbs that appear/disappear at specific times --> <!-- Loop through foregrounds to add text blurbs that appear/disappear at specific times -->
{#each block.foregrounds as foreground} {#each block.foregrounds as foreground}
<ScrollyVideoForeground <ScrollyVideoForeground
@ -199,7 +189,6 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
{/each} {/each}
``` ```
## Time-based component foregrounds with ArchieML ## 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 `Foreground` prop in `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.
@ -259,7 +248,6 @@ endTime: 0.3 # When to stop showing the headline
... which you'll parse out of a ArchieML block object before passing to the `ScrollyVideo` and `ScrollyVideoForeground` components. ... which you'll parse out of a ArchieML block object before passing to the `ScrollyVideo` and `ScrollyVideoForeground` components.
```svelte ```svelte
<script lang="ts"> <script lang="ts">
import { assets } from '$app/paths'; // 👈 If using in the graphics kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
@ -340,12 +328,11 @@ endTime: 0.3 # When to stop showing the headline
{/each} {/each}
``` ```
## 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 foreground that scrolls up and down over the video, instead of fading in and out at specific times. 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`. > **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)
@ -357,22 +344,19 @@ The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/
} from '@reuters-graphics/graphics-components'; } from '@reuters-graphics/graphics-components';
// Pass `progress` as `videoPercentage` to ScrollyVideo // Pass `progress` as `videoPercentage` to ScrollyVideo
let progress = $state(0); let progress = $state(0);
</script> </script>
<ScrollerBase <ScrollerBase bind:progress query="div.step-foreground-container">
bind:progress {#snippet backgroundSnippet()}
query="div.step-foreground-container"
>
{#snippet backgroundSnippet()}
<!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` --> <!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` -->
<ScrollyVideo <ScrollyVideo
src='my-video.mp4' src="my-video.mp4"
videoPercentage={progress} videoPercentage={progress}
trackScroll={false} trackScroll={false}
/> />
{/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">
<h3 class="text-center">Step 1</h3> <h3 class="text-center">Step 1</h3>
@ -383,10 +367,10 @@ The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/
<div class="step-foreground-container"> <div class="step-foreground-container">
<h3 class="text-center">Step 3</h3> <h3 class="text-center">Step 3</h3>
</div> </div>
{/snippet} {/snippet}
</ScrollerBase> </ScrollerBase>
<style lang="scss"> <style lang="scss">
.step-foreground-container { .step-foreground-container {
height: 100vh; height: 100vh;
width: 50%; width: 50%;