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

fix ScrollerVideo progress reactivity

Browse source
This commit is contained in:
Sudev Kiyada 2025-10-09 18:57:15 +05:30
parent 041bbeabeb
commit d43175c32d
Failed to extract signature
4 changed files with 9 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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%;