ngx-audio-player - npm Package Compare versions

Comparing version 11.0.1 to 11.0.2

bundles/ngx-audio-player.umd.js

@@ -346,4 +346,4 @@ (function (global, factory) {
         SecondsToMinutesPipe.prototype.transform = function (time) {
-            var hours = ('0' + Math.floor(time / 60 / 60)).slice(-2);
-            var minutes = ('0' + Math.floor(time / 60)).slice(-2);
+            var hours = ('0' + Math.floor(time / 3600)).slice(-2);
+            var minutes = ('0' + Math.floor((time % 3600) / 60)).slice(-2);
             var seconds = ('0' + time % 60).slice(-2);
@@ -350,0 +350,0 @@ if (hours !== '00') {

bundles/ngx-audio-player.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/material/table"),require("@angular/material/paginator"),require("rxjs"),require("@angular/material/slider"),require("@angular/material/form-field"),require("@angular/material/expansion"),require("@angular/material/card"),require("@angular/material/button"),require("@angular/common"),require("@angular/forms"),require("@angular/material/icon")):"function"==typeof define&&define.amd?define("ngx-audio-player",["exports","@angular/core","@angular/material/table","@angular/material/paginator","rxjs","@angular/material/slider","@angular/material/form-field","@angular/material/expansion","@angular/material/card","@angular/material/button","@angular/common","@angular/forms","@angular/material/icon"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["ngx-audio-player"]={},t.ng.core,t.ng.material.table,t.ng.material.paginator,t.rxjs,t.ng.material.slider,t.ng.material.formField,t.ng.material.expansion,t.ng.material.card,t.ng.material.button,t.ng.common,t.ng.forms,t.ng.material.icon)}(this,(function(t,e,n,a,i,r,l,o,s,c,d,u,p){"use strict";var g=function(){function t(){this.tracks=[],this.playlistSubject$=new i.BehaviorSubject(this.tracks),this.currentTrack=null,this.currentTrackSubject$=new i.BehaviorSubject(this.currentTrack),this.currentTime=null,this.currentTimeSubject$=new i.BehaviorSubject(this.currentTime)}return t.prototype.setPlaylist=function(t){this.tracks=t,this.playlistSubject$.next(this.tracks)},t.prototype.getPlaylist=function(){return this.playlistSubject$.asObservable()},t.prototype.setCurrentTrack=function(t){this.currentTrack=t,this.currentTrackSubject$.next(this.currentTrack)},t.prototype.getCurrentTrack=function(){return this.currentTrackSubject$.asObservable()},t.prototype.setCurrentTime=function(t){this.currentTime=t,this.currentTimeSubject$.next(this.currentTime)},t.prototype.getCurrentTime=function(){return this.currentTimeSubject$.asObservable()},t}();g.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new g},token:g,providedIn:"root"}),g.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}];var m=function(){function t(t){this.dataSource=new n.MatTableDataSource,this.tracks=[],this.displayTitle=!0,this.displayPlaylist=!0,this.displayVolumeControls=!0,this.pageSizeOptions=[10,20,30],this.expanded=!0,this.autoPlay=!1,this.disablePositionSlider=!1,this.displayArtist=!1,this.displayDuration=!1,this.tableHeader="Playlist",this.titleHeader="Title",this.artistHeader="Artist",this.durationHeader="Duration",this.currentIndex=0,this.trackEnded=new i.Subject,this.iOS=/iPad|iPhone|iPod/.test(navigator.platform)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1,this.loaderDisplay=!1,this.isPlaying=!1,this.currentTime=0,this.volume=.1,this.duration=.01,this.startOffsetValue=0,this.endOffset=0,"mat-advanced-audio-player"===t.nativeElement.tagName.toLowerCase()&&console.warn("'mat-advanced-audio-player' selector is deprecated; use 'ngx-audio-player' instead."),this.audioPlayerService=new g}return Object.defineProperty(t.prototype,"playlist",{set:function(t){this.audioPlayerService.setPlaylist(t)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"matPaginator",{set:function(t){this.paginator=t,this.setDataSourceAttributes()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"startOffset",{get:function(){return this.startOffsetValue},set:function(t){this.startOffsetValue=t,this.player.nativeElement.currentTime=t},enumerable:!1,configurable:!0}),t.prototype.currTimePosChanged=function(t){this.player.nativeElement.currentTime=t.value},t.prototype.bindPlayerEvent=function(){var t=this;this.player.nativeElement.addEventListener("playing",(function(){t.isPlaying=!0,t.duration=Math.floor(t.player.nativeElement.duration)})),this.player.nativeElement.addEventListener("pause",(function(){t.isPlaying=!1})),this.player.nativeElement.addEventListener("timeupdate",(function(){t.currentTime=Math.floor(t.player.nativeElement.currentTime)})),this.player.nativeElement.addEventListener("volume",(function(){t.volume=Math.floor(t.player.nativeElement.volume)})),this.iOS||this.player.nativeElement.addEventListener("loadstart",(function(){t.loaderDisplay=!0})),this.player.nativeElement.addEventListener("loadeddata",(function(){t.loaderDisplay=!1,t.duration=Math.floor(t.player.nativeElement.duration)})),this.player.nativeElement.addEventListener("ended",(function(){t.trackEnded.next("ended")}))},t.prototype.playBtnHandler=function(){this.loaderDisplay||(this.player.nativeElement.paused?(this.currentTime>=this.duration-this.endOffset?this.player.nativeElement.currentTime=this.startOffset:this.player.nativeElement.currentTime=this.currentTime,this.player.nativeElement.play()):(this.currentTime=this.player.nativeElement.currentTime,this.player.nativeElement.pause()))},t.prototype.play=function(t){var e=this;t&&(this.startOffset=t.startOffset||0,this.endOffset=t.endOffset||0),setTimeout((function(){e.player.nativeElement.play()}),50)},t.prototype.toggleVolume=function(){0===this.volume?this.setVolume(1):this.setVolume(0)},t.prototype.setVolume=function(t){this.volume=t,this.player.nativeElement.volume=this.volume},t.prototype.ngOnInit=function(){var t=this;this.bindPlayerEvent(),this.player.nativeElement.addEventListener("ended",(function(){t.checkIfSongHasStartedSinceAtleastTwoSeconds()&&t.nextSong()})),this.player.nativeElement.addEventListener("timeupdate",(function(){t.audioPlayerService.setCurrentTime(t.player.nativeElement.currentTime)})),this.audioPlayerService.getPlaylist().subscribe((function(e){null!==e&&e!==[]&&(t.tracks=e,t.initialize())}))},t.prototype.ngOnChanges=function(t){(t.hasOwnProperty("displayArtist")||t.hasOwnProperty("displayDuration"))&&this.buildDisplayedColumns()},t.prototype.buildDisplayedColumns=function(){this.displayedColumns=["title"],this.displayArtist&&this.displayedColumns.push("artist"),this.displayDuration&&this.displayedColumns.push("duration"),this.displayedColumns.push("status")},t.prototype.initialize=function(){this.buildDisplayedColumns(),this.setDataSourceAttributes(),this.player.nativeElement.currentTime=this.startOffset,this.updateCurrentTrack(),this.autoPlay&&this.play()},t.prototype.setDataSourceAttributes=function(){var t=1;this.tracks&&(this.tracks.forEach((function(e){e.index=t++})),this.dataSource=new n.MatTableDataSource(this.tracks),this.dataSource.paginator=this.paginator)},t.prototype.nextSong=function(){!0!==this.displayPlaylist||(this.currentIndex+1)%this.paginator.pageSize!=0&&this.currentIndex+1!==this.paginator.length||(this.paginator.hasNextPage()?this.paginator.nextPage():this.paginator.hasNextPage()||this.paginator.firstPage()),this.currentTime=0,this.duration=.01,this.currentIndex+1>=this.tracks.length?this.currentIndex=0:this.currentIndex++,this.updateCurrentTrack(),this.play()},t.prototype.previousSong=function(){this.currentTime=0,this.duration=.01,this.checkIfSongHasStartedSinceAtleastTwoSeconds()?this.resetSong():(!0!==this.displayPlaylist||this.currentIndex%this.paginator.pageSize!=0&&0!==this.currentIndex||(this.paginator.hasPreviousPage()?this.paginator.previousPage():this.paginator.hasPreviousPage()||this.paginator.lastPage()),this.currentIndex-1<0?this.currentIndex=this.tracks.length-1:this.currentIndex--),this.updateCurrentTrack(),this.play()},t.prototype.resetSong=function(){this.player.nativeElement.src=this.tracks[this.currentIndex].link},t.prototype.selectTrack=function(t){this.currentIndex=t-1,this.updateCurrentTrack(),this.play()},t.prototype.checkIfSongHasStartedSinceAtleastTwoSeconds=function(){return this.player.nativeElement.currentTime>2},t.prototype.updateCurrentTrack=function(){this.audioPlayerService.setCurrentTrack(this.tracks[this.currentIndex])},t}();m.decorators=[{type:e.Component,args:[{selector:"mat-advanced-audio-player,ngx-audio-player",template:'<mat-card class="ngx-d-flex ngx-justify-content-center ngx-audio-player z-depth-1 mat-elevation-z2"\n    style="margin: 0px;">\n\n    <audio #audioPlayer [src]="tracks[currentIndex]?.link"></audio>\n\n    <button *ngIf="tracks.length > 1" (click)=\'previousSong();\' [disabled]="loaderDisplay" class="ngx-p-1" mat-button>\n        <mat-icon aria-hidden="true">\n            \x3c!-- Skip previous icon (skip_previous) --\x3e\n            <svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">\n                <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />\n                <path d="M0 0h32v32H0z" fill="none" />\n            </svg>\n        </mat-icon>\n    </button>\n    <button (click)=\'playBtnHandler();\' [disabled]="loaderDisplay" class="ngx-p-1 play-pause" mat-button>\n\n        <svg *ngIf="loaderDisplay" height="34px" preserveAspectRatio="xMidYMid"\n            style="margin: auto; display: block; shape-rendering: auto;" viewBox="0 0 100 100" width="34px"\n            xmlns="http://www.w3.org/2000/svg">\n            <g transform="rotate(0 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.9166666666666666s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(30 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.8333333333333334s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(60 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.75s" dur="1s" keyTimes="0;1" repeatCount="indefinite"\n                        values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(90 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.6666666666666666s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(120 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.5833333333333334s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(150 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.5s" dur="1s" keyTimes="0;1" repeatCount="indefinite"\n                        values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(180 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.4166666666666667s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(210 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.3333333333333333s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(240 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.25s" dur="1s" keyTimes="0;1" repeatCount="indefinite"\n                        values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(270 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.16666666666666666s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(300 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.08333333333333333s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(330 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="0s" dur="1s" keyTimes="0;1" repeatCount="indefinite"\n                        values="1;0" />\n                </rect>\n            </g>\n        </svg>\n\n        <mat-icon *ngIf="!loaderDisplay && !isPlaying" aria-hidden="true" class="play-track">\n            \x3c!-- Play icon (play_arrow) --\x3e\n            <svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">\n                <path d="M8 5v14l11-7z" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n        <mat-icon *ngIf="!loaderDisplay && isPlaying" aria-hidden="true" class="pause-track">\n            \x3c!-- Pause icon (pause) --\x3e\n            <svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">\n                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n    </button>\n    <button *ngIf="tracks.length > 1" (click)=\'nextSong();\' [disabled]="loaderDisplay" class="ngx-p-1 skip-next"\n        mat-button>\n        <mat-icon aria-hidden="true" class="next-track">\n            \x3c!-- Skip next icon (skip_next) --\x3e\n            <svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">\n                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n    </button>\n\n    <div class="ngx-col">\n        <div class="ngx-d-flex ngx-flex-fill ngx-justify-content-center">\n            <div class="ngx-d-none ngx-d-sm-block ngx-py-3 ngx-px-1" style="font-size: 12px">\n                <span *ngIf="duration !== 0.01">\n                    {{currentTime | secondsToMinutes}}\n                </span>\n            </div>\n            <mat-slider [disabled]="disablePositionSlider" (change)="currTimePosChanged($event)" [min]="startOffset"\n                class="ngx-d-none ngx-d-sm-block ngx-flex-fill ngx-p-1" max="{{duration-endOffset}}" style="width: 100%"\n                value="{{currentTime}}"></mat-slider>\n            <div class="ngx-py-3 ngx-px-1" style="font-size: 12px; text-align: right">\n                <span *ngIf="duration !== 0.01">\n                    -{{duration-currentTime | secondsToMinutes }}\n                </span>\n            </div>\n        </div>\n    </div>\n    <button (click)=\'toggleVolume();\' *ngIf="displayVolumeControls" class="ngx-p-1 volume" mat-button>\n        <mat-icon *ngIf="volume === 0" aria-hidden="true" class="volume-mute">\n            \x3c!-- Volume mute icon (volume_off) --\x3e\n            <svg height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg">\n                <path\n                    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" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n        <mat-icon *ngIf="volume > 0" aria-hidden="true" class="volume-up">\n            \x3c!-- Volume up icon (volume_up) --\x3e\n            <svg height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg">\n                <path\n                    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" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n    </button>\n</mat-card>\n\n<mat-card *ngIf="displayTitle" class="mat-elevation-z1">\n    <div style="text-align: center;">\n        <div style="margin: 1px 2px; padding: 1em">\n            <span\n                *ngIf="!isPlaying">{{ tracks[currentIndex]?.title }}{{  displayArtist && tracks[currentIndex]?.artist ? \' | \' + tracks[currentIndex]?.artist : \'\'}}</span>\n            <marquee *ngIf="isPlaying" behavior="scroll" direction="left">{{ tracks[currentIndex]?.title\n                }}{{ displayArtist && tracks[currentIndex]?.artist ? \' | \' + tracks[currentIndex]?.artist : \'\'}}\n            </marquee>\n        </div>\n        <div class="clear"></div>\n    </div>\n</mat-card>\n\n<mat-accordion *ngIf="displayPlaylist && tracks.length > 1">\n    <mat-expansion-panel [expanded]="expanded">\n        <mat-expansion-panel-header>\n            {{tableHeader}}\n        </mat-expansion-panel-header>\n        <table [dataSource]="dataSource" class="mat-elevation-z6" mat-table>\n            <ng-container matColumnDef="title">\n                <th *matHeaderCellDef mat-header-cell>{{titleHeader}}</th>\n                <td (click)="selectTrack(element.index)" *matCellDef="let element" mat-cell>\n                    {{element.title}}\n                </td>\n            </ng-container>\n            <ng-container matColumnDef="artist">\n                <th *matHeaderCellDef mat-header-cell>{{artistHeader}}</th>\n                <td (click)="selectTrack(element.index)" *matCellDef="let element" mat-cell>\n                    {{element?.artist ? element?.artist : \'\'}}\n                </td>\n            </ng-container>\n            <ng-container matColumnDef="duration">\n                <th *matHeaderCellDef mat-header-cell>{{durationHeader}}</th>\n                <td (click)="selectTrack(element.index)" *matCellDef="let element" mat-cell>\n                    {{element?.duration ? (element?.duration | secondsToMinutes) : \'\'}}\n                </td>\n            </ng-container>\n            <ng-container matColumnDef="status">\n                <th *matHeaderCellDef mat-header-cell></th>\n                <td *matCellDef="let element" mat-cell>\n                    <div *ngIf="tracks[currentIndex]?.title === element.title">\n                        \x3c!-- <mat-icon *ngIf="isPlaying" aria-hidden="true">\n                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>\n                        </mat-icon> --\x3e\n                        <mat-icon *ngIf="isPlaying" aria-hidden="true" class="currently-playing">\n                            \x3c!-- Play icon (play_arrow) --\x3e\n                            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n                                <path d="M0 0h24v24H0z" fill="none" />\n                                <path\n                                    d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z" />\n                            </svg>\n                        </mat-icon>\n                    </div>\n                </td>\n            </ng-container>\n            <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>\n            <tr *matRowDef="let row; columns: displayedColumns;" class="mat-select-content" mat-row></tr>\n        </table>\n        <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>\n    </mat-expansion-panel>\n</mat-accordion>',styles:["mat-card,mat-slider{padding:0!important}button:focus,button:hover{outline:0!important}svg{vertical-align:top}.mat-icon{height:32px!important;width:32px!important}mat-icon>.currently-playing{height:16px!important;width:16px!important}table{width:100%}.ngx-advanced-audio-player{min-width:325px}.material-icons{font-size:16px!important}.play-pause{border-right:1px solid rgba(0,0,0,.1)}.play-pause,.volume{border-left:1px solid rgba(0,0,0,.1)}.skip-next{border-right:1px solid rgba(0,0,0,.1)}*,:after,:before{box-sizing:inherit}.ngx-p-1{padding:.25rem!important}.ngx-col,.ngx-col-1,.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-10,.ngx-col-11,.ngx-col-12,.ngx-col-auto,.ngx-col-lg,.ngx-col-lg-1,.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-10,.ngx-col-lg-11,.ngx-col-lg-12,.ngx-col-lg-auto,.ngx-col-md,.ngx-col-md-1,.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-10,.ngx-col-md-11,.ngx-col-md-12,.ngx-col-md-auto,.ngx-col-sm,.ngx-col-sm-1,.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-10,.ngx-col-sm-11,.ngx-col-sm-12,.ngx-col-sm-auto,.ngx-col-xl,.ngx-col-xl-1,.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-10,.ngx-col-xl-11,.ngx-col-xl-12,.ngx-col-xl-auto{padding-left:15px;padding-right:15px;position:relative;width:100%}.ngx-col{flex-basis:0;flex-grow:1;max-width:100%}.ngx-justify-content-center{justify-content:center!important}.ngx-flex-fill{flex:1 1 auto!important}.ngx-d-flex{display:flex!important}.ngx-pb-3,.ngx-py-3{padding-bottom:1rem!important}.ngx-pt-3,.ngx-py-3{padding-top:1rem!important}.ngx-pl-1,.ngx-px-1{padding-left:.25rem!important}.ngx-pr-1,.ngx-px-1{padding-right:.25rem!important}@media (max-width:720px){.ngx-sm-block{display:block!important}.ngx-d-none{display:none!important}}"]}]}],m.ctorParameters=function(){return[{type:e.ElementRef}]},m.propDecorators={playlist:[{type:e.Input}],matPaginator:[{type:e.ViewChild,args:[a.MatPaginator,{static:!1}]}],displayTitle:[{type:e.Input}],displayPlaylist:[{type:e.Input}],displayVolumeControls:[{type:e.Input}],pageSizeOptions:[{type:e.Input}],expanded:[{type:e.Input}],autoPlay:[{type:e.Input}],disablePositionSlider:[{type:e.Input}],displayArtist:[{type:e.Input}],displayDuration:[{type:e.Input}],tableHeader:[{type:e.Input}],titleHeader:[{type:e.Input}],artistHeader:[{type:e.Input}],durationHeader:[{type:e.Input}],trackEnded:[{type:e.Output}],player:[{type:e.ViewChild,args:["audioPlayer",{static:!0}]}],startOffset:[{type:e.Input}],endOffset:[{type:e.Input}]};var h=function(){function t(){}return t.prototype.transform=function(t){var e=("0"+Math.floor(t/60/60)).slice(-2),n=("0"+Math.floor(t/60)).slice(-2),a=("0"+t%60).slice(-2);return"00"!==e?e+":"+n+":"+a:n+":"+a},t}();h.decorators=[{type:e.Pipe,args:[{name:"secondsToMinutes"}]}];var x=function(){};x.decorators=[{type:e.NgModule,args:[{declarations:[h,m],imports:[d.CommonModule,u.FormsModule,c.MatButtonModule,s.MatCardModule,n.MatTableModule,l.MatFormFieldModule,r.MatSliderModule,o.MatExpansionModule,a.MatPaginatorModule,p.MatIconModule],exports:[m]}]}];var y=function(){var t=this;this.toString=function(){return"Track (index: "+t.index+", title: "+t.title+")"}};t.AudioPlayerComponent=m,t.NgxAudioPlayerModule=x,t.Track=y,t.ɵa=h,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/material/table"),require("@angular/material/paginator"),require("rxjs"),require("@angular/material/slider"),require("@angular/material/form-field"),require("@angular/material/expansion"),require("@angular/material/card"),require("@angular/material/button"),require("@angular/common"),require("@angular/forms"),require("@angular/material/icon")):"function"==typeof define&&define.amd?define("ngx-audio-player",["exports","@angular/core","@angular/material/table","@angular/material/paginator","rxjs","@angular/material/slider","@angular/material/form-field","@angular/material/expansion","@angular/material/card","@angular/material/button","@angular/common","@angular/forms","@angular/material/icon"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["ngx-audio-player"]={},t.ng.core,t.ng.material.table,t.ng.material.paginator,t.rxjs,t.ng.material.slider,t.ng.material.formField,t.ng.material.expansion,t.ng.material.card,t.ng.material.button,t.ng.common,t.ng.forms,t.ng.material.icon)}(this,(function(t,e,n,a,i,r,l,o,s,c,d,u,p){"use strict";var g=function(){function t(){this.tracks=[],this.playlistSubject$=new i.BehaviorSubject(this.tracks),this.currentTrack=null,this.currentTrackSubject$=new i.BehaviorSubject(this.currentTrack),this.currentTime=null,this.currentTimeSubject$=new i.BehaviorSubject(this.currentTime)}return t.prototype.setPlaylist=function(t){this.tracks=t,this.playlistSubject$.next(this.tracks)},t.prototype.getPlaylist=function(){return this.playlistSubject$.asObservable()},t.prototype.setCurrentTrack=function(t){this.currentTrack=t,this.currentTrackSubject$.next(this.currentTrack)},t.prototype.getCurrentTrack=function(){return this.currentTrackSubject$.asObservable()},t.prototype.setCurrentTime=function(t){this.currentTime=t,this.currentTimeSubject$.next(this.currentTime)},t.prototype.getCurrentTime=function(){return this.currentTimeSubject$.asObservable()},t}();g.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new g},token:g,providedIn:"root"}),g.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}];var m=function(){function t(t){this.dataSource=new n.MatTableDataSource,this.tracks=[],this.displayTitle=!0,this.displayPlaylist=!0,this.displayVolumeControls=!0,this.pageSizeOptions=[10,20,30],this.expanded=!0,this.autoPlay=!1,this.disablePositionSlider=!1,this.displayArtist=!1,this.displayDuration=!1,this.tableHeader="Playlist",this.titleHeader="Title",this.artistHeader="Artist",this.durationHeader="Duration",this.currentIndex=0,this.trackEnded=new i.Subject,this.iOS=/iPad|iPhone|iPod/.test(navigator.platform)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1,this.loaderDisplay=!1,this.isPlaying=!1,this.currentTime=0,this.volume=.1,this.duration=.01,this.startOffsetValue=0,this.endOffset=0,"mat-advanced-audio-player"===t.nativeElement.tagName.toLowerCase()&&console.warn("'mat-advanced-audio-player' selector is deprecated; use 'ngx-audio-player' instead."),this.audioPlayerService=new g}return Object.defineProperty(t.prototype,"playlist",{set:function(t){this.audioPlayerService.setPlaylist(t)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"matPaginator",{set:function(t){this.paginator=t,this.setDataSourceAttributes()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"startOffset",{get:function(){return this.startOffsetValue},set:function(t){this.startOffsetValue=t,this.player.nativeElement.currentTime=t},enumerable:!1,configurable:!0}),t.prototype.currTimePosChanged=function(t){this.player.nativeElement.currentTime=t.value},t.prototype.bindPlayerEvent=function(){var t=this;this.player.nativeElement.addEventListener("playing",(function(){t.isPlaying=!0,t.duration=Math.floor(t.player.nativeElement.duration)})),this.player.nativeElement.addEventListener("pause",(function(){t.isPlaying=!1})),this.player.nativeElement.addEventListener("timeupdate",(function(){t.currentTime=Math.floor(t.player.nativeElement.currentTime)})),this.player.nativeElement.addEventListener("volume",(function(){t.volume=Math.floor(t.player.nativeElement.volume)})),this.iOS||this.player.nativeElement.addEventListener("loadstart",(function(){t.loaderDisplay=!0})),this.player.nativeElement.addEventListener("loadeddata",(function(){t.loaderDisplay=!1,t.duration=Math.floor(t.player.nativeElement.duration)})),this.player.nativeElement.addEventListener("ended",(function(){t.trackEnded.next("ended")}))},t.prototype.playBtnHandler=function(){this.loaderDisplay||(this.player.nativeElement.paused?(this.currentTime>=this.duration-this.endOffset?this.player.nativeElement.currentTime=this.startOffset:this.player.nativeElement.currentTime=this.currentTime,this.player.nativeElement.play()):(this.currentTime=this.player.nativeElement.currentTime,this.player.nativeElement.pause()))},t.prototype.play=function(t){var e=this;t&&(this.startOffset=t.startOffset||0,this.endOffset=t.endOffset||0),setTimeout((function(){e.player.nativeElement.play()}),50)},t.prototype.toggleVolume=function(){0===this.volume?this.setVolume(1):this.setVolume(0)},t.prototype.setVolume=function(t){this.volume=t,this.player.nativeElement.volume=this.volume},t.prototype.ngOnInit=function(){var t=this;this.bindPlayerEvent(),this.player.nativeElement.addEventListener("ended",(function(){t.checkIfSongHasStartedSinceAtleastTwoSeconds()&&t.nextSong()})),this.player.nativeElement.addEventListener("timeupdate",(function(){t.audioPlayerService.setCurrentTime(t.player.nativeElement.currentTime)})),this.audioPlayerService.getPlaylist().subscribe((function(e){null!==e&&e!==[]&&(t.tracks=e,t.initialize())}))},t.prototype.ngOnChanges=function(t){(t.hasOwnProperty("displayArtist")||t.hasOwnProperty("displayDuration"))&&this.buildDisplayedColumns()},t.prototype.buildDisplayedColumns=function(){this.displayedColumns=["title"],this.displayArtist&&this.displayedColumns.push("artist"),this.displayDuration&&this.displayedColumns.push("duration"),this.displayedColumns.push("status")},t.prototype.initialize=function(){this.buildDisplayedColumns(),this.setDataSourceAttributes(),this.player.nativeElement.currentTime=this.startOffset,this.updateCurrentTrack(),this.autoPlay&&this.play()},t.prototype.setDataSourceAttributes=function(){var t=1;this.tracks&&(this.tracks.forEach((function(e){e.index=t++})),this.dataSource=new n.MatTableDataSource(this.tracks),this.dataSource.paginator=this.paginator)},t.prototype.nextSong=function(){!0!==this.displayPlaylist||(this.currentIndex+1)%this.paginator.pageSize!=0&&this.currentIndex+1!==this.paginator.length||(this.paginator.hasNextPage()?this.paginator.nextPage():this.paginator.hasNextPage()||this.paginator.firstPage()),this.currentTime=0,this.duration=.01,this.currentIndex+1>=this.tracks.length?this.currentIndex=0:this.currentIndex++,this.updateCurrentTrack(),this.play()},t.prototype.previousSong=function(){this.currentTime=0,this.duration=.01,this.checkIfSongHasStartedSinceAtleastTwoSeconds()?this.resetSong():(!0!==this.displayPlaylist||this.currentIndex%this.paginator.pageSize!=0&&0!==this.currentIndex||(this.paginator.hasPreviousPage()?this.paginator.previousPage():this.paginator.hasPreviousPage()||this.paginator.lastPage()),this.currentIndex-1<0?this.currentIndex=this.tracks.length-1:this.currentIndex--),this.updateCurrentTrack(),this.play()},t.prototype.resetSong=function(){this.player.nativeElement.src=this.tracks[this.currentIndex].link},t.prototype.selectTrack=function(t){this.currentIndex=t-1,this.updateCurrentTrack(),this.play()},t.prototype.checkIfSongHasStartedSinceAtleastTwoSeconds=function(){return this.player.nativeElement.currentTime>2},t.prototype.updateCurrentTrack=function(){this.audioPlayerService.setCurrentTrack(this.tracks[this.currentIndex])},t}();m.decorators=[{type:e.Component,args:[{selector:"mat-advanced-audio-player,ngx-audio-player",template:'<mat-card class="ngx-d-flex ngx-justify-content-center ngx-audio-player z-depth-1 mat-elevation-z2"\n    style="margin: 0px;">\n\n    <audio #audioPlayer [src]="tracks[currentIndex]?.link"></audio>\n\n    <button *ngIf="tracks.length > 1" (click)=\'previousSong();\' [disabled]="loaderDisplay" class="ngx-p-1" mat-button>\n        <mat-icon aria-hidden="true">\n            \x3c!-- Skip previous icon (skip_previous) --\x3e\n            <svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">\n                <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />\n                <path d="M0 0h32v32H0z" fill="none" />\n            </svg>\n        </mat-icon>\n    </button>\n    <button (click)=\'playBtnHandler();\' [disabled]="loaderDisplay" class="ngx-p-1 play-pause" mat-button>\n\n        <svg *ngIf="loaderDisplay" height="34px" preserveAspectRatio="xMidYMid"\n            style="margin: auto; display: block; shape-rendering: auto;" viewBox="0 0 100 100" width="34px"\n            xmlns="http://www.w3.org/2000/svg">\n            <g transform="rotate(0 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.9166666666666666s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(30 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.8333333333333334s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(60 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.75s" dur="1s" keyTimes="0;1" repeatCount="indefinite"\n                        values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(90 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.6666666666666666s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(120 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.5833333333333334s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(150 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.5s" dur="1s" keyTimes="0;1" repeatCount="indefinite"\n                        values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(180 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.4166666666666667s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(210 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.3333333333333333s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(240 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.25s" dur="1s" keyTimes="0;1" repeatCount="indefinite"\n                        values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(270 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.16666666666666666s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(300 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="-0.08333333333333333s" dur="1s" keyTimes="0;1"\n                        repeatCount="indefinite" values="1;0" />\n                </rect>\n            </g>\n            <g transform="rotate(330 50 50)">\n                <rect fill="#7a7a7a" height="12" rx="3" ry="6" width="6" x="47" y="20">\n                    <animate attributeName="opacity" begin="0s" dur="1s" keyTimes="0;1" repeatCount="indefinite"\n                        values="1;0" />\n                </rect>\n            </g>\n        </svg>\n\n        <mat-icon *ngIf="!loaderDisplay && !isPlaying" aria-hidden="true" class="play-track">\n            \x3c!-- Play icon (play_arrow) --\x3e\n            <svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">\n                <path d="M8 5v14l11-7z" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n        <mat-icon *ngIf="!loaderDisplay && isPlaying" aria-hidden="true" class="pause-track">\n            \x3c!-- Pause icon (pause) --\x3e\n            <svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">\n                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n    </button>\n    <button *ngIf="tracks.length > 1" (click)=\'nextSong();\' [disabled]="loaderDisplay" class="ngx-p-1 skip-next"\n        mat-button>\n        <mat-icon aria-hidden="true" class="next-track">\n            \x3c!-- Skip next icon (skip_next) --\x3e\n            <svg height="32" viewBox="0 0 24 24" width="32" xmlns="http://www.w3.org/2000/svg">\n                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n    </button>\n\n    <div class="ngx-col">\n        <div class="ngx-d-flex ngx-flex-fill ngx-justify-content-center">\n            <div class="ngx-d-none ngx-d-sm-block ngx-py-3 ngx-px-1" style="font-size: 12px">\n                <span *ngIf="duration !== 0.01">\n                    {{currentTime | secondsToMinutes}}\n                </span>\n            </div>\n            <mat-slider [disabled]="disablePositionSlider" (change)="currTimePosChanged($event)" [min]="startOffset"\n                class="ngx-d-none ngx-d-sm-block ngx-flex-fill ngx-p-1" max="{{duration-endOffset}}" style="width: 100%"\n                value="{{currentTime}}"></mat-slider>\n            <div class="ngx-py-3 ngx-px-1" style="font-size: 12px; text-align: right">\n                <span *ngIf="duration !== 0.01">\n                    -{{duration-currentTime | secondsToMinutes }}\n                </span>\n            </div>\n        </div>\n    </div>\n    <button (click)=\'toggleVolume();\' *ngIf="displayVolumeControls" class="ngx-p-1 volume" mat-button>\n        <mat-icon *ngIf="volume === 0" aria-hidden="true" class="volume-mute">\n            \x3c!-- Volume mute icon (volume_off) --\x3e\n            <svg height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg">\n                <path\n                    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" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n        <mat-icon *ngIf="volume > 0" aria-hidden="true" class="volume-up">\n            \x3c!-- Volume up icon (volume_up) --\x3e\n            <svg height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg">\n                <path\n                    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" />\n                <path d="M0 0h24v24H0z" fill="none" />\n            </svg>\n        </mat-icon>\n    </button>\n</mat-card>\n\n<mat-card *ngIf="displayTitle" class="mat-elevation-z1">\n    <div style="text-align: center;">\n        <div style="margin: 1px 2px; padding: 1em">\n            <span\n                *ngIf="!isPlaying">{{ tracks[currentIndex]?.title }}{{  displayArtist && tracks[currentIndex]?.artist ? \' | \' + tracks[currentIndex]?.artist : \'\'}}</span>\n            <marquee *ngIf="isPlaying" behavior="scroll" direction="left">{{ tracks[currentIndex]?.title\n                }}{{ displayArtist && tracks[currentIndex]?.artist ? \' | \' + tracks[currentIndex]?.artist : \'\'}}\n            </marquee>\n        </div>\n        <div class="clear"></div>\n    </div>\n</mat-card>\n\n<mat-accordion *ngIf="displayPlaylist && tracks.length > 1">\n    <mat-expansion-panel [expanded]="expanded">\n        <mat-expansion-panel-header>\n            {{tableHeader}}\n        </mat-expansion-panel-header>\n        <table [dataSource]="dataSource" class="mat-elevation-z6" mat-table>\n            <ng-container matColumnDef="title">\n                <th *matHeaderCellDef mat-header-cell>{{titleHeader}}</th>\n                <td (click)="selectTrack(element.index)" *matCellDef="let element" mat-cell>\n                    {{element.title}}\n                </td>\n            </ng-container>\n            <ng-container matColumnDef="artist">\n                <th *matHeaderCellDef mat-header-cell>{{artistHeader}}</th>\n                <td (click)="selectTrack(element.index)" *matCellDef="let element" mat-cell>\n                    {{element?.artist ? element?.artist : \'\'}}\n                </td>\n            </ng-container>\n            <ng-container matColumnDef="duration">\n                <th *matHeaderCellDef mat-header-cell>{{durationHeader}}</th>\n                <td (click)="selectTrack(element.index)" *matCellDef="let element" mat-cell>\n                    {{element?.duration ? (element?.duration | secondsToMinutes) : \'\'}}\n                </td>\n            </ng-container>\n            <ng-container matColumnDef="status">\n                <th *matHeaderCellDef mat-header-cell></th>\n                <td *matCellDef="let element" mat-cell>\n                    <div *ngIf="tracks[currentIndex]?.title === element.title">\n                        \x3c!-- <mat-icon *ngIf="isPlaying" aria-hidden="true">\n                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>\n                        </mat-icon> --\x3e\n                        <mat-icon *ngIf="isPlaying" aria-hidden="true" class="currently-playing">\n                            \x3c!-- Play icon (play_arrow) --\x3e\n                            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n                                <path d="M0 0h24v24H0z" fill="none" />\n                                <path\n                                    d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z" />\n                            </svg>\n                        </mat-icon>\n                    </div>\n                </td>\n            </ng-container>\n            <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>\n            <tr *matRowDef="let row; columns: displayedColumns;" class="mat-select-content" mat-row></tr>\n        </table>\n        <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>\n    </mat-expansion-panel>\n</mat-accordion>',styles:["mat-card,mat-slider{padding:0!important}button:focus,button:hover{outline:0!important}svg{vertical-align:top}.mat-icon{height:32px!important;width:32px!important}mat-icon>.currently-playing{height:16px!important;width:16px!important}table{width:100%}.ngx-advanced-audio-player{min-width:325px}.material-icons{font-size:16px!important}.play-pause{border-right:1px solid rgba(0,0,0,.1)}.play-pause,.volume{border-left:1px solid rgba(0,0,0,.1)}.skip-next{border-right:1px solid rgba(0,0,0,.1)}*,:after,:before{box-sizing:inherit}.ngx-p-1{padding:.25rem!important}.ngx-col,.ngx-col-1,.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-10,.ngx-col-11,.ngx-col-12,.ngx-col-auto,.ngx-col-lg,.ngx-col-lg-1,.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-10,.ngx-col-lg-11,.ngx-col-lg-12,.ngx-col-lg-auto,.ngx-col-md,.ngx-col-md-1,.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-10,.ngx-col-md-11,.ngx-col-md-12,.ngx-col-md-auto,.ngx-col-sm,.ngx-col-sm-1,.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-10,.ngx-col-sm-11,.ngx-col-sm-12,.ngx-col-sm-auto,.ngx-col-xl,.ngx-col-xl-1,.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-10,.ngx-col-xl-11,.ngx-col-xl-12,.ngx-col-xl-auto{padding-left:15px;padding-right:15px;position:relative;width:100%}.ngx-col{flex-basis:0;flex-grow:1;max-width:100%}.ngx-justify-content-center{justify-content:center!important}.ngx-flex-fill{flex:1 1 auto!important}.ngx-d-flex{display:flex!important}.ngx-pb-3,.ngx-py-3{padding-bottom:1rem!important}.ngx-pt-3,.ngx-py-3{padding-top:1rem!important}.ngx-pl-1,.ngx-px-1{padding-left:.25rem!important}.ngx-pr-1,.ngx-px-1{padding-right:.25rem!important}@media (max-width:720px){.ngx-sm-block{display:block!important}.ngx-d-none{display:none!important}}"]}]}],m.ctorParameters=function(){return[{type:e.ElementRef}]},m.propDecorators={playlist:[{type:e.Input}],matPaginator:[{type:e.ViewChild,args:[a.MatPaginator,{static:!1}]}],displayTitle:[{type:e.Input}],displayPlaylist:[{type:e.Input}],displayVolumeControls:[{type:e.Input}],pageSizeOptions:[{type:e.Input}],expanded:[{type:e.Input}],autoPlay:[{type:e.Input}],disablePositionSlider:[{type:e.Input}],displayArtist:[{type:e.Input}],displayDuration:[{type:e.Input}],tableHeader:[{type:e.Input}],titleHeader:[{type:e.Input}],artistHeader:[{type:e.Input}],durationHeader:[{type:e.Input}],trackEnded:[{type:e.Output}],player:[{type:e.ViewChild,args:["audioPlayer",{static:!0}]}],startOffset:[{type:e.Input}],endOffset:[{type:e.Input}]};var h=function(){function t(){}return t.prototype.transform=function(t){var e=("0"+Math.floor(t/3600)).slice(-2),n=("0"+Math.floor(t%3600/60)).slice(-2),a=("0"+t%60).slice(-2);return"00"!==e?e+":"+n+":"+a:n+":"+a},t}();h.decorators=[{type:e.Pipe,args:[{name:"secondsToMinutes"}]}];var x=function(){};x.decorators=[{type:e.NgModule,args:[{declarations:[h,m],imports:[d.CommonModule,u.FormsModule,c.MatButtonModule,s.MatCardModule,n.MatTableModule,l.MatFormFieldModule,r.MatSliderModule,o.MatExpansionModule,a.MatPaginatorModule,p.MatIconModule],exports:[m]}]}];var y=function(){var t=this;this.toString=function(){return"Track (index: "+t.index+", title: "+t.title+")"}};t.AudioPlayerComponent=m,t.NgxAudioPlayerModule=x,t.Track=y,t.ɵa=h,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=ngx-audio-player.umd.min.js.map

