fixes video paths
This commit is contained in:
parent
d558b656dd
commit
cb2fd262c4
2 changed files with 26 additions and 19 deletions
|
|
@ -117,8 +117,19 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
let width: number = $state(0);
|
let width: number = $state(0);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import V_9_16 from './videos/v_9_16.mp4';
|
||||||
|
import V_1_1 from './videos/v_1_1.mp4';
|
||||||
|
import V_16_9 from './videos/v_16_9.mp4';
|
||||||
|
import Goldengate from './videos/goldengate.mp4';
|
||||||
|
|
||||||
const args = $state({
|
const args = $state({
|
||||||
|
V_9_16,
|
||||||
|
V_1_1,
|
||||||
|
V_16_9,
|
||||||
|
Goldengate,
|
||||||
trackScroll: true,
|
trackScroll: true,
|
||||||
height: '500svh',
|
height: '500svh',
|
||||||
showDebugInfo: true,
|
showDebugInfo: true,
|
||||||
|
|
@ -130,31 +141,26 @@
|
||||||
|
|
||||||
<Story name="Basic" {args}></Story>
|
<Story name="Basic" {args}></Story>
|
||||||
|
|
||||||
<Story name="Multiple Videos" {args}>
|
<Story
|
||||||
|
name="Multiple Videos"
|
||||||
|
args={{
|
||||||
|
trackScroll: true,
|
||||||
|
height: '500svh',
|
||||||
|
showDebugInfo: true,
|
||||||
|
autoplay: false,
|
||||||
|
}}
|
||||||
|
>
|
||||||
{#if width < 600}
|
{#if width < 600}
|
||||||
<ScrollyVideo
|
<ScrollyVideo {...args} src={args.V_9_16} />
|
||||||
{...args}
|
|
||||||
src={'./src/components/ScrollyVideo/videos/v_9_16.mp4'}
|
|
||||||
/>
|
|
||||||
{:else if width < 1200}
|
{:else if width < 1200}
|
||||||
<ScrollyVideo
|
<ScrollyVideo {...args} src={args.V_1_1} />
|
||||||
{...args}
|
|
||||||
src={'./src/components/ScrollyVideo/videos/v_1_1.mp4'}
|
|
||||||
/>
|
|
||||||
{:else}
|
{:else}
|
||||||
<ScrollyVideo
|
<ScrollyVideo {...args} src={args.V_16_9} />
|
||||||
{...args}
|
|
||||||
src={'./src/components/ScrollyVideo/videos/v_16_9.mp4'}
|
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Story>
|
</Story>
|
||||||
|
|
||||||
<Story name="Autoplay" {args}>
|
<Story name="Autoplay" {args}>
|
||||||
<ScrollyVideo
|
<ScrollyVideo {...args} src={args.Goldengate} autoplay={true} />
|
||||||
{...args}
|
|
||||||
src={'./src/components/ScrollyVideo/videos/goldengate.mp4'}
|
|
||||||
autoplay={true}
|
|
||||||
/>
|
|
||||||
</Story>
|
</Story>
|
||||||
|
|
||||||
<Story name="inside ScrollerBase" {args}>
|
<Story name="inside ScrollerBase" {args}>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
import Headline from '../../Headline/Headline.svelte';
|
import Headline from '../../Headline/Headline.svelte';
|
||||||
import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
|
import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
|
||||||
import AiMap from './graphic/ai2svelte/ai-chart.svelte';
|
import AiMap from './graphic/ai2svelte/ai-chart.svelte';
|
||||||
|
import Goldengate from '../videos/goldengate.mp4';
|
||||||
|
|
||||||
// ScrollerBase props
|
// ScrollerBase props
|
||||||
let count = $state(1);
|
let count = $state(1);
|
||||||
|
|
@ -43,7 +44,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ScrollyVideo
|
<ScrollyVideo
|
||||||
src={`../videos/goldengate.mp4`}
|
src={Goldengate}
|
||||||
height="100svh"
|
height="100svh"
|
||||||
trackScroll={false}
|
trackScroll={false}
|
||||||
videoPercentage={progress}
|
videoPercentage={progress}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue