61 lines
1.8 KiB
Svelte
61 lines
1.8 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/molecules/process-step";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { scaleFade } from '$animations/transitions'
|
|
|
|
// Components
|
|
import Image from '$components/atoms/Image.svelte'
|
|
import { getAssetUrlKey } from '$utils/api'
|
|
|
|
export let index: number
|
|
export let text: string
|
|
export let image: any = undefined
|
|
export let video: any = undefined
|
|
export let visible: boolean = false
|
|
|
|
let videoEl: HTMLVideoElement
|
|
|
|
const imageRatio = image ? image.width / image.height : undefined
|
|
|
|
// Toggle video playback if step is visible
|
|
$: if (videoEl) {
|
|
visible ? videoEl.play() : videoEl.pause()
|
|
}
|
|
</script>
|
|
|
|
{#if visible}
|
|
<div class="step grid" style:--index={index}
|
|
in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
|
|
out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
|
|
>
|
|
{#if image || video}
|
|
<div class="media">
|
|
{#if image}
|
|
<Image
|
|
class="image shadow-box-dark"
|
|
id={image.id}
|
|
sizeKey="product"
|
|
sizes={{
|
|
small: { width: 400 },
|
|
medium: { width: 600 },
|
|
}}
|
|
ratio={imageRatio}
|
|
alt={image.title}
|
|
/>
|
|
{:else if video}
|
|
<video muted loop playsinline autoplay allow="autoplay" bind:this={videoEl}>
|
|
<source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
|
|
<source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
|
|
<track kind="captions" />
|
|
</video>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="text text-xsmall">
|
|
{@html text}
|
|
</div>
|
|
</div>
|
|
{/if} |