esm2015/lib/pipe/seconds-to-minutes.js

@@ -8,4 +8,4 @@ import { Pipe } from '@angular/core';
     transform(time) {
-        const hours = ('0' + Math.floor(time / 60 / 60)).slice(-2);
-        const minutes = ('0' + Math.floor(time / 60)).slice(-2);
+        const hours = ('0' + Math.floor(time / 3600)).slice(-2);
+        const minutes = ('0' + Math.floor((time % 3600) / 60)).slice(-2);
         const seconds = ('0' + time % 60).slice(-2);
@@ -21,2 +21,2 @@ if (hours !== '00') {
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kcy10by1taW51dGVzLmpzIiwic291cmNlUm9vdCI6Ii4uLy4uLy4uL3Byb2plY3RzL25neC1hdWRpby1wbGF5ZXIvc3JjLyIsInNvdXJjZXMiOlsibGliL3BpcGUvc2Vjb25kcy10by1taW51dGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ3BEOzs7RUFHRTtBQUVGLE1BQU0sT0FBTyxvQkFBb0I7SUFDN0IsU0FBUyxDQUFDLElBQVk7UUFDbEIsTUFBTSxLQUFLLEdBQUcsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDM0QsTUFBTSxPQUFPLEdBQUcsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN4RCxNQUFNLE9BQU8sR0FBRyxDQUFDLEdBQUcsR0FBRyxJQUFJLEdBQUcsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDNUMsSUFBSSxLQUFLLEtBQUssSUFBSSxFQUFFO1lBQUUsT0FBTyxHQUFHLEtBQUssSUFBSSxPQUFPLElBQUksT0FBTyxFQUFFLENBQUM7U0FBRTtRQUNoRSxPQUFPLEdBQUcsT0FBTyxJQUFJLE9BQU8sRUFBRSxDQUFDO0lBQ25DLENBQUM7OztZQVJKLElBQUksU0FBQyxFQUFFLElBQUksRUFBRSxrQkFBa0IsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbi8qXG4gKiBUcmFuc2Zvcm0gc2Vjb25kcyB0byBtaW51dGVzOnNlY29uZHNcbiAqIEV4YW1wbGUgOiAyNzAgLT4gMDI6MzBcbiovXG5AUGlwZSh7IG5hbWU6ICdzZWNvbmRzVG9NaW51dGVzJyB9KVxuZXhwb3J0IGNsYXNzIFNlY29uZHNUb01pbnV0ZXNQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gICAgdHJhbnNmb3JtKHRpbWU6IG51bWJlcik6IHN0cmluZyB7XG4gICAgICAgIGNvbnN0IGhvdXJzID0gKCcwJyArIE1hdGguZmxvb3IodGltZSAvIDYwIC8gNjApKS5zbGljZSgtMik7XG4gICAgICAgIGNvbnN0IG1pbnV0ZXMgPSAoJzAnICsgTWF0aC5mbG9vcih0aW1lIC8gNjApKS5zbGljZSgtMik7XG4gICAgICAgIGNvbnN0IHNlY29uZHMgPSAoJzAnICsgdGltZSAlIDYwKS5zbGljZSgtMik7XG4gICAgICAgIGlmIChob3VycyAhPT0gJzAwJykgeyByZXR1cm4gYCR7aG91cnN9OiR7bWludXRlc306JHtzZWNvbmRzfWA7IH1cbiAgICAgICAgcmV0dXJuIGAke21pbnV0ZXN9OiR7c2Vjb25kc31gO1xuICAgIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Vjb25kcy10by1taW51dGVzLmpzIiwic291cmNlUm9vdCI6Ii4uLy4uLy4uL3Byb2plY3RzL25neC1hdWRpby1wbGF5ZXIvc3JjLyIsInNvdXJjZXMiOlsibGliL3BpcGUvc2Vjb25kcy10by1taW51dGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ3BEOzs7RUFHRTtBQUVGLE1BQU0sT0FBTyxvQkFBb0I7SUFDN0IsU0FBUyxDQUFDLElBQVk7UUFDbEIsTUFBTSxLQUFLLEdBQUcsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN4RCxNQUFNLE9BQU8sR0FBRyxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDakUsTUFBTSxPQUFPLEdBQUcsQ0FBQyxHQUFHLEdBQUcsSUFBSSxHQUFHLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzVDLElBQUksS0FBSyxLQUFLLElBQUksRUFBQztZQUFFLE9BQU8sR0FBRyxLQUFLLElBQUksT0FBTyxJQUFJLE9BQU8sRUFBRSxDQUFDO1NBQUU7UUFDL0QsT0FBTyxHQUFHLE9BQU8sSUFBSSxPQUFPLEVBQUUsQ0FBQztJQUNuQyxDQUFDOzs7WUFSSixJQUFJLFNBQUMsRUFBRSxJQUFJLEVBQUUsa0JBQWtCLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG4vKlxuICogVHJhbnNmb3JtIHNlY29uZHMgdG8gbWludXRlczpzZWNvbmRzXG4gKiBFeGFtcGxlIDogMjcwIC0+IDAyOjMwXG4qL1xuQFBpcGUoeyBuYW1lOiAnc2Vjb25kc1RvTWludXRlcycgfSlcbmV4cG9ydCBjbGFzcyBTZWNvbmRzVG9NaW51dGVzUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xuICAgIHRyYW5zZm9ybSh0aW1lOiBudW1iZXIpOiBzdHJpbmcge1xuICAgICAgICBjb25zdCBob3VycyA9ICgnMCcgKyBNYXRoLmZsb29yKHRpbWUgLyAzNjAwKSkuc2xpY2UoLTIpO1xuICAgICAgICBjb25zdCBtaW51dGVzID0gKCcwJyArIE1hdGguZmxvb3IoKHRpbWUgJSAzNjAwKSAvIDYwKSkuc2xpY2UoLTIpO1xuICAgICAgICBjb25zdCBzZWNvbmRzID0gKCcwJyArIHRpbWUgJSA2MCkuc2xpY2UoLTIpO1xuICAgICAgICBpZiAoaG91cnMgIT09ICcwMCcpeyByZXR1cm4gYCR7aG91cnN9OiR7bWludXRlc306JHtzZWNvbmRzfWA7IH1cbiAgICAgICAgcmV0dXJuIGAke21pbnV0ZXN9OiR7c2Vjb25kc31gO1xuICAgIH1cbn1cbiJdfQ==

fesm2015/ngx-audio-player.js

@@ -334,4 +334,4 @@ import { ɵɵdefineInjectable, Injectable, Component, ElementRef, Input, ViewChild, Output, Pipe, NgModule } from '@angular/core';
     transform(time) {
-        const hours = ('0' + Math.floor(time / 60 / 60)).slice(-2);
-        const minutes = ('0' + Math.floor(time / 60)).slice(-2);
+        const hours = ('0' + Math.floor(time / 3600)).slice(-2);
+        const minutes = ('0' + Math.floor((time % 3600) / 60)).slice(-2);
         const seconds = ('0' + time % 60).slice(-2);
@@ -338,0 +338,0 @@ if (hours !== '00') {

package.json

 {
   "name": "ngx-audio-player",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

README.md

 
-A library for loading and playing audio using HTML 5 for Angular 7/8/9/10.  
+A library for loading and playing audio using HTML 5 for Angular 7/8/9/10/11.  
 (https://vmudigal.github.io/ngx-audio-player/)
 
-[![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.2.0) [![Support](https://img.shields.io/badge/support-Angular%208+-brown.svg)](https://www.npmjs.com/package/ngx-audio-player/v/8.1.2) [![Support](https://img.shields.io/badge/support-Angular%209+-black.svg)](https://www.npmjs.com/package/ngx-audio-player/v/9.2.1) [![Support](https://img.shields.io/badge/support-Angular%2010+-teal.svg)](https://www.npmjs.com/package/ngx-audio-player/v/10.1.2) [![Support](https://img.shields.io/badge/support-Angular%2010+-grey.svg)](https://www.npmjs.com/package/ngx-audio-player/v/11.0.1)
 
+[![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.2.0) [![Support](https://img.shields.io/badge/support-Angular%208+-brown.svg)](https://www.npmjs.com/package/ngx-audio-player/v/8.1.3) [![Support](https://img.shields.io/badge/support-Angular%209+-black.svg)](https://www.npmjs.com/package/ngx-audio-player/v/9.2.2) [![Support](https://img.shields.io/badge/support-Angular%2010+-teal.svg)](https://www.npmjs.com/package/ngx-audio-player/v/10.1.3) [![Support](https://img.shields.io/badge/support-Angular%2011+-grey.svg)](https://www.npmjs.com/package/ngx-audio-player/v/11.0.2)
+
 ## Table of contents
@@ -8,0 +9,0 @@

No alert changes

Improved metrics

Total package byte prevSize

255678

increased by0.03%

Number of lines in readme file

180

increased by0.56%

No dependency changes