@helios-project/player 0.48.3

package/dist/features/audio-utils.js

@@ -0,0 +1,66 @@
+export async function getAudioAssets(doc) {
+    const audioTags = Array.from(doc.querySelectorAll('audio'));
+    return Promise.all(audioTags.map(async (tag) => {
+        if (!tag.src)
+            return { buffer: new ArrayBuffer(0), mimeType: null };
+        try {
+            const res = await fetch(tag.src);
+            const volumeAttr = tag.getAttribute('volume');
+            return {
+                buffer: await res.arrayBuffer(),
+                mimeType: res.headers.get('content-type'),
+                // Support non-standard 'volume' attribute for declarative usage, fallback to DOM property
+                volume: volumeAttr !== null ? parseFloat(volumeAttr) : tag.volume,
+                muted: tag.muted,
+                loop: tag.loop,
+                startTime: parseFloat(tag.getAttribute('data-start-time') || '0') || 0
+            };
+        }
+        catch (e) {
+            console.warn("Failed to fetch audio asset:", tag.src, e);
+            return { buffer: new ArrayBuffer(0), mimeType: null };
+        }
+    }));
+}
+export async function mixAudio(assets, duration, sampleRate, rangeStart = 0) {
+    if (typeof OfflineAudioContext === 'undefined') {
+        throw new Error("OfflineAudioContext not supported in this environment");
+    }
+    if (duration <= 0) {
+        // Return silent 1-sample buffer to avoid errors
+        const ctx = new OfflineAudioContext(2, 1, sampleRate);
+        return ctx.startRendering();
+    }
+    const length = Math.ceil(duration * sampleRate);
+    const ctx = new OfflineAudioContext(2, length, sampleRate);
+    for (const asset of assets) {
+        if (asset.buffer.byteLength === 0)
+            continue;
+        try {
+            const audioBuffer = await ctx.decodeAudioData(asset.buffer.slice(0));
+            const source = ctx.createBufferSource();
+            source.buffer = audioBuffer;
+            source.loop = !!asset.loop;
+            const gainNode = ctx.createGain();
+            const volume = asset.muted ? 0 : (typeof asset.volume === 'number' ? asset.volume : 1);
+            gainNode.gain.value = volume;
+            source.connect(gainNode);
+            gainNode.connect(ctx.destination);
+            const assetStart = asset.startTime || 0;
+            // Calculate when this clip should play relative to the export window
+            let playbackStart = assetStart - rangeStart;
+            let startOffset = 0;
+            if (playbackStart < 0) {
+                // If the clip starts before the window, we need to skip the beginning
+                startOffset = -playbackStart;
+                playbackStart = 0;
+            }
+            // source.start(when, offset)
+            source.start(playbackStart, startOffset);
+        }
+        catch (e) {
+            console.warn("Failed to decode audio asset:", e);
+        }
+    }
+    return ctx.startRendering();
+}

package/dist/features/dom-capture.d.ts

@@ -0,0 +1 @@
+export declare function captureDomToBitmap(element: HTMLElement): Promise<ImageBitmap>;

package/dist/features/dom-capture.js

