Merge pull request #353 from victoralvesf/development

Sync v0.13.0

Author: victoralvesf

electron-builder.yml

@@ -48,9 +48,15 @@ mac:
 
 linux:
   target:
-    - AppImage
+    - target: AppImage
+      arch:
+        - x64
+        - arm64
+    - target: tar.gz
+      arch:
+        - x64
+        - arm64
     - deb
-    - tar.gz
   maintainer: victoralvesf
   category: AudioVideo
   synopsis: 'A modern desktop music client for Navidrome and OpenSubsonic servers.'

flatpak/io.github.victoralvesf.aonsoku.metainfo.xml

@@ -47,6 +47,23 @@
   </screenshots>
 
   <releases>
+    <release version="0.13.0" date="2026-02-26">
+      <url type="details">https://github.com/victoralvesf/aonsoku/releases/tag/v0.13.0</url>
+      <description>
+        <p>New Features</p>
+        <ul>
+          <li>Now Playing: Send now playing event when song starts playing to the server.</li>
+          <li>Linux Builds: Added AppImage and Tar.gz builds for the arm64 architecture.</li>
+        </ul>
+        <p>Fixes</p>
+        <ul>
+          <li>Audio Player: Improved audio player performance and stability.</li>
+          <li>Quality Badge: Improved the rendering of the quality badge.</li>
+          <li>Window Management: Improved the window management state for Linux.</li>
+          <li>Scrobble: Fixed an issue where scrobbles were sent instantly when a song started playing.</li>
+        </ul>
+      </description>
+    </release>
     <release version="0.12.0" date="2026-02-18">
       <url type="details">https://github.com/victoralvesf/aonsoku/releases/tag/v0.12.0</url>
       <description>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "aonsoku",
   "private": true,
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "A modern desktop client for Navidrome/Subsonic servers.",
   "author": {
     "name": "Victor Alves"
@@ -20,7 +20,7 @@
     "cy:open": "cypress open",
     "test": "cypress run --component",
     "electron:start": "electron-vite preview",
-    "electron:dev": "electron-vite dev",
+    "electron:dev": "electron-vite dev --watch",
     "electron:build": "electron-vite build",
     "postinstall": "electron-builder install-app-deps",
     "build:unpack": "electron-builder --dir",

src/app/components/home/carousel/header.tsx

@@ -1,4 +1,5 @@
 import Autoplay from 'embla-carousel-autoplay'
+import { HeaderFallback } from '@/app/components/fallbacks/home-fallbacks'
 import { HeaderItem } from '@/app/components/home/carousel/header-item'
 import {
   Carousel,
@@ -7,14 +8,14 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from '@/app/components/ui/carousel'
-import { ISong } from '@/types/responses/song'
+import { useGetRandomSongs } from '@/app/hooks/use-home'
 
-interface HomeHeaderProps {
-  songs: ISong[]
-}
+export function HomeHeader() {
+  const { data: songs, isLoading, isFetching } = useGetRandomSongs()
+
+  if (isLoading || isFetching) return <HeaderFallback />
 
-export default function HomeHeader({ songs }: HomeHeaderProps) {
-  if (songs.length === 0) return null
+  if (!songs || songs.length === 0) return null
 
   return (
     <Carousel

src/app/components/home/explore.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+import { PreviewListFallback } from '@/app/components/fallbacks/home-fallbacks'
+import { useGetRandomAlbums } from '@/app/hooks/use-home'
+import { ROUTES } from '@/routes/routesList'
+import PreviewList from './preview-list'
+
+export function Explore() {
+  const { t } = useTranslation()
+  const { data, isLoading } = useGetRandomAlbums()
+
+  if (isLoading) {
+    return <PreviewListFallback />
+  }
+
+  if (!data || !data.list || data.list.length === 0) return null
+
+  return (
+    <PreviewList
+      title={t('home.explore')}
+      moreRoute={ROUTES.ALBUMS.RANDOM}
+      list={data.list}
+    />
+  )
+}

src/app/components/home/most-played.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+import { PreviewListFallback } from '@/app/components/fallbacks/home-fallbacks'
+import { useGetMostPlayed } from '@/app/hooks/use-home'
+import { ROUTES } from '@/routes/routesList'
+import PreviewList from './preview-list'
+
+export function MostPlayed() {
+  const { t } = useTranslation()
+  const { data, isLoading } = useGetMostPlayed()
+
+  if (isLoading) {
+    return <PreviewListFallback />
+  }
+
+  if (!data || !data.list || data.list.length === 0) return null
+
+  return (
+    <PreviewList
+      title={t('home.mostPlayed')}
+      moreRoute={ROUTES.ALBUMS.MOST_PLAYED}
+      list={data.list}
+    />
+  )
+}

src/app/components/home/recently-added.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+import { PreviewListFallback } from '@/app/components/fallbacks/home-fallbacks'
+import { useGetRecentlyAdded } from '@/app/hooks/use-home'
+import { ROUTES } from '@/routes/routesList'
+import PreviewList from './preview-list'
+
+export function RecentlyAdded() {
+  const { t } = useTranslation()
+  const { data, isLoading } = useGetRecentlyAdded()
+
+  if (isLoading) {
+    return <PreviewListFallback />
+  }
+
+  if (!data || !data.list || data.list.length === 0) return null
+
+  return (
+    <PreviewList
+      title={t('home.recentlyAdded')}
+      moreRoute={ROUTES.ALBUMS.RECENTLY_ADDED}
+      list={data.list}
+    />
+  )
+}

src/app/components/home/recently-played.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+import { PreviewListFallback } from '@/app/components/fallbacks/home-fallbacks'
+import { useGetRecentlyPlayed } from '@/app/hooks/use-home'
+import { ROUTES } from '@/routes/routesList'
+import PreviewList from './preview-list'
+
+export function RecentlyPlayed() {
+  const { t } = useTranslation()
+  const { data, isLoading } = useGetRecentlyPlayed()
+
+  if (isLoading) {
+    return <PreviewListFallback />
+  }
+
+  if (!data || !data.list || data.list.length === 0) return null
+
+  return (
+    <PreviewList
+      title={t('home.recentlyPlayed')}
+      moreRoute={ROUTES.ALBUMS.RECENTLY_PLAYED}
+      list={data.list}
+    />
+  )
+}

src/app/components/player/player.tsx

@@ -45,7 +45,6 @@ const MemoPlayerExpandButton = memo(PlayerExpandButton)
 const MemoPodcastPlaybackRate = memo(PodcastPlaybackRate)
 const MemoLyricsButton = memo(PlayerLyricsButton)
 const MemoMiniPlayerButton = memo(MiniPlayerButton)
-const MemoAudioPlayer = memo(AudioPlayer)
 
 export function Player() {
   const audioRef = useRef<HTMLAudioElement>(null)
@@ -237,7 +236,7 @@ export function Player() {
       </div>
 
       {isSong && song && (
-        <MemoAudioPlayer
+        <AudioPlayer
           replayGain={trackReplayGain}
           src={getSongStreamUrl(song.id)}
           autoPlay={isPlaying}
@@ -254,7 +253,7 @@ export function Player() {
       )}
 
       {isRadio && radio && (
-        <MemoAudioPlayer
+        <AudioPlayer
           src={radio.streamUrl}
           autoPlay={isPlaying}
           audioRef={radioRef}
@@ -266,7 +265,7 @@ export function Player() {
       )}
 
       {isPodcast && podcast && (
-        <MemoAudioPlayer
+        <AudioPlayer
           src={getProxyURL(podcast.audio_url)}
           autoPlay={isPlaying}
           audioRef={podcastRef}

src/app/components/player/progress.tsx

@@ -1,19 +1,10 @@
 import clsx from 'clsx'
-import {
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { RefObject, useCallback, useEffect, useMemo, useState } from 'react'
 import { ProgressSlider } from '@/app/components/ui/slider'
 import { podcasts } from '@/service/podcasts'
-import { subsonic } from '@/service/subsonic'
 import {
   usePlayerActions,
   usePlayerDuration,
-  usePlayerIsPlaying,
   usePlayerMediaType,
   usePlayerProgress,
   usePlayerSonglist,
@@ -31,13 +22,10 @@ export function PlayerProgress({ audioRef }: PlayerProgressProps) {
   const progress = usePlayerProgress()
   const [localProgress, setLocalProgress] = useState(progress)
   const currentDuration = usePlayerDuration()
-  const isPlaying = usePlayerIsPlaying()
-  const { currentSong, currentList, podcastList, currentSongIndex } =
-    usePlayerSonglist()
+  const { currentList, podcastList, currentSongIndex } = usePlayerSonglist()
   const { isSong, isPodcast } = usePlayerMediaType()
   const { setProgress, setUpdatePodcastProgress, getCurrentPodcastProgress } =
     usePlayerActions()
-  const isScrobbleSentRef = useRef(false)
 
   const isEmpty = isSong && currentList.length === 0
 
@@ -77,44 +65,6 @@ export function PlayerProgress({ audioRef }: PlayerProgressProps) {
     [currentDuration],
   )
 
-  const sendScrobble = useCallback(async (songId: string) => {
-    await subsonic.scrobble.send(songId)
-  }, [])
-
-  const progressTicks = useRef(0)
-
-  useEffect(() => {
-    if (isSeeking || !isPlaying) {
-      return
-    }
-    if (isSong) {
-      const progressPercentage = (progress / currentDuration) * 100
-
-      if (progressPercentage === 0) {
-        isScrobbleSentRef.current = false
-        progressTicks.current = 0
-      } else {
-        progressTicks.current += 1
-
-        if (
-          (progressTicks.current >= currentDuration / 2 ||
-            progressTicks.current >= 60 * 4) &&
-          !isScrobbleSentRef.current
-        ) {
-          sendScrobble(currentSong.id)
-          isScrobbleSentRef.current = true
-        }
-      }
-    }
-  }, [
-    progress,
-    currentDuration,
-    isSong,
-    sendScrobble,
-    currentSong.id,
-    isPlaying,
-  ])
-
   // Used to save listening progress to backend every 30 seconds
   useEffect(() => {
     if (!isPodcast || !podcastList) return