@jjlmoya/utils-audiovisual 1.18.0 → 1.19.0

package/src/tool/videoMerger/logic.ts

@@ -0,0 +1,263 @@
+export interface VideoItem {
+    id: string;
+    file: File;
+    url: string;
+    name: string;
+    duration: number;
+    width: number;
+    height: number;
+}
+
+export function generateId(): string {
+    return Math.random().toString(36).substring(2, 9);
+}
+
+export function formatTime(seconds: number): string {
+    const date = new Date(seconds * 1000);
+    const mm = date.getUTCMinutes().toString().padStart(2, "0");
+    const ss = date.getUTCSeconds().toString().padStart(2, "0");
+    const ms = Math.floor(date.getUTCMilliseconds()).toString().padStart(3, "0");
+    return `${mm}:${ss}.${ms}`;
+}
+
+export function getVideoMetadata(file: File): Promise<{ duration: number; width: number; height: number }> {
+    return new Promise((resolve, reject) => {
+        const video = document.createElement("video");
+        video.preload = "metadata";
+        video.muted = true;
+        video.playsInline = true;
+        const url = URL.createObjectURL(file);
+        video.src = url;
+        video.onloadedmetadata = () => {
+            resolve({
+                duration: video.duration,
+                width: video.videoWidth,
+                height: video.videoHeight
+            });
+            URL.revokeObjectURL(url);
+        };
+        video.onerror = () => {
+            reject(new Error("Failed to load video metadata"));
+            URL.revokeObjectURL(url);
+        };
+    });
+}
+
+export interface MergeOptions {
+    width: number;
+    height: number;
+    fps: number;
+}
+
+export class VideoMergerEngine {
+    private items: VideoItem[] = [];
+    private videoElement: HTMLVideoElement;
+    private canvas: HTMLCanvasElement;
+    private ctx: CanvasRenderingContext2D | null = null;
+    private audioContext: AudioContext | null = null;
+    private audioDestination: MediaStreamAudioDestinationNode | null = null;
+    private mediaRecorder: MediaRecorder | null = null;
+    private recordedChunks: Blob[] = [];
+    private animationFrameId: number | null = null;
+    private isMergingState = false;
+
+    constructor() {
+        this.videoElement = document.createElement("video");
+        this.videoElement.muted = false;
+        this.videoElement.playsInline = true;
+        this.canvas = document.createElement("canvas");
+    }
+
+    public setItems(items: VideoItem[]) {
+        this.items = items;
+    }
+
+    public isMerging(): boolean {
+        return this.isMergingState;
+    }
+
+    public async merge(
+        options: MergeOptions,
+        onProgress: (progress: number, currentVideoName: string, index: number) => void
+    ): Promise<Blob> {
+        if (this.items.length === 0) {
+            throw new Error("No videos to merge");
+        }
+
+        this.isMergingState = true;
+        this.recordedChunks = [];
+        
+        const { width, height, fps } = options;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.ctx = this.canvas.getContext("2d");
+
+        if (!this.ctx) {
+            this.isMergingState = false;
+            throw new Error("Could not initialize canvas context");
+        }
+
+        const WebkitAudioContext = (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+        this.audioContext = new (window.AudioContext || WebkitAudioContext)();
+        this.audioDestination = this.audioContext.createMediaStreamDestination();
+        
+        const audioSource = this.audioContext.createMediaElementSource(this.videoElement);
+        audioSource.connect(this.audioDestination);
+
+        const videoStream = this.canvas.captureStream(fps);
+        const audioStream = this.audioDestination.stream;
+
+        const mergedStream = new MediaStream([
+            ...videoStream.getVideoTracks(),
+            ...audioStream.getAudioTracks()
+        ]);
+
+        let mimeType = "video/webm;codecs=vp9,opus";
+        if (!MediaRecorder.isTypeSupported(mimeType)) {
+            mimeType = "video/webm;codecs=vp8,opus";
+        }
+        if (!MediaRecorder.isTypeSupported(mimeType)) {
+            mimeType = "video/webm";
+        }
+        if (!MediaRecorder.isTypeSupported(mimeType)) {
+            mimeType = "";
+        }
+
+        this.mediaRecorder = mimeType 
+            ? new MediaRecorder(mergedStream, { mimeType }) 
+            : new MediaRecorder(mergedStream);
+
+        this.mediaRecorder.ondataavailable = (event) => {
+            if (event.data && event.data.size > 0) {
+                this.recordedChunks.push(event.data);
+            }
+        };
+
+        return new Promise<Blob>(async (resolve, reject) => {
+            if (!this.mediaRecorder) return reject(new Error("MediaRecorder not initialized"));
+
+            this.mediaRecorder.onstop = () => {
+                this.cleanup();
+                const blob = new Blob(this.recordedChunks, { type: "video/webm" });
+                resolve(blob);
+            };
+
+            this.mediaRecorder.onerror = (e) => {
+                this.cleanup();
+                reject(e);
+            };
+
+            this.mediaRecorder.start();
+
+            for (let i = 0; i < this.items.length; i++) {
+                const currentItem = this.items[i];
+                if (!currentItem) continue;
+                try {
+                    await this.playAndRecordItem(currentItem, (prog, name) => {
+                        onProgress(prog, name, i);
+                    });
+                } catch (err) {
+                    this.mediaRecorder.stop();
+                    return reject(err);
+                }
+            }
+
+            this.mediaRecorder.stop();
+        });
+    }
+
+    private playAndRecordItem(
+        item: VideoItem,
+        onProgress: (progress: number, currentVideoName: string) => void
+    ): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            this.videoElement.src = item.url;
+            this.videoElement.load();
+
+            const onCanPlay = () => {
+                this.videoElement.play().catch(reject);
+                this.drawLoop({
+                    item,
+                    onProgress,
+                    onDone: resolve
+                });
+                this.videoElement.removeEventListener("canplaythrough", onCanPlay);
+            };
+
+            this.videoElement.addEventListener("canplaythrough", onCanPlay);
+            this.videoElement.onerror = () => {
+                this.videoElement.removeEventListener("canplaythrough", onCanPlay);
+                reject(new Error(`Error playing video: ${item.name}`));
+            };
+        });
+    }
+
+    private drawLoop(options: {
+        item: VideoItem;
+        onProgress: (progress: number, currentVideoName: string) => void;
+        onDone: () => void;
+    }) {
+        const { item, onProgress, onDone } = options;
+        const render = () => {
+            if (!this.ctx || this.videoElement.paused || this.videoElement.ended) {
+                if (this.videoElement.ended) {
+                    onDone();
+                }
+                return;
+            }
+
+            this.ctx.fillStyle = "#000000";
+            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+            const vWidth = this.videoElement.videoWidth;
+            const vHeight = this.videoElement.videoHeight;
+            const targetRatio = this.canvas.width / this.canvas.height;
+            const videoRatio = vWidth / vHeight;
+
+            let drawWidth = this.canvas.width;
+            let drawHeight = this.canvas.height;
+            let offsetX = 0;
+            let offsetY = 0;
+
+            if (videoRatio > targetRatio) {
+                drawHeight = this.canvas.width / videoRatio;
+                offsetY = (this.canvas.height - drawHeight) / 2;
+            } else {
+                drawWidth = this.canvas.height * videoRatio;
+                offsetX = (this.canvas.width - drawWidth) / 2;
+            }
+
+            this.ctx.drawImage(this.videoElement, offsetX, offsetY, drawWidth, drawHeight);
+
+            const progress = Math.min(100, (this.videoElement.currentTime / item.duration) * 100);
+            onProgress(progress, item.name);
+
+            this.animationFrameId = requestAnimationFrame(render);
+        };
+
+        this.animationFrameId = requestAnimationFrame(render);
+
+        const onEnded = () => {
+            if (this.animationFrameId) {
+                cancelAnimationFrame(this.animationFrameId);
+            }
+            this.videoElement.removeEventListener("ended", onEnded);
+            onDone();
+        };
+
+        this.videoElement.addEventListener("ended", onEnded);
+    }
+
+    private cleanup() {
+        this.isMergingState = false;
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+        this.videoElement.pause();
+        this.videoElement.src = "";
+        
+        if (this.audioContext) {
+            this.audioContext.close().catch(() => {});
+        }
+    }
+}

