From 0eda36ef4a79c29035f6b625a2d18e6ead4ca577 Mon Sep 17 00:00:00 2001
From: Vlad Jerca <vlad.jerca@gmail.com>
Date: Fri, 15 Nov 2024 20:34:42 +0100
Subject: [PATCH] feat(profile): add cover image on main page background

---
 .../background/BackgroundCoverImage.svelte    | 83 +++++++++++++++++++
 .../image/components/CrossOriginImage.svelte  |  8 +-
 .../src/lib/requests/users/currentUser.ts     | 29 ++++---
 .../profile-banner/ProfileBanner.svelte       | 14 +++-
 4 files changed, 117 insertions(+), 17 deletions(-)
 create mode 100644 projects/client/src/lib/components/background/BackgroundCoverImage.svelte

diff --git a/projects/client/src/lib/components/background/BackgroundCoverImage.svelte b/projects/client/src/lib/components/background/BackgroundCoverImage.svelte
new file mode 100644
index 000000000..96c405dd7
--- /dev/null
+++ b/projects/client/src/lib/components/background/BackgroundCoverImage.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import CrossOriginImage from "$lib/features/image/components/CrossOriginImage.svelte";
+  import { onMount } from "svelte";
+
+  type ImageBackgroundProps = {
+    src: string;
+    type: "Main" | "Show" | "Movie";
+  };
+
+  const { src, type }: ImageBackgroundProps = $props();
+  let isImageLoaded = $state(false);
+
+  onMount(() => {
+    const image = new Image();
+    image.src = src;
+
+    image.onload = () => {
+      isImageLoaded = true;
+    };
+  });
+</script>
+
+<div class="background-cover-image" class:image-loaded={isImageLoaded}>
+  <CrossOriginImage {src} alt={`${type} background`} />
+</div>
+
+<style>
+  :global([data-theme="light"]) {
+    .background-cover-image {
+      &.image-loaded {
+        :global(img) {
+          opacity: 0.85;
+        }
+      }
+    }
+  }
+
+  :global([data-theme="dark"]) {
+    .background-cover-image {
+      &.image-loaded {
+        :global(img) {
+          opacity: 0.32;
+        }
+      }
+    }
+  }
+  .background-cover-image {
+    z-index: -1;
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    :global(img) {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      transition: opacity 250ms ease-in;
+      opacity: 0;
+    }
+
+    &::after {
+      content: "";
+      width: 100%;
+      height: 50%;
+
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
+      background: linear-gradient(
+        to bottom,
+        transparent 0%,
+        color-mix(in srgb, var(--color-background) 50%, transparent 50%) 30%,
+        var(--color-background) 70%
+      );
+
+      pointer-events: none;
+    }
+  }
+</style>
diff --git a/projects/client/src/lib/features/image/components/CrossOriginImage.svelte b/projects/client/src/lib/features/image/components/CrossOriginImage.svelte
index 436f0bfc8..03e51ad6c 100644
--- a/projects/client/src/lib/features/image/components/CrossOriginImage.svelte
+++ b/projects/client/src/lib/features/image/components/CrossOriginImage.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { deserialize } from "$app/forms";
-  import { writable } from "svelte/store";
   import { IS_PROD } from "$lib/utils/env";
+  import { writable } from "svelte/store";
   import type { SerializedImageResponse } from "../models/SerializedImageResponse";
   const emptyResponse = {
-    uri: "https://dummyimage.com/400/333333/efefef.png&text=.",
+    uri: "",
   };
 
   type CrossOriginImageProps = {
@@ -55,4 +55,6 @@
   });
 </script>
 
-<img src={$response.uri} {alt} />
+{#if $response.uri}
+  <img src={$response.uri} {alt} />
+{/if}
diff --git a/projects/client/src/lib/requests/users/currentUser.ts b/projects/client/src/lib/requests/users/currentUser.ts
index 78897d713..de8555caa 100644
--- a/projects/client/src/lib/requests/users/currentUser.ts
+++ b/projects/client/src/lib/requests/users/currentUser.ts
@@ -11,15 +11,17 @@ export type User = {
   avatar: {
     url: string;
   };
+  cover: {
+    url: string;
+  };
   isVip: boolean;
 };
 
+const ALIEN_ISOLATION_COVER =
+  'https://walter-r2.trakt.tv/images/movies/000/759/944/fanarts/full/a12a59d031.jpg.webp';
+
 export function currentUser(): Promise<User> {
-  return api.users.profile({
-    params: { id: 'me' },
-    query: {
-      extended: 'full',
-    },
+  return api.users.settings({
     extraHeaders: {
       ...authHeader(),
     },
@@ -32,20 +34,25 @@ export function currentUser(): Promise<User> {
       throw new Error('Error fetching current user.');
     }
 
-    const { body } = response;
-    const fullName = body.name;
-    const [firstName = '', lastName = ''] = body.name.split(' ');
+    const { body: { user, account } } = response;
+    const fullName = user.name;
+    const [firstName = '', lastName = ''] = user.name.split(' ');
+    const isCoverEmpty = !account.cover_image.trim();
+
     return {
       name: {
         full: fullName,
         first: firstName,
         last: lastName,
       },
-      location: body.location,
+      location: user.location,
       avatar: {
-        url: body.images!.avatar.full,
+        url: user.images!.avatar.full,
+      },
+      cover: {
+        url: isCoverEmpty ? account.cover_image : ALIEN_ISOLATION_COVER,
       },
-      isVip: body.vip || body.vip_ep,
+      isVip: user.vip || user.vip_ep,
     };
   });
 }
diff --git a/projects/client/src/lib/sections/profile-banner/ProfileBanner.svelte b/projects/client/src/lib/sections/profile-banner/ProfileBanner.svelte
index 689c80eb8..18411fc98 100644
--- a/projects/client/src/lib/sections/profile-banner/ProfileBanner.svelte
+++ b/projects/client/src/lib/sections/profile-banner/ProfileBanner.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { currentUser, type User } from "$lib/requests/users/currentUser";
   import CrossOriginImage from "$lib/features/image/components/CrossOriginImage.svelte";
+  import { currentUser, type User } from "$lib/requests/users/currentUser";
 
+  import BackgroundCoverImage from "$lib/components/background/BackgroundCoverImage.svelte";
+  import VipBadge from "$lib/components/badge/VipBadge.svelte";
   import * as m from "$lib/features/i18n/messages.ts";
-  import { writable } from "svelte/store";
   import { onMount } from "svelte";
-  import VipBadge from "$lib/components/badge/VipBadge.svelte";
+  import { writable } from "svelte/store";
 
   const emptyUser: User = {
     name: {
@@ -17,6 +18,9 @@
     avatar: {
       url: "",
     },
+    cover: {
+      url: "",
+    },
     isVip: false,
   };
 
@@ -27,6 +31,10 @@
   });
 </script>
 
+{#if $user.cover.url}
+  <BackgroundCoverImage src={$user.cover.url} type="Main" />
+{/if}
+
 <div class="profile-banner-container">
   <div class="profile-image">
     <CrossOriginImage