@neobyzantine/video-embed 0.2.0

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+interface VideoEmbedProps {
+    videoId: string;
+    platform?: 'youtube' | 'vimeo' | 'dailymotion';
+    title?: string;
+    lazy?: boolean;
+    aspectRatio?: '16/9' | '4/3';
+    className?: string;
+}
+declare function VideoEmbed({ videoId, platform, title, lazy, aspectRatio, className, }: VideoEmbedProps): React.JSX.Element;
+
+export { VideoEmbed, type VideoEmbedProps };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+interface VideoEmbedProps {
+    videoId: string;
+    platform?: 'youtube' | 'vimeo' | 'dailymotion';
+    title?: string;
+    lazy?: boolean;
+    aspectRatio?: '16/9' | '4/3';
+    className?: string;
+}
+declare function VideoEmbed({ videoId, platform, title, lazy, aspectRatio, className, }: VideoEmbedProps): React.JSX.Element;
+
+export { VideoEmbed, type VideoEmbedProps };

package/dist/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  VideoEmbed: () => VideoEmbed
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/VideoEmbed.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function buildSrc(videoId, platform) {
+  if (platform === "vimeo") return `https://player.vimeo.com/video/${videoId}`;
+  if (platform === "dailymotion") return `https://www.dailymotion.com/embed/video/${videoId}`;
+  return `https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`;
+}
+function VideoEmbed({
+  videoId,
+  platform = "youtube",
+  title = "Video",
+  lazy = true,
+  aspectRatio = "16/9",
+  className
+}) {
+  const paddingBottom = aspectRatio === "4/3" ? "75%" : "56.25%";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "region",
+      "aria-label": title,
+      style: { position: "relative", paddingBottom, height: 0, overflow: "hidden" },
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "iframe",
+        {
+          src: buildSrc(videoId, platform),
+          title,
+          loading: lazy ? "lazy" : "eager",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true,
+          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: 0 }
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VideoEmbed
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/VideoEmbed.tsx"],"sourcesContent":["export { VideoEmbed } from './VideoEmbed';\nexport type { VideoEmbedProps } from './VideoEmbed';\n","import * as React from 'react';\n\nexport interface VideoEmbedProps {\n  videoId: string;\n  platform?: 'youtube' | 'vimeo' | 'dailymotion';\n  title?: string;\n  lazy?: boolean;\n  aspectRatio?: '16/9' | '4/3';\n  className?: string;\n}\n\nfunction buildSrc(videoId: string, platform: VideoEmbedProps['platform']): string {\n  if (platform === 'vimeo') return `https://player.vimeo.com/video/${videoId}`;\n  if (platform === 'dailymotion') return `https://www.dailymotion.com/embed/video/${videoId}`;\n  return `https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`;\n}\n\nexport function VideoEmbed({\n  videoId,\n  platform = 'youtube',\n  title = 'Video',\n  lazy = true,\n  aspectRatio = '16/9',\n  className,\n}: VideoEmbedProps) {\n  const paddingBottom = aspectRatio === '4/3' ? '75%' : '56.25%';\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={title}\n      style={{ position: 'relative', paddingBottom, height: 0, overflow: 'hidden' }}\n      className={className}\n    >\n      <iframe\n        src={buildSrc(videoId, platform)}\n        title={title}\n        loading={lazy ? 'lazy' : 'eager'}\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n        allowFullScreen\n        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 0 }}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACkCM;AAvBN,SAAS,SAAS,SAAiB,UAA+C;AAChF,MAAI,aAAa,QAAS,QAAO,kCAAkC,OAAO;AAC1E,MAAI,aAAa,cAAe,QAAO,2CAA2C,OAAO;AACzF,SAAO,0CAA0C,OAAO;AAC1D;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,QAAM,gBAAgB,gBAAgB,QAAQ,QAAQ;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO,EAAE,UAAU,YAAY,eAAe,QAAQ,GAAG,UAAU,SAAS;AAAA,MAC5E;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,SAAS,SAAS,QAAQ;AAAA,UAC/B;AAAA,UACA,SAAS,OAAO,SAAS;AAAA,UACzB,OAAM;AAAA,UACN,iBAAe;AAAA,UACf,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,QAAQ,QAAQ,QAAQ,QAAQ,EAAE;AAAA;AAAA,MAC3F;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,41 @@
+// src/VideoEmbed.tsx
+import { jsx } from "react/jsx-runtime";
+function buildSrc(videoId, platform) {
+  if (platform === "vimeo") return `https://player.vimeo.com/video/${videoId}`;
+  if (platform === "dailymotion") return `https://www.dailymotion.com/embed/video/${videoId}`;
+  return `https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`;
+}
+function VideoEmbed({
+  videoId,
+  platform = "youtube",
+  title = "Video",
+  lazy = true,
+  aspectRatio = "16/9",
+  className
+}) {
+  const paddingBottom = aspectRatio === "4/3" ? "75%" : "56.25%";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": title,
+      style: { position: "relative", paddingBottom, height: 0, overflow: "hidden" },
+      className,
+      children: /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: buildSrc(videoId, platform),
+          title,
+          loading: lazy ? "lazy" : "eager",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true,
+          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: 0 }
+        }
+      )
+    }
+  );
+}
+export {
+  VideoEmbed
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/VideoEmbed.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface VideoEmbedProps {\n  videoId: string;\n  platform?: 'youtube' | 'vimeo' | 'dailymotion';\n  title?: string;\n  lazy?: boolean;\n  aspectRatio?: '16/9' | '4/3';\n  className?: string;\n}\n\nfunction buildSrc(videoId: string, platform: VideoEmbedProps['platform']): string {\n  if (platform === 'vimeo') return `https://player.vimeo.com/video/${videoId}`;\n  if (platform === 'dailymotion') return `https://www.dailymotion.com/embed/video/${videoId}`;\n  return `https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`;\n}\n\nexport function VideoEmbed({\n  videoId,\n  platform = 'youtube',\n  title = 'Video',\n  lazy = true,\n  aspectRatio = '16/9',\n  className,\n}: VideoEmbedProps) {\n  const paddingBottom = aspectRatio === '4/3' ? '75%' : '56.25%';\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={title}\n      style={{ position: 'relative', paddingBottom, height: 0, overflow: 'hidden' }}\n      className={className}\n    >\n      <iframe\n        src={buildSrc(videoId, platform)}\n        title={title}\n        loading={lazy ? 'lazy' : 'eager'}\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n        allowFullScreen\n        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 0 }}\n      />\n    </div>\n  );\n}\n"],"mappings":";AAkCM;AAvBN,SAAS,SAAS,SAAiB,UAA+C;AAChF,MAAI,aAAa,QAAS,QAAO,kCAAkC,OAAO;AAC1E,MAAI,aAAa,cAAe,QAAO,2CAA2C,OAAO;AACzF,SAAO,0CAA0C,OAAO;AAC1D;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,QAAM,gBAAgB,gBAAgB,QAAQ,QAAQ;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO,EAAE,UAAU,YAAY,eAAe,QAAQ,GAAG,UAAU,SAAS;AAAA,MAC5E;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,SAAS,SAAS,QAAQ;AAAA,UAC/B;AAAA,UACA,SAAS,OAAO,SAAS;AAAA,UACzB,OAAM;AAAA,UACN,iBAAe;AAAA,UACf,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,QAAQ,QAAQ,QAAQ,QAAQ,EAAE;AAAA;AAAA,MAC3F;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@neobyzantine/video-embed",
+  "version": "0.2.0",
+  "description": "Privacy-enhanced YouTube/Vimeo/Dailymotion embed component",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@neobyzantine/types": "0.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^18.3.23",
+    "jsdom": "^26.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.8.0",
+    "vitest": "^3.2.3"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "lint": "tsc --noEmit"
+  }
+}