feat(esl-media): play-in-viewport feature reworked to be more customizable

- `ESLMedia.prototype.RATIO_TO_ACTIVATE` introduced to control min ratio to init lazy players
- `ESLMedia.prototype.RATIO_TO_STOP` introduced to control ratio to stop video (play-in-viewport feature)
- `ESLMedia.prototype.RATIO_TO_PLAY` introduced to control ratio to restart video (play-in-viewport feature)

Author: ala-n

src/modules/esl-media/core/esl-media-iobserver.ts

@@ -1,10 +1,5 @@
 import type {ESLMedia} from './esl-media';
 
-const RATIO_TO_PLAY = 0.5; // TODO: customizable, at least global
-const RATIO_TO_STOP = 0.20; // TODO: customizable, at least global
-
-const RATIO_TO_ACTIVATE = 0.05;
-
 let iObserver: IntersectionObserver;
 
 /** ESL Media Play-In-Viewport IntersectionObserver instance */
@@ -13,24 +8,40 @@ export function getIObserver(lazy: boolean = false): IntersectionObserver {
     iObserver = new IntersectionObserver(function (entries) {
       entries.forEach(handleViewport);
     }, {
-      threshold: [RATIO_TO_STOP, RATIO_TO_PLAY]
+      threshold: [0.05, 0.1, 0.25, 0.33, 0.5, 0.66, 0.75, 0.9, 1]
     });
   }
   return iObserver;
 }
 
 function handleViewport(entry: IntersectionObserverEntry): void {
   const video = entry.target as ESLMedia;
+  const root = entry.rootBounds || {
+    width: Number.POSITIVE_INFINITY,
+    height: Number.POSITIVE_INFINITY
+  };
+  const rect = entry.intersectionRect;
+  const ratio = Math.max(
+    (rect.width * rect.height) / (root.width * root.height),
+    entry.intersectionRatio
+  );
+
   // Removes `lazy` attribute when media is in the viewport with min ratio RATIO_TO_ACTIVATE
-  if (entry.isIntersecting && entry.intersectionRatio >= RATIO_TO_ACTIVATE && video.lazy === 'auto') {
+  if (entry.isIntersecting && ratio >= video.RATIO_TO_ACTIVATE && video.lazy === 'auto') {
     video.$$attr('lazy', false);
   }
-  // Videos that playing and out of min ratio RATIO_TO_STOP should be stopped
-  if (video.active && entry.intersectionRatio <= RATIO_TO_STOP) {
+
+  // Skip if video state management if feature is disabled
+  if (!video.playInViewport) return;
+
+  // Videos that playing and out of min ratio should be stopped
+  if (video.active && ratio <= video.RATIO_TO_STOP) {
     video.pause(true);
   }
-  // Play should start only for autoplay-able videos that are visible enough and was not manually stopped
-  if (!video.isUserInitiated && video.autoplay && entry.intersectionRatio >= RATIO_TO_PLAY) {
+  // Videos that not playing and in min ratio to start should be started
+  if (!video.active && ratio >= video.RATIO_TO_PLAY) {
+    // Disallow for non autoplay-able videos or videos that was controlled by user
+    if (!video.autoplay || video.isUserInitiated) return;
     video.play(false, true);
   }
 }

src/modules/esl-media/core/esl-media-manager.ts

@@ -1,7 +1,6 @@
 import {ESLEventUtils} from '../../esl-event-listener/core/api';
 import {isSafeContains} from '../../esl-utils/dom/traversing';
 import {isVisible} from '../../esl-utils/dom/visible';
-import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {listen} from '../../esl-utils/decorators';
 
 import type {ESLMedia} from './esl-media';
@@ -14,7 +13,6 @@ import type {ESLMedia} from './esl-media';
  *
  * @author Anastasia Lesun
  */
-@ExportNs('MediaManager')
 export class ESLMediaManager {
   /** All managed instances */
   public instances: Set<ESLMedia> = new Set();

src/modules/esl-media/core/esl-media-provider.ts

@@ -58,6 +58,9 @@ export abstract class BaseProvider {
   public constructor(component: ESLMedia, config: MediaProviderConfig) {
     this.config = config;
     this.component = component;
+    // Other-vice browser will handle play-in-viewport it differently
+    if (this.component.playInViewport) this.config.autoplay = false;
+    // If autoplay is enabled - dispatch before play event to ensure it is allowed
     if (this.config.autoplay) {
       this.config.autoplay = this.component._onBeforePlay('initial');
     }

src/modules/esl-media/core/esl-media.ts

@@ -55,6 +55,13 @@ export class ESLMedia extends ESLBaseElement {
     return new ESLMediaManager();
   }
 
+  /** A minimum ratio to init media (in case of lazy=auto) */
+  @prop(0.05) public RATIO_TO_ACTIVATE: number;
+  /** A minimum ratio to stop media (in case of play in viewport option) */
+  @prop(0.2) public RATIO_TO_STOP: number;
+  /** A minimum ratio to play media (in case of play in viewport option) */
+  @prop(0.33) public RATIO_TO_PLAY: number;
+
   /** Event to dispatch on ready state */
   @prop('esl:media:ready') public READY_EVENT: string;
   /** Event to dispatch on error state */

src/modules/esl-utils/test/intersectionObserver.mock.ts

@@ -57,12 +57,13 @@ export class IntersectionObserverMock implements IntersectionObserver {
     target: Element,
     init: Partial<IntersectionObserverEntry>
   ): IntersectionObserverEntry {
+    const intersectionRatio = init.intersectionRatio || 0;
     return {
       // Defaults
       target,
-      intersectionRect: new RectMock(),
-      rootBounds: new RectMock(),
-      boundingClientRect: new RectMock(),
+      intersectionRect: new RectMock(0, 0, 2000, 2000 * intersectionRatio),
+      rootBounds: new RectMock(0, 0, 2000, 2000),
+      boundingClientRect: new RectMock(0, 0, 2000, 2000),
       isIntersecting: false,
       intersectionRatio: 0,
       time: Date.now(),