chore(esl-media): remove interrupt attribute, replace with 'always' a…

…utoplay

src/modules/esl-media/README.md

@@ -67,7 +67,7 @@ using a single tag as well as work with external providers using simple native-l
 
  - `autofocus` (boolean) - set focus to the player when the media starts playing
 
- - `autoplay` (boolean) - start to play automatically on initialization 
+ - `autoplay` (boolean | 'always') - start to play automatically on initialization. When set to 'always', the video will auto play even if previously stopped by the user, otherwise, it will not.
  *(note: initialization doesn't happen until `disabled` attribute is removed from the element)*
 
  - `controls` (boolean) - show media player controls

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

@@ -18,7 +18,7 @@ export interface MediaProviderConfig {
   loop: boolean;
   muted: boolean;
   controls: boolean;
-  autoplay: boolean;
+  autoplay: boolean | 'always';
   title: string;
   preload?: 'none' | 'metadata' | 'auto' | '';
   playsinline?: boolean;

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

@@ -6,7 +6,7 @@ import {SPACE, PAUSE} from '../../esl-utils/dom/keys';
 import {prop, attr, boolAttr, listen} from '../../esl-utils/decorators';
 import {debounce} from '../../esl-utils/async';
 import {isVisible} from '../../esl-utils/dom/visible';
-import {parseAspectRatio} from '../../esl-utils/misc/format';
+import {parseAspectRatio, parseBoolean, parseString} from '../../esl-utils/misc/format';
 
 import {ESLMediaQuery} from '../../esl-media-query/core';
 import {ESLResizeObserverTarget} from '../../esl-event-listener/core';
@@ -81,9 +81,10 @@ export class ESLMedia extends ESLBaseElement {
   /** Allows lazy load resource */
   @attr({parser: parseLazyAttr, defaultValue: 'none'}) public lazy: ESLMediaLazyMode;
   /** Autoplay resource marker */
-  @boolAttr() public autoplay: boolean;
-  /** Will prevent autoplay if media was paused manually */
-  @boolAttr() public noAutoplayOnInterrupt: boolean;
+  @attr({
+    defaultValue: false,
+    parser: (value: string) => value === 'always' ? parseString(value) :  parseBoolean(value)
+  }) public autoplay: 'always' | boolean;
   /** Autofocus on play marker */
   @boolAttr() public override autofocus: boolean;
   /** Mute resource marker */
@@ -197,8 +198,7 @@ export class ESLMedia extends ESLBaseElement {
   }
 
   public canAutoplay(): boolean {
-    if (!this.autoplay) return false;
-    return !(this.noAutoplayOnInterrupt && !this.autopaused);
+    return !!this.autoplay && (this.autoplay === 'always' || this.autopaused);
   }
 
   private reinitInstance(): void {
@@ -353,7 +353,7 @@ export class ESLMedia extends ESLBaseElement {
   protected _onContainerShow(e: Event): void {
     const {target} = e;
     if (!isSafeContains(target as Node, this)) return;
-    if (this.playInViewport && isVisible(this)) return;
+    if (this.playInViewport && !isVisible(this)) return;
     if (this.canAutoplay()) this.play();
   }
 

src/modules/esl-media/providers/brightcove-provider.ts

@@ -91,7 +91,7 @@ export class BrightcoveProvider extends BaseProvider {
    */
   protected onAPIReady(): Promise<void> | void {
     // Set autoplay though js because BC is unresponsive while processing it natively
-    this._api.autoplay(this._autoplay || this.config.autoplay);
+    this._api.autoplay(this._autoplay || !!this.config.autoplay);
 
     // Listeners to control player state
     this._api.on('play', () => this.component._onPlay());

src/modules/esl-media/providers/html5/media-provider.ts

@@ -20,7 +20,7 @@ export abstract class HTMLMediaProvider extends BaseProvider {
 
   protected static applyElementSettings(el: HTMLMediaElement, cfg: MediaProviderConfig): HTMLMediaElement {
     el.classList.add('esl-media-inner');
-    el.autoplay = cfg.autoplay;
+    el.autoplay = !!cfg.autoplay;
     el.preload = cfg.preload || 'auto' ;
     el.loop = cfg.loop;
     el.muted = cfg.muted;