@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
96 lines (92 loc) • 4.03 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Input, Output } from '@angular/core';
import { tuiInjectElement } from '@taiga-ui/cdk/utils';
class TuiMedia {
constructor() {
this.el = tuiInjectElement();
this.playbackRate = 1;
this.volume = 1;
this.currentTimeChange = new EventEmitter();
this.pausedChange = new EventEmitter();
this.volumeChange = new EventEmitter();
}
set playbackRateSetter(playbackRate) {
this.updatePlaybackRate(playbackRate);
}
set currentTime(currentTime) {
if (Math.abs(currentTime - this.currentTime) > 0.05) {
this.el.currentTime = currentTime;
}
}
set paused(paused) {
if (paused) {
this.el.pause?.();
}
else {
void this.el.play?.();
this.updatePlaybackRate(this.playbackRate);
}
}
get currentTime() {
return this.el.currentTime ?? 0;
}
get paused() {
return this.el.paused;
}
onPausedChange(paused) {
this.pausedChange.emit(paused);
this.updatePlaybackRate(this.playbackRate);
}
onVolumeChange() {
this.volume = this.el.volume;
this.volumeChange.emit(this.volume);
}
onCurrentTimeChange() {
this.currentTimeChange.emit(this.currentTime);
}
updatePlaybackRate(playbackRate) {
this.playbackRate = playbackRate;
this.el.playbackRate = this.playbackRate;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiMedia, isStandalone: true, selector: "video[tuiMedia], audio[tuiMedia]", inputs: { volume: "volume", playbackRateSetter: ["playbackRate", "playbackRateSetter"], currentTime: "currentTime", paused: "paused" }, outputs: { currentTimeChange: "currentTimeChange", pausedChange: "pausedChange", volumeChange: "volumeChange" }, host: { listeners: { "durationchange": "0", "ended": "onPausedChange(true)", "pause": "onPausedChange(true)", "play": "onPausedChange(false)", "volumechange": "onVolumeChange()", "timeupdate": "onCurrentTimeChange()", "seeking": "onCurrentTimeChange()", "seeked": "onCurrentTimeChange()" }, properties: { "volume": "volume" } }, exportAs: ["tuiMedia"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMedia, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'video[tuiMedia], audio[tuiMedia]',
exportAs: 'tuiMedia',
host: {
'[volume]': 'volume',
'(durationchange)': '0',
'(ended)': 'onPausedChange(true)',
'(pause)': 'onPausedChange(true)',
'(play)': 'onPausedChange(false)',
'(volumechange)': 'onVolumeChange()',
'(timeupdate)': 'onCurrentTimeChange()',
'(seeking)': 'onCurrentTimeChange()',
'(seeked)': 'onCurrentTimeChange()',
},
}]
}], propDecorators: { volume: [{
type: Input
}], currentTimeChange: [{
type: Output
}], pausedChange: [{
type: Output
}], volumeChange: [{
type: Output
}], playbackRateSetter: [{
type: Input,
args: ['playbackRate']
}], currentTime: [{
type: Input
}], paused: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiMedia };
//# sourceMappingURL=taiga-ui-cdk-directives-media.mjs.map