(fix) Improve usability

src-tauri/src/main.rs

@@ -220,9 +220,10 @@ fn tray_handler(app: &AppHandle<Wry>, event: SystemTrayEvent) {
     match event {
         SystemTrayEvent::MenuItemClick { id, .. } => { menu_item_handler(id) }
         SystemTrayEvent::DoubleClick { .. } => {
-            app.get_window("main").unwrap().show()
+            let main_window = app.get_window("main").unwrap();
+            main_window.show()
                 .expect("Unable to show main window.");
-            app.get_window("main").unwrap().set_focus()
+            main_window.set_focus()
                 .expect("Unable to focus main window.");
         }
         _ => {}

src/backend/core/audio.ts

@@ -29,13 +29,13 @@ export async function setup(): Promise<void> {
 
         // Set the remote URLs.
         if (listeningWith != null && settings.audio().stream_sync)
-            track.url = getStreamingUrl(track);
+            track.refUrl = getStreamingUrl(track);
         else
-            track.url =
+            track.refUrl =
                 settings.audio().playback_mode == "Download"
                     ? getDownloadUrl(track)
                     : getStreamingUrl(track);
-        track.icon = getIconUrl(track);
+        track.refIcon = getIconUrl(track);
         return track;
     };
 
@@ -64,8 +64,8 @@ export async function downloadTrack(
     await fs.downloadUrl(getDownloadUrl(track), fs.getTrackPath(track));
     await fs.downloadUrl(getIconUrl(track), fs.getIconPath(track));
     // Save the track's data.
-    track.icon = fs.toAsset(fs.getIconPath(track));
-    track.url = fs.toAsset(fs.getTrackPath(track));
+    track.refIcon = fs.toAsset(fs.getIconPath(track));
+    track.refUrl = fs.toAsset(fs.getTrackPath(track));
     track.title = base64Encode(new TextEncoder().encode(track.title));
     track.serialized = true;
     await fs.saveData(track, fs.getDataPath(track));

src/backend/features/social.ts

@@ -9,6 +9,7 @@ import TrackPlayer, { usePlayer } from "@mod/player";
 
 import emitter from "@backend/events";
 import { useSettings, useUser } from "@backend/stores";
+import { parseArtist } from "@backend/core/search";
 
 export let listeningWith: User | null = null; // The ID of the user you are currently listening with.
 
@@ -130,6 +131,8 @@ export async function updatePresence(): Promise<void> {
 
     // Request the gateway to update the presence.
     const track = player.track;
+    if (track != null) track.artist = parseArtist(track.artist);
+
     await fetch(`${targetRoute}/social/presence`, {
         method: "POST", headers: { Authorization: token() },
         body: JSON.stringify({

src/backend/modules/player.ts

@@ -401,38 +401,39 @@ export class Player extends EventEmitter implements mod.TrackPlayer {
 
         // Update the navigator metadata.
         if ("mediaSession" in navigator) {
+            const icon = track.refIcon ?? track.icon;
             navigator.mediaSession.metadata = new MediaMetadata({
                 title: track.title,
                 artist: track.artist,
                 album: "Laudiolin",
                 artwork: [
                     {
-                        src: track.icon,
+                        src: icon,
                         sizes: "96x96",
                         type: "image/png",
                     },
                     {
-                        src: track.icon,
+                        src: icon,
                         sizes: "128x128",
                         type: "image/png",
                     },
                     {
-                        src: track.icon,
+                        src: icon,
                         sizes: "192x192",
                         type: "image/png",
                     },
                     {
-                        src: track.icon,
+                        src: icon,
                         sizes: "256x256",
                         type: "image/png",
                     },
                     {
-                        src: track.icon,
+                        src: icon,
                         sizes: "384x384",
                         type: "image/png",
                     },
                     {
-                        src: track.icon,
+                        src: icon,
                         sizes: "512x512",
                         type: "image/png",
                     }
@@ -531,8 +532,8 @@ export class Track extends Howl implements mod.Track {
     ) {
         super({
             format: "mp3",
-            html5: !playData || playData.url.includes("stream"),
-            src: [playData ? playData.url : data.url],
+            html5: !playData || (playData.refUrl ?? playData.url).includes("stream"),
+            src: [playData ? (playData.refUrl ?? playData.url) : (data.refUrl ?? data.url)],
             volume: useSettings.getState().audio.master_volume,
             autoplay: false
         });

src/types.ts

@@ -21,7 +21,10 @@ export type TrackData = {
     url: string;
     id: string;
     duration: number;
+
     serialized?: boolean;
+    refUrl?: string;
+    refIcon?: string;
 };
 export type SearchResults = {
     waiting?: boolean;

src/ui/components/player/MiniPlayer.tsx

@@ -13,7 +13,6 @@ import { MdShuffle, MdRepeat, MdRepeatOne } from "react-icons/md";
 import { IoMdSkipBackward, IoMdSkipForward } from "react-icons/io";
 import { VscClose } from "react-icons/vsc";
 
-import type { TrackData } from "@app/types";
 import WithStore from "@backend/stores";
 import { router } from "@app/main";
 import { contentRoutes } from "@app/constants";
@@ -104,6 +103,8 @@ class MiniPlayer extends React.Component<IProps, IState> {
         // Listen for hotkeys.
         document.addEventListener("keydown", this.hotKeys);
         document.addEventListener("keyup", this.onKeyUp);
+
+        appWindow.setTitle("Laudiolin");
     }
 
     componentWillUnmount() {
@@ -112,6 +113,8 @@ class MiniPlayer extends React.Component<IProps, IState> {
         // Stop listening for hotkeys.
         document.removeEventListener("keydown", this.hotKeys);
         document.removeEventListener("keyup", this.onKeyUp);
+
+        appWindow.setTitle("Laudiolin");
     }
 
     /**
@@ -180,7 +183,7 @@ class MiniPlayer extends React.Component<IProps, IState> {
                                 className={"MiniPlayer_Icon"}
                                 alt={track.title ?? "No track"}
                                 src={
-                                    track.icon ??
+                                    track.refIcon ?? track.icon ??
                                     "https://i.imgur.com/0Q9QZ9A.png"
                                 }
                             />

src/ui/layout/ControlPanel.tsx

@@ -154,7 +154,7 @@ class ControlPanel extends React.Component<IProps, IState> {
                                 className={"ControlPanel_Icon"}
                                 alt={track.title ?? "No track"}
                                 src={
-                                    track.icon ??
+                                    track.refIcon ?? track.icon ??
                                     "https://i.imgur.com/0Q9QZ9A.png"
                                 }
                             />

src/utils.ts

@@ -16,7 +16,7 @@ import { asArray, useFavorites } from "@backend/stores";
  * @param track The track to get the icon URL for.
  */
 export function getIconUrl(track: TrackData): string {
-    let icon = track.icon;
+    let icon = track.refIcon ?? track.icon;
     // Replace the legacy icon URL.
     if (icon.includes("app.magix.lol"))
         icon = icon.replace("app.magix.lol", "app.seikimo.moe");
@@ -41,7 +41,7 @@ export function getIconUrl(track: TrackData): string {
     // #v-endif
 
     // Match the icon URL to the correct proxy URL.
-    const iconUrl = track.icon;
+    const iconUrl = track.refIcon ?? track.icon;
     let split = iconUrl.split("/");
 
     if (iconUrl.includes("i.ytimg.com")) {