Skip to content

Commit 25dbf3c

Browse files
vmudigalvmudigal
committed
Implemented issues:
Streaming audio urls #15 require play, pause and stop events #40 Volume control for adjusting volume levels #48 track ended event returns only an "ended" string #99 Add play, pause and stop actions #105 require play and pause events #123 Added button types so they can't interfer with form submits. Update ngx-audio-player.component.html #125 Please provide option to Stop Repeating. #124 Provide next() and previous() event emitters #130 Commits merged: c018bda ed0037d 754de32 ec54eb1
1 parent 52aa7bc commit 25dbf3c

17 files changed

+1636
-441
lines changed

‎README.md

+302-54
Large diffs are not rendered by default.

‎docs/images/advanced-player.png

49.1 KB
Loading

‎projects/ngx-audio-player/README.md

+302-54
Large diffs are not rendered by default.

‎projects/ngx-audio-player/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-audio-player",
3-
"version": "12.0.0",
3+
"version": "12.0.1",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/mudigal-technologies/ngx-audio-player.git"
@@ -47,4 +47,4 @@
4747
"dependencies": {
4848
"tslib": "^2.0.0"
4949
}
50-
}
50+
}

‎projects/ngx-audio-player/src/lib/component/ngx-audio-player/ngx-audio-player.component.css

