extract shared code into DocumentList

components/DocumentList.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DocumentListIAllDocumentModels } from "@bcc-code/bmm-sdk-fetch";
+
+const props = defineProps<{
+  list: DocumentListIAllDocumentModels | null;
+  pending: boolean;
+}>();
+
+watch(
+  props,
+  () => {
+    toolbarTitleStore().setToolbarTitle(props.list?.title ?? " ");
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <template v-if="props.pending">
+      <ul>
+        <li
+          v-for="index in 5"
+          :key="index"
+          class="my-6 h-11 w-full animate-pulse rounded-lg bg-background-2"
+        ></li>
+      </ul>
+    </template>
+    <template v-else>
+      <DocumentModels
+        v-if="list && list.items"
+        :models="list.items"
+      ></DocumentModels>
+    </template>
+  </div>
+</template>

components/DocumentModels.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type {
+  IAllDocumentModels,
+  TrackModel,
+  SectionHeaderModel,
+} from "@bcc-code/bmm-sdk-fetch";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+
+type IDiscoverableGroup = {
+  header: SectionHeaderModel | null;
+  items: Exclude<IAllDocumentModels, SectionHeaderModel>[];
+};
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  models: IAllDocumentModels[];
+}>();
+
+const convertModels = (models: IAllDocumentModels[]) => {
+  let currentSection: IDiscoverableGroup["items"] = [];
+  const result: IDiscoverableGroup[] = [];
+  models.forEach((el, i) => {
+    if (el.type === "section_header") {
+      currentSection = [];
+      result.push({
+        header: el,
+        items: currentSection,
+      });
+    } else if (i === 0) {
+      currentSection = [el];
+      result.push({
+        header: null,
+        items: currentSection,
+      });
+    } else {
+      currentSection.push(el);
+    }
+  });
+  return result;
+};
+
+const { setQueue } = useNuxtApp().$mediaPlayer;
+
+const playItem = (item: TrackModel, group: IDiscoverableGroup) => {
+  const items = group.items.filter((c): c is TrackModel => c.type === "track");
+  setQueue(
+    items,
+    items.findIndex((track) => track.id === item.id),
+  );
+};
+
+// We remove the hostname so that we use SPA links (without full page refresh)
+const parseLink = (link: string) => {
+  const url = new URL(link);
+  return url.pathname + url.search + url.hash;
+};
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallScreen = breakpoints.smallerOrEqual("lg");
+</script>
+
+<template>
+  <template
+    v-for="group in convertModels(props.models)"
+    :key="group.header?.id || 0"
+  >
+    <PageHeading v-if="group.header" :level="3">
+      <div class="flex items-center justify-between">
+        <div>
+          <NuxtLink
+            v-if="typeof group.header.link === 'string'"
+            :to="parseLink(group.header.link)"
+          >
+            {{ group.header.title }}
+          </NuxtLink>
+          <span v-else>{{ group.header.title }}</span>
+        </div>
+        <NuxtLink v-if="group.header.link" :to="parseLink(group.header.link)">
+          <ButtonStyled intent="secondary" size="small">
+            <span class="whitespace-nowrap">
+              {{ t("home.list.see-all") }}
+            </span>
+          </ButtonStyled>
+        </NuxtLink>
+      </div>
+    </PageHeading>
+    <div
+      v-if="group.header?.useCoverCarousel"
+      class="flex flex-row flex-wrap gap-6"
+    >
+      <template
+        v-for="item in group.items.slice(0, isSmallScreen ? 4 : 6)"
+        :key="item.id"
+      >
+        <NuxtLink
+          v-if="item.type === 'album'"
+          :to="{ name: 'album-id', params: { id: item.id } }"
+        >
+          <ItemCard :item="item" />
+        </NuxtLink>
+        <NuxtLink
+          v-else-if="item.type === 'playlist'"
+          :to="{ name: 'playlist-curated-id', params: { id: item.id } }"
+        >
+          <ItemCard :item="item" />
+        </NuxtLink>
+        <NuxtLink
+          v-else-if="item.type === 'podcast'"
+          :to="{ name: 'playlist-podcast-id', params: { id: item.id } }"
+        >
+          <ItemCard :item="item" />
+        </NuxtLink>
+        <div
+          v-else
+          class="grid w-52 flex-shrink-0 basis-52 gap-4"
+          style="background-color: rgba(255, 0, 0, 0.4); color: red"
+        >
+          "{{ item.type }}" is not yet implemented ...
+        </div>
+      </template>
+    </div>
+    <ol
+      v-else
+      class="w-full divide-y divide-label-separator grid grid-cols-tracklist"
+    >
+      <template v-for="item in group.items" :key="item.id">
+        <h2
+          v-if="item.type === 'chapter_header'"
+          class="text-2xl font-extrabold pt-10 pb-4"
+        >
+          {{ item.title }}
+        </h2>
+        <TrackItem
+          v-else-if="item.type === 'track'"
+          :track="item"
+          :is-track-type-known="true"
+          show-thumbnail
+          @play-track="playItem(item, group)"
+        ></TrackItem>
+        <ContributorListItem
+          v-else-if="item.type === 'contributor'"
+          :contributor="item"
+        ></ContributorListItem>
+        <AlbumItem v-else-if="item.type === 'album'" :album="item" />
+        <PlaylistItem v-else-if="item.type === 'playlist'" :playlist="item" />
+        <PodcastItem v-else-if="item.type === 'podcast'" :podcast="item" />
+        <li v-else>
+          <div style="background-color: rgba(255, 0, 0, 0.4); color: red">
+            "{{ item.type }}" is not yet implemented ...
+            {{ console.log("not implemented", item) }}
+          </div>
+        </li>
+      </template>
+    </ol>
+  </template>
+</template>

composables/browse.ts

@@ -5,3 +5,31 @@ export function useBrowse() {
     useLazyAsyncData("browse", () => new BrowseApi().browseGet()),
   );
 }
