@jjlmoya/utils-audiovisual 1.5.0 → 1.6.0

package/src/tool/exifCleaner/component.astro

@@ -73,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;
@@ -114,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;
@@ -161,7 +162,7 @@ const { ui } = Astro.props;
 </script>
 
 <style>
-.ec-root {
+:global(.ec-root) {
   --ec-bg: #fff;
   --ec-bg-elevated: #f8fafc;
   --ec-border: #e2e8f0;
@@ -177,7 +178,7 @@ const { ui } = Astro.props;
   margin: 0 auto;
 }
 
-:global(.theme-dark) .ec-root {
+:global(.theme-dark .ec-root) {
   --ec-bg: #18181b;
   --ec-bg-elevated: #27272a;
   --ec-border: #3f3f46;
@@ -189,7 +190,7 @@ const { ui } = Astro.props;
   --ec-shadow: rgba(0, 0, 0, 0.3);
 }
 
-.ec-card {
+:global(.ec-card) {
   background: var(--ec-bg);
   border: 1px solid var(--ec-border);
   border-radius: 3rem;
@@ -199,7 +200,7 @@ const { ui } = Astro.props;
   overflow: hidden;
 }
 
-.ec-drop {
+:global(.ec-drop) {
   padding: 4rem 2rem;
   border: 3px dashed var(--ec-border);
   border-radius: 2.5rem;
@@ -212,13 +213,13 @@ const { ui } = Astro.props;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.ec-drop:hover,
-.ec-drop-active {
+:global(.ec-drop:hover),
+:global(.ec-drop-active) {
   border-color: var(--ec-accent);
   background: var(--ec-accent-alpha-hover);
 }
 
-.ec-drop-icon {
+:global(.ec-drop-icon) {
   width: 6rem;
   height: 6rem;
   background: var(--ec-accent-alpha);
@@ -229,19 +230,19 @@ const { ui } = Astro.props;
   color: var(--ec-accent);
 }
 
-.ec-drop-icon svg {
+:global(.ec-drop-icon svg) {
   width: 3rem;
   height: 3rem;
 }
 
-.ec-title {
+:global(.ec-title) {
   font-size: 2.5rem;
   font-weight: 950;
   color: var(--ec-text);
   margin: 0;
 }
 
-.ec-subtitle {
+:global(.ec-subtitle) {
   font-size: 1.15rem;
   color: var(--ec-text-muted);
   max-width: 500px;
@@ -249,14 +250,14 @@ const { ui } = Astro.props;
   font-weight: 700;
 }
 
-.ec-badges {
+:global(.ec-badges) {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: center;
 }
 
-.ec-badge {
+:global(.ec-badge) {
   padding: 0.6rem 1.25rem;
   background: var(--ec-bg-elevated);
   border-radius: 2rem;
@@ -268,13 +269,13 @@ const { ui } = Astro.props;
   gap: 0.5rem;
 }
 
-.ec-badge svg {
+:global(.ec-badge svg) {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
 
-.ec-processing {
+:global(.ec-processing) {
   padding: 5rem;
   display: flex;
   flex-direction: column;
@@ -283,7 +284,7 @@ const { ui } = Astro.props;
   gap: 1.5rem;
 }
 
-.ec-spinner {
+:global(.ec-spinner) {
   width: 4rem;
   height: 4rem;
   border: 4px solid var(--ec-accent-alpha);
@@ -292,45 +293,45 @@ const { ui } = Astro.props;
   animation: ec-spin 0.8s linear infinite;
 }
 
-.ec-processing-text {
+:global(.ec-processing-text) {
   font-weight: 800;
   color: var(--ec-text);
   margin: 0;
 }
 
-.ec-result {
+: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);
 }
 
-.ec-result-layout {
+:global(.ec-result-layout) {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
 }
 
 @media (max-width: 800px) {
-  .ec-result-layout {
+  :global(.ec-result-layout) {
     grid-template-columns: 1fr;
   }
 }
 
-.ec-preview-col {
+:global(.ec-preview-col) {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-.ec-preview-img {
+:global(.ec-preview-img) {
   width: 100%;
   border-radius: 1.5rem;
   box-shadow: 0 20px 50px var(--ec-shadow);
   display: block;
 }
 
-.ec-metadata {
+:global(.ec-metadata) {
   background: var(--ec-bg-elevated);
   border: 1px solid var(--ec-border);
   border-radius: 1.25rem;
@@ -341,7 +342,7 @@ const { ui } = Astro.props;
   justify-content: center;
 }
 
-.ec-no-metadata {
+:global(.ec-no-metadata) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -350,14 +351,14 @@ const { ui } = Astro.props;
   text-align: center;
 }
 
-.ec-metadata-title {
+:global(.ec-metadata-title) {
   color: var(--ec-accent);
   font-weight: 700;
   margin-bottom: 1rem;
   font-size: 0.9rem;
 }
 
-.ec-metadata-list {
+:global(.ec-metadata-list) {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -366,7 +367,7 @@ const { ui } = Astro.props;
   gap: 0.75rem;
 }
 
-.ec-metadata-list li {
+:global(.ec-metadata-list li) {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
@@ -375,21 +376,21 @@ const { ui } = Astro.props;
   color: var(--ec-text);
 }
 
-.ec-metadata-list li span:first-child {
+:global(.ec-metadata-list li span:first-child) {
   font-weight: 700;
 }
 
-.ec-metadata-list li span:last-child {
+:global(.ec-metadata-list li span:last-child) {
   color: var(--ec-text-muted);
 }
 
-.ec-actions-col {
+:global(.ec-actions-col) {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-.ec-btn {
+:global(.ec-btn) {
   padding: 1.25rem;
   border-radius: 1.5rem;
   font-weight: 950;
@@ -403,29 +404,29 @@ const { ui } = Astro.props;
   transition: all 0.2s;
 }
 
-.ec-btn svg {
+:global(.ec-btn svg) {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.ec-btn-primary {
+:global(.ec-btn-primary) {
   background: var(--ec-accent);
   color: #fff;
   box-shadow: 0 15px 35px -10px var(--ec-accent);
 }
 
-.ec-btn-primary:hover {
+:global(.ec-btn-primary:hover) {
   transform: translateY(-2px);
   box-shadow: 0 20px 45px -10px var(--ec-accent);
 }
 
-.ec-btn-secondary {
+:global(.ec-btn-secondary) {
   background: var(--ec-bg-elevated);
   border: 1px solid var(--ec-border);
   color: var(--ec-text);
 }
 
-.ec-btn-secondary:hover {
+:global(.ec-btn-secondary:hover) {
   border-color: var(--ec-accent);
   color: var(--ec-accent);
 }