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

small style tweaks in ScrollyVideo.svelte

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-07-21 14:11:49 -04:00
parent 48679a970c
commit c7e776627f
Failed to extract signature
1 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/ScrollyVideo/ScrollyVideo.svelte
View file

@ -70,6 +70,7 @@
children?: Snippet; children?: Snippet;
} }
/** Default properties for embedded videos */
const defaultEmbedProps = { const defaultEmbedProps = {
autoplay: false, autoplay: false,
loop: false, loop: false,
@ -79,6 +80,7 @@
poster: '', poster: '',
preload: 'auto' as 'auto' | 'metadata' | 'none', preload: 'auto' as 'auto' | 'metadata' | 'none',
}; };
/** /**
* Main logic for ScrollyVideo Svelte component. * Main logic for ScrollyVideo Svelte component.
* Handles instantiation, prop changes, and cleanup. * Handles instantiation, prop changes, and cleanup.
@ -120,6 +122,7 @@
if (JSON.stringify(restProps) !== lastPropsString) { if (JSON.stringify(restProps) !== lastPropsString) {
// if scrollyvideo already exists and any parameter is updated, destroy and recreate. // if scrollyvideo already exists and any parameter is updated, destroy and recreate.
if (scrollyVideo && scrollyVideo.destroy) scrollyVideo.destroy(); if (scrollyVideo && scrollyVideo.destroy) scrollyVideo.destroy();
scrollyVideo = new ScrollyVideo({ scrollyVideo = new ScrollyVideo({
scrollyVideoContainer, scrollyVideoContainer,
onReady, onReady,
@ -168,7 +171,7 @@
</script> </script>
{#if embedded && (embeddedSrc || restProps.src)} {#if embedded && (embeddedSrc || restProps.src)}
<div class="scrolly-video-container" style="width: 100%;"> <div class="scrolly-video-container embedded">
<video <video
class="scrolly-video-embedded" class="scrolly-video-embedded"
src={embeddedSrc || restProps.src} src={embeddedSrc || restProps.src}
@ -186,7 +189,7 @@
<div <div
{id} {id}
class="scrolly-video-container {cls}" class="scrolly-video-container {cls}"
style="height: {heightChange}; width: 100%; min-height: 100svh;" style="height: {heightChange}"
> >
<div bind:this={scrollyVideoContainer} data-scrolly-container> <div bind:this={scrollyVideoContainer} data-scrolly-container>
{#if scrollyVideo} {#if scrollyVideo}
@ -206,4 +209,11 @@
{/if} {/if}
<style lang="scss"> <style lang="scss">
.scrolly-video-container {
width: 100%;
&:not(.embedded) {
min-height: 100svh;
}
}
</style> </style>