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

svh to lvh

Browse source
This commit is contained in:
Sudev Kiyada 2025-08-06 10:42:42 +05:30
parent c6eaf27fb1
commit dcde3fd12f
Failed to extract signature
9 changed files with 30 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/ScrollerVideo/ScrollerVideo.mdx
View file

@ -10,7 +10,7 @@ The `ScrollerVideo` component creates interactive video experiences that respond
## Basic demo
To use the `ScrollerVideo` component, import it and provide the video source. Set the `height` prop to any valid CSS height value such as `1200px`, `50vh`, or `500svh` to set the scroll height.
To use the `ScrollerVideo` component, import it and provide the video source. Set the `height` prop to any valid CSS height value such as `1200px`, `50vh`, or `500lvh` to set the scroll height. It is suggested to use 'lvh' or 'svh' units instead of 'vh' for the height, as these units are more reliable across different devices.
[Demo](?path=/story/components-graphics-scrollervideo--demo)
@ -19,7 +19,7 @@ To use the `ScrollerVideo` component, import it and provide the video source. Se
import { ScrollerVideo } from '@reuters-graphics/graphics-components';
</script>
<ScrollerVideo src="my-video.mp4" height="500svh" />
<ScrollerVideo src="my-video.mp4" height="500lvh" />
```
## Optimising videos
@ -53,13 +53,13 @@ To show different videos based on the screen width, use the `ScrollerVideo` comp
{#if width < 600}
<!-- Video with aspect ratio 9:16 for window width smaller than 600px -->
<ScrollerVideo src="my-video-sm.mp4" height="500svh" />
<ScrollerVideo src="my-video-sm.mp4" height="500lvh" />
{:else if width < 1200}
<!-- Video with aspect ratio 1:1 for window width between 600px and 1200px -->
<ScrollerVideo src="my-video-md.mp4" height="500svh" />
<ScrollerVideo src="my-video-md.mp4" height="500lvh" />
{:else}
<!-- Video with aspect ratio 16:9 for window width above 1200px -->
<ScrollerVideo src="my-video-lg.mp4" height="500svh" />
<ScrollerVideo src="my-video-lg.mp4" height="500lvh" />
{/if}
```
@ -78,14 +78,14 @@ Setting `embedded` will autoplay the whole `ScrollerVideo` component like a vide
<ScrollerVideo
src={Goldengate}
height="200svh"
height="200lvh"
trackScroll={true}
showDebugInfo
{embedded}
embeddedProps={{
delay: 200,
threshold: 0.5, // threshold for triggering the autoplay
height: '80svh', // height of the scroll container
height: '80lvh', // height of the scroll container
duration: 5000, // time duration from start to end
}}
/>
@ -120,7 +120,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
type: scroller-video
id: alps-scroller
src: videos/alps.mp4
height: 800svh
height: 800lvh
# Array of foregrounds
[.foregrounds]
@ -213,7 +213,7 @@ endTime: 0.3 # When to stop showing the headline
[blocks]
type: scroller-video
id: my-scroller-video
height: 800svh
height: 800lvh
# Adjust prop names as needed
srcSm: videos/my-video-sm.mp4
@ -371,7 +371,7 @@ The `ScrollerVideo` component can be used inside the [ScrollerBase](?path=/story
<style lang="scss">
.step-foreground-container {
height: 100vh;
height: 100lvh;
width: 50%;
padding: 1em;
margin: auto;
@ -443,7 +443,7 @@ Here is a [demo](?path=/story/components-graphics-scrollervideo--advanced) that
<ScrollerVideo
bind:scrollerVideo
src={Tennis}
height="100svh"
height="100lvh"
trackScroll={false}
showDebugInfo
onReady={jumpVideo}

2
src/components/ScrollerVideo/ScrollerVideo.stories.svelte
View file

@ -138,7 +138,7 @@
const args = {
trackScroll: true,
height: '500svh',
height: '500lvh',
showDebugInfo: true,
autoplay: false,
full: true,

12
src/components/ScrollerVideo/ScrollerVideo.svelte
View file

@ -42,7 +42,7 @@
debug?: boolean;
/** Shows debug information on page */
showDebugInfo?: boolean;
/** Height of the video container. Set it to 100svh when using inside `ScrollerBase` */
/** Height of the video container. Set it to 100lvh when using inside `ScrollerBase` */
height?: string;
/** Whether the video should autoplay */
autoplay?: boolean;
@ -66,7 +66,7 @@
/** Default properties for embedded videos */
const defaultEmbedProps = {
threshold: 0.5,
height: '80svh',
height: '80lvh',
delay: 200,
};
@ -79,7 +79,7 @@
videoPercentage,
onReady = $bindable(() => {}),
onChange = $bindable(() => {}),
height = '200svh',
height = '200lvh',
showDebugInfo = false,
class: cls = '',
id = '',
@ -260,10 +260,12 @@
}
}}
>
<!-- style needs to be >= 100lvh to allow child element to scroll -->
<!-- 200lvh provides smoother scrolling experience -->
<div
{id}
class="scroller-video-container embedded {cls}"
style="height: 200svh;"
style="height: 200lvh;"
>
<div
bind:this={scrollerVideoContainer}
@ -291,7 +293,7 @@
width: 100%;
&:not(.embedded) {
min-height: 100svh;
min-height: 100lvh;
}
}

