update

Author: devnamdev2003

src/app/features/music/music.component.html

@@ -27,7 +27,7 @@
   </header>
 
   <!-- Songs List -->
-  <main class="max-w-xl mx-auto px-4 py-6 flex flex-col gap-2">
+  <main class="max-w-xl mx-auto px-2 py-2 flex flex-col gap-2">
     <div *ngIf="songs().length === 0" class="flex flex-col items-center justify-center py-20 opacity-50">
       <svg class="w-16 h-16 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
@@ -167,13 +167,27 @@ <h4 class="font-semibold truncate text-[var(--color-text)]">{{ currentSong.name
 
       <!-- Modal Header -->
       <div class="flex justify-between items-center py-4">
-        <button (click)="closePlayerModal()"
-          class="p-3 rounded-full hover:bg-white/10 active:scale-90 transition-all text-[var(--color-text)]">
+        <button (click)="closePlayerModal()" class="p-3 rounded-full hover:bg-white/10 active:scale-90 transition-all">
+          <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+
+        <span class="text-xs font-bold tracking-[0.2em] uppercase text-gray-400">
+          Now Playing
+        </span>
+
+        <!-- ⭐ Repeat Button -->
+        <button (click)="repeatCurrentSong = !repeatCurrentSong"
+          class="p-3 rounded-full hover:bg-white/10 active:scale-90 transition-all"
+          [ngClass]="repeatCurrentSong ? 'text-[var(--theme-color)]' : 'text-gray-400'" title="Repeat current song">
+
           <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3" />
           </svg>
+
         </button>
-        <span class="text-xs font-bold tracking-[0.2em] uppercase text-gray-400">Now Playing</span>
       </div>
 
       <!-- Large Album Art -->
@@ -247,8 +261,8 @@ <h2 class="text-3xl font-bold truncate text-[var(--color-text)] tracking-tight">
             </button>
           </div>
 
-          <button (click)="toggleLike()" class="p-4 hover:bg-white/10 rounded-full transition-all active:scale-90">
-            <svg class="w-8 h-8 transition-colors"
+          <button (click)="toggleLike()" class="p-3 hover:bg-white/10 rounded-full transition-all active:scale-90">
+            <svg class="w-6 h-6 transition-colors"
               [ngClass]="isSongLiked() ? 'text-red-500 fill-current drop-shadow-md' : 'text-gray-400'"
               viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round"

src/app/features/music/music.component.ts

@@ -28,6 +28,7 @@ export class MusicComponent implements OnDestroy {
   showPlayerModal = false;
   likedPlaylist: any[] = [];
   currentLikedIndex = -1;
+  repeatCurrentSong = false;
 
   @ViewChild('searchSongInput') searchSongInput!: ElementRef;
 
@@ -95,7 +96,10 @@ export class MusicComponent implements OnDestroy {
 
   onSongFinished(): void {
     if (!this.isBrowser) return;
-
+    if (this.repeatCurrentSong && this.currentSong?.url) {
+      this.playSong(this.currentSong.url, this.currentSong);
+      return;
+    }
     this.likedPlaylist = this.userLikedSongsService.getAll() || [];
 
     if (!this.likedPlaylist.length) return;