@editframe/elements 0.16.7-beta.0 → 0.17.6-beta.0

package/dist/ScrubTrackManager.js

@@ -0,0 +1,216 @@
+import debug from "debug";
+import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
+const log = debug("ef:elements:ScrubTrackManager");
+var ScrubTrackManager = class {
+	constructor(videoUrl, jitClient, config = {}) {
+		this.scrubCache = /* @__PURE__ */ new Map();
+		this.metadata = null;
+		this.cacheHits = 0;
+		this.cacheMisses = 0;
+		this.isInitialized = false;
+		this.preloadingSegments = /* @__PURE__ */ new Set();
+		this.videoUrl = videoUrl;
+		this.jitClient = jitClient;
+		this.config = {
+			maxScrubCacheSegments: 10,
+			prefetchCount: 3,
+			fastSeekThresholdMs: 1e4,
+			onLoadingStateChange: () => {},
+			...config
+		};
+	}
+	/**
+	* Initialize scrub track manager and start preloading
+	*/
+	async initialize() {
+		if (this.isInitialized) return;
+		try {
+			this.metadata = await this.jitClient.getMetadata(this.videoUrl);
+			await this.preloadInitialSegments();
+			this.isInitialized = true;
+			log("ScrubTrackManager initialized for", this.videoUrl);
+		} catch (error) {
+			log("Failed to initialize ScrubTrackManager:", error);
+			throw error;
+		}
+	}
+	/**
+	* Determine if scrub track should be used instead of normal video
+	*/
+	shouldUseScrubTrack(seekTimeMs) {
+		const currentQuality = this.jitClient.getCurrentQuality();
+		return !this.jitClient.hasSegmentInCache(this.videoUrl, currentQuality, seekTimeMs);
+	}
+	/**
+	* Detect if this is a fast seeking operation
+	*/
+	isFastSeeking(currentTimeMs, seekTimeMs) {
+		const timeDiff = Math.abs(seekTimeMs - currentTimeMs);
+		return timeDiff > this.config.fastSeekThresholdMs;
+	}
+	/**
+	* Align seek time to 30s scrub segment boundary
+	*/
+	alignToScrubBoundary(timeMs) {
+		const segmentDurationMs = 3e4;
+		return Math.floor(timeMs / segmentDurationMs) * segmentDurationMs;
+	}
+	/**
+	* Get scrub frame for the given seek time
+	*/
+	async getScrubFrame(seekTimeMs) {
+		const alignedTimeMs = this.alignToScrubBoundary(seekTimeMs);
+		try {
+			let videoAsset = this.scrubCache.get(alignedTimeMs);
+			const wasCached = !!videoAsset;
+			if (!videoAsset) {
+				this.config.onLoadingStateChange?.(true, "Loading scrub segment...");
+				const segmentBuffer = await this.jitClient.loadSegment(this.videoUrl, "scrub", alignedTimeMs);
+				this.config.onLoadingStateChange?.(true, "Processing video data...");
+				const segmentBlob = new Blob([segmentBuffer], { type: "video/mp4" });
+				const segmentFile = new File([segmentBlob], `scrub-${alignedTimeMs}.mp4`, { type: "video/mp4" });
+				const segmentId = `scrub-${this.videoUrl}-${alignedTimeMs}`;
+				videoAsset = await VideoAsset.createFromCompleteMP4(segmentId, segmentFile);
+				this.cacheSegment(alignedTimeMs, videoAsset);
+			}
+			const relativeSeekTimeMs = seekTimeMs - alignedTimeMs;
+			const relativeSeekTimeSeconds = relativeSeekTimeMs / 1e3;
+			log(`Seeking to ${relativeSeekTimeSeconds}s within scrub segment starting at ${alignedTimeMs}ms`);
+			const frame = await videoAsset.seekToTime(relativeSeekTimeSeconds);
+			if (!wasCached) this.config.onLoadingStateChange?.(false, "");
+			if (!frame) {
+				log(`Warning: No frame returned for seek to ${relativeSeekTimeSeconds}s in scrub segment`);
+				return null;
+			}
+			this.preloadNearbySegments(alignedTimeMs);
+			return frame;
+		} catch (error) {
+			this.config.onLoadingStateChange?.(false, "");
+			log("Failed to get scrub frame:", error);
+			return null;
+		}
+	}
+	/**
+	* Record cache hit for statistics
+	*/
+	recordCacheHit() {
+		this.cacheHits++;
+	}
+	/**
+	* Record cache miss for statistics
+	*/
+	recordCacheMiss() {
+		this.cacheMisses++;
+	}
+	/**
+	* Get cache performance statistics
+	*/
+	getCacheStats() {
+		const total = this.cacheHits + this.cacheMisses;
+		return {
+			hits: this.cacheHits,
+			misses: this.cacheMisses,
+			hitRate: total > 0 ? this.cacheHits / total : 0
+		};
+	}
+	/**
+	* Check if scrub segment is cached for the given time
+	*/
+	isScrubSegmentCached(seekTimeMs) {
+		const alignedTimeMs = this.alignToScrubBoundary(seekTimeMs);
+		return this.scrubCache.has(alignedTimeMs);
+	}
+	/**
+	* Get current scrub cache size
+	*/
+	getScrubCacheSize() {
+		return this.scrubCache.size;
+	}
+	/**
+	* Get total number of scrub segments for video
+	*/
+	getTotalScrubSegments() {
+		if (!this.metadata?.durationMs) return 0;
+		return Math.ceil(this.metadata.durationMs / 3e4);
+	}
+	/**
+	* Update metadata (e.g., when video duration changes)
+	*/
+	async updateMetadata() {
+		this.metadata = await this.jitClient.getMetadata(this.videoUrl);
+	}
+	/**
+	* Preload initial scrub segments
+	*/
+	async preloadInitialSegments() {
+		const segmentsToPreload = Math.min(this.config.prefetchCount, this.getTotalScrubSegments());
+		const preloadPromises = [];
+		for (let i = 0; i < segmentsToPreload; i++) {
+			const segmentStartMs = i * 3e4;
+			preloadPromises.push(this.preloadSegment(segmentStartMs));
+		}
+		await Promise.allSettled(preloadPromises);
+	}
+	/**
+	* Preload nearby segments around a given time
+	*/
+	preloadNearbySegments(centerTimeMs) {
+		const segmentDurationMs = 3e4;
+		const preloadCount = this.config.prefetchCount;
+		for (let i = 1; i <= preloadCount; i++) {
+			const nextSegmentTime = centerTimeMs + i * segmentDurationMs;
+			const prevSegmentTime = centerTimeMs - i * segmentDurationMs;
+			if (nextSegmentTime < (this.metadata?.durationMs || 0)) this.preloadSegment(nextSegmentTime);
+			if (prevSegmentTime >= 0) this.preloadSegment(prevSegmentTime);
+		}
+	}
+	/**
+	* Preload a single scrub segment (background operation)
+	*/
+	async preloadSegment(startTimeMs) {
+		if (this.scrubCache.has(startTimeMs) || this.preloadingSegments.has(startTimeMs)) return;
+		this.preloadingSegments.add(startTimeMs);
+		try {
+			const segmentBuffer = await this.jitClient.loadSegment(this.videoUrl, "scrub", startTimeMs);
+			const segmentBlob = new Blob([segmentBuffer], { type: "video/mp4" });
+			const segmentFile = new File([segmentBlob], `scrub-${startTimeMs}.mp4`, { type: "video/mp4" });
+			const segmentId = `scrub-${this.videoUrl}-${startTimeMs}`;
+			const videoAsset = await VideoAsset.createFromCompleteMP4(segmentId, segmentFile);
+			this.cacheSegment(startTimeMs, videoAsset);
+			log(`Preloaded scrub segment at ${startTimeMs}ms`);
+		} catch (error) {
+			log(`Failed to preload scrub segment at ${startTimeMs}ms:`, error);
+		} finally {
+			this.preloadingSegments.delete(startTimeMs);
+		}
+	}
+	/**
+	* Cache a scrub segment with LRU eviction
+	*/
+	cacheSegment(startTimeMs, videoAsset) {
+		if (this.scrubCache.size >= this.config.maxScrubCacheSegments) {
+			const oldestKey = this.scrubCache.keys().next().value;
+			if (oldestKey !== void 0) this.scrubCache.delete(oldestKey);
+		}
+		this.scrubCache.set(startTimeMs, videoAsset);
+	}
+	/**
+	* Clear cache and reset state
+	*/
+	reset() {
+		this.scrubCache.clear();
+		this.cacheHits = 0;
+		this.cacheMisses = 0;
+		this.preloadingSegments.clear();
+		this.isInitialized = false;
+		this.metadata = null;
+	}
+	/**
+	* Clean up resources and cancel any pending operations
+	*/
+	cleanup() {
+		this.config.onLoadingStateChange?.(false, "");
+		this.reset();
+	}
+};
+export { ScrubTrackManager };

