setup artist page boilerplate code

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">

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>

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.

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"),
   },
 ];
 

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>

src/views/ArtistView/index.ts

@@ -0,0 +1,3 @@
+import ArtistView from "./Main.vue";
+
+export default ArtistView;

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,
 };