init commit

1 files changed, 202 insertions, 0 deletions

diff --git a/src/components/AmbientBackgroundArtwork.svelte b/src/components/AmbientBackgroundArtwork.svelte
new file mode 100644
index 0000000..bc9563c
--- /dev/null
+++ b/src/components/AmbientBackgroundArtwork.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+    import type { Artwork as JetArtworkType } from '@jet-app/app-store/api/models';
+    import { intersectionObserver } from '@amp/web-app-components/src/actions/intersection-observer';
+    import { buildSrc } from '@amp/web-app-components/src/components/Artwork/utils/srcset';
+    import ResizeDetector from '@amp/web-app-components/src/components/helpers/ResizeDetector.svelte';
+    import { colorAsString } from '~/utils/color';
+
+    export let artwork: JetArtworkType;
+    export let active: boolean = false;
+
+    $: isBackgroundImageLoaded = false;
+    $: backgroundImage = artwork
+        ? buildSrc(
+              artwork.template,
+              {
+                  crop: 'sr',
+                  width: 400,
+                  height: Math.floor(400 / 1.6667),
+                  fileType: 'webp',
+              },
+              {},
+          )
+        : undefined;
+
+    $: if (backgroundImage) {
+        const img = new Image();
+        img.onload = () => (isBackgroundImageLoaded = true);
+        img.src = backgroundImage;
+    }
+
+    let resizing = false;
+    const handleResizeUpdate = (e: CustomEvent<{ isResizing: boolean }>) =>
+        (resizing = e.detail.isResizing);
+
+    let isOutOfView = true;
+    const handleIntersectionOberserverUpdate = (
+        isIntersectingViewport: boolean,
+    ) => (isOutOfView = !isIntersectingViewport);
+</script>
+
+{#if backgroundImage}
+    <ResizeDetector on:resizeUpdate={handleResizeUpdate} />
+
+    <div
+        class="container"
+        class:active
+        class:resizing
+        class:loaded={isBackgroundImageLoaded}
+        class:out-of-view={isOutOfView}
+        style:--background-image={`url(${backgroundImage})`}
+        style:--background-color={artwork.backgroundColor &&
+            colorAsString(artwork.backgroundColor)}
+        use:intersectionObserver={{
+            callback: handleIntersectionOberserverUpdate,
+            threshold: 0,
+        }}
+    >
+        <div class="overlay" />
+    </div>
+{/if}
+
+<style>
+    .container {
+        --veil: rgb(240, 240, 240, 0.65);
+        --speed: 0.66s;
+        --aspect-ratio: 16/9;
+        --scale: 1.2;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        aspect-ratio: var(--aspect-ratio);
+        max-height: 900px;
+        opacity: 0;
+
+        /*
+            This stack of background images represents the following three layers, listed front-to-back:
+
+            1) A gradient from transparent to white that acts as a mask for the entire container.
+               `mask-image` caused too much thrashing and CPU usage when animating and resizing,
+               so we are mimicking its functionality with this top-layer background image.
+            2) A semi-transparent veil to evenly fade out the bg. Note that this is not technically
+               a gradient, but we are using `linear-gradient` because a regular `rgb` value can't be
+               used in `background-image`.
+            3) The joe color of the background image that will eventualy be loaded.
+        */
+        background-image: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 0) 50%,
+                var(--pageBg) 80%
+            ),
+            linear-gradient(0deg, var(--veil) 0%, var(--veil) 80%),
+            linear-gradient(
+                0deg,
+                var(--background-color) 0%,
+                var(--background-color) 80%
+            );
+        background-position: center;
+        background-size: 120%;
+
+        /*
+            Blurring via the CSS filter does not extend edge-to-edge of the contents width, but we
+            can mitigate that by ever-so-slightly bumping up the `scale` of content so it bleeds off
+            the page cleanly.
+        */
+        filter: blur(20px) saturate(1.3);
+        transform: scale(var(--scale));
+        transition: opacity calc(var(--speed) * 2) ease-out,
+            background-size var(--speed) ease-in;
+
+        @media (prefers-color-scheme: dark) {
+            --veil: rgba(0, 0, 0, 0.5);
+        }
+    }
+
+    .container.loaded {
+        /*
+            This stack of background images represents the following three layers, listed front-to-back:
+
+            1) A gradient from transparent to white that acts as a mask for the entire container.
+               `mask-image` caused too much thrashing and CPU usage when animating and resizing,
+               so we are mimicking its functionality with this top-layer background image.
+            2) A semi-transparent veil to evenly fade out the image. Note that this is not technically
+               a gradient, but we are using `linear-gradient` because a regular `rgb` value can't be
+               used in `background-image`.
+            3) The actual background image.
+        */
+        background-image: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 0) 50%,
+                var(--pageBg) 80%
+            ),
+            linear-gradient(0deg, var(--veil) 0%, var(--veil) 80%),
+            var(--background-image);
+    }
+
+    .container.active {
+        opacity: 1;
+        transition: opacity calc(var(--speed) / 2) ease-in;
+        background-size: 100%;
+    }
+
+    .overlay {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 100%;
+        aspect-ratio: var(--aspect-ratio);
+        max-height: 900px;
+        opacity: 0;
+        background-image: var(--background-image);
+        background-position: 100% 100%;
+        background-size: 250%;
+        filter: brightness(1.3) saturate(0);
+        mix-blend-mode: overlay;
+        will-change: opacity, background-position;
+        animation: shift-background 60s infinite linear alternate;
+        animation-play-state: paused;
+        transition: opacity var(--speed) ease-in;
+    }
+
+    .active .overlay {
+        opacity: 0.3;
+        animation-play-state: running;
+        transition: opacity calc(var(--speed) * 2) ease-in
+            calc(var(--speed) * 2);
+    }
+
+    .active.out-of-view .overlay,
+    .active.resizing .overlay {
+        animation-play-state: paused;
+        opacity: 0;
+    }
+
+    @keyframes shift-background {
+        0% {
+            background-position: 0% 50%;
+            background-size: 250%;
+        }
+
+        25% {
+            background-position: 60% 20%;
+            background-size: 300%;
+        }
+
+        50% {
+            background-position: 100% 50%;
+            background-size: 320%;
+        }
+
+        75% {
+            background-position: 40% 100%;
+            background-size: 220%;
+        }
+
+        100% {
+            background-position: 20% 50%;
+            background-size: 300%;
+        }
+    }
+</style>