Skip to content

Rifa Nebraska: editor in-canvas profesional + edición auditada sin brincos#2

Open
carlosluqueancona wants to merge 12 commits into
Hainrixz:mainfrom
carlosluqueancona:patitas/rifa-nebraska
Open

Rifa Nebraska: editor in-canvas profesional + edición auditada sin brincos#2
carlosluqueancona wants to merge 12 commits into
Hainrixz:mainfrom
carlosluqueancona:patitas/rifa-nebraska

Conversation

@carlosluqueancona

@carlosluqueancona carlosluqueancona commented Jul 14, 2026

Copy link
Copy Markdown

Qué trae

Editor in-canvas profesional (src/components/editor/)

  • Timeline con bloques proporcionales coloreados por clip fuente, playhead vivo, zonas de intro/outro y leyenda; clic = seleccionar + seek.
  • Inspector del corte: entrada→salida, duración, recortes ±0.1 s, dividir en el playhead, reordenar, borrar, deshacer/rehacer.
  • Mini-mapa de encuadre con la ventana 9:16 arrastrable y marcador de cara; "fijar encuadre" crea entradas siempre rellenas.
  • Panel de Datos: tabla editable de cortes y encuadres con la fila activa resaltada en vivo bajo el playhead, validación in-place, badge MUERTO para encuadres inválidos y altas rellenas.
  • El editor colapsa automáticamente el panel JSON crudo de Studio (reemplazado por el Panel de Datos); "ver en JSON" lo reabre bajo demanda y resalta la entrada exacta.
  • Atajos de teclado (←/→, S, ⌫, [, ], Z/⇧Z, Esc) con leyenda; saneador de prizeShots muertos.
  • Solo se monta con editor && isStudio: imposible que se cuele en un render.

Fix del motor de reencuadre

  • trimAfter ahora es trimBefore + duración de la Sequence: con framesOf(endSeconds) el redondeo dejaba el último cuadro sin material y salían flashazos negros de 1 frame.

Edición auditada frame a frame

  • 20→17 cortes: 3 fusiones de jump cuts (pares de micro-cortes del mismo plano) y 2 cortes reordenados a cronológico según el audio.
  • 13 prizeShots saneados con labels descriptivos; entrada muerta eliminada; encuadres verificados con stills.
  • scripts/audit-edit.mts: auditoría reproducible del montaje (jump cuts, riesgo de cuadro negro, prizeShots muertos) contra Root.tsx o un JSON propuesto.

Verificación

  • tsc --noEmit limpio en cada commit.
  • Pruebas Playwright headless contra Studio: selección, edición con escritura en Root.tsx y reversión por undo, altas rellenas, colapso/reapertura del panel de Studio, resaltado en vivo.
  • Render completo verificado (75.5 s, 1080x1920, 24 fps) con stills en las uniones que antes tenían cuadros negros.

🤖 Generated with Claude Code

Carlos Luque Ancona and others added 12 commits July 13, 2026 18:59
@claude
Reel de la Rifa Nebraska + editor de cortes en el canvas
7266da1 
El montaje deja de vivir en src/data/nebraska.ts y pasa a ser un prop con
schema Zod (`cuts`), como ya lo era `prizeShots`. Eso lo vuelve editable
desde Studio y, sobre todo, borrable: la duracion del reel ya no es una
constante, la calcula `calculateMetadata` sumando los cortes, asi que quitar
uno acorta el video solo.

Encima va un editor dentro del propio preview (prop `editor`, solo en Studio,
nunca en el render): clic en el video toma el corte que estas viendo, clic en
la tira de abajo salta a cualquier otro, y con uno seleccionado puedes
recortarlo, partirlo, moverlo o borrarlo. Cada cambio se guarda solo en
Root.tsx via saveDefaultProps(), la misma via por la que Studio guarda los
sliders: no hay estado paralelo que se desincronice del archivo.

Tres cosas que costaron encontrar:

- Studio pinta sobre el preview una capa de contornos con pointer-events:all
  que vive fuera de la composicion, asi que ningun z-index la gana y se traga
  todos los clics. El editor la neutraliza mientras esta encendido.

- Crear un encuadre con el boton "+" del panel lo dejaba en start:0/end:0: no
  cubre nada, no hace nada y no avisa de por que. El boton "fijar encuadre en
  este corte" lo crea ya relleno con el clip y los segundos del corte.

- El corte de nebraska03 se movia raro porque el rastreo de cara viene
  nervioso ahi (salta entre 0.58 y 0.82). Ahora lleva encuadre fijo.

music_intro.wav y music_outro.wav salen de music.mp3; faltaban y el render
moria con un 404.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Editor in-canvas profesional + edicion auditada sin brincos
26f1368 
- Editor rehecho en src/components/editor/ (theme, iconos, timeline con
  playhead vivo, inspector, mini-mapa de encuadre arrastrable, undo/redo,
  saneador de prizeShots muertos, atajos de teclado)
- Fix motor: trimAfter = trimBefore + duracion (el redondeo con
  framesOf(endSeconds) producia cuadros negros de 1 frame)
