feat: add background component

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>

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>

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

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"