@ngx-telly/plugin-captions
Version:
Telly - Caption picker plugin
59 lines (54 loc) • 5.21 kB
JavaScript
import * as i0 from '@angular/core';
import { input, 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 captions = "M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z";
class CaptionSelectComponent {
constructor() {
this.icon = input(captions, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
this.size = input('1.4rem', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
this.captions = input([], ...(ngDevMode ? [{ debugName: "captions" }] : /* istanbul ignore next */ []));
this.current = input(...(ngDevMode ? [undefined, { debugName: "current" }] : /* istanbul ignore next */ []));
this.events = inject(TellyEventsService);
this.player = inject(PlayerComponent);
this.show = false;
}
get display() {
return this.captions().length > 1 ? 'flex' : 'none';
}
onClick() {
this.show = !this.show;
}
ngOnInit() {
this.events.hide$.pipe(takeUntil(this.events.destroy$)).subscribe((hide) => (this.show = !hide));
}
ngOnChanges(changes) {
if (changes['current']?.currentValue != null) {
const track = this.captions().find((x) => x.id === changes['current'].currentValue);
if (track)
this.onCaptionSelect(track);
}
}
onCaptionSelect(track) {
track.callback();
this.player.media.indicate(`Captions: ${track.name}`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CaptionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: CaptionSelectComponent, isStandalone: true, selector: "telly-caption-select", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, captions: { classPropertyName: "captions", publicName: "captions", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onClick()" }, properties: { "style.display": "this.display" } }, usesOnChanges: true, 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 (c of captions(); track c.id) {\n <li [class.enabled]=\"current() === c.id\" (click)=\"onCaptionSelect(c)\">{{ c.name }}</li>\n }\n </ul>\n </div>\n</div>\n\n<div class=\"icon-wrapper\" tip=\"Subtitles\">\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: CaptionSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'telly-caption-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 (c of captions(); track c.id) {\n <li [class.enabled]=\"current() === c.id\" (click)=\"onCaptionSelect(c)\">{{ c.name }}</li>\n }\n </ul>\n </div>\n</div>\n\n<div class=\"icon-wrapper\" tip=\"Subtitles\">\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 }] }], captions: [{ type: i0.Input, args: [{ isSignal: true, alias: "captions", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], display: [{
type: HostBinding,
args: ['style.display']
}], onClick: [{
type: HostListener,
args: ['pointerdown']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { CaptionSelectComponent };
//# sourceMappingURL=ngx-telly-plugin-captions.mjs.map