ngx-audio-player
Version:
[](https://www.npmjs.com/package/ngx-audio-player) [](https://www.npmjs.com/package/ngx-audio-player) [![licence](h
1 lines • 12 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"MatAdvancedAudioPlayerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵa"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"mat-advanced-audio-player","template":"<mat-card class=\"row d-flex justify-content-center ngx-advanced-audio-player\" style=\"margin: 0px;\">\n <audio [src]=\"playlistTrack[1].link\" #audioPlayer></audio>\n \n <button mat-button class=\"p-1\" style=\"border-left: 1px solid #ddd;\" (click)='previousSong();' [disabled]=\"loaderDisplay\">\n <fa-icon class=\"fa fa-lg\" [icon]=\"['fas','step-backward']\" aria-hidden=\"true\"></fa-icon>\n </button>\n <button mat-button class=\"p-1\" (click)='playBtnHandler();' style=\"border-left: 2px solid #ccc; border-right: 2px solid #ccc;\"\n [disabled]=\"loaderDisplay\">\n <fa-icon *ngIf=\"loaderDisplay\" title=\"loading...\" class=\"fa fa-2x loading-track\" [pulse]=\"true\" [icon]=\"['fas','spinner']\"\n aria-hidden=\"true\"></fa-icon>\n <fa-icon *ngIf=\"!loaderDisplay && !isPlaying\" class=\"fa fa-2x play-track\" style=\"color:#444\" [icon]=\"['fas','play']\"\n aria-hidden=\"true\"></fa-icon>\n <fa-icon *ngIf=\"!loaderDisplay && isPlaying\" class=\"fa fa-2x pause-track\" style=\"color:#444\" [icon]=\"['fas','pause']\"\n aria-hidden=\"true\"></fa-icon>\n </button>\n <button mat-button class=\"p-1\" style=\"border-right: 1px solid #ddd;\" (click)='nextSong();' [disabled]=\"loaderDisplay\">\n <fa-icon class=\"fa fa-lg next-track\" [icon]=\"['fas','step-forward']\" aria-hidden=\"true\"></fa-icon>\n </button>\n\n <div class=\"col\">\n <div class=\"d-flex flex-fill\">\n <div class=\"py-3 px-1\" style=\"font-size: 12px\">\n <span *ngIf=\"duration !== 0.01\">\n {{currentTime | secondsToMinutes}}\n </span>\n </div>\n <mat-slider class=\"flex-fill p-1\" style=\"width: 100%\" min=\"0\" max=\"{{duration}}\" value=\"{{currentTime}}\" (change)=\"currTimePosChanged($event)\"></mat-slider>\n\n <div class=\"py-3 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\n</mat-card>\n\n<mat-card *ngIf=\"displayTitle\" style=\"border: 1px solid #ddd; box-shadow: none;\">\n <div class=\"p-1\" style=\"text-align: center;\">\n <div style=\"padding:1px 3px;\">\n <span *ngIf=\"!isPlaying\">{{ playlistTrack[1].title }}</span>\n <marquee *ngIf=\"isPlaying\" behavior=\"scroll\" direction=\"left\">{{ playlistTrack[1].title }}</marquee>\n </div>\n <div class=\"clear\"></div>\n </div>\n</mat-card>\n\n<mat-accordion *ngIf=\"displayPlaylist\">\n <mat-expansion-panel>\n <mat-expansion-panel-header>\n Play List\n </mat-expansion-panel-header>\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z6\">\n <ng-container matColumnDef=\"title\">\n <th mat-header-cell *matHeaderCellDef> Title </th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"selectTrack(element.index)\"> {{element.title}} </td>\n </ng-container>\n <ng-container matColumnDef=\"status\">\n <th mat-header-cell *matHeaderCellDef> </th>\n <td mat-cell *matCellDef=\"let element\">\n <div *ngIf=\"playlistTrack[1].title === element.title\">\n <fa-icon *ngIf=\"isPlaying\" class=\"fa\" [icon]=\"['fas','play']\" [spin]=\"true\" aria-hidden=\"true\"></fa-icon>\n <fa-icon *ngIf=\"!isPlaying\" class=\"fa\" [icon]=\"['fas','play']\" aria-hidden=\"true\"></fa-icon>\n </div>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr class=\"mat-select-content\" mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n <mat-paginator [pageSizeOptions]=\"[2, 5, 10]\" showFirstLastButtons></mat-paginator>\n </mat-expansion-panel>\n</mat-accordion>","styles":["@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap-grid.min.css);mat-card{padding:0!important}mat-slider{max-height:30px}table{width:100%}button:focus,button:hover{outline:0!important}.ngx-advanced-audio-player{min-width:275px}"]}]}],"members":{"displayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"displayPlaylist":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"matPaginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MatPaginator","line":45,"character":15}]}]}],"setDataSourceAttributes":[{"__symbolic":"method"}],"nextSong":[{"__symbolic":"method"}],"previousSong":[{"__symbolic":"method"}],"resetSong":[{"__symbolic":"method"}],"selectTrack":[{"__symbolic":"method"}],"checkIfSongHasStartedSinceAtleastTwoSeconds":[{"__symbolic":"method"}],"playlist":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}]}},"MatBasicAudioPlayerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵa"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mat-basic-audio-player","template":"<mat-card class=\"d-flex ngx-basic-audio-player\">\n <audio [src]=\"audioUrl\" #audioPlayer></audio>\n <button mat-button (click)='playBtnHandler();' class=\"p-1 ngx-basic-audio-player-button-handler\" [disabled]=\"loaderDisplay\">\n <fa-icon *ngIf=\"loaderDisplay\" title=\"loading...\" class=\"fa fa-lg loading-track\" [pulse]=\"true\" [icon]=\"['fas','spinner']\"\n aria-hidden=\"true\"></fa-icon>\n <fa-icon *ngIf=\"!loaderDisplay && !isPlaying\" class=\"fa fa-lg play-track\" [icon]=\"['fas','play']\" aria-hidden=\"true\"></fa-icon>\n <fa-icon *ngIf=\"!loaderDisplay && isPlaying\" class=\"fa fa-lg pause-track\" [icon]=\"['fas','pause']\" aria-hidden=\"true\"></fa-icon>\n </button>\n <div class=\"flex-fill p-1 ngx-basic-audio-player-slider\">\n <mat-slider style=\"width: 100%\" min=\"0\" max=\"{{duration}}\" value=\"{{currentTime}}\" (change)=\"currTimePosChanged($event)\"></mat-slider>\n </div>\n <div class=\"p-3 ngx-basic-audio-player-duration\">\n <span *ngIf=\"duration !== 0.01\">\n -{{duration-currentTime |\n secondsToMinutes }}\n </span>\n </div>\n</mat-card>\n<mat-card *ngIf=\"displayTitle && title !== ''\" style=\"border-top: 1px solid #ddd;\">\n <div style=\"text-align: center;\">\n <div style=\"padding:1px 3px;\">\n {{ title }}\n </div>\n </div>\n</mat-card>\n","styles":["@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap-grid.min.css);mat-card,mat-slider{padding:0!important}button:focus,button:hover{outline:0!important}.ngx-basic-audio-player{min-width:275px}"]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"audioUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"displayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"resetSong":[{"__symbolic":"method"}]}},"NgxAudioPlayerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MatBasicAudioPlayerComponent"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"MatAdvancedAudioPlayerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":12},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":16,"character":26},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":16,"character":43},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":16,"character":58},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":16,"character":74},{"__symbolic":"reference","module":"@angular/material","name":"MatSliderModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatExpansionModule","line":17,"character":21},{"__symbolic":"reference","module":"@angular/material","name":"MatPaginatorModule","line":17,"character":41},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":17,"character":61},{"__symbolic":"reference","module":"@fortawesome/angular-fontawesome","name":"FontAwesomeModule","line":17,"character":74}],"exports":[{"__symbolic":"reference","name":"MatBasicAudioPlayerComponent"},{"__symbolic":"reference","name":"MatAdvancedAudioPlayerComponent"}],"providers":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"Track":{"__symbolic":"class","members":{}},"ɵa":{"__symbolic":"class","members":{"player":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":5,"character":5},"arguments":["audioPlayer"]}]}],"currTimePosChanged":[{"__symbolic":"method"}],"bindPlayerEvent":[{"__symbolic":"method"}],"playBtnHandler":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"init":[{"__symbolic":"method"}],"nextSong":[{"__symbolic":"method"}],"previousSong":[{"__symbolic":"method"}],"resetPlaylist":[{"__symbolic":"method"}],"selectATrack":[{"__symbolic":"method"}],"updateCurrentSong":[{"__symbolic":"method"}],"getSubjectCurrentTrack":[{"__symbolic":"method"}],"getPlaylist":[{"__symbolic":"method"}],"setPlaylist":[{"__symbolic":"method"}],"getIndexSong":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":5,"character":1},"arguments":[{"name":"secondsToMinutes"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"MatAdvancedAudioPlayerComponent":"./lib/component/mat-advanced-audio-player/mat-advanced-audio-player.component","MatBasicAudioPlayerComponent":"./lib/component/mat-basic-audio-player/mat-basic-audio-player.component","NgxAudioPlayerModule":"./lib/ngx-audio-player.module","Track":"./lib/model/track.model","ɵa":"./lib/component/base/base-audio-player-components","ɵb":"./lib/service/audio-player-service/audio-player.service","ɵc":"./lib/pipe/seconds-to-minutes"},"importAs":"ngx-audio-player"}