@editframe/elements 0.37.2-beta → 0.38.0

package/dist/sandbox/PlaybackControls.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlaybackControls.js","names":[],"sources":["../../src/sandbox/PlaybackControls.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport type { EFTimegroup } from \"../elements/EFTimegroup.js\";\n\nexport interface PlaybackControlsProps {\n  /**\n   * The timegroup element to control.\n   * If null, controls are disabled.\n   */\n  timegroup: EFTimegroup | null;\n  \n  /**\n   * Playback mode:\n   * - \"auto\": Play/pause with continuous scrubbing\n   * - \"step\": Discrete keyframe navigation\n   */\n  mode?: \"auto\" | \"step\";\n  \n  /**\n   * Callback when mode changes.\n   */\n  onModeChange?: (mode: \"auto\" | \"step\") => void;\n  \n  /**\n   * Keyframes for step mode (array of time values in ms).\n   * If not provided, step mode divides duration into 10 equal steps.\n   */\n  keyframes?: number[];\n}\n\nfunction formatTime(ms: number): string {\n  const totalSeconds = Math.floor(ms / 1000);\n  const minutes = Math.floor(totalSeconds / 60);\n  const seconds = totalSeconds % 60;\n  const centiseconds = Math.floor((ms % 1000) / 10);\n  return `${minutes}:${seconds.toString().padStart(2, \"0\")}.${centiseconds.toString().padStart(2, \"0\")}`;\n}\n\nexport function PlaybackControls({\n  timegroup,\n  mode = \"auto\",\n  onModeChange,\n  keyframes,\n}: PlaybackControlsProps) {\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [isLooping, setIsLooping] = useState(false);\n  const [currentTimeMs, setCurrentTimeMs] = useState(0);\n  const [durationMs, setDurationMs] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const [currentStepIndex, setCurrentStepIndex] = useState(0);\n  \n  const scrubberRef = useRef<HTMLDivElement>(null);\n  const updateIntervalRef = useRef<number | null>(null);\n\n  // Calculate step keyframes\n  const steps = React.useMemo(() => {\n    if (keyframes && keyframes.length > 0) {\n      return keyframes;\n    }\n    // Default: 11 steps (0%, 10%, 20%, ..., 100%)\n    const stepCount = 11;\n    const stepSize = durationMs / (stepCount - 1);\n    return Array.from({ length: stepCount }, (_, i) => i * stepSize);\n  }, [keyframes, durationMs]);\n\n  // Update duration when timegroup changes\n  useEffect(() => {\n    if (timegroup) {\n      setDurationMs(timegroup.durationMs);\n      setCurrentTimeMs(timegroup.currentTimeMs);\n    } else {\n      setDurationMs(0);\n      setCurrentTimeMs(0);\n    }\n  }, [timegroup]);\n\n  // Update current time periodically\n  useEffect(() => {\n    if (!timegroup) return;\n\n    const updateTime = () => {\n      if (!isDragging) {\n        setCurrentTimeMs(timegroup.currentTimeMs);\n        setIsPlaying(timegroup.playbackController?.playing ?? false);\n      }\n    };\n\n    updateIntervalRef.current = window.setInterval(updateTime, 50);\n\n    return () => {\n      if (updateIntervalRef.current) {\n        window.clearInterval(updateIntervalRef.current);\n      }\n    };\n  }, [timegroup, isDragging]);\n\n  // Update step index when time changes in step mode\n  useEffect(() => {\n    if (mode === \"step\" && steps.length > 0) {\n      // Find closest step\n      let closestIndex = 0;\n      const firstStep = steps[0];\n      if (firstStep !== undefined) {\n        let closestDiff = Math.abs(currentTimeMs - firstStep);\n        for (let i = 1; i < steps.length; i++) {\n          const step = steps[i];\n          if (step !== undefined) {\n            const diff = Math.abs(currentTimeMs - step);\n            if (diff < closestDiff) {\n              closestDiff = diff;\n              closestIndex = i;\n            }\n          }\n        }\n        setCurrentStepIndex(closestIndex);\n      }\n    }\n  }, [currentTimeMs, mode, steps]);\n\n  const handlePlayPause = useCallback(async () => {\n    if (!timegroup) return;\n    \n    if (isPlaying) {\n      timegroup.pause();\n      setIsPlaying(false);\n    } else {\n      // Handle AudioContext for mobile devices\n      if (timegroup.playbackController) {\n        try {\n          const audioContext = new AudioContext({ latencyHint: \"playback\" });\n          audioContext.resume();\n          timegroup.playbackController.setPendingAudioContext(audioContext);\n        } catch (error) {\n          console.warn(\"Failed to create/resume AudioContext:\", error);\n        }\n      }\n      await timegroup.play();\n      setIsPlaying(true);\n    }\n  }, [timegroup, isPlaying]);\n\n  const handleLoopToggle = useCallback(() => {\n    if (!timegroup?.playbackController) return;\n    \n    const newLooping = !isLooping;\n    // @ts-expect-error - loop property is read-only in types but writable at runtime\n    timegroup.playbackController.loop = newLooping;\n    setIsLooping(newLooping);\n  }, [timegroup, isLooping]);\n\n  const handleScrubStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {\n    if (!timegroup || !scrubberRef.current) return;\n    \n    setIsDragging(true);\n    handleScrub(e);\n  }, [timegroup]);\n\n  const handleScrub = useCallback((e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent) => {\n    if (!timegroup || !scrubberRef.current || !isDragging) return;\n    \n    const scrubber = scrubberRef.current;\n    if (!scrubber) return;\n    \n    const rect = scrubber.getBoundingClientRect();\n    const touches = \"touches\" in e ? e.touches : null;\n    const clientX = touches && touches[0] \n      ? touches[0].clientX \n      : (e as MouseEvent).clientX;\n    const x = clientX - rect.left;\n    const percent = Math.max(0, Math.min(1, x / rect.width));\n    const targetTimeMs = percent * durationMs;\n    \n    timegroup.currentTime = targetTimeMs / 1000;\n    setCurrentTimeMs(targetTimeMs);\n  }, [timegroup, durationMs, isDragging]);\n\n  const handleScrubEnd = useCallback(() => {\n    setIsDragging(false);\n  }, []);\n\n  // Global mouse/touch events for scrubbing\n  useEffect(() => {\n    if (isDragging) {\n      const handleMove = (e: MouseEvent | TouchEvent) => handleScrub(e);\n      const handleUp = () => handleScrubEnd();\n      \n      document.addEventListener(\"mousemove\", handleMove);\n      document.addEventListener(\"mouseup\", handleUp);\n      document.addEventListener(\"touchmove\", handleMove);\n      document.addEventListener(\"touchend\", handleUp);\n      \n      return () => {\n        document.removeEventListener(\"mousemove\", handleMove);\n        document.removeEventListener(\"mouseup\", handleUp);\n        document.removeEventListener(\"touchmove\", handleMove);\n        document.removeEventListener(\"touchend\", handleUp);\n      };\n    }\n  }, [isDragging, handleScrub, handleScrubEnd]);\n\n  const handleStepPrevious = useCallback(() => {\n    if (!timegroup || steps.length === 0) return;\n    \n    const newIndex = Math.max(0, currentStepIndex - 1);\n    const step = steps[newIndex];\n    if (step !== undefined) {\n      timegroup.currentTime = step / 1000;\n      setCurrentStepIndex(newIndex);\n      setCurrentTimeMs(step);\n    }\n  }, [timegroup, steps, currentStepIndex]);\n\n  const handleStepNext = useCallback(() => {\n    if (!timegroup || steps.length === 0) return;\n    \n    const newIndex = Math.min(steps.length - 1, currentStepIndex + 1);\n    const step = steps[newIndex];\n    if (step !== undefined) {\n      timegroup.currentTime = step / 1000;\n      setCurrentStepIndex(newIndex);\n      setCurrentTimeMs(step);\n    }\n  }, [timegroup, steps, currentStepIndex]);\n\n  const progress = durationMs > 0 ? (currentTimeMs / durationMs) * 100 : 0;\n  const isDisabled = !timegroup;\n\n  return (\n    <div style={styles.container}>\n      {/* Mode Toggle */}\n      <div style={styles.modeToggle}>\n        <button\n          style={{\n            ...styles.modeButton,\n            ...(mode === \"auto\" ? styles.modeButtonActive : {}),\n          }}\n          onClick={() => onModeChange?.(\"auto\")}\n          disabled={isDisabled}\n        >\n          Auto\n        </button>\n        <button\n          style={{\n            ...styles.modeButton,\n            ...(mode === \"step\" ? styles.modeButtonActive : {}),\n          }}\n          onClick={() => onModeChange?.(\"step\")}\n          disabled={isDisabled}\n        >\n          Step\n        </button>\n      </div>\n\n      {/* Controls */}\n      <div style={styles.controls}>\n        {mode === \"auto\" ? (\n          <>\n            {/* Play/Pause */}\n            <button\n              style={styles.button}\n              onClick={handlePlayPause}\n              disabled={isDisabled}\n              title={isPlaying ? \"Pause\" : \"Play\"}\n            >\n              {isPlaying ? \"⏸\" : \"▶\"}\n            </button>\n\n            {/* Loop */}\n            <button\n              style={{\n                ...styles.button,\n                ...(isLooping ? styles.buttonActive : {}),\n              }}\n              onClick={handleLoopToggle}\n              disabled={isDisabled}\n              title=\"Loop\"\n            >\n              🔁\n            </button>\n          </>\n        ) : (\n          <>\n            {/* Previous Step */}\n            <button\n              style={styles.button}\n              onClick={handleStepPrevious}\n              disabled={isDisabled || currentStepIndex === 0}\n              title=\"Previous Step\"\n            >\n              ⏮\n            </button>\n\n            {/* Step indicator */}\n            <span style={styles.stepIndicator}>\n              {currentStepIndex + 1} / {steps.length}\n            </span>\n\n            {/* Next Step */}\n            <button\n              style={styles.button}\n              onClick={handleStepNext}\n              disabled={isDisabled || currentStepIndex === steps.length - 1}\n              title=\"Next Step\"\n            >\n              ⏭\n            </button>\n          </>\n        )}\n      </div>\n\n      {/* Scrubber */}\n      <div style={styles.scrubberContainer}>\n        <span style={styles.time}>{formatTime(currentTimeMs)}</span>\n        <div\n          ref={scrubberRef}\n          style={{\n            ...styles.scrubberTrack,\n            ...(isDragging ? styles.scrubberTrackDragging : {}),\n          }}\n          onMouseDown={handleScrubStart}\n          onTouchStart={handleScrubStart}\n        >\n          <div\n            style={{\n              ...styles.scrubberProgress,\n              width: `${progress}%`,\n            }}\n          >\n            <div style={styles.scrubberHandle} />\n          </div>\n        </div>\n        <span style={styles.time}>{formatTime(durationMs)}</span>\n      </div>\n    </div>\n  );\n}\n\nconst styles: Record<string, React.CSSProperties> = {\n  container: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"8px\",\n    padding: \"8px\",\n    background: \"#1f2937\",\n    borderTop: \"1px solid #374151\",\n  },\n  modeToggle: {\n    display: \"flex\",\n    gap: \"4px\",\n    justifyContent: \"center\",\n  },\n  modeButton: {\n    padding: \"4px 12px\",\n    fontSize: \"11px\",\n    background: \"#374151\",\n    border: \"1px solid #4b5563\",\n    borderRadius: \"4px\",\n    color: \"#d1d5db\",\n    cursor: \"pointer\",\n  },\n  modeButtonActive: {\n    background: \"#3b82f6\",\n    borderColor: \"#3b82f6\",\n    color: \"white\",\n  },\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"8px\",\n  },\n  button: {\n    width: \"32px\",\n    height: \"32px\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"transparent\",\n    border: \"none\",\n    color: \"#e5e7eb\",\n    fontSize: \"16px\",\n    cursor: \"pointer\",\n    borderRadius: \"4px\",\n  },\n  buttonActive: {\n    color: \"#22c55e\",\n  },\n  stepIndicator: {\n    fontSize: \"12px\",\n    color: \"#9ca3af\",\n    minWidth: \"50px\",\n    textAlign: \"center\",\n  },\n  scrubberContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"8px\",\n  },\n  time: {\n    fontSize: \"11px\",\n    color: \"#9ca3af\",\n    fontFamily: \"'SF Mono', 'Monaco', 'Consolas', monospace\",\n    minWidth: \"60px\",\n  },\n  scrubberTrack: {\n    flex: 1,\n    height: \"4px\",\n    background: \"rgba(255, 255, 255, 0.2)\",\n    borderRadius: \"2px\",\n    cursor: \"pointer\",\n    position: \"relative\",\n  },\n  scrubberTrackDragging: {\n    cursor: \"grabbing\",\n  },\n  scrubberProgress: {\n    height: \"100%\",\n    background: \"#3b82f6\",\n    borderRadius: \"2px\",\n    position: \"relative\",\n    transition: \"width 0.05s linear\",\n  },\n  scrubberHandle: {\n    position: \"absolute\",\n    right: \"-6px\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    width: \"12px\",\n    height: \"12px\",\n    background: \"white\",\n    borderRadius: \"50%\",\n    boxShadow: \"0 2px 4px rgba(0, 0, 0, 0.3)\",\n  },\n};\n"],"mappings":""}