- Montaje auditado frame a frame: 20->17 cortes (3 fusiones de jump cuts),
  cortes 7/8 reordenados a cronologico segun el audio, 13 prizeShots con
  labels descriptivos, entrada muerta eliminada
- scripts/audit-edit.mts: auditoria reproducible del montaje (jump cuts,
  riesgo de cuadro negro, prizeShots muertos)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
Panel de Datos: tabla editable de cortes y encuadres en el canvas
656b0d4 
Reemplaza la necesidad del panel JSON crudo de Studio: pestañas
Cortes/Encuadres con edicion in-place validada, fila activa resaltada
en vivo bajo el playhead, badge MUERTO para encuadres invalidos, altas
siempre rellenas, y sincronia automatica del panel de Studio via
focusDefaultPropsPath al cambiar la seleccion.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
El editor cierra solo el panel JSON crudo de Studio
d855d44 
Con el editor activo, la barra derecha de Studio (Default Props) sobra:
el Panel de Datos la reemplaza. Al montar se colapsa automaticamente via
su boton de toggle (identificable por title); se puede reabrir con Cmd+J
y no se vuelve a pelear por ella. focusDefaultPropsPath no la reabre
(es solo DOM), verificado con Playwright partiendo de barra expandida.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
ver en JSON reabre el panel de Studio; la sincronia pasiva ya no
e9342d5 
Al colapsar la barra derecha, focusDefaultPropsPath (solo DOM) quedaba
sin efecto. Ahora la accion explicita abre la barra con su toggle y
reintenta hasta resaltar; la sincronia automatica de la seleccion usa
una variante pasiva que no reabre el panel.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
Editor movido a dock lateral derecho: el video queda despejado
b172bae 
La UI (cabecera, inspector con mini-mapa de encuadre, panel de datos,
atajos) sale del canvas via createPortal a un dock fijo de ~380 px en
pixeles reales de pantalla; en el video solo quedan la capa de clic y
el filmstrip delgado. Chevron colapsa el dock a una pestanita EDITOR.
Densidad recalibrada tipo panel pro (fuente base ~12 px, tabla completa
sin scroll horizontal).

QA adversarial: 12/13 PASS (regresion completa de edicion, undo/redo,
atajos, encuadres, sincronia con Studio, playhead en vivo por el
portal, Root.tsx byte-identico tras las pruebas). Pendiente conocido:
en ventanas angostas (~1100 px) el dock solapa ~23 px del preview
porque Studio centra el canvas sin reservar espacio al overlay.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
Afinar encuadres: tazon cx 0.54, papeleta de Vania cx 0.75
275d811 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
Reservar el ancho del dock en el layout de Studio: fin del solape
24530e2 
Studio centra el preview en el ancho total de la ventana sin saber del
dock (overlay fijo por portal); en ventanas angostas el canvas quedaba
~23 px debajo. Un estilo inyectado reduce #__remotion-studio-container
(id estable del index.html de Studio) en el ancho del dock mientras
este abierto; el ResizeObserver del player re-encuadra solo, y al
colapsar el dock se devuelve el ancho completo.

Verificado con Playwright a 1100x900 y 1600x1000: solape 0 en ambos,
y el colapso restaura el ancho total.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
Centrar el preview de verdad y scroll fino en el dock
cd7b4e7 
La reserva de ancho anterior no llegaba al canvas: el armazon interno
de Studio es un div absolute con todos sus ancestros static, asi que
resolvia su tamano contra el viewport completo. El contenedor raiz
ahora se vuelve relative (con height 100vh, porque su altura la
aportaba ese absolute) y Studio entero vive en el ancho restante; un
resize sintetico le avisa al player para que re-mida y re-centre.
Scrollbars del dock estilizados: finos, oscuros, sin flechas.

Verificado a 1600 y 1100: centrado exacto del preview, solape 0,
seleccion/edicion/undo funcionando y el colapso del dock devuelve el
ancho completo.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
El Panel de Datos llena toda la altura del dock
38f0227 
La tabla vivia en una caja de 620 px con aire muerto debajo; ahora la
cadena de contenedores propaga flex/minHeight y la lista scrollea por
dentro solo si hace falta (a altura normal caben los 17 cortes sin
scroll). Se elimina la regla scrollbar-width que anulaba en Chrome los
estilos webkit del scroll fino.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
Intro con fondo de marca; el fondo de video queda conmutable
3cdc901 
Nuevo prop introFondo ("marca" | "video", default "marca"): degradado
animado con la paleta de Patitas (rosa/vino respirando lento, bokeh
tenue determinista, vineta) que no compite con la informacion. El
fondo anterior (tienda desenfocada) se conserva tal cual como
IntroFondoVideo y se regresa a el cambiando el prop en el panel de
Studio, sin tocar codigo. El resto de la tarjeta no cambia.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@claude
El outro comparte el fondo de marca; prop renombrado a fondoTarjetas
1ee01d9 
El degradado de marca ahora cubre las dos tarjetas (entrada y salida)
desde un solo prop; FondoVideo queda parametrizado (src/trim) para
poder regresar a la tienda desenfocada en ambas con un clic.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@carlosluqueancona