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

Merge pull request #361 from reuters-graphics/sk-scrollervideo-fix

Browse source 
Fixes progress reactivity for scrollerVideo
This commit is contained in:
Sudev Kiyada 2025-10-09 19:16:37 +05:30 committed by GitHub
commit de5bff6d47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 14 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/evil-pillows-wave.md Normal file
View file

@ -0,0 +1,5 @@
---
'@reuters-graphics/graphics-components': patch
---
Enhances progress reactivity for ScrollerVideo

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

@ -348,8 +348,11 @@ The `ScrollerVideo` component can be used inside the [ScrollerBase](?path=/story
<!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` -->
<ScrollerVideo
src="my-video.mp4"
videoPercentage={progress}
height="100lvh"
trackScroll={false}
videoPercentage={progress}
transitionSpeed={40}
showDebugInfo
/>
{/snippet}
{#snippet foregroundSnippet()}

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

@ -200,7 +200,10 @@
videoPercentage >= 0 &&
videoPercentage <= 1
) {
scrollerVideo.setVideoPercentage(videoPercentage);
scrollerVideo.setVideoPercentage(videoPercentage, {
jump: false,
transitionSpeed: restProps.transitionSpeed || 8,
});
}
}
});

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

@ -63,40 +63,6 @@
<style lang="scss">
@use '../../../scss/mixins' as mixins;
// svelte-scroller-background
#progress-bar {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
z-index: 4;
right: 0;
padding: 1rem;
top: 0;
progress {
height: 6px;
background-color: #ff000044; /* Background color of the entire bar */
margin: 0;
}
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;
}
}
.step-foreground-container {
height: 100lvh;
width: 50%;

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

@ -14,6 +14,7 @@
height="100lvh"
trackScroll={false}
videoPercentage={progress}
transitionSpeed={40}
showDebugInfo
/>
{/snippet}
@ -34,37 +35,6 @@
<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;
}
}
.step-foreground-container {
height: 100lvh;
width: 50%;