@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/videoFrameExtractor/style.css

@@ -0,0 +1,426 @@
+.vfe-root {
+  --vfe-bg: #fff;
+  --vfe-bg-muted: #f8fafc;
+  --vfe-bg-glass: #fff;
+  --vfe-glass-border: #e2e8f0;
+  --vfe-glass-text: #6366f1;
+  --vfe-glass-muted: #94a3b8;
+  --vfe-glass-btn-bg: #f8fafc;
+  --vfe-glass-btn-border: #e2e8f0;
+  --vfe-glass-btn-text: #1e293b;
+  --vfe-batch-bg: #f1f5f9;
+  --vfe-border: #e2e8f0;
+  --vfe-text: #1e293b;
+  --vfe-text-muted: #94a3b8;
+  --vfe-primary: #6366f1;
+  --vfe-primary-light: rgba(99, 102, 241, 0.1);
+  --vfe-shadow: 0 25px 60px rgba(0,0,0,0.08);
+
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.theme-dark .vfe-root {
+  --vfe-bg: #18181b;
+  --vfe-bg-muted: #09090b;
+  --vfe-bg-glass: #27272a;
+  --vfe-glass-border: #3f3f46;
+  --vfe-glass-text: #818cf8;
+  --vfe-glass-muted: #71717a;
+  --vfe-glass-btn-bg: #3f3f46;
+  --vfe-glass-btn-border: #52525b;
+  --vfe-glass-btn-text: #f4f4f5;
+  --vfe-batch-bg: #1c1c1f;
+  --vfe-border: #27272a;
+  --vfe-text: #f4f4f5;
+  --vfe-text-muted: #71717a;
+  --vfe-primary: #818cf8;
+  --vfe-primary-light: rgba(129, 140, 248, 0.12);
+  --vfe-shadow: 0 25px 60px rgba(0,0,0,0.4);
+}
+
+.vfe-premium-card {
+  background: var(--vfe-bg);
+  border: 1px solid var(--vfe-border);
+  border-radius: 1.5rem;
+  box-shadow: var(--vfe-shadow);
+  overflow: hidden;
+}
+
+.vfe-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(--vfe-border);
+  border-radius: 1.5rem;
+  margin: 1rem;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.vfe-uploader-box:hover,
+.vfe-dragover {
+  border-color: var(--vfe-primary);
+  background: var(--vfe-primary-light);
+}
+
+.vfe-uploader-icon {
+  width: 5rem;
+  height: 5rem;
+  background: var(--vfe-primary-light);
+  border-radius: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vfe-primary);
+  margin-bottom: 0.5rem;
+}
+
+.vfe-uploader-icon svg {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.vfe-uploader-text h3 {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--vfe-text);
+  margin: 0 0 0.25rem;
+}
+
+.vfe-uploader-text p {
+  color: var(--vfe-text-muted);
+  font-size: 0.95rem;
+  margin: 0;
+}
+
+.vfe-privacy-note {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vfe-text-muted);
+  margin-top: 0.5rem;
+}
+
+.vfe-player-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.vfe-video-wrapper video {
+  width: 100%;
+  display: block;
+  max-height: 65vh;
+  background: #000;
+}
+
+.vfe-controls-glass {
+  background: var(--vfe-bg-glass);
+  border: 1px solid var(--vfe-glass-border);
+  border-radius: 1rem;
+  margin: 0.75rem;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.vfe-time-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--vfe-glass-text);
+}
+
+.vfe-scrubber {
+  width: 100%;
+  height: 4px;
+  accent-color: var(--vfe-primary);
+  cursor: pointer;
+  border-radius: 9999px;
+}
+
+.vfe-actions-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.vfe-btn-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-weight: 700;
+  font-size: 0.85rem;
+  border: none;
+  border-radius: 0.625rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.vfe-btn-control {
+  padding: 0.5rem 0.875rem;
+  background: var(--vfe-glass-btn-bg);
+  color: var(--vfe-glass-btn-text);
+  border: 1px solid var(--vfe-glass-btn-border);
+  flex: 1;
+  justify-content: center;
+}
+
+.vfe-btn-control:hover {
+  border-color: var(--vfe-primary);
+  color: var(--vfe-primary);
+}
+
+.vfe-btn-icon-only {
+  flex: none;
+  width: 50px;
+  justify-content: center;
+}
+
+.vfe-btn-capture {
+  padding: 0.625rem 1.25rem;
+  background: var(--vfe-primary);
+  color: #fff;
+  flex: 1;
+  justify-content: center;
+  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
+}
+
+.vfe-btn-capture:hover {
+  filter: brightness(1.1);
+}
+
+.vfe-btn-capture:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.vfe-btn-batch {
+  padding: 0.45rem 1rem;
+  font-size: 0.8rem;
+  flex: none;
+}
+
+.vfe-btn-main svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  flex-shrink: 0;
+}
+
+.vfe-batch-panel {
+  background: var(--vfe-batch-bg);
+  border-radius: 0.875rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--vfe-glass-btn-border);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.vfe-batch-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--vfe-primary);
+}
+
+.vfe-batch-header svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.vfe-batch-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex-wrap: wrap;
+}
+
+.vfe-batch-input-group {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--vfe-glass-btn-text);
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--vfe-bg);
+  border: 1px solid var(--vfe-glass-btn-border);
+  border-radius: 0.5rem;
+  padding: 0.4rem 0.75rem;
+}
+
+.vfe-batch-input-group input {
+  width: 48px;
+  background: transparent;
+  border: none;
+  color: var(--vfe-glass-btn-text);
+  font-size: 0.95rem;
+  font-weight: 800;
+  text-align: center;
+  outline: none;
+}
+
+.vfe-gallery-minimal {
+  background: var(--vfe-bg);
+  border-top: 1px solid var(--vfe-border);
+}
+
+.vfe-gallery-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem 0.75rem;
+}
+
+.vfe-gallery-header h4 {
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--vfe-text-muted);
+  margin: 0;
+}
+
+.vfe-gallery-minimal .vfe-btn-control {
+  background: var(--vfe-bg-muted);
+  color: var(--vfe-text);
+  border-color: var(--vfe-border);
+  flex: none;
+}
+
+.vfe-gallery-minimal .vfe-btn-control:hover {
+  border-color: var(--vfe-primary);
+  color: var(--vfe-primary);
+}
+
+.vfe-frame-footer .vfe-btn-control {
+  background: var(--vfe-bg-muted);
+  color: var(--vfe-text-muted);
+  border-color: var(--vfe-border);
+  flex: none;
+  padding: 0.25rem 0.4rem;
+}
+
+.vfe-btn-sm {
+  padding: 0.35rem 0.625rem;
+  font-size: 0.75rem;
+}
+
+.vfe-frames-scroll {
+  display: flex;
+  gap: 0.75rem;
+  overflow-x: auto;
+  padding: 0 1.25rem 1.25rem;
+  scrollbar-width: thin;
+}
+
+.vfe-gallery-empty-text {
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--vfe-text-muted);
+  font-size: 0.85rem;
+  width: 100%;
+  margin: 0;
+}
+
+.vfe-frame-card {
+  flex-shrink: 0;
+  width: 160px;
+  background: var(--vfe-bg-muted);
+  border: 1px solid var(--vfe-border);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  transition: border-color 0.15s;
+}
+
+.vfe-frame-card:hover {
+  border-color: var(--vfe-primary);
+}
+
+.vfe-frame-thumb {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  display: block;
+  cursor: zoom-in;
+}
+
+.vfe-frame-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.4rem 0.625rem;
+}
+
+.vfe-frame-time {
+  font-size: 0.7rem;
+  font-weight: 800;
+  color: var(--vfe-primary);
+}
+
+.vfe-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.95);
+  backdrop-filter: blur(20px);
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.vfe-lightbox-open {
+  display: flex;
+}
+
+.vfe-lightbox-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: 90vw;
+}
+
+.vfe-lightbox-close {
+  position: absolute;
+  top: -3rem;
+  right: 0;
+  font-size: 2.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  line-height: 1;
+}
+
+.vfe-lightbox-close:hover {
+  color: #fff;
+}
+
+.vfe-lightbox-img {
+  max-width: 100%;
+  max-height: 70vh;
+  border-radius: 0.75rem;
+  box-shadow: 0 32px 80px rgba(0, 0, 0, 1);
+}
+
+.vfe-lightbox .vfe-btn-capture {
+  padding: 0.875rem 2rem;
+  font-size: 0.95rem;
+}
+
+.vfe-hidden {
+  display: none;
+}

