@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/collageMaker/style.css

@@ -0,0 +1,386 @@
+.cm-root {
+  --cm-bg: #fff;
+  --cm-bg-muted: #f8fafc;
+  --cm-border: #e2e8f0;
+  --cm-text: #0f172a;
+  --cm-text-muted: #64748b;
+  --cm-primary: #6366f1;
+  --cm-primary-light: #eef2ff;
+  --cm-shadow: rgba(0,0,0,0.07);
+  --cm-radius: 1rem;
+
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.theme-dark .cm-root {
+  --cm-bg: #1e293b;
+  --cm-bg-muted: #0f172a;
+  --cm-border: #334155;
+  --cm-text: #f1f5f9;
+  --cm-text-muted: #94a3b8;
+  --cm-primary: #818cf8;
+  --cm-primary-light: #1e1b4b;
+  --cm-shadow: rgba(0,0,0,0.4);
+}
+
+.cm-card {
+  background: var(--cm-bg);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius);
+  box-shadow: 0 4px 24px var(--cm-shadow);
+  overflow: hidden;
+}
+
+.cm-top-row {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 0;
+}
+
+@media (max-width: 700px) {
+  .cm-top-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.cm-left-col {
+  padding: 1.25rem;
+  border-right: 1px solid var(--cm-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+@media (max-width: 700px) {
+  .cm-left-col {
+    border-right: none;
+    border-bottom: 1px solid var(--cm-border);
+  }
+}
+
+.cm-drop-zone {
+  position: relative;
+  background: var(--cm-bg-muted);
+  border: 2px dashed var(--cm-border);
+  border-radius: 0.75rem;
+  padding: 1.5rem 1rem;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--cm-primary);
+}
+
+.cm-drop-zone input[type="file"] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+
+.cm-drop-zone:hover,
+.cm-drop-zone-over {
+  border-color: var(--cm-primary);
+  background: var(--cm-primary-light);
+}
+
+.cm-drop-title {
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--cm-text);
+  margin: 0;
+}
+
+.cm-drop-sub {
+  font-size: 0.75rem;
+  color: var(--cm-text-muted);
+  margin: 0;
+}
+
+.cm-drop-link {
+  color: var(--cm-primary);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.cm-section-label {
+  display: block;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cm-text-muted);
+}
+
+.cm-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cm-badge {
+  background: var(--cm-primary-light);
+  color: var(--cm-primary);
+  font-size: 0.65rem;
+  font-weight: 700;
+  padding: 0.15rem 0.45rem;
+  border-radius: 9999px;
+}
+
+.cm-thumbs {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+  gap: 0.35rem;
+  margin-top: 0.5rem;
+}
+
+.cm-thumb {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 0.4rem;
+  overflow: hidden;
+  border: 2px solid transparent;
+  transition: border-color 0.15s;
+}
+
+.cm-thumb:hover {
+  border-color: var(--cm-primary);
+}
+
+.cm-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.cm-thumb-num {
+  position: absolute;
+  bottom: 2px;
+  left: 3px;
+  font-size: 0.55rem;
+  font-weight: 800;
+  color: var(--cm-bg);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+  line-height: 1;
+}
+
+.cm-thumb-del {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  background: rgba(239,68,68,0.9);
+  color: var(--cm-bg);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background 0.15s;
+}
+
+.cm-thumb:hover .cm-thumb-del {
+  display: flex;
+}
+
+.cm-thumb-del:hover {
+  background: #dc2626;
+}
+
+.cm-preview-col {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 260px;
+}
+
+.cm-preview-placeholder {
+  flex: 1;
+  background: var(--cm-bg-muted);
+  border: 2px dashed var(--cm-border);
+  border-radius: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--cm-text-muted);
+}
+
+.cm-preview-placeholder p {
+  font-size: 0.8rem;
+  margin: 0;
+}
+
+.cm-canvas {
+  width: 100%;
+  height: auto;
+  border-radius: 0.75rem;
+  border: 1px solid var(--cm-border);
+  display: block;
+}
+
+.cm-dims-badge {
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--cm-text-muted);
+  background: var(--cm-bg-muted);
+  border: 1px solid var(--cm-border);
+  border-radius: 9999px;
+  padding: 0.15rem 0.5rem;
+}
+
+.cm-section-divider {
+  border-top: 1px solid var(--cm-border);
+  padding: 1rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.cm-layouts {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+  gap: 0.4rem;
+}
+
+.cm-layout-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.5rem 0.25rem;
+  background: var(--cm-bg-muted);
+  border: 2px solid var(--cm-border);
+  border-radius: 0.625rem;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
+  color: var(--cm-text-muted);
+  position: relative;
+}
+
+.cm-layout-btn span {
+  font-size: 0.55rem;
+  font-weight: 600;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.cm-layout-btn:hover:not(:disabled) {
+  border-color: var(--cm-primary);
+  color: var(--cm-primary);
+  background: var(--cm-primary-light);
+}
+
+.cm-layout-btn-active {
+  border-color: var(--cm-primary);
+  background: var(--cm-primary-light);
+  color: var(--cm-primary);
+}
+
+.cm-layout-btn-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.cm-layout-need {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  font-size: 0.55rem;
+  font-weight: 800;
+  color: var(--cm-text-muted);
+  background: var(--cm-bg);
+  border: 1px solid var(--cm-border);
+  border-radius: 9999px;
+  padding: 0 3px;
+  line-height: 1.4;
+}
+
+.cm-settings-inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem;
+}
+
+.cm-setting {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.cm-setting-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--cm-text-muted);
+}
+
+.cm-slider {
+  accent-color: var(--cm-primary);
+  width: 120px;
+}
+
+.cm-color-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cm-color-swatch {
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--cm-border);
+  border-radius: 0.4rem;
+  cursor: pointer;
+  padding: 2px;
+  background: transparent;
+}
+
+.cm-color-code {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--cm-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.cm-download-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 1.25rem;
+  background: linear-gradient(135deg, var(--cm-primary), #8b5cf6);
+  color: var(--cm-bg);
+  border: none;
+  border-radius: 0.625rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.1s;
+  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
+  white-space: nowrap;
+  margin-left: auto;
+}
+
+.cm-download-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.cm-download-btn:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(99,102,241,0.4);
+}