package/dist/sandbox/ScenarioRunner.d.ts

@@ -1 +0,0 @@
-import "./index.js";

package/dist/sandbox/ScenarioRunner.js

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

package/dist/sandbox/defineSandbox.d.ts

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

package/dist/sandbox/index.d.ts

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

package/dist/sandbox/index.js

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

package/test/EFVideo.framegen.browsertest.ts

@@ -1,80 +0,0 @@
-import { html, render } from "lit";
-import { afterEach, beforeEach, describe } from "vitest";
-import { test as baseTest } from "../test/useMSW.js";
-import "../src/elements/EFVideo.js";
-import type { EFVideo } from "../src/elements/EFVideo.js";
-import "../src/elements/EFVideo.js";
-import { assetMSWHandlers } from "./useAssetMSW.js";
-import "../src/elements/EFTimegroup.js";
-
-// Status values match the old TaskStatus enum: INITIAL=0, PENDING=1, COMPLETE=2, ERROR=3
-const TaskStatus = {
-  INITIAL: 0,
-  PENDING: 1,
-  COMPLETE: 2,
-  ERROR: 3,
-};
-
-const test = baseTest.extend({
-  setupAssetHandlers: [
-    async ({ worker }, use) => {
-      // Set up centralized MSW handlers to proxy requests to test assets
-      worker.use(...assetMSWHandlers);
-      await use(undefined);
-    },
-    { auto: true },
-  ],
-});
-
-describe("EFVideo Frame Generation", () => {
-  let container: HTMLDivElement;
-  let video: EFVideo;
-
-  beforeEach(() => {
-    // MSW setup is now handled by test fixtures
-
-    // Clean up DOM
-    container = document.createElement("div");
-    document.body.appendChild(container);
-
-    render(
-      html`
-        <ef-video
-          src="media/bars-n-tone2.mp4"
-          mode="asset"
-          current-time-ms="80"
-        ></ef-video>
-      `,
-      container,
-    );
-
-    video = document.querySelector("ef-video") as EFVideo;
-  });
-
-  afterEach(() => container.remove());
-
-  test("initializes with duration of 0", async ({ expect }) => {
-    expect(video.durationMs).toBe(0);
-  });
-
-  test("fragmentIndexTask is pending", ({ expect }) => {
-    expect(video.fragmentIndexTask.status).toEqual(TaskStatus.INITIAL);
-  });
-
-  // Note: Timing-dependent tests disabled due to seek range issues
-  // The test asset data starts at 80ms but component initializes at 0ms
-  // These tests validate task completion after data loading but fail on seek timing
-  describe.skip("after frametask settles (disabled - timing issues)", () => {
-    beforeEach(async () => {
-      await video.frameTask.taskComplete;
-    });
-
-    test("duration is 10000", async ({ expect }) => {
-      expect(video.durationMs).toBeCloseTo(10_085, 0);
-    });
-
-    test("fragmentIndexTask is fulfilled", ({ expect }) => {
-      expect(video.fragmentIndexTask.status).toEqual(TaskStatus.COMPLETE);
-    });
-  });
-});

