Skip to content

Commit ca9af44

Browse files
devnamdev2003devnamdev2003
committed
add model for music
1 parent 526e3b1 commit ca9af44

4 files changed

Lines changed: 110 additions & 18 deletions

File tree

‎src/app/component/form-model/form-model.component.html‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
1-
<div class="fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center">
2-
<div class="bg-[var(--color-bg)] p-6 rounded-xl w-11/12 md:w-1/2 max-h-[70vh] flex flex-col shadow-xl">
3-
<div class="flex justify-between items-center mb-3">
1+
<div class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center" [ngStyle]="{ 'z-index': '99'}">
2+
<div class="bg-[var(--color-bg)] p-6 rounded-xl w-11/12 md:w-1/2 flex flex-col shadow-xl relative">
3+
4+
<!-- Header with dynamic text alignment -->
5+
<div class="mb-3" [ngClass]="{
6+
'text-left': labelAlignment === 'left',
7+
'text-center': labelAlignment === 'center',
8+
'text-right': labelAlignment === 'right'
9+
}">
410
<h2 class="text-lg font-bold text-[var(--color-text)]">
511
{{ label }}
612
</h2>
7-
<button (click)="closeModel()" class="text-[var(--color-red)] font-bold text-xl">&times;</button>
813
</div>
14+
15+
<!-- Close Button (absolute top-right) -->
16+
<button (click)="closeModel()" class="absolute top-4 right-4 text-[var(--color-red)] font-bold text-xl">
17+
&times;
18+
</button>
19+
920
<ng-content></ng-content>
1021
</div>
1122
</div>

‎src/app/component/form-model/form-model.component.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { CommonModule } from '@angular/common';
12
import { Component, EventEmitter, Input, Output } from '@angular/core';
23

