feat(esl-media): add ability to provide video initial position (start…

… time)
exadel-inc · May 20, 2024 · 7367bb7 · 7367bb7
1 parent f5a0762
commit 7367bb7
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 5 deletions.
diff --git a/src/modules/esl-media/core/esl-media-provider.ts b/src/modules/esl-media/core/esl-media-provider.ts
@@ -22,6 +22,7 @@ export interface MediaProviderConfig {
   title: string;
   preload?: 'none' | 'metadata' | 'auto' | '';
   playsinline?: boolean;
+  startTime?: number;
 }
 
 export type ProviderType = (new(component: ESLMedia, config: MediaProviderConfig) => BaseProvider) & typeof BaseProvider;
@@ -39,8 +40,8 @@ export abstract class BaseProvider {
     return null;
   }
   static parseConfig(component: ESLMedia): MediaProviderConfig {
-    const {loop, muted, controls, autoplay, title, preload, playsinline, mediaId, mediaSrc} = component;
-    const config = {loop, muted, controls, autoplay, title, preload, playsinline};
+    const {loop, muted, controls, autoplay, title, preload, playsinline, mediaId, mediaSrc, startTime} = component;
+    const config = {loop, muted, controls, autoplay, title, preload, playsinline, startTime};
     if (mediaId) Object.assign(config, {mediaId});
     if (mediaSrc) Object.assign(config, {mediaSrc});
     return config;

diff --git a/src/modules/esl-media/core/esl-media.ts b/src/modules/esl-media/core/esl-media.ts
@@ -97,6 +97,8 @@ export class ESLMedia extends ESLBaseElement {
   @boolAttr() public playsinline: boolean;
   /** Allows play resource only in viewport area */
   @boolAttr() public playInViewport: boolean;
+  /** Allows to start viewing a resource from a specific time offset. */
+  @attr() public startTime: number;
 
   /** Preload resource */
   @attr({defaultValue: 'auto'}) public preload: 'none' | 'metadata' | 'auto' | '';

diff --git a/src/modules/esl-media/providers/brightcove-provider.ts b/src/modules/esl-media/providers/brightcove-provider.ts
@@ -63,6 +63,7 @@ export class BrightcoveProvider extends BaseProvider {
     el.toggleAttribute('playsinline', this.config.playsinline);
     this._account.playerId && el.setAttribute('data-player', this._account.playerId);
     this._account.accountId && el.setAttribute('data-account', this._account.accountId);
+    this.config.startTime && el.setAttribute('data-start-time', `${this.config.startTime}`);
     return el;
   }
 

diff --git a/src/modules/esl-media/providers/html5/audio-provider.ts b/src/modules/esl-media/providers/html5/audio-provider.ts
@@ -14,7 +14,7 @@ export class AudioProvider extends HTMLMediaProvider {
 
   protected createElement(): HTMLAudioElement {
     const el = document.createElement('audio');
-    el.src = this.config.mediaSrc || '';
+    el.src = this.mediaSrc || '';
     return el;
   }
 

diff --git a/src/modules/esl-media/providers/html5/media-provider.ts b/src/modules/esl-media/providers/html5/media-provider.ts
@@ -61,6 +61,10 @@ export abstract class HTMLMediaProvider extends BaseProvider {
     return Promise.resolve();
   }
 
+  protected get mediaSrc(): string {
+    return `${this.config.mediaSrc}${this.config.startTime ? `#t=${this.config.startTime}` : ''}`;
+  }
+
   public get state(): PlayerStates {
     if (!this._el) return PlayerStates.UNINITIALIZED;
     if (this._el.ended) return PlayerStates.ENDED;

diff --git a/src/modules/esl-media/providers/html5/video-provider.ts b/src/modules/esl-media/providers/html5/video-provider.ts
@@ -14,7 +14,7 @@ export class VideoProvider extends HTMLMediaProvider {
 
   protected createElement(): HTMLVideoElement {
     const el = document.createElement('video');
-    el.src = this.config.mediaSrc || '';
+    el.src = this.mediaSrc || '';
     return el;
   }
 

diff --git a/src/modules/esl-media/providers/youtube-provider.ts b/src/modules/esl-media/providers/youtube-provider.ts
@@ -59,7 +59,8 @@ export class YouTubeProvider extends BaseProvider {
       controls: Number(cfg.controls),
       playsinline: Number(cfg.playsinline),
       disablekb: Number(!cfg.controls), // TODO: criteria
-      autohide: Number(!cfg.controls) // TODO: criteria
+      autohide: Number(!cfg.controls), // TODO: criteria
+      start: cfg.startTime
     };
   }