[player] Replace IntersectionService with IntersectionDetector class

projects/player/src/app/services/intersection.service.ts → projects/player/src/app/classes/intersection-detector.ts

-import {
-  EventEmitter, Inject, Injectable, Output
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { EventEmitter } from '@angular/core';
 
-@Injectable({
-  providedIn: 'root'
-})
-export class IntersectionService {
+export class IntersectionDetector {
   intersectionObserver!: IntersectionObserver;
   elements: { id: string, element: Element }[] = [];
-  @Output() intersecting = new EventEmitter<string>();
+  root!: Document;
+  intersecting = new EventEmitter<string>();
 
-  constructor(@Inject(DOCUMENT) private document: Document) {
+  constructor(root: Document) {
+    this.root = root;
     this.initIntersectionObserver();
   }
 
@@ -24,7 +20,7 @@ export class IntersectionService {
           }
         });
       }, {
-        root: document,
+        root: this.root,
         rootMargin: '0px 0px 0px 0px'
       }
     );
@@ -39,7 +35,6 @@ export class IntersectionService {
     const intersectedElementIndex = this.elements.findIndex(e => e.element === element);
     if (intersectedElementIndex > -1) {
       const intersectedElement = this.elements[intersectedElementIndex];
-      this.intersecting.emit(intersectedElement.id);
       this.intersectionObserver.unobserve(intersectedElement.element);
       this.elements.splice(intersectedElementIndex, 1);
     }

projects/player/src/app/services/unit-state.service.ts

-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
 import {
   StatusChangeElement,
   UnitStateElementCode,
@@ -12,7 +13,7 @@ import {
 import { TextElement } from '../../../../common/models/text-element';
 import { VideoElement } from '../../../../common/models/video-element';
 import { AudioElement } from '../../../../common/models/audio-element';
-import { IntersectionService } from './intersection.service';
+import { IntersectionDetector } from '../classes/intersection-detector';
 
 @Injectable({
   providedIn: 'root'
@@ -20,9 +21,12 @@ import { IntersectionService } from './intersection.service';
 export class UnitStateService {
   private _presentedPageAdded = new Subject<number>();
   private _unitStateElementCodeChanged = new Subject<UnitStateElementCode>();
+  private intersectionDetector!: IntersectionDetector;
   unitStateElementCodes!: UnitStateElementCode[];
 
-  constructor(private intersectionService: IntersectionService) {}
+  constructor(@Inject(DOCUMENT) private document: Document) {
+    this.intersectionDetector = new IntersectionDetector(document);
+  }
 
   private getUnitStateElement(id: string): UnitStateElementCode | undefined {
     return this.unitStateElementCodes
@@ -58,8 +62,8 @@ export class UnitStateService {
 
   registerElement(elementModel: UIElement, element: Element): void {
     this.initUnitStateValue(elementModel);
-    this.intersectionService.observe(elementModel.id, element);
-    this.intersectionService.intersecting
+    this.intersectionDetector.observe(elementModel.id, element);
+    this.intersectionDetector.intersecting
       .subscribe((id: string) => {
         this.changeElementStatus({ id: id, status: 'DISPLAYED' });
       });