@jjlmoya/utils-audiovisual 1.4.0 → 1.6.0

package/src/tool/exifCleaner/component.astro

@@ -1,6 +1,5 @@
 ---
 import type { ExifCleanerUI } from './index';
-import './style.css';
 
 interface Props {
   ui: ExifCleanerUI;
@@ -74,24 +73,24 @@ const { ui } = Astro.props;
   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;
+
+    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">${ui.noMetadataFound}</div>`;
+        return;
+      }
+      let html = `<div class="ec-metadata-title">${riskTitle}</div><ul class="ec-metadata-list">`;
+      if (tags.GPSLocation) html += `<li><span>${ui.gpsLabel}</span> <span>${tags.GPSLocation}</span></li>`;
+      if (tags.Model) html += `<li><span>${ui.cameraLabel}</span> <span>${tags.Model}</span></li>`;
+      if (tags.DateTimeOriginal) html += `<li><span>${ui.dateLabel}</span> <span>${tags.DateTimeOriginal}</span></li>`;
+      container.innerHTML = html + '</ul>';
+    }
     const initial = root.querySelector('#ec-initial') as HTMLElement;
     const processing = root.querySelector('#ec-processing') as HTMLElement;
     const result = root.querySelector('#ec-result') as HTMLElement;
@@ -115,6 +114,7 @@ const { ui } = Astro.props;
           const blob = await createCleanImage(img);
 
           downloadBtn.onclick = () => {
+            if (!blob) return;
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
@@ -160,3 +160,295 @@ const { ui } = Astro.props;
   init();
   document.addEventListener('astro:page-load', init);
 </script>
+
+<style>
+:global(.ec-root) {
+  --ec-bg: #fff;
+  --ec-bg-elevated: #f8fafc;
+  --ec-border: #e2e8f0;
+  --ec-text: #0f172a;
+  --ec-text-muted: #64748b;
+  --ec-accent: #6366f1;
+  --ec-accent-alpha: rgba(99, 102, 241, 0.08);
+  --ec-accent-alpha-hover: rgba(99, 102, 241, 0.02);
+  --ec-shadow: rgba(0, 0, 0, 0.15);
+
+  padding: 2.5rem 1.5rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+:global(.theme-dark .ec-root) {
+  --ec-bg: #18181b;
+  --ec-bg-elevated: #27272a;
+  --ec-border: #3f3f46;
+  --ec-text: #f4f4f5;
+  --ec-text-muted: #71717a;
+  --ec-accent: #818cf8;
+  --ec-accent-alpha: rgba(129, 140, 248, 0.12);
+  --ec-accent-alpha-hover: rgba(129, 140, 248, 0.02);
+  --ec-shadow: rgba(0, 0, 0, 0.3);
+}
+
+:global(.ec-card) {
+  background: var(--ec-bg);
+  border: 1px solid var(--ec-border);
+  border-radius: 3rem;
+  padding: 1.5rem;
+  box-shadow: 0 45px 120px -30px var(--ec-shadow);
+  position: relative;
+  overflow: hidden;
+}
+
+:global(.ec-drop) {
+  padding: 4rem 2rem;
+  border: 3px dashed var(--ec-border);
+  border-radius: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  gap: 1.5rem;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:global(.ec-drop:hover),
+:global(.ec-drop-active) {
+  border-color: var(--ec-accent);
+  background: var(--ec-accent-alpha-hover);
+}
+
+:global(.ec-drop-icon) {
+  width: 6rem;
+  height: 6rem;
+  background: var(--ec-accent-alpha);
+  border-radius: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ec-accent);
+}
+
+:global(.ec-drop-icon svg) {
+  width: 3rem;
+  height: 3rem;
+}
+
+:global(.ec-title) {
+  font-size: 2.5rem;
+  font-weight: 950;
+  color: var(--ec-text);
+  margin: 0;
+}
+
+:global(.ec-subtitle) {
+  font-size: 1.15rem;
+  color: var(--ec-text-muted);
+  max-width: 500px;
+  margin: 0;
+  font-weight: 700;
+}
+
+:global(.ec-badges) {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+:global(.ec-badge) {
+  padding: 0.6rem 1.25rem;
+  background: var(--ec-bg-elevated);
+  border-radius: 2rem;
+  font-size: 0.8rem;
+  font-weight: 800;
+  color: var(--ec-text-muted);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+:global(.ec-badge svg) {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+:global(.ec-processing) {
+  padding: 5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+:global(.ec-spinner) {
+  width: 4rem;
+  height: 4rem;
+  border: 4px solid var(--ec-accent-alpha);
+  border-top-color: var(--ec-accent);
+  border-radius: 50%;
+  animation: ec-spin 0.8s linear infinite;
+}
+
+:global(.ec-processing-text) {
+  font-weight: 800;
+  color: var(--ec-text);
+  margin: 0;
+}
+
+:global(.ec-result) {
+  padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  animation: ec-slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+:global(.ec-result-layout) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+}
+
+@media (max-width: 800px) {
+  :global(.ec-result-layout) {
+    grid-template-columns: 1fr;
+  }
+}
+
+:global(.ec-preview-col) {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+:global(.ec-preview-img) {
+  width: 100%;
+  border-radius: 1.5rem;
+  box-shadow: 0 20px 50px var(--ec-shadow);
+  display: block;
+}
+
+:global(.ec-metadata) {
+  background: var(--ec-bg-elevated);
+  border: 1px solid var(--ec-border);
+  border-radius: 1.25rem;
+  padding: 1.5rem;
+  min-height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+:global(.ec-no-metadata) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--ec-text-muted);
+  text-align: center;
+}
+
+:global(.ec-metadata-title) {
+  color: var(--ec-accent);
+  font-weight: 700;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+}
+
+:global(.ec-metadata-list) {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+:global(.ec-metadata-list li) {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--ec-text);
+}
+
+:global(.ec-metadata-list li span:first-child) {
+  font-weight: 700;
+}
+
+:global(.ec-metadata-list li span:last-child) {
+  color: var(--ec-text-muted);
+}
+
+:global(.ec-actions-col) {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+:global(.ec-btn) {
+  padding: 1.25rem;
+  border-radius: 1.5rem;
+  font-weight: 950;
+  font-size: 1.1rem;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  transition: all 0.2s;
+}
+
+:global(.ec-btn svg) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+:global(.ec-btn-primary) {
+  background: var(--ec-accent);
+  color: #fff;
+  box-shadow: 0 15px 35px -10px var(--ec-accent);
+}
+
+:global(.ec-btn-primary:hover) {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 45px -10px var(--ec-accent);
+}
+
+:global(.ec-btn-secondary) {
+  background: var(--ec-bg-elevated);
+  border: 1px solid var(--ec-border);
+  color: var(--ec-text);
+}
+
+:global(.ec-btn-secondary:hover) {
+  border-color: var(--ec-accent);
+  color: var(--ec-accent);
+}
+
+.ec-hidden {
+  display: none;
+}
+
+@keyframes ec-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ec-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>