Skip to content

Commit 88d783d

Browse files
vmudigalvmudigal
committed
fix: #28, #5, #64, #73
Integrate both basic and advanced audio players together #28 Affecting my project style. #5 ngx-audio-player styles #64 Allow internationalization of fixed texts #73
1 parent 16d4f19 commit 88d783d

File tree

65 files changed

+1417
-1296
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1417
-1296
lines changed

‎README.md‎

Lines changed: 5 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
A library for loading and playing audio using HTML 5 for Angular 7/8/9/10.
33
(https://vmudigal.github.io/ngx-audio-player/)
44

5-
[![Travis-CI](https://travis-ci.com/vmudigal/ngx-audio-player.svg?branch=master)](https://travis-ci.com/vmudigal/ngx-audio-player.svg?branch=master) [![npm](https://img.shields.io/badge/demo-online-ed1c46.svg?colorB=orange)](https://vmudigal.github.io/ngx-audio-player/) [![npm version](https://img.shields.io/npm/v/ngx-audio-player.svg?colorB=red)](https://www.npmjs.com/package/ngx-audio-player) [![Downloads](https://img.shields.io/npm/dm/ngx-audio-player.svg?colorB=48C9B0)](https://www.npmjs.com/package/ngx-audio-player) [![licence](https://img.shields.io/npm/l/ngx-audio-player.svg?colorB=yellow)](https://www.npmjs.com/package/ngx-audio-player) [![Support](https://img.shields.io/badge/support-Angular%207%2B-blue.svg)](https://www.npmjs.com/package/ngx-audio-player/v/7.1.6) [![Support](https://img.shields.io/badge/support-Angular%208+-brown.svg)](https://www.npmjs.com/package/ngx-audio-player/v/8.0.5) [![Support](https://img.shields.io/badge/support-Angular%209+-black.svg)](https://www.npmjs.com/package/ngx-audio-player/v/9.1.2) [![Support](https://img.shields.io/badge/support-Angular%2010+-teal.svg)](https://www.npmjs.com/package/ngx-audio-player/v/10.0.1)
5+
6+
[![Travis-CI](https://travis-ci.com/vmudigal/ngx-audio-player.svg?branch=master)](https://travis-ci.com/vmudigal/ngx-audio-player.svg?branch=master) [![npm](https://img.shields.io/badge/demo-online-ed1c46.svg?colorB=orange)](https://vmudigal.github.io/ngx-audio-player/) [![npm version](https://img.shields.io/npm/v/ngx-audio-player.svg?colorB=red)](https://www.npmjs.com/package/ngx-audio-player) [![Downloads](https://img.shields.io/npm/dm/ngx-audio-player.svg?colorB=48C9B0)](https://www.npmjs.com/package/ngx-audio-player) [![licence](https://img.shields.io/npm/l/ngx-audio-player.svg?colorB=yellow)](https://www.npmjs.com/package/ngx-audio-player) [![Support](https://img.shields.io/badge/support-Angular%207%2B-blue.svg)](https://www.npmjs.com/package/ngx-audio-player/v/7.1.6) [![Support](https://img.shields.io/badge/support-Angular%208+-brown.svg)](https://www.npmjs.com/package/ngx-audio-player/v/8.0.5) [![Support](https://img.shields.io/badge/support-Angular%209+-black.svg)](https://www.npmjs.com/package/ngx-audio-player/v/9.1.2) [![Support](https://img.shields.io/badge/support-Angular%2010+-teal.svg)](https://www.npmjs.com/package/ngx-audio-player/v/10.1.0)
67

78
## Table of contents
89

@@ -16,14 +17,6 @@ A library for loading and playing audio using HTML 5 for Angular 7/8/9/10.
1617

1718
## Demo
1819

19-
### Basic Player
20-
21-
A simple, clean, responsive player for playing single audio with or without title.
22-
23-
![alt tag](https://github.com/vmudigal/ngx-audio-player/blob/master/docs/images/basic-player.png?raw=true)
24-
25-
### Advanced Player
26-
2720
A simple, clean, responsive player for playing multiple audios with playlist support.
2821

2922
![alt tag](https://github.com/vmudigal/ngx-audio-player/blob/master/docs/images/advanced-player.png?raw=true)
@@ -69,54 +62,15 @@ import { NgxAudioPlayerModule } from 'ngx-audio-player';
6962
export class AppModule { }
7063
```
7164

72-
### Usage
73-
74-
#### Material Style Basic Audio Player
65+
### Usage
7566

7667
##### HTML
7768

7869
```html
79-
<mat-basic-audio-player [audioUrl]="msbapAudioUrl" [title]="msbapTitle" [autoPlay]="false" muted="muted" (trackEnded)="onEnded($event)"
80-
[displayTitle]="msbapDisplayTitle" [displayVolumeControls]="msaapDisplayVolumeControls"
81-
[disablePositionSlider]="msbapDisablePositionSlider"></mat-basic-audio-player>
82-
```
83-
84-
##### TS
85-
86-
```ts
87-
// Material Style Basic Audio Player Audio URL (Mandatory)
88-
msbapAudioUrl = 'Link to audio URL';
89-
90-
// Material Style Basic Audio Player (Optional Parameters)
91-
msbapTitle = 'Audio Title';
92-
msbapDisplayTitle = false;
93-
msbapDisplayVolumeControls = true;
94-
msbapDisablePositionSlider = true;
95-
```
96-
97-
##### Properties
98-
99-
| Name | Description | Type | Default Value |
100-
|--------------------------------------------|-----------------------------------------------------|-----------|---------------|
101-
| @Input() title: string; | title to be displayed | optional | none |
102-
| @Input() audioUrl: string; | url of the audio | mandatory | none |
103-
| @Input() autoPlay: false; | true - if the audio needs to be played automaticlly | optional | false |
104-
| @Input() displayTitle = false; | true - if the audio title needs to be displayed | optional | false |
105-
| @Output() trackEnded: Subject<string>; | Callback method thats triggers once the track ends | optional | - N.A - |
106-
| @Input() displayVolumeControls = true; | false - if the volume controls needs to be hidden | optional | true |
107-
| @Input() startOffset = 0; | offset from start of audio file in seconds | optional | 0 |
108-
| @Input() endOffset = 0; | offset from end of audio file in seconds | optional | 0 |
109-
| @Input() disablePositionSlider = false; | true - if the position slider needs to be disabled | optional | false |
110-
111-
#### Material Style Advanced Audio Player
112-
113-
##### HTML
114-
115-
```html
116-
<mat-advanced-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle" [autoPlay]="false"
70+
<ngx-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle" [autoPlay]="false"
11771
muted="muted" [displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="pageSizeOptions" (trackEnded)="onEnded($event)"
11872
[displayVolumeControls]="msaapDisplayVolumeControls" [disablePositionSlider]="msaapDisablePositionSlider"
119-
[expanded]="true"></mat-advanced-audio-player>
73+
[expanded]="true"></ngx-audio-player>
12074
```
12175

12276
##### TS
@@ -176,13 +130,6 @@ Releases will be numbered with the following format:
176130

177131
For more information on SemVer, please visit http://semver.org.
178132

179-
## Developer
180-
181-
##### [Vijayendra Mudigal](mailto:[email protected])
182-
- [Profile](https://vijayendra.mudigal.com)
183-
- [GitHub](https://github.com/vmudigal)
184-
- [Linkedin](https://www.linkedin.com/in/vijayendra)
185-
186133
## Contributors ✨
187134
Thanks goes to these wonderful people:
188135

‎angular.json‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
"sourceRoot": "src",
99
"projectType": "application",
1010
"prefix": "app",
11-
"schematics": {},
11+
"schematics": {
12+
"@schematics/angular:component": {
13+
"style": "scss"
14+
}
15+
},
1216
"architect": {
1317
"build": {
1418
"builder": "@angular-devkit/build-angular:browser",
@@ -23,10 +27,40 @@
2327
"src/favicon.ico",
2428
"src/assets"
2529
],
30+
"extractCss": true,
2631
"styles": [
27-
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
28-
"src/styles.css"
32+
{
33+
"input": "src/styles.scss"
34+
},
35+
{
36+
"input": "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
37+
},
38+
{
39+
"lazy": true,
40+
"inject": false,
41+
"input": "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
42+
"bundleName": "assets/pink-bluegrey"
43+
},
44+
{
45+
"lazy": true,
46+
"inject": false,
47+
"input": "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
48+
"bundleName": "assets/deeppurple-amber"
49+
},
50+
{
51+
"lazy": true,
52+
"inject": false,
53+
"input": "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
54+
"bundleName": "assets/indigo-pink"
55+
},
56+
{
57+
"lazy": true,
58+
"inject": false,
59+
"input": "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
60+
"bundleName": "assets/purple-green"
61+
}
2962
],
63+
3064
"scripts": []
3165
},
3266
"configurations": {
@@ -85,8 +119,7 @@
85119
"tsConfig": "src/tsconfig.spec.json",
86120
"karmaConfig": "src/karma.conf.js",
87121
"styles": [
88-
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
89-
"src/styles.css"
122+
90123
],
91124
"scripts": [],
92125
"assets": [

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-audio-player-demo",
3-
"version": "10.0.0",
3+
"version": "10.1.0",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/vmudigal/ngx-audio-player.git"
@@ -36,8 +36,8 @@
3636
"publish-lib": "npm publish --f dist/ngx-audio-player --prod",
3737
"build-demo": "ng build --prod --base-href https://vmudigal.github.io/ngx-audio-player/",
3838
"publish-demo": "npx ngh --dir=dist/ngx-audio-player-demo/",
39-
"test": "ng test --code-coverage --reporters=teamcity,coverage-istanbul",
40-
"test-lib": "ng test ngx-audio-player --code-coverage --reporters=teamcity,coverage-istanbul",
39+
"test": "ng test --code-coverage --reporters=coverage-istanbul",
40+
"test-lib": "ng test ngx-audio-player --code-coverage --reporters=coverage-istanbul",
4141
"lint": "ng lint",
4242
"e2e": "ng e2e"
4343
},

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

Lines changed: 4 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ A library for loading and playing audio using HTML 5 for Angular 7/8/9/10.
33
(https://vmudigal.github.io/ngx-audio-player/)
44

55

6-
[![Travis-CI](https://travis-ci.com/vmudigal/ngx-audio-player.svg?branch=master)](https://travis-ci.com/vmudigal/ngx-audio-player.svg?branch=master) [![npm](https://img.shields.io/badge/demo-online-ed1c46.svg?colorB=orange)](https://vmudigal.github.io/ngx-audio-player/) [![npm version](https://img.shields.io/npm/v/ngx-audio-player.svg?colorB=red)](https://www.npmjs.com/package/ngx-audio-player) [![Downloads](https://img.shields.io/npm/dm/ngx-audio-player.svg?colorB=48C9B0)](https://www.npmjs.com/package/ngx-audio-player) [![licence](https://img.shields.io/npm/l/ngx-audio-player.svg?colorB=yellow)](https://www.npmjs.com/package/ngx-audio-player) [![Support](https://img.shields.io/badge/support-Angular%207%2B-blue.svg)](https://www.npmjs.com/package/ngx-audio-player/v/7.1.6) [![Support](https://img.shields.io/badge/support-Angular%208+-brown.svg)](https://www.npmjs.com/package/ngx-audio-player/v/8.0.5) [![Support](https://img.shields.io/badge/support-Angular%209+-black.svg)](https://www.npmjs.com/package/ngx-audio-player/v/9.1.2) [![Support](https://img.shields.io/badge/support-Angular%2010+-teal.svg)](https://www.npmjs.com/package/ngx-audio-player/v/10.0.1)
6+
[![Travis-CI](https://travis-ci.com/vmudigal/ngx-audio-player.svg?branch=master)](https://travis-ci.com/vmudigal/ngx-audio-player.svg?branch=master) [![npm](https://img.shields.io/badge/demo-online-ed1c46.svg?colorB=orange)](https://vmudigal.github.io/ngx-audio-player/) [![npm version](https://img.shields.io/npm/v/ngx-audio-player.svg?colorB=red)](https://www.npmjs.com/package/ngx-audio-player) [![Downloads](https://img.shields.io/npm/dm/ngx-audio-player.svg?colorB=48C9B0)](https://www.npmjs.com/package/ngx-audio-player) [![licence](https://img.shields.io/npm/l/ngx-audio-player.svg?colorB=yellow)](https://www.npmjs.com/package/ngx-audio-player) [![Support](https://img.shields.io/badge/support-Angular%207%2B-blue.svg)](https://www.npmjs.com/package/ngx-audio-player/v/7.1.6) [![Support](https://img.shields.io/badge/support-Angular%208+-brown.svg)](https://www.npmjs.com/package/ngx-audio-player/v/8.0.5) [![Support](https://img.shields.io/badge/support-Angular%209+-black.svg)](https://www.npmjs.com/package/ngx-audio-player/v/9.1.2) [![Support](https://img.shields.io/badge/support-Angular%2010+-teal.svg)](https://www.npmjs.com/package/ngx-audio-player/v/10.1.0)
77

88
## Table of contents
99

@@ -17,14 +17,6 @@ A library for loading and playing audio using HTML 5 for Angular 7/8/9/10.
1717

1818
## Demo
1919

20-
### Basic Player
21-
22-
A simple, clean, responsive player for playing single audio with or without title.
23-
24-
![alt tag](https://github.com/vmudigal/ngx-audio-player/blob/master/docs/images/basic-player.png?raw=true)
25-
26-
### Advanced Player
27-
2820
A simple, clean, responsive player for playing multiple audios with playlist support.
2921

3022
![alt tag](https://github.com/vmudigal/ngx-audio-player/blob/master/docs/images/advanced-player.png?raw=true)
@@ -70,54 +62,15 @@ import { NgxAudioPlayerModule } from 'ngx-audio-player';
7062
export class AppModule { }
7163
```
7264

73-
### Usage
74-
75-
#### Material Style Basic Audio Player
76-
77-
##### HTML
78-
79-
```html
80-
<mat-basic-audio-player [audioUrl]="msbapAudioUrl" [title]="msbapTitle" [autoPlay]="false" muted="muted" (trackEnded)="onEnded($event)"
81-
[displayTitle]="msbapDisplayTitle" [displayVolumeControls]="msaapDisplayVolumeControls"
82-
[disablePositionSlider]="msbapDisablePositionSlider"></mat-basic-audio-player>
83-
```
84-
85-
##### TS
86-
87-
```ts
88-
// Material Style Basic Audio Player Audio URL (Mandatory)
89-
msbapAudioUrl = 'Link to audio URL';
90-
91-
// Material Style Basic Audio Player (Optional Parameters)
92-
msbapTitle = 'Audio Title';
93-
msbapDisplayTitle = false;
94-
msbapDisplayVolumeControls = true;
95-
msbapDisablePositionSlider = true;
96-
```
97-
98-
##### Properties
99-
100-
| Name | Description | Type | Default Value |
101-
|--------------------------------------------|-----------------------------------------------------|-----------|---------------|
102-
| @Input() title: string; | title to be displayed | optional | none |
103-
| @Input() audioUrl: string; | url of the audio | mandatory | none |
104-
| @Input() autoPlay: false; | true - if the audio needs to be played automaticlly | optional | false |
105-
| @Input() displayTitle = false; | true - if the audio title needs to be displayed | optional | false |
106-
| @Output() trackEnded: Subject<string>; | Callback method thats triggers once the track ends | optional | - N.A - |
107-
| @Input() displayVolumeControls = true; | false - if the volume controls needs to be hidden | optional | true |
108-
| @Input() startOffset = 0; | offset from start of audio file in seconds | optional | 0 |
109-
| @Input() endOffset = 0; | offset from end of audio file in seconds | optional | 0 |
110-
| @Input() disablePositionSlider = false; | true - if the position slider needs to be disabled | optional | false |
111-
112-
#### Material Style Advanced Audio Player
65+
### Usage
11366

11467
##### HTML
11568

11669
```html
117-
<mat-advanced-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle" [autoPlay]="false"
70+
<ngx-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle" [autoPlay]="false"
11871
muted="muted" [displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="pageSizeOptions" (trackEnded)="onEnded($event)"
11972
[displayVolumeControls]="msaapDisplayVolumeControls" [disablePositionSlider]="msaapDisablePositionSlider"
120-
[expanded]="true"></mat-advanced-audio-player>
73+
[expanded]="true"></ngx-audio-player>
12174
```
12275

12376
##### TS
@@ -177,13 +130,6 @@ Releases will be numbered with the following format:
177130

178131
For more information on SemVer, please visit http://semver.org.
179132

180-
## Developer
181-
182-
##### [Vijayendra Mudigal](mailto:[email protected])
183-
- [Profile](https://vijayendra.mudigal.com)
184-
- [GitHub](https://github.com/vmudigal)
185-
- [Linkedin](https://www.linkedin.com/in/vijayendra)
186-
187133
## Contributors ✨
188134
Thanks goes to these wonderful people:
189135

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-audio-player",
3-
"version": "10.0.1",
3+
"version": "10.1.0",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/vmudigal/ngx-audio-player.git"

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

Lines changed: 0 additions & 27 deletions
This file was deleted.

0 commit comments

Comments
 (0)