Merge branch 'main' into feature/design-tokens

# Conflicts: # components/ContentSection.vue # components/DropdownMenu.vue # components/MediaPlayer.vue # components/sidebar/SidebarItem.vue # pnpm-lock.yaml
bcc-code · May 4, 2023 · db5506d · db5506d
2 parents 3b83184 + ee5ca99
commit db5506d
Show file tree

Hide file tree

Showing 18 changed files with 194 additions and 103 deletions.
diff --git a/components/ContentSection.vue b/components/ContentSection.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { NuxtLinkProps } from "#app";
+import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
 
 withDefaults(
   defineProps<{
     title: string;
-    link?: Partial<NuxtLinkProps>;
+    link?: RoutesNamedLocations;
     linkLabel?: string;
   }>(),
   {
@@ -20,8 +19,8 @@ withDefaults(
       <PageHeading :level="3">{{ title }}</PageHeading>
       <NuxtLink
         v-if="link"
-        v-bind="link"
-        class="bg-background-2 rounded-full leading-none inline-block px-3 py-2 text-sm"
+        :to="link"
+        class="bg-slate-100 rounded-full leading-none inline-block px-3 py-2 hover:bg-slate-200 text-sm"
       >
         {{ linkLabel }}
       </NuxtLink>

diff --git a/components/DropdownMenu.vue b/components/DropdownMenu.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
+
 export interface DropdownMenuItem {
   text: string;
   icon?: string;
-  link?: string;
+  link?: RoutesNamedLocations;
   clickFunction?: Function;
 }
 
@@ -38,7 +40,7 @@ function menuItemClick(event: Event, item: DropdownMenuItem) {
       >
         <NuxtLink
           v-if="item.link"
-          :to="`${item.link}`"
+          :to="item.link"
           class="flex justify-start items-center gap-1 py-2 px-3"
         >
           <IconComponent v-if="item.icon" :name="item.icon" />
@@ -47,15 +49,15 @@ function menuItemClick(event: Event, item: DropdownMenuItem) {
         <p
           v-else-if="item.clickFunction"
           class="flex justify-start items-center gap-1 py-2 px-3"
-          @click="(event) => menuItemClick(event, item)"
+          @click="(event: MouseEvent) => menuItemClick(event, item)"
         >
           <IconComponent v-if="item.icon" :name="item.icon" />
           <span>{{ item.text }}</span>
         </p>
         <p
           v-else
           class="flex justify-start items-center gap-1 py-2 px-3"
-          @click="(event) => event.stopPropagation()"
+          @click="(event: MouseEvent) => event.stopPropagation()"
         >
           <IconComponent v-if="item.icon" :name="item.icon" />
           <span>{{ item.text }}</span>

diff --git a/components/MediaPlayer.vue b/components/MediaPlayer.vue
@@ -39,15 +39,18 @@ const { currentTrack } = inject(MediaPlaylistInjectionKey)!;
           </span>
         </div>
       </div>
-      <div>
+      <div class="group select-none">
         <button v-if="status === MediaPlayerStatus.Playing" @click="pause()">
           <span class="flex aspect-square w-12 justify-center align-middle">
-            <IconComponent name="icon.pause.large" class="text-3xl" />
+            <IconComponent
+              name="icon.pause.large"
+              class="text-3xl group-hover:text-4xl"
+            />
           </span>
         </button>
         <button v-if="status !== MediaPlayerStatus.Playing" @click="play()">
           <span class="flex aspect-square w-12 justify-center align-middle">
-            <IconComponent name="play" class="text-3xl" />
+            <IconComponent name="play" class="text-3xl group-hover:text-4xl" />
           </span>
         </button>
       </div>

diff --git a/components/album/SubAlbum.vue b/components/album/SubAlbum.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  id: number;
+  active: boolean;
+}>();
+
+const { data: album } = useAlbum({ id: props.id });
+
+const emit = defineEmits(["expand"]);
+
+function expand() {
+  emit("expand");
+}
+</script>
+
+<template>
+  <section
+    class="group gap-2 relative mr-3 my-4 cursor-pointer"
+    :class="
+      active
+        ? 'p-5 border-2 rounded-3xl active:scale-110 duration-150 shadow-lg'
+        : ''
+    "
+    @click="expand"
+  >
+    <div
+      :class="
+        active
+          ? ''
+          : 'opacity-0 group-hover:opacity-100 absolute -inset-y-2 -inset-x-3 rounded-xl bg-slate-100'
+      "
+    ></div>
+    <section
+      v-if="album"
+      class="flex gap-2 items-center justify-between relative"
+    >
+      <ProtectedImage
+        v-if="album.cover"
+        :src="album.cover"
+        alt=""
+        class="rounded-md w-20 aspect-square bg-slate-100"
+      />
+      <p class="text-2xl font-bold">{{ album.title }}</p>
+      <p class="ml-auto">{{ album?.children?.length }} tracks</p>
+    </section>
+    <section
+      :class="active ? 'active max-h-fit relative' : 'h-0 overflow-hidden'"
+    >
+      <div v-for="(track, i) in album?.children" :key="i">
+        <p class="p-2 hover:bg-slate-100 rounded-md">
+          {{ track.id }}
+        </p>
+      </div>
+    </section>
+  </section>
+</template>
diff --git a/components/playlist/PlaylistCarousel.vue b/components/playlist/PlaylistCarousel.vue
@@ -11,7 +11,7 @@ defineProps<{
     <NuxtLink
       v-for="playlist in playlists"
       :key="playlist.id || 0"
-      :to="`/playlist/curated/${playlist.id}`"
+      :to="{ name: 'playlist-curated-id', params: { id: playlist.id || 0 } }"
       class="h-full aspect-square"
     >
       <ProtectedImage

diff --git a/components/playlist/PlaylistOverview.vue b/components/playlist/PlaylistOverview.vue
@@ -12,7 +12,7 @@ defineProps<{
     <NuxtLink
       v-for="playlist in playlists"
       :key="playlist.id || 0"
-      :to="`/playlist/curated/${playlist.id}`"
+      :to="{ name: 'playlist-curated-id', params: { id: playlist.id || 0 } }"
     >
       <PlaylistCard :playlist="playlist" />
     </NuxtLink>

diff --git a/components/sidebar/SidebarElement.vue b/components/sidebar/SidebarElement.vue
@@ -1,8 +1,13 @@
 <script lang="ts" setup>
-const links: Record<"title" | "url", string>[] = [
-  { title: "Home", url: "/" },
-  { title: "Browse", url: "/browse" },
-  { title: "Search", url: "/search" },
+import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
+
+const links: {
+  title: string;
+  link: RoutesNamedLocations;
+}[] = [
+  { title: "Home", link: { name: "index" } },
+  { title: "Browse", link: { name: "browse" } },
+  { title: "Search", link: { name: "search" } },
 ];
 
 const { data: collections } = useTrackCollections();
@@ -20,7 +25,7 @@ const { data: collections } = useTrackCollections();
       <SidebarGroup>
         <SidebarItem
           v-for="(link, i) in links"
-          :key="`${link.url}_${i}`"
+          :key="`${link.link}_${i}`"
           v-bind="link"
         />
       </SidebarGroup>
@@ -30,7 +35,10 @@ const { data: collections } = useTrackCollections();
           v-for="collection in collections"
           :key="collection.id || 0"
           :title="collection.name || ''"
-          :url="`/playlist/private/${collection.id}`"
+          :link="{
+            name: 'playlist-private-id',
+            params: { id: collection.id || 0 },
+          }"
         />
       </SidebarGroup>
     </div>

diff --git a/components/sidebar/SidebarItem.vue b/components/sidebar/SidebarItem.vue
@@ -1,20 +1,23 @@
 <script lang="ts" setup>
+import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
+
 withDefaults(
   defineProps<{
     type?: "page" | "playlist" | "private-playlist";
     title: string;
-    url: string;
+    link: RoutesNamedLocations;
     image?: string;
   }>(),
   {
     type: "page",
+    image: "",
   }
 );
 </script>
 
 <template>
   <NuxtLink
-    :to="url"
+    :to="link"
     active-class="bg-tint"
     class="py-2 px-4 rounded-xl group flex gap-2"
   >

diff --git a/components/track/TrackList.vue b/components/track/TrackList.vue
@@ -24,8 +24,8 @@ const toggleDropdownForTrack = (trackReference: string) => {
   }
 };
 
-const dropdownMenuItemsForTrack = (track: TrackModel): DropdownMenuItem[] => {
-  const items = [];
+const dropdownMenuItemsForTrack = (track: TrackModel) => {
+  const items: DropdownMenuItem[] = [];
 
   items.push({
     icon: "icon.play",
@@ -37,7 +37,7 @@ const dropdownMenuItemsForTrack = (track: TrackModel): DropdownMenuItem[] => {
     items.push({
       icon: "icon.category.album",
       text: "Go to album",
-      link: `/album/${track.meta.parent.id}`,
+      link: { name: "album-id", params: { id: track.meta.parent.id } },
     });
   }
 
@@ -47,21 +47,25 @@ const dropdownMenuItemsForTrack = (track: TrackModel): DropdownMenuItem[] => {
     clickFunction: () => addTrackToQueue(track),
   });
 
-  // TODO: change links
+  // TODO: add link
   items.push({
     icon: "icon.category.playlist",
     text: "Add to Playlist",
   });
-  items.push({ icon: "icon.share", text: "Share track", link: "/browse" });
+  items.push({
+    icon: "icon.share",
+    text: "Share track",
+    link: { name: "browse" }, // TODO: change link
+  });
   items.push({
     icon: "icon.person",
     text: "Go to contributors",
-    link: "/browse",
+    link: { name: "browse" }, // TODO: change link
   });
   items.push({
     icon: "icon.information",
     text: "More information",
-    link: "/browse",
+    link: { name: "browse" }, // TODO: change link
   });
 
   return items;

diff --git a/composables/album.ts b/composables/album.ts
@@ -0,0 +1,23 @@
+import { AlbumApi, AlbumModel } from "@bcc-code/bmm-sdk-fetch";
+
+interface UseAlbumOptions {
+  id: number;
+}
+
+/**
+ * Get playlist with the specified id
+ */
+export function useAlbum(options: UseAlbumOptions) {
+  const { id } = options;
+
+  return useAsyncData<AlbumModel>(`album-${id}`, () =>
+    new AlbumApi().albumIdGet({ id })
+  );
+}
+
+/**
+ * Get all albums
+ */
+export function useAlbums() {
+  return useAsyncData<AlbumModel[]>("albums", () => new AlbumApi().albumGet());
+}
diff --git a/i18n.config.ts b/i18n.config.ts
@@ -28,7 +28,6 @@ import zh from "./locales/zh.json";
 
 const i18nConfig = {
   legacy: false,
-  locale: "en",
   messages: {
     af,
     bg,

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,34 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-
-// Due to a bug in @nuxtjs/i18n@8.0.0-beta.11 we have to use beta.10 with inline configuration. See: https://github.com/nuxt-modules/i18n/issues/1990
-// Hopefully when beta.12 is available this can be removed again.
-import af from "./locales/af.json";
-import bg from "./locales/bg.json";
-import cs from "./locales/cs.json";
-import da from "./locales/da.json";
-import de from "./locales/de.json";
-import el from "./locales/el.json";
-import en from "./locales/en.json";
-import es from "./locales/es.json";
-import et from "./locales/et.json";
-import fi from "./locales/fi.json";
-import fr from "./locales/fr.json";
-import he from "./locales/he.json";
-import hr from "./locales/hr.json";
-import hu from "./locales/hu.json";
-import it from "./locales/it.json";
-import nb from "./locales/nb.json";
-import nl from "./locales/nl.json";
-import pl from "./locales/pl.json";
-import pt from "./locales/pt.json";
-import ro from "./locales/ro.json";
-import ru from "./locales/ru.json";
-import sl from "./locales/sl.json";
-import tr from "./locales/tr.json";
-import uk from "./locales/uk.json";
-import zh from "./locales/zh.json";
+import vueI18n from "./i18n.config";
 
 const modules: (string | any)[] = [
+  ["nuxt-typed-router", { strict: true }],
   "@nuxt/devtools",
   "@nuxtjs/tailwindcss",
   "@nuxtjs/i18n",
@@ -47,39 +21,10 @@ export default defineNuxtConfig({
     },
   },
   i18n: {
+    strategy: "no_prefix",
     defaultLocale: "en",
-    vueI18n: {
-      legacy: false,
-      locale: "en",
-      fallbackLocale: "fr",
-      messages: {
-        af,
-        bg,
-        cs,
-        da,
-        de,
-        el,
-        en,
-        es,
-        et,
-        fi,
-        fr,
-        he,
-        hr,
-        hu,
-        it,
-        nb,
-        nl,
-        pl,
-        pt,
-        ro,
-        ru,
-        sl,
-        tr,
-        uk,
-        zh,
-      },
-    },
+    // Due to a bug in @nuxtjs/i18n@8.0.0-beta.11 we have to use beta.10 with inline configuration. See: https://github.com/nuxt-modules/i18n/issues/1990
+    vueI18n,
   },
   imports: {
     dirs: ["stores"],