package/test/thumbnail-performance-test.html

@@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Thumbnail Performance Test</title>
-  <style>
-    body {
-      margin: 0;
-      padding: 20px;
-      font-family: system-ui;
-    }
-    ef-timegroup {
-      width: 1920px;
-      height: 1080px;
-      background: #000;
-    }
-    #results {
-      margin-top: 20px;
-      font-family: monospace;
-      white-space: pre-wrap;
-    }
-  </style>
-</head>
-<body>
-  <h1>Thumbnail Capture Performance Test</h1>
-  <p>Testing captureBatch with yield between captures and size limits</p>
-  
-  <ef-timegroup id="test-timegroup" mode="contain" fps="30" duration="10000">
-    <ef-video src="test-assets/bars-n-tone.mp4" start-time="0" duration="10000"></ef-video>
-  </ef-timegroup>
-  
-  <div id="results"></div>
-  
-  <script type="module">
-    import '/packages/elements/src/elements/EFTimegroup.js';
-    import '/packages/elements/src/elements/EFVideo.js';
-    
-    const timegroup = document.querySelector('ef-timegroup');
-    const results = document.getElementById('results');
-    
-    async function runTest() {
-      results.textContent = 'Waiting for timegroup to initialize...\n';
-      
-      // Wait for media to load
-      await timegroup.updateComplete;
-      if (timegroup.waitForMediaDurations) {
-        await timegroup.waitForMediaDurations();
-      }
-      
-      // Generate timestamps for 15 thumbnails
-      const duration = timegroup.durationMs;
-      const timestamps = [];
-      for (let i = 0; i < 15; i++) {
-        timestamps.push((i * duration) / 14);
-      }
-      
-      results.textContent += `Testing captureBatch with ${timestamps.length} thumbnails...\n`;
-      results.textContent += `Duration: ${duration}ms\n`;
-      results.textContent += `Timestamps: ${timestamps.map(t => Math.round(t)).join(', ')}ms\n\n`;
-      
-      // Measure captureBatch performance
-      const startTime = performance.now();
-      const canvases = await timegroup.captureBatch(timestamps, {
-        scale: 0.25,
-        contentReadyMode: 'immediate'
-      });
-      const endTime = performance.now();
-      const elapsed = endTime - startTime;
-      
-      results.textContent += `\n✅ Capture completed!\n`;
-      results.textContent += `Total time: ${elapsed.toFixed(2)}ms\n`;
-      results.textContent += `Average per thumbnail: ${(elapsed / timestamps.length).toFixed(2)}ms\n`;
-      results.textContent += `Canvases captured: ${canvases.length}\n`;
-      
-      // Check canvas dimensions
-      if (canvases.length > 0) {
-        const firstCanvas = canvases[0];
-        results.textContent += `\nCanvas dimensions:\n`;
-        results.textContent += `  Width: ${firstCanvas.width}px (logical: ${firstCanvas.style.width})\n`;
-        results.textContent += `  Height: ${firstCanvas.height}px (logical: ${firstCanvas.style.height})\n`;
-        
-        // Verify max size limit (480px max width)
-        const logicalWidth = parseInt(firstCanvas.style.width);
-        if (logicalWidth <= 480) {
-          results.textContent += `  ✅ Size limit enforced (${logicalWidth}px <= 480px)\n`;
-        } else {
-          results.textContent += `  ⚠️ Size limit NOT enforced (${logicalWidth}px > 480px)\n`;
-        }
-      }
-      
-      // Test responsiveness - try to interact during capture
-      results.textContent += `\nTesting responsiveness during capture...\n`;
-      let interactionCount = 0;
-      const interactionInterval = setInterval(() => {
-        interactionCount++;
-        results.textContent += `  Interaction ${interactionCount} processed\n`;
-      }, 10);
-      
-      const startTime2 = performance.now();
-      const canvases2 = await timegroup.captureBatch(timestamps.slice(0, 5), {
-        scale: 0.25,
-        contentReadyMode: 'immediate'
-      });
-      const endTime2 = performance.now();
-      clearInterval(interactionInterval);
-      
-      results.textContent += `\n✅ Responsiveness test completed!\n`;
-      results.textContent += `Capture time: ${(endTime2 - startTime2).toFixed(2)}ms\n`;
-      results.textContent += `Interactions processed: ${interactionCount}\n`;
-      results.textContent += `  (Higher is better - shows browser stayed responsive)\n`;
-    }
-    
-    // Run test after a short delay to ensure everything is loaded
-    setTimeout(runTest, 1000);
-  </script>
-</body>
-</html>