[🚀esl-media]: ESLMediaManger implementation to handle all play/pause behavior + preconditions

[ala-n]

It is proposed to rework the ESLMedia flow to resolve the following points:

• Control autoplay preconditions (See Restrictions API)
• Control automatic start/pause behavior based on container state (followup for [🚀esl-media]: out of the box observartion for container state #2712)
• Manage group restrictions for ESLMedia
• [Optional] public API to resolve all active ESLMedia instances

User cases:

Autoplay

• If the video (on the page) is marked as autoplay, then

  • if marked play-in-vieport -> start if is visible (in viewport)
  • if not marked play-in-vieport -> always start

• If video is inside container

  • video was not played

    • if marked play-in-vieport -> start if is visible (in viewport)
    • if not marked play-in-vieport -> always start

  • video was played (container was opened previously)

    • if marked play-in-vieport -> start if is visible (in viewport)
    • if not marked play-in-vieport -> always start

  Note:
  Edge case - user decides to deprecate autostart in container second time

  ESLMediaManager.addRestriction( ($media) => !$media.played && isInContainer($media) )
  

Container

• if the container is closed -> video inside should be paused automatically

User behavior

• if video was stopped/paused by user behavior (click or direct call of pause/stop) -> video can not be started automatically (e.g. play-in-viewport, autoplay, etc)

Restriction API

Original proposal

// Declare before registration to cover autoplay 
const restriction = ($media: ESLMedia) => {
    return $media.type = 'video' && matchMedia('(user-prefer-no-motion)').matching;
};
ESLMediaRestrictionManager.add(restiction); // To add restriction hook
ESLMediaRestrictionManager.delete(restiction); // To remove if required
//
ESLMedia.register();

Alternative (EventAPI)

window.addEventListener('esl:media:before:play', (event: Event) => {
   // 1. The event is Cancelable
   // 2 The event contain all required inforamtion
   if (e.target.type === 'video' && matchMedia('(user-prefer-no-motion)').matching) {
      e.prventDefault(); // Reject playing the video
   }
});

ESLMedia.register();

Tech details

TODO @ala-n