@ngx-telly/plugin-audios/fesm2022/ngx-telly-plugin-audios.mjs

Telly - Audio picker plugin

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, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
        this.size = input('1.4rem', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
        this.audios = input([], ...(ngDevMode ? [{ debugName: "audios" }] : /* istanbul ignore next */ []));
        this.current = input(...(ngDevMode ? [undefined, { debugName: "current" }] : /* istanbul ignore next */ []));
        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: "21.2.16", ngImport: i0, type: AudioSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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      @for (a of audios(); track a.id) {\n        <li [class.enabled]=\"current() === a.id\" (click)=\"onAudioSelect(a)\">{{ a.name }}</li>\n      }\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"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AudioSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'telly-audio-select', imports: [], template: "<div class=\"wrapper\">\n  <div class=\"telly-menu telly-element\" [style.visibility]=\"show ? 'visible' : 'hidden'\" [style.opacity]=\"show ? 1 : 0\">\n    <ul>\n      @for (a of audios(); track a.id) {\n        <li [class.enabled]=\"current() === a.id\" (click)=\"onAudioSelect(a)\">{{ a.name }}</li>\n      }\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: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], audios: [{ type: i0.Input, args: [{ isSignal: true, alias: "audios", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], trackSelected: [{ type: i0.Output, args: ["trackSelected"] }], 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