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 ## 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) [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'; import { ScrollerVideo } from '@reuters-graphics/graphics-components';
</script> </script>
<ScrollerVideo src="my-video.mp4" height="500svh" /> <ScrollerVideo src="my-video.mp4" height="500lvh" />
``` ```
## Optimising videos ## Optimising videos
@ -53,13 +53,13 @@ To show different videos based on the screen width, use the `ScrollerVideo` comp
{#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 -->
<ScrollerVideo src="my-video-sm.mp4" height="500svh" /> <ScrollerVideo src="my-video-sm.mp4" height="500lvh" />
{: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 -->
<ScrollerVideo src="my-video-md.mp4" height="500svh" /> <ScrollerVideo src="my-video-md.mp4" height="500lvh" />
{:else} {:else}
<!-- Video with aspect ratio 16:9 for window width above 1200px --> <!-- 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} {/if}
``` ```
@ -78,14 +78,14 @@ Setting `embedded` will autoplay the whole `ScrollerVideo` component like a vide
<ScrollerVideo <ScrollerVideo
src={Goldengate} src={Goldengate}
height="200svh" height="200lvh"
trackScroll={true} trackScroll={true}
showDebugInfo showDebugInfo
{embedded} {embedded}
embeddedProps={{ embeddedProps={{
delay: 200, delay: 200,
threshold: 0.5, // threshold for triggering the autoplay 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 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 type: scroller-video
id: alps-scroller id: alps-scroller
src: videos/alps.mp4 src: videos/alps.mp4
height: 800svh height: 800lvh
# Array of foregrounds # Array of foregrounds
[.foregrounds] [.foregrounds]
@ -213,7 +213,7 @@ endTime: 0.3 # When to stop showing the headline
[blocks] [blocks]
type: scroller-video type: scroller-video
id: my-scroller-video id: my-scroller-video
height: 800svh height: 800lvh
# Adjust prop names as needed # Adjust prop names as needed
srcSm: videos/my-video-sm.mp4 srcSm: videos/my-video-sm.mp4
@ -371,7 +371,7 @@ The `ScrollerVideo` component can be used inside the [ScrollerBase](?path=/story
<style lang="scss"> <style lang="scss">
.step-foreground-container { .step-foreground-container {
height: 100vh; height: 100lvh;
width: 50%; width: 50%;
padding: 1em; padding: 1em;
margin: auto; margin: auto;
@ -443,7 +443,7 @@ Here is a [demo](?path=/story/components-graphics-scrollervideo--advanced) that
<ScrollerVideo <ScrollerVideo
bind:scrollerVideo bind:scrollerVideo
src={Tennis} src={Tennis}
height="100svh" height="100lvh"
trackScroll={false} trackScroll={false}
showDebugInfo showDebugInfo
onReady={jumpVideo} onReady={jumpVideo}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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