@editframe/elements 0.19.4-beta.0 → 0.20.1-beta.0

package/src/elements/EFMedia/BaseMediaEngine.browsertest.ts

@@ -7,6 +7,7 @@ import { BaseMediaEngine, mediaCache } from "./BaseMediaEngine.js";
 const test = baseTest.extend<{}>({});
 
 // Test implementation of BaseMediaEngine for testing
+// @ts-expect-error missing implementations
 class TestMediaEngine extends BaseMediaEngine {
   fetchMediaSegment = vi.fn();
   public host: EFMedia;
@@ -221,14 +222,8 @@ describe("BaseMediaEngine abort signal handling", () => {
     const host = {
       fetch: vi
         .fn()
-        .mockImplementation(
-          () =>
-            new Promise((resolve) =>
-              setTimeout(
-                () => resolve({ arrayBuffer: () => new ArrayBuffer(1024) }),
-                100,
-              ),
-            ),
+        .mockImplementation(() =>
+          Promise.resolve({ arrayBuffer: () => new ArrayBuffer(1024) }),
         ),
     } as any;
 

package/src/elements/EFMedia/BaseMediaEngine.ts

@@ -2,10 +2,12 @@ import { RequestDeduplicator } from "../../transcoding/cache/RequestDeduplicator
 import type {
   AudioRendition,
   SegmentTimeRange,
+  ThumbnailResult,
   VideoRendition,
 } from "../../transcoding/types";
 import { SizeAwareLRUCache } from "../../utils/LRUCache.js";
 import type { EFMedia } from "../EFMedia.js";
+import type { MediaRendition } from "./shared/MediaTaskUtils.js";
 
 // Global instances shared across all media engines
 export const mediaCache = new SizeAwareLRUCache<string>(100 * 1024 * 1024); // 100MB cache limit
@@ -205,6 +207,16 @@ export abstract class BaseMediaEngine {
     rendition: { trackId: number | undefined; src: string },
   ): Promise<ArrayBuffer>;
 
+  abstract fetchInitSegment(
+    rendition: { trackId: number | undefined; src: string },
+    signal: AbortSignal,
+  ): Promise<ArrayBuffer>;
+
+  abstract computeSegmentId(
+    desiredSeekTimeMs: number,
+    rendition: MediaRendition,
+  ): number | undefined;
+
   /**
    * Fetch media segment with built-in deduplication
    * Now uses global deduplication for all requests
@@ -387,4 +399,27 @@ export abstract class BaseMediaEngine {
       segmentIds.filter((id) => this.isSegmentCached(id, rendition)),
     );
   }
+
+  /**
+   * Extract thumbnail canvases at multiple timestamps efficiently
+   * Default implementation provides helpful error information
+   */
+  async extractThumbnails(
+    timestamps: number[],
+  ): Promise<(ThumbnailResult | null)[]> {
+    const engineName = this.constructor.name;
+    console.warn(
+      `${engineName}: extractThumbnails not properly implemented. ` +
+        "This MediaEngine type does not support thumbnail generation. " +
+        "Supported engines: JitMediaEngine. " +
+        `Requested ${timestamps.length} thumbnail${timestamps.length === 1 ? "" : "s"}.`,
+    );
+    return timestamps.map(() => null);
+  }
+
+  abstract convertToSegmentRelativeTimestamps(
+    globalTimestamps: number[],
+    segmentId: number,
+    rendition: VideoRendition,
+  ): number[];
 }

package/src/elements/EFMedia/JitMediaEngine.ts

@@ -2,16 +2,19 @@ import type {
   AudioRendition,
   MediaEngine,
   RenditionId,
+  ThumbnailResult,
   VideoRendition,
 } from "../../transcoding/types";
 import type { ManifestResponse } from "../../transcoding/types/index.js";
 import type { UrlGenerator } from "../../transcoding/utils/UrlGenerator";
 import type { EFMedia } from "../EFMedia.js";
 import { BaseMediaEngine } from "./BaseMediaEngine";
+import { ThumbnailExtractor } from "./shared/ThumbnailExtractor.js";
 
 export class JitMediaEngine extends BaseMediaEngine implements MediaEngine {
   private urlGenerator: UrlGenerator;
   private data: ManifestResponse = {} as ManifestResponse;
+  private thumbnailExtractor: ThumbnailExtractor;
 
   static async fetch(host: EFMedia, urlGenerator: UrlGenerator, url: string) {
     const engine = new JitMediaEngine(host, urlGenerator);
@@ -23,6 +26,7 @@ export class JitMediaEngine extends BaseMediaEngine implements MediaEngine {
   constructor(host: EFMedia, urlGenerator: UrlGenerator) {
     super(host);
     this.urlGenerator = urlGenerator;
+    this.thumbnailExtractor = new ThumbnailExtractor(this);
   }
 
   get durationMs() {
@@ -204,4 +208,34 @@ export class JitMediaEngine extends BaseMediaEngine implements MediaEngine {
       maxAudioBufferFetches: 3,
     };
   }
+
+  /**
+   * Extract thumbnail canvases using same rendition priority as video playback for frame alignment
+   */
+  async extractThumbnails(
+    timestamps: number[],
+  ): Promise<(ThumbnailResult | null)[]> {
+    const mainRendition = this.videoRendition;
+    const scrubRendition = this.getScrubVideoRendition();
+
+    const rendition = mainRendition || scrubRendition;
+
+    if (!rendition) {
+      return timestamps.map(() => null);
+    }
+
+    return this.thumbnailExtractor.extractThumbnails(
+      timestamps,
+      rendition,
+      this.durationMs,
+    );
+  }
+
+  convertToSegmentRelativeTimestamps(
+    globalTimestamps: number[],
+    _segmentId: number,
+    _rendition: VideoRendition,
+  ): number[] {
+    return globalTimestamps.map((timestamp) => timestamp / 1000);
+  }
 }

package/src/elements/EFMedia/audioTasks/makeAudioBufferTask.ts

@@ -42,13 +42,15 @@ export const makeAudioBufferTask = (host: EFMedia): AudioBufferTask => {
     task: async ([seekTimeMs], { signal }) => {
       // Skip buffering entirely in rendering mode
       if (EF_RENDERING()) {
-        return currentState; // Return existing state without any buffering activity
+        return currentState;
       }
 
-      // Get media engine to potentially override buffer configuration
       const mediaEngine = await getLatestMediaEngine(host, signal);
 
-      // Use media engine's buffer config, falling back to host properties
+      if (!mediaEngine.audioRendition) {
+        return currentState;
+      }
+
       const engineConfig = mediaEngine.getBufferConfig();
       const bufferDurationMs = engineConfig.audioBufferDurationMs;
       const maxParallelFetches = engineConfig.maxAudioBufferFetches;
@@ -85,11 +87,10 @@ export const makeAudioBufferTask = (host: EFMedia): AudioBufferTask => {
             return mediaEngine.isSegmentCached(segmentId, rendition);
           },
           getRendition: async () => {
-            // Get real audio rendition from media engine
             const mediaEngine = await getLatestMediaEngine(host, signal);
             const audioRendition = mediaEngine.audioRendition;
             if (!audioRendition) {
-              throw new Error("Audio rendition not available");
+              throw new Error("No audio track available in source");
             }
             return audioRendition;
           },

package/src/elements/EFMedia/audioTasks/makeAudioFrequencyAnalysisTask.ts

@@ -95,6 +95,11 @@ export function makeAudioFrequencyAnalysisTask(element: EFMedia) {
     task: async (_, { signal }) => {
       if (element.currentSourceTimeMs < 0) return null;
 
+      const mediaEngine = element.mediaEngineTask.value;
+      if (!mediaEngine?.audioRendition) {
+        return null;
+      }
+
       const currentTimeMs = element.currentSourceTimeMs;
 
       // Calculate exact audio window needed based on fftDecay and frame timing

package/src/elements/EFMedia/audioTasks/makeAudioInitSegmentFetchTask.ts

@@ -5,7 +5,7 @@ import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
 
 export const makeAudioInitSegmentFetchTask = (
   host: EFMedia,
-): Task<readonly [MediaEngine | undefined], ArrayBuffer> => {
+): Task<readonly [MediaEngine | undefined], ArrayBuffer | undefined> => {
   return new Task(host, {
     args: () => [host.mediaEngineTask.value] as const,
     onError: (error) => {
@@ -14,10 +14,13 @@ export const makeAudioInitSegmentFetchTask = (
     onComplete: (_value) => {},
     task: async ([_mediaEngine], { signal }) => {
       const mediaEngine = await getLatestMediaEngine(host, signal);
-      return mediaEngine.fetchInitSegment(
-        mediaEngine.getAudioRendition(),
-        signal,
-      );
+
+      const audioRendition = mediaEngine.audioRendition;
+      if (!audioRendition) {
+        return undefined;
+      }
+
+      return mediaEngine.fetchInitSegment(audioRendition, signal);
     },
   });
 };

package/src/elements/EFMedia/audioTasks/makeAudioInputTask.ts

@@ -19,20 +19,20 @@ export const makeAudioInputTask = (host: EFMedia): InputTask => {
     onComplete: (_value) => {},
     task: async (_, { signal }) => {
       const initSegment = await host.audioInitSegmentFetchTask.taskComplete;
-      signal.throwIfAborted(); // Abort if a new seek started
+      signal.throwIfAborted();
       const segment = await host.audioSegmentFetchTask.taskComplete;
-      signal.throwIfAborted(); // Abort if a new seek started
+      signal.throwIfAborted();
+
       if (!initSegment || !segment) {
-        throw new Error("Init segment or segment is not available");
+        throw new Error("No audio track available in source");
       }
 
-      // Get startTimeOffsetMs from the audio rendition if available
       const mediaEngine = await host.mediaEngineTask.taskComplete;
       const audioRendition = mediaEngine?.audioRendition;
       const startTimeOffsetMs = audioRendition?.startTimeOffsetMs;
 
       const arrayBuffer = await new Blob([initSegment, segment]).arrayBuffer();
-      signal.throwIfAborted(); // Abort if a new seek started
+      signal.throwIfAborted();
       return new BufferedSeekingInput(arrayBuffer, {
         videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
         audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,

package/src/elements/EFMedia/audioTasks/makeAudioSegmentFetchTask.ts

@@ -7,7 +7,7 @@ export const makeAudioSegmentFetchTask = (
   host: EFMedia,
 ): Task<
   readonly [MediaEngine | undefined, number | undefined],
-  ArrayBuffer
+  ArrayBuffer | undefined
 > => {
   return new Task(host, {
     args: () =>
@@ -18,14 +18,18 @@ export const makeAudioSegmentFetchTask = (
     onComplete: (_value) => {},
     task: async (_, { signal }) => {
       const mediaEngine = await getLatestMediaEngine(host, signal);
+
+      const audioRendition = mediaEngine.audioRendition;
+      if (!audioRendition) {
+        return undefined;
+      }
+
       const segmentId = await host.audioSegmentIdTask.taskComplete;
       if (segmentId === undefined) {
-        // Provide more context in the error to help with debugging
-        const rendition = mediaEngine.audioRendition;
         const debugInfo = {
-          hasRendition: !!rendition,
-          segmentDurationMs: rendition?.segmentDurationMs,
-          segmentDurationsMs: rendition?.segmentDurationsMs?.length || 0,
+          hasRendition: true,
+          segmentDurationMs: audioRendition.segmentDurationMs,
+          segmentDurationsMs: audioRendition.segmentDurationsMs?.length || 0,
           desiredSeekTimeMs: host.desiredSeekTimeMs,
           intrinsicDurationMs: host.intrinsicDurationMs,
         };
@@ -34,12 +38,7 @@ export const makeAudioSegmentFetchTask = (
         );
       }
 
-      // SIMPLIFIED: Direct call to mediaEngine - deduplication is built-in
-      return mediaEngine.fetchMediaSegment(
-        segmentId,
-        mediaEngine.getAudioRendition(),
-        signal,
-      );
+      return mediaEngine.fetchMediaSegment(segmentId, audioRendition, signal);
     },
   });
 };

package/src/elements/EFMedia/audioTasks/makeAudioSegmentIdTask.ts

@@ -15,10 +15,13 @@ export const makeAudioSegmentIdTask = (
     task: async ([, targetSeekTimeMs], { signal }) => {
       const mediaEngine = await getLatestMediaEngine(host, signal);
       signal.throwIfAborted(); // Abort if a new seek started
-      return mediaEngine.computeSegmentId(
-        targetSeekTimeMs, // Use captured value, not host.desiredSeekTimeMs
-        mediaEngine.getAudioRendition(),
-      );
+
+      const audioRendition = mediaEngine.audioRendition;
+      if (!audioRendition) {
+        return undefined;
+      }
+
+      return mediaEngine.computeSegmentId(targetSeekTimeMs, audioRendition);
     },
   });
 };

package/src/elements/EFMedia/audioTasks/makeAudioTimeDomainAnalysisTask.ts

@@ -27,6 +27,11 @@ export function makeAudioTimeDomainAnalysisTask(element: EFMedia) {
     task: async (_, { signal }) => {
       if (element.currentSourceTimeMs < 0) return null;
 
+      const mediaEngine = element.mediaEngineTask.value;
+      if (!mediaEngine?.audioRendition) {
+        return null;
+      }
+
       const currentTimeMs = element.currentSourceTimeMs;
 
       // Calculate exact audio window needed based on fftDecay and frame timing

package/src/elements/EFMedia/shared/AudioSpanUtils.ts

@@ -16,7 +16,7 @@ const fetchAudioSegmentData = async (
 ): Promise<Map<number, ArrayBuffer>> => {
   const audioRendition = mediaEngine.audioRendition;
   if (!audioRendition) {
-    throw new Error("Audio rendition not available");
+    throw new Error("No audio track available in source");
   }
 
   const segmentData = new Map<number, ArrayBuffer>();
@@ -73,7 +73,7 @@ export const fetchAudioSpanningTime = async (
   const initSegment = await host.audioInitSegmentFetchTask.taskComplete;
 
   if (!mediaEngine?.audioRendition) {
-    throw new Error("Audio rendition not available");
+    throw new Error("No audio track available in source");
   }
 
   if (!initSegment) {

package/src/elements/EFMedia/shared/GlobalInputCache.ts

@@ -0,0 +1,77 @@
+import type { Input } from "mediabunny";
+import { LRUCache } from "../../../utils/LRUCache.js";
+
+/**
+ * Global cache for MediaBunny Input instances
+ * Shared across all MediaEngine instances to prevent duplicate decoding
+ * of the same segment data
+ */
+class GlobalInputCache {
+  private cache = new LRUCache<string, Input>(50); // 50 Input instances max
+
+  /**
+   * Generate standardized cache key for Input objects
+   * Format: "input:{src}:{segmentId}:{renditionId}"
+   */
+  private generateKey(
+    src: string,
+    segmentId: number,
+    renditionId?: string,
+  ): string {
+    return `input:${src}:${segmentId}:${renditionId || "default"}`;
+  }
+
+  /**
+   * Get cached Input object
+   */
+  get(src: string, segmentId: number, renditionId?: string): Input | undefined {
+    const key = this.generateKey(src, segmentId, renditionId);
+    return this.cache.get(key);
+  }
+
+  /**
+   * Cache Input object
+   */
+  set(
+    src: string,
+    segmentId: number,
+    input: Input,
+    renditionId?: string,
+  ): void {
+    const key = this.generateKey(src, segmentId, renditionId);
+    this.cache.set(key, input);
+  }
+
+  /**
+   * Check if Input is cached
+   */
+  has(src: string, segmentId: number, renditionId?: string): boolean {
+    const key = this.generateKey(src, segmentId, renditionId);
+    return this.cache.has(key);
+  }
+
+  /**
+   * Clear all cached Input objects
+   */
+  clear(): void {
+    this.cache.clear();
+  }
+
+  /**
+   * Get cache statistics for debugging
+   */
+  getStats() {
+    return {
+      size: this.cache.size,
+      cachedKeys: Array.from((this.cache as any).cache.keys()),
+    };
+  }
+}
+
+// Single global instance shared across all MediaEngine instances
+export const globalInputCache = new GlobalInputCache();
+
+// Export for debugging (works in both browser and server)
+(
+  globalThis as typeof globalThis & { debugInputCache: typeof globalInputCache }
+).debugInputCache = globalInputCache;

package/src/elements/EFMedia/shared/RenditionHelpers.browsertest.ts

@@ -107,7 +107,7 @@ describe("RenditionHelpers", () => {
       expect,
     }) => {
       expect(() => getAudioRendition(mockMediaEngineWithoutAudio)).toThrow(
-        "Audio rendition is not available",
+        "No audio track available in source",
       );
     });
   });
@@ -128,7 +128,7 @@ describe("RenditionHelpers", () => {
       expect,
     }) => {
       expect(() => getVideoRendition(mockMediaEngineWithoutVideo)).toThrow(
-        "Video rendition is not available",
+        "No video track available in source",
       );
     });
   });

package/src/elements/EFMedia/shared/RenditionHelpers.ts

@@ -10,7 +10,7 @@ import type {
 export const getAudioRendition = (mediaEngine: MediaEngine): AudioRendition => {
   const audioRendition = mediaEngine.audioRendition;
   if (!audioRendition) {
-    throw new Error("Audio rendition is not available");
+    throw new Error("No audio track available in source");
   }
   return audioRendition;
 };
@@ -21,7 +21,7 @@ export const getAudioRendition = (mediaEngine: MediaEngine): AudioRendition => {
 export const getVideoRendition = (mediaEngine: MediaEngine): VideoRendition => {
   const videoRendition = mediaEngine.videoRendition;
   if (!videoRendition) {
-    throw new Error("Video rendition is not available");
+    throw new Error("No video track available in source");
   }
   return videoRendition;
 };

package/src/elements/EFMedia/shared/ThumbnailExtractor.ts

@@ -0,0 +1,227 @@
+import { ALL_FORMATS, BlobSource, CanvasSink, Input } from "mediabunny";
+import type {
+  ThumbnailResult,
+  VideoRendition,
+} from "../../../transcoding/types/index.js";
+import type { BaseMediaEngine } from "../BaseMediaEngine.js";
+import { globalInputCache } from "./GlobalInputCache.js";
+
+/**
+ * Shared thumbnail extraction logic for all MediaEngine implementations
+ * Eliminates code duplication and provides consistent behavior
+ */
+export class ThumbnailExtractor {
+  constructor(private mediaEngine: BaseMediaEngine) {}
+
+  /**
+   * Extract thumbnails at multiple timestamps efficiently using segment batching
+   */
+  async extractThumbnails(
+    timestamps: number[],
+    rendition: VideoRendition,
+    durationMs: number,
+  ): Promise<(ThumbnailResult | null)[]> {
+    if (timestamps.length === 0) {
+      return [];
+    }
+
+    // Validate and filter timestamps within bounds
+    const validTimestamps = timestamps.filter(
+      (timeMs) => timeMs >= 0 && timeMs <= durationMs,
+    );
+
+    if (validTimestamps.length === 0) {
+      console.warn(
+        `ThumbnailExtractor: All timestamps out of bounds (0-${durationMs}ms)`,
+      );
+      return timestamps.map(() => null);
+    }
+
+    // Group timestamps by segment for batch processing
+    const segmentGroups = this.groupTimestampsBySegment(
+      validTimestamps,
+      rendition,
+    );
+
+    // Extract batched by segment using CanvasSink
+    const results = new Map<number, ThumbnailResult | null>();
+
+    for (const [segmentId, segmentTimestamps] of segmentGroups) {
+      try {
+        const segmentResults = await this.extractSegmentThumbnails(
+          segmentId,
+          segmentTimestamps,
+          rendition,
+        );
+
+        for (const [timestamp, thumbnail] of segmentResults) {
+          results.set(timestamp, thumbnail);
+        }
+      } catch (error) {
+        console.warn(
+          `ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`,
+          error,
+        );
+        // Mark all timestamps in this segment as failed
+        for (const timestamp of segmentTimestamps) {
+          results.set(timestamp, null);
+        }
+      }
+    }
+
+    // Return in original order, null for any that failed or were out of bounds
+    return timestamps.map((t) => {
+      // If timestamp was out of bounds, return null
+      if (t < 0 || t > durationMs) {
+        return null;
+      }
+      return results.get(t) || null;
+    });
+  }
+
+  /**
+   * Group timestamps by segment ID for efficient batch processing
+   */
+  private groupTimestampsBySegment(
+    timestamps: number[],
+    rendition: VideoRendition,
+  ): Map<number, number[]> {
+    const segmentGroups = new Map<number, number[]>();
+
+    for (const timeMs of timestamps) {
+      try {
+        const segmentId = this.mediaEngine.computeSegmentId(timeMs, rendition);
+        if (segmentId !== undefined) {
+          if (!segmentGroups.has(segmentId)) {
+            segmentGroups.set(segmentId, []);
+          }
+          const segmentGroup = segmentGroups.get(segmentId) ?? [];
+          if (!segmentGroup) {
+            segmentGroups.set(segmentId, []);
+          }
+          segmentGroup.push(timeMs);
+        }
+      } catch (error) {
+        console.warn(
+          `ThumbnailExtractor: Could not compute segment for timestamp ${timeMs}:`,
+          error,
+        );
+      }
+    }
+
+    return segmentGroups;
+  }
+
+  /**
+   * Extract thumbnails for a specific segment using CanvasSink
+   */
+  private async extractSegmentThumbnails(
+    segmentId: number,
+    timestamps: number[],
+    rendition: VideoRendition,
+  ): Promise<Map<number, ThumbnailResult | null>> {
+    const results = new Map<number, ThumbnailResult | null>();
+
+    try {
+      // Get segment data through existing media engine methods (uses caches)
+      const abortController = new AbortController();
+      const [initSegment, mediaSegment] = await Promise.all([
+        this.mediaEngine.fetchInitSegment(rendition, abortController.signal),
+        this.mediaEngine.fetchMediaSegment(segmentId, rendition),
+      ]);
+
+      // Create Input for this segment using global shared cache
+      const segmentBlob = new Blob([initSegment, mediaSegment]);
+
+      let input = globalInputCache.get(rendition.src, segmentId, rendition.id);
+      if (!input) {
+        input = new Input({
+          formats: ALL_FORMATS,
+          source: new BlobSource(segmentBlob),
+        });
+        globalInputCache.set(rendition.src, segmentId, input, rendition.id);
+      }
+
+      // Set up CanvasSink for batched extraction
+      const videoTrack = await input.getPrimaryVideoTrack();
+      if (!videoTrack) {
+        // No video track - return nulls for all timestamps
+        for (const timestamp of timestamps) {
+          results.set(timestamp, null);
+        }
+        return results;
+      }
+
+      const sink = new CanvasSink(videoTrack);
+
+      // Convert global timestamps to segment-relative (in seconds for mediabunny)
+      const relativeTimestamps = this.convertToSegmentRelativeTimestamps(
+        timestamps,
+        segmentId,
+        rendition,
+      );
+
+      // Batch extract all thumbnails for this segment
+      const timestampResults = [];
+      for await (const result of sink.canvasesAtTimestamps(
+        relativeTimestamps,
+      )) {
+        timestampResults.push(result);
+      }
+
+      // Map results back to original timestamps
+      for (let i = 0; i < timestamps.length; i++) {
+        const globalTimestamp = timestamps[i];
+        if (globalTimestamp === undefined) {
+          continue;
+        }
+
+        const result = timestampResults[i];
+
+        if (result?.canvas) {
+          const canvas = result.canvas;
+          if (
+            canvas instanceof HTMLCanvasElement ||
+            canvas instanceof OffscreenCanvas
+          ) {
+            results.set(globalTimestamp, {
+              timestamp: globalTimestamp,
+              thumbnail: canvas,
+            });
+          } else {
+            results.set(globalTimestamp, null);
+          }
+        } else {
+          results.set(globalTimestamp, null);
+        }
+      }
+    } catch (error) {
+      console.error(
+        `ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`,
+        error,
+      );
+      // Return nulls for all timestamps on error
+      for (const timestamp of timestamps) {
+        results.set(timestamp, null);
+      }
+    }
+
+    return results;
+  }
+
+  /**
+   * Convert global timestamps to segment-relative timestamps for mediabunny
+   * This is where the main difference between JIT and Asset engines lies
+   */
+  private convertToSegmentRelativeTimestamps(
+    globalTimestamps: number[],
+    segmentId: number,
+    rendition: VideoRendition,
+  ): number[] {
+    return this.mediaEngine.convertToSegmentRelativeTimestamps(
+      globalTimestamps,
+      segmentId,
+      rendition,
+    );
+  }
+}