Currently, I am facing an issue with my Angular 7 ng-bootstrap modal. The problem arises when the modal, which includes a video player within an <iframe>, is moved to the production system. Whenever there is any mouse movement detected, the video gets reloaded, causing inconvenience.
In an attempt to resolve this issue, I implemented a directive to capture mouse events and prevent the reloading of the video.
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[mt2StopMouseEvents]'
})
export class StopMouseEventsDirective {
@HostListener('mouseover', [ '$event' ])
public onMouseover(event: any): void {
console.log(`onMouseOver\t${JSON.stringify(event)}`);
event.stopPropagation();
}
@HostListener('mousemove', [ '$event' ])
public onMousemove(event: any): void {
console.log(`onMousemove\t${JSON.stringify(event)}`);
event.stopPropagation();
}
@HostListener('mouseleave', [ '$event' ])
public onMouseleave(event: any): void {
console.log(`onMouseleave\t${JSON.stringify(event)}`);
event.stopPropagation();
}
@HostListener('mousemout', [ '$event' ])
public onMouseout(event: any): void {
console.log(`onMouseout\t${JSON.stringify(event)}`);
event.stopPropagation();
}
constructor() { }
}
The directive is applied to the modal like so:
<div class="modal-content" mt2StopMouseEvents >
<div class="modal-header bg-success">
<h3 class="modal-title ">{{title}}</h3>
<button type="button" class="btn btn-light" (click)="activeModal.dismiss('Close click')">Close</button>
</div>
<div class="modal-body">
<iframe height="100%" width="100%" [src]="getURL()"></iframe>
</div>
</div>
Here is a brief overview of the help model component structure:
import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'mt2-help',
templateUrl: './myHelp.component.html',
styleUrls: [ './myHelp.component.scss' ],
})
export class MyHelpComponent implements OnInit {
@Input() title;
@Input() helpURL;
constructor(
private sanitizer: DomSanitizer,
public activeModal: NgbActiveModal
) { }
ngOnInit() {
}
getURL(): SafeResourceUrl {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.helpURL);
}
}
Despite capturing the events successfully, the video still reloads. Below is a snippet from the console log for reference:
onMousemove {"isTrusted":true} stop-mouse-events.directive.ts:26
onMouseleave {"isTrusted":true} stop-mouse-events.directive.ts:11
onMouseOver {"isTrusted":true} stop-mouse-events.directive.ts:16
I appreciate any assistance provided. Thank you.