package/src/tool/videoFrameExtractor/ui.ts

@@ -0,0 +1,179 @@
+import { captureFrameFromVideo, captureFrameAtTime, formatTime, type CapturedFrame } from './logic';
+import type { VideoFrameExtractorUI } from './index';
+
+export function initVideoFrameExtractor() {
+    const root = document.getElementById('video-extractor-root');
+    if (!root) return;
+
+    const labels = JSON.parse(root.dataset.ui || '{}') as VideoFrameExtractorUI;
+
+    const videoInput = root.querySelector('#video-input') as HTMLInputElement;
+    const uploadSection = root.querySelector('#upload-section') as HTMLElement;
+    const playerArea = root.querySelector('#player-area') as HTMLElement;
+    const video = root.querySelector('#mainVideo') as HTMLVideoElement;
+    
+    const playBtn = root.querySelector('#play-btn') as HTMLElement;
+    const playLabel = root.querySelector('#play-label') as HTMLElement;
+    const playIcon = root.querySelector('#play-icon') as HTMLElement;
+    
+    const captureBtn = root.querySelector('#capture-btn') as HTMLElement;
+    const nextFrameBtn = root.querySelector('#next-frame-btn') as HTMLElement;
+    const prevFrameBtn = root.querySelector('#prev-frame-btn') as HTMLElement;
+    
+    const scrubber = root.querySelector('#scrubber') as HTMLInputElement;
+    const timeNow = root.querySelector('#time-now') as HTMLElement;
+    const timeTotal = root.querySelector('#time-total') as HTMLElement;
+    
+    const batchInterval = root.querySelector('#batch-interval') as HTMLInputElement;
+    const batchStartBtn = root.querySelector('#batch-start-btn') as HTMLButtonElement;
+    const batchLabel = root.querySelector('#batch-label') as HTMLElement;
+    
+    const framesGrid = root.querySelector('#frames-grid') as HTMLElement;
+    const galleryEmpty = root.querySelector('#gallery-empty') as HTMLElement;
+    const downloadAllBtn = root.querySelector('#download-all-btn') as HTMLElement;
+    const resetBtn = root.querySelector('#reset-btn') as HTMLElement;
+
+    const lightbox = document.getElementById('lightbox') as HTMLElement;
+    const lightboxImg = document.getElementById('lightbox-img') as HTMLImageElement;
+    const lightboxDown = document.getElementById('lightbox-down') as HTMLAnchorElement;
+
+    let captured: CapturedFrame[] = [];
+    const FRAME_STEP = 1 / 24;
+
+    const updateControls = () => {
+        timeNow.textContent = formatTime(video.currentTime);
+        scrubber.value = video.currentTime.toString();
+    };
+
+    const handleVideoSelect = (file: File) => {
+        const url = URL.createObjectURL(file);
+        video.src = url;
+        uploadSection.classList.add('hidden');
+        playerArea.classList.remove('hidden');
+        video.load();
+    };
+
+    const addFrameToUI = (frame: CapturedFrame) => {
+        captured.push(frame);
+        galleryEmpty.classList.add('hidden');
+        downloadAllBtn.classList.remove('hidden');
+
+        const card = document.createElement('div');
+        card.className = "frame-card";
+        card.innerHTML = `
+            <img src="${frame.url}" class="frame-thumb" alt="Frame ${frame.timestamp}" />
+            <button class="del-btn-mini" data-id="${frame.id}">×</button>
+            <div class="frame-info">
+                <span class="frame-time">${formatTime(frame.timestamp)}</span>
+                <a href="${frame.url}" download="frame_${frame.timestamp.toFixed(2)}.webp" class="frame-download">
+                    <svg style="width: 1.25rem; height: 1.25rem;" viewBox="0 0 24 24"><path fill="currentColor" d="M19,3H5V5H19V3M19,19H5V21H19V19M12,17L18,11H14V7H10V11H6L12,17Z" /></svg>
+                </a>
+            </div>
+        `;
+
+        (card.querySelector('.frame-thumb') as HTMLElement).onclick = () => {
+            lightboxImg.src = frame.url;
+            lightboxDown.href = frame.url;
+            lightbox.classList.add('active');
+        };
+
+        const delBtn = card.querySelector('.del-btn-mini') as HTMLElement;
+        delBtn.onclick = (e) => {
+           e.stopPropagation();
+           captured = captured.filter(f => f.id !== delBtn.dataset.id);
+           card.remove();
+           if (captured.length === 0) {
+               galleryEmpty.classList.remove('hidden');
+               downloadAllBtn.classList.add('hidden');
+           }
+        };
+
+        framesGrid.prepend(card);
+    };
+
+    video.onloadedmetadata = () => {
+        timeTotal.textContent = formatTime(video.duration);
+        scrubber.max = video.duration.toString();
+    };
+
+    video.ontimeupdate = updateControls;
+
+    scrubber.oninput = () => {
+        video.currentTime = parseFloat(scrubber.value);
+    };
+
+    playBtn.onclick = () => {
+        if (video.paused) {
+            video.play();
+            playIcon.classList.add('hidden');
+            playLabel.textContent = labels.pauseLabel;
+        } else {
+            video.pause();
+            playIcon.classList.remove('hidden');
+            playLabel.textContent = labels.playLabel;
+        }
+    };
+
+    captureBtn.onclick = () => {
+        const frame = captureFrameFromVideo(video);
+        if (frame) addFrameToUI(frame);
+    };
+
+    nextFrameBtn.onclick = () => {
+        video.pause();
+        video.currentTime = Math.min(video.duration, video.currentTime + FRAME_STEP);
+    };
+
+    prevFrameBtn.onclick = () => {
+        video.pause();
+        video.currentTime = Math.max(0, video.currentTime - FRAME_STEP);
+    };
+
+    batchStartBtn.onclick = async () => {
+        const interval = parseFloat(batchInterval.value);
+        if (isNaN(interval) || interval <= 0) return;
+
+        batchStartBtn.disabled = true;
+        const originalText = batchLabel.textContent;
+        batchLabel.textContent = labels.batchProcessing;
+
+        const duration = video.duration;
+        for (let t = 0; t <= duration; t += interval) {
+            const frame = await captureFrameAtTime(video, t);
+            if (frame) addFrameToUI(frame);
+        }
+
+        batchStartBtn.disabled = false;
+        batchLabel.textContent = originalText;
+    };
+
+    downloadAllBtn.onclick = () => {
+        captured.forEach((frame, i) => {
+            setTimeout(() => {
+                const link = document.createElement('a');
+                link.href = frame.url;
+                link.download = `frame_${i}.webp`;
+                link.click();
+            }, i * 200);
+        });
+    };
+
+    resetBtn.onclick = () => {
+        video.pause();
+        video.src = "";
+        playerArea.classList.add('hidden');
+        uploadSection.classList.remove('hidden');
+        captured = [];
+        framesGrid.innerHTML = "";
+        galleryEmpty.classList.remove('hidden');
+        downloadAllBtn.classList.add('hidden');
+    };
+
+    uploadSection.onclick = () => videoInput.click();
+    videoInput.onchange = () => {
+        if (videoInput.files?.[0]) handleVideoSelect(videoInput.files[0]);
+    };
+
+    (root.querySelector('.lightbox-close') as HTMLElement).onclick = () => lightbox.classList.remove('active');
+    lightbox.onclick = (e) => { if (e.target === lightbox) lightbox.classList.remove('active'); };
+}

