@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
71 lines (67 loc) • 3.76 kB
JavaScript
import * as i0 from '@angular/core';
import { effect, untracked, input, model, Directive } from '@angular/core';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
class TuiMedia {
constructor() {
this.el = tuiInjectElement();
this.setElCurrentTime = effect(() => {
if (Math.abs(this.currentTime() - this.el.currentTime) > 0.05) {
this.el.currentTime = this.currentTime();
}
});
this.setElPlaybackRate = effect(() => {
this.updatePlaybackRate(this.playbackRate());
});
this.setElPaused = effect(() => {
const paused = this.paused();
if (paused) {
this.el.pause?.();
}
else {
void this.el.play?.();
}
this.updatePlaybackRate(untracked(this.playbackRate));
});
this.playbackRate = input(1);
this.volume = model(1);
this.currentTime = model(this.el.currentTime ?? 0);
this.paused = model(this.el.paused);
}
onPausedChange(paused) {
this.paused.set(paused);
}
onVolumeChange() {
this.volume.set(this.el.volume);
}
onCurrentTimeChange() {
this.currentTime.set(this.el.currentTime);
}
updatePlaybackRate(playbackRate) {
this.el.playbackRate = playbackRate;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiMedia, isStandalone: true, selector: "video[tuiMedia], audio[tuiMedia]", inputs: { playbackRate: { classPropertyName: "playbackRate", publicName: "playbackRate", isSignal: true, isRequired: false, transformFunction: null }, volume: { classPropertyName: "volume", publicName: "volume", isSignal: true, isRequired: false, transformFunction: null }, currentTime: { classPropertyName: "currentTime", publicName: "currentTime", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { volume: "volumeChange", currentTime: "currentTimeChange", paused: "pausedChange" }, host: { listeners: { "durationchange": "0", "ended": "onPausedChange(true)", "pause": "onPausedChange(true)", "play": "onPausedChange(false)", "seeked": "onCurrentTimeChange()", "seeking": "onCurrentTimeChange()", "timeupdate": "onCurrentTimeChange()", "volumechange": "onVolumeChange()" }, properties: { "volume": "volume()" } }, exportAs: ["tuiMedia"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiMedia, decorators: [{
type: Directive,
args: [{
selector: 'video[tuiMedia], audio[tuiMedia]',
exportAs: 'tuiMedia',
host: {
'[volume]': 'volume()',
'(durationchange)': '0',
'(ended)': 'onPausedChange(true)',
'(pause)': 'onPausedChange(true)',
'(play)': 'onPausedChange(false)',
'(seeked)': 'onCurrentTimeChange()',
'(seeking)': 'onCurrentTimeChange()',
'(timeupdate)': 'onCurrentTimeChange()',
'(volumechange)': 'onVolumeChange()',
},
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiMedia };
//# sourceMappingURL=taiga-ui-cdk-directives-media.mjs.map