I'm using dash-video and want to add an interceptor.
The problem is Dash is initialized under api property by DashVideoElement, but I can't find any event when this is ready.
@Component({
selector: 'app-root',
template: `
<media-controller>
<dash-video
#video
src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd"
slot="media"
crossorigin
muted
></dash-video>
</media-controller>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {
protected video = viewChild.required<ElementRef<any>>('video');
constructor() {
effect(() => {
setTimeout(() => {
// I want to get `api` (which is Dash instance)
this.video().nativeElement.api.addRequestInterceptor(interceptor);
}, 1000);
});
}
}
How do I get to api (Dash instance) when it is initialized?
While this example is in Angular, it's not Angular specific issue.
https://stackblitz.com/edit/stackblitz-starters-nnzkhglb?file=src%2Fmain.ts
It's a custom element, extending won't work, so you could use Object.defineProperty to intercept/detect when .api property is added to the instance, and then call your method from there:
const videoEl = this.video().nativeElement;
// intercept api property
let apiPropValue: any;
Object.defineProperty(videoEl, 'api', {
configurable: true,
enumerable: true,
get() {
return apiPropValue;
},
set: (value) => {
apiPropValue = value;
console.log('api prop set', value);
console.log('Adding interceptor');
apiPropValue.addRequestInterceptor(interceptor);
//this.video().nativeElement.api.addRequestInterceptor(interceptor);
}
});