improve

src/app/services/directives/visibility.directive.spec.ts

@@ -0,0 +1,8 @@
+import { VisibilityDirective } from './visibility.directive';
+
+describe('VisibilityDirective', () => {
+  it('should create an instance', () => {
+    const directive = new VisibilityDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/services/directives/visibility.directive.ts

@@ -0,0 +1,33 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appVisibility]'
+})
+export class VisibilityDirective {
+
+  intersectionObserver: IntersectionObserver;
+  @Input() appVisibility: (arg: any) => void;
+
+  constructor(private elementRef: ElementRef) {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.5 // Adjust as needed
+    };
+
+    this.intersectionObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.appVisibility(true);
+        } else {
+          this.elementRef.nativeElement.pause()
+          // Pause video when not visible
+          this.appVisibility(false); // You can implement pause logic here
+        }
+      });
+    }, options);
+
+    this.intersectionObserver.observe(this.elementRef.nativeElement);
+  }
+
+}