rebuild search route with custom pages for tracks, album, and artists

src/assets/scss/Global/basic.scss

@@ -86,17 +86,17 @@ button {
   }
 }
 
-
 .btn-active {
   background-image: linear-gradient($darkestblue, $darkblue);
 }
 
+.btn-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
 .btn-more {
   width: 2.5rem;
-
-  svg {
-    transform: scale(1.25);
-  }
 }
 
 .separator {

src/assets/scss/moz.scss

@@ -6,11 +6,13 @@
     padding-right: 1rem;
   }
 
+  // applies to playlist list page
   .content-page {
     margin-right: calc(0rem - ($medium + 4px));
     padding-right: calc(1rem - 3px) !important;
   }
 
+  // virtual scroller pages: folder, playlist, album
   .header-list-layout {
     margin-right: calc(0rem - ($medium + 4px)) !important;
 
@@ -22,4 +24,8 @@
   #app-grid.noSidebar > #acontent {
     padding-right: 1rem !important;
   }
+
+  .search-view {
+    margin-right: -1rem !important;
+  }
 }

src/components/LeftSidebar/Navigation.vue

@@ -57,7 +57,7 @@ const menus = [
   {
     name: "search",
     route_name: Routes.search,
-    params: { page: "top" },
+    params: { page: "tracks" },
     icon: SearchSvg,
   },
   {

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="artists-results" v-auto-animate>
     <div
-      v-auto-animate
       class="search-results-grid"
       v-if="album_grid == true && search.albums.value.length"
     >
       <AlbumCard v-for="a in search.albums.value" :key="a.albumid" :album="a" />
     </div>
     <div
-      v-auto-animate
       class="search-results-grid"
       v-else-if="!album_grid && search.artists.value.length"
     >

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="tracks-results" class="noscroll">
-    <div v-if="search.tracks.value.length" v-auto-animate>
+    <div v-if="search.tracks.value.length">
       <TrackComponent
         v-for="(track, index) in search.tracks.value"
         :key="track.trackid"
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 
 import SongItem from "@/components/shared/SongItem.vue";
 import TrackItem from "@/components/shared/TrackItem.vue";
@@ -51,4 +51,8 @@ let use_song_item: boolean = false;
 if (props.isOnSearchPage) {
   use_song_item = true;
 }
+
+onMounted(() => {
+  search.switchTab("tracks");
+});
 </script>

src/components/nav/Titles/Folder.vue

@@ -36,7 +36,7 @@
 import SearchInput from "@/components/shared/NavSearchInput.vue";
 import { Routes } from "@/composables/enums";
 import { subPath } from "@/interfaces";
-import { focusElem } from "@/utils";
+import { focusElemByClass } from "@/utils";
 import { onUpdated } from "vue";
 
 defineProps<{
@@ -44,7 +44,7 @@ defineProps<{
 }>();
 
 onUpdated(() => {
-  focusElem("inthisfolder");
+  focusElemByClass("inthisfolder");
 });
 </script>
 

src/components/shared/AlbumCard.vue

@@ -30,6 +30,7 @@ defineProps<{
   gap: $small;
   padding: $medium;
   border-radius: 1rem;
+  height: fit-content;
 
   &:hover {
     background-color: $gray4;

src/components/shared/ArtistCard.vue

@@ -32,6 +32,7 @@ defineProps<{
   padding: 1.2rem 1rem !important;
   font-size: 0.9rem;
   font-weight: bolder;
+  height: fit-content;
 
   &:hover {
     background-color: $gray4;

src/composables/fetch/searchMusic.ts

@@ -49,11 +49,12 @@ async function loadMoreTracks(index: number) {
   return response.data;
 }
 
-async function loadMoreAlbums(index: number) {
+async function loadMoreAlbums(index: number, count: number) {
   const response = await axios.get(loadMoreUrl, {
     params: {
       type: "albums",
       index: index,
+      count: count,
     },
   });
 

src/config.ts

@@ -1,5 +1,5 @@
 // "local" | "remote"
-let mode = "local";
+let mode = "remote";
 
 export interface D<T = string> {
   [key: string]: T;
@@ -7,7 +7,7 @@ export interface D<T = string> {
 
 const domains: D = {
   local: "http://localhost:",
-  remote: "http://10.5.71.115:",
+  remote: "http://10.16.22.240:",
 };
 
 const ports = {

src/layouts/HeaderAndVList.vue

@@ -46,7 +46,7 @@
             updateQueue(t.data.index !== undefined ? t.data.index : t.index)
           "
         />
-        <div class="bottom-padding" style="height: 64px"></div>
+        <div class="page-bottom-padding" style="height: 64px"></div>
       </div>
     </div>
   </div>

src/stores/search.ts

@@ -22,6 +22,8 @@ import { useDebounce } from "@vueuse/core";
 function scrollOnLoad() {
   const elem = document.getElementById("tab-content") as HTMLElement;
 
+  if (elem === null) return;
+
   elem.scroll({
     top: elem.scrollHeight,
     left: 0,
@@ -85,6 +87,7 @@ export default defineStore("search", () => {
   }
 
   function fetchAlbums(query: string) {
+    console.log("fetching albums");
     if (!query) return;
 
     searchAlbums(query).then((res) => {
@@ -92,6 +95,8 @@ export default defineStore("search", () => {
       albums.more = res.more;
       albums.query = query;
     });
+
+    console.log("fetched albums");
   }
 
   function fetchArtists(query: string) {
@@ -117,11 +122,11 @@ export default defineStore("search", () => {
       .then(() => scrollOnLoad());
   }
 
-  function loadAlbums() {
+  function loadAlbums(count = 6) {
-    loadCounter.albums += RESULT_COUNT;
+    loadCounter.albums += count;
 
     startLoading();
-    loadMoreAlbums(loadCounter.albums)
+    loadMoreAlbums(loadCounter.albums, count)
       .then((res) => {
         albums.value = [...albums.value, ...res.albums];
         albums.more = res.more;

src/stores/tabs.ts

@@ -1,5 +1,5 @@
+import { focusElemByClass } from "@/utils";
 import { defineStore } from "pinia";
-import { focusElem } from "@/utils";
 
 const tablist = {
   home: "home",
@@ -16,7 +16,7 @@ export default defineStore("tabs", {
     changeTab(tab: string) {
       if (tab === this.tabs.queue) {
         setTimeout(() => {
-          focusElem("currentInQueue");
+          focusElemByClass("currentInQueue");
         }, 500);
       }
       this.current = tab;

src/utils/index.ts

@@ -1,18 +1,19 @@
-import focusElem from "./useFocusElem";
+import createSubPaths from "./useCreateSubPaths";
+import focusElemByClass from "./useFocusElem";
+import formatSeconds from "./useFormatSeconds";
+import useFuse from "./useFuse";
+import { readLocalStorage, writeLocalStorage } from "./useLocalStorage";
 import putCommas from "./usePutCommas";
 import useVisibility from "./useVisibility";
-import formatSeconds from "./useFormatSeconds";
-import createSubPaths from "./useCreateSubPaths";
-import { readLocalStorage, writeLocalStorage } from "./useLocalStorage";
-import useFuse from "./useFuse";
 
 export {
-  readLocalStorage,
+    readLocalStorage,
-  writeLocalStorage,
+    writeLocalStorage,
-  createSubPaths,
+    createSubPaths,
-  focusElem,
+    focusElemByClass,
-  useVisibility,
+    useVisibility,
-  formatSeconds,
+    formatSeconds,
-  putCommas,
+    putCommas,
-  useFuse,
+    useFuse,
 };
+

src/utils/useCalculateSearchItemCount.ts

@@ -0,0 +1,6 @@
+const itemWidth = 160;
+const itemMarginBottom = 24;
+
+export default (containerWidth = 0, containerHeight = 0) => {
+  return Math.floor(containerWidth / itemWidth);
+};

src/utils/useFocusElem.ts

@@ -4,7 +4,7 @@
  * @param delay Delay in milliseconds
  * @param pos Positioning of the focus element
  */
-export default function focusElem(
+export default function focusElemByClass(
   className: string,
   delay?: number,
   pos?: any

src/views/SearchView/albums.vue

@@ -1,11 +1,30 @@
 <template>
-  <div class="search-albums-view"></div>
+  <div class="search-albums-view grid-page" v-auto-animate>
+    <AlbumCard
+      v-for="album in search.albums.value"
+      :key="album.hash"
+      :album="album"
+    />
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import AlbumCard from "@/components/shared/AlbumCard.vue";
+import useSearchStore from "@/stores/search";
+
+const search = useSearchStore();
+</script>
 
 <style lang="scss">
-.search-albums-view {
+// .search-albums-view.grid-page {
-  height: 100%;
+//   max-height: 100%;
-}
+//   display: grid;
+//   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+//   gap: 1.75rem 0;
+
+//   padding-bottom: 4rem;
+//   padding-right: $medium;
+
+//   overflow: auto;
+// }
 </style>

src/views/SearchView/artists.vue

@@ -1,11 +1,19 @@
 <template>
-  <div class="search-artists-view"></div>
+  <div v-auto-animate class="search-artists-view grid-page">
+    <ArtistCard
+      v-for="artist in search.artists.value"
+      :key="artist.image"
+      :artist="artist"
+    />
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import ArtistCard from "@/components/shared/ArtistCard.vue";
+import useSearchStore from "@/stores/search";
+
+const search = useSearchStore();
+</script>
 
 <style lang="scss">
-.search-artists-view {
-  height: 100%;
-}
 </style>

src/views/SearchView/main.vue

@@ -1,20 +1,48 @@
 <template>
   <div class="search-view">
     <div class="tabs">
-      <button v-for="page in pages">{{ page }}</button>
+      <button
+        v-for="page in pages"
+        :class="{ 'btn-active': page === $route.params.page }"
+        @click="
+          () => {
+            $router.push({ name: Routes.search, params: { page: page } });
+            search.switchTab(page);
+          }
+        "
+      >
+        {{ page }}
+      </button>
     </div>
-    <div class="noscroll">
+    <div ref="page" class="page noscroll" v-auto-animate>
-      <component :is="getComponent()" />
+      <component :is="component" />
     </div>
+    <button
+      class="load-more"
+      :class="{ 'btn-disabled': !canLoadMore }"
+      @click="loadMore"
+    >
+      Load more
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useRoute } from "vue-router";
-
+import { computed, onMounted, ref } from "vue";
 import TracksPage from "./tracks.vue";
 import AlbumPage from "./albums.vue";
 import ArtistPage from "./artists.vue";
+import { Routes } from "@/composables/enums";
+import useSearchStore from "@/stores/search";
+import { focusElemByClass } from "@/utils";
+
+// width of album and artist cards
+const defaultItemCount = 6;
+const gridItemWidth = 160;
+const page = ref<HTMLElement>();
+
+const search = useSearchStore();
 
 enum pages {
   tracks = "tracks",
@@ -23,10 +51,9 @@ enum pages {
 }
 
 const route = useRoute();
-const page = route.params.page as string;
 
-function getComponent() {
+const component = computed(() => {
-  switch (page) {
+  switch (route.params.page) {
     case pages.tracks:
       return TracksPage;
     case pages.albums:
@@ -38,22 +65,101 @@ function getComponent() {
     default:
       return TracksPage;
   }
+});
+
+function loadTracks() {
+  search.loadTracks();
+  focusElemByClass("page-bottom-padding", 100);
 }
+
+function getGridRowItemCount() {
+  if (page.value?.offsetWidth === undefined) return defaultItemCount;
+  const page_width = page.value?.offsetWidth - 16;
+  return Math.floor(page_width / gridItemWidth);
+}
+
+function scrollToGridPageBottom() {
+  const elem = document.getElementsByClassName("grid-page")[0] as HTMLElement;
+  setTimeout(() => {
+    elem.scrollTo(0, elem.scrollHeight);
+  }, 250);
+
+  // const elemWidth = elem.offsetWidth;
+  // console.log(Math.floor(elemWidth / 160));
+  // elem.scroll({
+  //   top: elem.scrollHeight,
+  //   behavior: "smooth",
+  // });
+}
+
+function loadAlbums() {
+  scrollToGridPageBottom();
+
+  setTimeout(() => {
+    // search.loadAlbums();
+    const itemCount = getGridRowItemCount();
+    search.loadAlbums(itemCount);
+  
+    scrollToGridPageBottom();
+  }, 250);
+
+}
+
+function loadArtists() {
+  // const itemCount = getGridRowItemCount();
+  search.loadArtists();
+
+  scrollToGridPageBottom();
+}
+
+function loadMore() {
+  switch (route.params.page) {
+    case pages.tracks:
+      loadTracks();
+      break;
+    case pages.albums:
+      loadAlbums();
+      break;
+
+    case pages.artists:
+      loadArtists();
+      break;
+    default:
+      break;
+  }
+}
+
+const canLoadMore = computed(() => {
+  switch (route.params.page) {
+    case pages.tracks:
+      return search.tracks.more;
+    case pages.albums:
+      return search.albums.more;
+    case pages.artists:
+      return search.artists.more;
+    default:
+      false;
+  }
+});
+
+onMounted(() => {
+  search.switchTab(route.params.page as string);
+});
 </script>
 
 <style lang="scss">
 .search-view {
   height: calc(100% - 1rem);
-  width: calc(100% - $small);
   display: grid;
+  gap: 1rem;
   grid-template-rows: max-content 1fr;
 
+  margin-right: -0.75rem;
+
   .tabs {
     width: fit-content;
     display: flex;
     gap: 1rem;
-    // margin: 0 auto;
-    margin-bottom: 1rem;
 
     & > * {
       background-color: $gray4;
@@ -62,5 +168,26 @@ function getComponent() {
       text-transform: capitalize;
     }
   }
+
+  .page.noscroll {
+    overflow-x: visible;
+  }
+
+  .grid-page {
+    max-height: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    gap: 1.75rem 0;
+
+    padding-bottom: 4rem;
+    padding-right: 1rem;
+
+    overflow: auto;
+  }
+
+  button.load-more {
+    width: 10rem;
+    margin: 0 auto;
+  }
 }
 </style>

src/views/SearchView/tracks.vue

@@ -3,7 +3,6 @@
     <div class="noscroll">
       <Layout :no_header="true" :tracks="search.tracks.value" />
     </div>
-    <button @click.prevent="search.loadTracks">Load More</button>
   </div>
 </template>
 
@@ -18,9 +17,13 @@ const search = useSearchStore();
 .search-tracks-view {
   height: 100%;
 
-  display: grid;
+  .noscroll {
-  grid-template-rows: 1fr max-content;
+    height: 100%;
-  gap: 1rem;
+  }
+
+  .header-list-layout {
+    width: 100%;
+  }
 
   button {
     width: fit-content;