Merge pull request #72 from victoralvesf/development

Release v0.4.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "aonsoku",
   "private": true,
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -36,6 +36,7 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^5.51.23",
     "@tanstack/react-table": "^8.17.3",
+    "@tanstack/react-virtual": "^3.10.8",
     "@tauri-apps/api": "^1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "aonsoku"
-version = "0.3.2"
+version = "0.4.0"
 description = "A modern desktop client for Navidrome/Subsonic servers."
 authors = ["Victor Alves"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "Aonsoku",
-    "version": "0.3.2"
+    "version": "0.4.0"
   },
   "tauri": {
     "allowlist": {
@@ -52,7 +52,8 @@
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "dangerousUseHttpScheme": true
     },
     "bundle": {
       "active": true,

src/app/components/album/image-header.tsx

@@ -118,14 +118,14 @@ export default function ImageHeader({
         </div>
 
         <div className="flex flex-col justify-end z-10">
-          <p className="text-xs 2xl:text-sm mb-1 2xl:mb-2 font-medium drop-shadow-md">
+          <p className="text-xs 2xl:text-sm font-medium drop-shadow-md">
             {type}
           </p>
           <h1
             className={clsx(
               'scroll-m-20 font-bold tracking-tight antialiased drop-shadow-md line-clamp-2',
               getTextSizeClass(title),
-              subtitle ? 'mb-1 2xl:mb-2' : 'mb-1',
+              subtitle && 'mb-1',
             )}
           >
             {title}

src/app/components/album/shadow-header.tsx

@@ -1,8 +1,21 @@
-import { ReactNode } from 'react'
+import { ComponentProps } from 'react'
+import { cn } from '@/lib/utils'
 
-export function ShadowHeader({ children }: { children: ReactNode }) {
+type ShadowHeaderProps = ComponentProps<'div'>
+
+export function ShadowHeader({
+  children,
+  className,
+  ...rest
+}: ShadowHeaderProps) {
   return (
-    <div className="flex items-center justify-start px-8 h-[--shadow-header-height] fixed top-[--header-height] right-0 left-[--mini-sidebar-width] lg:left-[--sidebar-width] z-30 border-b bg-background backdrop-blur-xl supports-[backdrop-filter]:bg-background/60">
+    <div
+      className={cn(
+        'flex items-center justify-start px-8 h-[--shadow-header-height] fixed top-[--header-height] right-0 left-[--mini-sidebar-width] lg:left-[--sidebar-width] z-30 border-b bg-background backdrop-blur-xl supports-[backdrop-filter]:bg-background/60',
+        className,
+      )}
+      {...rest}
+    >
       {children}
     </div>
   )

src/app/components/command/command-menu.tsx

@@ -170,6 +170,10 @@ export default function CommandMenu() {
       if (response) {
         setScanStatus(response)
         await queryClient.invalidateQueries()
+
+        useAppStore.setState((state) => {
+          state.data.songCount = null
+        })
       }
 
       setLoadingStatus(false)

src/app/components/fallbacks/album-fallbacks.tsx

@@ -10,8 +10,9 @@ export function AlbumHeaderFallback() {
     <div className="w-full px-8 py-6 bg-muted-foreground flex gap-4 bg-gradient-to-b from-white/50 to-white/50 dark:from-black/50 dark:to-black/50">
       <Skeleton className="rounded shadow-lg w-[200px] h-[200px] min-w-[200px] min-h-[200px] 2xl:w-[250px] 2xl:h-[250px] 2xl:min-w-[250px] 2xl:min-h-[250px] aspect-square" />
       <div className="flex flex-col justify-end">
-        <Skeleton className="h-[20px] w-16 mb-2" />
-        <Skeleton className="h-12 w-[260px] mb-2" />
+        <Skeleton className="h-[20px] w-16 mb-4" />
+        <Skeleton className="h-12 w-[260px] mb-4" />
+        <Skeleton className="h-5 w-[340px] mb-1" />
 
         <div className="flex gap-2 mt-2">
           <Skeleton className="h-[22px] w-12 rounded-full" />

src/app/components/fallbacks/song-fallbacks.tsx

@@ -3,7 +3,7 @@ import { ShadowHeaderFallback } from '@/app/components/fallbacks/ui-fallbacks'
 import ListWrapper from '@/app/components/list-wrapper'
 import { Skeleton } from '@/app/components/ui/skeleton'
 
-export function SongsListFallback() {
+export function SongListFallback() {
   return (
     <div className="w-full h-full">
       <ShadowHeaderFallback />
@@ -18,3 +18,13 @@ export function SongsListFallback() {
     </div>
   )
 }
+
+export function InfinitySongListFallback() {
+  return (
+    <div className="w-full h-full">
+      <ShadowHeaderFallback />
+
+      <TableFallback variant="modern" length={20} type="infinity" />
+    </div>
+  )
+}

src/app/components/fallbacks/table-fallbacks.tsx

@@ -3,11 +3,18 @@ import { Skeleton } from '@/app/components/ui/skeleton'
 
 interface TableFallbackProps {
   variant?: 'classic' | 'modern'
+  type?: 'regular' | 'infinity'
+  length?: number
 }
 
-export function TableFallback({ variant = 'classic' }: TableFallbackProps) {
+export function TableFallback({
+  variant = 'classic',
+  type = 'regular',
+  length = 10,
+}: TableFallbackProps) {
   const isClassic = variant === 'classic'
   const isModern = variant === 'modern'
+  const isRegular = type === 'regular'
 
   return (
     <div
@@ -19,8 +26,10 @@ export function TableFallback({ variant = 'classic' }: TableFallbackProps) {
     >
       <div
         className={clsx(
-          'grid grid-cols-table-fallback px-2 h-12 items-center',
-          isModern && 'mb-2 border-b',
+          'grid grid-cols-table-fallback px-2 items-center',
+          isModern && 'border-b',
+          isModern && isRegular && 'mb-2',
+          isRegular ? 'h-12' : 'h-[41px]',
         )}
       >
         <Skeleton className="w-5 h-5 ml-2" />
@@ -32,7 +41,7 @@ export function TableFallback({ variant = 'classic' }: TableFallbackProps) {
         <Skeleton className="w-12 h-5" />
         <Skeleton className="w-5 h-5 ml-auto mr-2" />
       </div>
-      {Array.from({ length: 10 }).map((_, index) => (
+      {Array.from({ length }).map((_, index) => (
         <div
           key={index}
           className={clsx(

src/app/components/fullscreen/controls.tsx

@@ -8,18 +8,20 @@ import {
   SkipForward,
 } from 'lucide-react'
 import { Fragment } from 'react/jsx-runtime'
+import RepeatOne from '@/app/components/icons/repeat-one'
 import { Button } from '@/app/components/ui/button'
 import {
   usePlayerActions,
   usePlayerIsPlaying,
   usePlayerLoop,
   usePlayerShuffle,
 } from '@/store/player.store'
+import { LoopState } from '@/types/playerContext'
 
 export function FullscreenControls() {
   const isPlaying = usePlayerIsPlaying()
   const isShuffleActive = usePlayerShuffle()
-  const isLoopActive = usePlayerLoop()
+  const loopState = usePlayerLoop()
   const {
     isPlayingOneSong,
     toggleShuffle,
@@ -76,7 +78,7 @@ export function FullscreenControls() {
         variant="ghost"
         className={buttonsStyle.secondary}
         onClick={() => playNextSong()}
-        disabled={!hasNextSong()}
+        disabled={!hasNextSong() && loopState !== LoopState.All}
       >
         <SkipForward className={buttonsStyle.secondaryIconFilled} />
       </Button>
@@ -85,16 +87,23 @@ export function FullscreenControls() {
         variant="ghost"
         className={clsx(
           buttonsStyle.secondary,
-          isLoopActive && buttonsStyle.activeDot,
+          loopState !== LoopState.Off && buttonsStyle.activeDot,
         )}
         onClick={() => toggleLoop()}
       >
-        <Repeat
-          className={clsx(
-            buttonsStyle.secondaryIcon,
-            isLoopActive && 'text-primary',
-          )}
-        />
+        {loopState === LoopState.Off && (
+          <Repeat className={clsx(buttonsStyle.secondaryIcon)} />
+        )}
+        {loopState === LoopState.All && (
+          <Repeat
+            className={clsx(buttonsStyle.secondaryIcon, 'text-primary')}
+          />
+        )}
+        {loopState === LoopState.One && (
+          <RepeatOne
+            className={clsx(buttonsStyle.secondaryIcon, 'text-primary')}
+          />
+        )}
       </Button>
     </Fragment>
   )

src/app/components/icons/repeat-one.tsx

@@ -0,0 +1,34 @@
+import { SVGProps } from 'react'
+
+export default function RepeatOne(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        d="M17 2l4 4-4 4"
+        strokeWidth={props.strokeWidth ?? 2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 11v-1a4 4 0 014-4h14M7 22l-4-4 4-4"
+        strokeWidth={props.strokeWidth ?? 2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 13v1a4 4 0 01-4 4H3M10 10l2-1v6"
+        strokeWidth={props.strokeWidth ?? 2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

src/app/components/player/controls.tsx

@@ -10,6 +10,7 @@ import {
 import { useEffect } from 'react'
 import { type HotkeyCallback, type Keys, useHotkeys } from 'react-hotkeys-hook'
 import { useTranslation } from 'react-i18next'
+import RepeatOne from '@/app/components/icons/repeat-one'
 import { Button } from '@/app/components/ui/button'
 import { SimpleTooltip } from '@/app/components/ui/simple-tooltip'
 import {
@@ -20,6 +21,7 @@ import {
   usePlayerMediaType,
   usePlayerShuffle,
 } from '@/store/player.store'
+import { LoopState } from '@/types/playerContext'
 import { Radio } from '@/types/responses/radios'
 import { ISong } from '@/types/responses/song'
 import { manageMediaSession } from '@/utils/setMediaSession'
@@ -33,7 +35,7 @@ export function PlayerControls({ song, radio }: PlayerControlsProps) {
   const { t } = useTranslation()
   const mediaType = usePlayerMediaType()
   const isShuffleActive = usePlayerShuffle()
-  const isLoopActive = usePlayerLoop()
+  const loopState = usePlayerLoop()
   const isPlaying = usePlayerIsPlaying()
   const {
     isPlayingOneSong,
@@ -74,9 +76,15 @@ export function PlayerControls({ song, radio }: PlayerControlsProps) {
   const playTooltip = isPlaying
     ? t('player.tooltips.pause')
     : t('player.tooltips.play')
-  const repeatTooltip = isLoopActive
-    ? t('player.tooltips.repeat.disable')
-    : t('player.tooltips.repeat.enable')
+
+  const repeatTooltips = {
+    0: t('player.tooltips.repeat.enable'),
+    1: t('player.tooltips.repeat.enableOne'),
+    2: t('player.tooltips.repeat.disable'),
+  }
+  const repeatTooltip = repeatTooltips[loopState]
+
+  const cannotGotoNextSong = !hasNextSong() && loopState !== LoopState.All
 
   return (
     <div className="flex w-full gap-1 justify-center items-center mb-1">
@@ -130,7 +138,7 @@ export function PlayerControls({ song, radio }: PlayerControlsProps) {
         <Button
           variant="ghost"
           className="rounded-full w-10 h-10 p-3"
-          disabled={(!song && !radio) || !hasNextSong()}
+          disabled={(!song && !radio) || cannotGotoNextSong}
           onClick={playNextSong}
           data-testid="player-button-next"
         >
@@ -144,15 +152,19 @@ export function PlayerControls({ song, radio }: PlayerControlsProps) {
             variant="ghost"
             className={clsx(
               'relative rounded-full w-10 h-10 p-3',
-              isLoopActive && 'player-button-active',
+              loopState !== LoopState.Off && 'player-button-active',
             )}
             disabled={!song}
             onClick={toggleLoop}
             data-testid="player-button-loop"
           >
-            <Repeat
-              className={clsx('w-10 h-10', isLoopActive && 'text-primary')}
-            />
+            {loopState === LoopState.Off && <Repeat className="w-10 h-10" />}
+            {loopState === LoopState.All && (
+              <Repeat className="w-10 h-10 text-primary" />
+            )}
+            {loopState === LoopState.One && (
+              <RepeatOne className="w-10 h-10 text-primary" />
+            )}
           </Button>
         </SimpleTooltip>
       )}