@vouchfor/embeds 0.0.0-experiment.1b80037 → 0.0.0-experiment.254513d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vouchfor/embeds",
-  "version": "0.0.0-experiment.1b80037",
+  "version": "0.0.0-experiment.254513d",
   "license": "MIT",
   "author": "Aaron Williams",
   "main": "dist/es/embeds.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@lit/task": "1.0.0",
-    "@vouchfor/media-player": "0.0.0-experiment.1b80037",
+    "@vouchfor/media-player": "0.0.0-experiment.254513d",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {

package/src/components/Embed/Embed.stories.ts

@@ -10,30 +10,18 @@ type EmbedArgs = EmbedProps & {
   showVouch?: boolean;
 };
 
-const _Embed = ({
-  vouchId,
-  templateId,
-  preload,
-  autoplay,
-  env,
-  apiKey,
-  controls,
-
-  resolution,
-  aspectRatio
-}: EmbedArgs) => {
+const _Embed = ({ vouchId, templateId, preload, autoplay, env, apiKey, controls, aspectRatio }: EmbedArgs) => {
   return html`
     <div style="height: 100vh">
       <vouch-embed
         env=${ifDefined(env)}
         apiKey=${ifDefined(apiKey)}
-        ?autoplay=${autoplay}
         vouchId=${ifDefined(vouchId)}
         templateId=${ifDefined(templateId)}
-        resolution=${ifDefined(resolution)}
-        aspectRatio=${ifDefined(aspectRatio)}
-        preload=${ifDefined(preload)}
         .controls=${controls}
+        ?autoplay=${autoplay}
+        preload=${ifDefined(preload)}
+        aspectRatio=${ifDefined(aspectRatio)}
       ></vouch-embed>
     </div>
   `;
@@ -55,7 +43,6 @@ const Embed: Story = {
     apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
     vouchId: '6JQEIPeStt',
     templateId: '7d0113f7-3f9a-4bdd-97e3-07ee6eec5730',
-    resolution: 1080,
     aspectRatio: 0,
     preload: 'none',
     autoplay: false

package/src/components/Embed/controllers/fetcher.ts

@@ -21,8 +21,8 @@ class FetcherController {
   host: EmbedHost;
 
   private _fetching = false;
-  private _vouch: EmbedProps['data'] | null = null;
-  private _template: TemplateInstance | null = null;
+  private _vouch?: EmbedProps['data'];
+  private _template?: TemplateInstance;
 
   set fetching(value) {
     if (this._fetching !== value) {
@@ -86,8 +86,8 @@ class FetcherController {
       this.host,
       async ([env, apiKey, data, vouchId, templateId]: TaskDeps) => {
         try {
-          this.vouch = null;
-          this.template = null;
+          this.vouch = undefined;
+          this.template = undefined;
 
           if (data) {
             const template = await this.getTemplate(env, apiKey, templateId);

package/src/components/Embed/index.ts

@@ -14,10 +14,7 @@ import { TrackingController } from './controllers/tracking';
 
 import '@vouchfor/media-player';
 
-type EmbedProps = Pick<
-  MediaPlayerProps,
-  'data' | 'resolution' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'
-> & {
+type EmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
   env: Environment;
   apiKey: string;
   vouchId?: string;
@@ -35,12 +32,10 @@ class Embed extends LitElement {
   @property({ type: String }) env: EmbedProps['env'] = 'prod';
   @property({ type: String }) apiKey: EmbedProps['apiKey'] = '';
 
+  @property({ type: Array }) controls: EmbedProps['controls'];
   @property({ type: String }) preload: EmbedProps['preload'] = 'auto';
   @property({ type: Boolean }) autoplay: EmbedProps['autoplay'] = false;
-
-  @property({ type: Number }) resolution: EmbedProps['resolution'] = 1080;
   @property({ type: Number }) aspectRatio: EmbedProps['aspectRatio'] = 0;
-  @property({ type: Array }) controls: EmbedProps['controls'];
 
   private eventController = new EventForwardController(this, [
     'durationchange',
@@ -78,7 +73,7 @@ class Embed extends LitElement {
     return this._fetcherController.vouch;
   }
 
-  get template(): TemplateInstance | null {
+  get template(): TemplateInstance | undefined {
     return this._fetcherController.template;
   }
 
@@ -183,7 +178,6 @@ class Embed extends LitElement {
         ?loading=${this.fetching}
         .data=${this.vouch}
         .template=${this.template}
-        resolution=${ifDefined(this.resolution)}
         aspectRatio=${ifDefined(this.aspectRatio)}
         preload=${ifDefined(this.preload)}
         .controls=${this.controls}