extract shared code into DocumentList

components/DocumentModels.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { IAllDocumentModels, TrackModel } from "@bcc-code/bmm-sdk-fetch";
+import type { IDiscoverableGroup } from "~/composables/discover";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    type?: "page" | "playlist" | "private-playlist";
+    models: IAllDocumentModels[];
+  }>(),
+  {
+    type: "page",
+  },
+);
+
+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),
+  );
+};
+
+// this is only needed while it's hosted on bmm-web.brunstad.org (Actually, it might be needed for )
+const parseLink = (link: string) =>
+  link.replace("https://bmm.brunstad.org", "");
+
+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>
+          <a
+            v-if="typeof group.header.link === 'string'"
+            :href="parseLink(group.header.link)"
+          >
+            {{ group.header.title }}
+          </a>
+          <span v-else>{{ group.header.title }}</span>
+        </div>
+        <a v-if="group.header.link" :href="parseLink(group.header.link)">
+          <ButtonStyled intent="secondary" size="small">
+            <span class="whitespace-nowrap">
+              {{ t("home.list.see-all") }}
+            </span>
+          </ButtonStyled>
+        </a>
+      </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">
+      <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,27 @@ export function useBrowse() {
     useLazyAsyncData("browse", () => new BrowseApi().browseGet()),
   );
 }
+
+export function useBrowseEvents() {
+  return reactiveApi(
+    useLazyAsyncData("browse", () => new BrowseApi().browseEventsGet()),
+  );
+}
+
+export function useBrowseAudiobooks() {
+  return reactiveApi(
+    useLazyAsyncData("browse", () => new BrowseApi().browseAudiobooksGet()),
+  );
+}
+
+export function useBrowseMusic() {
+  return reactiveApi(
+    useLazyAsyncData("browse", () => new BrowseApi().browseMusicGet()),
+  );
+}
+
+export function useBrowsePodcast() {
+  return reactiveApi(
+    useLazyAsyncData("browse", () => new BrowseApi().browsePodcastsGet()),
+  );
+}

composables/discover.ts

@@ -10,7 +10,7 @@ export type IDiscoverableGroup = {
   items: Exclude<IAllDocumentModels, SectionHeaderModel>[];
 };
 
-export function useDiscover(requestParameters: DiscoverGetRequest) {
+export function useDiscoverOld(requestParameters: DiscoverGetRequest) {
   return reactiveApi(
     useLazyAsyncData("discover", () =>
       new DiscoverApi().discoverGet(requestParameters).then((d) => {
@@ -32,3 +32,11 @@ export function useDiscover(requestParameters: DiscoverGetRequest) {
     ),
   );
 }
+
+export function useDiscover(requestParameters: DiscoverGetRequest) {
+  return reactiveApi(
+    useLazyAsyncData("discover", () =>
+      new DiscoverApi().discoverGet(requestParameters),
+    ),
+  );
+}

pages/browse/audiobooks.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>The route {{ useRoute().name }} has not been implemented yet.</h1>
+</template>

pages/browse/events.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { IAllDocumentModels } from "@bcc-code/bmm-sdk-fetch";
+
+const { data: models, pending } = useBrowseEvents();
+
+toolbarTitleStore().setReactiveToolbarTitle(() => models.value?.title ?? " ");
+</script>
+
+<template>
+  <div>
+    <template v-if="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="
+          models !== null && models.items !== null && models.items !== undefined
+        "
+        :models="models.items as IAllDocumentModels[]"
+      ></DocumentModels>
+    </template>
+  </div>
+</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>