From d8d3c6107b470c87ae1795d1ef9b435e62351077 Mon Sep 17 00:00:00 2001
From: Slug-Boi <github.unshipped609@slmail.me>
Date: Tue, 26 Nov 2024 17:24:03 +0100
Subject: [PATCH 1/3] chore: update js package

---
 frontend/package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a51403a..d714960 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1633,9 +1633,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.2.tgz",
-      "integrity": "sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==",
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
+      "integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
       "dev": true,
       "dependencies": {
         "levn": "^0.4.1"

From fa11b76162f2207babb3fd750a6d38887d66b108 Mon Sep 17 00:00:00 2001
From: Slug-Boi <github.unshipped609@slmail.me>
Date: Tue, 26 Nov 2024 21:32:30 +0100
Subject: [PATCH 2/3] feat: add background component

this is still WIP as it uses the album art as background. Needs new ent
types before it can be finished but this will be on another branch
---
 frontend/src/components/Background.vue | 40 ++++++++++++++++++++++++++
 frontend/src/components/Player.vue     | 15 +++++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Background.vue

diff --git a/frontend/src/components/Background.vue b/frontend/src/components/Background.vue
new file mode 100644
index 0000000..ae87271
--- /dev/null
+++ b/frontend/src/components/Background.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { type FragmentType, useFragment, graphql } from '@/__generated__';
+
+/* TODO: Change this to be the artist image from a different spotify api call later
+ This requires changes to the current graphql types so for now we will just use a placeholder image 
+(the same as the album cover) ) */
+const ImagesFragment = graphql(/* GraphQL */ `
+  fragment Images on SimpleAlbum {
+    external_urls
+    images {
+      url
+    }
+  }
+`);
+
+const props = defineProps<{
+  fragment: FragmentType<typeof ImagesFragment>,
+}>();
+
+const backgroundObj = computed(() => useFragment(ImagesFragment, props.fragment));
+
+const backgroundUrl = computed(() => {
+  const backgroundValue = backgroundObj.value.images;
+  if (backgroundValue.length > 0) {
+    return backgroundValue[0].url;
+  }
+
+  return undefined;
+});
+
+</script>
+
+<template>
+    <img
+      :src="backgroundUrl"
+      alt="Background image"
+      class="w-24 h-24 rounded shadow-2xl"
+    >
+</template>
diff --git a/frontend/src/components/Player.vue b/frontend/src/components/Player.vue
index 0b17500..5ab5e5f 100644
--- a/frontend/src/components/Player.vue
+++ b/frontend/src/components/Player.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AlbumCover from '@/components/AlbumCover.vue';
+import Background from '@/components/Background.vue';
 import TrackInfo from '@/components/TrackInfo.vue';
 import Controls from '@/components/Controls.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
@@ -26,10 +27,22 @@ const props = defineProps<{
 const playerStateObj = computed(() => useFragment(PlayerStateFragment, props.fragment));
 const trackObj = computed(() => playerStateObj.value.item);
 const imagesObj = computed(() => trackObj.value?.album);
+const backgroundObj = computed(() => trackObj.value?.album);
+//TODO: once we have the artist image from the spotify api call, we can use the obj dominant color for this
+var color = "#821271";
+
+
 </script>
 
 <template>
-  <div class="fixed inset-0 bg-gradient-to-b from-neutral-800 to-neutral-900">
+  <div class="fixed inset-0">
+    <Background class="object-cover h-full w-full "
+      v-if="backgroundObj"
+      :fragment="backgroundObj"
+    />
+    <div class="object-cover h-full w-full blur " :style="{'background-color': color}" >
+      <div class="object-cover h-full w-full bg-gradient-to-tr from-neutral-600 to-neutral-900 opacity-25 blur-lg"></div>
+    </div>
     <div class="absolute bottom-0 left-0 right-0 p-12">
       <div class="flex flex-row items-end gap-6">
         <AlbumCover

From d00d313e98b97df8af5f54a2702d0f730b422251 Mon Sep 17 00:00:00 2001
From: Slug-Boi <github.unshipped609@slmail.me>
Date: Tue, 26 Nov 2024 21:32:57 +0100
Subject: [PATCH 3/3] style: add backdrop-blur effect to components

---
 frontend/src/components/Context.vue | 2 +-
 frontend/src/components/UpNext.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Context.vue b/frontend/src/components/Context.vue
index 27bd344..de056fb 100644
--- a/frontend/src/components/Context.vue
+++ b/frontend/src/components/Context.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Header -->
-  <div class="absolute top-0 left-0 right-0 p-6 items-center text-gray-300">
+  <div class="absolute rounded top-6 left-6 p-6 items-center text-gray-300 backdrop-blur-lg bg-neutral-800/40 ">
     <div class="text-xs uppercase tracking-wider opacity-75">PLAYING FROM SOMEWHERE</div>
     <div class="font-medium">This section is coming soon</div>
   </div>
diff --git a/frontend/src/components/UpNext.vue b/frontend/src/components/UpNext.vue
index 0f280cd..02e8d8f 100644
--- a/frontend/src/components/UpNext.vue
+++ b/frontend/src/components/UpNext.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Up Next -->
-  <div class="absolute top-6 right-6 bg-neutral-800/90 rounded p-3 flex items-center gap-3 backdrop-blur-lg">
+  <div class="absolute top-6 right-6 backdrop-blur-lg bg-neutral-800/40 rounded p-3 flex items-center gap-3">
     <img
       src="https://picsum.photos/seed/next/60"
       alt="Next Track"