From fd48eb8503526584912c48b3fcc4097b3aa90f49 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 29 Oct 2021 10:55:41 +0200
Subject: [PATCH] [player] Replace IntersectionService with
IntersectionDetector class
---
.../intersection-detector.ts} | 19 +++++++------------
.../src/app/services/unit-state.service.ts | 14 +++++++++-----
2 files changed, 16 insertions(+), 17 deletions(-)
rename projects/player/src/app/{services/intersection.service.ts => classes/intersection-detector.ts} (73%)
diff --git a/projects/player/src/app/services/intersection.service.ts b/projects/player/src/app/classes/intersection-detector.ts
similarity index 73%
rename from projects/player/src/app/services/intersection.service.ts
rename to projects/player/src/app/classes/intersection-detector.ts
index df382b5b0..f7488dc08 100644
--- a/projects/player/src/app/services/intersection.service.ts
+++ b/projects/player/src/app/classes/intersection-detector.ts
@@ -1,17 +1,13 @@
-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);
}
diff --git a/projects/player/src/app/services/unit-state.service.ts b/projects/player/src/app/services/unit-state.service.ts
index 5fe370dc8..f7196967a 100644
--- a/projects/player/src/app/services/unit-state.service.ts
+++ b/projects/player/src/app/services/unit-state.service.ts
@@ -1,5 +1,6 @@
-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' });
});
--
GitLab