Skip to content

Commit 093aab5

Browse files
devnamdev2003devnamdev2003
committed
update
1 parent cae0d2c commit 093aab5

3 files changed

Lines changed: 42 additions & 35 deletions

File tree

‎src/app/features/music/music.component.css‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,3 @@
1-
/* CSS Variables for Theming (Adapts to Light/Dark mode gracefully) */
2-
:root {
3-
--color-bg: #0f172a;
4-
--color-surface: #1e293b;
5-
--color-text: #f8fafc;
6-
--theme-color: #3b82f6;
7-
--theme-color-rgb: 59, 130, 246;
8-
--list-hover: rgba(255, 255, 255, 0.05);
9-
--input-bg: rgba(255, 255, 255, 0.05);
10-
--input-text: #f8fafc;
11-
}
12-
13-
@media (prefers-color-scheme: light) {
14-
:root {
15-
--color-bg: #f8fafc;
16-
--color-surface: #ffffff;
17-
--color-text: #0f172a;
18-
--list-hover: rgba(0, 0, 0, 0.03);
19-
--input-bg: #e2e8f0;
20-
--input-text: #0f172a;
21-
}
22-
}
23-
241
/* Custom Slider Styling */
252
.custom-slider {
263
-webkit-appearance: none;

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<!-- Sticky Search Input with Glassmorphism -->
55
<header
6-
class="sticky top-0 z-20 backdrop-blur-xl bg-[var(--color-bg)]/80 border-b border-gray-200/10 shadow-sm px-4 py-4 transition-all duration-300">
6+
class="sticky top-0 z-20 backdrop-blur-xl bg-[var(--color-bg)]/80 border-b border-gray-200/10 shadow-sm px-2 py-4 transition-all duration-300">
77
<div class="max-w-xl mx-auto flex items-center gap-3 relative group">
88

99
<div class="relative w-full flex-1">
@@ -19,10 +19,15 @@
1919
(selectstart)="$event.preventDefault()" />
2020
</div>
2121

22-
<button (click)="searchSong()"
22+
<button (click)="searchSong()" title="Search songs"
2323
class="bg-gradient-to-r from-[var(--theme-color)] to-blue-500 text-white px-6 py-3 rounded-full shadow-lg hover:shadow-[var(--theme-color)]/30 hover:-translate-y-0.5 active:scale-95 transition-all duration-300 font-medium">
2424
Search
2525
</button>
26+
27+
<button (click)="showLikedSongs()" title="View liked songs"
28+
class="bg-[var(--color-surface)] px-4 py-3 rounded-full border border-white/10 hover:bg-[var(--list-hover)] transition">
29+
❤️
30+
</button>
2631
</div>
2732
</header>
2833

@@ -36,7 +41,7 @@
3641
<p class="text-lg">Search for a track to get started</p>
3742
</div>
3843

39-
<div *ngFor="let song of songs()"
44+
<div *ngFor="let song of songs()" title="Play {{ song.name }}"
4045
class="group flex items-center gap-4 p-3 rounded-2xl bg-transparent hover:bg-[var(--list-hover)] border border-transparent hover:border-white/5 transition-all duration-300 cursor-pointer transform hover:-translate-y-1"
4146
(click)="playSong(getSongUrl(song), song)">
4247

@@ -115,7 +120,8 @@ <h4 class="font-semibold truncate text-[var(--color-text)]">{{ currentSong.name
115120

116121
<!-- Quick Controls -->
117122
<div class="flex items-center gap-1 shrink-0" (click)="$event.stopPropagation()">
118-
<button (click)="toggleLike()" class="p-2.5 rounded-full hover:bg-white/5 active:scale-90 transition-all">
123+
<button (click)="toggleLike()" title="Like / Unlike"
124+
class="p-2.5 rounded-full hover:bg-white/5 active:scale-90 transition-all">
119125
<svg class="w-5 h-5 transition-colors"
120126
[ngClass]="isSongLiked() ? 'text-red-500 fill-current' : 'text-gray-400'" viewBox="0 0 24 24" fill="none"
121127
stroke="currentColor" stroke-width="2">
@@ -124,7 +130,7 @@ <h4 class="font-semibold truncate text-[var(--color-text)]">{{ currentSong.name
124130
</svg>
125131
</button>
126132

127-
<button (click)="playSong(currentSong.url, currentSong, true)"
133+
<button (click)="playSong(currentSong.url, currentSong, true)" title="Play / Pause"
128134
class="w-10 h-10 flex items-center justify-center rounded-full bg-[var(--theme-color)] text-white shadow hover:scale-105 active:scale-95 transition-all">
129135
<svg *ngIf="audio?.paused; else playingIconMini" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
130136
<path d="M8 5v14l11-7z" />
@@ -136,7 +142,7 @@ <h4 class="font-semibold truncate text-[var(--color-text)]">{{ currentSong.name
136142
</ng-template>
137143
</button>
138144

139-
<button (click)="nextSong()"
145+
<button (click)="nextSong()" title="Next song"
140146
class="p-2.5 rounded-full hover:bg-white/5 active:scale-90 transition-all text-gray-400 hover:text-[var(--color-text)]">
141147
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
142148
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
@@ -167,7 +173,8 @@ <h4 class="font-semibold truncate text-[var(--color-text)]">{{ currentSong.name
167173

168174
<!-- Modal Header -->
169175
<div class="flex justify-between items-center py-4">
170-
<button (click)="closePlayerModal()" class="p-3 rounded-full hover:bg-white/10 active:scale-90 transition-all">
176+
<button (click)="closePlayerModal()" title="Close player"
177+
class="p-3 rounded-full hover:bg-white/10 active:scale-90 transition-all">
171178
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
172179
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
173180
</svg>
@@ -225,16 +232,16 @@ <h2 class="text-3xl font-bold truncate text-[var(--color-text)] tracking-tight">
225232

226233
<!-- Media Controls -->
227234
<div class="flex items-center justify-between px-2">
228-
<button (click)="downloadSong(currentSong)"
229-
class="p-3 text-gray-400 hover:text-white transition-colors active:scale-90">
235+
<button (click)="downloadSong(currentSong)" title="Download song"
236+
class="p-3 text-gray-400 transition-colors active:scale-90">
230237
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
231238
<path stroke-linecap="round" stroke-linejoin="round"
232239
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
233240
</svg>
234241
</button>
235242

236243
<div class="flex items-center gap-6">
237-
<button (click)="restartSong()"
244+
<button (click)="restartSong()" title="Restart song"
238245
class="p-4 rounded-full hover:bg-white/10 active:scale-90 transition-all text-[var(--color-text)]">
239246
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
240247
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
@@ -253,15 +260,16 @@ <h2 class="text-3xl font-bold truncate text-[var(--color-text)] tracking-tight">
253260
</ng-template>
254261
</button>
255262

256-
<button (click)="nextSong()"
263+
<button (click)="nextSong()" title="Next song"
257264
class="p-4 rounded-full hover:bg-white/10 active:scale-90 transition-all text-[var(--color-text)]">
258265
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
259266
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
260267
</svg>
261268
</button>
262269
</div>
263270

264-
<button (click)="toggleLike()" class="p-3 hover:bg-white/10 rounded-full transition-all active:scale-90">
271+
<button (click)="toggleLike()" title="Like / Unlike"
272+
class="p-3 hover:bg-white/10 rounded-full transition-all active:scale-90">
265273
<svg class="w-6 h-6 transition-colors"
266274
[ngClass]="isSongLiked() ? 'text-red-500 fill-current drop-shadow-md' : 'text-gray-400'"
267275
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,11 +209,14 @@ export class MusicComponent implements OnDestroy {
209209
this.removeFocus();
210210
if (this.isCurrentSongLiked) {
211211
this.userLikedSongsService.delete(this.currentSong.id);
212+
this
212213
this.isCurrentSongLiked = false;
213214
} else {
214215
this.userLikedSongsService.add(this.transformSongDataForAPI(this.currentSong));
215216
this.isCurrentSongLiked = true;
216217
}
218+
this.updateLikedSongList();
219+
217220
}
218221

219222
transformSongDataForAPI(data: any): any {
@@ -287,4 +290,23 @@ export class MusicComponent implements OnDestroy {
287290
removeFocus() {
288291
this.searchSongInput?.nativeElement?.blur();
289292
}
293+
294+
showLikedSongs() {
295+
this.removeFocus();
296+
this.updateLikedSongList();
297+
}
298+
299+
updateLikedSongList() {
300+
const liked = this.userLikedSongsService.getAll() || [];
301+
const mappedSongs = liked.map(song => ({
302+
id: song.song_id,
303+
name: song.song_name,
304+
duration: song.duration,
305+
image: [{}, {}, { url: song.image }],
306+
artists: { primary: [{ name: song.artistName }] },
307+
downloadUrl: [{ quality: '320kbps', url: song.downloadUrl }]
308+
}));
309+
310+
this.songs.set(mappedSongs);
311+
}
290312
}

0 commit comments

Comments
 (0)