Migrate to vite and some more stuff

- server: add a `Track` class
- server: add a create_track_class function
- client: migrate from vue-cli to vite

src/components/FolderView/SongList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="folder">
-    <div class="table rounded" v-if="songs.length">
+    <div class="table rounded" v-if="props.songs.length">
       <table>
         <thead>
           <tr>
@@ -12,7 +12,7 @@
         </thead>
         <tbody>
           <SongItem
-            v-for="song in songs"
+            v-for="song in props.songs"
             :key="song"
             :song="song"
             @updateQueue="updateQueue"
@@ -21,69 +21,61 @@
         </tbody>
       </table>
     </div>
-    <div v-else-if="songs.length === 0 && search_query">
+    <div v-else-if="props.songs.length === 0 && search_query">
       <div class="no-results">
         <div class="icon"></div>
-        <div class="text">❗ Track not found!</div>
+        <div class="text">No tracks 🎸</div>
       </div>
     </div>
     <div v-else ref="songtitle"></div>
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "@vue/reactivity";
 import { onMounted } from "@vue/runtime-core";
-
+// import { defineProps } from 'vue';
 import SongItem from "../shared/SongItem.vue";
 import routeLoader from "@/composables/routeLoader.js";
 import perks from "@/composables/perks.js";
 import state from "@/composables/state.js";
 import { useRoute } from "vue-router";
 
-export default {
-  props: ["songs"],
-  components: {
-    SongItem,
-  },
-  setup() {
-    let route;
+const props = defineProps({
+  songs: {
+    type: Array,
+    required: true
+  }
+});
 
-    const current = ref(perks.current);
-    const search_query = ref(state.search_query);
 
-    onMounted(() => {
-      route = useRoute().name;
-    });
+let route;
 
-    function updateQueue(song) {
-      let type;
+const search_query = ref(state.search_query);
 
-      switch (route) {
-        // check which route the play request come from
-        case "FolderView":
-          type = "folder";
-          break;
-        case "AlbumView":
-          type = "album";
-          break;
-      }
+onMounted(() => {
+  route = useRoute().name;
+});
 
-      perks.updateQueue(song, type);
-    }
+function updateQueue(song) {
+  let type;
 
-    function loadAlbum(title, album_artist) {
-      routeLoader.toAlbum(title, album_artist);
-    }
+  switch (route) {
+    // check which route the play request come from
+    case "FolderView":
+      type = "folder";
+      break;
+    case "AlbumView":
+      type = "album";
+      break;
+  }
 
-    return {
-      updateQueue,
-      loadAlbum,
-      current,
-      search_query,
-    };
-  },
-};
+  perks.updateQueue(song, type);
+}
+
+function loadAlbum(title, album_artist) {
+  routeLoader.toAlbum(title, album_artist);
+}
 </script>
 
 <style lang="scss">

src/components/RightSideBar/NowPlaying.vue

@@ -21,7 +21,7 @@
       </div>
     </div>
     <div class="progress">
-      <div class="duration">{{ fmtMSS(current.length) }}</div>
+      <div class="duration">{{ current.length }}</div>
       <input
         id="progress"
         type="range"

src/components/RightSideBar/UpNext.vue

@@ -31,7 +31,7 @@
           :key="song"
           @click="playThis(song)"
           :class="{
-            currentInQueue: current._id.$oid == song._id.$oid,
+            currentInQueue: current.id == song.id,
           }"
         >
           <div
@@ -42,7 +42,7 @@
           >
             <div
               class="now-playing-track image"
-              v-if="current._id.$oid == song._id.$oid"
+              v-if="current.id == song.id"
               :class="{ active: is_playing, not_active: !is_playing }"
             ></div>
           </div>

src/components/shared/SongItem.vue

@@ -1,8 +1,8 @@
 <template>
   <tr
     class="songlist-item"
+    :class="{ current: current.id == song.id }"
   >
-    <!-- :class="{ current: current._id.$oid == song._id.$oid }" -->
     <td class="flex" @click="emitUpdate(song)">
       <div
         class="album-art rounded image"
@@ -12,7 +12,7 @@
       >
         <div
           class="now-playing-track image"
-          v-if="current._id.$oid == song._id.$oid"
+          v-if="current.id == song.id"
           :class="{ active: is_playing, not_active: !is_playing }"
         ></div>
       </div>
@@ -45,7 +45,7 @@
       </div>
     </td>
     <td class="song-duration">
-      {{ `${Math.trunc(song.length / 60)} min` }}
+      {{ song.length }}
     </td>
   </tr>
 </template>

src/composables/perks.js

@@ -38,7 +38,7 @@ const putCommas = (artists) => {
 
 function updateNext(song_) {
   const index = state.queue.value.findIndex(
-    (item) => item._id.$oid === song_._id.$oid
+    (item) => item.id === song_.id
   );
 
   if (index == queue.value.length - 1) {
@@ -53,7 +53,7 @@ function updateNext(song_) {
 
 function updatePrev(song) {
   const index = state.queue.value.findIndex(
-    (item) => item._id.$oid === song._id.$oid
+    (item) => item.id === song.id
   );
 
   if (index == 0) {
@@ -94,7 +94,7 @@ const updateQueue = async (song, type) => {
       break;
   }
   
-  if (state.queue.value[0]._id.$oid !==list[0]._id.$oid) {
+  if (state.queue.value[0].id !==list[0].id) {
     const new_queue =list;
     localStorage.setItem("queue", JSON.stringify(new_queue));
     state.queue.value = new_queue;

src/router/index.js

@@ -46,7 +46,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 });