@vouchfor/embeds 1.0.2 → 1.1.0

package/src/components/PlayerEmbed/index.ts

@@ -1,16 +1,16 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { createRef, ref } from 'lit/directives/ref.js';
+import { ref } from 'lit/directives/ref.js';
 
-import type { Scene, Scenes, TemplateInstance } from '@vouchfor/canvas-video';
-import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
-import type { Ref } from 'lit/directives/ref.js';
+import type { TemplateInstance } from '@vouchfor/canvas-video';
+import type { MediaPlayerProps } from '@vouchfor/media-player';
 import type { Environment } from '~/utils/env';
 
 import { EventForwardController } from './controllers/event-forwarder';
 import { FetcherController } from './controllers/fetcher';
 import { TrackingController } from './controllers/tracking';
+import { MediaPlayerProxy } from '~/mixins/media-player-proxy';
 
 import '@vouchfor/media-player';
 
@@ -26,7 +26,7 @@ type PlayerEmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload
 };
 
 @customElement('vouch-embed-player')
-class PlayerEmbed extends LitElement {
+class PlayerEmbed extends MediaPlayerProxy(LitElement) {
   static styles = [
     css`
       :host {
@@ -35,8 +35,6 @@ class PlayerEmbed extends LitElement {
     `
   ];
 
-  private _mediaPlayerRef: Ref<MediaPlayer> = createRef();
-
   @property({ type: Object }) data: PlayerEmbedProps['data'];
   @property({ type: String }) vouchId: PlayerEmbedProps['vouchId'];
   @property({ type: String }) templateId: PlayerEmbedProps['templateId'];
@@ -92,102 +90,6 @@ class PlayerEmbed extends LitElement {
     return this._fetcherController.fetching;
   }
 
-  get waiting() {
-    return this._mediaPlayerRef.value?.waiting;
-  }
-
-  get initialised() {
-    return this._mediaPlayerRef.value?.initialised;
-  }
-
-  get seeking() {
-    return this._mediaPlayerRef.value?.seeking;
-  }
-
-  get paused() {
-    return this._mediaPlayerRef.value?.paused;
-  }
-
-  get captions() {
-    return this._mediaPlayerRef.value?.captions;
-  }
-
-  get fullscreen() {
-    return this._mediaPlayerRef.value?.fullscreen;
-  }
-
-  get duration() {
-    return this._mediaPlayerRef.value?.duration;
-  }
-
-  set currentTime(value: number) {
-    if (this._mediaPlayerRef.value) {
-      this._mediaPlayerRef.value.currentTime = value;
-    }
-  }
-  get currentTime() {
-    return this._mediaPlayerRef.value?.currentTime ?? 0;
-  }
-
-  set playbackRate(value: number) {
-    if (this._mediaPlayerRef.value) {
-      this._mediaPlayerRef.value.playbackRate = value;
-    }
-  }
-  get playbackRate() {
-    return this._mediaPlayerRef.value?.playbackRate ?? 1;
-  }
-
-  set volume(value: number) {
-    if (this._mediaPlayerRef.value) {
-      this._mediaPlayerRef.value.volume = value;
-    }
-  }
-  get volume() {
-    return this._mediaPlayerRef.value?.volume ?? 1;
-  }
-
-  set muted(value: boolean) {
-    if (this._mediaPlayerRef.value) {
-      this._mediaPlayerRef.value.muted = value;
-    }
-  }
-  get muted() {
-    return this._mediaPlayerRef.value?.muted ?? false;
-  }
-
-  get scene(): Scene | null {
-    return this._mediaPlayerRef.value?.scene ?? null;
-  }
-
-  get scenes(): Scene[] {
-    return this._mediaPlayerRef.value?.scenes ?? [];
-  }
-
-  get sceneConfig(): Scenes | null {
-    return this._mediaPlayerRef.value?.sceneConfig ?? null;
-  }
-
-  get videoState() {
-    return this._mediaPlayerRef.value?.videoState;
-  }
-
-  get mediaPlayer() {
-    return this._mediaPlayerRef.value;
-  }
-
-  play() {
-    this._mediaPlayerRef.value?.play();
-  }
-
-  pause() {
-    this._mediaPlayerRef.value?.pause();
-  }
-
-  setScene(index: number) {
-    this._mediaPlayerRef.value?.setScene(index);
-  }
-
   private _renderStyles() {
     if (!this.aspectRatio) {
       return html`

package/src/index.ts

@@ -1 +1,2 @@
 export { PlayerEmbed } from '~/components/PlayerEmbed';
+export { DialogEmbed } from '~/components/DialogEmbed';

package/src/mixins/media-player-proxy.ts

@@ -0,0 +1,116 @@
+import { createRef } from 'lit/directives/ref.js';
+
+import type { Scene, Scenes } from '@vouchfor/canvas-video';
+import type { MediaPlayer } from '@vouchfor/media-player';
+import type { LitElement } from 'lit';
+
+type Constructor<T = Record<string, never>> = new (...args: any[]) => T;
+
+const MediaPlayerProxy = <T extends Constructor<LitElement>>(SuperClass: T) => {
+  class MediaPlayerProxyClass extends SuperClass {
+    protected _mediaPlayerRef = createRef<MediaPlayer>();
+
+    get waiting() {
+      return this._mediaPlayerRef.value?.waiting;
+    }
+
+    get initialised() {
+      return this._mediaPlayerRef.value?.initialised;
+    }
+
+    get seeking() {
+      return this._mediaPlayerRef.value?.seeking;
+    }
+
+    get paused() {
+      return this._mediaPlayerRef.value?.paused;
+    }
+
+    get captions() {
+      return this._mediaPlayerRef.value?.captions;
+    }
+
+    get fullscreen() {
+      return this._mediaPlayerRef.value?.fullscreen;
+    }
+
+    get duration() {
+      return this._mediaPlayerRef.value?.duration;
+    }
+
+    set currentTime(value: number) {
+      if (this._mediaPlayerRef.value) {
+        this._mediaPlayerRef.value.currentTime = value;
+      }
+    }
+    get currentTime() {
+      return this._mediaPlayerRef.value?.currentTime ?? 0;
+    }
+
+    set playbackRate(value: number) {
+      if (this._mediaPlayerRef.value) {
+        this._mediaPlayerRef.value.playbackRate = value;
+      }
+    }
+    get playbackRate() {
+      return this._mediaPlayerRef.value?.playbackRate ?? 1;
+    }
+
+    set volume(value: number) {
+      if (this._mediaPlayerRef.value) {
+        this._mediaPlayerRef.value.volume = value;
+      }
+    }
+    get volume() {
+      return this._mediaPlayerRef.value?.volume ?? 1;
+    }
+
+    set muted(value: boolean) {
+      if (this._mediaPlayerRef.value) {
+        this._mediaPlayerRef.value.muted = value;
+      }
+    }
+    get muted() {
+      return this._mediaPlayerRef.value?.muted ?? false;
+    }
+
+    get scene(): Scene | null {
+      return this._mediaPlayerRef.value?.scene ?? null;
+    }
+
+    get scenes(): Scene[] {
+      return this._mediaPlayerRef.value?.scenes ?? [];
+    }
+
+    get sceneConfig(): Scenes | null {
+      return this._mediaPlayerRef.value?.sceneConfig ?? null;
+    }
+
+    get videoState() {
+      return this._mediaPlayerRef.value?.videoState;
+    }
+
+    get mediaPlayer() {
+      return this._mediaPlayerRef.value;
+    }
+
+    play() {
+      this._mediaPlayerRef.value?.play();
+    }
+
+    pause() {
+      this._mediaPlayerRef.value?.pause();
+    }
+
+    reset(time = 0, play = false) {
+      this._mediaPlayerRef.value?.reset(time, play);
+    }
+
+    setScene(index: number) {
+      this._mediaPlayerRef.value?.setScene(index);
+    }
+  }
+  return MediaPlayerProxyClass;
+};
+
+export { MediaPlayerProxy };