From 6d9afaaf60399b229e748398a64baea970609d5c Mon Sep 17 00:00:00 2001
From: rafa <rcalvotorrejon@gmail.com>
Date: Sat, 27 Jun 2026 11:18:50 -0400
Subject: [PATCH] =?UTF-8?q?fix(#142):=20player=20de=20audio=20visible=20en?=
 =?UTF-8?q?=20m=C3=B3vil=20vertical?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El reproductor se inyecta en el grupo flex del autor (wp-block-group FSE).
El flex-wrap apuntaba a .fea-byline (solo existe en Astra), por lo que en
móvil vertical el <audio> se comprimía y no mostraba controles. Se dirige
el wrap también al grupo FSE del byline.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../mu-plugins/fea-audio-player.php           | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 wordpress/wp-content/mu-plugins/fea-audio-player.php

diff --git a/wordpress/wp-content/mu-plugins/fea-audio-player.php b/wordpress/wp-content/mu-plugins/fea-audio-player.php
new file mode 100644
index 0000000..ecb7c9f
--- /dev/null
+++ b/wordpress/wp-content/mu-plugins/fea-audio-player.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * Plugin Name: Fea Audio Player (#76)
+ * Description: Reproductor TTS compacto en la fila del autor (a la derecha) cuando
+ *              existe el meta fea_audio_url (voz Nico, MiniMax HD). Se inyecta como
+ *              último hijo del grupo flex del autor (template FSE) vía render_block.
+ */
+if (!defined('ABSPATH')) exit;
+
+/** Devuelve el HTML del reproductor para el post actual, o '' si no hay audio. */
+function fea_audio_player_html(): string {
+    $url = get_post_meta(get_the_ID(), 'fea_audio_url', true);
+    if (!$url) return '';
+    return '<div class="fea-audio">'
+        . '<span class="fea-audio-label">'
+        . '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">'
+        . '<path fill="currentColor" d="M3 10v4h4l5 5V5L7 10H3zm13.5 2a4.5 4.5 0 0 0-2.5-4.03v8.06A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z"/>'
+        . '</svg> Escucha</span>'
+        . '<audio controls preload="none" src="' . esc_url($url) . '"></audio>'
+        . '</div>';
+}
+
+// Inyecta el player como último hijo de la fila flex del autor (el grupo que
+// contiene el core/avatar en la cabecera FSE del single).
+add_filter('render_block', function ($html, $block) {
+    if (!is_singular('post')) return $html;
+    if (($block['blockName'] ?? '') !== 'core/group') return $html;
+    $has_avatar = false;
+    foreach ($block['innerBlocks'] ?? [] as $ib) {
+        if (($ib['blockName'] ?? '') === 'core/avatar') { $has_avatar = true; break; }
+    }
+    if (!$has_avatar) return $html;
+    $player = fea_audio_player_html();
+    if (!$player) return $html;
+    $pos = strrpos($html, '</div>');
+    return $pos === false ? $html . $player : substr($html, 0, $pos) . $player . substr($html, $pos);
+}, 10, 2);
+
+add_action('wp_head', function () {
+    if (!is_singular('post')) return;
+    if (!get_post_meta(get_queried_object_id(), 'fea_audio_url', true)) return;
+    ?>
+    <style>
+    /* El player se inyecta en el grupo flex del autor. En el single FSE ese
+       contenedor es el wp-block-group (no .fea-byline, que solo existe en Astra),
+       así que el wrap debe apuntar también a él o en móvil vertical el <audio>
+       no encuentra ancho y no muestra controles (#142). */
+    .fea-byline,
+    .wp-block-group:has(> .wp-block-avatar):has(.wp-block-post-author-name){flex-wrap:wrap}
+    .fea-audio{display:flex;align-items:center;gap:.5rem;margin-left:auto;
+        padding:.3rem .55rem;background:#faf6f7;border:1px solid #e7d6da;
+        border-left:3px solid #8b1a2e;border-radius:8px}
+    .fea-audio-label{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;
+        font-weight:600;color:#8b1a2e;white-space:nowrap;line-height:1}
+    .fea-audio audio{height:32px;width:230px;max-width:44vw}
+    @media(max-width:600px){
+        .fea-audio{margin-left:0;width:100%;margin-top:.5rem}
+        .fea-audio audio{flex:1 1 auto;width:auto;max-width:none}
+    }
+    </style>
+    <?php
+});