@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/tvDistance/style.css

@@ -0,0 +1,435 @@
+.tvd-root {
+  --tvd-bg: #fff;
+  --tvd-bg-muted: #f8fafc;
+  --tvd-bg-sim: #f1f5f9;
+  --tvd-border: #e2e8f0;
+  --tvd-text: #0f172a;
+  --tvd-text-muted: #94a3b8;
+  --tvd-primary: #2563eb;
+  --tvd-primary-light: rgba(59,130,246,0.06);
+  --tvd-primary-border: rgba(59,130,246,0.12);
+  --tvd-shadow: rgba(0,0,0,0.06);
+  --tvd-radius: 1.5rem;
+
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.theme-dark .tvd-root {
+  --tvd-bg: #09090b;
+  --tvd-bg-muted: #18181b;
+  --tvd-bg-sim: #09090b;
+  --tvd-border: #27272a;
+  --tvd-text: #fafafa;
+  --tvd-text-muted: #71717a;
+  --tvd-primary: #60a5fa;
+  --tvd-primary-light: rgba(96,165,250,0.08);
+  --tvd-primary-border: rgba(96,165,250,0.15);
+  --tvd-shadow: rgba(0,0,0,0.4);
+}
+
+.tvd-card {
+  background: var(--tvd-bg);
+  border: 1px solid var(--tvd-border);
+  border-radius: var(--tvd-radius);
+  box-shadow: 0 4px 32px var(--tvd-shadow);
+  overflow: hidden;
+}
+
+.tvd-body {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+}
+
+@media (max-width: 720px) {
+  .tvd-body {
+    grid-template-columns: 1fr;
+  }
+}
+
+.tvd-left {
+  padding: 1.75rem;
+  border-right: 1px solid var(--tvd-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+@media (max-width: 720px) {
+  .tvd-left {
+    border-right: none;
+    border-bottom: 1px solid var(--tvd-border);
+  }
+}
+
+.tvd-specs-block {
+  background: var(--tvd-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.tvd-specs-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.05rem;
+  font-weight: 800;
+  color: var(--tvd-text);
+  margin: 0 0 0.25rem;
+}
+
+.tvd-tv-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: var(--tvd-primary);
+  flex-shrink: 0;
+}
+
+.tvd-label {
+  font-size: 0.65rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--tvd-text-muted);
+}
+
+.tvd-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.tvd-field-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tvd-diagonal-val {
+  font-size: 0.85rem;
+  font-weight: 800;
+  color: var(--tvd-primary);
+}
+
+.tvd-slider {
+  width: 100%;
+  height: 6px;
+  accent-color: var(--tvd-primary);
+  cursor: pointer;
+  border-radius: 9999px;
+}
+
+.tvd-res-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.tvd-res-btn {
+  padding: 0.625rem 0.25rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--tvd-border);
+  background: var(--tvd-bg);
+  color: var(--tvd-text-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tvd-res-btn:hover:not(.tvd-res-btn-active) {
+  border-color: var(--tvd-primary);
+  opacity: 0.7;
+}
+
+.tvd-res-btn-active {
+  background: var(--tvd-primary);
+  color: #fff;
+  border-color: var(--tvd-primary);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
+}
+
+.tvd-thx-block {
+  background: var(--tvd-primary-light);
+  border: 1px solid var(--tvd-primary-border);
+  border-radius: 1rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.tvd-thx-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tvd-thx-icon {
+  width: 1.125rem;
+  height: 1.125rem;
+  fill: var(--tvd-primary);
+  flex-shrink: 0;
+}
+
+.tvd-thx-title {
+  font-size: 0.8rem;
+  font-weight: 800;
+  color: var(--tvd-primary);
+}
+
+.tvd-thx-desc {
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--tvd-primary);
+  opacity: 0.8;
+  margin: 0;
+}
+
+.tvd-right {
+  display: flex;
+  flex-direction: column;
+  background: var(--tvd-bg);
+}
+
+.tvd-sim-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.25rem 1.5rem 0;
+}
+
+.tvd-sim-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--tvd-primary);
+  animation: tvd-pulse 2s infinite;
+}
+
+@keyframes tvd-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.tvd-sim-badge-text {
+  font-size: 0.6rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--tvd-text-muted);
+}
+
+.tvd-sim-area {
+  flex: 1;
+  background: var(--tvd-bg-sim);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 2rem 1rem 1.5rem;
+  position: relative;
+  min-height: 400px;
+}
+
+.tvd-tv-visual {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: width 0.5s ease;
+}
+
+.tvd-tv-screen {
+  background: #0a0a0f;
+  border: 3px solid #27272a;
+  border-radius: 0.5rem;
+  width: 100%;
+  aspect-ratio: 16/9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
+}
+
+.tvd-screen-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(59,130,246,0.1) 0%, transparent 60%);
+}
+
+.tvd-screen-ghost {
+  width: 30%;
+  height: 30%;
+  fill: rgba(96,165,250,0.2);
+  position: relative;
+  z-index: 1;
+}
+
+.tvd-screen-inset {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 40px rgba(59,130,246,0.08);
+}
+
+.tvd-stand-neck {
+  width: 16px;
+  height: 16px;
+  background: #27272a;
+  margin-top: -1px;
+}
+
+.tvd-stand-base {
+  width: 70px;
+  height: 6px;
+  background: #27272a;
+  border-radius: 3px;
+}
+
+.tvd-tv-tooltip {
+  position: absolute;
+  top: -2.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--tvd-text);
+  color: var(--tvd-bg);
+  font-size: 0.65rem;
+  font-weight: 800;
+  padding: 0.3rem 0.75rem;
+  border-radius: 9999px;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.25s;
+  pointer-events: none;
+}
+
+.tvd-tv-visual:hover .tvd-tv-tooltip {
+  opacity: 1;
+}
+
+.tvd-distance-line {
+  width: 1px;
+  position: relative;
+  transition: height 0.5s ease;
+  margin: 0.25rem 0;
+}
+
+.tvd-line-dashed {
+  width: 100%;
+  height: 100%;
+  border-left: 1px dashed rgba(59,130,246,0.4);
+}
+
+.tvd-person {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.tvd-person-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tvd-person-head {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background: var(--tvd-border);
+  border: 2px solid var(--tvd-text-muted);
+  opacity: 0.7;
+  margin-bottom: 0.25rem;
+}
+
+.tvd-person-body {
+  width: 4rem;
+  height: 2rem;
+  background: var(--tvd-primary);
+  border-radius: 1.5rem 1.5rem 0 0;
+  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
+}
+
+.tvd-location-card {
+  background: var(--tvd-bg);
+  border: 1px solid var(--tvd-border);
+  border-radius: 1rem;
+  padding: 0.625rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
+  box-shadow: 0 4px 16px var(--tvd-shadow);
+}
+
+.tvd-location-label {
+  font-size: 0.6rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--tvd-text-muted);
+}
+
+.tvd-location-val {
+  font-size: 1.25rem;
+  font-weight: 900;
+  color: var(--tvd-primary);
+  line-height: 1;
+}
+
+.tvd-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--tvd-bg-muted);
+  border-top: 1px solid var(--tvd-border);
+}
+
+.tvd-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 1rem 0.5rem;
+  border-radius: 1rem;
+  transition: background 0.2s;
+}
+
+.tvd-stat:hover {
+  background: var(--tvd-bg);
+}
+
+.tvd-stat-opt {
+  background: var(--tvd-bg);
+  border: 1px solid var(--tvd-border);
+  box-shadow: 0 2px 8px var(--tvd-shadow);
+}
+
+.tvd-stat-label {
+  font-size: 0.6rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--tvd-text-muted);
+}
+
+.tvd-stat-opt .tvd-stat-label {
+  color: var(--tvd-primary);
+}
+
+.tvd-stat-val {
+  font-size: 1.2rem;
+  font-weight: 900;
+  color: var(--tvd-text);
+}
+
+.tvd-stat-opt .tvd-stat-val {
+  font-size: 1.75rem;
+  color: var(--tvd-primary);
+}

