@vouchfor/embeds 0.0.0-experiment.039a74b

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@vouchfor/embeds",
+  "version": "0.0.0-experiment.039a74b",
+  "license": "MIT",
+  "author": "Aaron Williams",
+  "main": "dist/es/embeds.js",
+  "module": "dist/es/embeds.js",
+  "type": "module",
+  "types": "dist/es/index.d.ts",
+  "exports": {
+    ".": "./dist/es/embeds.js",
+    "./embed": "./dist/iife/embeds.iife.js"
+  },
+  "files": ["dist", "src"],
+  "publishConfig": {
+    "tag": "experiment",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc && vite build --mode iife && vite build --mode es",
+    "build:deps": "yarn --cwd ../media-player build",
+    "build:package": "yarn build",
+    "build:storybook": "yarn prebuild && storybook build",
+    "generate:manifest": "wca src --outFile custom-elements.json",
+    "lint": "eslint . --quiet",
+    "lint:fix": "eslint . --fix",
+    "lint:staged": "lint-staged",
+    "prepublishOnly": "yarn build",
+    "size": "size-limit",
+    "storybook": "yarn prebuild && storybook dev -p 6006",
+    "prebuild": "yarn build:deps && yarn generate:manifest",
+    "test": "true"
+  },
+  "lint-staged": {
+    "**/*.{ts,tsx,js}": "eslint --fix --quiet",
+    "**/*.{md,json,yml}": "prettier --write"
+  },
+  "dependencies": {
+    "@vouchfor/media-player": "0.0.0-experiment.039a74b"
+  },
+  "peerDependencies": {
+    "lit": "^2.7.5"
+  },
+  "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@open-wc/testing": "^3.2.0",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/web-components": "^7.4.5",
+    "@storybook/web-components-vite": "^7.4.5",
+    "@types/mocha": "^10.0.1",
+    "@vouchfor/eslint-config": "^1.0.0",
+    "@vouchfor/prettier-config": "^1.0.0",
+    "@web/dev-server-esbuild": "^0.4.1",
+    "@web/test-runner": "^0.17.1",
+    "@web/test-runner-browserstack": "^0.6.1",
+    "@web/test-runner-mocha": "^0.8.1",
+    "@web/test-runner-playwright": "^0.10.1",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.50.0",
+    "eslint-plugin-import": "^2.28.1",
+    "lint-staged": "^14.0.1",
+    "lit": "^2.8.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.4.5",
+    "typescript": "^5.1.3",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.6.0",
+    "web-component-analyzer": "^1.1.7"
+  }
+}

package/src/components/InlineEmbed.stories.ts

@@ -0,0 +1,119 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import type { InlineEmbedProps } from './';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import './';
+
+type InlineEmbedArgs = InlineEmbedProps & {
+  showVouch?: boolean;
+};
+
+const _InlineEmbed = ({
+  vouchHashId,
+  preload,
+  autoplay,
+  env,
+  apiKey,
+  controls,
+  enableTracking,
+  trackingSource,
+
+  // Template properties
+  type,
+  format,
+  resolution,
+  aspectRatio,
+  headerShortName,
+  headerSubtitle,
+  headerBrandLogo
+}: InlineEmbedArgs) => {
+  return html`
+    <div style="height: 100vh">
+      <vembed-inline
+        env=${ifDefined(env)}
+        apiKey=${ifDefined(apiKey)}
+        ?autoplay=${autoplay}
+        ?enableTracking=${enableTracking}
+        .vouchHashId=${vouchHashId}
+        resolution=${ifDefined(resolution)}
+        aspectRatio=${ifDefined(aspectRatio)}
+        preload=${ifDefined(preload)}
+        type=${ifDefined(type)}
+        .controls=${controls}
+        trackingSource=${ifDefined(trackingSource)}
+        format=${ifDefined(format)}
+        ?headerShortName=${headerShortName}
+        ?headerBrandLogo=${headerBrandLogo}
+        headerSubtitle=${ifDefined(headerSubtitle)}
+      ></vembed-inline>
+    </div>
+  `;
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
+const meta = {
+  title: 'Embeds/Inline',
+  tags: ['autodocs'],
+  render: (args) => _InlineEmbed(args),
+  component: 'vembed-inline'
+} satisfies Meta<InlineEmbedProps>;
+
+type Story = StoryObj<InlineEmbedArgs>;
+
+const InlineEmbed: Story = {
+  args: {
+    env: 'dev',
+    apiKey: 'RtW1R7JYej-pymoGNEUCblZz0NTLZzsuC9xKxcsewIYpf3UEIePcGvtkRnd4K',
+    vouchHashId: 'X526IKhw90',
+    resolution: 1080,
+    aspectRatio: 0,
+    preload: 'none',
+    autoplay: false,
+    enableTracking: true,
+    trackingSource: 'media_player_storybook',
+
+    type: 'BASIC',
+    format: 'letterbox',
+    headerShortName: true,
+    headerSubtitle: 'client',
+    headerBrandLogo: false,
+
+    showVouch: true
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['BARE', 'BASIC', 'INLINE', 'JUMBO', 'FOUNDIT', 'CISCO']
+    },
+    headerSubtitle: {
+      control: 'radio',
+      options: ['role', 'client']
+    },
+    headerShortName: {
+      control: 'boolean'
+    },
+    headerBrandLogo: {
+      control: 'boolean'
+    },
+    preload: {
+      control: 'radio',
+      options: ['auto', 'none']
+    },
+    format: {
+      control: 'radio',
+      options: ['letterbox', 'letterbox-video', 'crop', 'crop-top', 'squarebox']
+    },
+    env: {
+      control: 'radio',
+      options: ['prod', 'staging', 'dev']
+    }
+  },
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+export { InlineEmbed };

package/src/components/InlineEmbed.ts

@@ -0,0 +1,24 @@
+import { MediaPlayer } from '@vouchfor/media-player';
+import { customElement } from 'lit/decorators.js';
+
+import type { MediaPlayerProps } from '@vouchfor/media-player';
+
+type InlineEmbedProps = MediaPlayerProps;
+
+@customElement('vembed-inline')
+class InlineEmbed extends MediaPlayer {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vembed-inline': InlineEmbed;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'vembed-inline': InlineEmbed;
+    }
+  }
+}
+
+export { InlineEmbed };
+export type { InlineEmbedProps };

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { InlineEmbed } from './InlineEmbed';
+export type { InlineEmbedProps } from './InlineEmbed';

package/src/index.ts

@@ -0,0 +1 @@
+export { InlineEmbed } from '~/components/InlineEmbed';

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />