@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/subtitleSync/bibliography.astro

@@ -0,0 +1,17 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { subtitleSync } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await subtitleSync.i18n[locale]?.();
+if (!content || !content.bibliography || content.bibliography.length === 0) return null;
+
+const { bibliography, bibliographyTitle = 'Bibliografía' } = content;
+---
+
+<SharedBibliography title={bibliographyTitle} links={bibliography} />

package/src/tool/subtitleSync/component.astro

@@ -0,0 +1,187 @@
+---
+import type { SubtitleSyncUI } from './index';
+import './style.css';
+
+interface Props {
+  ui: SubtitleSyncUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="ss-root" id="ss-root" data-ui={JSON.stringify(ui)}>
+  <div class="ss-card">
+
+    <div id="ss-drop" class="ss-drop">
+      <input type="file" id="ss-file" accept=".srt,.vtt" class="ss-hidden" />
+      <div class="ss-drop-icon">
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M17 6h-1V3H8v3H7c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm5 12H7V8h10v12zm-1-8h-2v4h2v-4zm-4 0H8v4h2v-4z"/>
+        </svg>
+      </div>
+      <h3 class="ss-drop-title">{ui.dropTitle}</h3>
+      <p class="ss-drop-sub">{ui.dropSubtitle}</p>
+    </div>
+
+    <div id="ss-controls" class="ss-controls ss-hidden">
+      <div class="ss-control-group">
+        <span class="ss-control-label">{ui.offsetLabel}</span>
+        <div class="ss-offset-wrap">
+          <button id="ss-dec" class="ss-offset-btn">
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M19 13H5v-2h14v2z"/>
+            </svg>
+          </button>
+          <input type="number" id="ss-offset" value="0.0" step="0.1" class="ss-offset-input" />
+          <button id="ss-inc" class="ss-offset-btn">
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="ss-stats">
+          <div class="ss-stat">
+            <span class="ss-stat-value" id="ss-count">0</span>
+            <span class="ss-stat-label">{ui.linesStat}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="ss-status-card">
+        <div class="ss-file-row">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="ss-file-icon">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM16 18H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L19.5 9H13z"/>
+          </svg>
+          <div class="ss-file-info">
+            <span class="ss-file-name" id="ss-name">subtítulos.srt</span>
+            <div class="ss-file-times">
+              <span id="ss-first">00:00:00</span> — <span id="ss-last">00:00:00</span>
+            </div>
+          </div>
+        </div>
+
+        <button id="ss-download" class="ss-btn-primary">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 20H6v-2h8v2zm0-4H6v-2h8v2zm0-4H6V8h8v4z"/>
+          </svg>
+          <span>{ui.downloadButton}</span>
+        </button>
+      </div>
+
+      <div class="ss-previews">
+        <div class="ss-preview-box">
+          <h5 class="ss-preview-label">{ui.originalLabel}</h5>
+          <div id="ss-preview-orig" class="ss-preview-scroll"></div>
+        </div>
+        <div class="ss-preview-box">
+          <h5 class="ss-preview-label ss-preview-label-modified">{ui.resultLabel}</h5>
+          <div id="ss-preview-mod" class="ss-preview-scroll"></div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  import { parseSRT, shiftSubtitles, generateSRT, msToTime } from './logic';
+  import type { SrtItem } from './logic';
+
+  function escapeHtml(text: string): string {
+    const map: { [key: string]: string } = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+    return text.replace(/[&<>"']/g, (m) => map[m]);
+  }
+
+  function init() {
+    const root = document.getElementById('ss-root');
+    if (!root) return;
+    const dropZone = root.querySelector('#ss-drop') as HTMLElement;
+    const fileInput = root.querySelector('#ss-file') as HTMLInputElement;
+    const controls = root.querySelector('#ss-controls') as HTMLElement;
+    const offsetInput = root.querySelector('#ss-offset') as HTMLInputElement;
+    const decBtn = root.querySelector('#ss-dec') as HTMLButtonElement;
+    const incBtn = root.querySelector('#ss-inc') as HTMLButtonElement;
+    const countEl = root.querySelector('#ss-count') as HTMLElement;
+    const fileName = root.querySelector('#ss-name') as HTMLElement;
+    const firstTime = root.querySelector('#ss-first') as HTMLElement;
+    const lastTime = root.querySelector('#ss-last') as HTMLElement;
+    const downloadBtn = root.querySelector('#ss-download') as HTMLButtonElement;
+    const previewOrig = root.querySelector('#ss-preview-orig') as HTMLElement;
+    const previewMod = root.querySelector('#ss-preview-mod') as HTMLElement;
+
+    let originalItems: SrtItem[] = [];
+    let currentFileName = 'subtitles.srt';
+
+    function renderPreview(container: HTMLElement, items: SrtItem[]) {
+      container.innerHTML = '';
+      items.slice(0, 5).forEach((item) => {
+        const div = document.createElement('div');
+        div.className = 'ss-preview-item';
+        div.innerHTML = `
+          <p class="ss-preview-time">${msToTime(item.start)} → ${msToTime(item.end)}</p>
+          <p class="ss-preview-text">${escapeHtml(item.text)}</p>
+        `;
+        container.appendChild(div);
+      });
+    }
+
+    function updateUI() {
+      const offset = (parseFloat(offsetInput.value) || 0) * 1000;
+      const modified = shiftSubtitles(originalItems, offset);
+      countEl.textContent = modified.length.toString();
+      if (modified.length > 0) {
+        firstTime.textContent = msToTime(modified[0].start);
+        lastTime.textContent = msToTime(modified[modified.length - 1].end);
+      }
+      renderPreview(previewOrig, originalItems);
+      renderPreview(previewMod, modified);
+      downloadBtn.onclick = () => {
+        const content = generateSRT(modified);
+        const blob = new Blob([content], { type: 'text/srt' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        const parts = currentFileName.split('.');
+        a.download = parts.length > 1 ? `${parts.slice(0, -1).join('.')}_fixed.${parts[parts.length - 1]}` : `${currentFileName}_fixed.srt`;
+        a.click();
+        URL.revokeObjectURL(url);
+      };
+    }
+
+    function handleFile(file: File) {
+      currentFileName = file.name;
+      fileName.textContent = file.name;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const text = e.target?.result;
+        if (typeof text === 'string') {
+          originalItems = parseSRT(text);
+          if (originalItems.length > 0) {
+            controls.classList.remove('ss-hidden');
+            dropZone.classList.add('ss-hidden');
+            updateUI();
+          }
+        }
+      };
+      reader.readAsText(file);
+    }
+
+    dropZone.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', () => { if (fileInput.files?.[0]) handleFile(fileInput.files[0]); });
+    decBtn.addEventListener('click', () => { offsetInput.value = (parseFloat(offsetInput.value) - 0.1).toFixed(1); updateUI(); });
+    incBtn.addEventListener('click', () => { offsetInput.value = (parseFloat(offsetInput.value) + 0.1).toFixed(1); updateUI(); });
+    offsetInput.addEventListener('input', updateUI);
+
+    dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('ss-drop-active'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('ss-drop-active'));
+    dropZone.addEventListener('drop', (e) => {
+      e.preventDefault();
+      dropZone.classList.remove('ss-drop-active');
+      if (e.dataTransfer?.files[0]) handleFile(e.dataTransfer.files[0]);
+    });
+  }
+
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>

package/src/tool/subtitleSync/i18n/en.ts

@@ -0,0 +1,241 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { SubtitleSyncUI, SubtitleSyncLocaleContent } from '../index';
+
+const slug = 'synchronize-srt-subtitles-online-adjust-timing-free';
+const title = 'Synchronize SRT Subtitles Online - Adjust Timing for Free';
+const description = 'Online tool to advance or delay SRT subtitles. Correct timing offset easily and download the synchronized file instantly.';
+
+const ui: SubtitleSyncUI = {
+    dropTitle: "Drag your .SRT file here",
+    dropSubtitle: "or click to browse",
+    adjustTitle: "Adjust Time",
+    offsetLabel: "Offset (seconds)",
+    offsetHelp: "Use negative values to advance (e.g., -1.5) and positive values to delay.",
+    linesStat: "Lines",
+    firstStat: "First Subtitle",
+    lastStat: "Last Subtitle",
+    originalLabel: "ORIGINAL",
+    resultLabel: "RESULT",
+    downloadButton: "Download Corrected",
+    previewBadge: "PREVIEW",
+    unitSeconds: "sec"
+};
+
+const faq: SubtitleSyncLocaleContent['faq'] = [
+    {
+        question: "How can I synchronize my subtitles if the audio is ahead?",
+        answer: "If the audio appears before the text, you must delay the subtitles. Enter a positive value in the calculator (e.g., 2.0 to delay them by 2 seconds).",
+    },
+    {
+        question: "What file formats does this tool accept?",
+        answer: "Currently, the tool is optimized for .SRT (SubRip) files, which is the most common standard in video players and streaming platforms.",
+    },
+    {
+        question: "Is it safe to upload my subtitle files?",
+        answer: "Yes, because processing is 100% local on your device. Your files are not sent to any server; synchronization happens directly in your browser.",
+    },
+    {
+        question: "Can I synchronize only part of the file?",
+        answer: "No, this tool applies a constant offset to the entire file. If the offset is progressive, you might need more advanced editing.",
+    },
+];
+
+const howTo: SubtitleSyncLocaleContent['howTo'] = [
+    {
+        name: "Upload your SRT file",
+        text: "Drag the subtitle file you want to correct into the upload area.",
+    },
+    {
+        name: "Identify the offset",
+        text: "Measure how much delay or advance the subtitles have relative to the audio in your player.",
+    },
+    {
+        name: "Adjust the offset",
+        text: "Enter positive (delay) or negative (advance) seconds in the control panel.",
+    },
+    {
+        name: "Download the file",
+        text: "Verify in the preview that the times are correct and click download to get your new SRT.",
+    },
+];
+
+const bibliography: SubtitleSyncLocaleContent['bibliography'] = [
+    {
+        name: "SubRip (SRT) format specification",
+        url: "https://matroska.org/technical/subtitles.html#srt-subtitles",
+    },
+    {
+        name: "MDN Web Docs - FileReader API",
+        url: "https://developer.mozilla.org/en-US/docs/Web/API/FileReader",
+    },
+];
+
+const seo: SubtitleSyncLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Professional Subtitle Synchronization',
+        items: [
+            'Instant correction of audio-subtitle offsets',
+            'Supports standard SRT (SubRip) files',
+            '100% local processing - maximum privacy',
+            'No installation, no subscription, completely free'
+        ]
+    },
+    { type: 'title', text: 'Perfect SRT Subtitle Synchronization', level: 2 },
+    { type: 'paragraph', html: 'There is nothing more frustrating for a viewer than seeing dialogues that do not match the voices. Subtitle offset usually occurs due to differences between video versions: variations in framerate, advertising cuts, production intros, or changes in compression. With this tool, you fix the problem in seconds.' },
+
+    { type: 'stats', items: [
+        { value: '100%', label: 'Local Processing', icon: 'mdi:shield' },
+        { value: 'Milliseconds', label: 'Precision', icon: 'mdi:clock-outline' },
+        { value: 'Any Size', label: 'NO File Limit', icon: 'mdi:file-document' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Advance vs Delay: Practical Guide', level: 3 },
+    { type: 'paragraph', html: 'The first step is to correctly identify the type of offset. Here is the logic:' },
+    { type: 'list', items: [
+        '<strong>Delay (Positive Value):</strong> When you see text appear BEFORE the sound. Subtitles are ahead. Example: +2.0 seconds.',
+        '<strong>Advance (Negative Value):</strong> When you see text appear AFTER the sound. Subtitles are behind. Example: -2.0 seconds.',
+        '<strong>Test and Adjust:</strong> Start with small increments (0.5s) and use the preview to validate.'
+    ], icon: 'mdi:arrow-right' },
+
+    { type: 'card', title: 'Professional Level Privacy', html: 'By processing the file via client-side JavaScript, we guarantee that your subtitle content never leaves your computer. Essential for translators and professionals handling confidential material or under NDA.' },
+
+    { type: 'title', text: 'Common Use Cases', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'Translators and Subtitlers',
+            description: 'Synchronize translations after working with multiple video versions',
+            icon: 'mdi:translate',
+            points: [
+                'SRT files from different sources',
+                'Content versioning (theatrical vs streaming)',
+                'Fast delivery without changing tools'
+            ]
+        },
+        {
+            title: 'Content Creators',
+            description: 'Recover subtitles when video was processed with different framerate',
+            icon: 'mdi:video',
+            points: [
+                'Reuse existing subtitles',
+                'Format changes (720p to 1080p)',
+                'Avoid manual retiming of 1000+ lines'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Casual Users',
+            description: 'Correct downloaded subtitles that don\'t fit perfectly',
+            icon: 'mdi:account',
+            points: [
+                'Generic out-of-sync subtitles',
+                'Movies in different region (PAL vs NTSC)',
+                'Streaming with edited versions'
+            ]
+        }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Why Subtitles Go Out of Sync', level: 3 },
+    { type: 'table', headers: ['Common Cause', 'Technical Description', 'Solution'], rows: [
+        ['Framerate Difference', '23.976 fps vs 25 fps - accumulated difference', 'Single offset adjustment (this tool)'],
+        ['Editorialization', 'Ad cuts or additional content removed', 'Manual calculation + synchronization'],
+        ['Regional Version', 'PAL (25 fps Europe) vs NTSC (29.97 fps USA)', 'Simple mathematical offset'],
+        ['Resolution Change', 'Re-encoding with different processing speed', 'Recalculation of original file']
+    ] },
+
+    { type: 'diagnostic', variant: 'info', title: 'Technical Limitations to Consider', icon: 'mdi:information', badge: 'Important', html: 'This tool applies a <strong>constant</strong> offset to the entire file. If the offset is <strong>progressive</strong> (starts well but gradually goes out of sync), it indicates a persistent framerate difference. In that case, the original file needs re-processing in professional editing software.' },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Extreme speed - processes large files in milliseconds',
+            con: 'Only adjusts fixed offset, not progressive ones'
+        },
+        {
+            pro: 'Total privacy - content never leaves your browser',
+            con: 'Requires modern browser with JavaScript enabled'
+        },
+        {
+            pro: 'Universal format - works with any standard SRT',
+            con: 'Does not support other formats (ASS, VTT, SCC, etc.)'
+        },
+        {
+            pro: 'Completely free, no advertising, no tracking',
+            con: 'No change history or versioning'
+        }
+    ], proTitle: 'Advantages', conTitle: 'Limitations' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'SRT (SubRip)',
+            definition: 'Most universal subtitle format: text file with sequence numbers, times (hh:mm:ss,mmm), and text. De facto standard in players and platforms.'
+        },
+        {
+            term: 'Offset',
+            definition: 'Fixed amount of time added or subtracted from all times in the file. Can be positive seconds (delay) or negative (advance).'
+        },
+        {
+            term: 'Framerate (fps)',
+            definition: 'Frames per second. 24p (cinema), 25p (PAL/Europe), 29.97p (NTSC/USA), 60p (fluid video). Differences cause cumulative offsets.'
+        },
+        {
+            term: 'NTSC vs PAL',
+            definition: 'Regional television standards: PAL (25 fps) in Europe; NTSC (29.97 fps) in USA. ~4% speed difference.'
+        },
+        {
+            term: 'Progressive Offset',
+            definition: 'When synchronization starts correct but ends up gradually out of sync. Indicates persistent framerate difference, requires re-processing.'
+        }
+    ] },
+
+    { type: 'message', title: 'Professional Editing with Full Control', ariaLabel: 'Technical information about synchronization', html: 'Our approach is simple but powerful: a single offset, applied instantly, processed 100% in your browser. No cloud, no storage, no tracking. Simply upload, adjust, download. Full control over your content.' },
+
+    { type: 'title', text: 'Conclusion: Movies Without Interruptions', level: 3 },
+    { type: 'paragraph', html: 'Perfect subtitle synchronization is essential for a quality audiovisual experience. With this tool, you transform a frustrating experience into a perfect movie night, without the need for expensive or complicated software.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'en',
+};
+
+export const content: SubtitleSyncLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    faqTitle: 'Frequently Asked Questions about Subtitle Synchronization',
+    bibliography,
+    bibliographyTitle: 'Technical Resources on Subtitle Formats',
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};