init

frontend/src/views/CollectionView.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Song, CollectionPreview } from '../script/types'
+import { ref, onMounted } from 'vue'
+import { useUserStore } from '@/stores/userStore';
+import CollectionListItem from '../components/CollectionListItem.vue'
+
+const userStore = useUserStore();
+
+const collections = ref<CollectionPreview[]>([]);
+
+onMounted(async () => {
+  const data = await userStore.fetchCollections();
+  data.forEach(song => {
+    song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
+  })
+  collections.value = data;
+
+});
+</script>
+
+<template>
+  <main class="flex-1 text-center flex flex-col h-full overflow-scroll">
+    <div class="flex flex-col overflow-scroll">
+      <CollectionListItem 
+        v-for="(collection, index) in collections"
+        :key="index"
+        :collection="collection"
+      />
+    </div>
+  </main>
+</template>
+

frontend/src/views/FavouritView.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import SongItem from '../components/SongItem.vue'
+</script>
+
+<template>
+  <main class="flex-1 flex-col overflow-scroll">
+
+  </main>
+</template>

frontend/src/views/MeView.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useUserStore } from '@/stores/userStore';
+
+const userStore = useUserStore();
+
+function update() {
+  var input = document.getElementById("url-input") as HTMLAudioElement;
+  console.log(input.value)
+  userStore.baseUrl = input.value;
+
+}
+</script>
+
+<template>
+  <header>
+    <div class="wrapper">
+      <nav class="flex justify-start my-2 mx-1 space-x-1">
+        <RouterLink class="p-1 rounded-full backdrop--light shadow-xl" to="/"><i class="fa-solid fa-arrow-left"></i>
+        </RouterLink>
+      </nav>
+      <hr>
+    </div>
+  </header>
+
+  <main class="flex-1">
+    <h1> Meeeeee </h1>
+    <input @change="update" type="text" id="url-input" :value="userStore.baseUrl" />
+  </main>
+</template>

frontend/src/views/MenuView.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useHeaderStore } from '@/stores/headerStore';
+
+const route = useRoute();
+
+function isActive(path: string) {
+  return route.path === path ? 'bg-blue-500 text-white' : '';
+};
+
+const headerStore = useHeaderStore();
+</script>
+
+<template>
+  <main class="flex-1 flex flex-col h-full overflow-scroll">
+    <header v-show="true">
+      <div class="wrapper">
+        <nav class="flex justify-start my-2 mx-1 space-x-1 overflow-x-scroll flex-nowrap text-nowrap">
+          <RouterLink class="p-1 rounded-full backdrop--light shadow-xl" to="/"><i class="fa-solid fa-arrow-left"></i>
+          </RouterLink>
+          <RouterLink :class="`p-1 rounded-full backdrop--light shadow-xl ${isActive('/')}`" to="/menu/recent">Recently
+            added</RouterLink>
+          <RouterLink :class="`p-1 rounded-full backdrop--light shadow-xl ${isActive('/')}`" to="/menu/favourites">
+            Favorites</RouterLink>
+          <RouterLink :class="`p-1 rounded-full backdrop--light shadow-xl ${isActive('/')}`" to="/menu/collections">
+            Collections</RouterLink>
+        </nav>
+        <hr>
+      </div>
+    </header>
+
+    <router-view />
+  </main>
+</template>

frontend/src/views/NowPlayingView.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAudioStore } from '@/stores/audioStore';
+
+const audioStore = useAudioStore();
+</script>
+
+<template>
+  <header>
+    <div class="wrapper">
+      <div class="relative">
+        <nav class="flex flex-1 justify-start my-2 mx-1 space-x-1">
+          <RouterLink class="p-1 rounded-full backdrop--light shadow-xl" to="/"><i class="fa-solid fa-arrow-left"></i>
+          </RouterLink>
+          <h1 class="absolute left-0 right-0 text-center"> Now Playing </h1>
+        </nav>
+      </div>
+      <hr>
+    </div>
+  </header>
+
+  <main class="flex-1 flex justify-center text-center text-yellow-600">
+    <div class="flex flex-col justify-around">
+      <div class="relative">
+        <i class="relative p-36 fa-solid fa-play">
+         
+          <img class="h-72 absolute top-4 left-0 bottom-0 right-0 bg-center bg-cover rounded-lg" :src="encodeURI(audioStore.bgimg)" :key="audioStore.bgimg" />
+        </i>
+      </div>
+
+      <div>
+        <div>
+          <div class="flex w-screen justify-around">
+            <i class="fa-solid fa-backward-step text-5xl self-center" @click="audioStore.togglePrev"></i>
+            <i :class="[audioStore.isPlaying ? 'fa-circle-play' : 'fa-circle-pause']" class="fa-regular text-7xl "
+              @click="audioStore.togglePlay"></i>
+            <i class="fa-solid fa-forward-step text-5xl self-center" @click="audioStore.toggleNext"></i>
+          </div>
+        </div>
+        <div class="flex flex-1 justify-around">
+          <i @click="audioStore.toggleShuffle" :class="[audioStore.shuffle ? 'text-pink-500' : '']"
+            class="fa-solid fa-shuffle"></i>
+
+          <div class="m-4 text-pink-500 max-w-1/2 overflow-idden">
+            <p>{{ audioStore.title }}</p>
+            <p>{{ audioStore.artist }}</p>
+          </div>
+          <div class="flex flex-col justify-between mb-4">
+          <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
+            class="fa-solid fa-repeat"></i>
+            <i @click="this.$router.go(-1);" class="fa-solid fa-arrow-down"></i>
+        </div>
+      </div>
+        <div class="flex">
+          <input
+            class="appearance-none mx-4 flex-1 bg-yellow-200 bg-opacity-20 accent-yellow-600 rounded-lg outline-none slider"
+            type="range" id="audio-slider" @change="audioStore.updateTime" max="100" :value="audioStore.percentDone">
+        </div>
+        <div class="flex justify-between mx-4">
+          <span id="current-time" class="time">{{ audioStore.currentTime }}</span>
+          <span id="duration" class="time ">{{ audioStore.duration }}</span>
+        </div>
+      </div>
+    </div>
+
+  </main>
+</template>

frontend/src/views/RecentView.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import SongItem from '../components/SongItem.vue'
+</script>
+
+<template>
+
+  <main class="flex-1 flex-col overflow-scroll">
+
+  </main>
+</template>

frontend/src/views/SearchView.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <header>
+    <div class="wrapper">
+      <nav class="flex justify-start my-2 mx-1 space-x-1">
+        <RouterLink class="p-1 rounded-full backdrop--light shadow-xl" to="/"><i class="fa-solid fa-arrow-left"></i>
+        </RouterLink>
+        <h1 class="absolute left-0 right-0 text-center"> Search </h1>
+      </nav>
+      <hr>
+    </div>
+  </header>
+  <main class="flex-1 flex-col">
+    <h1> Search...</h1>
+    <input class="flex-1 border border-pink-500 accent-pink-800 bg-yellow-300 bg-opacity-20 rounded-lg m-2 p-2" />
+  </main>
+</template>