[player] Improve detection of currently displayed page when scrolling

projects/player/src/app/components/page/page.component.html

 <div aspectInViewDetection
      detectionType="top"
      [intersectionContainer]="pagesContainer"
-     (intersecting)="selectedIndexChange.emit(pageIndex)">
+     (intersecting)="selectedIndexChange.emit(scrollPageIndex)">
   <aspect-section
     *ngFor="let section of page.sections"
     class="section"
@@ -18,5 +18,5 @@
 <div aspectInViewDetection
      detectionType="bottom"
      [intersectionContainer]="pagesContainer"
-     (intersecting)="selectedIndexChange.emit(pageIndex)">
+     (intersecting)="selectedIndexChange.emit(scrollPageIndex)">
 </div>

projects/player/src/app/components/page/page.component.ts

 import {
   Component, Input, Output, EventEmitter
 } from '@angular/core';
-import { MediaPlayerService } from '../../services/media-player.service';
 import { Page } from 'common/models/page';
+import { MediaPlayerService } from '../../services/media-player.service';
 
 @Component({
   selector: 'aspect-page',
@@ -14,6 +14,7 @@ export class PageComponent {
   @Input() page!: Page;
   @Input() isLastPage!: boolean;
   @Input() pageIndex!: number;
+  @Input() scrollPageIndex!: number;
   @Input() pagesContainer!: HTMLElement;
   @Output() selectedIndexChange = new EventEmitter<number>();
 

projects/player/src/app/directives/in-view-detection.directive.ts

@@ -20,14 +20,12 @@ export class InViewDetectionDirective implements OnInit, OnDestroy {
   constructor(private elementRef: ElementRef) {}
 
   ngOnInit(): void {
-    const constraint = this.detectionType === 'top' ? '0px 0px 0px 0px' : '-95% 0px 0px 0px';
+    const constraint = this.detectionType === 'top' ? '0px 0px -99% 0px' : '99% 0px 0px 0px';
     this.intersectionDetector = new IntersectionDetector(this.intersectionContainer, constraint);
     this.intersectionDetector.observe(this.elementRef.nativeElement);
     this.intersectionDetector.intersecting
       .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe(() => {
-        this.intersecting.emit();
-      });
+      .subscribe(() => this.intersecting.emit());
   }
 
   ngOnDestroy(): void {