From 9e023db6dc2f39600e88ba49fca44775cea91c8f Mon Sep 17 00:00:00 2001 From: Sudev Kiyada Date: Tue, 3 Jun 2025 19:15:24 +0530 Subject: [PATCH] adds Foreground component with docs --- src/components/ScrollyVideo/Foreground.svelte | 53 ++ .../ScrollyVideo/ScrollyVideo.stories.svelte | 29 +- .../ScrollyVideo/ScrollyVideo.svelte | 26 +- .../ScrollyVideo/demo/WithTimeline.svelte | 74 +++ .../demo/graphic/ai2svelte/annotation1.svelte | 453 ++++++++++++++++++ .../demo/graphic/ai2svelte/annotation2.svelte | 423 ++++++++++++++++ .../demo/graphic/ai2svelte/annotation3.svelte | 431 +++++++++++++++++ .../demo/graphic/ai2svelte/annotation4.svelte | 392 +++++++++++++++ .../demo/graphic/imgs/annotation1-lg.png | Bin 0 -> 9265 bytes .../demo/graphic/imgs/annotation1-md.png | Bin 0 -> 5134 bytes .../demo/graphic/imgs/annotation1-sm.png | Bin 0 -> 3305 bytes .../demo/graphic/imgs/annotation1-xl.png | Bin 0 -> 13686 bytes .../demo/graphic/imgs/annotation1-xs.png | Bin 0 -> 3704 bytes .../demo/graphic/imgs/annotation2-lg.png | Bin 0 -> 11781 bytes .../demo/graphic/imgs/annotation2-md.png | Bin 0 -> 6283 bytes .../demo/graphic/imgs/annotation2-sm.png | Bin 0 -> 2389 bytes .../demo/graphic/imgs/annotation2-xl.png | Bin 0 -> 16911 bytes .../demo/graphic/imgs/annotation2-xs.png | Bin 0 -> 6303 bytes .../demo/graphic/imgs/annotation3-lg.png | Bin 0 -> 7645 bytes .../demo/graphic/imgs/annotation3-md.png | Bin 0 -> 3926 bytes .../demo/graphic/imgs/annotation3-sm.png | Bin 0 -> 2389 bytes .../demo/graphic/imgs/annotation3-xl.png | Bin 0 -> 11682 bytes .../demo/graphic/imgs/annotation3-xs.png | Bin 0 -> 3293 bytes .../demo/graphic/imgs/annotation4-lg.png | Bin 0 -> 9338 bytes .../demo/graphic/imgs/annotation4-md.png | Bin 0 -> 5232 bytes .../demo/graphic/imgs/annotation4-sm.png | Bin 0 -> 3341 bytes .../demo/graphic/imgs/annotation4-xl.png | Bin 0 -> 13922 bytes .../demo/graphic/imgs/annotation4-xs.png | Bin 0 -> 4154 bytes .../ScrollyVideo/js/ScrollyVideo.ts | 39 +- .../ScrollyVideo/js/state.svelte.ts | 38 +- .../ScrollyVideo/js/videoDecoder.ts | 3 +- 31 files changed, 1910 insertions(+), 51 deletions(-) create mode 100644 src/components/ScrollyVideo/Foreground.svelte create mode 100644 src/components/ScrollyVideo/demo/WithTimeline.svelte create mode 100644 src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation1.svelte create mode 100644 src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation2.svelte create mode 100644 src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation3.svelte create mode 100644 src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation4.svelte create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation1-lg.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation1-md.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation1-sm.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation1-xl.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation1-xs.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation2-lg.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation2-md.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation2-sm.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation2-xl.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation2-xs.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation3-lg.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation3-md.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation3-sm.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation3-xl.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation3-xs.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation4-lg.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation4-md.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation4-sm.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation4-xl.png create mode 100644 src/components/ScrollyVideo/demo/graphic/imgs/annotation4-xs.png diff --git a/src/components/ScrollyVideo/Foreground.svelte b/src/components/ScrollyVideo/Foreground.svelte new file mode 100644 index 00000000..e13334a4 --- /dev/null +++ b/src/components/ScrollyVideo/Foreground.svelte @@ -0,0 +1,53 @@ + + + + {#if componentState.generalData.currentTime >= startTime && componentState.generalData.currentTime <= endTime} +
+ {@render children?.()} +
+ {/if} + + + diff --git a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte index 478f0528..5daa4714 100644 --- a/src/components/ScrollyVideo/ScrollyVideo.stories.svelte +++ b/src/components/ScrollyVideo/ScrollyVideo.stories.svelte @@ -2,6 +2,7 @@ import { defineMeta } from '@storybook/addon-svelte-csf'; import ScrollyVideo from './ScrollyVideo.svelte'; import WithScrollerBase from './demo/WithScrollerBase.svelte'; + import WithTimeline from './demo/WithTimeline.svelte'; const { Story } = defineMeta({ title: 'Components/Graphics/ScrollyVideo', @@ -123,15 +124,15 @@ @@ -127,13 +140,18 @@ style="height: {heightChange}; width: 100%; min-height: 100svh;" >
- {#if showDebugInfo} + {#if showDebugInfo && scrollyVideo}

- {@html JSON.stringify(flattenObject(scrollyVideoState)) + {@html JSON.stringify(flattenObject(scrollyVideo.componentState)) .replace(/[{}"]/g, '') .split(',') .join('
')}

+ + + {#if children} + {@render children()} + {/if} {/if}
diff --git a/src/components/ScrollyVideo/demo/WithTimeline.svelte b/src/components/ScrollyVideo/demo/WithTimeline.svelte new file mode 100644 index 00000000..e4b734c3 --- /dev/null +++ b/src/components/ScrollyVideo/demo/WithTimeline.svelte @@ -0,0 +1,74 @@ + + + + +{#snippet ScrollForeground()} + + + + + + + + + + + + + + + + + + + + + + + +{/snippet} + +{#snippet ScrollVideo(height: string, VideoSrc: string)} + + {@render ScrollForeground()} + +{/snippet} + +{#if width < 600} + {@render ScrollVideo('800svh', SM)} +{:else if width < 1200} + {@render ScrollVideo('800svh', MD)} +{:else} + {@render ScrollVideo('800svh', LG)} +{/if} + + diff --git a/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation1.svelte b/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation1.svelte new file mode 100644 index 00000000..e69acb75 --- /dev/null +++ b/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation1.svelte @@ -0,0 +1,453 @@ + + +
+ + {#if width && width >= 0 && width < 510} +
+
+
+
+

Solid southwest swell

+
+
+

+ Tahitian local Vahine Fierro drops into a double overhead wave during + a recentcompetition. Timing and position are critical to make the + take-off and maximize scoring +

+

+

 

+
+
+

Shallow water hides

+

a sharp reef

+
+
+ {/if} + + {#if width && width >= 510 && width < 660} +
+
+
+
+

Wave forms from hitting reef, and

+

tube will track the line of the shelf

+
+
+

Solid southwest swell

+
+
+

Tahitian local Vahine Fierro drops into

+

a double overhead wave during a recent

+

competition. Timing and position are critical

+

to make the take-off and maximize scoring

+

+

 

+
+
+

Shallow water hides

+

a sharp reef

+
+
+ {/if} + + {#if width && width >= 660 && width < 930} +
+
+
+
+

Wave forms from hitting reef, and

+

tube will track the line of the shelf

+
+
+

Solid southwest swell

+
+
+

Tahitian local Vahine Fierro drops into

+

a double overhead wave during a recent

+

competition. Timing and position are critical

+

to make the take-off and maximize scoring

+

+

 

+
+
+

Shallow water hides

+

a sharp reef

+
+
+ {/if} + + {#if width && width >= 930 && width < 1200} +
+
+
+
+

Wave forms from hitting reef, and

+

tube will track the line of the shelf

+
+
+

Solid southwest swell

+
+
+

Tahitian local Vahine Fierro drops into

+

a double overhead wave during a recent

+

competition. Timing and position are critical

+

to make the take-off and maximize scoring

+

+

 

+
+
+

Shallow water hides

+

a sharp reef

+
+
+ {/if} + + {#if width && width >= 1200} +
+
+
+
+

Wave forms from hitting reef, and

+

tube will track the line of the shelf

+
+
+

Solid southwest swell

+
+
+

Tahitian local Vahine Fierro drops into

+

a double overhead wave during a recent

+

competition. Timing and position are critical

+

to make the take-off and maximize scoring

+

+

 

+
+
+

Shallow water hides

+

+ a sharp reef +

+
+
+ {/if} +
+ + + + + + diff --git a/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation2.svelte b/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation2.svelte new file mode 100644 index 00000000..73625d52 --- /dev/null +++ b/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation2.svelte @@ -0,0 +1,423 @@ + + +
+ + {#if width && width >= 0 && width < 510} +
+
+
+
+

The wave at Teahupo'o is

+

known to be very heavy

+

with a thick lip that can

+

easily knock a surfer off the

+

wave and onto the reef below

+
+
+

Surfer speed is up

+

to 35 km per hour

+

(20 mph)

+
+
+

One cubic meter

+

of water weighs

+

1,000 kg. (2,200 lb)

+
+
+

+ A surfer will adjust speed to stay in the tube by dragging a hand to + slow, or pumping the board to speed up +

+
+
+ {/if} + + {#if width && width >= 510 && width < 660} +
+
+
+
+ {/if} + + {#if width && width >= 660 && width < 930} +
+
+
+
+

The wave at Teahupo'o is

+

known to be very heavy

+

with a thick lip that can

+

easily knock a surfer off the

+

wave and onto the reef below

+
+
+

Surfer speed is up to

+

35 km per hour (20 mph)

+
+
+

A surfer will adjust speed to stay in

+

the tube by dragging a hand to slow,

+

or pumping the board to speed up

+
+
+

One cubic meter of water

+

weighs 1,000 kg. (2,200 lb)

+
+
+ {/if} + + {#if width && width >= 930 && width < 1200} +
+
+
+
+

The wave at Teahupo'o is

+

known to be very heavy

+

with a thick lip that can

+

easily knock a surfer off the

+

wave and onto the reef below

+
+
+

The wave at Teahupo'o is

+

known to be very heavy

+

with a thick lip that can

+

easily knock a surfer off the

+

wave and onto the reef below

+
+
+

Surfer speed is up to

+

35 km per hour (20 mph)

+
+
+

Surfer speed is up to

+

35 km per hour (20 mph)

+
+
+

A surfer will adjust speed to stay in

+

the tube by dragging a hand to slow,

+

or pumping the board to speed up

+
+
+

A surfer will adjust speed to stay in

+

the tube by dragging a hand to slow,

+

or pumping the board to speed up

+
+
+

One cubic meter of water

+

weighs 1,000 kg. (2,200 lb)

+
+
+

One cubic meter of water

+

weighs 1,000 kg. (2,200 lb)

+
+
+ {/if} + + {#if width && width >= 1200} +
+
+
+
+

The wave at Teahupo'o is

+

known to be very heavy

+

with a thick lip that can

+

easily knock a surfer off the

+

wave and onto the reef below

+
+
+

Surfer speed is up to

+

35 km per hour (20 mph)

+
+
+

A surfer will adjust speed to stay in

+

the tube by dragging a hand to slow,

+

or pumping the board to speed up

+
+
+

One cubic meter of water

+

weighs 1,000 kg. (2,200 lb)

+
+
+ {/if} +
+ + + + + + diff --git a/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation3.svelte b/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation3.svelte new file mode 100644 index 00000000..18dee429 --- /dev/null +++ b/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation3.svelte @@ -0,0 +1,431 @@ + + +
+ + {#if width && width >= 0 && width < 510} +
+
+
+
+

+ Fierro is envelopedin the barrel for over two seconds, which is a long + time in such an unstable environment +

+
+
+

+ In comptitions, more points are scored for being deep inside a barrel + which raises the chance the wave will close out on top of them. +

+
+
+ {/if} + + {#if width && width >= 510 && width < 660} +
+
+
+
+

+ Fierro is envelopedin the barrel for over two seconds, which is a long + time in such an unstable environment +

+
+
+

+ Surfers often say time distorts inside the barrel, slowing down and + that the crashing wave noise falls silent, asthey expereince a sense + of awe +

+
+
+

+ In comptitions, more points are scored for being deep inside a barrel + which raises the chance the wave will close out on top of them. +

+
+
+ {/if} + + {#if width && width >= 660 && width < 930} +
+
+
+
+

+ Fierro is envelopedin the barrel for over two seconds, which is a long + time in such an unstable environment +

+
+
+

+ Surfers often say time distorts inside the barrel, slowing down and + that the crashing wave noise falls silent, as they expereince a sense + of awe +

+
+
+

+ In comptitions, more points are scored for being deep inside a barrel + which raises the chance the wave will close out on top of them. +

+
+
+ {/if} + + {#if width && width >= 930 && width < 1200} +
+
+
+
+

+ Fierro is envelopedin the barrel for over two seconds, which is a long + time in such an unstable environment +

+
+
+

+ Surfers often say time distorts inside the barrel, slowing down and + that the crashing wave noise falls silent, as they expereince a sense + of awe +

+
+
+

+ In comptitions, more points are scored for being deep inside a barrel + which raises the chance the wave will close out on top of them. +

+
+
+ {/if} + + {#if width && width >= 1200} +
+
+
+
+

+ Fierro is envelopedin the barrel for over two seconds, which is a long + time in such an unstable environment +

+
+
+

 

+

Fierro is enveloped

+

 

+

in the barrel for over

+

 

+

2 seconds, which is a

+

 

+

long time in such an

+

 

+

unstable environment

+

 

+

Surfers often say time distorts inside

+

 

+

the barrel, slowing down and that the

+

 

+

crashing wave noise falls silent, as

+

 

+

they expereince a sense of awe

+

 

+

In comptitions, more points are

+

 

+

scored for being deep inside a

+

 

+

barrel which raises the chance

+

 

+

the wave will close out on top of them.

+
+
+

+ Surfers often say time distorts inside the barrel, slowing down and + that the crashing wave noise falls silent, as they expereince a sense + of awe +

+
+
+

+ In comptitions, more points are scored for being deep inside a barrel + which raises the chance the wave will close out on top of them. +

+
+
+ {/if} +
+ + + + + + diff --git a/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation4.svelte b/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation4.svelte new file mode 100644 index 00000000..9aba7b48 --- /dev/null +++ b/src/components/ScrollyVideo/demo/graphic/ai2svelte/annotation4.svelte @@ -0,0 +1,392 @@ + + +
+ + {#if width && width >= 0 && width < 510} +
+
+
+
+

The wave path is a short one, only about 100 yards long

+
+
+

+ Fierro exits the barrel with a score of 9.33 out of 10, as she was + deep in the tube, had good speed and went over the foam ball on her + exit +

+
+
+ {/if} + + {#if width && width >= 510 && width < 660} +
+
+
+
+

The wave path is a short one, only about 100 yards long

+
+
+

+ Fierro exits the barrel with a score of 9.33 out of 10, as she was + deep in the tube, had good speed and went over the foam ball on her + exit +

+
+
+

+ The wave heaves so quickly that as it forms, it pulls water off the + reef, creating a ride that is often below sea level - seen as the + surfer exits up and over the wave to higher water +

+
+
+ {/if} + + {#if width && width >= 660 && width < 930} +
+
+
+
+

The wave path is a short one, only about 100 yards long

+
+
+

+ Fierro exits the barrel with a score of 9.33 out of 10, as she was + deep in the tube, had good speed and went over the foam ball on her + exit +

+
+
+

+ The wave heaves so quickly that as it forms, it pulls water off the + reef, creating a ride that is often below sea level - seen as the + surfer exits up and over the wave to higher water +

+
+
+ {/if} + + {#if width && width >= 930 && width < 1200} +
+
+
+
+

The wave path is a short one,

+

only about 100 yards long

+
+
+

+ Fierro exits the barrel with a score of 9.33 out of 10, as she was + deep in the tube, had good speed and went over the foam ball on her + exit +

+
+
+

+ The wave heaves so quickly that as it forms, it pulls water off the + reef, creating a ride that is often below sea level - seen as the + surfer exits up and over the wave to higher water +

+
+
+ {/if} + + {#if width && width >= 1200} +
+
+
+
+

The wave path is a short one,

+

only about 100 yards long

+
+
+

Fierro exits the barrel with a score of

+

9.33 out of 10, as she was deep in the

+

tube, had good speed and went over

+

the foam ball on her exit

+
+
+

The wave heaves so quickly that as it forms,

+

+ it pulls water off the reef, creating a rid e that +

+

is often below sea level - seen as the surfer

+

exits up and over the wave to higher water

+
+
+ {/if} +
+ + + + + + diff --git a/src/components/ScrollyVideo/demo/graphic/imgs/annotation1-lg.png b/src/components/ScrollyVideo/demo/graphic/imgs/annotation1-lg.png new file mode 100644 index 0000000000000000000000000000000000000000..66a925582f1ef703af6274bc33b12023c5ee067a GIT binary patch literal 9265 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 O&hT{gb6Mw<&;$V0_vyY|_8ulMWqcs*aQ_xt_X zZlAL`DJCK>0ssKSEKeOj4*&=s2LJ>mw{GEHF~eBC;=ag*SvZH;L4CvEUZFmKqnDwV zd{iuhyud!^eY`G5hP?Ix0RUQgmdB6UNAyn&ks%5#yM(74J}L?1VFZ7Q?NoeG_XO)g zs=Xz6opx9_Tf^jN(SFR5U{wzBONOv9`1%1+s?Va7zQy~i*QJVnjKA{!*e?B3;D5Oz zOk`G`+zq;SHY(pv!~j5^GkyT4 zAnt0X&8U>`P^c_3rtC4&GDm%&Znn9uw=A$a$S7vZ?_NbB^dV!TSK#ed8pojy%Kbw& zpjmSTaLW6NsZxQKUyn$w4z@Y@;J@$iad#AN(@UZ=LQ?(7AX{>ku}-6hb}mQ2c% z&3HhQPQF*wFisQ@7% zhaLp>JPODDSV}edQs*^zI>?RCvZQ8L?M%0lZ*IcL?I5;$XzU-nXDaF)Gx~KH z(~m&Sy%J1$L?u!4y9JM2UFRZ!_T@O8x>v}EnLi--0pQ?>UPWNyBvY{VJ{drhvy@8K^i1>L7%Ag?j1tkT#DUmKPmelsHix(&D(6Y z>72fHro!g7A?0ik&Rx9Jyd|){xjfKnWZrjsVqZ4h>4AwvK-V2|4=}l$rFtNRpChz2 z?&9a-nb}J{%B*c-eN~NRvgCmwn;HT=&=omZQ=fL`<@sx>2fFUmuMz^FkICH_rR>>WtggW_?CphjmH7aG1uU+XQoR>5v$f_p z*vHk(1rB3`R_n4?ooKIqeD(f@XQUf>A1Az*zWqd_Gn;+ELC)oL;jzS#dGD75_zPNU zNdhv5=9=52?&PJ4`33uRHF^L>{}~+{38WjXEOYwCY4t#uZ*&&&m8X6Z6Q4T2!WrwD zz`uEwxkcugIZux0mM=+xWC3!6Uqtmq8kC%EvVCXH@`88x{6o0Gu@!PI3h!YlzgYDV zPCa5V`g_F){*B*PR%xBf68Wsz5EO1)7KrWfn?%spGwLj<5I9b2GcjZ+hZHOMDQTx6 zCWqh>u8*Ia-ave!TwWn9;A&)C34I;GEtKs`?wWw$geV8$f&_OP%Ae6FXURQUh zQI+=}1$!vqQmx$fP7XJR3tk?z-OfGmzT4FZBtxghoQGmpItQ zN_rUiZ8*04LHkdlut@}y2;$d+vv`hg<(KvbzXeM--|*IVQGg7vow`=rr$AO9D~W|t zOK;!j@a&}8Z%h#IVuy#gol_fCS0_x15bF8Ex{1h8(?B3)Ma`{92bOsY5wpA(QP=YM z=1hA01KCl~&!k8l%E{Stg>RC`9{zCS9zDm}|MBgm%O@h_o_c+ZTcI_;<~52rMbY8e z?S@+lP~t&`?&^j;0s4v7S5>D(`DuE8Lm?^Nzljz>ax%3cCHCo(ccb5%3}#krhe9J# zh=nTr(oE4gOX9$q^Q0d)Wv0&(0y=BB2~x`xthKnXR|K=;n(AuBWJT+~Px^4lLCvLI zelS2^rwaej$UvvQ3pMnkQc}Dz<;nRuTlUxG=KjT^NNS1c4O~lOWP>W^mNbfYUr;l- z!7sgKBrAB@sGS*QZuOvZgLcK`|M8j~(fm#yq(!jwwB^_5YS2#QmXCI7>`w$bJkE&^ z#|$GJ;zL>{d7M{VqEE$%bSzXW)S9`T9z^V;$fg?GavqX&sg zjd2#(0wHI_T4Ss2!M4-2{U=VpGXwcOos81W-@c0uVT64X;rf`lJF?hc>AMUMK$Bgw znvz3u z%8@cWzEB#9eN>=>~?%)+yM%HLFE_^A1l;vt6H;cyF zCkTkz@#Q&QXp5ihkQ;FEobX>f8IXJ)f1b4RPUOuH{UNBOuxp&_rB*VI+|vNPTuJ%K$c9`AM%8Y&cV|&ujW4FdtPJq>WKsn<<`~B;d~IvET#HvdrwU zr^$VHUetuGOnHViZ}MIq8pGw$yG>2Jq7QAq8m~HaI*SjaVJ;!gIG+RmGSKv-VAe5! zWrwInMI5lvV)c8JhZg1W zW3Zl4(VleR9xVo~pxq-NxwWnwU)zOfQacpT$E?e%Bs#}>Z{x2-V%%xnK4g$TwjcF@ zbHPHJF>Z4GC2oexUlYuvE+Xf8ib{*1C-DwrFubD&^;8h_u;0p*%1U$B44WVX1(PbU zHVYjEj`YQASaE^~zt8WQdY_4NF<~-ul9fCPQEz-<-ug87O!>o5r0XZRfTlHng&NPR zo0}jvc%zK`zR8mf6Ibk-JK6LHp);D%{K*WtVD2!=EgdGYtV#^xO@hKT$dHZNl%LU3M|&Sirwb4?*A#-(CRL|xZYgf1)!VFKD1)B~t;zR~`aoJta#rU30~l%b zL+Y-j1|?TtLaj~A3THbEhpXo~5~iwk%cGee>&=$BXKSwY{ls5==DG^pFP6GPzv+i7 z*~~oP?St(E_j**jV-2pA`K}n5$3!xQ;EDCo3trQs3Q!PqWpQylaEw#a!#uS~X59`m zxm)SUe26Z7G1UGZP#KJAPMFqJcp+<Bgjmtz24MsE$&8@32-3F^BHqsQK1kxN!IJl4bYr0q+Jdjhz~|h4OZysWFK4Ks-@%$;=JeL-#nm z0S_Vi{ko;$`W!6E*5`FKZxUjM!RI!>|AIFXsduBkN06Aofn zD%eGkw=hkid>y61HLMF?Of}-##~cal3G!liHQl?e$_Wp#UmVi|ekD9a?nXgNWNHtW zK9=&7^Ax?BSQ%nXI>qjy1Ai(6CLh##SNHTOq4elz=RBYvfaU_wZTzuX@M+gMU%&?RXPG z;L5mr(pk*2hv3g!qGJ2HPZbBr#X8I?@Z$v>-^*(R0KiL0o(KQ{FTSFANB{s|pnS4I z{#{tPJnza8BLQ1a2g*TN-rKEKd>sRB{F$*>3_ojtBhLIiIY32|-|_)F(EP2Sb3A03 z<_Chfig>23WzA>j1p!a#HLw1nA;6#d)z*y>B&zcdK!CPREsmDerXoqcJDBZfwKiey z{3VC~e4cffu|82$NkHLoJ}b>*c@tPoA3wtD(!%C=iMi+X{{rIh^mYIM literal 0 HcmV?d00001 diff --git a/src/components/ScrollyVideo/demo/graphic/imgs/annotation2-md.png b/src/components/ScrollyVideo/demo/graphic/imgs/annotation2-md.png new file mode 100644 index 0000000000000000000000000000000000000000..5e45881ad4ec7596ad4243d3f8c05b51c86fb6a8 GIT binary patch literal 6283 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 literal 0 HcmV?d00001 diff --git a/src/components/ScrollyVideo/demo/graphic/imgs/annotation2-sm.png b/src/components/ScrollyVideo/demo/graphic/imgs/annotation2-sm.png new file mode 100644 index 0000000000000000000000000000000000000000..16441ea94efb2131d5d114b990e635cacb51f77b GIT binary patch literal 2389 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 bz(O?p{WD-y&3ic0y~TC4AwQRB+CTVj>cjkT literal 0 HcmV?d00001 diff --git a/src/components/ScrollyVideo/demo/graphic/imgs/annotation2-xs.png b/src/components/ScrollyVideo/demo/graphic/imgs/annotation2-xs.png new file mode 100644 index 0000000000000000000000000000000000000000..911411fb1a98710e076c787b14116c5f84d33a7d GIT binary patch literal 6303 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 Itlf?O0DY~ATmS$7 literal 0 HcmV?d00001 diff --git a/src/components/ScrollyVideo/demo/graphic/imgs/annotation3-lg.png b/src/components/ScrollyVideo/demo/graphic/imgs/annotation3-lg.png new file mode 100644 index 0000000000000000000000000000000000000000..6c225533aa74f4f95d8582a97e4c7dd7143605a7 GIT binary patch literal 7645 zcmeAS@N?(olHy`uVBq!ia0y~yV0U3)U=iYA1B%#h@H_#eBuiW)N`mv#O3D+9QW+dm z@{>{(JaZG%Q-e|yQz{EjrrIzt$kuzhIEGZ*dUKGG5vZkM!oT(JI6$V3g3%Bd4S~@R z7!85Z5Eu=C(GVC7fzc2c4S~@R7!85Z5Eu=CVI2YuH=CWAKt6Q*AOHIh%dqzAsOLsQ zU^E0qLtr!nMnhmU1V%$(Gz3ONU^E0qLx3(JFr7t$AxwsWar>&-z%Mxd4^h5zgGJRCsGQ7{?;qaiRF z0;3@?8UmvsFd71*Aut*OqaiRF0;3@?8UjN+1Zrk7Ff)9QWni3LQCI--i>Irf%Q~lo FCIF?DB7*<` literal 0 HcmV?d00001 diff --git a/src/components/ScrollyVideo/demo/graphic/imgs/annotation3-sm.png b/src/components/ScrollyVideo/demo/graphic/imgs/annotation3-sm.png new file mode 100644 index 0000000000000000000000000000000000000000..16441ea94efb2131d5d114b990e635cacb51f77b GIT binary patch literal 2389 zcmeAS@N?(olHy`uVBq!ia0y~yVE)6vz+}h41{7iZ#`pn9NtU=qlmzFem6RtIr7}3C z&-z!Mxd5M3%>g2a_cVuGDpE^2#kin rXb6mkz-S1JhQMeD44)8aSkGy|a3Gt3Q6r7359BRRS3j3^P6=5T;%%2oXd9?*K_{2u-gl^i;N)OO zw@$5f>H~35#1`8Rgrj0B(jc0{mx7HXYOAq zx7cuN&W-zIKPWLePFtm|u6?Vj%I@^g*c|}`5I_I{1Q0*~0R#~Ee}RlPdlW5wv1kUnSjDpWT4)V^ E0poQo)c^nh literal 0 HcmV?d00001 diff --git a/src/components/ScrollyVideo/demo/graphic/imgs/annotation3-xs.png b/src/components/ScrollyVideo/demo/graphic/imgs/annotation3-xs.png new file mode 100644 index 0000000000000000000000000000000000000000..875f6925d889b92c160edab4818ef0a20b90c2ae GIT binary patch literal 3293 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 literal 0 HcmV?d00001 diff --git a/src/components/ScrollyVideo/demo/graphic/imgs/annotation4-md.png b/src/components/ScrollyVideo/demo/graphic/imgs/annotation4-md.png new file mode 100644 index 0000000000000000000000000000000000000000..7cdf4ba156dbddefadf419301f517722858e2924 GIT binary patch literal 5232 zcmeHIYgAL$65d*YLK|%HRfrJUm6QOLmx`v)ng~)3av`PEV%35|5LQVL8WTbUvh-SN zBc*u&bpZtlDE4yID~N4*irm{KQPx5&iW0CTX()wKV=+9Xd!KVsfA;rXE9cMIvuEa; znQ!*&eS#bJ7RANG1pq+7q9YRka9{$keC%0AxFa2=UV=Y&;f^HXJK5<%@%~&M;G|_A z;CW;G{Repoy!~mC94#*#fYokTBquTN-h`o_zy8h|$CL{Sakg`%%O%ge*Mq{oFK3G{ zo|8p8wD@zK^@;4WM|n=MelyMM+}$--KUZe-ox1$@Lr74c~d5>g5aIFc%+@0v0s zv8(CDdU4_D#`dxokQ~(3*;w`M+k-ki)p;4(Xr8-1X8px-H~~jW-^}zoJ0z`fL#i+K zDfcBu#|7L}kglQk45fMT9r1(Mv$)>iFBhIHcm}N>NlgX1U3-UP2+cm_;&Z7ZlU9)% z0c-8Kdxh~jGGvz&PRw8HrHrd|g=fJGi4<@?$7Z zT50hnRTqZNWKF#*V5~rv*8{XSde2OW+AgW^(GF^RFSLNxfajx*&JD|{w4@oS$dai@ zE1LE4Svw}Yi5H!Ir}W4ObrxMnV6Dm+6l~$^w;+K#dR#H}_}3005@drN7fo%3rgjAm z&#mj=upS1O{+)&^-6jW&y=`i%5=V?_w*)kpSV+^oFemnnFE^t#kY|n>R_Q-dtC7Gi zp%vvcItZpmx&AaD?tx2&C@1Ii;n( z9;adLtr(2KK#&(-BLB?4`8U#OQ4CXcB656^wEnQIVQZR{T9MnB)F2E2Xh%m!m)eR~;t3jp_3 zZDwMED1qRs#ep?R(e$8Vu`;iaap{94!%G5sc$*w)3K%%?pqFypq=7Ixe4Vn6l@vS*)a^*$(+ zTcZ33iB9|YxsT{X75@psOG~<)u|Lk=-n)25?; zlOxB6GbvW7+C!cRrBLuT4lTDSPm-#-tUriK;30?YgBJ*i-@iepiA1T%LNI}ogK0OJ zb?AVhR9qzd+}1HeZEZM)A2X&Zts;KX#_1Lx=u}N2OipS!oY~i2M0mBgGj{itK*h`l z&~5b`@6eOBtz@9b8Xjv8(LA0q+|@;Q4B8Fc_ymsL4~3ppB@%oT4l5_3QisE!T~h@W zR;a$06&hbb>!K9?OXUK(^L?4iKvK`4>+?Q22p8~P{a-u(5nkr_-JdCdo!UzUvWD>I z`?h_G12R?h)S=oV<@nXa{c4Tsm@+r;MIf6F{)qy*m0phKxb*=1s;ON8Qm`eDs*VU} zgnK(P)i8V-76I>wQO_74JG>Fu-?Z7+A^S{ZkreCz=Wpjc|4=BjK(4y8t*~K9E4RR0 zzjj=CtQqygA9+0R2&eQ_Lq-N7IL@GZ^NjVu!WLLaQ}IzZAp0Xc3`xnZL7csDjoOIHS2{+B$z#rH(L+-Ra5-t@QDI1}v~7dF$Z~ zI_+SRd|Wh_**v)LZVv!OA4Ih;gAYs5wTHBg3%9oIT!&)KG|}(t#eMTE3?Ivx1DNYn z68AR-eh810i5@-l)M=&Ia%7vl0kb;kwdT-(01U|w{&A1;{WdPwi-EVdeRo%od6r@_ z?#>5bqHvQaVCZ%Q4>#Mr6}T3moH0HPCh{Jem`o73PGOi6L5l6 zuyGJG1pAi5`36x3uR%ZUqNz=_0$-m`{-U`IUn0@|*%`1iU}wP2fSmz519k@N3_NAv d_w=PzDWK)lSJ8Jhjnil!+YuLeetXK%KLKt>?aTlG literal 0 HcmV?d00001 diff --git a/src/components/ScrollyVideo/demo/graphic/imgs/annotation4-sm.png b/src/components/ScrollyVideo/demo/graphic/imgs/annotation4-sm.png new file mode 100644 index 0000000000000000000000000000000000000000..b220b1a8e3afbdd1c7542e893a9149ba07502172 GIT binary patch literal 3341 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 literal 0 HcmV?d00001 diff --git a/src/components/ScrollyVideo/js/ScrollyVideo.ts b/src/components/ScrollyVideo/js/ScrollyVideo.ts index 8ee20319..07e6e333 100644 --- a/src/components/ScrollyVideo/js/ScrollyVideo.ts +++ b/src/components/ScrollyVideo/js/ScrollyVideo.ts @@ -1,7 +1,7 @@ import { UAParser } from 'ua-parser-js'; import videoDecoder from './videoDecoder'; import { debounce, isScrollPositionAtTarget, map } from './utils'; -import { scrollyVideoState } from './state.svelte'; +import { createComponentState, type ScrollyVideoState } from './state.svelte'; interface ScrollyVideoArgs { src?: string; @@ -55,6 +55,7 @@ class ScrollyVideo { usingWebCodecs: boolean; // Whether we are using webCodecs totalTime: number; // The total time of the video, used for calculating percentage transitioningRaf: number | null; + componentState: ScrollyVideoState; // Placeholder for component state, if needed updateScrollPercentage: ((jump: boolean) => void) | undefined; resize: (() => void) | undefined; @@ -107,6 +108,7 @@ class ScrollyVideo { this.usingWebCodecs = false; // Whether we are using webCodecs this.totalTime = 0; // The total time of the video, used for calculating percentage this.transitioningRaf = null; + this.componentState = createComponentState(); // Make sure that we have a DOM if (typeof document !== 'object') { @@ -223,12 +225,12 @@ class ScrollyVideo { (containerBoundingClientRect.height - window.innerHeight); // if autplay, trim the playing time to last locked video position - if (scrollyVideoState.autoplayProgress > 0) { + if (this.componentState.autoplayProgress > 0) { scrollPercent = map( scrollPercent, 0, 1, - scrollyVideoState.autoplayProgress, + this.componentState.autoplayProgress, 1 ); } @@ -238,20 +240,20 @@ class ScrollyVideo { } // toggle autoplaying state on manual intervention - if (scrollyVideoState.isAutoPlaying && this.frames) { + if (this.componentState.isAutoPlaying && this.frames) { if (this.debug) console.warn('Stopping autoplay due to manual scroll'); if (this.usingWebCodecs) { - scrollyVideoState.autoplayProgress = parseFloat( + this.componentState.autoplayProgress = parseFloat( (this.currentFrame / this.frames.length).toFixed(4) ); } else { - scrollyVideoState.autoplayProgress = parseFloat( + this.componentState.autoplayProgress = parseFloat( (this.currentTime / this.totalTime).toFixed(4) ); } - scrollyVideoState.isAutoPlaying = false; + this.componentState.isAutoPlaying = false; } this.videoPercentage = scrollPercent; @@ -606,8 +608,9 @@ class ScrollyVideo { this.currentTime >= this.targetTime : this.currentTime <= this.targetTime; - if (scrollyVideoState.isAutoPlaying) { - scrollyVideoState.autoplayProgress = this.currentTime / this.totalTime; + if (this.componentState.isAutoPlaying) { + this.componentState.autoplayProgress = + this.currentTime / this.totalTime; } // If we are already close enough to our target, pause the video and return. @@ -805,26 +808,26 @@ class ScrollyVideo { easing: (i) => i, autoplay: true, }); - scrollyVideoState.isAutoPlaying = true; + this.componentState.isAutoPlaying = true; } updateDebugInfo() { - scrollyVideoState.generalData.src = this.src; - scrollyVideoState.generalData.videoPercentage = parseFloat( + this.componentState.generalData.src = this.src; + this.componentState.generalData.videoPercentage = parseFloat( this.videoPercentage.toFixed(4) ); - scrollyVideoState.generalData.frameRate = parseFloat( + this.componentState.generalData.frameRate = parseFloat( this.frameRate.toFixed(2) ); - scrollyVideoState.generalData.currentTime = parseFloat( + this.componentState.generalData.currentTime = parseFloat( this.currentTime.toFixed(4) ); - scrollyVideoState.generalData.totalTime = parseFloat( + this.componentState.generalData.totalTime = parseFloat( this.totalTime.toFixed(4) ); - scrollyVideoState.usingWebCodecs = this.usingWebCodecs; - scrollyVideoState.framesData.currentFrame = this.currentFrame; - scrollyVideoState.framesData.totalFrames = this.frames?.length || 0; + this.componentState.usingWebCodecs = this.usingWebCodecs; + this.componentState.framesData.currentFrame = this.currentFrame; + this.componentState.framesData.totalFrames = this.frames?.length || 0; } } export default ScrollyVideo; diff --git a/src/components/ScrollyVideo/js/state.svelte.ts b/src/components/ScrollyVideo/js/state.svelte.ts index 1ace7509..b3950bd4 100644 --- a/src/components/ScrollyVideo/js/state.svelte.ts +++ b/src/components/ScrollyVideo/js/state.svelte.ts @@ -20,20 +20,24 @@ export type ScrollyVideoState = { autoplayProgress: number; }; -export const scrollyVideoState = $state({ - generalData: { - src: '', - videoPercentage: 0, - frameRate: 0, - currentTime: 0, - totalTime: 0, - }, - usingWebCodecs: false, - framesData: { - codec: '', - currentFrame: 0, - totalFrames: 0, - }, - isAutoPlaying: false, - autoplayProgress: 0, -}); +export function createComponentState(): ScrollyVideoState { + const scrollyVideoState = $state({ + generalData: { + src: '', + videoPercentage: 0, + frameRate: 0, + currentTime: 0, + totalTime: 0, + }, + usingWebCodecs: false, + framesData: { + codec: '', + currentFrame: 0, + totalFrames: 0, + }, + isAutoPlaying: false, + autoplayProgress: 0, + }); + + return scrollyVideoState; +} diff --git a/src/components/ScrollyVideo/js/videoDecoder.ts b/src/components/ScrollyVideo/js/videoDecoder.ts index a96af7ba..b635e71f 100644 --- a/src/components/ScrollyVideo/js/videoDecoder.ts +++ b/src/components/ScrollyVideo/js/videoDecoder.ts @@ -1,5 +1,4 @@ import * as MP4Box from 'mp4box'; -import { scrollyVideoState } from './state.svelte'; interface MP4BoxBuffer extends ArrayBuffer { fileStart: number; @@ -167,7 +166,7 @@ const decodeVideo = ( if (info && info.videoTracks && info.videoTracks[0]) { [{ codec }] = info.videoTracks; if (debug) console.info('Video with codec:', codec); - scrollyVideoState.framesData.codec = codec; + // scrollyVideoState.framesData.codec = codec; // Define a type for moov to avoid using 'any' interface AvcCBox {