remove bottom content

package.json

@@ -18,6 +18,7 @@
     "vue": "^3.2.37",
     "vue-debounce": "^3.0.2",
     "vue-router": "^4.1.3",
+    "vue-template-compiler": "^2.0.0",
     "webpack": "^5.74.0"
   },
   "devDependencies": {

src/assets/scss/_mixins.scss

@@ -10,17 +10,19 @@
     @content;
   }
 }
-@mixin tablet-portrait {
-  @media (max-width: 810) {
-    @content;
-  }
-}
 
 @mixin tablet-landscape {
   @media (max-width: 1080px) {
     @content;
   }
 }
+
+@mixin tablet-portrait {
+  @media (max-width: 810) {
+    @content;
+  }
+}
+
 @mixin for-desktop-down {
   @media (max-width: 1600px) {
     @content;

src/components/AlbumView/Header.vue

@@ -30,9 +30,9 @@
       </div>
       <div class="bottom">
         <div class="stats">
-          {{ album.count }} Tracks • {{ formatSeconds(album.duration, true) }} •
+          {{ album.artist }} •
           {{ album.date }} •
-          {{ album.artist }}
+          {{ album.count }} Tracks • {{ formatSeconds(album.duration, true) }}
         </div>
         <PlayBtnRect
           :source="playSources.album"
@@ -59,6 +59,7 @@ import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
 const props = defineProps<{
   album: AlbumInfo;
+  bio: string | null;
 }>();
 
 const emit = defineEmits<{
@@ -89,7 +90,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
 <style lang="scss">
 .a-header {
   display: grid;
-  grid-template-columns: max-content 1fr;
+  grid-template-columns: 1fr;
   gap: 1rem;
   padding: 1rem;
   height: 100% !important;
@@ -102,7 +103,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
     position: relative;
 
     img {
-      height: 16rem;
+      height: 6rem;
       aspect-ratio: 1;
       object-fit: cover;
       transition: all 0.2s ease-in-out;
@@ -122,7 +123,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
 
     .top {
       .h {
-        opacity: 0.75;
+        opacity: 0.5;
       }
       .title {
         font-size: 2.5rem;
@@ -150,9 +151,8 @@ useVisibility(albumheaderthing, handleVisibilityState);
     }
   }
 
+  // grid-template-columns: 1fr !important;
   @include for-desktop-down {
-    grid-template-columns: 1fr;
-
     .art > img {
       height: 6rem;
       box-shadow: 0 0 1rem $black;

src/components/FolderView/SongList.vue

@@ -25,7 +25,7 @@
         <div class="text">No tracks here</div>
       </div>
     </div>
-    <div class="copyright" v-if="copyright">
+    <div class="copyright" v-if="copyright && copyright()">
       {{ copyright() }}
     </div>
   </div>

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -11,7 +11,14 @@
         :alt="true"
       />
     </div>
-    <LoadMore v-if="search.artists.more" @loadMore="loadMore" />
+    <LoadMore
+      v-if="album_grid && search.albums.more"
+      :loader="search.loadAlbums"
+    />
+    <LoadMore
+      v-if="!album_grid && search.artists.more"
+      :loader="search.loadArtists"
+    />
   </div>
 </template>
 
@@ -28,10 +35,10 @@ defineProps<{
   album_grid?: boolean;
 }>();
 
-function loadMore() {
+// function loadMore() {
-  search.updateLoadCounter("artists");
+//   search.updateLoadCounter("artists");
-  search.loadArtists(search.loadCounter.artists);
+//   search.loadArtists(search.loadCounter.artists);
-}
+// }
 </script>
 
 <style lang="scss">

src/components/RightSideBar/Search/LoadMore.vue

@@ -1,19 +1,17 @@
 <template>
   <div class="morexx">
-    <button @click="loadMore" class="btn">
+    <button class="btn" @click="loader">
       <div class="text">Load More</div>
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-const emit = defineEmits<{
+defineProps<{
-  (e: "loadMore"): void;
+  loader: () => void;
 }>();
 
-function loadMore() {
+
-  emit("loadMore");
-}
 </script>
 
 <style lang="scss">

src/components/RightSideBar/Search/TracksGrid.vue

@@ -11,7 +11,7 @@
         @PlayThis="updateQueue(index)"
       />
     </TransitionGroup>
-    <LoadMore v-if="search.tracks.more" @loadMore="loadMore" />
+    <LoadMore v-if="search.tracks.more" :loader="search.loadTracks" />
   </div>
 </template>
 
@@ -24,11 +24,6 @@ import useSearchStore from "../../../stores/search";
 const queue = useQStore();
 const search = useSearchStore();
 
-function loadMore() {
-  search.updateLoadCounter("tracks");
-  search.loadTracks(search.loadCounter.tracks);
-}
-
 function updateQueue(index: number) {
   queue.playFromSearch(search.query, search.tracks.value);
   queue.play(index);

src/layouts/HeaderContentBottom.vue

@@ -8,23 +8,6 @@
         <slot name="content"></slot>
       </main>
     </div>
-    <div
-      class="ap-page-bottom-container rounded"
-      ref="apbottomcontainer"
-      :class="{
-        bottomexpanded: bottomContainerRaised,
-      }"
-    >
-      <div class="click-to-expand" @click="toggleBottom">
-        <div>
-          <div class="arrow">↑</div>
-          <span>tap here</span>
-        </div>
-      </div>
-      <div class="bottom-content">
-        <slot name="bottom"></slot>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -112,7 +95,7 @@ function toggleBottom() {
     gap: 1rem;
 
     .ap-page-content {
-      padding-bottom: 16rem;
+      // padding-bottom: 16rem;
       
       @include for-desktop-down {
         min-height: calc(100vh - 38.75rem);

src/router/index.js

@@ -74,8 +74,11 @@ const routes = [
     component: AlbumView,
     beforeEnter: async (to) => {
       state.loading.value = true;
-      await useAStore()
+      const store = useAStore();
+
+      await store
         .fetchTracksAndArtists(to.params.hash)
+        .then(() => store.fetchBio(to.params.hash))
         .then(() => {
           state.loading.value = false;
         });

src/stores/queue.ts

@@ -1,3 +1,5 @@
+// @ts-strict
+
 import { defineStore } from "pinia";
 import state from "../composables/state";
 import { NotifType, useNotifStore } from "./notification";
@@ -102,8 +104,18 @@ export default defineStore("Queue", {
             };
           });
         })
-        .catch((err) => {
+        .catch((err: ErrorEvent) => {
-          console.error(err);
+          err.stopImmediatePropagation();
+          useNotifStore().showNotification(
+            "Can't play: " + track.title,
+            NotifType.Error
+          );
+
+          if (this.current !== this.tracklist.length - 1) {
+            setTimeout(() => {
+              this.playNext();
+            }, 1000);
+          }
         });
     },
     playPause() {

src/stores/search.ts

@@ -17,7 +17,7 @@ import useTabStore from "./tabs";
  * Scrolls on clicking the loadmore button
  */
 function scrollOnLoad() {
-  const elem = document.getElementById("tab-content");
+  const elem = document.getElementById("tab-content") as HTMLElement;
 
   elem.scroll({
     top: elem.scrollHeight,
@@ -88,13 +88,10 @@ export default defineStore("search", () => {
     });
   }
 
-  /**
+  function loadTracks() {
-   * Loads more search tracks results
+    loadCounter.tracks += 6;
-   *
+
-   * @param index The starting index of the tracks to load
+    loadMoreTracks(loadCounter.tracks)
-   */
-  function loadTracks(index: number) {
-    loadMoreTracks(index)
       .then((res) => {
         tracks.value = [...tracks.value, ...res.tracks];
         tracks.more = res.more;
@@ -102,27 +99,25 @@ export default defineStore("search", () => {
       .then(() => scrollOnLoad());
   }
 
-  /**
+  function loadAlbums() {
-   * Loads more search albums results
+    loadCounter.albums += 6;
-   *
+
-   * @param index The starting index of the albums to load
+    loadMoreAlbums(loadCounter.albums)
-   */
-  function loadAlbums(index: number) {
-    loadMoreAlbums(index)
       .then((res) => {
         albums.value = [...albums.value, ...res.albums];
         albums.more = res.more;
       })
-      .then(() => scrollOnLoad());
+      .then(() => {
+        setTimeout(() => {
+          scrollOnLoad();
+        }, 500);
+      });
   }
 
-  /**
+  function loadArtists() {
-   * Loads more search artists results
+    loadCounter.artists += 6;
-   *
+
-   * @param index The starting index of the artists to load
+    loadMoreArtists(loadCounter.artists)
-   */
-  function loadArtists(index: number) {
-    loadMoreArtists(index)
       .then((res) => {
         artists.value = [...artists.value, ...res.artists];
         artists.more = res.more;
@@ -130,22 +125,6 @@ export default defineStore("search", () => {
       .then(() => scrollOnLoad());
   }
 
-  type loadType = "tracks" | "albums" | "artists" | "playlists";
-
-  function updateLoadCounter(type: loadType) {
-    switch (type) {
-      case "tracks":
-        loadCounter.tracks += 6;
-        break;
-      case "albums":
-        loadCounter.albums += 6;
-        break;
-      case "artists":
-        loadCounter.artists += 6;
-        break;
-    }
-  }
-
   watch(
     () => query.value,
     (newQuery) => {
@@ -217,7 +196,6 @@ export default defineStore("search", () => {
     query,
     currentTab,
     loadCounter,
-    updateLoadCounter,
     loadTracks,
     loadAlbums,
     loadArtists,

src/views/album/index.vue

@@ -1,18 +1,11 @@
 <template>
-  <Page :bottomRaisedCallback="fetchAlbumBio">
+  <Page>
     <template #header>
-      <Header :album="album.info" />
+      <Header :album="album.info" :bio="album.bio" />
     </template>
     <template #content>
       <Content :discs="album.discs" :copyright="album.info.copyright" />
     </template>
-    <template #bottom>
-      <Bottom
-        :artists="album.artists"
-        :bio="album.bio"
-        :image="album.info?.image"
-      />
-    </template>
   </Page>
 </template>
 
@@ -25,7 +18,6 @@ import {
 } from "vue-router";
 
 import Page from "@/layouts/HeaderContentBottom.vue";
-import Bottom from "./Bottom.vue";
 import Content from "./Content.vue";
 import Header from "./Header.vue";
 
@@ -36,6 +28,8 @@ function fetchAlbumBio(params: RouteParams) {
 }
 
 onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
-  await album.fetchTracksAndArtists(to.params.hash.toString());
+  await album
+    .fetchTracksAndArtists(to.params.hash.toString())
+    .then(() => album.fetchBio(to.params.hash.toString()));
 });
 </script>

src/views/playlist/index.vue

@@ -11,9 +11,6 @@
         :playlistid="playlist.info.playlistid"
       />
     </template>
-    <template #bottom>
-      <FeaturedArtists :artists="playlist.artists" />
-    </template>
   </Page>
 </template>
 
@@ -22,7 +19,6 @@ import Page from "@/layouts/HeaderContentBottom.vue";
 
 import Header from "@/components/PlaylistView/Header.vue";
 import Content from "./Content.vue";
-import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
 
 import usePTrackStore from "@/stores/pages/playlist";
 import { onMounted, onUnmounted } from "vue";

yarn.lock

@@ -653,6 +653,11 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
   integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
+
 debug@^4.1.1, debug@^4.3.2:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
@@ -1263,6 +1268,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -2170,6 +2180,14 @@ vue-svg-loader@^0.16.0:
     loader-utils "^1.2.3"
     svg-to-vue "^0.7.0"
 
+vue-template-compiler@^2.0.0:
+  version "2.7.8"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.8.tgz#eadd54ed8fbff55b7deb07093a976c07f451a1dc"
+  integrity sha512-eQqdcUpJKJpBRPDdxCNsqUoT0edNvdt1jFjtVnVS/LPPmr0BU2jWzXlrf6BVMeODtdLewB3j8j3WjNiB+V+giw==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
 vue@^3.2.37:
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"