package/dist/ScrubTrackManager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/SegmentSwitchLoading.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/VideoStuckDiagnostic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/CrossUpdateController.js

@@ -1,16 +1,14 @@
-class CrossUpdateController {
-  constructor(host, target) {
-    this.host = host;
-    this.target = target;
-    this.host.addController(this);
-  }
-  hostUpdate() {
-    this.target.requestUpdate();
-  }
-  remove() {
-    this.host.removeController(this);
-  }
-}
-export {
-  CrossUpdateController
+var CrossUpdateController = class {
+	constructor(host, target) {
+		this.host = host;
+		this.target = target;
+		this.host.addController(this);
+	}
+	hostUpdate() {
+		this.target.requestUpdate();
+	}
+	remove() {
+		this.host.removeController(this);
+	}
 };
+export { CrossUpdateController };

package/dist/elements/EFAudio.d.ts

@@ -4,7 +4,7 @@ export declare class EFAudio extends EFMedia {
     audioElementRef: import('lit-html/directives/ref.js').Ref<HTMLAudioElement>;
     render(): import('lit-html').TemplateResult<1>;
     get audioElement(): HTMLAudioElement | undefined;
-    frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
+    frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/elements/EFAudio.js

@@ -1,48 +1,35 @@
+import { EFMedia } from "./EFMedia.js";
 import { Task } from "@lit/task";
 import { html } from "lit";
 import { customElement } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
-import { EFMedia } from "./EFMedia.js";
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(result) || result;
-  return result;
-};
-let EFAudio = class extends EFMedia {
-  constructor() {
-    super(...arguments);
-    this.audioElementRef = createRef();
-    this.frameTask = new Task(this, {
-      args: () => [
-        this.trackFragmentIndexLoader.status,
-        this.initSegmentsLoader.status,
-        this.seekTask.status,
-        this.fetchSeekTask.status,
-        this.videoAssetTask.status
-      ],
-      task: async () => {
-        await this.trackFragmentIndexLoader.taskComplete;
-        await this.initSegmentsLoader.taskComplete;
-        await this.seekTask.taskComplete;
-        await this.fetchSeekTask.taskComplete;
-        await this.videoAssetTask.taskComplete;
-        this.rootTimegroup?.requestUpdate();
-      }
-    });
-  }
-  render() {
-    return html`<audio ${ref(this.audioElementRef)}></audio>`;
-  }
-  get audioElement() {
-    return this.audioElementRef.value;
-  }
-};
-EFAudio = __decorateClass([
-  customElement("ef-audio")
-], EFAudio);
-export {
-  EFAudio
+let EFAudio = class EFAudio$1 extends EFMedia {
+	constructor(..._args) {
+		super(..._args);
+		this.audioElementRef = createRef();
+		this.frameTask = new Task(this, {
+			args: () => [
+				this.fragmentIndexTask.status,
+				this.seekTask.status,
+				this.mediaSegmentsTask.status,
+				this.videoAssetTask.status
+			],
+			task: async () => {
+				await this.fragmentIndexTask.taskComplete;
+				await this.seekTask.taskComplete;
+				await this.mediaSegmentsTask.taskComplete;
+				await this.videoAssetTask.taskComplete;
+				this.rootTimegroup?.requestUpdate();
+			}
+		});
+	}
+	render() {
+		return html`<audio ${ref(this.audioElementRef)}></audio>`;
+	}
+	get audioElement() {
+		return this.audioElementRef.value;
+	}
 };
+EFAudio = _decorate([customElement("ef-audio")], EFAudio);
+export { EFAudio };