@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/subtitleSync/style.css

@@ -0,0 +1,325 @@
+.ss-root {
+  --ss-bg: #fff;
+  --ss-bg-elevated: #f8fafc;
+  --ss-border: #e2e8f0;
+  --ss-text: #0f172a;
+  --ss-text-muted: #64748b;
+  --ss-accent: #6366f1;
+  --ss-accent-alpha: rgba(99, 102, 241, 0.1);
+  --ss-accent-alpha-hover: rgba(99, 102, 241, 0.03);
+  --ss-shadow: rgba(0, 0, 0, 0.1);
+
+  padding: 2.5rem 1.5rem;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.theme-dark .ss-root {
+  --ss-bg: #18181b;
+  --ss-bg-elevated: #27272a;
+  --ss-border: #3f3f46;
+  --ss-text: #f4f4f5;
+  --ss-text-muted: #71717a;
+  --ss-accent: #818cf8;
+  --ss-accent-alpha: rgba(129, 140, 248, 0.12);
+  --ss-accent-alpha-hover: rgba(129, 140, 248, 0.04);
+  --ss-shadow: rgba(0, 0, 0, 0.3);
+}
+
+.ss-card {
+  background: var(--ss-bg);
+  border: 1px solid var(--ss-border);
+  border-radius: 2.5rem;
+  padding: 3rem;
+  box-shadow: 0 45px 110px -30px var(--ss-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.ss-drop {
+  border: 3px dashed var(--ss-border);
+  padding: 3.5rem 2.5rem;
+  border-radius: 2.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  cursor: pointer;
+  background: var(--ss-accent-alpha-hover);
+  transition: all 0.2s ease;
+  text-align: center;
+}
+
+.ss-drop:hover,
+.ss-drop-active {
+  border-color: var(--ss-accent);
+  background: var(--ss-accent-alpha);
+}
+
+.ss-drop-icon {
+  width: 4.5rem;
+  height: 4.5rem;
+  background: var(--ss-accent-alpha);
+  border-radius: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ss-accent);
+}
+
+.ss-drop-icon svg {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+.ss-drop-title {
+  font-size: 1.75rem;
+  font-weight: 950;
+  color: var(--ss-text);
+  margin: 0;
+}
+
+.ss-drop-sub {
+  font-size: 1rem;
+  color: var(--ss-text-muted);
+  max-width: 320px;
+  margin: 0;
+  font-weight: 700;
+}
+
+.ss-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: start;
+}
+
+@media (max-width: 800px) {
+  .ss-controls {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ss-control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.ss-control-label {
+  font-size: 0.8rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  color: var(--ss-text-muted);
+  letter-spacing: 0.1em;
+}
+
+.ss-offset-wrap {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: var(--ss-bg-elevated);
+  border: 1px solid var(--ss-border);
+  border-radius: 1.5rem;
+  padding: 0.75rem 1.25rem;
+}
+
+.ss-offset-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  background: none;
+  border: none;
+  color: var(--ss-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s;
+  flex-shrink: 0;
+}
+
+.ss-offset-btn:hover {
+  color: var(--ss-accent);
+}
+
+.ss-offset-btn svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.ss-offset-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  font-size: 1.75rem;
+  font-weight: 950;
+  color: var(--ss-text);
+  outline: none;
+  width: 100px;
+  text-align: center;
+}
+
+.ss-stats {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.ss-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.ss-stat-value {
+  display: block;
+  font-weight: 900;
+  color: var(--ss-accent);
+  font-size: 1.25rem;
+}
+
+.ss-stat-label {
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--ss-text-muted);
+  letter-spacing: 0.05em;
+}
+
+.ss-status-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.ss-file-row {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.ss-file-icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--ss-accent);
+  flex-shrink: 0;
+}
+
+.ss-file-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.ss-file-name {
+  font-weight: 950;
+  color: var(--ss-text);
+  font-size: 0.95rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ss-file-times {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--ss-text-muted);
+}
+
+.ss-btn-primary {
+  width: 100%;
+  padding: 1.25rem;
+  background: var(--ss-accent);
+  color: #fff;
+  border-radius: 1.5rem;
+  font-weight: 950;
+  font-size: 1.15rem;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
+}
+
+.ss-btn-primary:hover {
+  transform: translateY(-4px) scale(1.02);
+  box-shadow: 0 15px 35px -10px var(--ss-accent);
+}
+
+.ss-btn-primary svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.ss-previews {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+
+@media (max-width: 800px) {
+  .ss-previews {
+    grid-column: auto;
+    grid-template-columns: 1fr;
+  }
+}
+
+.ss-preview-box {
+  background: var(--ss-bg-elevated);
+  padding: 1.5rem;
+  border-radius: 1.75rem;
+  border: 1px solid var(--ss-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.ss-preview-label {
+  font-size: 0.75rem;
+  font-weight: 950;
+  text-transform: uppercase;
+  color: var(--ss-text-muted);
+  margin: 0;
+  letter-spacing: 0.05em;
+}
+
+.ss-preview-label-modified {
+  color: var(--ss-accent);
+}
+
+.ss-preview-scroll {
+  max-height: 250px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.ss-preview-item {
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.ss-preview-time {
+  font-weight: 950;
+  color: var(--ss-accent);
+  font-size: 0.75rem;
+  margin: 0 0 0.25rem;
+}
+
+.ss-preview-text {
+  font-weight: 700;
+  color: var(--ss-text);
+  margin: 0;
+}
+
+.ss-hidden {
+  display: none;
+}

package/src/tool/subtitleSync/ui.ts

@@ -0,0 +1,152 @@
+import { parseSRT, shiftSubtitles, generateSRT, msToTime, type SrtItem } from './logic';
+
+interface Elements {
+    dropZone: HTMLElement;
+    fileInput: HTMLInputElement;
+    controls: HTMLElement;
+    offsetInput: HTMLInputElement;
+    downloadBtn: HTMLButtonElement;
+    fileName: HTMLElement;
+    statLines: HTMLElement;
+    statFirst: HTMLElement;
+    statLast: HTMLElement;
+    previewOriginal: HTMLElement;
+    previewModified: HTMLElement;
+}
+
+function escapeHtml(text: string): string {
+    const map: { [key: string]: string } = {
+        "&": "&",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#039;",
+    };
+    return text.replace(/[&<>"']/g, (m) => map[m]);
+}
+
+function renderPreview(container: HTMLElement | null, items: SrtItem[]) {
+    if (!container) return;
+    container.innerHTML = "";
+    items.slice(0, 5).forEach((item) => {
+        const div = document.createElement("div");
+        div.className = "preview-item";
+        div.innerHTML = `
+            <p class="preview-item-time">${msToTime(item.start)} --> ${msToTime(item.end)}</p>
+            <p class="preview-item-text">${escapeHtml(item.text)}</p>
+        `;
+        container.appendChild(div);
+    });
+}
+
+function handleDownload(fileName: string, items: SrtItem[]) {
+    const content = generateSRT(items);
+    const blob = new Blob([content], { type: "text/srt" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    
+    const parts = fileName.split(".");
+    if (parts.length > 1) {
+        const ext = parts.pop();
+        a.download = `${parts.join(".")}_fixed.${ext}`;
+    } else {
+        a.download = `${fileName}_fixed.srt`;
+    }
+    
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+}
+
+export function initSubtitleSync() {
+    const root = document.getElementById('subtitle-sync-root');
+    if (!root) return;
+
+    const els: Elements = {
+        dropZone: root.querySelector('#drop-zone') as HTMLElement,
+        fileInput: root.querySelector('#file-input') as HTMLInputElement,
+        controls: root.querySelector('#controls-section') as HTMLElement,
+        offsetInput: root.querySelector('#offset-input') as HTMLInputElement,
+        downloadBtn: root.querySelector('#download-btn') as HTMLButtonElement,
+        fileName: root.querySelector('#file-name') as HTMLElement,
+        statLines: root.querySelector('#stat-lines') as HTMLElement,
+        statFirst: root.querySelector('#stat-first') as HTMLElement,
+        statLast: root.querySelector('#stat-last') as HTMLElement,
+        previewOriginal: root.querySelector('#preview-original') as HTMLElement,
+        previewModified: root.querySelector('#preview-modified') as HTMLElement,
+    };
+
+    if (!els.dropZone || !els.fileInput) return;
+
+    let originalItems: SrtItem[] = [];
+    let currentFileName = "subtitles.srt";
+
+    const updateUI = () => {
+        if (!els.offsetInput || !els.statLines) return;
+        
+        const offsetSec = parseFloat(els.offsetInput.value) || 0;
+        const offsetMs = offsetSec * 1000;
+        const modifiedItems = shiftSubtitles(originalItems, offsetMs);
+
+        els.statLines.textContent = modifiedItems.length.toString();
+        if (modifiedItems.length > 0) {
+            if (els.statFirst) els.statFirst.textContent = msToTime(modifiedItems[0].start);
+            if (els.statLast) els.statLast.textContent = msToTime(modifiedItems[modifiedItems.length - 1].end);
+        }
+
+        renderPreview(els.previewOriginal, originalItems);
+        renderPreview(els.previewModified, modifiedItems);
+
+        if (els.downloadBtn) {
+            els.downloadBtn.onclick = () => handleDownload(currentFileName, modifiedItems);
+        }
+    };
+
+    els.dropZone.onclick = (e) => {
+        if ((e.target as HTMLElement).id !== 'file-input') els.fileInput.click();
+    };
+
+    els.dropZone.ondragover = (e) => {
+        e.preventDefault();
+        els.dropZone.classList.add('drop-zone-active');
+    };
+
+    els.dropZone.ondragleave = () => els.dropZone.classList.remove('drop-zone-active');
+    
+    els.dropZone.ondrop = (e: DragEvent) => {
+        e.preventDefault();
+        els.dropZone.classList.remove('drop-zone-active');
+        const file = e.dataTransfer?.files[0];
+        if (file) processFile(file);
+    };
+
+    els.fileInput.onchange = () => {
+        const file = els.fileInput.files?.[0];
+        if (file) processFile(file);
+    };
+
+    if (els.offsetInput) {
+        els.offsetInput.oninput = updateUI;
+    }
+
+    const processFile = (file: File) => {
+        currentFileName = file.name;
+        if (els.fileName) {
+            els.fileName.textContent = file.name;
+            els.fileName.classList.remove('hidden');
+        }
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const text = e.target?.result;
+            if (typeof text !== 'string') return;
+            
+            originalItems = parseSRT(text);
+            if (originalItems.length > 0 && els.controls) {
+                els.controls.classList.remove('hidden');
+                updateUI();
+            }
+        };
+        reader.readAsText(file);
+    };
+}

package/src/tool/timelapseCalculator/bibliography.astro

@@ -0,0 +1,15 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { TIMELAPSE_CALCULATOR_TOOL } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await TIMELAPSE_CALCULATOR_TOOL.entry.i18n[locale]?.();
+const { bibliography } = content || {};
+---
+
+{bibliography && <SharedBibliography links={bibliography} />}

package/src/tool/timelapseCalculator/component.astro

@@ -0,0 +1,148 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { TimelapseUI } from './index';
+import './style.css';
+
+interface Props {
+  ui: TimelapseUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tlc-root">
+  <div class="tlc-grid">
+
+    <div class="tlc-inputs-panel">
+      <h3 class="tlc-panel-title">
+        <Icon name="mdi:tune-vertical" class="tlc-panel-icon" />
+        {ui.paramsTitle}
+      </h3>
+
+      <div class="tlc-fields">
+
+        <div class="tlc-field-group">
+          <label class="tlc-group-label">{ui.eventDuration}</label>
+          <div class="tlc-row">
+            <div class="tlc-field">
+              <label class="tlc-sub-label" for="event-hours">{ui.hours}</label>
+              <input type="number" id="event-hours" value="1" min="0" class="tlc-input tlc-input-indigo" />
+            </div>
+            <div class="tlc-field">
+              <label class="tlc-sub-label" for="event-minutes">{ui.minutes}</label>
+              <input type="number" id="event-minutes" value="0" min="0" max="59" class="tlc-input tlc-input-indigo" />
+            </div>
+          </div>
+        </div>
+
+        <div class="tlc-field-group">
+          <label class="tlc-group-label">{ui.videoDuration}</label>
+          <div class="tlc-row">
+            <div class="tlc-field">
+              <label class="tlc-sub-label" for="video-seconds">{ui.seconds}</label>
+              <input type="number" id="video-seconds" value="10" min="1" class="tlc-input tlc-input-pink" />
+            </div>
+            <div class="tlc-field">
+              <label class="tlc-sub-label" for="fps-select">{ui.fps}</label>
+              <div class="tlc-select-wrapper">
+                <select id="fps-select" class="tlc-input tlc-input-pink tlc-select">
+                  <option value="24">24</option>
+                  <option value="25">25</option>
+                  <option value="30">30</option>
+                  <option value="60">60</option>
+                </select>
+                <Icon name="mdi:chevron-down" class="tlc-select-arrow" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="tlc-results-panel">
+      <h3 class="tlc-results-title">
+        <Icon name="mdi:equal-box" class="tlc-results-icon" />
+        {ui.resultsTitle}
+      </h3>
+
+      <div class="tlc-interval-section">
+        <p class="tlc-interval-label">{ui.intervalLabel}</p>
+        <div class="tlc-interval-value">
+          <span id="result-interval" class="tlc-big-number">15.0</span>
+          <span class="tlc-big-unit">{ui.secondsUnit}</span>
+        </div>
+      </div>
+
+      <div class="tlc-stats-grid">
+        <div class="tlc-stat">
+          <p class="tlc-stat-label">{ui.totalPhotos}</p>
+          <p id="result-photos" class="tlc-stat-value">240</p>
+        </div>
+        <div class="tlc-stat">
+          <p class="tlc-stat-label">{ui.speed}</p>
+          <p id="result-speed" class="tlc-stat-value">360x</p>
+        </div>
+        <div class="tlc-stat">
+          <p class="tlc-stat-label">{ui.shutterSpeed}</p>
+          <p id="result-shutter" class="tlc-stat-value tlc-stat-value-sm">~7.5s (180°)</p>
+        </div>
+        <div class="tlc-stat">
+          <p class="tlc-stat-label">{ui.storage}</p>
+          <p id="result-storage" class="tlc-stat-value tlc-stat-value-sm">~6 GB</p>
+        </div>
+      </div>
+
+      <div class="tlc-rule-info">
+        <Icon name="mdi:information-outline" class="tlc-info-icon" />
+        <p class="tlc-info-text">{ui.rule180Info}</p>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  import { calculateTimelapse } from './logic';
+
+  const els = {
+    hours:    document.getElementById('event-hours')    as HTMLInputElement,
+    minutes:  document.getElementById('event-minutes')  as HTMLInputElement,
+    seconds:  document.getElementById('video-seconds')  as HTMLInputElement,
+    fps:      document.getElementById('fps-select')     as HTMLSelectElement,
+    interval: document.getElementById('result-interval')!,
+    photos:   document.getElementById('result-photos')!,
+    storage:  document.getElementById('result-storage')!,
+    speed:    document.getElementById('result-speed')!,
+    shutter:  document.getElementById('result-shutter')!,
+  };
+
+  function formatInterval(interval: number): string {
+    return interval < 1 ? interval.toFixed(2) : interval.toFixed(1);
+  }
+
+  function formatShutter(shutterSpeed: number): string {
+    return shutterSpeed < 1 ? `1/${Math.round(1 / shutterSpeed)}s` : `${shutterSpeed.toFixed(1)}s`;
+  }
+
+  function updateResultDisplay(r: ReturnType<typeof calculateTimelapse>) {
+    els.interval.innerText = formatInterval(r.interval);
+    els.photos.innerText = r.totalFrames.toLocaleString('es-ES');
+    els.storage.innerText = `~${r.storageGB.toFixed(1)} GB`;
+    els.speed.innerText = `${r.speedFactor.toFixed(0)}x`;
+    els.shutter.innerText = formatShutter(r.shutterSpeed);
+  }
+
+  // eslint-disable-next-line complexity
+  function recalculate() {
+    const h = +(els.hours?.value || 0), m = +(els.minutes?.value || 0), s = +(els.seconds?.value || 0), f = +(els.fps?.value || 24);
+    updateResultDisplay(calculateTimelapse(h * 3600 + m * 60, s, f));
+  }
+
+  [els.hours, els.minutes, els.seconds, els.fps].forEach(el => {
+    el?.addEventListener('input', recalculate);
+    el?.addEventListener('change', recalculate);
+  });
+
+  recalculate();
+</script>