From da852e72f3142cb9f5a9dc57adaaf4398162e086 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Mon, 21 Nov 2022 21:59:24 +0300
Subject: [PATCH] setup artist page boilerplate code

---
 src/components/AlbumView/Header.vue  | 13 ++------
 src/components/ArtistView/Header.vue |  9 +++++
 src/composables/colors/album.ts      | 25 --------------
 src/router/routes.ts                 |  7 +++-
 src/views/ArtistView/Main.vue        | 49 ++++++++++++++++++++++++++++
 src/views/ArtistView/index.ts        |  3 ++
 src/views/PlaylistView/index.vue     |  3 --
 7 files changed, 70 insertions(+), 39 deletions(-)
 create mode 100644 src/components/ArtistView/Header.vue
 create mode 100644 src/views/ArtistView/Main.vue
 create mode 100644 src/views/ArtistView/index.ts

diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index feac978..a5f2f52 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -3,11 +3,7 @@
     class="a-header rounded"
     ref="albumheaderthing"
     :style="{
-      backgroundImage: album.colors
-        ? `linear-gradient(
-        37deg, ${album.colors[2]}, ${album.colors[2]}
-      )`
-        : '',
+      backgroundColor: album.colors ? album.colors[0] : '',
     }"
   >
     <div
@@ -18,7 +14,7 @@
     </div>
     <div
       class="info"
-      :class="{ nocontrast: album.colors ? isLight(album.colors[2]) : false }"
+      :class="{ nocontrast: album.colors ? isLight(album.colors[0]) : false }"
     >
       <div class="album-info">
         <div class="top">
@@ -41,10 +37,7 @@
               {{ formatSeconds(album.duration, true) }}
             </div>
           </div>
-          <PlayBtnRect
-            :source="playSources.album"
-            :store="useAlbumStore"
-          />
+          <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
         </div>
       </div>
       <div class="art" v-if="!albumHeaderSmall">
diff --git a/src/components/ArtistView/Header.vue b/src/components/ArtistView/Header.vue
new file mode 100644
index 0000000..01e6790
--- /dev/null
+++ b/src/components/ArtistView/Header.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="artist-page-header">
+   This is the header
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss"></style>
diff --git a/src/composables/colors/album.ts b/src/composables/colors/album.ts
index b5d6420..713d2ca 100644
--- a/src/composables/colors/album.ts
+++ b/src/composables/colors/album.ts
@@ -18,31 +18,6 @@ interface BtnColor {
   isDark: boolean;
 }
 
-/**
- * Returns the first contrasting color in the album colors.
- *
- * @param {string[]} colors The album colors to choose from.
- * @returns {BtnColor} A color to use as the play button background
- */
-export function getButtonColor(colors: string[], index: number): BtnColor {
-  const fallback = {
-    color: "#234ece",
-    isDark: true,
-  };
-
-  if (!colors || colors.length === 0) return fallback;
-
-  for (let i = 0; i < colors.length; i++) {
-    if (theyContrast(colors[index], colors[i])) {
-      return {
-        color: colors[i],
-        isDark: isLight(colors[i]),
-      };
-    }
-  }
-
-  return fallback;
-}
 
 /**
  * Returns the luminance of a color.
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 7453128..2f9c2ac 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -72,6 +72,11 @@ const routes = [
     name: "ArtistsView",
     component: () => import("@/views/ArtistsExplorer.vue"),
   },
+  {
+    path: "/artists/:hash",
+    name: "ArtistView",
+    component: () => import("@/views/ArtistView"),
+  },
   {
     path: "/settings",
     name: "SettingsView",
@@ -90,7 +95,7 @@ const routes = [
   {
     name: "NotFound",
     path: "/:pathMatch(.*)",
-    component: () => import("../views/NotFound.vue"),
+    component: () => import("@/views/NotFound.vue"),
   },
 ];
 
diff --git a/src/views/ArtistView/Main.vue b/src/views/ArtistView/Main.vue
new file mode 100644
index 0000000..5674f14
--- /dev/null
+++ b/src/views/ArtistView/Main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="artist-page v-scroll-page"
+    style="height: 100%"
+    :class="{ isSmall, isMedium }"
+  >
+    <RecycleScroller
+      class="scroller"
+      :items="scrollerItems"
+      :item-size="null"
+      key-field="id"
+      v-slot="{ item }"
+      style="height: 100%"
+    >
+      <component :is="item.component" v-bind="item.props" />
+    </RecycleScroller>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { isMedium, isSmall } from "@/stores/content-width";
+
+import Header from "@/components/ArtistView/Header.vue";
+import { computed } from "vue";
+
+interface ScrollerItem {
+  id: string | number;
+  component: typeof Header;
+  // props: Record<string, unknown>;
+  size: number;
+}
+
+const header: ScrollerItem = {
+  id: "artist-header",
+  component: Header,
+  size: 19 * 16,
+};
+
+const scrollerItems = computed(() => {
+  return [header];
+});
+</script>
+
+<style lang="scss">
+.artist-page {
+  border: solid 1px;
+
+}
+</style>
diff --git a/src/views/ArtistView/index.ts b/src/views/ArtistView/index.ts
new file mode 100644
index 0000000..7df643a
--- /dev/null
+++ b/src/views/ArtistView/index.ts
@@ -0,0 +1,3 @@
+import ArtistView from "./Main.vue";
+
+export default ArtistView;
diff --git a/src/views/PlaylistView/index.vue b/src/views/PlaylistView/index.vue
index 8aedd00..12eb9c3 100644
--- a/src/views/PlaylistView/index.vue
+++ b/src/views/PlaylistView/index.vue
@@ -45,9 +45,6 @@ interface ScrollerItem {
 const header: ScrollerItem = {
   id: "header",
   component: Header,
-  // props: {
-  //   info: playlist.info,
-  // },
   size: 19 * 16,
 };