@ngx-telly/plugin-audios
Version:
Telly - Audio picker plugin
54 lines (49 loc) • 4.29 kB
JavaScript
import { NgForOf } from '@angular/common';
import * as i0 from '@angular/core';
import { input, output, inject, HostListener, HostBinding, Component } from '@angular/core';
import { PlayerComponent } from '@ngx-telly/player';
import { TellyEventsService } from '@ngx-telly/player/services';
import { takeUntil } from 'rxjs';
const tracks = "M15,6H3V8H15V6M15,10H3V12H15V10M3,16H11V14H3V16M17,6V14.18C16.69,14.07 16.35,14 16,14A3,3 0 0,0 13,17A3,3 0 0,0 16,20A3,3 0 0,0 19,17V8H22V6H17Z";
class AudioSelectComponent {
constructor() {
this.icon = input(tracks);
this.size = input('1.4rem');
this.audios = input([]);
this.current = input();
this.trackSelected = output();
this.events = inject(TellyEventsService);
this.player = inject(PlayerComponent);
this.show = false;
}
get display() {
return this.audios().length ? 'flex' : 'none';
}
onClick() {
this.show = !this.show;
}
ngOnInit() {
this.events.hide$.pipe(takeUntil(this.events.destroy$)).subscribe((hide) => (this.show = !hide));
}
onAudioSelect(track) {
track.select();
this.player.media.indicate(`Audio: ${track.name}`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AudioSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: AudioSelectComponent, isStandalone: true, selector: "telly-audio-select", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, audios: { classPropertyName: "audios", publicName: "audios", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trackSelected: "trackSelected" }, host: { listeners: { "pointerdown": "onClick()" }, properties: { "style.display": "this.display" } }, ngImport: i0, template: "<div class=\"wrapper\">\n <div class=\"telly-menu telly-element\" [style.visibility]=\"show ? 'visible' : 'hidden'\" [style.opacity]=\"show ? 1 : 0\">\n <ul>\n <li [class.enabled]=\"current() === a.id\" *ngFor=\"let a of audios()\" (click)=\"onAudioSelect(a)\">{{ a.name }}</li>\n </ul>\n </div>\n</div>\n\n<div class=\"icon-wrapper\" tip=\"Audio tracks\">\n <svg\n viewBox=\"0 0 24 24\"\n [style.width]=\"size()\"\n >\n <path\n fill=\"white\"\n [attr.d]=\"icon()\"\n />\n </svg>\n</div>\n", styles: [".wrapper{position:relative}.icon-wrapper{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AudioSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'telly-audio-select', imports: [NgForOf], template: "<div class=\"wrapper\">\n <div class=\"telly-menu telly-element\" [style.visibility]=\"show ? 'visible' : 'hidden'\" [style.opacity]=\"show ? 1 : 0\">\n <ul>\n <li [class.enabled]=\"current() === a.id\" *ngFor=\"let a of audios()\" (click)=\"onAudioSelect(a)\">{{ a.name }}</li>\n </ul>\n </div>\n</div>\n\n<div class=\"icon-wrapper\" tip=\"Audio tracks\">\n <svg\n viewBox=\"0 0 24 24\"\n [style.width]=\"size()\"\n >\n <path\n fill=\"white\"\n [attr.d]=\"icon()\"\n />\n </svg>\n</div>\n", styles: [".wrapper{position:relative}.icon-wrapper{display:flex;justify-content:center}\n"] }]
}], propDecorators: { display: [{
type: HostBinding,
args: ['style.display']
}], onClick: [{
type: HostListener,
args: ['pointerdown']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { AudioSelectComponent };
//# sourceMappingURL=ngx-telly-plugin-audios.mjs.map