ionic-audio
Version:
An audio player for Ionic 3 and Angular 5
92 lines • 3.5 kB
JavaScript
import { Component, ElementRef, Input } from '@angular/core';
/**
* # ```<audio-track-play>```
*
* Renders a play/pause button that optionally displays a loading spinner
*
* ## Usage
* ````
* <audio-track #audio [track]="myTrack" (onFinish)="onTrackFinished($event)">
* <ion-item>
* <audio-track-play item-left [audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>
* <h3>{{audio.title}}</h3>
* </ion-item>
* </audio-track>
* ````
* If placed within a ```<ion-thumnbail>``` component it will render as a semi-transparent button layover (see live demo).
* Passing a ```<ion-spinner>``` as a child element will display a loading spinner while loading.
*
* ````
* <audio-track #audio [track]="track" (onFinish)="onTrackFinished($event)">
* <ion-item>
* <ion-thumbnail item-left>
* <img src="{{audio.art}}">
* <audio-track-play dark [audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>
* </ion-thumbnail>
* <p><strong>{{audio.title}}</strong></p>
* </ion-item>
* </audio-track>
* ````
*
* @element audio-track-play
* @parents audio-track
* @export
* @class AudioTrackPlayComponent
*/
var AudioTrackPlayComponent = (function () {
function AudioTrackPlayComponent(el) {
this.el = el;
}
Object.defineProperty(AudioTrackPlayComponent.prototype, "light", {
set: /**
* Renders the component using the light theme
*
* @property @Input() light
* @type {boolean}
*/
function (val) {
this.el.nativeElement.firstElementChild.classList.add('light');
},
enumerable: true,
configurable: true
});
Object.defineProperty(AudioTrackPlayComponent.prototype, "dark", {
set: /**
* Renders the component using the dark theme
*
* @property @Input() dark
* @type {boolean}
*/
function (val) {
this.el.nativeElement.firstElementChild.classList.add('dark');
},
enumerable: true,
configurable: true
});
AudioTrackPlayComponent.prototype.toggle = function (event) {
if (this.audioTrack.isPlaying) {
this.audioTrack.pause();
}
else {
this.audioTrack.play();
}
};
AudioTrackPlayComponent.decorators = [
{ type: Component, args: [{
selector: 'audio-track-play',
template: "\n <button ion-button icon-only clear (click)=\"toggle($event)\" [disabled]=\"audioTrack.error || audioTrack.isLoading\">\n <ion-icon name=\"pause\" *ngIf=\"audioTrack.isPlaying && !audioTrack.isLoading\"></ion-icon>\n <ion-icon name=\"play\" *ngIf=\"!audioTrack.isPlaying && !audioTrack.isLoading\"></ion-icon>\n <ng-content *ngIf=\"audioTrack.isLoading && !audioTrack.error\"></ng-content>\n </button>\n "
},] },
];
/** @nocollapse */
AudioTrackPlayComponent.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
AudioTrackPlayComponent.propDecorators = {
"audioTrack": [{ type: Input },],
"light": [{ type: Input },],
"dark": [{ type: Input },],
};
return AudioTrackPlayComponent;
}());
export { AudioTrackPlayComponent };
//# sourceMappingURL=ionic-audio-track-play-component.js.map