clean create event page, stop video, event list box

src/app/services/DomSanitizer.service.ts

@@ -24,13 +24,54 @@ export class DomSanitizerService {
   }
 
   private encodeSpecialCharacters(input: string): string {
+    const specialCharactersMap: Record<string, string> = {
+      '!': '&#33;',
+      '@': '&#64;',
+      '#': '&#35;',
+      '$': '&#36;',
+      '%': '&#37;',
+      '^': '&#94;',
+      '&': '&#38;',
+      '*': '&#42;',
+      '(': '&#40;',
+      ')': '&#41;',
+      '-': '&#45;',
+      '_': '&#95;',
+      '+': '&#43;',
+      '=': '&#61;',
+      '{': '&#123;',
+      '}': '&#125;',
+      '|': '&#124;',
+      '\\': '&#92;',
+      ':': '&#58;',
+      ';': '&#59;',
+      '"': '&#34;',
+      "'": '&#39;',
+      '<': '&#60;',
+      '>': '&#62;',
+      ',': '&#44;',
+      '.': '&#46;',
+      '?': '&#63;',
+      '/': '&#47;',
+      'ã': '&atilde;', // ã
+      'ç': '&ccedil;', // ç
+      'Â': '&Acirc;',  // Â
+      'â': '&acirc;',  // â
+      'Ã': '&Atilde;', // Ã
+    };
+  
+    return input.replace(/[!@#$%^&*()-_+=\{\}|\\:;"'<>,.?/ãçÂâÃ]/g, match => specialCharactersMap[match] || match);
+  }
+  
+
+  // private encodeSpecialCharacters(input: string): string {
     // You can use a library like DOMPurify to encode special characters
-    return DOMPurify.sanitize(input);
+   // return DOMPurify.sanitize(input);
 
     // If you don't want to use an external library, you can manually encode
     // Here's a simple example, you may need to extend this based on your requirements
     /* return input.replace(/</g, '&lt;').replace(/>/g, '&gt;'); */
-  }
+ // } 
 
   /*  sanitizeInput(input: string): string {
      return this.sanitizer.sanitize(SecurityContext.HTML, input);

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

@@ -15,6 +15,9 @@ export class VisibilityDirective {
       threshold: 0.5 // Adjust as needed
     };
 
+
+    console.log(this.elementRef.nativeElement.parentElement, "=1=")
+
     this.intersectionObserver = new IntersectionObserver(entries => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {

src/app/services/directives/visibility1.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/visibility1.directive.ts

@@ -0,0 +1,36 @@
+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
+    };
+
+
+    console.log(this.elementRef.nativeElement.parentElement, "=1=")
+
+    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);
+  }
+
+}