Merge branch 'main' of https://github.com/Vleerapp/Vleer

vleerapp · Apr 18, 2024 · b2e253a · b2e253a
2 parents 58d674f + bd23726
commit b2e253a
Show file tree

Hide file tree

Showing 3 changed files with 348 additions and 327 deletions.
diff --git a/assets/styles/pages/index.scss b/assets/styles/pages/index.scss
@@ -2,6 +2,7 @@
 
 .element {
   padding: 0 !important;
+  overflow: hidden;
 }
 
 .index {
@@ -10,7 +11,8 @@
   font-size: 14px;
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
+  overflow-y: auto;
 }
 
 .ascii {
@@ -27,8 +29,8 @@
 
 .recently-played {
   .cards {
+    width: 100%;
     padding-bottom: 10px;
-    overflow-y: auto;
     display: flex;
     flex-direction: row;
     gap: 16px;
@@ -38,9 +40,13 @@
       flex-direction: column;
       gap: 8px;
       cursor: pointer;
+      width: 100%;
 
       .info {
+        width: 100%;
+
         p {
+          width: 140px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -53,9 +59,8 @@
       }
 
       .cover {
-        flex: 1;
-        max-width: 240px;
-        min-width: 150px;
+        width: 100%;
+        aspect-ratio: 1 / 1;
       }
     }
   }

diff --git a/pages/index.vue b/pages/index.vue
@@ -17,12 +17,12 @@
 
       <div class="recently-played">
         <div class="title">Recently played</div>
-        <div class="cards">
+        <div class="cards" ref="cards">
           <div v-for="song in sortedRecentlyPlayed" :key="song.id" @click="play(song.id)" class="song">
             <img :src="song.coverURL" :alt="song.title" class="cover" />
             <div class="info">
-              <p class="title">{{ truncate(song.title) }}</p>
-              <p class="artist">{{ truncate(song.artist) }}</p>
+              <p class="title" :title="song.title">{{ song.title }}</p>
+              <p class="artist" :title="song.artist">{{ song.artist }}</p>
             </div>
           </div>
         </div>
@@ -31,13 +31,37 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { type Song } from "~/types/types";
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
+import { useNuxtApp } from '#imports';
 
 const { $music } = useNuxtApp();
 
 const songs = ref<Song[]>([]);
+const cards = ref(null);
+const maxCards = ref(5);
+const cardsWidth = ref(0);
+const cardMinWidth = 140; 
+const cardMaxWidth = 180; 
+const cardGap = 16;
+
+const updateWidth = () => {
+  cardsWidth.value = cards.value?.clientWidth || 0;
+  updateMaxCards();
+};
+
+const updateMaxCards = () => {
+  const maxPossible = Math.floor(cardsWidth.value / (cardMinWidth + cardGap));
+  const minPossible = Math.floor(cardsWidth.value / (cardMaxWidth + cardGap));
+  maxCards.value = maxPossible;
+};
+
+watch(cards, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    updateWidth();
+  }
+});
 
 onMounted(async () => {
   const loadedSongs = await $music.getSongs();
@@ -48,13 +72,19 @@ onMounted(async () => {
     })
   );
   songs.value = songArray;
+  updateWidth();
+  window.addEventListener('resize', updateWidth);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWidth);
 });
 
 const sortedRecentlyPlayed = computed(() => {
   return [...songs.value]
     .filter(song => song.lastPlayed)
     .sort((a, b) => new Date(b.lastPlayed).getTime() - new Date(a.lastPlayed).getTime())
-    .slice(0, 7);
+    .slice(0, maxCards.value);
 });
 
 async function play(id: string) {
@@ -67,6 +97,7 @@ function truncate(text: string, length: number = 24) {
 }
 </script>
 
+
 <style scoped lang="scss">
 @import "~/assets/styles/pages/index.scss";
 </style>