+
+
+
+{/if}
+
+
diff --git a/src/lib/components/MobileNowPlaying.svelte b/src/lib/components/MobileNowPlaying.svelte
new file mode 100644
index 0000000..b83b93a
--- /dev/null
+++ b/src/lib/components/MobileNowPlaying.svelte
@@ -0,0 +1,143 @@
+
+
+{#if queueOpen}
+
+ {#each extraRoutes as route}
+
+ {/each}
+ {#if !$isLoggedIn}
+
+ {/if}
+
+
+
+
+
diff --git a/src/lib/components/Queue.svelte b/src/lib/components/Queue.svelte
new file mode 100644
index 0000000..40bb4d0
--- /dev/null
+++ b/src/lib/components/Queue.svelte
@@ -0,0 +1,190 @@
+
+
+
+ 
+
+
+
+ {$activeSong.title || 'Song Name'}
++ {$activeSong.artist || 'Artist Name'} +
+
+
+ e.stopPropagation()}>
+
+
+ e.stopPropagation()}>
+
+
+
+
+
+
diff --git a/src/lib/components/SideBar.svelte b/src/lib/components/SideBar.svelte
index 51629eb..ceb08bf 100644
--- a/src/lib/components/SideBar.svelte
+++ b/src/lib/components/SideBar.svelte
@@ -3,32 +3,32 @@
import { goto } from '$app/navigation';
import { page } from '$app/state';
import { createLibrary } from '$lib/library';
- import { UserInfo, SavedUser } from '$lib/store';
+ import { SavedUser, isLoggedIn } from '$lib/store';
const isActive = (path: string) => page.url.pathname === path;
-
+
+
+
+
+
+
+
+
+
+
+
+ Queue
++ {itemsCache.length} + {itemsCache.length === 1 ? 'track' : 'tracks'} +
+
+
+
+
+ -
+ {#each itemsCache as item, index (item.id)}
+
-
+
removeQueueItem(index)} + draggable={canDrag} + playbackContext={itemsCache} + playbackSource={$queueState.source} + onDragStart={(e) => { + if (!canDrag) return; + dragIndex = index; + dropIndex = index + 1; + e.dataTransfer?.setData('text/plain', String(index)); + e.dataTransfer?.setDragImage(e.currentTarget as Element, 16, 16); + }} + onDragOver={(e) => { + if (!canDrag) return; + e.preventDefault(); + e.dataTransfer && (e.dataTransfer.dropEffect = 'move'); + dropIndex = index + 1; + }} + onDrop={(e) => { + if (!canDrag) return; + e.preventDefault(); + const fromIndex = dragIndex ?? Number(e.dataTransfer?.getData('text/plain')); + const targetIndex = index; + dragIndex = null; + dropIndex = null; + if (Number.isFinite(fromIndex)) { + const adjustedTarget = fromIndex < targetIndex ? targetIndex - 1 : targetIndex; + moveQueueItem(fromIndex, Math.max(0, adjustedTarget)); + } + }} + onDragEnd={() => { + dragIndex = null; + dropIndex = null; + }} + /> +
+ {/each}
+
+
-
+ d="M12 12q-1.65 0-2.825-1.175T8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12m-8 8v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20z"
+ />
+
+ {/if}
+
diff --git a/src/lib/components/Track.svelte b/src/lib/components/Track.svelte
index c6d2bfa..0c2800c 100644
--- a/src/lib/components/Track.svelte
+++ b/src/lib/components/Track.svelte
@@ -394,7 +394,7 @@
+
{#if track?.image || playlist?.image || album?.image || artist?.image}
{#await OPFS.getImageUrl((track?.image || playlist?.image || album?.image || artist?.image) as string)}
@@ -404,7 +404,7 @@
onclick={handleTrackClick}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
- class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+ class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
> {
+ return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function parseMetadataWithTimeout(
+ file: File,
+ timeoutMs: number = 30000
+): Promise> | null> {
+ try {
+ const timeoutPromise = new Promise((_, reject) =>
+ setTimeout(() => reject(new Error('Metadata parsing timeout')), timeoutMs)
+ );
+ const parsePromise = parseBlob(file);
+ return await Promise.race([parsePromise, timeoutPromise]);
+ } catch {
+ return null;
+ }
+}
+
export async function createLibrary(mobileFiles?: FileList): Promise {
try {
const sampleImage = await fetch('/placeholder.png');
@@ -23,71 +55,92 @@ export async function createLibrary(mobileFiles?: FileList): Promise {
const input = document.getElementById('files') as HTMLInputElement;
const handleFiles = async (files: FileList | File[]) => {
+ if (!files || files.length === 0) {
+ toast.error('No files selected. Please select audio files to upload.');
+ return;
+ }
+
+ const audioFiles = Array.from(files).filter((file) => file.type.startsWith('audio/'));
+ if (audioFiles.length === 0) {
+ toast.error('No audio files found. Please select audio files (MP3, FLAC, etc.).');
+ return;
+ }
+
let i = 0;
- for (const file of Array.from(files)) {
- if (file.type.startsWith('audio/')) {
- i++;
- toast(`${i} of ${files.length} | Processing ${file.name}`);
- try {
- const metadata = await parseBlob(file);
- const track: Song = {
- id: uuidv4(),
- title: metadata.common.title || file.name.split('.').slice(0, -1).join('.'),
- artist: metadata.common.artist || 'Unknown Artist',
- album: metadata.common.album || 'Unknown Album',
- year: metadata.common.year || 0,
- genre: Array.isArray(metadata.common.genre)
+ let successCount = 0;
+ for (const file of audioFiles) {
+ i++;
+ toast(`${i} of ${audioFiles.length} | Processing ${file.name}`);
+ await yieldToUI();
+
+ try {
+ const metadata = await parseMetadataWithTimeout(file);
+ const track: Song = {
+ id: uuidv4(),
+ title: metadata?.common.title || file.name.split('.').slice(0, -1).join('.'),
+ artist: metadata?.common.artist || 'Unknown Artist',
+ album: metadata?.common.album || 'Unknown Album',
+ year: metadata?.common.year || 0,
+ genre: metadata?.common.genre
+ ? Array.isArray(metadata.common.genre)
? metadata.common.genre[0]
- : metadata.common.genre || 'Unknown Genre',
- duration: metadata.format.duration || 0,
- image: metadata.common.picture
- ? new Blob([metadata.common.picture[0].data.slice()], {
- type: metadata.common.picture[0].format
- })
- : blob,
- trackNumber: metadata.common.track?.no ?? 0,
- disk: metadata.common.disk?.no ?? 0,
- ext: file.name.split('.').pop() || 'mp3',
- fileName: file.name
- };
-
- const album: Album = {
- id: uuidv4(),
- name: metadata.common.album || 'Unknown Album',
- artist: metadata.common.artist || 'Unknown Artist',
- year: metadata.common.year || 0,
- genre: Array.isArray(metadata.common.genre)
+ : metadata.common.genre
+ : 'Unknown Genre',
+ duration: metadata?.format.duration || 0,
+ image: metadata?.common.picture
+ ? new Blob([metadata.common.picture[0].data.slice()], {
+ type: metadata.common.picture[0].format
+ })
+ : blob,
+ trackNumber: metadata?.common.track?.no ?? 0,
+ disk: metadata?.common.disk?.no ?? 0,
+ ext: file.name.split('.').pop() || 'mp3',
+ fileName: file.name
+ };
+
+ const album: Album = {
+ id: uuidv4(),
+ name: metadata?.common.album || 'Unknown Album',
+ artist: metadata?.common.artist || 'Unknown Artist',
+ year: metadata?.common.year || 0,
+ genre: metadata?.common.genre
+ ? Array.isArray(metadata.common.genre)
? metadata.common.genre[0]
- : metadata.common.genre || 'Unknown Genre',
- image: metadata.common.picture
- ? new Blob([metadata.common.picture[0].data.slice()], {
- type: metadata.common.picture[0].format
- })
- : blob
- };
-
- const artist: Artist = {
- id: uuidv4(),
- name: metadata.common.artist || 'Unknown Artist'
- };
-
- await OPFS.addAlbum(album, track.id);
- await OPFS.addArtist(artist, track.id, track.album);
- await OPFS.addTrack(track);
- await OPFS.addFile(track.id, file);
- statsManager.recordLibraryAdd(track.id);
- } catch (error) {
- console.error(`Error processing file ${file.name}:`, error);
- }
+ : metadata.common.genre
+ : 'Unknown Genre',
+ image: metadata?.common.picture
+ ? new Blob([metadata.common.picture[0].data.slice()], {
+ type: metadata.common.picture[0].format
+ })
+ : blob
+ };
+
+ const artist: Artist = {
+ id: uuidv4(),
+ name: metadata?.common.artist || 'Unknown Artist'
+ };
+
+ await OPFS.addAlbum(album, track.id);
+ await OPFS.addArtist(artist, track.id, track.album);
+ await OPFS.addTrack(track);
+ await OPFS.addFile(track.id, file);
+ statsManager.recordLibraryAdd(track.id);
+ successCount++;
+ } catch (error) {
+ console.error(`Error processing file ${file.name}:`, error);
}
}
await refreshLibrary();
const tracks = await OPFS.get().tracks();
statsManager.setLibrarySize(tracks.length);
- toast.success(`Library added successfully!`);
+ if (successCount > 0) {
+ toast.success(`Library added successfully! (${successCount} tracks)`);
+ } else {
+ toast.error('No tracks could be processed. Please try again.');
+ }
};
- if (window.showDirectoryPicker && !mobileFiles) {
+ if (isDirectoryPickerSupported() && !mobileFiles) {
const dirHandle: FileSystemDirectoryHandle = await window.showDirectoryPicker();
const files: File[] = [];
@@ -128,13 +181,28 @@ export async function createLibrary(mobileFiles?: FileList): Promise {
} else {
if (mobileFiles) {
await handleFiles(mobileFiles);
- } else if (input.files) {
+ } else if (input && input.files && input.files.length > 0) {
await handleFiles(input.files);
+ } else if (!window.showDirectoryPicker) {
+ toast.error(
+ 'Directory picker is not supported on mobile. Please use the Upload button in Settings.'
+ );
+ return;
+ } else {
+ toast.error('No files selected. Please try again.');
+ return;
}
}
} catch (error) {
console.error('Error in createLibrary:', error);
- toast.error('Failed to create library');
+ if (error instanceof Error) {
+ if (error.name === 'AbortError') {
+ return;
+ }
+ toast.error(`Failed to create library: ${error.message}`);
+ } else {
+ toast.error('Failed to create library. Please try again.');
+ }
}
}
@@ -152,7 +220,6 @@ async function processAlbumDirectory(
break;
}
}
- // this should be illegal, but whatever
if (isMultiDisc) {
for await (const discEntry of albumDir.values()) {
if (discEntry.kind === 'directory' && discEntry.name.toLowerCase().includes('disc')) {
diff --git a/src/lib/opfs.ts b/src/lib/opfs.ts
index 9c0965e..1fd283a 100644
--- a/src/lib/opfs.ts
+++ b/src/lib/opfs.ts
@@ -1,5 +1,6 @@
import type { Album, Artist, Playlist, Song } from '$lib/types';
import type { StatsSnapshot } from '$lib/stats';
+import { SERVER } from '$lib/api/server';
import { dir, file, write } from 'opfs-tools';
import { toast } from 'svelte-sonner';
export class OPFS {
@@ -9,7 +10,7 @@ export class OPFS {
private static playlistsCache: Playlist[] | null = null;
private static statsCache: StatsSnapshot | null = null;
private static imageUrlCache: Map = new Map();
- private static SERVER = 'https://api.maple.music';
+ private static SERVER = SERVER;
private static async getCache(path: string, cache: T[] | null): Promise {
if (cache) return cache;
@@ -102,6 +103,8 @@ export class OPFS {
return url;
}
+ private static saveStatsQueue: Promise = Promise.resolve();
+
public static async getStats() {
if (this.statsCache) return this.statsCache;
try {
@@ -118,9 +121,15 @@ export class OPFS {
}
public static async saveStats(snapshot: StatsSnapshot) {
- await this.ensureConfigDir();
this.statsCache = snapshot;
- await write('/config/stats.json', JSON.stringify(snapshot));
+ const currentQueue = this.saveStatsQueue;
+ this.saveStatsQueue = currentQueue
+ .then(async () => {
+ await this.ensureConfigDir();
+ await write('/config/stats.json', JSON.stringify(snapshot));
+ })
+ .catch(() => {});
+ await this.saveStatsQueue;
}
public static async addAlbum(album: Album, id: string) {
diff --git a/src/lib/player.ts b/src/lib/player.ts
index 8fb2c5d..564d84e 100644
--- a/src/lib/player.ts
+++ b/src/lib/player.ts
@@ -19,6 +19,100 @@ import {
import { statsManager } from '$lib/stats';
import type { QueueSnapshot } from '$lib/store';
import UserSettings from '$lib/preferences/usersettings';
+import { UserManager } from './api/UserManager';
+import { SERVER } from '$lib/api/server';
+
+let mediaSessionInitialized = false;
+
+function initMediaSession() {
+ if (!browser || mediaSessionInitialized || !('mediaSession' in navigator)) return;
+ mediaSessionInitialized = true;
+
+ navigator.mediaSession.setActionHandler('play', () => {
+ const state = get(audioPlayer);
+ if (state.audio instanceof HTMLAudioElement && !state.playing) {
+ togglePlay();
+ }
+ });
+
+ navigator.mediaSession.setActionHandler('pause', () => {
+ const state = get(audioPlayer);
+ if (state.audio instanceof HTMLAudioElement && state.playing) {
+ togglePlay();
+ }
+ });
+
+ navigator.mediaSession.setActionHandler('previoustrack', () => {
+ previous();
+ });
+
+ navigator.mediaSession.setActionHandler('nexttrack', () => {
+ next();
+ });
+
+ navigator.mediaSession.setActionHandler('seekbackward', (details) => {
+ const state = get(audioPlayer);
+ if (state.audio instanceof HTMLAudioElement) {
+ const skipTime = details.seekOffset || 10;
+ seekTo(Math.max(state.audio.currentTime - skipTime, 0));
+ }
+ });
+
+ navigator.mediaSession.setActionHandler('seekforward', (details) => {
+ const state = get(audioPlayer);
+ if (state.audio instanceof HTMLAudioElement) {
+ const skipTime = details.seekOffset || 10;
+ seekTo(Math.min(state.audio.currentTime + skipTime, state.audio.duration || 0));
+ }
+ });
+
+ navigator.mediaSession.setActionHandler('seekto', (details) => {
+ if (details.seekTime !== undefined) {
+ seekTo(details.seekTime);
+ }
+ });
+
+ navigator.mediaSession.setActionHandler('stop', () => {
+ const state = get(audioPlayer);
+ if (state.audio instanceof HTMLAudioElement) {
+ state.audio.pause();
+ state.audio.currentTime = 0;
+ audioPlayer.update((value) => ({ ...value, playing: false, currentTime: 0 }));
+ }
+ });
+}
+
+function updateMediaSessionMetadata(song: Song, artworkUrl?: string) {
+ if (!browser || !('mediaSession' in navigator)) return;
+ initMediaSession();
+
+ const artwork: MediaImage[] = artworkUrl ? [{ src: artworkUrl, sizes: '512x512', type: 'image/jpeg' }] : [];
+
+ navigator.mediaSession.metadata = new MediaMetadata({
+ title: song.title || 'Unknown Title',
+ artist: song.artist || 'Unknown Artist',
+ album: song.album || 'Unknown Album',
+ artwork
+ });
+}
+
+function updateMediaSessionPlaybackState(playing: boolean) {
+ if (!browser || !('mediaSession' in navigator)) return;
+ navigator.mediaSession.playbackState = playing ? 'playing' : 'paused';
+}
+
+function updateMediaSessionPositionState(audio: HTMLAudioElement) {
+ if (!browser || !('mediaSession' in navigator) || !audio.duration || !isFinite(audio.duration)) return;
+ try {
+ navigator.mediaSession.setPositionState({
+ duration: audio.duration,
+ playbackRate: audio.playbackRate,
+ position: audio.currentTime
+ });
+ } catch {
+
+ }
+}
type QueueSourceState = QueueSnapshot['source'];
@@ -31,6 +125,84 @@ function updateQueue(items: Song[], index: number, source?: QueueSourceState) {
context.set(items);
}
+async function getImageFile(imagePath: string): Promise {
+ const response = await OPFS.get().image(imagePath);
+ const arrayBuffer = await response.arrayBuffer();
+ return new File([arrayBuffer], imagePath, { type: 'image/jpeg' });
+}
+
+async function uploadAlbumArt(song: Song): Promise {
+ const isLoggedIn = await UserManager.isLoggedIn();
+ if (!isLoggedIn) return false;
+
+ if (!song.image || typeof song.image !== 'string') return false;
+
+ try {
+ const image = await getImageFile(song.image);
+ const imageBuffer = await image.arrayBuffer();
+ const imageFile = new File([imageBuffer], 'album.jpg', { type: 'image/jpeg' });
+ await UserManager.setAlbumArt(imageFile);
+ return true;
+ } catch (error) {
+ console.error('Error uploading album art:', error);
+ return false;
+ }
+}
+
+async function sendWebhook(song: Song) {
+ if (!UserSettings.webhook.enabled || !UserSettings.webhook.url) return;
+
+ const isLoggedIn = await UserManager.isLoggedIn();
+ if (!isLoggedIn) return;
+
+ if (!song.image || typeof song.image !== 'string') return;
+
+ try {
+ const image = await getImageFile(song.image);
+ const user = get(SavedUser);
+ const formData = new FormData();
+ formData.append('file', image, 'album.jpg');
+ formData.append(
+ 'payload_json',
+ JSON.stringify({
+ embeds: [
+ {
+ title: 'Now Playing',
+ description: `**${song.title}** by ${song.artist}`,
+ color: 0x8f4a4c,
+ fields: [
+ {
+ name: 'Album',
+ value: song.album
+ },
+ {
+ name: 'Year',
+ value: song.year ? song.year.toString() : 'N/A'
+ },
+ {
+ name: 'Track Number',
+ value: song.trackNumber ? song.trackNumber.toString() : 'N/A'
+ }
+ ],
+ image: {
+ url: 'attachment://album.jpg'
+ }
+ }
+ ],
+ username: user?.name || 'User',
+ avatar_url: `${SERVER}/public/get/pfp/${user?.id}`
+ })
+ );
+
+ await fetch(UserSettings.webhook.url, {
+ method: 'POST',
+ body: formData
+ });
+ } catch (error) {
+ console.error('Error sending webhook:', error);
+ }
+}
+
async function emitNowPlaying(song: Song) {
const s = get(socket);
const user = get(SavedUser);
@@ -46,6 +218,12 @@ async function emitNowPlaying(song: Song) {
source: 'Web'
};
s.emit('nowPlaying', { nowPlaying: payload });
+
+ const artworkUploaded = await uploadAlbumArt(song);
+ const artworkUrl = artworkUploaded ? `${SERVER}/public/get/albumArt/${user.id}/${crypto.randomUUID()}` : undefined;
+ updateMediaSessionMetadata(song, artworkUrl);
+
+ await sendWebhook(song);
}
async function playAtIndex(index: number) {
@@ -71,10 +249,14 @@ async function playAtIndex(index: number) {
audio.src = audioUrl;
audio.currentTime = 0;
audio.play();
+ audio.addEventListener('loadedmetadata', () => {
+ updateMediaSessionPositionState(audio);
+ }, { once: true });
return { ...value, audio, playing: true, currentTime: 0, onEnded: next };
}
return value;
});
+ updateMediaSessionPlaybackState(true);
await emitNowPlaying(song);
}
@@ -121,6 +303,7 @@ export async function next() {
}
return { ...value, playing: false };
});
+ updateMediaSessionPlaybackState(false);
return;
}
statsManager.recordSkip();
@@ -141,6 +324,7 @@ export function togglePlay() {
} else {
statsManager.recordResume();
}
+ const newPlayingState = !state.playing;
audioPlayer.update((value) => {
if (value.audio instanceof HTMLAudioElement) {
if (value.playing) {
@@ -148,11 +332,13 @@ export function togglePlay() {
} else {
value.audio.play();
}
- return { ...value, playing: !value.playing, currentTime: value.audio.currentTime };
+ updateMediaSessionPositionState(value.audio);
+ return { ...value, playing: newPlayingState, currentTime: value.audio.currentTime };
}
return value;
});
-}
+ updateMediaSessionPlaybackState(newPlayingState);
+}
export function setVolumeLevel(volume: number) {
audioPlayer.update((value) => ({ ...value, volume, changeVolume: true }));
@@ -164,6 +350,7 @@ export function seekTo(time: number) {
audioPlayer.update((value) => {
if (value.audio instanceof HTMLAudioElement) {
value.audio.currentTime = time;
+ updateMediaSessionPositionState(value.audio);
return { ...value, currentTime: time };
}
return value;
diff --git a/src/lib/refreshFriends.ts b/src/lib/refreshFriends.ts
new file mode 100644
index 0000000..85b63b8
--- /dev/null
+++ b/src/lib/refreshFriends.ts
@@ -0,0 +1,64 @@
+import { friends, pendingRequests, SavedUser } from '$lib/store';
+import { get } from 'svelte/store';
+import { UserManager } from './api/UserManager';
+import type { AddedFriend } from './types';
+import { SERVER } from './api/server';
+
+type FriendRelation = { user_id: string; friend_id: string };
+
+export async function refreshRequests() {
+ pendingRequests.set(await UserManager.getRequests());
+}
+
+export async function refreshFriends() {
+ const fetchedFriends = await UserManager.getFriends();
+ sortFriends(fetchedFriends);
+}
+
+async function sortFriends(unsorted: FriendRelation[]) {
+ const userId = get(SavedUser).id;
+ const newFriends = unsorted.map((friend: FriendRelation) => {
+ if (friend.user_id === userId) {
+ return { user_id: userId, friend_id: friend.friend_id };
+ } else {
+ return { user_id: userId, friend_id: friend.user_id };
+ }
+ });
+ const friendsList: AddedFriend[] = [];
+ const seenIds = new Set();
+ for (const friend of newFriends) {
+ if (seenIds.has(friend.friend_id)) continue;
+ const friendData = await UserManager.getUserbyId(friend.friend_id);
+ if (!friendData) continue;
+ seenIds.add(friendData.id);
+ let nowPlaying = friendData.nowPlaying;
+ if (nowPlaying && typeof nowPlaying === 'string') {
+ try {
+ nowPlaying = JSON.parse(nowPlaying);
+ } catch (error) {
+ console.error('Error parsing nowPlaying:', error);
+ nowPlaying = null;
+ }
+ }
+ let nowPlayingFormatted = undefined;
+ if (nowPlaying && typeof nowPlaying === 'object' && nowPlaying !== null) {
+ if (nowPlaying.title || nowPlaying.artist || nowPlaying.album) {
+ nowPlayingFormatted = {
+ title: nowPlaying.title || '',
+ artist: nowPlaying.artist || '',
+ album: nowPlaying.album || ''
+ };
+ }
+ }
+ const pfpUrl = `${SERVER}/public/get/pfp/${friendData.id}`;
+ const newFriend: AddedFriend = {
+ id: friendData.id,
+ name: friendData.name,
+ username: friendData.username,
+ pfp: pfpUrl,
+ nowPlaying: nowPlayingFormatted
+ };
+ friendsList.push(newFriend);
+ }
+ friends.set(friendsList);
+}
diff --git a/src/lib/socketManager.ts b/src/lib/socketManager.ts
new file mode 100644
index 0000000..b195270
--- /dev/null
+++ b/src/lib/socketManager.ts
@@ -0,0 +1,78 @@
+import { browser } from '$app/environment';
+import { socket as importedSocket, friends } from '$lib/store';
+import { toast } from 'svelte-sonner';
+import { get } from 'svelte/store';
+import { UserManager } from './api/UserManager';
+import { refreshFriends, refreshRequests } from './refreshFriends';
+
+export const socketManager = () => {
+ if (browser) {
+ let socket = get(importedSocket);
+
+ socket?.on('connect', () => {
+ console.log('[CLIENT] Socket connected');
+ });
+
+ socket?.on('friendRequest', async (data) => {
+ const id = data.id;
+ const friend = await UserManager.getUserbyId(id);
+ toast.success('Friend request from: ' + friend.name + ' (' + friend.username + ')', {
+ action: {
+ label: 'Accept',
+ onClick: () => {
+ UserManager.acceptRequest(id);
+ }
+ }
+ });
+ refreshRequests();
+ });
+
+ socket?.on('notFound', async () => {
+ toast.error('Friend request failed: User not found');
+ });
+
+ socket?.on('error', async (data) => {
+ toast.error(data);
+ });
+
+ socket?.on('requestAccepted', async (data) => {
+ console.log(data);
+ const id = data.id;
+ const friend = await UserManager.getUserbyId(id);
+ toast.success(friend.name + ' (' + friend.username + ') accepted your friend request!');
+ refreshFriends();
+ refreshRequests();
+ });
+
+ socket?.on('acceptedRequest', async (data) => {
+ console.log(data);
+ const id = data.id;
+ const friend = await UserManager.getUserbyId(id);
+ toast.success('You are now friends with ' + friend.name + ' (' + friend.username + ')!');
+ refreshFriends();
+ refreshRequests();
+ });
+
+ socket?.on('nowPlaying', async (data) => {
+ console.log('[CLIENT] Received nowPlaying event:', data);
+ console.log('[CLIENT] Current socket ID:', socket?.id);
+ if (data.id && data.nowPlaying) {
+ friends.update((currentFriends) => {
+ return currentFriends.map((friend) => {
+ if (friend.id === data.id) {
+ return {
+ ...friend,
+ nowPlaying: {
+ title: data.nowPlaying.title,
+ artist: data.nowPlaying.artist,
+ album: data.nowPlaying.album
+ }
+ };
+ }
+ return friend;
+ });
+ });
+ }
+ });
+ }
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9e8126e..0b06a93 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,16 +2,23 @@
import '../app.css';
import '../main.css';
import SideBar from '$lib/components/SideBar.svelte';
- import TopBar from '$lib/components/TopBar.svelte';
import BottomBar from '$lib/components/BottomBar.svelte';
- import { isLoggedIn, title, loadPreferencesStore } from '$lib/store';
+ import MobileNowPlaying from '$lib/components/MobileNowPlaying.svelte';
+ import MobileBottomNav from '$lib/components/MobileBottomNav.svelte';
+ import { isLoggedIn, title, loadPreferencesStore, SavedUser, socket, UserInfo } from '$lib/store';
import { UserManager } from '$lib/api/UserManager';
import { onMount } from 'svelte';
import { Snackbar } from 'm3-svelte';
import { initTheme } from '$lib/theme/theme';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
+ import { socketManager } from '$lib/socketManager';
+ import { io } from 'socket.io-client';
import { browser } from '$app/environment';
+ import UserSettings from '$lib/preferences/usersettings';
+ import { refreshFriends, refreshRequests } from '$lib/refreshFriends';
+ import { SERVER } from '$lib/api/server';
+ import { Toaster } from 'svelte-sonner';
let { children, data } = $props();
@@ -26,24 +33,58 @@
goto('/onboard');
}
- const user = await UserManager.checkSession();
- if (user) {
+ const isLoggedInValue = await UserManager.checkSession();
+ if (isLoggedInValue) {
isLoggedIn.set(true);
} else {
isLoggedIn.set(false);
}
+
+ const user = await UserManager.getUser();
+ if (user) {
+ SavedUser.set(user);
+ }
+
+ if (browser) {
+ if ($isLoggedIn) {
+ if (UserSettings.preferences.socket) {
+ const io2 = io(`${SERVER}`, {
+ withCredentials: true
+ });
+ socket.set(io2);
+ $socket?.on('connect', () => {
+ console.log('Connected to server');
+ });
+ socketManager();
+ refreshFriends();
+ refreshRequests();
+ }
+ }
+ }
});
+
{$title}
-
diff --git a/src/lib/library.ts b/src/lib/library.ts
index 13bdeb3..687c5ec 100644
--- a/src/lib/library.ts
+++ b/src/lib/library.ts
@@ -14,6 +14,38 @@ declare global {
}
}
+function isMobileBrowser(): boolean {
+ return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|tablet/i.test(
+ navigator.userAgent
+ );
+}
+
+function isDirectoryPickerSupported(): boolean {
+ if (isMobileBrowser()) {
+ return false;
+ }
+ return typeof window.showDirectoryPicker === 'function';
+}
+
+function yieldToUI(): Promise{track?.title || playlist?.name || album?.name || artist?.name}
-{track?.artist || '' || album?.artist || ''}
+
+
+ {track?.title || playlist?.name || album?.name || artist?.name} +
++ {track?.artist || '' || album?.artist || ''} +
+
-
{@render children()}
+
+
+
+
-
+
@@ -29,9 +30,9 @@
Welcome to Maple!
@@ -22,6 +22,7 @@ and watch it be organized into albums, artists, playlists, and more! Start by uploading your music library createLibrary()}>here! + (if you're on mobile you may need to upload from settings)
-
-Recently Played
+Recently Played
{#each recent as track}
@@ -39,11 +40,6 @@
-
-