4
src/components/ScrollerVideo/demo/AdvancedUsecases.svelte
View file

@ -42,7 +42,7 @@
<ScrollerVideo
bind:scrollerVideo
src={Tennis}
height="100svh"
height="100lvh"
trackScroll={false}
showDebugInfo
onReady={jumpVideo}
@ -98,7 +98,7 @@
}
.step-foreground-container {
height: 100vh;
height: 100lvh;
width: 50%;
padding: 1em;
margin: auto;

8
src/components/ScrollerVideo/demo/Embedded.svelte
View file

@ -12,7 +12,7 @@
type: 'scroller-video',
id: 'goldengate-scroller',
src: '../videos/goldengate.mp4',
height: '200svh',
height: '200lvh',
foregrounds: [
{
startTime: '0',
@ -55,14 +55,14 @@
<ScrollerVideo
src={Goldengate}
height="200svh"
height="200lvh"
trackScroll={true}
showDebugInfo
embedded={true}
embeddedProps={{
threshold: 0.5,
height: '80svh',
duration: 5000,
height: '100lvh',
duration: 12000,
delay: 200,
}}
>

2
src/components/ScrollerVideo/demo/WithAi2svelteForegrounds.svelte
View file

@ -30,7 +30,7 @@
{
type: 'scroller-video',
id: 'surf-scroller',
height: '800svh',
height: '800lvh',
foregrounds: [
{
startTime: '0.3',

4
src/components/ScrollerVideo/demo/WithScrollerBase.svelte
View file

@ -11,7 +11,7 @@
{#snippet backgroundSnippet()}
<ScrollerVideo
src={Goldengate}
height="100svh"
height="100lvh"
trackScroll={false}
videoPercentage={progress}
showDebugInfo
@ -66,7 +66,7 @@
}
.step-foreground-container {
height: 100vh;
height: 100lvh;
width: 50%;
padding: 1em;
margin: auto;

2
src/components/ScrollerVideo/demo/WithTextForegrounds.svelte
View file

@ -10,7 +10,7 @@
type: 'scroller-video',
id: 'alps-scroller',
src: 'videos/alps.mp4',
height: '800svh',
height: '800lvh',
foregrounds: [
{
startTime: '0',

2
src/components/ScrollerVideo/ts/ScrollerVideo.ts
View file

@ -312,7 +312,7 @@ class ScrollerVideo {
// Setting CSS properties for full
if (full) {
this.container.style.width = '100%';
this.container.style.height = '100svh';
this.container.style.height = '100lvh';
this.container.style.overflow = 'hidden';
}