refactor: replace shared COMPONENT_OVERLAY_REF with local tokens

apps/web/src/app/home/video-player/video-player.component.ts

@@ -1,7 +1,14 @@
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { AsyncPipe, CommonModule } from '@angular/common';
-import { Component, Injector, OnInit, effect, inject } from '@angular/core';
+import {
+    Component,
+    InjectionToken,
+    Injector,
+    OnInit,
+    effect,
+    inject,
+} from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -27,7 +34,6 @@ import {
 import { Observable, combineLatestWith, filter, map, switchMap } from 'rxjs';
 import { DataService, PlaylistsService } from 'services';
 import {
-    COMPONENT_OVERLAY_REF,
     Channel,
     PLAYLIST_PARSE_BY_URL,
     STORE_KEY,
@@ -67,6 +73,10 @@ export class VideoPlayerComponent implements OnInit {
     private readonly storage = inject(StorageMap);
     private readonly store = inject(Store);
 
+    private readonly COMPONENT_OVERLAY_REF = new InjectionToken<OverlayRef>(
+        'COMPONENT_OVERLAY_REF'
+    );
+
     /** Active selected channel */
     readonly activeChannel$ = this.store
         .select(selectActive)
@@ -204,7 +214,7 @@ export class VideoPlayerComponent implements OnInit {
         const injector = Injector.create({
             providers: [
                 {
-                    provide: COMPONENT_OVERLAY_REF,
+                    provide: this.COMPONENT_OVERLAY_REF,
                     useValue: this.overlayRef,
                 },
             ],

libs/ui/components/src/lib/multi-epg/multi-epg-container.component.ts

@@ -7,6 +7,7 @@ import {
     Component,
     ElementRef,
     inject,
+    InjectionToken,
     Input,
     OnDestroy,
     OnInit,
@@ -20,12 +21,7 @@ import { MomentDatePipe } from '@iptvnator/pipes';
 import { TranslatePipe } from '@ngx-translate/core';
 import { addDays, differenceInMinutes, format, parse, subDays } from 'date-fns';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
-import {
-    Channel,
-    COMPONENT_OVERLAY_REF,
-    EpgChannel,
-    EpgProgram,
-} from 'shared-interfaces';
+import { Channel, EpgChannel, EpgProgram } from 'shared-interfaces';
 import { EpgItemDescriptionComponent } from '../epg-list/epg-item-description/epg-item-description.component';
 
 interface EnrichedProgram extends EpgProgram {
@@ -93,7 +89,13 @@ export class MultiEpgContainerComponent
 
     private readonly dialog = inject(MatDialog);
     private readonly cdr = inject(ChangeDetectorRef);
-    private readonly overlayRef = inject<OverlayRef>(COMPONENT_OVERLAY_REF);
+    private readonly COMPONENT_OVERLAY_REF = new InjectionToken<OverlayRef>(
+        'COMPONENT_OVERLAY_REF'
+    );
+
+    private readonly overlayRef = inject<OverlayRef>(
+        this.COMPONENT_OVERLAY_REF
+    );
 
     ngOnInit() {
         this.calculateCurrentTimeBar();