@crtobiasdelsud/portal-ui 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Componentes compartidos entre el portal (Next) y el CMS (Vite) — widgets, views, providers para adapters y article pool.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/Blocks/BlockColumns/BlockColumns.jsx

@@ -14,6 +14,11 @@ export default function BlockColumns({ widgets, registry, settings = {} }) {
     ? style.gridCategoriaDos
     : hasImportant ? style.gridFeatured : style.gridNormal
 
+  // Hero "fantasma": cuando hay un hero importante se agrega un Hero extra,
+  // sin articleId (artículo random), solo para ocupar el espacio del centro
+  // de la fila de abajo.
+  const HeroWidget = registry["HERO_BLOCK"]
+
   return (
     <section className={style.container}>
       <div className={`${style.grid} ${gridClass}`}>
@@ -31,6 +36,13 @@ export default function BlockColumns({ widgets, registry, settings = {} }) {
             </div>
           )
         })}
+        {hasImportant && HeroWidget && (
+          <div className={style.item} style={{ gridArea: "fantasma" }}>
+            <WidgetErrorBoundary>
+              <HeroWidget settings={{}} />
+            </WidgetErrorBoundary>
+          </div>
+        )}
       </div>
     </section>
   )

package/src/components/Blocks/BlockColumns/BlockColumns.module.scss

@@ -26,15 +26,20 @@
   }
 }
 
+/* Hero "importante": hero grande arriba a todo el ancho; abajo
+   widget1 + hero fantasma (automático) + widget2. */
 .gridFeatured {
   grid-template-areas:
     "hero"
     "recommended"
+    "fantasma"
     "feed";
 
   @media (min-width: 1000px) {
     grid-template-columns: repeat(4, 1fr);
-    grid-template-areas: "recommended hero hero feed";
+    grid-template-areas:
+      "hero        hero      hero      hero"
+      "recommended fantasma  fantasma  feed";
   }
 }
 

package/src/components/Hero/Hero.module.scss

@@ -121,6 +121,13 @@
     aspect-ratio: 16 / 7;
   }
 
+  /* La imagen del hero importante (AspectImage) a todo el ancho queda
+     altísima (~774px). La topamos para que sea un banner ancho y entre
+     en pantalla. En mobile la imagen es chica y este tope nunca se activa. */
+  .media {
+    max-height: 400px;
+  }
+
   .headline {
     font-size: 1.6rem;
 

package/src/components/Hero/HeroView.jsx

@@ -30,6 +30,7 @@ export default function HeroView({ article, important = false }) {
             alt={article.imagen.alt ?? ''}
             aspect="16:9"
             focalPoint={article.focalPoint}
+            className={styles.media}
           />
         )}
         <div className={styles.body}>

package/src/components/ShareBlock/ShareBlock.module.scss

