@jjlmoya/utils-audiovisual 1.4.0 → 1.6.0

package/src/tool/printQualityCalculator/i18n/fr.ts

@@ -14,7 +14,7 @@ const ui: PrintQualityCalculatorUI = {
     maxPrintTitle: "Taille d'Impression Maximale",
     standardFormatsTitle: "Formats Standards Supportés",
     formatColumn: "Format",
-    measureColumn: "Mesures (cm)",
+    measureColumn: "Mesures",
     supportColumn: "Supporté ?",
     qualityExcellent: "Qualité Excellente",
     qualityGood: "Bonne Qualité",
@@ -25,7 +25,21 @@ const ui: PrintQualityCalculatorUI = {
     qualityFairDesc: "Adapté pour la visualisation numérique ou les panneaux lointains.",
     qualityPoorDesc: "L'image aura l'air pixelisée. L'impression n'est pas recommandée.",
     unitCm: "cm",
-    unitInches: "po"
+    unitInches: "po",
+    dpiScreenLabel: "Écran",
+    dpiNewspaperLabel: "Journal",
+    dpiPrintLabel: "Impression",
+    dpiFineArtLabel: "Fine Art",
+    formatPostal: "Carte Postale",
+    formatQuartilla: "Quille",
+    formatFolio: "Folio",
+    formatDoubleFolio: "Double Folio",
+    formatSmallPoster: "Petit Poster",
+    formatLargePoster: "Grand Poster",
+    formatPlane: "Plane",
+    supportedText: "Oui (Couvert)",
+    notSupportedPrefix: "Non (",
+    invalidImageError: "Veuillez sélectionner une image valide"
 };
 
 const faq: PrintQualityCalculatorLocaleContent['faq'] = [

package/src/tool/printQualityCalculator/index.ts

@@ -24,6 +24,20 @@ export interface PrintQualityCalculatorUI {
     qualityPoorDesc: string;
     unitCm: string;
     unitInches: string;
+    dpiScreenLabel: string;
+    dpiNewspaperLabel: string;
+    dpiPrintLabel: string;
+    dpiFineArtLabel: string;
+    formatPostal: string;
+    formatQuartilla: string;
+    formatFolio: string;
+    formatDoubleFolio: string;
+    formatSmallPoster: string;
+    formatLargePoster: string;
+    formatPlane: string;
+    supportedText: string;
+    notSupportedPrefix: string;
+    invalidImageError: string;
     [key: string]: string;
 }
 

package/src/tool/privacyBlur/component.astro

@@ -1,6 +1,5 @@
 ---
 import type { PrivacyBlurUI } from './index';
-import './style.css';
 
 interface Props {
   ui: PrivacyBlurUI;
@@ -228,3 +227,338 @@ const { ui } = Astro.props;
   init();
   document.addEventListener('astro:page-load', init);
 </script>
+
+<style>
+:global(.pb-root) {
+  --pb-bg: #fff;
+  --pb-bg-muted: #f8fafc;
+  --pb-border: #e2e8f0;
+  --pb-text: #0f172a;
+  --pb-text-muted: #64748b;
+  --pb-primary: #6366f1;
+  --pb-primary-light: rgba(99,102,241,0.1);
+  --pb-shadow: rgba(0,0,0,0.06);
+  --pb-toolbar-bg: rgba(255,255,255,0.92);
+  --pb-radius: 1.25rem;
+
+  width: 100%;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 90vh;
+  min-height: 600px;
+}
+
+:global(.theme-dark .pb-root) {
+  --pb-bg: #09090b;
+  --pb-bg-muted: #18181b;
+  --pb-border: #27272a;
+  --pb-text: #fafafa;
+  --pb-text-muted: #71717a;
+  --pb-primary: #818cf8;
+  --pb-primary-light: rgba(129,140,248,0.12);
+  --pb-shadow: rgba(0,0,0,0.4);
+  --pb-toolbar-bg: rgba(9,9,11,0.92);
+}
+
+:global(.pb-toolbar) {
+  position: sticky;
+  top: 0.5rem;
+  z-index: 100;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  background: var(--pb-toolbar-bg);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--pb-border);
+  border-radius: var(--pb-radius);
+  padding: 0.5rem 1rem;
+  box-shadow: 0 8px 32px var(--pb-shadow);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+:global(.pb-tool-selector) {
+  display: flex;
+  gap: 0.25rem;
+  background: var(--pb-bg-muted);
+  border-radius: 0.75rem;
+  padding: 0.25rem;
+}
+
+:global(.pb-tool-btn) {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem 0.875rem;
+  border-radius: 0.625rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--pb-text-muted);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+:global(.pb-tool-btn-active) {
+  background: var(--pb-bg);
+  color: var(--pb-text);
+  box-shadow: 0 2px 8px var(--pb-shadow);
+}
+
+:global(.pb-settings-row) {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+}
+
+:global(.pb-intensity-wrap) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--pb-text-muted);
+}
+
+:global(.pb-slider) {
+  width: 90px;
+  accent-color: var(--pb-primary);
+}
+
+:global(.pb-auto-btn) {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.875rem;
+  background: var(--pb-primary-light);
+  color: var(--pb-primary);
+  border: none;
+  border-radius: 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+:global(.pb-auto-btn:hover) {
+  opacity: 0.8;
+}
+
+:global(.pb-action-group) {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+:global(.pb-undo-btn) {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.75rem;
+  background: var(--pb-bg-muted);
+  border: 1px solid var(--pb-border);
+  color: var(--pb-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+:global(.pb-undo-btn:hover:not(:disabled)) {
+  border-color: var(--pb-primary);
+  color: var(--pb-primary);
+}
+
+:global(.pb-undo-btn:disabled) {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+:global(.pb-download-btn) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 1.25rem;
+  background: var(--pb-primary);
+  color: #fff;
+  border: none;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
+  transition: all 0.2s;
+}
+
+:global(.pb-download-btn:hover:not(:disabled)) {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(99,102,241,0.45);
+}
+
+:global(.pb-download-btn:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+:global(.pb-icon) {
+  width: 1.1rem;
+  height: 1.1rem;
+  flex-shrink: 0;
+}
+
+:global(.pb-workspace) {
+  flex: 1;
+  position: relative;
+  background: var(--pb-bg-muted);
+  border: 2px dashed var(--pb-border);
+  border-radius: var(--pb-radius);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+
+:global(.pb-dragging .pb-workspace) {
+  border-color: var(--pb-primary);
+  background: var(--pb-primary-light);
+}
+
+:global(.pb-empty) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  padding: 2rem;
+  gap: 0.75rem;
+}
+
+:global(.pb-upload-icon) {
+  width: 5rem;
+  height: 5rem;
+  background: var(--pb-bg);
+  border: 1px solid var(--pb-border);
+  border-radius: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pb-primary);
+  box-shadow: 0 8px 24px var(--pb-shadow);
+  margin-bottom: 0.5rem;
+}
+
+:global(.pb-icon-lg) {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+:global(.pb-empty-title) {
+  font-size: 1.75rem;
+  font-weight: 900;
+  color: var(--pb-text);
+  margin: 0;
+}
+
+:global(.pb-empty-sub) {
+  font-size: 1rem;
+  color: var(--pb-text-muted);
+  margin: 0;
+}
+
+:global(.pb-badges) {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+:global(.pb-badge) {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: var(--pb-bg);
+  border: 1px solid var(--pb-border);
+  border-radius: 9999px;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--pb-text-muted);
+}
+
+:global(.pb-badge-icon) {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+:global(.pb-loader) {
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  z-index: 10;
+}
+
+:global(.pb-spinner) {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 3px solid rgba(255,255,255,0.2);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: pb-spin 0.7s linear infinite;
+}
+
+@keyframes pb-spin {
+  to { transform: rotate(360deg); }
+}
+
+:global(.pb-loader-text) {
+  color: #fff;
+  font-weight: 800;
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+:global(.pb-canvas-wrap) {
+  position: absolute;
+  inset: 0;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:global(.pb-canvas-wrap canvas) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: crosshair;
+}
+
+:global(.pb-hidden) {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .pb-root {
+    padding: 0.5rem;
+    height: auto;
+    min-height: 500px;
+  }
+  .pb-empty-title {
+    font-size: 1.25rem;
+  }
+}
+</style>

package/src/tool/subtitleSync/component.astro

@@ -1,6 +1,5 @@
 ---
 import type { SubtitleSyncUI } from './index';
-import './style.css';
 
 interface Props {
   ui: SubtitleSyncUI;
@@ -185,3 +184,331 @@ const { ui } = Astro.props;
   init();
   document.addEventListener('astro:page-load', init);
 </script>
+
+<style>
+:global(.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;
+}
+
+:global(.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);
+}
+
+:global(.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;
+}
+
+:global(.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;
+}
+
+:global(.ss-drop:hover),
+:global(.ss-drop-active) {
+  border-color: var(--ss-accent);
+  background: var(--ss-accent-alpha);
+}
+
+:global(.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);
+}
+
+:global(.ss-drop-icon svg) {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+:global(.ss-drop-title) {
+  font-size: 1.75rem;
+  font-weight: 950;
+  color: var(--ss-text);
+  margin: 0;
+}
+
+:global(.ss-drop-sub) {
+  font-size: 1rem;
+  color: var(--ss-text-muted);
+  max-width: 320px;
+  margin: 0;
+  font-weight: 700;
+}
+
+:global(.ss-controls) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: start;
+}
+
+@media (max-width: 800px) {
+  :global(.ss-controls) {
+    grid-template-columns: 1fr;
+  }
+}
+
+:global(.ss-control-group) {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+:global(.ss-control-label) {
+  font-size: 0.8rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  color: var(--ss-text-muted);
+  letter-spacing: 0.1em;
+}
+
+:global(.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;
+}
+
+:global(.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;
+}
+
+:global(.ss-offset-btn:hover) {
+  color: var(--ss-accent);
+}
+
+:global(.ss-offset-btn svg) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+:global(.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;
+}
+
+:global(.ss-stats) {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+:global(.ss-stat) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+:global(.ss-stat-value) {
+  display: block;
+  font-weight: 900;
+  color: var(--ss-accent);
+  font-size: 1.25rem;
+}
+
+:global(.ss-stat-label) {
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--ss-text-muted);
+  letter-spacing: 0.05em;
+}
+
+:global(.ss-status-card) {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+:global(.ss-file-row) {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+:global(.ss-file-icon) {
+  width: 3rem;
+  height: 3rem;
+  color: var(--ss-accent);
+  flex-shrink: 0;
+}
+
+:global(.ss-file-info) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+:global(.ss-file-name) {
+  font-weight: 950;
+  color: var(--ss-text);
+  font-size: 0.95rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:global(.ss-file-times) {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--ss-text-muted);
+}
+
+:global(.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;
+}
+
+:global(.ss-btn-primary:hover) {
+  transform: translateY(-4px) scale(1.02);
+  box-shadow: 0 15px 35px -10px var(--ss-accent);
+}
+
+:global(.ss-btn-primary svg) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+:global(.ss-previews) {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+
+@media (max-width: 800px) {
+  :global(.ss-previews) {
+    grid-column: auto;
+    grid-template-columns: 1fr;
+  }
+}
+
+:global(.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;
+}
+
+:global(.ss-preview-label) {
+  font-size: 0.75rem;
+  font-weight: 950;
+  text-transform: uppercase;
+  color: var(--ss-text-muted);
+  margin: 0;
+  letter-spacing: 0.05em;
+}
+
+:global(.ss-preview-label-modified) {
+  color: var(--ss-accent);
+}
+
+:global(.ss-preview-scroll) {
+  max-height: 250px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+:global(.ss-preview-item) {
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+:global(.ss-preview-time) {
+  font-weight: 950;
+  color: var(--ss-accent);
+  font-size: 0.75rem;
+  margin: 0 0 0.25rem;
+}
+
+:global(.ss-preview-text) {
+  font-weight: 700;
+  color: var(--ss-text);
+  margin: 0;
+}
+
+:global(.ss-hidden) {
+  display: none;
+}
+</style>