@@ -0,0 +1,253 @@
+export async function captureDomToBitmap(element) {
+    const doc = element.ownerDocument || document;
+    // 1. Clone & Inline Assets
+    let clone = element.cloneNode(true);
+    await inlineImages(clone);
+    clone = inlineCanvases(element, clone);
+    clone = inlineVideos(element, clone);
+    // 2. Serialize DOM
+    const serializer = new XMLSerializer();
+    const html = serializer.serializeToString(clone);
+    // 3. Collect styles
+    // We collect all style tags to ensure CSS-in-JS and other styles are preserved.
+    const styleElements = Array.from(doc.querySelectorAll('style'));
+    const inlineStylesPromises = styleElements.map(async (style) => {
+        const css = style.textContent || '';
+        const processed = await processCss(css, doc.baseURI);
+        // Create a new style tag to preserve the structure,
+        // but here we just wrap in <style> as we are concatenating strings anyway.
+        // If we want to preserve attributes (like id="my-style"), we should look at attributes.
+        // The previous implementation used style.outerHTML which preserved attributes.
+        // Let's try to preserve attributes by cloning.
+        const styleClone = style.cloneNode(true);
+        styleClone.textContent = processed;
+        return styleClone.outerHTML;
+    });
+    const inlineStyles = (await Promise.all(inlineStylesPromises)).join('\n');
+    // Fetch and inline external stylesheets
+    const externalStyles = await getExternalStyles(doc);
+    const styles = externalStyles + '\n' + inlineStyles;
+    // 4. Determine dimensions
+    // Use scroll dimensions to capture full content, fallback to offset or defaults.
+    const width = element.scrollWidth || element.offsetWidth || 1920;
+    const height = element.scrollHeight || element.offsetHeight || 1080;
+    // 5. Construct SVG
+    // We wrap the content in a div to ensure block formatting context.
+    const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+      <foreignObject width="100%" height="100%">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%;">
+          ${styles}
+          ${html}
+        </div>
+      </foreignObject>
+    </svg>
+  `;
+    // 6. Create Blob and URL
+    const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    // 7. Load Image
+    const img = new Image();
+    // Return a promise that resolves when the image loads
+    await new Promise((resolve, reject) => {
+        img.onload = () => resolve();
+        img.onerror = (e) => reject(new Error('Failed to load SVG image for DOM capture'));
+        img.src = url;
+    });
+    // 8. Create ImageBitmap
+    const bitmap = await createImageBitmap(img);
+    // 9. Cleanup
+    URL.revokeObjectURL(url);
+    return bitmap;
+}
+async function getExternalStyles(doc) {
+    const links = Array.from(doc.querySelectorAll('link[rel="stylesheet"]'));
+    const promises = links.map(async (link) => {
+        try {
+            // Skip if no href
+            if (!link.href)
+                return '';
+            const response = await fetch(link.href);
+            if (!response.ok)
+                throw new Error(`HTTP ${response.status} ${response.statusText}`);
+            const css = await response.text();
+            const processed = await processCss(css, link.href);
+            return `<style>/* ${link.href} */\n${processed}</style>`;
+        }
+        catch (e) {
+            console.warn('Helios: Failed to inline stylesheet:', link.href, e);
+            return '';
+        }
+    });
+    return (await Promise.all(promises)).join('\n');
+}
+async function processCss(css, baseUrl) {
+    const urlRegex = /url\((?:['"]?)(.*?)(?:['"]?)\)/g;
+    const matches = Array.from(css.matchAll(urlRegex));
+    const replacementsPromises = matches.map(async (match) => {
+        const originalMatch = match[0];
+        const url = match[1];
+        if (url.startsWith('data:'))
+            return null;
+        try {
+            const absoluteUrl = new URL(url, baseUrl).href;
+            const dataUri = await fetchAsDataUri(absoluteUrl);
+            return {
+                original: originalMatch,
+                replacement: `url("${dataUri}")`,
+            };
+        }
+        catch (e) {
+            console.warn(`Helios: Failed to inline CSS asset: ${url}`, e);
+            return null;
+        }
+    });
+    const replacements = (await Promise.all(replacementsPromises)).filter((r) => r !== null);
+    let processedCss = css;
+    for (const { original, replacement } of replacements) {
+        processedCss = processedCss.split(original).join(replacement);
+    }
+    return processedCss;
+}
+async function inlineImages(root) {
+    const promises = [];
+    // A. Handle <img> tags
+    const images = root.querySelectorAll('img');
+    images.forEach((img) => {
+        if (img.src && !img.src.startsWith('data:')) {
+            promises.push(fetchAsDataUri(img.src)
+                .then((dataUri) => {
+                img.src = dataUri;
+            })
+                .catch((e) => console.warn('Helios: Failed to inline image:', img.src, e)));
+        }
+    });
+    // B. Handle background-images (inline styles only)
+    const elementsWithStyle = root.querySelectorAll('[style*="background-image"]');
+    elementsWithStyle.forEach((el) => {
+        const element = el;
+        const bg = element.style.backgroundImage;
+        if (bg && bg.includes('url(')) {
+            const match = bg.match(/url\(['"]?(.*?)['"]?\)/);
+            if (match && match[1] && !match[1].startsWith('data:')) {
+                promises.push(fetchAsDataUri(match[1])
+                    .then((dataUri) => {
+                    // Replace the specific URL instance to preserve other layers (gradients, etc.)
+                    element.style.backgroundImage = element.style.backgroundImage.replace(match[0], `url("${dataUri}")`);
+                })
+                    .catch((e) => console.warn('Helios: Failed to inline background:', match[1], e)));
+            }
+        }
+    });
+    await Promise.all(promises);
+}
+async function fetchAsDataUri(url) {
+    const response = await fetch(url);
+    if (!response.ok)
+        throw new Error(`HTTP ${response.status} ${response.statusText}`);
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+}
+function inlineCanvases(original, clone) {
+    // Handle root element being a canvas
+    if (original instanceof HTMLCanvasElement && clone instanceof HTMLCanvasElement) {
+        try {
+            const dataUri = original.toDataURL();
+            const img = document.createElement('img');
+            img.src = dataUri;
+            img.style.cssText = original.style.cssText;
+            img.className = original.className;
+            if (original.id)
+                img.id = original.id;
+            if (original.hasAttribute('width'))
+                img.setAttribute('width', original.getAttribute('width'));
+            if (original.hasAttribute('height'))
+                img.setAttribute('height', original.getAttribute('height'));
+            return img;
+        }
+        catch (e) {
+            console.warn('Helios: Failed to inline root canvas:', e);
+            return clone;
+        }
+    }
+    const originalCanvases = Array.from(original.querySelectorAll('canvas'));
+    const clonedCanvases = Array.from(clone.querySelectorAll('canvas'));
+    for (let i = 0; i < Math.min(originalCanvases.length, clonedCanvases.length); i++) {
+        const source = originalCanvases[i];
+        const target = clonedCanvases[i];
+        try {
+            const dataUri = source.toDataURL();
+            const img = document.createElement('img');
+            img.src = dataUri;
+            img.style.cssText = source.style.cssText;
+            img.className = source.className;
+            if (source.id)
+                img.id = source.id;
+            if (source.hasAttribute('width'))
+                img.setAttribute('width', source.getAttribute('width'));
+            if (source.hasAttribute('height'))
+                img.setAttribute('height', source.getAttribute('height'));
+            target.parentNode?.replaceChild(img, target);
+        }
+        catch (e) {
+            console.warn('Helios: Failed to inline nested canvas:', e);
+        }
+    }
+    return clone;
+}
+function inlineVideos(original, clone) {
+    // Handle root element being a video
+    if (original instanceof HTMLVideoElement && clone instanceof HTMLVideoElement) {
+        if (original.readyState >= 2) {
+            const img = videoToImage(original);
+            if (img)
+                return img;
+        }
+        return clone;
+    }
+    const originals = Array.from(original.querySelectorAll('video'));
+    const clones = Array.from(clone.querySelectorAll('video'));
+    for (let i = 0; i < Math.min(originals.length, clones.length); i++) {
+        const video = originals[i];
+        const target = clones[i];
+        if (video.readyState < 2)
+            continue; // Skip if no data
+        const img = videoToImage(video);
+        if (img) {
+            target.parentNode?.replaceChild(img, target);
+        }
+    }
+    return clone;
+}
+function videoToImage(video) {
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth || 300;
+        canvas.height = video.videoHeight || 150;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            const dataUri = canvas.toDataURL();
+            const img = document.createElement('img');
+            img.src = dataUri;
+            img.style.cssText = video.style.cssText;
+            img.className = video.className;
+            if (video.id)
+                img.id = video.id;
+            if (video.hasAttribute('width'))
+                img.setAttribute('width', video.getAttribute('width'));
+            if (video.hasAttribute('height'))
+                img.setAttribute('height', video.getAttribute('height'));
+            return img;
+        }
+    }
+    catch (e) {
+        console.warn('Helios: Failed to inline video:', e);
+    }
+    return null;
+}

package/dist/features/exporter.d.ts

@@ -0,0 +1,18 @@
+import { HeliosController } from "../controllers";
+import { SubtitleCue } from "./srt-parser";
+export declare class ClientSideExporter {
+    private controller;
+    private iframe;
+    constructor(controller: HeliosController, iframe: HTMLIFrameElement);
+    export(options: {
+        onProgress: (progress: number) => void;
+        signal: AbortSignal;
+        mode?: 'auto' | 'canvas' | 'dom';
+        canvasSelector?: string;
+        format?: 'mp4' | 'webm';
+        includeCaptions?: boolean;
+    }): Promise<void>;
+    private drawCaptions;
+    private download;
+    saveCaptionsAsSRT(cues: SubtitleCue[], filename: string): void;
+}

package/dist/features/exporter.js

@@ -0,0 +1,228 @@
+import { stringifySRT } from "./srt-parser";
+import { Output, BufferTarget, Mp4OutputFormat, WebMOutputFormat, VideoSampleSource, AudioSampleSource, VideoSample, AudioSample } from "mediabunny";
+import { mixAudio } from "./audio-utils";
+export class ClientSideExporter {
+    controller;
+    iframe;
+    constructor(controller, iframe // Kept for compatibility
+    ) {
+        this.controller = controller;
+        this.iframe = iframe;
+    }
+    async export(options) {
+        const { onProgress, signal, mode = 'auto', canvasSelector = 'canvas', format = 'mp4', includeCaptions = true } = options;
+        console.log(`Client-side rendering started! Format: ${format}`);
+        this.controller.pause();
+        try {
+            const state = this.controller.getState();
+            let startFrame = 0;
+            let totalFrames = state.duration * state.fps;
+            if (state.playbackRange && state.playbackRange.length === 2) {
+                startFrame = state.playbackRange[0];
+                const endFrame = state.playbackRange[1];
+                totalFrames = endFrame - startFrame;
+            }
+            // 1. Determine effective mode
+            let effectiveMode = mode;
+            if (effectiveMode === 'auto') {
+                const result = await this.controller.captureFrame(startFrame, {
+                    selector: canvasSelector,
+                    mode: 'canvas'
+                });
+                if (result && result.frame) {
+                    effectiveMode = 'canvas';
+                    result.frame.close();
+                }
+                else {
+                    effectiveMode = 'dom';
+                    console.log("Canvas not found for auto export, falling back to DOM mode.");
+                }
+            }
+            // 2. Capture first frame to determine dimensions
+            const firstResult = await this.controller.captureFrame(startFrame, {
+                selector: canvasSelector,
+                mode: effectiveMode
+            });
+            if (!firstResult || !firstResult.frame) {
+                throw new Error(`Failed to capture first frame in mode: ${effectiveMode}`);
+            }
+            const { frame: firstFrame, captions: firstCaptions } = firstResult;
+            const width = firstFrame.displayWidth;
+            const height = firstFrame.displayHeight;
+            // 3. Setup Mediabunny Output
+            const target = new BufferTarget();
+            const outputFormat = format === 'webm' ? new WebMOutputFormat() : new Mp4OutputFormat();
+            const output = new Output({
+                format: outputFormat,
+                target
+            });
+            // 4. Setup Video Track
+            const videoConfig = {
+                codec: format === 'webm' ? 'vp9' : 'avc',
+                bitrate: 5_000_000
+            };
+            const videoSource = new VideoSampleSource(videoConfig);
+            output.addVideoTrack(videoSource);
+            // 5. Setup Audio Track
+            let audioSource = null;
+            let audioTracks = [];
+            try {
+                audioTracks = await this.controller.getAudioTracks();
+                if (audioTracks && audioTracks.length > 0) {
+                    const audioConfig = format === 'webm'
+                        ? { codec: 'opus' }
+                        : { codec: 'aac' };
+                    audioSource = new AudioSampleSource(audioConfig);
+                    output.addAudioTrack(audioSource);
+                }
+            }
+            catch (e) {
+                console.warn("Failed to setup audio:", e);
+            }
+            await output.start();
+            // 6. Encode Loop
+            // Encode first frame
+            let frameToEncode = firstFrame;
+            if (includeCaptions && firstCaptions && firstCaptions.length > 0) {
+                frameToEncode = await this.drawCaptions(firstFrame, firstCaptions);
+                firstFrame.close();
+            }
+            await videoSource.add(new VideoSample(frameToEncode), { keyFrame: true });
+            frameToEncode.close();
+            onProgress(1 / totalFrames);
+            for (let i = 1; i < totalFrames; i++) {
+                if (signal.aborted) {
+                    throw new Error("Export aborted");
+                }
+                const frameIndex = startFrame + i;
+                const result = await this.controller.captureFrame(frameIndex, {
+                    selector: canvasSelector,
+                    mode: effectiveMode
+                });
+                if (!result || !result.frame) {
+                    throw new Error(`Frame ${frameIndex} missing during export.`);
+                }
+                const { frame: videoFrame, captions } = result;
+                const keyFrame = i % (state.fps * 2) === 0;
+                let finalFrame = videoFrame;
+                if (includeCaptions && captions && captions.length > 0) {
+                    finalFrame = await this.drawCaptions(videoFrame, captions);
+                    videoFrame.close();
+                }
+                await videoSource.add(new VideoSample(finalFrame), { keyFrame });
+                finalFrame.close();
+                onProgress((i + 1) / totalFrames);
+            }
+            // 7. Process Audio
+            if (audioSource && audioTracks.length > 0) {
+                const durationInSeconds = totalFrames / state.fps;
+                const rangeStartInSeconds = startFrame / state.fps;
+                const audioBuffer = await mixAudio(audioTracks, durationInSeconds, 48000, rangeStartInSeconds);
+                const c0 = audioBuffer.getChannelData(0);
+                const c1 = audioBuffer.getChannelData(1);
+                const planarData = new Float32Array(c0.length + c1.length);
+                planarData.set(c0, 0);
+                planarData.set(c1, c0.length);
+                const sample = new AudioSample({
+                    format: 'f32-planar',
+                    sampleRate: 48000,
+                    numberOfChannels: 2,
+                    timestamp: 0,
+                    data: planarData
+                });
+                await audioSource.add(sample);
+            }
+            await output.finalize();
+            if (target.buffer) {
+                this.download(target.buffer, format);
+                console.log("Client-side rendering and download finished!");
+            }
+            else {
+                throw new Error("Export failed: Output buffer is empty");
+            }
+        }
+        catch (e) {
+            if (e.message === "Export aborted") {
+                console.log("Export aborted by user.");
+                return;
+            }
+            console.error("Client-side rendering failed:", e);
+            throw e;
+        }
+    }
+    async drawCaptions(frame, captions) {
+        const width = frame.displayWidth;
+        const height = frame.displayHeight;
+        let canvas;
+        let ctx;
+        if (typeof OffscreenCanvas !== 'undefined') {
+            canvas = new OffscreenCanvas(width, height);
+            ctx = canvas.getContext('2d');
+        }
+        else {
+            canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            ctx = canvas.getContext('2d');
+        }
+        if (!ctx)
+            throw new Error("Failed to create canvas context for captions");
+        ctx.drawImage(frame, 0, 0);
+        ctx.save();
+        const fontSize = Math.max(16, Math.round(height * 0.05));
+        const padding = fontSize * 0.5;
+        const lineHeight = fontSize * 1.2;
+        const bottomMargin = height * 0.05;
+        ctx.font = `${fontSize}px sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        let currentBottomY = height - bottomMargin;
+        const reversedCaptions = [...captions].reverse();
+        reversedCaptions.forEach(cue => {
+            const lines = cue.text.split('\n');
+            const cueHeight = lines.length * lineHeight + (padding * 2);
+            let maxLineWidth = 0;
+            lines.forEach((line) => {
+                const m = ctx.measureText(line);
+                if (m.width > maxLineWidth)
+                    maxLineWidth = m.width;
+            });
+            const bgWidth = maxLineWidth + (fontSize * 1.0);
+            const bgTopY = currentBottomY - cueHeight;
+            ctx.shadowColor = 'transparent';
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+            ctx.fillRect((width / 2) - (bgWidth / 2), bgTopY, bgWidth, cueHeight);
+            ctx.shadowColor = 'black';
+            ctx.shadowBlur = 2;
+            ctx.shadowOffsetY = 1;
+            ctx.fillStyle = 'white';
+            lines.forEach((line, i) => {
+                const y = bgTopY + padding + (i * lineHeight);
+                ctx.fillText(line, width / 2, y);
+            });
+            currentBottomY -= (cueHeight + 4);
+        });
+        ctx.restore();
+        return new VideoFrame(canvas, { timestamp: frame.timestamp });
+    }
+    download(buffer, format) {
+        const type = format === 'webm' ? "video/webm" : "video/mp4";
+        const blob = new Blob([buffer], { type });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `video.${format}`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    saveCaptionsAsSRT(cues, filename) {
+        const srtContent = stringifySRT(cues);
+        const blob = new Blob([srtContent], { type: "text/srt" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+}

package/dist/features/srt-parser.d.ts

@@ -0,0 +1,7 @@
+export interface SubtitleCue {
+    startTime: number;
+    endTime: number;
+    text: string;
+}
+export declare function parseSRT(srt: string): SubtitleCue[];
+export declare function stringifySRT(cues: SubtitleCue[]): string;

package/dist/features/srt-parser.js

@@ -0,0 +1,75 @@
+export function parseSRT(srt) {
+    if (!srt)
+        return [];
+    const cues = [];
+    // Normalize line endings and split by double newlines to separate blocks
+    const blocks = srt.trim().replace(/\r\n/g, "\n").split(/\n\n+/);
+    for (const block of blocks) {
+        const lines = block.split("\n");
+        if (lines.length < 2)
+            continue;
+        // Usually:
+        // Line 1: Index
+        // Line 2: Timestamp range
+        // Line 3+: Text
+        // But sometimes index is missing or we need to be robust.
+        // We look for the timestamp line.
+        let timeLineIndex = -1;
+        for (let i = 0; i < Math.min(lines.length, 2); i++) {
+            if (lines[i].includes("-->")) {
+                timeLineIndex = i;
+                break;
+            }
+        }
+        if (timeLineIndex === -1)
+            continue;
+        const timeLine = lines[timeLineIndex];
+        const textLines = lines.slice(timeLineIndex + 1);
+        // Format: 00:00:01,000 --> 00:00:04,000
+        // We allow dot or comma for milliseconds
+        const timeMatch = timeLine.match(/(\d{1,2}:\d{2}:\d{2}[,.]\d{1,3})\s*-->\s*(\d{1,2}:\d{2}:\d{2}[,.]\d{1,3})/);
+        if (timeMatch) {
+            const startTime = parseTime(timeMatch[1]);
+            const endTime = parseTime(timeMatch[2]);
+            const text = textLines.join("\n").trim();
+            if (!isNaN(startTime) && !isNaN(endTime)) {
+                cues.push({ startTime, endTime, text });
+            }
+        }
+    }
+    return cues;
+}
+function parseTime(timeString) {
+    // Normalize comma to dot for parseFloat
+    const parts = timeString.replace(",", ".").split(":");
+    if (parts.length === 3) {
+        const hours = parseFloat(parts[0]);
+        const minutes = parseFloat(parts[1]);
+        const seconds = parseFloat(parts[2]);
+        return hours * 3600 + minutes * 60 + seconds;
+    }
+    return NaN;
+}
+export function stringifySRT(cues) {
+    if (!cues || cues.length === 0)
+        return "";
+    return cues
+        .map((cue, index) => {
+        const start = formatTime(cue.startTime);
+        const end = formatTime(cue.endTime);
+        return `${index + 1}\n${start} --> ${end}\n${cue.text}\n\n`;
+    })
+        .join("");
+}
+function formatTime(seconds) {
+    const totalMs = Math.round(seconds * 1000);
+    const hours = Math.floor(totalMs / 3600000);
+    const minutes = Math.floor((totalMs % 3600000) / 60000);
+    const secs = Math.floor((totalMs % 60000) / 1000);
+    const ms = totalMs % 1000;
+    const hh = String(hours).padStart(2, "0");
+    const mm = String(minutes).padStart(2, "0");
+    const ss = String(secs).padStart(2, "0");
+    const mmm = String(ms).padStart(3, "0");
+    return `${hh}:${mm}:${ss},${mmm}`;
+}