package/src/tool/videoMerger/online-video-merger.css

@@ -0,0 +1,440 @@
+.vm-root {
+  --vm-bg: #fff;
+  --vm-bg-muted: #f8fafc;
+  --vm-bg-glass: #fff;
+  --vm-glass-border: #e2e8f0;
+  --vm-glass-text: #6366f1;
+  --vm-glass-muted: #94a3b8;
+  --vm-glass-btn-bg: #f8fafc;
+  --vm-glass-btn-border: #e2e8f0;
+  --vm-glass-btn-text: #1e293b;
+  --vm-border: #e2e8f0;
+  --vm-text: #1e293b;
+  --vm-text-muted: #94a3b8;
+  --vm-primary: #6366f1;
+  --vm-primary-light: rgba(99, 102, 241, 0.1);
+  --vm-shadow: 0 25px 60px rgba(0,0,0,0.08);
+  --vm-danger: #ef4444;
+  --vm-success: #10b981;
+
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.theme-dark .vm-root {
+  --vm-bg: #18181b;
+  --vm-bg-muted: #09090b;
+  --vm-bg-glass: #27272a;
+  --vm-glass-border: #3f3f46;
+  --vm-glass-text: #818cf8;
+  --vm-glass-muted: #71717a;
+  --vm-glass-btn-bg: #3f3f46;
+  --vm-glass-btn-border: #52525b;
+  --vm-glass-btn-text: #f4f4f5;
+  --vm-border: #27272a;
+  --vm-text: #f4f4f5;
+  --vm-text-muted: #71717a;
+  --vm-primary: #818cf8;
+  --vm-primary-light: rgba(129, 140, 248, 0.12);
+  --vm-shadow: 0 25px 60px rgba(0,0,0,0.4);
+  --vm-danger: #f87171;
+  --vm-success: #34d399;
+}
+
+.vm-premium-card {
+  background: var(--vm-bg);
+  border: 1px solid var(--vm-border);
+  border-radius: 1.5rem;
+  box-shadow: var(--vm-shadow);
+  overflow: hidden;
+  padding: 1.5rem;
+}
+
+.vm-uploader-box {
+  padding: 4rem 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.625rem;
+  cursor: pointer;
+  border: 3px dashed var(--vm-border);
+  border-radius: 1.5rem;
+  margin-bottom: 1.5rem;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.vm-uploader-box:hover,
+.vm-dragover {
+  border-color: var(--vm-primary);
+  background: var(--vm-primary-light);
+}
+
+.vm-uploader-icon {
+  width: 5rem;
+  height: 5rem;
+  background: var(--vm-primary-light);
+  border-radius: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vm-primary);
+  margin-bottom: 0.5rem;
+}
+
+.vm-uploader-icon svg {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.vm-uploader-text h3 {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--vm-text);
+  margin: 0 0 0.25rem;
+}
+
+.vm-uploader-text p {
+  color: var(--vm-text-muted);
+  font-size: 0.95rem;
+  margin: 0;
+}
+
+.vm-privacy-note {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vm-text-muted);
+  margin-top: 0.5rem;
+}
+
+.vm-list-section {
+  margin-bottom: 1.5rem;
+}
+
+.vm-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.vm-list-header h4 {
+  font-size: 0.95rem;
+  font-weight: 800;
+  color: var(--vm-text);
+  margin: 0;
+}
+
+.vm-list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-height: 320px;
+  overflow-y: auto;
+  padding-right: 0.25rem;
+  scrollbar-width: thin;
+}
+
+.vm-empty-state {
+  padding: 2rem;
+  text-align: center;
+  color: var(--vm-text-muted);
+  border: 1px dashed var(--vm-border);
+  border-radius: 1rem;
+  font-size: 0.9rem;
+}
+
+.vm-item-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: var(--vm-bg-muted);
+  border: 1px solid var(--vm-border);
+  border-radius: 1rem;
+  padding: 0.75rem 1rem;
+  transition: border-color 0.15s, transform 0.15s;
+}
+
+.vm-item-card:hover {
+  border-color: var(--vm-primary);
+}
+
+.vm-item-index {
+  font-size: 0.9rem;
+  font-weight: 800;
+  color: var(--vm-primary);
+  width: 1.5rem;
+  text-align: center;
+}
+
+.vm-item-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.vm-item-name {
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--vm-text);
+  margin: 0 0 0.15rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vm-item-meta {
+  font-size: 0.75rem;
+  color: var(--vm-text-muted);
+  display: flex;
+  gap: 0.75rem;
+}
+
+.vm-item-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.vm-btn-icon {
+  background: var(--vm-glass-btn-bg);
+  border: 1px solid var(--vm-glass-btn-border);
+  color: var(--vm-glass-btn-text);
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.vm-btn-icon:hover {
+  border-color: var(--vm-primary);
+  color: var(--vm-primary);
+}
+
+.vm-btn-icon.vm-danger:hover {
+  border-color: var(--vm-danger);
+  color: var(--vm-danger);
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.vm-btn-icon svg {
+  width: 1.15rem;
+  height: 1.15rem;
+}
+
+.vm-controls-glass {
+  background: var(--vm-bg-glass);
+  border: 1px solid var(--vm-glass-border);
+  border-radius: 1rem;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.vm-options-title {
+  font-size: 0.9rem;
+  font-weight: 800;
+  color: var(--vm-text);
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.vm-options-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 600px) {
+  .vm-options-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.vm-select-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.vm-select-group label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--vm-text-muted);
+}
+
+.vm-select-group select {
+  background: var(--vm-bg-muted);
+  border: 1px solid var(--vm-border);
+  border-radius: 0.625rem;
+  padding: 0.625rem 2.25rem 0.625rem 0.75rem;
+  color: var(--vm-text);
+  font-size: 0.85rem;
+  font-weight: 700;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1.1rem;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.vm-select-group select:focus {
+  border-color: var(--vm-primary);
+  box-shadow: 0 0 0 3px var(--vm-primary-light);
+}
+
+.theme-dark .vm-select-group select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23818cf8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+}
+
+.vm-quality-note {
+  font-size: 0.75rem;
+  color: var(--vm-text-muted);
+  margin: 0;
+}
+
+.vm-progress-wrapper {
+  background: var(--vm-bg-muted);
+  border: 1px solid var(--vm-border);
+  border-radius: 1rem;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.vm-progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--vm-text);
+}
+
+.vm-progress-bar {
+  width: 100%;
+  height: 8px;
+  display: flex;
+  gap: 6px;
+}
+
+.vm-progress-bar .vm-progress-fill {
+  height: 100%;
+  background: var(--vm-primary);
+  width: 0%;
+  transition: width 0.1s linear;
+  border-radius: 9999px;
+  flex: 1;
+}
+
+.vm-progress-segment {
+  flex: 1;
+  height: 100%;
+  background: var(--vm-border);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.vm-progress-segment-fill {
+  height: 100%;
+  background: var(--vm-primary);
+  width: 0%;
+  transition: width 0.1s linear;
+}
+
+.vm-actions-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.vm-btn-main {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  text-decoration: none;
+  flex: 1;
+}
+
+.vm-btn-primary {
+  background: var(--vm-primary);
+  color: #fff;
+  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
+}
+
+.vm-btn-primary:hover {
+  filter: brightness(1.1);
+}
+
+.vm-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.vm-btn-secondary {
+  background: var(--vm-glass-btn-bg);
+  border: 1px solid var(--vm-glass-btn-border);
+  color: var(--vm-glass-btn-text);
+}
+
+.vm-btn-secondary:hover {
+  border-color: var(--vm-primary);
+  color: var(--vm-primary);
+}
+
+.vm-btn-main svg {
+  width: 1.2rem;
+  height: 1.2rem;
+  flex-shrink: 0;
+}
+
+.vm-warning-box {
+  margin-top: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  color: #d97706;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.theme-dark .vm-warning-box {
+  background: rgba(245, 158, 11, 0.06);
+  border-color: rgba(245, 158, 11, 0.2);
+  color: #fbbf24;
+}
+
+.vm-warning-box.vm-hidden {
+  display: none;
+}
+
+.vm-hidden {
+  display: none;
+}

package/src/tool/videoMerger/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { videoMerger } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await videoMerger.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}