package/src/tools.ts

@@ -0,0 +1,25 @@
+import type { ToolDefinition } from './types';
+import { TIMELAPSE_CALCULATOR_TOOL } from './tool/timelapseCalculator';
+import { EXIF_CLEANER_TOOL } from './tool/exifCleaner';
+import { SUBTITLE_SYNC_TOOL } from './tool/subtitleSync';
+import { PRIVACY_BLUR_TOOL } from './tool/privacyBlur';
+import { CHROMATIC_LENS_TOOL } from './tool/chromaticLens';
+import { PRINT_QUALITY_CALCULATOR_TOOL } from './tool/printQualityCalculator';
+import { TV_DISTANCE_TOOL } from './tool/tvDistance';
+import { IMAGE_COMPRESSOR_TOOL } from './tool/imageCompressor';
+import { COLLAGE_MAKER_TOOL } from './tool/collageMaker';
+import { VIDEO_FRAME_EXTRACTOR_TOOL } from './tool/videoFrameExtractor';
+
+export const ALL_TOOLS: ToolDefinition[] = [
+  TIMELAPSE_CALCULATOR_TOOL,
+  EXIF_CLEANER_TOOL,
+  SUBTITLE_SYNC_TOOL,
+  PRIVACY_BLUR_TOOL,
+  CHROMATIC_LENS_TOOL,
+  PRINT_QUALITY_CALCULATOR_TOOL,
+  TV_DISTANCE_TOOL,
+  IMAGE_COMPRESSOR_TOOL,
+  COLLAGE_MAKER_TOOL,
+  VIDEO_FRAME_EXTRACTOR_TOOL,
+];
+