+
+export function useBrowseEvents() {
+  return reactiveApi(
+    useLazyAsyncData("browse-events", () => new BrowseApi().browseEventsGet()),
+  );
+}
+
+export function useBrowseAudiobooks() {
+  return reactiveApi(
+    useLazyAsyncData("browse-audiobooks", () =>
+      new BrowseApi().browseAudiobooksGet(),
+    ),
+  );
+}
+
+export function useBrowseMusic() {
+  return reactiveApi(
+    useLazyAsyncData("browse-music", () => new BrowseApi().browseMusicGet()),
+  );
+}
+
+export function useBrowsePodcast() {
+  return reactiveApi(
+    useLazyAsyncData("browse-podcast", () =>
+      new BrowseApi().browsePodcastsGet(),
+    ),
+  );
+}

composables/discover.ts

@@ -1,34 +1,10 @@
 import { DiscoverApi } from "@bcc-code/bmm-sdk-fetch";
-import type {
-  DiscoverGetRequest,
-  SectionHeaderModel,
-  IAllDocumentModels,
-} from "@bcc-code/bmm-sdk-fetch";
-
-export type IDiscoverableGroup = {
-  header: SectionHeaderModel | null;
-  items: Exclude<IAllDocumentModels, SectionHeaderModel>[];
-};
+import type { DiscoverGetRequest } from "@bcc-code/bmm-sdk-fetch";
 
 export function useDiscover(requestParameters: DiscoverGetRequest) {
   return reactiveApi(
     useLazyAsyncData("discover", () =>
-      new DiscoverApi().discoverGet(requestParameters).then((d) => {
-        let currentSection: IDiscoverableGroup["items"] = [];
-        const result: IDiscoverableGroup[] = [];
-        d.forEach((el) => {
-          if (el.type === "section_header") {
-            currentSection = [];
-            result.push({
-              header: el,
-              items: currentSection,
-            });
-          } else {
-            currentSection.push(el);
-          }
-        });
-        return result;
-      }),
+      new DiscoverApi().discoverGet(requestParameters),
     ),
   );
 }

composables/playlist.ts

