+
-
-
-
\ No newline at end of file
+
diff --git a/frontend/src/assets/animations.css b/frontend/src/assets/animations.css
index 7f248aa..024af7d 100644
--- a/frontend/src/assets/animations.css
+++ b/frontend/src/assets/animations.css
@@ -1,19 +1,27 @@
-.v-enter-from, .v-leave-to
-{
-animation: fadeIn 0.5s;
-
+.v-enter-from,
+.v-leave-to {
+ animation: fadeIn 0.5s;
}
-.v-enter-to, .v-leave-from {
-animation: fadeOut 0.5s;
+.v-enter-to,
+.v-leave-from {
+ animation: fadeOut 0.5s;
}
@keyframes fadeIn {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
}
@keyframes fadeOut {
- 0% { opacity: 1; }
- 100% { opacity: 0; }
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
}
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
index acc3bf6..f2f702f 100644
--- a/frontend/src/assets/base.css
+++ b/frontend/src/assets/base.css
@@ -1,34 +1,34 @@
body {
- background-color: var(--background-color);
- margin:0;
- padding: 0;
+ background-color: var(--background-color);
+ margin: 0;
+ padding: 0;
}
-* .{
-min-height: 0px;
+* . {
+ min-height: 0px;
}
.backdrop--light {
- background-color: rgba(70, 57, 63, 1);
+ background-color: rgba(70, 57, 63, 1);
}
.backdrop--medium {
- background-color: rgba(56, 46, 50, 1);
+ background-color: rgba(56, 46, 50, 1);
}
.backdrop--medium--light {
- background-color: rgba(42, 34, 38, 1);
+ background-color: rgba(42, 34, 38, 1);
}
.backdrop--medium--dark {
- background-color: rgba(56, 46, 50, 1)
+ background-color: rgba(56, 46, 50, 1);
}
.backdrop--dark {
- background-color: rgba(28, 23, 25, 1)
+ background-color: rgba(28, 23, 25, 1);
}
.router-link-active {
- color: var(--action-color);
+ color: var(--action-color);
}
:root {
@@ -43,25 +43,25 @@ min-height: 0px;
}
.bg {
- background-color: var(--background-color)
+ background-color: var(--background-color);
}
.action {
- color: var(--action-color)
+ color: var(--action-color);
}
.info {
- color: var(--information-color)
+ color: var(--information-color);
}
.info:hover {
- color: var(--information-color)
+ color: var(--information-color);
}
searcheven {
- background-color: lighten(var(--background-color),10%);
+ background-color: lighten(var(--background-color), 10%);
}
searchodd {
- background-color: lighten(var(--background-color),15%);
+ background-color: lighten(var(--background-color), 15%);
}
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 5331c76..f6d7555 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,4 +1,4 @@
-@import './base.css';
+@import "./base.css";
a,
.green {
diff --git a/frontend/src/components/ActiveSearchList.vue b/frontend/src/components/ActiveSearchList.vue
index 151cc4e..abb2c32 100644
--- a/frontend/src/components/ActiveSearchList.vue
+++ b/frontend/src/components/ActiveSearchList.vue
@@ -1,10 +1,10 @@
-
+
-
diff --git a/frontend/src/components/CollectionItem.vue b/frontend/src/components/CollectionItem.vue
index ffa7965..cc6790a 100644
--- a/frontend/src/components/CollectionItem.vue
+++ b/frontend/src/components/CollectionItem.vue
@@ -1,98 +1,91 @@
-
-
+
-
Artists
-
@@ -41,15 +39,14 @@ function highlightText(text: string, searchterm: string) {
-
+
-
- ![]()
+
+
-
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index 243737d..ea0e2a2 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -1,26 +1,25 @@
-
+
diff --git a/frontend/src/components/NowPlaying.vue b/frontend/src/components/NowPlaying.vue index 4c7c519..8559f3b 100644 --- a/frontend/src/components/NowPlaying.vue +++ b/frontend/src/components/NowPlaying.vue @@ -1,30 +1,33 @@ | null = null
+let audioInstance: ReturnType | null = null;
function createAudio() {
- const { musicApi } = useApi()
+ const { musicApi } = useApi();
- const audioElement = document.createElement('audio')
- audioElement.setAttribute('id', 'global-audio')
- audioElement.setAttribute('controls', '')
- audioElement.classList.add('hidden')
- document.body.appendChild(audioElement)
+ const audioElement = document.createElement("audio");
+ audioElement.setAttribute("id", "global-audio");
+ audioElement.setAttribute("controls", "");
+ audioElement.classList.add("hidden");
+ document.body.appendChild(audioElement);
const state = {
isPlaying: ref(false),
- duration: ref('0:00'),
- currentTime: ref('0:00'),
+ duration: ref("0:00"),
+ currentTime: ref("0:00"),
percentDone: ref(0),
shuffle: ref(false),
repeat: ref(false),
activeSongs: ref([]),
currentSong: ref(null),
recentlyPlayed: ref(new Map()),
- }
+ };
function saveToLocalStorage(key: string, data: any) {
- localStorage.setItem(key, JSON.stringify(data))
+ localStorage.setItem(key, JSON.stringify(data));
}
function loadFromLocalStorage(key: string): T | null {
- const item = localStorage.getItem(key)
- return item ? JSON.parse(item) as T : null
+ const item = localStorage.getItem(key);
+ return item ? (JSON.parse(item) as T) : null;
}
function setSong(song: Song | null) {
- if (!song) return
- state.currentSong.value = song
+ if (!song) return;
+ state.currentSong.value = song;
const map = state.recentlyPlayed.value;
-
- saveToLocalStorage('lastPlayedSong', song)
+ saveToLocalStorage("lastPlayedSong", song);
if (map.has(song.hash)) {
map.delete(song.hash);
}
map.set(song.hash, song);
-
- audioElement.pause()
- audioElement.src = song.url
- audioElement.addEventListener(
- 'canplaythrough',
- () => audioElement.play().catch(console.error),
- { once: true }
- )
+
+ audioElement.pause();
+ audioElement.src = song.url;
+ audioElement.addEventListener("canplaythrough", () => audioElement.play().catch(console.error), { once: true });
}
function setCollection(song: Song[] | null) {
- if (!song) return
- state.activeSongs.value = song
- saveToLocalStorage('activeCollection', song)
+ if (!song) return;
+ state.activeSongs.value = song;
+ saveToLocalStorage("activeCollection", song);
}
function togglePlay() {
if (audioElement.paused) {
- audioElement.play().catch(console.error)
+ audioElement.play().catch(console.error);
} else {
- audioElement.pause()
+ audioElement.pause();
}
}
-function toggleNext() {
- if (!state.activeSongs.value || !state.currentSong.value) return;
+ function toggleNext() {
+ if (!state.activeSongs.value || !state.currentSong.value) return;
- const songs = state.activeSongs.value;
+ const songs = state.activeSongs.value;
- if(state.shuffle.value){
- setSong(songs[Math.floor(Math.random() * songs.length)]);
+ if (state.shuffle.value) {
+ setSong(songs[Math.floor(Math.random() * songs.length)]);
+ }
+
+ const currentHash = state.currentSong.value.hash;
+ const currentIndex = songs.findIndex((song) => song.hash === currentHash);
+
+ if (currentIndex === -1) return;
+
+ const nextIndex = (currentIndex + 1) % songs.length;
+ setSong(songs[nextIndex]);
}
- const currentHash = state.currentSong.value.hash;
- const currentIndex = songs.findIndex(song => song.hash === currentHash);
+ function togglePrevious() {
+ if (!state.activeSongs.value || !state.currentSong.value) return;
- if (currentIndex === -1) return;
+ const songs = state.activeSongs.value;
+ const currentHash = state.currentSong.value.hash;
+ const currentIndex = songs.findIndex((song) => song.hash === currentHash);
- const nextIndex = (currentIndex + 1) % songs.length;
- setSong(songs[nextIndex]);
-}
+ if (currentIndex === -1) return;
-function togglePrevious() {
- if (!state.activeSongs.value || !state.currentSong.value) return;
-
- const songs = state.activeSongs.value;
- const currentHash = state.currentSong.value.hash;
- const currentIndex = songs.findIndex(song => song.hash === currentHash);
-
- if (currentIndex === -1) return;
-
- const prevIndex = (currentIndex - 1 + songs.length) % songs.length;
- setSong(songs[prevIndex]);
-}
+ const prevIndex = (currentIndex - 1 + songs.length) % songs.length;
+ setSong(songs[prevIndex]);
+ }
function update() {
- const { currentTime: ct, duration: dur } = audioElement
- state.isPlaying.value = !audioElement.paused
- state.currentTime.value = formatTime(ct)
- state.duration.value = formatTime(dur)
- state.percentDone.value = isNaN(dur) ? 0 : (ct / dur) * 100
+ const { currentTime: ct, duration: dur } = audioElement;
+ state.isPlaying.value = !audioElement.paused;
+ state.currentTime.value = formatTime(ct);
+ state.duration.value = formatTime(dur);
+ state.percentDone.value = isNaN(dur) ? 0 : (ct / dur) * 100;
if (audioElement.ended) {
if (state.repeat.value) {
- audioElement.currentTime = 0
- audioElement.play()
- return
+ audioElement.currentTime = 0;
+ audioElement.play();
+ return;
}
toggleNext();
}
-
-
}
function formatTime(seconds: number): string {
- const min = Math.floor(seconds / 60)
- const sec = Math.floor(seconds % 60).toString().padStart(2, '0')
- return `${min}:${sec}`
+ const min = Math.floor(seconds / 60);
+ const sec = Math.floor(seconds % 60)
+ .toString()
+ .padStart(2, "0");
+ return `${min}:${sec}`;
}
function updateTime(value: number) {
- if (value) audioElement.currentTime = (Number(value) / 100) * audioElement.duration
+ if (value) audioElement.currentTime = (Number(value) / 100) * audioElement.duration;
}
async function loadInitialSong() {
try {
- const api = musicApi()
- const res = await api.musicBackendRecent()
+ const api = musicApi();
+ const res = await api.musicBackendRecent();
let songs = mapApiToSongs(res.data.songs);
if (res.data?.songs?.length) {
- setSong(songs[0])
+ setSong(songs[0]);
}
} catch (err) {
- console.error('Failed to load song:', err)
+ console.error("Failed to load song:", err);
}
}
function init() {
- setSong(loadFromLocalStorage('lastPlayedSong'))
- setCollection(loadFromLocalStorage('activeCollection'))
+ setSong(loadFromLocalStorage("lastPlayedSong"));
+ setCollection(loadFromLocalStorage("activeCollection"));
if (!state.currentSong.value) {
- loadInitialSong()
+ loadInitialSong();
}
- audioElement.addEventListener('timeupdate', update)
+ audioElement.addEventListener("timeupdate", update);
}
- onMounted(init)
+ onMounted(init);
return {
...state,
@@ -167,12 +162,12 @@ function togglePrevious() {
setSong,
setCollection,
init,
- }
+ };
}
export function useAudio() {
if (!audioInstance) {
- audioInstance = createAudio()
+ audioInstance = createAudio();
}
- return audioInstance
+ return audioInstance;
}
diff --git a/frontend/src/composables/useColors.ts b/frontend/src/composables/useColors.ts
index 36c2645..a0528ee 100644
--- a/frontend/src/composables/useColors.ts
+++ b/frontend/src/composables/useColors.ts
@@ -1,23 +1,23 @@
-import { ref } from 'vue';
+import { ref } from "vue";
export function useThemeColors() {
- const bgColor = ref(localStorage.getItem('bgColor') || '#1c1719');
- const actionColor = ref(localStorage.getItem('actionColor') || '#eab308');
- const infoColor = ref(localStorage.getItem('infoColor') || '#ec4899');
- const borderColor = ref(localStorage.getItem('borderColor') || '#ec4899');
+ const bgColor = ref(localStorage.getItem("bgColor") || "#1c1719");
+ const actionColor = ref(localStorage.getItem("actionColor") || "#eab308");
+ const infoColor = ref(localStorage.getItem("infoColor") || "#ec4899");
+ const borderColor = ref(localStorage.getItem("borderColor") || "#ec4899");
function applyColors(bg: string, main: string, info: string, border: string) {
- document.documentElement.style.setProperty('--background-color', bg);
- document.documentElement.style.setProperty('--action-color', main);
- document.documentElement.style.setProperty('--information-color', info);
- document.documentElement.style.setProperty('--border-color', border);
+ document.documentElement.style.setProperty("--background-color", bg);
+ document.documentElement.style.setProperty("--action-color", main);
+ document.documentElement.style.setProperty("--information-color", info);
+ document.documentElement.style.setProperty("--border-color", border);
}
function save(
bg: string | null = null,
main: string | null = null,
info: string | null = null,
- border: string | null = null
+ border: string | null = null,
) {
bgColor.value = bg ?? bgColor.value;
actionColor.value = main ?? actionColor.value;
@@ -26,13 +26,12 @@ export function useThemeColors() {
applyColors(bgColor.value, actionColor.value, infoColor.value, borderColor.value);
- localStorage.setItem('bgColor', bgColor.value);
- localStorage.setItem('actionColor', actionColor.value);
- localStorage.setItem('infoColor', infoColor.value);
- localStorage.setItem('borderColor', borderColor.value);
+ localStorage.setItem("bgColor", bgColor.value);
+ localStorage.setItem("actionColor", actionColor.value);
+ localStorage.setItem("infoColor", infoColor.value);
+ localStorage.setItem("borderColor", borderColor.value);
}
- // Initialize colors on composable use
applyColors(bgColor.value, actionColor.value, infoColor.value, borderColor.value);
return {
diff --git a/frontend/src/composables/useUser.ts b/frontend/src/composables/useUser.ts
index cdca8e4..3906cba 100644
--- a/frontend/src/composables/useUser.ts
+++ b/frontend/src/composables/useUser.ts
@@ -1,19 +1,19 @@
-import { ref } from 'vue';
-import type { Me } from '@/script/types';
+import { ref } from "vue";
+import type { Me } from "@/script/types";
let userInstance: ReturnType | null = null;
function createUser() {
const user = ref(null);
- const baseUrl = ref(import.meta.env.VITE_BACKEND_URL || 'http://localhost:8080');
- const proxyUrl = ref(import.meta.env.VITE_PROXY_URL || 'https://proxy.illegalesachen.download');
+ const cloudflareUrl = ref(import.meta.env.VITE_BACKEND_URL || "http://localhost:8080");
+ const proxyUrl = ref(import.meta.env.VITE_PROXY_URL || "https://proxy.illegalesachen.download");
function saveUser(u: Me | null) {
- localStorage.setItem('activeUser', JSON.stringify(u));
+ localStorage.setItem("activeUser", JSON.stringify(u));
}
function loadUser(): Me | null {
- const u = localStorage.getItem('activeUser');
+ const u = localStorage.getItem("activeUser");
return u ? JSON.parse(u) : null;
}
@@ -25,12 +25,12 @@ function createUser() {
async function fetchMe(): Promise {
try {
const response = await fetch(`${proxyUrl.value}/me`, {
- method: 'GET',
- credentials: 'include',
+ method: "GET",
+ credentials: "include",
});
if (response.redirected) {
- window.open(response.url, '_blank');
+ window.open(response.url, "_blank");
return { redirected: true };
}
@@ -42,7 +42,7 @@ function createUser() {
const data = await response.json();
return data;
} catch (error) {
- console.error('Fetch error:', error);
+ console.error("Fetch error:", error);
return {};
}
}
@@ -51,7 +51,7 @@ function createUser() {
return {
user,
- baseUrl,
+ cloudflareUrl,
proxyUrl,
setUser,
fetchMe,
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 0b19501..321a644 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,12 +1,12 @@
-import './assets/main.css'
+import "./assets/main.css";
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
-import router from './router'
+import App from "./App.vue";
+import router from "./router";
-const app = createApp(App)
+const app = createApp(App);
-app.use(router)
+app.use(router);
-app.mount('#app')
+app.mount("#app");
diff --git a/frontend/src/registerServiceWorker.js b/frontend/src/registerServiceWorker.js
index 76cede0..34e6f37 100644
--- a/frontend/src/registerServiceWorker.js
+++ b/frontend/src/registerServiceWorker.js
@@ -1,32 +1,31 @@
/* eslint-disable no-console */
-import { register } from 'register-service-worker'
+import { register } from "register-service-worker";
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === "production") {
register(`${process.env.BASE_URL}service-worker.js`, {
- ready () {
+ ready() {
console.log(
- 'App is being served from cache by a service worker.\n' +
- 'For more details, visit https://goo.gl/AFskqB'
- )
+ "App is being served from cache by a service worker.\n" + "For more details, visit https://goo.gl/AFskqB",
+ );
},
- registered () {
- console.log('Service worker has been registered.')
+ registered() {
+ console.log("Service worker has been registered.");
},
- cached () {
- console.log('Content has been cached for offline use.')
+ cached() {
+ console.log("Content has been cached for offline use.");
},
- updatefound () {
- console.log('New content is downloading.')
+ updatefound() {
+ console.log("New content is downloading.");
},
- updated () {
- console.log('New content is available; please refresh.')
+ updated() {
+ console.log("New content is available; please refresh.");
},
- offline () {
- console.log('No internet connection found. App is running in offline mode.')
+ offline() {
+ console.log("No internet connection found. App is running in offline mode.");
},
- error (error) {
- console.error('Error during service worker registration:', error)
- }
- })
+ error(error) {
+ console.error("Error during service worker registration:", error);
+ },
+ });
}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d08f8db..719bd2c 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,69 +1,69 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import MenuView from '../views/MenuView.vue'
-import RecentView from '../views/RecentView.vue'
-import FavouritView from '../views/FavouritView.vue'
-import CollectionView from '../views/CollectionView.vue'
-import NowPlayingView from '../views/NowPlayingView.vue'
-import MeView from '../views/MeView.vue'
-import SearchView from '../views/SearchView.vue'
-import CollectionItem from '../components/CollectionItem.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import MenuView from "../views/MenuView.vue";
+import RecentView from "../views/RecentView.vue";
+import FavouritView from "../views/FavouritView.vue";
+import CollectionView from "../views/CollectionView.vue";
+import NowPlayingView from "../views/NowPlayingView.vue";
+import MeView from "../views/MeView.vue";
+import SearchView from "../views/SearchView.vue";
+import CollectionItem from "../components/CollectionItem.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
- path: '/',
- name: '',
+ path: "/",
+ name: "",
component: MeView,
},
{
- path: '/menu',
- name: 'menu',
+ path: "/menu",
+ name: "menu",
component: MenuView,
children: [
{
- path: '',
- name: 'default',
- component: RecentView
+ path: "",
+ name: "default",
+ component: RecentView,
},
{
- path: 'recent',
- name: 'recent',
- component: RecentView
+ path: "recent",
+ name: "recent",
+ component: RecentView,
},
{
- path: 'favourites',
- name: 'favourites',
- component: FavouritView
+ path: "favourites",
+ name: "favourites",
+ component: FavouritView,
},
{
- path: 'collections',
- name: 'collections',
- component: CollectionView
- }
- ]
+ path: "collections",
+ name: "collections",
+ component: CollectionView,
+ },
+ ],
},
{
- path: '/nowplaying',
- name: 'nowplaying',
- component: NowPlayingView
+ path: "/nowplaying",
+ name: "nowplaying",
+ component: NowPlayingView,
},
{
- path: '/me',
- name: 'me',
- component: MeView
+ path: "/me",
+ name: "me",
+ component: MeView,
},
{
- path: '/search',
- name: 'search',
- component: SearchView
+ path: "/search",
+ name: "search",
+ component: SearchView,
},
{
- path: '/collection/:id',
- name: 'collection',
- component: CollectionItem
- }
- ]
-})
+ path: "/collection/:id",
+ name: "collection",
+ component: CollectionItem,
+ },
+ ],
+});
-export default router
+export default router;
diff --git a/frontend/src/script/types.ts b/frontend/src/script/types.ts
index 334dc42..2c50b89 100644
--- a/frontend/src/script/types.ts
+++ b/frontend/src/script/types.ts
@@ -1,16 +1,16 @@
-import type { Apiv1Song, v1CollectionPreview, v1Collection } from '@/generated';
+import type { Apiv1Song, v1CollectionPreview, v1Collection } from "@/generated";
export type Song = {
- hash: string;
- name: string;
- artist: string;
- length: number;
- url: string;
- previewimage: string;
- mapper: string;
+ hash: string;
+ name: string;
+ artist: string;
+ length: number;
+ url: string;
+ previewimage: string;
+ mapper: string;
};
-const basePath = import.meta.env.BACKEND_URL || 'http://localhost:8080';
+const basePath = import.meta.env.BACKEND_URL || "http://localhost:8080";
export function mapToSong(apiSong: Apiv1Song): Song {
const image = apiSong.image;
@@ -21,68 +21,57 @@ export function mapToSong(apiSong: Apiv1Song): Song {
name: apiSong.title,
artist: apiSong.artist,
length: Number(apiSong.totalTime),
- url: `${basePath}/api/v1/audio/${btoa(apiSong.folder + "/" + apiSong.audio).replace(/=+$/, '')}`,
- previewimage: imageIsMissing
- ? "/404.gif"
- : `${basePath}/api/v1/image/${btoa(image).replace(/=+$/, '')}`,
+ url: `${basePath}/api/v1/audio/${btoa(apiSong.folder + "/" + apiSong.audio).replace(/=+$/, "")}`,
+ previewimage: imageIsMissing ? "/404.gif" : `${basePath}/api/v1/image/${btoa(image).replace(/=+$/, "")}`,
mapper: apiSong.creator,
};
}
export type CollectionPreview = {
- index: number;
- name: string;
- length: number;
- previewimage: string;
+ index: number;
+ name: string;
+ length: number;
+ previewimage: string;
};
export type Collection = {
name: string;
items: number;
songs: Song[];
-}
-
-export function mapApiToCollection(coll : v1Collection): Collection {
+};
+export function mapApiToCollection(coll: v1Collection): Collection {
return {
name: coll.name,
items: coll.items,
- songs: mapApiToSongs(coll.songs)
- }
+ songs: mapApiToSongs(coll.songs),
+ };
}
-
-export function mapToCollectionPreview(
- apiCollection: v1CollectionPreview,
- index: number
-): CollectionPreview {
- const image = apiCollection.image;
- const imageIsMissing = !image || image === "404.png";
+export function mapToCollectionPreview(apiCollection: v1CollectionPreview, index: number): CollectionPreview {
+ const image = apiCollection.image;
+ const imageIsMissing = !image || image === "404.png";
return {
- index,
+ index: index,
name: apiCollection.name,
length: apiCollection.items,
- previewimage: imageIsMissing
- ? "/404.gif"
- : `${basePath}/api/v1/image/${btoa(image).replace(/=+$/, '')}`,
+ previewimage: imageIsMissing ? "/404.gif" : `${basePath}/api/v1/image/${btoa(image).replace(/=+$/, "")}`,
};
}
export type Me = {
- id: number;
- name: string;
- avatar_url: string;
- endpoint: string;
- share: boolean;
+ id: number;
+ name: string;
+ avatar_url: string;
+ endpoint: string;
+ share: boolean;
};
export function mapApiToSongs(apiSongs: Apiv1Song[]): Song[] {
return apiSongs.map(mapToSong);
}
-export function mapApiToCollectionPreview(
- apiCollections: v1CollectionPreview[]
-): CollectionPreview[] {
- return apiCollections.map((c, i) => mapToCollectionPreview(c, i));
-}
\ No newline at end of file
+export function mapApiToCollectionPreview(apiCollections: v1CollectionPreview[], offset: number): CollectionPreview[] {
+ return apiCollections.map((c, i) => mapToCollectionPreview(c, i + offset));
+}
diff --git a/frontend/src/script/utils.ts b/frontend/src/script/utils.ts
index 2257438..10a8b40 100644
--- a/frontend/src/script/utils.ts
+++ b/frontend/src/script/utils.ts
@@ -1,15 +1,15 @@
export const isMobile = () => {
- return window.innerWidth < 640;
+ return window.innerWidth < 640;
};
export const isTablet = () => {
- return window.innerWidth >= 640 && window.innerWidth < 1024;
+ return window.innerWidth >= 640 && window.innerWidth < 1024;
};
export const isPc = () => {
- return window.innerWidth >= 1024 && window.innerWidth <= 1980;
+ return window.innerWidth >= 1024 && window.innerWidth <= 1980;
};
export const matchesBreakpoint = (min, max = Infinity) => {
- return window.innerWidth >= min && window.innerWidth <= max;
+ return window.innerWidth >= min && window.innerWidth <= max;
};
diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionView.vue
index 0a6c34d..ad004d6 100644
--- a/frontend/src/views/CollectionView.vue
+++ b/frontend/src/views/CollectionView.vue
@@ -1,13 +1,11 @@
-
+
\ No newline at end of file
+const songs = computed(() => Array.from(audioStore.recentlyPlayed.value?.values()).reverse() || []);
+
diff --git a/frontend/src/views/MeView.vue b/frontend/src/views/MeView.vue
index a441851..3801c59 100644
--- a/frontend/src/views/MeView.vue
+++ b/frontend/src/views/MeView.vue
@@ -1,185 +1,233 @@
-
+
-
- -
+ ![]()
{{ props.collection.name }}
-{{ props.collection.length }} Songs
+{{ props.collection.length }} Songs
+
diff --git a/frontend/src/components/NowPlaying.vue b/frontend/src/components/NowPlaying.vue index 4c7c519..8559f3b 100644 --- a/frontend/src/components/NowPlaying.vue +++ b/frontend/src/components/NowPlaying.vue @@ -1,30 +1,33 @@
-
+
diff --git a/frontend/src/components/SongItem.vue b/frontend/src/components/SongItem.vue
index 646a686..e01cce0 100644
--- a/frontend/src/components/SongItem.vue
+++ b/frontend/src/components/SongItem.vue
@@ -1,43 +1,44 @@
-
-
- +
- ![Background Image]()
+ ![Background Image]()
- ![]()
+ ![]()
+ loading="lazy"
+ />
-
diff --git a/frontend/src/composables/useApi.ts b/frontend/src/composables/useApi.ts
index 89a0194..560bcda 100644
--- a/frontend/src/composables/useApi.ts
+++ b/frontend/src/composables/useApi.ts
@@ -1,19 +1,21 @@
-import { MusicBackendApi, Configuration, } from '@/generated';
-import type { ConfigurationParameters } from '@/generated';
-import { ref } from 'vue';
+import { MusicBackendApi, Configuration } from "@/generated";
+import type { ConfigurationParameters } from "@/generated";
+import { useUser } from "./useUser";
+import { computed } from "vue";
export function useApi() {
- const basePath = ref(import.meta.env.BACKEND_URL || 'http://localhost:8080');
- const musicApi = (): MusicBackendApi => {
+ const userStore = useUser();
+
+ const musicApi = computed(() => {
const configParams: ConfigurationParameters = {
- basePath: basePath.value,
+ basePath: userStore.cloudflareUrl.value,
};
const configuration = new Configuration(configParams);
return new MusicBackendApi(configuration);
- };
+ });
- return {
- musicApi,
- };
+ return {
+ musicApi,
+ };
}
diff --git a/frontend/src/composables/useAudio.ts b/frontend/src/composables/useAudio.ts
index 7cbd4d1..9fb44e1 100644
--- a/frontend/src/composables/useAudio.ts
+++ b/frontend/src/composables/useAudio.ts
@@ -1,160 +1,155 @@
-import { ref, onMounted } from 'vue'
-import { mapApiToSongs, type Song } from '@/script/types'
-import { useApi } from './useApi'
+import { ref, onMounted } from "vue";
+import { mapApiToSongs, type Song } from "@/script/types";
+import { useApi } from "./useApi";
-let audioInstance: ReturnType
-
-
-
+
- {{ props.song?.artist ? props.song.artist : 'Unknown Artist' }}
+
+ {{ props.song?.artist ? props.song.artist : "Unknown Artist" }}
-
- {{ Math.floor(props.song?.length / 60000 ?? 0) }}:{{ Math.floor((props.song?.length ?? 0 /
- 1000)
- % 60).toString().padStart(2, '0') }}
+
+ {{ Math.floor(props.song.length / 60000 || 0) }}:{{
+ Math.floor((props.song.length ?? 0 / 1000) % 60)
+ .toString()
+ .padStart(2, "0")
+ }}
-
+ {{ Math.floor(props.song.length / 60000 || 0) }}:{{
+ Math.floor((props.song.length ?? 0 / 1000) % 60)
+ .toString()
+ .padStart(2, "0")
+ }}
-
-
History
-No songs found
+History
+No songs found
-
- -
- ![]()
+
+ +
+ +
+ ![]()
- {{ userStore.user.value.name }}
-{{ userStore.user.value.endpoint == "" ? 'Not Connected' : 'Connected' }}
-Sharing:
- - ++ {{ userStore.user.value.endpoint == "" ? "Not Connected" : "Connected" }} +
++ Sharing: + +
+
+
-
Background:
- +Main:
- +Secondary:
- +Border:
- +
+
Current
-
StaryNight