package/src/tool/tvDistance/ui.ts

@@ -0,0 +1,66 @@
+import { calculateViewingDistance, getDimensionsFromDiagonal, type TVSpecs } from './logic';
+import type { TvDistanceUI } from './index';
+
+export function initTvDistance() {
+    const root = document.getElementById('tv-distance-root');
+    if (!root) return;
+
+    const labels = JSON.parse(root.dataset.ui || '{}') as TvDistanceUI;
+
+    const diagonalSlider = root.querySelector('#diagonal-slider') as HTMLInputElement;
+    const diagonalValDisplay = root.querySelector('#diagonal-val-display') as HTMLElement;
+    const resButtons = root.querySelectorAll('.res-btn') as NodeListOf<HTMLButtonElement>;
+
+    const tvVisual = root.querySelector('#tv-visual') as HTMLElement;
+    const tvWidthDisplay = root.querySelector('#tv-width-display') as HTMLElement;
+    const distanceLine = root.querySelector('#distance-line') as HTMLElement;
+    const distanceBubbleVal = root.querySelector('#distance-bubble-val') as HTMLElement;
+
+    const minVal = root.querySelector('#min-val') as HTMLElement;
+    const optVal = root.querySelector('#opt-val') as HTMLElement;
+    const maxVal = root.querySelector('#max-val') as HTMLElement;
+
+    let currentRes: TVSpecs['resolution'] = "4k";
+
+    const updateUI = () => {
+        const diagonal = parseInt(diagonalSlider.value);
+        diagonalValDisplay.textContent = `${diagonal}"`;
+
+        const specs: TVSpecs = {
+            diagonalInches: diagonal,
+            resolution: currentRes,
+            aspectRatio: 16 / 9
+        };
+
+        const dist = calculateViewingDistance(specs);
+        const dims = getDimensionsFromDiagonal(diagonal);
+
+        minVal.textContent = `${dist.min.toFixed(2)}${labels.unitMeters}`;
+        optVal.textContent = `${dist.optimal.toFixed(2)}${labels.unitMeters}`;
+        maxVal.textContent = `${dist.max.toFixed(2)}${labels.unitMeters}`;
+        distanceBubbleVal.textContent = `${dist.optimal.toFixed(2)}${labels.unitMeters}`;
+        tvWidthDisplay.textContent = `${Math.round(dims.width)} ${labels.unitCm}`;
+
+        const scale = 1.8;
+        tvVisual.style.width = `${dims.width * scale}px`;
+        tvVisual.style.height = `${dims.height * scale}px`;
+
+        const gapHeight = dist.optimal * 80;
+        distanceLine.style.height = `${gapHeight}px`;
+
+        resButtons.forEach(btn => {
+            if (btn.dataset.res === currentRes) btn.classList.add('active');
+            else btn.classList.remove('active');
+        });
+    };
+
+    diagonalSlider.oninput = updateUI;
+    resButtons.forEach(btn => {
+        btn.onclick = () => {
+            currentRes = btn.dataset.res as TVSpecs['resolution'];
+            updateUI();
+        };
+    });
+
+    updateUI();
+}

package/src/tool/videoFrameExtractor/bibliography.astro

@@ -0,0 +1,17 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { videoFrameExtractor } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await videoFrameExtractor.i18n[locale]?.();
+if (!content || !content.bibliography || content.bibliography.length === 0) return null;
+
+const { bibliography, bibliographyTitle = 'Bibliografía' } = content;
+---
+
+<SharedBibliography title={bibliographyTitle} links={bibliography} />