@@ -35,3 +35,11 @@ export function useCuratedPlaylists() {
     useLazyAsyncData("playlists", () => new PlaylistApi().playlistGet()),
   );
 }
+
+export function useFeaturedPlaylists() {
+  return reactiveApi(
+    useLazyAsyncData("playlists-featured", () =>
+      new PlaylistApi().playlistDocumentsGet(),
+    ),
+  );
+}

package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@auth0/auth0-vue": "^2.3.3",
-    "@bcc-code/bmm-sdk-fetch": "^7.1.0",
+    "@bcc-code/bmm-sdk-fetch": "^7.3.0",
     "@headlessui/vue": "^1.7.17",
     "@microsoft/applicationinsights-web": "^3.0.7",
     "@pinia/nuxt": "^0.5.1",

pages/browse/audiobooks.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+const { data: models, pending } = useBrowseAudiobooks();
+</script>
+
+<template>
+  <DocumentList :list="models" :pending="pending"></DocumentList>
+</template>

pages/browse/events.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+const { data: models, pending } = useBrowseEvents();
+</script>
+
+<template>
+  <DocumentList :list="models" :pending="pending"></DocumentList>
+</template>

pages/browse/index.vue

@@ -2,12 +2,11 @@
 const { t } = useI18n();
 toolbarTitleStore().setReactiveToolbarTitle(() => t("nav.browse"));
 
-const { data: browseSections, pending } = useBrowse();
+const { data: models, pending } = useBrowse();
 </script>
 
 <template>
   <div>
-    <PageHeading class="mb-6">{{ $t("nav.browse") }}</PageHeading>
     <template v-if="pending">
       <ul>
         <li
@@ -17,36 +16,8 @@ const { data: browseSections, pending } = useBrowse();
         ></li>
       </ul>
     </template>
-    <ul v-else>
-      <template v-for="section in browseSections" :key="section.id || 0">
-        <PageHeading v-if="section.type === 'section_header'" :level="3">
-          <div class="flex items-center justify-between">
-            <div>
-              <a v-if="typeof section.link === 'string'" :href="section.link">
-                {{ section.title }}
-              </a>
-              <span v-else>{{ section.title }}</span>
-            </div>
-            <a v-if="section.link" :href="section.link">
-              <ButtonStyled intent="secondary" size="small">
-                <span class="whitespace-nowrap">
-                  {{ t("home.list.see-all") }}
-                </span>
-              </ButtonStyled>
-            </a>
-          </div>
-        </PageHeading>
-        <AlbumItem v-else-if="section.type === 'album'" :album="section" />
-        <PlaylistItem
-          v-else-if="section.type === 'playlist'"
-          :playlist="section"
-        />
-        <PodcastItem
-          v-else-if="section.type === 'podcast'"
-          :podcast="section"
-        />
-        <p v-else style="color: red">This is not implemented yet</p>
-      </template>
-    </ul>
+    <template v-else>
+      <DocumentModels v-if="models !== null" :models="models"></DocumentModels>
+    </template>
   </div>
 </template>

pages/browse/music.vue

@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+const { data: models, pending } = useBrowseMusic();
+</script>
+
 <template>
-  <h1>The route {{ useRoute().name }} has not been implemented yet.</h1>
+  <DocumentList :list="models" :pending="pending"></DocumentList>
 </template>

pages/browse/podcasts.vue

@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+const { data: models, pending } = useBrowsePodcast();
+</script>
+
 <template>
-  <h1>The route {{ useRoute().name }} has not been implemented yet.</h1>
+  <DocumentList :list="models" :pending="pending"></DocumentList>
 </template>

pages/featured.vue

@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+import type { DocumentListIAllDocumentModels } from "@bcc-code/bmm-sdk-fetch";
+
+const { data: models, pending } = useFeaturedPlaylists();
+</script>
+
 <template>
-  <h1>The route {{ useRoute().name }} has not been implemented yet.</h1>
+  <DocumentList
+    :list="models as DocumentListIAllDocumentModels"
+    :pending="pending"
+  ></DocumentList>
 </template>