package/src/tool/exifCleaner/bibliography.astro

@@ -0,0 +1,18 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { exifCleaner, type ExifCleanerLocaleContent } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const localeContentLoader = (exifCleaner.i18n as Record<string, () => Promise<ExifCleanerLocaleContent>>)[locale];
+const content = localeContentLoader ? await localeContentLoader() : null;
+if (!content) return null;
+
+const { bibliography } = content;
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/exifCleaner/component.astro

@@ -0,0 +1,162 @@
+---
+import type { ExifCleanerUI } from './index';
+import './style.css';
+
+interface Props {
+  ui: ExifCleanerUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="ec-root" id="ec-root" data-ui={JSON.stringify(ui)}>
+  <div class="ec-card">
+
+    <div id="ec-initial" class="ec-drop">
+      <input type="file" id="ec-file" accept="image/jpeg,image/png,image/webp" class="ec-hidden" />
+      <div class="ec-drop-icon">
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zm-4.35 3.96h-3v3H9v-3H6v-2h3V8h2v3h3v2z"/>
+        </svg>
+      </div>
+      <h3 class="ec-title">{ui.dropTitle}</h3>
+      <p class="ec-subtitle">{ui.dropSubtitle}</p>
+
+      <div class="ec-badges">
+        <div class="ec-badge">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color:#10b981">
+            <path d="M12 1C6.48 1 2 5.48 2 11s4.48 10 10 10 10-4.48 10-10S17.52 1 12 1zm-2 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z"/>
+          </svg>
+          <span>{ui.privacySecureLabel}</span>
+        </div>
+        <div class="ec-badge">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color:#f59e0b">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
+          </svg>
+          <span>{ui.offlineLabel}</span>
+        </div>
+      </div>
+    </div>
+
+    <div id="ec-processing" class="ec-processing ec-hidden">
+      <div class="ec-spinner"></div>
+      <p class="ec-processing-text">{ui.processingText}</p>
+    </div>
+
+    <div id="ec-result" class="ec-result ec-hidden">
+      <div class="ec-result-layout">
+        <div class="ec-preview-col">
+          <img id="ec-preview" class="ec-preview-img" src="#" alt="" />
+          <div id="ec-metadata" class="ec-metadata"></div>
+        </div>
+
+        <div class="ec-actions-col">
+          <button id="ec-download" class="ec-btn ec-btn-primary">
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+            </svg>
+            <span>{ui.downloadButton}</span>
+          </button>
+          <button id="ec-reset" class="ec-btn ec-btn-secondary">
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
+            </svg>
+            <span>{ui.resetButton}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  import { extractExif, createCleanImage } from './logic';
+  import type { ExifCleanerUI } from './index';
+
+  function renderMetadata(tags: Record<string, string | number | boolean | undefined>, container: HTMLElement, riskTitle: string) {
+    const keys = Object.keys(tags);
+    if (keys.length === 0) {
+      container.innerHTML = '<div class="ec-no-metadata">No se encontraron metadatos.</div>';
+      return;
+    }
+    let html = `<div class="ec-metadata-title">${riskTitle}</div><ul class="ec-metadata-list">`;
+    if (tags.GPSLocation) html += `<li><span>GPS:</span> <span>${tags.GPSLocation}</span></li>`;
+    if (tags.Model) html += `<li><span>CÁMARA:</span> <span>${tags.Model}</span></li>`;
+    if (tags.DateTimeOriginal) html += `<li><span>FECHA:</span> <span>${tags.DateTimeOriginal}</span></li>`;
+    container.innerHTML = html + '</ul>';
+  }
+
+  function init() {
+    const root = document.getElementById('ec-root');
+    if (!root) return;
+
+    const ui = JSON.parse(root.dataset.ui ?? '{}') as ExifCleanerUI;
+    const initial = root.querySelector('#ec-initial') as HTMLElement;
+    const processing = root.querySelector('#ec-processing') as HTMLElement;
+    const result = root.querySelector('#ec-result') as HTMLElement;
+    const fileInput = root.querySelector('#ec-file') as HTMLInputElement;
+    const preview = root.querySelector('#ec-preview') as HTMLImageElement;
+    const metadata = root.querySelector('#ec-metadata') as HTMLElement;
+    const downloadBtn = root.querySelector('#ec-download') as HTMLButtonElement;
+    const resetBtn = root.querySelector('#ec-reset') as HTMLButtonElement;
+
+    async function processFile(file: File) {
+      processing.classList.remove('ec-hidden');
+      initial.classList.add('ec-hidden');
+
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const exifData = await extractExif(file);
+        const img = new Image();
+        img.onload = async () => {
+          preview.src = img.src;
+          renderMetadata(exifData, metadata, ui.privacyRiskTitle);
+          const blob = await createCleanImage(img);
+
+          downloadBtn.onclick = () => {
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `CLEAN_${file.name.split('.')[0]}.webp`;
+            a.click();
+            setTimeout(() => URL.revokeObjectURL(url), 100);
+          };
+
+          processing.classList.add('ec-hidden');
+          result.classList.remove('ec-hidden');
+        };
+        img.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    }
+
+    root.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('button') && result.classList.contains('ec-hidden')) {
+        fileInput.click();
+      }
+    });
+
+    root.addEventListener('dragover', (e) => { e.preventDefault(); root.classList.add('ec-drop-active'); });
+    root.addEventListener('dragleave', () => root.classList.remove('ec-drop-active'));
+    root.addEventListener('drop', (e) => {
+      e.preventDefault();
+      root.classList.remove('ec-drop-active');
+      if (e.dataTransfer?.files[0]) processFile(e.dataTransfer.files[0]);
+    });
+
+    fileInput.addEventListener('change', () => {
+      if (fileInput.files?.[0]) processFile(fileInput.files[0]);
+    });
+
+    resetBtn.addEventListener('click', () => {
+      result.classList.add('ec-hidden');
+      initial.classList.remove('ec-hidden');
+      fileInput.value = '';
+    });
+  }
+
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>