34
/**
@@ -8,7 +9,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
89
*/
910
@Component({
1011
selector: 'app-form-model',
11-
imports: [],
12+
imports: [CommonModule],
1213
templateUrl: './form-model.component.html',
1314
styleUrl: './form-model.component.css'
1415
})
@@ -19,7 +20,13 @@ export class FormModelComponent {
1920
*
2021
* This property should be provided by the parent component.
2122
*/
22-
@Input() label!: string;
23+
@Input() label: string = '';
24+
25+
/** Alignment of the label text: 'left', 'center', or 'right'.
26+
*
27+
* Default is 'left'.
28+
*/
29+
@Input() labelAlignment: 'left' | 'center' | 'right' = 'left';
2330

2431
/**
2532
* Event emitted when the modal is closed.

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

Lines changed: 70 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,17 @@
4141

4242
<!-- Bottom Audio Bar -->
4343
<div *ngIf="currentSong"
44-
class="max-w-xl mx-auto fixed bottom-0 left-0 right-0 shadow-lg py-4 px-2 flex items-center gap-4 z-20"
45-
[ngStyle]="{'background-color': 'var(--color-surface)', 'color': 'var(--color-text)', 'z-index': '99'}">
44+
class="max-w-xl mx-auto fixed bottom-0 left-0 right-0 shadow-lg py-4 px-2 flex items-center gap-4 cursor-pointer"
45+
[ngStyle]="{'background-color': 'var(--color-surface)', 'color': 'var(--color-text)', 'z-index': '70'}">
4646

4747
<!-- Song Image -->
48-
<img [src]="currentSong.image?.[2]?.url || 'https://via.placeholder.com/50'" alt="Cover"
48+
<img (click)="openPlayerModal()" [src]="currentSong.image?.[2]?.url || 'https://via.placeholder.com/50'" alt="Cover"
4949
class="w-12 h-12 rounded-md shadow-md shrink-0" />
5050

5151
<!-- Song Info + Progress -->
5252
<div class="flex-1 flex flex-col overflow-hidden">
53-
<!-- Top Row: Title + Artist + Time + Play -->
5453
<div class="flex items-center justify-between gap-2">
55-
<div class="overflow-hidden">
54+
<div class="overflow-hidden" (click)="openPlayerModal()">
5655
<div class="font-medium truncate">{{ currentSong.name }}</div>
5756
<div class="text-sm text-gray-500 dark:text-gray-400 truncate">
5857
{{ currentSong.artists.primary[0]?.name || 'Unknown Artist' }}
@@ -65,7 +64,7 @@
6564
</div>
6665

6766
<!-- Play/Pause Button -->
68-
<button (click)="playSong(currentSong.url, currentSong)"
67+
<button (click)="playSong(currentSong.url, currentSong); $event.stopPropagation();"
6968
class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--list-hover)] active:scale-90 transition-transform">
7069
<img
7170
[src]="audio?.paused ? 'assets/img/music_icon/icons8-play-50.png' : 'assets/img/music_icon/icons8-pause-50.png'"
@@ -75,30 +74,90 @@
7574
</button>
7675

7776
<!-- Like Button -->
78-
<button (click)="toggleLike()"
77+
<button (click)="toggleLike(); $event.stopPropagation();"
7978
class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--list-hover)] active:scale-90 transition-transform">
8079
<img
8180
[src]="isLiked() ? 'assets/img/music_icon/icons8-love-fill-48.png' : 'assets/img/music_icon/icons8-love-48.png'"
8281
alt="Like" class="w-6 h-6 object-contain transition-transform duration-300 ease-in-out"
8382
[style]="isLiked() ? 'filter: var(--icon-color1);' : 'filter: var(--icon-color2);'" />
8483
</button>
8584

86-
<button (click)="downloadSong(currentSong)"
85+
<!-- Download Button -->
86+
<button (click)="downloadSong(currentSong); $event.stopPropagation();"
8787
class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--list-hover)] active:scale-90 transition-transform">
88-
<img src="assets/img/music_icon/icons8-download-48.png" alt="Download"
88+
<img src="assets/img/music_icon/icons8-download-48.png" alt="Download"
8989
class="w-6 h-6 object-contain transition-transform duration-300 ease-in-out"
9090
style="filter: var(--icon-color2);" />
9191
</button>
9292
</div>
9393
</div>
9494

9595
<!-- Progress Bar -->
96-
<input type="range" min="0" [max]="duration()" [value]="progress()" (input)="onSeek($event)"
96+
<input type="range" min="0" [max]="duration()" [value]="progress()"
97+
(input)="onSeek($event); $event.stopPropagation();"
9798
class="w-full mt-2 mb-2 h-1 rounded accent-[var(--theme-color)] cursor-pointer"
9899
[ngStyle]="{'background-color': 'var(--input-border)', 'accent-color': 'var(--theme-color)'}" />
99100
</div>
100101
</div>
101102

102103
<footer class="fixed bottom-0 left-0 w-full bg-[var(--color-surface)] text-center text-sm py-2 z-50 text-muted">
103104
© 2025 exwise. All rights reserved. v{{appVersion}}
104-
</footer>
105+
</footer>
106+
107+
<app-form-model *ngIf="showPlayerModal" [label]="''" (close)="closePlayerModal()"
108+
[labelAlignment]="'center'">
109+
110+
<div
111+
class="flex flex-col items-center justify-between w-full bg-[var(--color-bg)] rounded-2xl shadow-xl max-w-md mx-auto"
112+
[ngStyle]="{'z-index': '199'}">
113+
<!-- Cover Image -->
114+
<img [src]="currentSong.image?.[2]?.url || 'https://via.placeholder.com/200'"
115+
class="w-48 h-48 md:w-56 md:h-56 rounded-2xl shadow-lg object-cover mb-5" />
116+
117+
<!-- Song Info -->
118+
<div class="text-center mb-6 w-full">
119+
<h2 class="text-xl md:text-2xl font-semibold text-[var(--color-text)] truncate">
120+
{{ currentSong.name }}
121+
</h2>
122+
<p class="text-sm text-gray-500 dark:text-gray-400 truncate mt-1">
123+
{{ currentSong.artists.primary[0]?.name || 'Unknown Artist' }}
124+
</p>
125+
</div>
126+
127+
<!-- Progress Bar + Time -->
128+
<div class="w-full mb-4">
129+
<input type="range" min="0" [max]="duration()" [value]="progress()" (input)="onSeek($event)"
130+
class="w-full h-2 rounded-lg accent-[var(--theme-color)] cursor-pointer" />
131+
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1 px-1">
132+
<span>{{ formatTime(progress()) }}</span>
133+
<span>{{ formatTime(duration()) }}</span>
134+
</div>
135+
</div>
136+
137+
<!-- Controls -->
138+
<div class="flex items-center justify-center gap-10 mt-2">
139+
<!-- Like -->
140+
<button (click)="toggleLike()" class="hover:scale-110 transition-transform">
141+
<img [src]="isLiked()
142+
? 'assets/img/music_icon/icons8-love-fill-48.png'
143+
: 'assets/img/music_icon/icons8-love-48.png'" class="w-8 h-8"
144+
[style]="isLiked() ? 'filter: var(--icon-color1);' : 'filter: var(--icon-color2);'" />
145+
</button>
146+
147+
<!-- Play/Pause (emphasized) -->
148+
<button (click)="playSong(currentSong.url, currentSong)"
149+
class="bg-[var(--theme-color)] p-4 rounded-full shadow-md hover:scale-110 transition-transform">
150+
<img [src]="audio?.paused
151+
? 'assets/img/music_icon/icons8-play-50.png'
152+
: 'assets/img/music_icon/icons8-pause-50.png'" class="w-8 h-8" style="filter: var(--icon-color2);" />
153+
</button>
154+
155+
<!-- Download -->
156+
<button (click)="downloadSong(currentSong)" class="hover:scale-110 transition-transform">
157+
<img src="assets/img/music_icon/icons8-download-48.png" alt="Download"
158+
class="w-6 h-6 object-contain transition-transform duration-300 ease-in-out"
159+
style="filter: var(--icon-color2);" />
160+
</button>
161+
</div>
162+
</div>
163+
</app-form-model>

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
44
import { SaavnService } from '../../service/saavan-api/saavan.service';
55
import { ConfigService } from '../../service/config/config.service';
66
import { isPlatformBrowser } from '@angular/common';
7+
import { FormModelComponent } from '../../component/form-model/form-model.component';
78

89
/**
910
* Component to search, play, and suggest songs using Saavn API and AI suggestions.
@@ -17,7 +18,7 @@ import { isPlatformBrowser } from '@angular/common';
1718
@Component({
1819
selector: 'app-music',
1920
standalone: true,
20-
imports: [CommonModule, FormsModule],
21+
imports: [CommonModule, FormsModule, FormModelComponent],
2122
templateUrl: './music.component.html',
2223
styleUrls: ['./music.component.css']
2324
})
@@ -258,4 +259,18 @@ export class MusicComponent implements OnDestroy {
258259
console.error('Download failed:', err);
259260
}
260261
}
262+
263+
/** Flag to show/hide the player modal */
264+
showPlayerModal = false;
265+
266+
/** Open the player modal */
267+
openPlayerModal() {
268+
this.showPlayerModal = true;
269+
}
270+
271+
/** Close the player modal */
272+
closePlayerModal() {
273+
this.showPlayerModal = false;
274+
}
275+
261276
}

0 commit comments

Comments
 (0)