@@ -35,11 +35,35 @@
 .icons {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
 
   @include respond(desktop) {
     gap: 12px;
   }
+
+  // Non-AMP: el componente Icon renderiza <a><span aria-hidden/></a>.
+  // Achicamos en mobile y restauramos el tamaño completo en desktop.
+  a {
+    width: 26px;
+    height: 26px;
+  }
+
+  span[aria-hidden] {
+    width: 22px;
+    height: 22px;
+  }
+
+  @include respond(desktop) {
+    a {
+      width: 33px;
+      height: 33px;
+    }
+
+    span[aria-hidden] {
+      width: 32px;
+      height: 32px;
+    }
+  }
 }
 
 .iconLink {

package/src/components/SpeechPlayerBar/SpeechPlayerBar.jsx

@@ -7,7 +7,7 @@ import styles from './SpeechPlayerBar.module.scss'
 
 export default function SpeechPlayerBar() {
   const [mounted, setMounted] = useState(false)
-  const { playing, paused, progress, meta, pause, resume, stop, skip, seekTo } = useSpeech()
+  const { playing, paused, progress, meta, pause, resume, stop, seekTo } = useSpeech()
 
   useEffect(() => { setMounted(true) }, [])
 
@@ -22,36 +22,8 @@ export default function SpeechPlayerBar() {
   return createPortal(
     <div className={styles.bar} role="region" aria-label="Reproductor de nota">
 
-      <button className={styles.closeBtn} onClick={stop} aria-label="Detener lectura">✕</button>
-
-      {/* Thumbnail */}
-      <div className={styles.thumb}>
-        {meta.imagen
-          ? <img src={meta.imagen} alt="" className={styles.thumbImg} />
-          : <span className={styles.thumbIcon}>🔊</span>
-        }
-      </div>
-
-      {/* Info */}
-      <div className={styles.info}>
-        <span className={styles.titulo}>{meta.titulo}</span>
-        <span className={styles.subtitle}>{playing ? 'Escuchando nota...' : 'En pausa'}</span>
-      </div>
-
-      {/* Equalizer */}
-      <div className={`${styles.eq} ${!playing ? styles.eqPaused : ''}`} aria-hidden="true">
-        <span className={styles.eqBar} />
-        <span className={styles.eqBar} />
-        <span className={styles.eqBar} />
-        <span className={styles.eqBar} />
-      </div>
-
-      {/* Skip back */}
-      <button className={styles.skipBtn} onClick={() => skip(-1)} aria-label="Retroceder">
-        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
-          <path d="M6 6h2v12H6zm3.5 6 8.5 6V6z"/>
-        </svg>
-      </button>
+      {/* Título */}
+      <span className={styles.titulo}>{meta.titulo}</span>
 
       {/* Play / Pause */}
       <button
@@ -60,16 +32,15 @@ export default function SpeechPlayerBar() {
         aria-label={playing ? 'Pausar' : 'Continuar'}
       >
         {playing
-          ? <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
-          : <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M8 5v14l11-7z"/></svg>
+          ? <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+          : <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M8 5v14l11-7z"/></svg>
         }
       </button>
 
-      {/* Skip forward */}
-      <button className={styles.skipBtn} onClick={() => skip(1)} aria-label="Adelantar">
-        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
-          <path d="M6 18l8.5-6L6 6v12zm2.5-6L15 6v12z" style={{display:'none'}}/>
-          <path d="M16 6h-2v12h2zm-3.5 6L4 6v12z"/>
+      {/* Cerrar */}
+      <button className={styles.closeBtn} onClick={stop} aria-label="Detener lectura">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14">
+          <path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>
         </svg>
       </button>
 

package/src/components/SpeechPlayerBar/SpeechPlayerBar.module.scss

@@ -1,174 +1,85 @@
 @use "../../styles/index.scss" as *;
 
-// ── Mini player bar ───────────────────────────────────────────────────────────
+// ── Mini player bar (minimalista) ─────────────────────────────────────────────
 
 .bar {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  width: calc(100% - 32px);
-  max-width: 500px;
+  width: max-content;
+  max-width: calc(100% - 32px);
   background: var(--secondary-color, #0D1333);
-  border-radius: 16px;
-  padding: 10px 12px 18px;   // extra bottom padding para la barra de progreso
+  border-radius: 14px;
+  padding: 7px 10px 7px 16px;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
   z-index: 9999;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
-
-    @include respond(desktop) {
-    padding: 0px;
-    margin: 0px;
-  }
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
 }
 
-// ── Botón cerrar ──────────────────────────────────────────────────────────────
-
-.closeBtn {
-  position: absolute;
-  top: 6px;
-  right: 8px;
-  background: none;
-  border: none;
-  color: rgba(255, 255, 255, 0.4);
-  font-size: 0.7rem;
-  cursor: pointer;
-  padding: 2px 4px;
-  line-height: 1;
-
-  &:hover { color: rgba(255, 255, 255, 0.9); }
-}
-
-// ── Thumbnail ─────────────────────────────────────────────────────────────────
-
-.thumb {
-  width: 44px;
-  height: 44px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.08);
-  flex-shrink: 0;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.thumbImg {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumbIcon {
-  font-size: 1.3rem;
-}
-
-// ── Info ──────────────────────────────────────────────────────────────────────
-
-.info {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
+// ── Título ────────────────────────────────────────────────────────────────────
 
 .titulo {
   color: #fff;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 220px;
+  margin-right: 4px;
 }
 
-.subtitle {
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 0.72rem;
-}
-
-// ── Equalizer animation ───────────────────────────────────────────────────────
-
-.eq {
-  display: flex;
-  gap: 2px;
-  align-items: flex-end;
-  height: 18px;
-  flex-shrink: 0;
-}
-
-.eqBar {
-  width: 3px;
-  background: var(--primary-color, #B1043F);
-  border-radius: 2px;
-  transform-origin: bottom;
-  animation: eq 0.7s ease-in-out infinite alternate;
-
-  &:nth-child(1) { height: 35%; animation-delay: 0s;    }
-  &:nth-child(2) { height: 75%; animation-delay: 0.15s; }
-  &:nth-child(3) { height: 55%; animation-delay: 0.3s;  }
-  &:nth-child(4) { height: 90%; animation-delay: 0.1s;  }
-}
-
-.eqPaused .eqBar {
-  animation-play-state: paused;
-  opacity: 0.4;
-}
-
-@keyframes eq {
-  from { transform: scaleY(0.25); }
-  to   { transform: scaleY(1); }
-}
-
-// ── Skip buttons ──────────────────────────────────────────────────────────────
+// ── Play / Pause button ───────────────────────────────────────────────────────
 
-.skipBtn {
-  background: none;
+.playBtn {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: #fff;
   border: none;
-  color: rgba(255, 255, 255, 0.65);
+  color: var(--secondary-color, #0D1333);
   cursor: pointer;
-  padding: 4px;
   display: flex;
   align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  transition: transform 0.12s;
 
-  &:hover { color: #fff; }
+  &:hover { transform: scale(1.05); }
 }
 
-// ── Play / Pause button ───────────────────────────────────────────────────────
+// ── Botón cerrar ──────────────────────────────────────────────────────────────
 
-.playBtn {
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.92);
+.closeBtn {
+  background: none;
   border: none;
-  color: var(--secondary-color, #0D1333);
+  color: rgba(255, 255, 255, 0.45);
   cursor: pointer;
+  padding: 4px;
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-shrink: 0;
-  transition: background 0.15s;
+  transition: color 0.15s;
 
-  &:hover { background: #fff; }
+  &:hover { color: rgba(255, 255, 255, 0.95); }
 }
 
 // ── Progress bar ──────────────────────────────────────────────────────────────
 
 .progressTrack {
   position: absolute;
-  bottom: 8px;
-  left: 14px;
-  right: 14px;
-  height: 3px;
+  bottom: 0;
+  left: 16px;
+  right: 16px;
+  height: 2px;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 2px;
   cursor: pointer;
 
-  &:hover { height: 5px; bottom: 7px; }
+  &:hover { height: 4px; }
 }
 
 .progressFill {

package/src/context/SpeechContext.jsx

@@ -4,6 +4,27 @@ import { createContext, useCallback, useContext, useEffect, useRef, useState } f
 
 const SpeechCtx = createContext(null)
 
+const STORAGE_KEY = 'portal-ui:speech'
+
+// ── Persistencia en sessionStorage ────────────────────────────────────────────
+// Permite que la barra sobreviva a un remount del provider (navegación SPA).
+
+const readSession = () => {
+  try { return JSON.parse(sessionStorage.getItem(STORAGE_KEY) || 'null') }
+  catch { return null }
+}
+
+const updateSession = (patch) => {
+  try {
+    const cur = readSession() || {}
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ ...cur, ...patch }))
+  } catch { /* sessionStorage no disponible */ }
+}
+
+const clearSession = () => {
+  try { sessionStorage.removeItem(STORAGE_KEY) } catch { /* noop */ }
+}
+
 const strip = (html) => (html ?? '').replace(/<[^>]+>/g, '').trim()
 
 function extractText(titulo, copete, cuerpo) {
@@ -51,11 +72,40 @@ export function SpeechProvider({ children }) {
   const [progress, setProgress] = useState(0)
   const [meta, setMeta]         = useState({ titulo: '', imagen: null })
 
-  const utterRef  = useRef(null)
-  const textRef   = useRef('')
-  const charRef   = useRef(0)
+  const utterRef    = useRef(null)
+  const textRef     = useRef('')
+  const charRef     = useRef(0)
+  const lastSaveRef = useRef(0)     // throttle de escritura a sessionStorage
+  const mountedRef  = useRef(true)  // false tras desmontar este provider
+
+  // ── Restaura el estado tras un remount del provider ─────────────────────────
+  // Antes este efecto cancelaba el audio en CADA desmontaje, lo que rompía la
+  // navegación SPA. Ahora solo cancela al cerrar/recargar la pestaña de verdad.
+  useEffect(() => {
+    const saved = readSession()
+    if (saved?.text) {
+      textRef.current = saved.text
+      charRef.current = saved.charIndex || 0
+      setMeta({ titulo: saved.titulo || '', imagen: saved.imagen || null })
+      setProgress(saved.progress || 0)
+      // El audio del navegador no sobrevive a un remount de React: cancelamos
+      // la utterance huérfana y dejamos la barra en pausa para que el usuario
+      // retome desde la posición guardada (resume() re-arranca solo).
+      window.speechSynthesis?.cancel()
+      setPlaying(false)
+      setPaused(true)
+    }
 
-  useEffect(() => () => window.speechSynthesis?.cancel(), [])
+    const onUnload = () => {
+      window.speechSynthesis?.cancel()
+      clearSession()
+    }
+    window.addEventListener('beforeunload', onUnload)
+    return () => {
+      mountedRef.current = false
+      window.removeEventListener('beforeunload', onUnload)
+    }
+  }, [])
 
   const startFrom = useCallback((charIndex) => {
     window.speechSynthesis.cancel()
@@ -68,13 +118,34 @@ export function SpeechProvider({ children }) {
     if (esVoice) utter.voice = esVoice
     utter.rate = 1
 
+    // Ignora eventos de utterances viejas (tras un skip/seek) o de un provider
+    // ya desmontado. Sin esto, un cancel() deliberado disparaba onend → y onend
+    // borraba la sesión, cerrando la barra en la siguiente navegación.
+    const isStale = () => !mountedRef.current || utterRef.current !== utter
+
     utter.onboundary = (e) => {
+      if (isStale()) return
       const abs = charIndex + (e.charIndex ?? 0)
       charRef.current = abs
-      setProgress(abs / textRef.current.length)
+      const p = abs / textRef.current.length
+      setProgress(p)
+      // Persiste el avance, pero como máximo cada 1.5s para no saturar.
+      const now = Date.now()
+      if (now - lastSaveRef.current > 1500) {
+        lastSaveRef.current = now
+        updateSession({ charIndex: abs, progress: p })
+      }
+    }
+    utter.onend = () => {
+      if (isStale()) return   // fue un cancel() deliberado, NO un fin de lectura
+      setPlaying(false); setPaused(false); setProgress(0)
+      charRef.current = 0
+      clearSession()
+    }
+    utter.onerror = () => {
+      if (isStale()) return
+      setPlaying(false); setPaused(false)
     }
-    utter.onend  = () => { setPlaying(false); setPaused(false); setProgress(0); charRef.current = 0 }
-    utter.onerror = () => { setPlaying(false); setPaused(false) }
 
     utterRef.current = utter
     setTimeout(() => window.speechSynthesis.speak(utter), 100)
@@ -84,12 +155,14 @@ export function SpeechProvider({ children }) {
 
   const play = useCallback(({ titulo, copete, cuerpo, imagen }) => {
     const text = extractText(titulo, copete, cuerpo)
-    console.log('[Speech] voz cargada:', window.speechSynthesis.getVoices().find(v => v.lang.startsWith('es'))?.name ?? 'default')
-    console.log('[Speech] texto completo:', text)
     textRef.current = text
     charRef.current = 0
     setMeta({ titulo, imagen: imagen ?? null })
     setProgress(0)
+    updateSession({
+      titulo, imagen: imagen ?? null,
+      text, charIndex: 0, progress: 0, status: 'playing',
+    })
     startFrom(0)
   }, [startFrom])
 
@@ -97,20 +170,30 @@ export function SpeechProvider({ children }) {
     window.speechSynthesis.pause()
     setPlaying(false)
     setPaused(true)
+    updateSession({ status: 'paused', charIndex: charRef.current })
   }, [])
 
   const resume = useCallback(() => {
-    window.speechSynthesis.resume()
-    setPlaying(true)
-    setPaused(false)
-  }, [])
+    // Si la utterance sigue viva en el navegador, simplemente la reanudamos.
+    // Si no (p. ej. tras un remount), re-arrancamos desde la posición guardada.
+    if (window.speechSynthesis.speaking && window.speechSynthesis.paused) {
+      window.speechSynthesis.resume()
+      setPlaying(true)
+      setPaused(false)
+    } else {
+      startFrom(charRef.current)
+    }
+    updateSession({ status: 'playing' })
+  }, [startFrom])
 
   const stop = useCallback(() => {
+    utterRef.current = null   // su onend quedará marcado como "stale" → no re-procesa
     window.speechSynthesis.cancel()
     setPlaying(false)
     setPaused(false)
     setProgress(0)
     charRef.current = 0
+    clearSession()
   }, [])
 
   // Salta ±10% del texto total
@@ -118,6 +201,7 @@ export function SpeechProvider({ children }) {
     const delta = Math.floor(textRef.current.length * 0.10) * direction
     const newPos = Math.max(0, Math.min(charRef.current + delta, textRef.current.length - 1))
     charRef.current = newPos
+    updateSession({ charIndex: newPos, status: 'playing' })
     startFrom(newPos)
   }, [startFrom])
 
@@ -125,6 +209,7 @@ export function SpeechProvider({ children }) {
   const seekTo = useCallback((ratio) => {
     const pos = Math.floor(ratio * textRef.current.length)
     charRef.current = pos
+    updateSession({ charIndex: pos, status: 'playing' })
     startFrom(pos)
   }, [startFrom])