+116-26
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
mat-card, mat-slider {
2-
padding: 0!important;
1+
mat-card,
2+
mat-slider {
3+
padding: 0 !important;
34
}
45

5-
button:hover, button:focus {
6-
outline: 0px!important;
6+
button:hover,
7+
button:focus {
8+
outline: 0px !important;
79
}
810

911
svg {
1012
vertical-align: top;
1113
}
1214

1315
.mat-icon {
14-
height: 32px! important;
15-
width: 32px! important;
16+
height: 32px ! important;
17+
width: 32px ! important;
1618
}
1719

18-
mat-icon > .currently-playing {
19-
height: 16px! important;
20-
width: 16px! important;
20+
mat-icon>.currently-playing {
21+
height: 16px ! important;
22+
width: 16px ! important;
2123
}
2224

2325
table {
@@ -37,37 +39,108 @@ table {
3739
} */
3840

3941
::ng-deep .mat-paginator-container {
40-
justify-content: space-between!important;
42+
justify-content: space-between !important;
4143
}
4244

4345
.material-icons {
44-
font-size: 16px! important;
46+
font-size: 16px ! important;
4547
}
4648

4749
.play-pause {
48-
border-left: 1px solid rgba(0,0,0,.1);
49-
border-right: 1px solid rgba(0,0,0,.1);
50+
border-left: 1px solid rgba(0, 0, 0, .1);
51+
border-right: 1px solid rgba(0, 0, 0, .1);
5052
}
5153

5254
.volume {
53-
border-left: 1px solid rgba(0,0,0,.1);
55+
border-left: 1px solid rgba(0, 0, 0, .1);
5456
}
5557

5658
.skip-next {
57-
border-right: 1px solid rgba(0,0,0,.1);
59+
border-right: 1px solid rgba(0, 0, 0, .1);
5860
}
5961

60-
/* Removal of bootstrap */
62+
/* Removal of bootstrap */
6163

62-
*, ::after, ::before {
64+
*,
65+
::after,
66+
::before {
6367
box-sizing: inherit;
6468
}
6569

6670
.ngx-p-1 {
6771
padding: .25rem !important;
6872
}
6973

70-
.ngx-col, .ngx-col-1, .ngx-col-10, .ngx-col-11, .ngx-col-12, .ngx-col-2, .ngx-col-3, .ngx-col-4, .ngx-col-5, .ngx-col-6, .ngx-col-7, .ngx-col-8, .ngx-col-9, .ngx-col-auto, .ngx-col-lg, .ngx-col-lg-1, .ngx-col-lg-10, .ngx-col-lg-11, .ngx-col-lg-12, .ngx-col-lg-2, .ngx-col-lg-3, .ngx-col-lg-4, .ngx-col-lg-5, .ngx-col-lg-6, .ngx-col-lg-7, .ngx-col-lg-8, .ngx-col-lg-9, .ngx-col-lg-auto, .ngx-col-md, .ngx-col-md-1, .ngx-col-md-10, .ngx-col-md-11, .ngx-col-md-12, .ngx-col-md-2, .ngx-col-md-3, .ngx-col-md-4, .ngx-col-md-5, .ngx-col-md-6, .ngx-col-md-7, .ngx-col-md-8, .ngx-col-md-9, .ngx-col-md-auto, .ngx-col-sm, .ngx-col-sm-1, .ngx-col-sm-10, .ngx-col-sm-11, .ngx-col-sm-12, .ngx-col-sm-2, .ngx-col-sm-3, .ngx-col-sm-4, .ngx-col-sm-5, .ngx-col-sm-6, .ngx-col-sm-7, .ngx-col-sm-8, .ngx-col-sm-9, .ngx-col-sm-auto, .ngx-col-xl, .ngx-col-xl-1, .ngx-col-xl-10, .ngx-col-xl-11, .ngx-col-xl-12, .ngx-col-xl-2, .ngx-col-xl-3, .ngx-col-xl-4, .ngx-col-xl-5, .ngx-col-xl-6, .ngx-col-xl-7, .ngx-col-xl-8, .ngx-col-xl-9, .ngx-col-xl-auto {
74+
.ngx-col,
75+
.ngx-col-1,
76+
.ngx-col-10,
77+
.ngx-col-11,
78+
.ngx-col-12,
79+
.ngx-col-2,
80+
.ngx-col-3,
81+
.ngx-col-4,
82+
.ngx-col-5,
83+
.ngx-col-6,
84+
.ngx-col-7,
85+
.ngx-col-8,
86+
.ngx-col-9,
87+
.ngx-col-auto,
88+
.ngx-col-lg,
89+
.ngx-col-lg-1,
90+
.ngx-col-lg-10,
91+
.ngx-col-lg-11,
92+
.ngx-col-lg-12,
93+
.ngx-col-lg-2,
94+
.ngx-col-lg-3,
95+
.ngx-col-lg-4,
96+
.ngx-col-lg-5,
97+
.ngx-col-lg-6,
98+
.ngx-col-lg-7,
99+
.ngx-col-lg-8,
100+
.ngx-col-lg-9,
101+
.ngx-col-lg-auto,
102+
.ngx-col-md,
103+
.ngx-col-md-1,
104+
.ngx-col-md-10,
105+
.ngx-col-md-11,
106+
.ngx-col-md-12,
107+
.ngx-col-md-2,
108+
.ngx-col-md-3,
109+
.ngx-col-md-4,
110+
.ngx-col-md-5,
111+
.ngx-col-md-6,
112+
.ngx-col-md-7,
113+
.ngx-col-md-8,
114+
.ngx-col-md-9,
115+
.ngx-col-md-auto,
116+
.ngx-col-sm,
117+
.ngx-col-sm-1,
118+
.ngx-col-sm-10,
119+
.ngx-col-sm-11,
120+
.ngx-col-sm-12,
121+
.ngx-col-sm-2,
122+
.ngx-col-sm-3,
123+
.ngx-col-sm-4,
124+
.ngx-col-sm-5,
125+
.ngx-col-sm-6,
126+
.ngx-col-sm-7,
127+
.ngx-col-sm-8,
128+
.ngx-col-sm-9,
129+
.ngx-col-sm-auto,
130+
.ngx-col-xl,
131+
.ngx-col-xl-1,
132+
.ngx-col-xl-10,
133+
.ngx-col-xl-11,
134+
.ngx-col-xl-12,
135+
.ngx-col-xl-2,
136+
.ngx-col-xl-3,
137+
.ngx-col-xl-4,
138+
.ngx-col-xl-5,
139+
.ngx-col-xl-6,
140+
.ngx-col-xl-7,
141+
.ngx-col-xl-8,
142+
.ngx-col-xl-9,
143+
.ngx-col-xl-auto {
71144
position: relative;
72145
width: 100%;
73146
padding-right: 15px;
@@ -82,9 +155,10 @@ table {
82155
max-width: 100%;
83156
}
84157

85-
.ngx-justify-content-center {
158+
.ngx-content-center {
86159
-ms-flex-pack: center !important;
87160
justify-content: center !important;
161+
align-items: center !important;
88162
}
89163

90164
.ngx-flex-fill {
@@ -97,19 +171,35 @@ table {
97171
display: flex !important;
98172
}
99173

100-
.ngx-pb-3, .ngx-py-3 {
101-
padding-bottom: 1rem !important;
174+
.ngx-pb-3,
175+
.ngx-py-3 {
176+
padding-bottom: 0.5rem !important;
102177
}
103-
.ngx-pt-3, .ngx-py-3 {
104-
padding-top: 1rem !important;
178+
179+
.ngx-pt-3,
180+
.ngx-py-3 {
181+
padding-top: 0.5rem !important;
105182
}
106-
.ngx-pl-1, .ngx-px-1 {
183+
184+
.ngx-pl-1,
185+
.ngx-px-1 {
107186
padding-left: .25rem !important;
108187
}
109-
.ngx-pr-1, .ngx-px-1 {
188+
189+
.ngx-pr-1,
190+
.ngx-px-1 {
110191
padding-right: .25rem !important;
111192
}
112193

194+
.ngx-slider {
195+
min-width: 64px;
196+
}
197+
198+
.ngx-volume {
199+
height: 42px;
200+
margin-top: -6px;
201+
}
202+
113203
@media (max-width: 768px) {
114204
.ngx-sm-block {
115205
display: block !important;
@@ -118,4 +208,4 @@ table {
118208
.ngx-d-none {
119209
display: none !important;
120210
}
121-
}
211+
}

‎projects/ngx-audio-player/src/lib/component/ngx-audio-player/ngx-audio-player.component.html

+34-19
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<mat-card class="ngx-d-flex ngx-justify-content-center ngx-audio-player z-depth-1 mat-elevation-z2"
2-
style="margin: 0px;">
1+
<mat-card class="ngx-d-flex ngx-content-center ngx-audio-player z-depth-1 mat-elevation-z2" style="margin: 0px;">
32

43
<audio #audioPlayer [src]="tracks[currentIndex]?.link"></audio>
54

6-
<button *ngIf="tracks.length > 1" (click)='previousSong();' [disabled]="loaderDisplay" class="ngx-p-1" mat-button>
5+
<button type="button" *ngIf="tracks.length > 1" (click)='previousSong();' [disabled]="loaderDisplay" class="ngx-p-1"
6+
mat-button>
77
<mat-icon aria-hidden="true">
88
<!-- Skip previous icon (skip_previous) -->
99
<svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">
@@ -12,7 +12,7 @@
1212
</svg>
1313
</mat-icon>
1414
</button>
15-
<button (click)='playBtnHandler();' [disabled]="loaderDisplay" class="ngx-p-1 play-pause" mat-button>
15+
<button type="button" (click)='playBtnHandler();' [disabled]="loaderDisplay" class="ngx-p-1 play-pause" mat-button>
1616

1717
<svg *ngIf="loaderDisplay" height="34px" preserveAspectRatio="xMidYMid"
1818
style="margin: auto; display: block; shape-rendering: auto;" viewBox="0 0 100 100" width="34px"
@@ -106,8 +106,8 @@
106106
</svg>
107107
</mat-icon>
108108
</button>
109-
<button *ngIf="tracks.length > 1" (click)='nextSong();' [disabled]="loaderDisplay" class="ngx-p-1 skip-next"
110-
mat-button>
109+
<button type="button" *ngIf="tracks.length > 1" (click)='nextSong();' [disabled]="loaderDisplay"
110+
class="ngx-p-1 skip-next" mat-button>
111111
<mat-icon aria-hidden="true" class="next-track">
112112
<!-- Skip next icon (skip_next) -->
113113
<svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">
@@ -118,25 +118,33 @@
118118
</button>
119119

120120
<div class="ngx-col">
121-
<div class="ngx-d-flex ngx-flex-fill ngx-justify-content-center">
121+
<div class="ngx-d-flex ngx-flex-fill ngx-content-center">
122122
<div class="ngx-d-none ngx-d-sm-block ngx-py-3 ngx-px-1" style="font-size: 12px">
123123
<span *ngIf="duration !== 0.01">
124124
{{currentTime | secondsToMinutes}}
125125
</span>
126126
</div>
127-
<mat-slider [disabled]="disablePositionSlider" (change)="currTimePosChanged($event)" [min]="startOffset"
128-
class="ngx-d-none ngx-d-sm-block ngx-flex-fill ngx-p-1" max="{{duration-endOffset}}" style="width: 100%"
127+
128+
<mat-slider *ngIf="mediaType !== 'stream'" [disabled]="disablePositionSlider"
129+
(change)="currTimePosChanged($event)" [min]="startOffset"
130+
class="ngx-d-none ngx-d-sm-block ngx-flex-fill ngx-p-1 ngx-slider" max="{{duration-endOffset}}"
131+
style="width: 100%" value="{{currentTime}}"></mat-slider>
132+
<mat-slider *ngIf="mediaType === 'stream'" [disabled]="true" [min]="startOffset"
133+
class="ngx-d-none ngx-d-sm-block ngx-flex-fill ngx-p-1" max="{{currentTime}}" style="width: 100%"
129134
value="{{currentTime}}"></mat-slider>
130135

131136
<div class="ngx-py-3 ngx-px-1" style="font-size: 12px; text-align: right">
132-
<span *ngIf="duration !== 0.01">
137+
<span *ngIf="mediaType !== null && mediaType !== 'stream' && duration !== 0.01">
133138
-{{duration-currentTime | secondsToMinutes }}
134139
</span>
140+
<span *ngIf="mediaType === 'stream'">
141+
STREAM
142+
</span>
135143
</div>
136144
</div>
137145
</div>
138-
<button (click)='toggleRepeat();' *ngIf="displayRepeatControls" class="ngx-p-1 volume justify-content-center"
139-
mat-button>
146+
<button type="button" (click)='toggleRepeat();' *ngIf="displayRepeatControls"
147+
class="ngx-p-1 volume justify-content-center" mat-button>
140148
<mat-icon *ngIf="repeat === 'none'" aria-hidden="true" class="volume-mute justify-content-center">
141149
<!-- Repeat None -->
142150
<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
@@ -172,32 +180,39 @@
172180
</svg>
173181
</mat-icon>
174182
</button>
175-
<button (click)='toggleVolume();' *ngIf="displayVolumeControls" class="ngx-p-1 volume" mat-button>
176-
<mat-icon *ngIf="volume === 0" aria-hidden="true" class="volume-mute">
183+
<button type="button" *ngIf="displayVolumeControls" class="ngx-p-1 volume" mat-button>
184+
<mat-icon (click)='toggleVolume();' *ngIf="volume === 0" aria-hidden="true" class="volume-mute">
177185
<!-- Volume mute icon (volume_off) -->
178186
<svg height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg">
179187
<path
180188
d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
181189
<path d="M0 0h24v24H0z" fill="none" />
182190
</svg>
183191
</mat-icon>
184-
<mat-icon *ngIf="volume > 0" aria-hidden="true" class="volume-up">
192+
<mat-icon (click)='toggleVolume();' *ngIf="volume > 0" aria-hidden="true" class="volume-up">
185193
<!-- Volume up icon (volume_up) -->
186194
<svg height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg">
187195
<path
188196
d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
189197
<path d="M0 0h24v24H0z" fill="none" />
190198
</svg>
191199
</mat-icon>
200+
<mat-slider *ngIf="displayVolumeSlider" (change)="currVolumeChanged($event)" [min]="0"
201+
class="ngx-d-none ngx-d-sm-block ngx-p-1 ngx-volume ngx-slider" max="1" step="0.01"
202+
value="{{volume}}"></mat-slider>
192203
</button>
193204
</mat-card>
194205

195206
<mat-card *ngIf="displayTitle" class="mat-elevation-z1 ngx-audio-player">
196207
<div style="text-align: center;">
197-
<div style="margin: 1px 2px; padding: 1em">
198-
<span *ngIf="!isPlaying">{{ tracks[currentIndex]?.title }}{{ displayArtist && tracks[currentIndex]?.artist ?
199-
' | ' + tracks[currentIndex]?.artist : ''}}</span>
200-
<marquee *ngIf="isPlaying" behavior="scroll" direction="left">{{ tracks[currentIndex]?.title
208+
<div style="margin: 1px 2px; padding: 0.5em; font-weight: 400; font-size: 16px;">
209+
<div style="padding: 0.3em;" *ngIf="!isPlaying">{{
210+
tracks[currentIndex]?.title }}{{
211+
displayArtist && tracks[currentIndex]?.artist ?
212+
' | ' + tracks[currentIndex]?.artist : ''}}</div>
213+
214+
<marquee *ngIf="isPlaying" behavior="scroll" direction="left">{{
215+
tracks[currentIndex]?.title
201216
}}{{ displayArtist && tracks[currentIndex]?.artist ? ' | ' + tracks[currentIndex]?.artist : ''}}
202217
</marquee>
203218
</div>

0 commit comments

Comments
 (0)