package/src/types.ts

@@ -0,0 +1,72 @@
+import type { SEOSection } from '@jjlmoya/utils-shared';
+import type { WithContext, Thing } from 'schema-dts';
+
+export type { SEOSection };
+
+export type KnownLocale =
+  | 'ar' | 'da' | 'de' | 'en' | 'es' | 'fi'
+  | 'fr' | 'it' | 'ja' | 'ko' | 'nb' | 'nl'
+  | 'pl' | 'pt' | 'ru' | 'sv' | 'tr' | 'zh';
+
+export interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+export interface BibliographyEntry {
+  name: string;
+  url: string;
+}
+
+export interface HowToStep {
+  name: string;
+  text: string;
+}
+
+export interface ToolLocaleContent<TUI extends Record<string, string> = Record<string, string>> {
+  slug: string;
+  title: string;
+  description: string;
+  ui: TUI;
+  seo: SEOSection[];
+  faqTitle?: string;
+  faq: FAQItem[];
+  bibliographyTitle?: string;
+  bibliography: BibliographyEntry[];
+  howTo: HowToStep[];
+  schemas: WithContext<Thing>[];
+}
+
+export interface CategoryLocaleContent {
+  slug: string;
+  title: string;
+  description: string;
+  seo: SEOSection[];
+}
+
+export type LocaleLoader<T> = () => Promise<T>;
+
+export type LocaleMap<T> = Partial<Record<KnownLocale, LocaleLoader<T>>>;
+
+export interface AudiovisualToolEntry<TUI extends Record<string, string> = Record<string, string>> {
+  id: string;
+  icons: {
+    bg: string;
+    fg: string;
+  };
+  i18n: LocaleMap<ToolLocaleContent<TUI>>;
+}
+
+export interface AudiovisualCategoryEntry {
+  icon: string;
+  tools: AudiovisualToolEntry[];
+  i18n: LocaleMap<CategoryLocaleContent>;
+}
+
+export interface ToolDefinition {
+  entry: AudiovisualToolEntry;
+  Component: unknown;
+  SEOComponent: unknown;
+  BibliographyComponent: unknown;
+}
+