@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.1

package/dist/sandbox/ScenarioRunner.js

@@ -0,0 +1 @@
+import { nothing } from "lit";

package/dist/sandbox/index.js

@@ -0,0 +1,2 @@
+import "./PlaybackControls.js";
+import "./ScenarioRunner.js";

package/dist/style.css

@@ -433,37 +433,55 @@ video {
   display: none;
 }
 /* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */
+.\!container {
+  width: 100% !important;
+}
 .container {
   width: 100%;
 }
 @media (min-width: 640px) {
+  .\!container {
+    max-width: 640px !important;
+  }
   .container {
     max-width: 640px;
   }
 }
 @media (min-width: 768px) {
+  .\!container {
+    max-width: 768px !important;
+  }
   .container {
     max-width: 768px;
   }
 }
 @media (min-width: 1024px) {
+  .\!container {
+    max-width: 1024px !important;
+  }
   .container {
     max-width: 1024px;
   }
 }
 @media (min-width: 1280px) {
+  .\!container {
+    max-width: 1280px !important;
+  }
   .container {
     max-width: 1280px;
   }
 }
 @media (min-width: 1536px) {
+  .\!container {
+    max-width: 1536px !important;
+  }
   .container {
     max-width: 1536px;
   }
 }
 /* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */
-.pointer-events-none {
-  pointer-events: none;
+.\!visible {
+  visibility: visible !important;
 }
 .visible {
   visibility: visible;
@@ -471,6 +489,9 @@ video {
 .invisible {
   visibility: hidden;
 }
+.collapse {
+  visibility: collapse;
+}
 .static {
   position: static;
 }
@@ -483,6 +504,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -495,24 +519,11 @@ video {
 .isolate {
   isolation: isolate;
 }
-.z-10 {
-  z-index: 10;
-}
-.z-20 {
-  z-index: 20;
-}
-.z-\[20\] {
-  z-index: 20;
-}
 .z-\[5\] {
   z-index: 5;
 }
-.col-span-2 {
-  grid-column: span 2 / span 2;
-}
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+.mb-0 {
+  margin-bottom: 0px;
 }
 .mb-\[1px\] {
   margin-bottom: 1px;
@@ -529,9 +540,18 @@ video {
 .flex {
   display: flex;
 }
+.inline-flex {
+  display: inline-flex;
+}
+.table {
+  display: table;
+}
 .grid {
   display: grid;
 }
+.inline-grid {
+  display: inline-grid;
+}
 .contents {
   display: contents;
 }
@@ -557,6 +577,9 @@ video {
 .h-\[360px\] {
   height: 360px;
 }
+.h-\[400px\] {
+  height: 400px;
+}
 .h-\[500px\] {
   height: 500px;
 }
@@ -572,8 +595,8 @@ video {
 .w-\[1000px\] {
   width: 1000px;
 }
-.w-\[2px\] {
-  width: 2px;
+.w-\[200px\] {
+  width: 200px;
 }
 .w-\[480px\] {
   width: 480px;
@@ -587,30 +610,35 @@ video {
 .w-full {
   width: 100%;
 }
+.flex-shrink {
+  flex-shrink: 1;
+}
+.shrink {
+  flex-shrink: 1;
+}
+.\!transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.cursor-crosshair {
-  cursor: crosshair;
-}
-.touch-none {
-  touch-action: none;
+.cursor-grabbing {
+  cursor: grabbing;
 }
-.touch-pan-x {
-  --tw-pan-x: pan-x;
-  touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+.cursor-pointer {
+  cursor: pointer;
 }
 .resize {
   resize: both;
 }
-.place-content-center {
-  place-content: center;
+.flex-row {
+  flex-direction: row;
 }
 .items-center {
   align-items: center;
 }
-.overflow-auto {
-  overflow: auto;
+.gap-2 {
+  gap: 0.5rem;
 }
 .overflow-hidden {
   overflow: hidden;
@@ -630,9 +658,6 @@ video {
 .border {
   border-width: 1px;
 }
-.border-r-2 {
-  border-right-width: 2px;
-}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -649,9 +674,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
 }
-.bg-opacity-20 {
-  --tw-bg-opacity: 0.2;
-}
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -659,37 +681,13 @@ video {
 .p-4 {
   padding: 1rem;
 }
-.p-\[1px\] {
-  padding: 1px;
-}
 .px-0\.5 {
   padding-left: 0.125rem;
   padding-right: 0.125rem;
 }
-.pb-0 {
-  padding-bottom: 0px;
-}
-.pl-1 {
-  padding-left: 0.25rem;
-}
-.pl-2 {
-  padding-left: 0.5rem;
-}
-.pr-0 {
-  padding-right: 0px;
-}
-.pr-1 {
-  padding-right: 0.25rem;
-}
-.pt-\[8px\] {
-  padding-top: 8px;
-}
 .text-center {
   text-align: center;
 }
-.font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
 .text-\[8px\] {
   font-size: 8px;
 }
@@ -704,9 +702,14 @@ video {
 .font-bold {
   font-weight: 700;
 }
-.ordinal {
-  --tw-ordinal: ordinal;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+.uppercase {
+  text-transform: uppercase;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+.italic {
+  font-style: italic;
 }
 .text-black {
   --tw-text-opacity: 1;
@@ -720,9 +723,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(20 83 45 / var(--tw-text-opacity, 1));
 }
-.line-through {
-  text-decoration-line: line-through;
-}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -738,6 +738,10 @@ video {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

package/dist/transcoding/types/index.d.ts

@@ -81,8 +81,9 @@ interface MediaEngine {
    * Uses scrub rendition and batches by segment for optimal performance
    * Returns thumbnail objects in same order as input timestamps
    * Returns null for any timestamps that fail to extract
+   * @param signal - Optional AbortSignal to cancel in-flight requests when element is disconnected
    */
-  extractThumbnails(timestamps: number[]): Promise<(ThumbnailResult | null)[]>;
+  extractThumbnails(timestamps: number[], signal?: AbortSignal): Promise<(ThumbnailResult | null)[]>;
 }
 interface ThumbnailResult {
   timestamp: number;

package/dist/transcoding/utils/UrlGenerator.d.ts

@@ -5,6 +5,10 @@ import { MediaEngine, RenditionId } from "../types/index.js";
 declare class UrlGenerator {
   private baseUrl;
   constructor(baseUrl: () => string);
+  /**
+   * Get the base URL for constructing absolute URLs
+   */
+  getBaseUrl(): string;
   /**
    * Generate video segment URL
    */
@@ -18,7 +22,8 @@ declare class UrlGenerator {
    */
   generateManifestUrl(mediaUrl: string): string;
   /**
-   * Generate track fragment index URL
+   * Generate track fragment index URL using production API format
+   * @deprecated Use MD5-based URL generation in AssetMediaEngine.fetch() instead
    */
   generateTrackFragmentIndexUrl(mediaUrl: string): string;
   /**

package/dist/transcoding/utils/UrlGenerator.js

@@ -4,6 +4,12 @@ var UrlGenerator = class {
 		this.baseUrl = baseUrl;
 	}
 	/**
+	* Get the base URL for constructing absolute URLs
+	*/
+	getBaseUrl() {
+		return this.baseUrl();
+	}
+	/**
 	* Generate video segment URL
 	*/
 	generateSegmentUrl(segmentId, renditionId, metadata) {
@@ -20,7 +26,7 @@ var UrlGenerator = class {
 	* Generate init segment URL
 	*/
 	generateInitSegmentUrl(mediaUrl, rendition) {
-		return `${this.baseUrl()}/api/v1/transcode/${rendition}/init.m4s?url=${encodeURIComponent(mediaUrl)}`;
+		return `${this.baseUrl()}/api/v1/transcode/${rendition}/init.mp4?url=${encodeURIComponent(mediaUrl)}`;
 	}
 	/**
 	* Generate manifest URL
@@ -29,10 +35,13 @@ var UrlGenerator = class {
 		return `${this.baseUrl()}/api/v1/transcode/manifest.json?url=${encodeURIComponent(mediaUrl)}`;
 	}
 	/**
-	* Generate track fragment index URL
+	* Generate track fragment index URL using production API format
+	* @deprecated Use MD5-based URL generation in AssetMediaEngine.fetch() instead
 	*/
 	generateTrackFragmentIndexUrl(mediaUrl) {
-		return `/@ef-track-fragment-index/${mediaUrl.startsWith("/") ? mediaUrl.slice(1) : mediaUrl}`;
+		let normalizedSrc = mediaUrl.startsWith("/") ? mediaUrl.slice(1) : mediaUrl;
+		normalizedSrc = normalizedSrc.replace(/^\/+/, "");
+		return `@ef-track-fragment-index/${normalizedSrc}`;
 	}
 	/**
 	* Generate quality presets URL

package/dist/transcoding/utils/UrlGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"UrlGenerator.js","names":["baseUrl: () => string"],"sources":["../../../src/transcoding/utils/UrlGenerator.ts"],"sourcesContent":["/**\n * URL generation utilities for transcoding endpoints\n */\n\nimport type { RenditionId } from \"../types/index.js\";\nimport type { MediaEngine } from \"../types/index.ts\";\n\nexport class UrlGenerator {\n  constructor(private baseUrl: () => string) {}\n\n  /**\n   * Generate video segment URL\n   */\n  generateSegmentUrl(\n    segmentId: \"init\" | number,\n    renditionId: RenditionId,\n    metadata: MediaEngine,\n  ): string {\n    const audioRendition = metadata.audioRendition;\n    const videoRendition = metadata.videoRendition;\n    const rendition = audioRendition ?? videoRendition;\n    if (!rendition) {\n      console.error(\"Rendition not found\", metadata);\n      throw new Error(`Rendition ${renditionId} not found`);\n    }\n\n    const template =\n      segmentId === \"init\"\n        ? metadata.templates.initSegment\n        : metadata.templates.mediaSegment;\n    return template\n      .replace(\"{rendition}\", renditionId)\n      .replace(\"{segmentId}\", segmentId.toString())\n      .replace(\"{src}\", metadata.src)\n      .replace(\"{trackId}\", rendition.trackId?.toString() ?? \"\");\n  }\n\n  /**\n   * Generate init segment URL\n   */\n  generateInitSegmentUrl(mediaUrl: string, rendition: string): string {\n    return `${this.baseUrl()}/api/v1/transcode/${rendition}/init.m4s?url=${encodeURIComponent(mediaUrl)}`;\n  }\n\n  /**\n   * Generate manifest URL\n   */\n  generateManifestUrl(mediaUrl: string): string {\n    return `${this.baseUrl()}/api/v1/transcode/manifest.json?url=${encodeURIComponent(mediaUrl)}`;\n  }\n\n  /**\n   * Generate track fragment index URL\n   */\n  generateTrackFragmentIndexUrl(mediaUrl: string): string {\n    const normalizedSrc = mediaUrl.startsWith(\"/\")\n      ? mediaUrl.slice(1)\n      : mediaUrl;\n    return `/@ef-track-fragment-index/${normalizedSrc}`;\n  }\n\n  /**\n   * Generate quality presets URL\n   */\n  generatePresetsUrl(): string {\n    return `${this.baseUrl()}/api/v1/transcode/presets`;\n  }\n}\n"],"mappings":";AAOA,IAAa,eAAb,MAA0B;CACxB,YAAY,AAAQA,SAAuB;EAAvB;;;;;CAKpB,mBACE,WACA,aACA,UACQ;EACR,MAAM,iBAAiB,SAAS;EAChC,MAAM,iBAAiB,SAAS;EAChC,MAAM,YAAY,kBAAkB;AACpC,MAAI,CAAC,WAAW;AACd,WAAQ,MAAM,uBAAuB,SAAS;AAC9C,SAAM,IAAI,MAAM,aAAa,YAAY,YAAY;;AAOvD,UAHE,cAAc,SACV,SAAS,UAAU,cACnB,SAAS,UAAU,cAEtB,QAAQ,eAAe,YAAY,CACnC,QAAQ,eAAe,UAAU,UAAU,CAAC,CAC5C,QAAQ,SAAS,SAAS,IAAI,CAC9B,QAAQ,aAAa,UAAU,SAAS,UAAU,IAAI,GAAG;;;;;CAM9D,uBAAuB,UAAkB,WAA2B;AAClE,SAAO,GAAG,KAAK,SAAS,CAAC,oBAAoB,UAAU,gBAAgB,mBAAmB,SAAS;;;;;CAMrG,oBAAoB,UAA0B;AAC5C,SAAO,GAAG,KAAK,SAAS,CAAC,sCAAsC,mBAAmB,SAAS;;;;;CAM7F,8BAA8B,UAA0B;AAItD,SAAO,6BAHe,SAAS,WAAW,IAAI,GAC1C,SAAS,MAAM,EAAE,GACjB;;;;;CAON,qBAA6B;AAC3B,SAAO,GAAG,KAAK,SAAS,CAAC"}
+{"version":3,"file":"UrlGenerator.js","names":["baseUrl: () => string"],"sources":["../../../src/transcoding/utils/UrlGenerator.ts"],"sourcesContent":["/**\n * URL generation utilities for transcoding endpoints\n */\n\nimport type { RenditionId } from \"../types/index.js\";\nimport type { MediaEngine } from \"../types/index.ts\";\n\nexport class UrlGenerator {\n  constructor(private baseUrl: () => string) {}\n\n  /**\n   * Get the base URL for constructing absolute URLs\n   */\n  getBaseUrl(): string {\n    return this.baseUrl();\n  }\n\n  /**\n   * Generate video segment URL\n   */\n  generateSegmentUrl(\n    segmentId: \"init\" | number,\n    renditionId: RenditionId,\n    metadata: MediaEngine,\n  ): string {\n    const audioRendition = metadata.audioRendition;\n    const videoRendition = metadata.videoRendition;\n    const rendition = audioRendition ?? videoRendition;\n    if (!rendition) {\n      console.error(\"Rendition not found\", metadata);\n      throw new Error(`Rendition ${renditionId} not found`);\n    }\n\n    const template =\n      segmentId === \"init\"\n        ? metadata.templates.initSegment\n        : metadata.templates.mediaSegment;\n    return template\n      .replace(\"{rendition}\", renditionId)\n      .replace(\"{segmentId}\", segmentId.toString())\n      .replace(\"{src}\", metadata.src)\n      .replace(\"{trackId}\", rendition.trackId?.toString() ?? \"\");\n  }\n\n  /**\n   * Generate init segment URL\n   */\n  generateInitSegmentUrl(mediaUrl: string, rendition: string): string {\n    return `${this.baseUrl()}/api/v1/transcode/${rendition}/init.mp4?url=${encodeURIComponent(mediaUrl)}`;\n  }\n\n  /**\n   * Generate manifest URL\n   */\n  generateManifestUrl(mediaUrl: string): string {\n    return `${this.baseUrl()}/api/v1/transcode/manifest.json?url=${encodeURIComponent(mediaUrl)}`;\n  }\n\n  /**\n   * Generate track fragment index URL using production API format\n   * @deprecated Use MD5-based URL generation in AssetMediaEngine.fetch() instead\n   */\n  generateTrackFragmentIndexUrl(mediaUrl: string): string {\n    // Normalize the path: remove leading slash and any double slashes\n    let normalizedSrc = mediaUrl.startsWith(\"/\")\n      ? mediaUrl.slice(1)\n      : mediaUrl;\n    // Remove any remaining leading slashes (handles cases like \"//assets/video.mp4\")\n    normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n    // Legacy format - kept for backward compatibility but should not be used\n    return `@ef-track-fragment-index/${normalizedSrc}`;\n  }\n\n  /**\n   * Generate quality presets URL\n   */\n  generatePresetsUrl(): string {\n    return `${this.baseUrl()}/api/v1/transcode/presets`;\n  }\n}\n"],"mappings":";AAOA,IAAa,eAAb,MAA0B;CACxB,YAAY,AAAQA,SAAuB;EAAvB;;;;;CAKpB,aAAqB;AACnB,SAAO,KAAK,SAAS;;;;;CAMvB,mBACE,WACA,aACA,UACQ;EACR,MAAM,iBAAiB,SAAS;EAChC,MAAM,iBAAiB,SAAS;EAChC,MAAM,YAAY,kBAAkB;AACpC,MAAI,CAAC,WAAW;AACd,WAAQ,MAAM,uBAAuB,SAAS;AAC9C,SAAM,IAAI,MAAM,aAAa,YAAY,YAAY;;AAOvD,UAHE,cAAc,SACV,SAAS,UAAU,cACnB,SAAS,UAAU,cAEtB,QAAQ,eAAe,YAAY,CACnC,QAAQ,eAAe,UAAU,UAAU,CAAC,CAC5C,QAAQ,SAAS,SAAS,IAAI,CAC9B,QAAQ,aAAa,UAAU,SAAS,UAAU,IAAI,GAAG;;;;;CAM9D,uBAAuB,UAAkB,WAA2B;AAClE,SAAO,GAAG,KAAK,SAAS,CAAC,oBAAoB,UAAU,gBAAgB,mBAAmB,SAAS;;;;;CAMrG,oBAAoB,UAA0B;AAC5C,SAAO,GAAG,KAAK,SAAS,CAAC,sCAAsC,mBAAmB,SAAS;;;;;;CAO7F,8BAA8B,UAA0B;EAEtD,IAAI,gBAAgB,SAAS,WAAW,IAAI,GACxC,SAAS,MAAM,EAAE,GACjB;AAEJ,kBAAgB,cAAc,QAAQ,QAAQ,GAAG;AAEjD,SAAO,4BAA4B;;;;;CAMrC,qBAA6B;AAC3B,SAAO,GAAG,KAAK,SAAS,CAAC"}