Merge pull request #763 from codeMaestro78/fix/memory-leak-event-listeners

Author: EdwardMoyse

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay/overlay.component.ts

@@ -4,6 +4,7 @@ import {
   Input,
   ViewChild,
   type AfterViewInit,
+  type OnDestroy,
   ViewEncapsulation,
 } from '@angular/core';
 import type { ElementRef } from '@angular/core';
@@ -21,7 +22,7 @@ import { EventDisplayService } from '../../../services/event-display.service';
   styleUrls: ['./overlay.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class OverlayComponent implements AfterViewInit {
+export class OverlayComponent implements AfterViewInit, OnDestroy {
   /** Title of the overlay. */
   @Input() overlayTitle: string;
   /** If the overlay is open or not. */
@@ -39,6 +40,9 @@ export class OverlayComponent implements AfterViewInit {
   /** Aspect ratio of the overlay view. */
   aspectRatio: number = window.innerWidth / window.innerHeight;
 
+  /** Bound resize handler for cleanup. */
+  private resizeHandler = () => this.resetHandlePosition();
+
   // ********************************************************************************
   // * Below code is specific to the overlay resize feature. (LOOK INTO CSS RESIZE) *
   // ********************************************************************************
@@ -70,12 +74,17 @@ export class OverlayComponent implements AfterViewInit {
         this.resetHandlePosition();
       });
 
-      window.addEventListener('resize', () => {
-        this.resetHandlePosition();
-      });
+      window.addEventListener('resize', this.resizeHandler);
     }
   }
 
+  /**
+   * Clean up event listeners when the component is destroyed.
+   */
+  ngOnDestroy() {
+    window.removeEventListener('resize', this.resizeHandler);
+  }
+
   /**
    * Resize the overlay card when the resize handle is dragged.
    */

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ss-mode/ss-mode.component.ts

@@ -1,5 +1,9 @@
-import { type OnInit } from '@angular/core';
-import { Component, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  ViewEncapsulation,
+  type OnDestroy,
+  type OnInit,
+} from '@angular/core';
 
 @Component({
   standalone: false,
@@ -8,7 +12,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   styleUrls: ['./ss-mode.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class SSModeComponent implements OnInit {
+export class SSModeComponent implements OnInit, OnDestroy {
   ssMode: boolean = false;
 
   ngOnInit() {
@@ -38,4 +42,22 @@ export class SSModeComponent implements OnInit {
   private onDocumentClick = () => {
     document.exitFullscreen?.();
   };
+
+  /**
+   * Clean up event listeners and fullscreen state when the component is destroyed.
+   */
+  ngOnDestroy() {
+    // Prevent any further toggleSSMode calls from fullscreenchange during teardown.
+    document.onfullscreenchange = null;
+    // Remove input event listeners.
+    document.removeEventListener('click', this.onDocumentClick);
+    document.removeEventListener('touchstart', this.onDocumentClick);
+    // If still in fullscreen or ssMode is active, exit fullscreen and reset UI state.
+    if (document.fullscreenElement || this.ssMode) {
+      document.exitFullscreen?.();
+    }
+    // Ensure the ss-mode class and internal state are cleared.
+    document.body.classList.remove('ss-mode');
+    this.ssMode = false;
+  }
 }