Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Feature]: Multi-video overlay and split-screen layout regions on the timeline

Abierto
  • ¿Algo no está bien?
#1,316 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

  • #1318 de @rainyflash — cerrado sin fusionar

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
20/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
electron, typescript
Área
full-stack

Línea de trabajo

Start with the 11-step region checklist in technical-documentation/architecture/editor-shell.md and trace the existing document, timeline, preview, inspector, and agent/MCP entry points. The issue names AxcutDocument, V4Timeline, PreviewCanvas, FloatingInspector, and SceneDescription as areas to inspect. Done means overlay regions work across those surfaces, including composition, controls, synchronization, and agent/MCP authoring; an open linked pull request indicates work is already underway.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Search existing issues
  • I have searched the existing issues
Is your feature request related to a problem?

Currently, OpenScreen's timeline only supports playing one primary video clip at a time (plus the recording's linked webcam track). Users creating product demos, before/after performance comparisons, multi-client workflows (e.g. browser + terminal, or desktop + mobile side by side), or picture-in-picture B-roll overlays have no way to present two video assets simultaneously on screen and configure how they share the frame.

Describe the solution you'd like

Add support for multi-video overlay / split-screen regions (videoOverlayRanges) so users and AI agents can place a secondary video asset over any span of the edited timeline and control how the multiple videos are presented on screen:

  1. Document Model (AxcutDocument):
    • Add clip-anchored videoOverlayRanges referencing any video assetId in the project, with source offset (offsetMs), layout mode (side-by-side, top-bottom, pip, wipe-compare), split ratio (splitRatio, 0.2–0.8, default 0.5), PiP rect (position / size), optional cropRegion, muted, and gainDb.
  2. Editor UI (Timeline, Preview & Inspector):
    • Add a Video Overlay / Split Screen lane and toolbar action on V4Timeline to place, move, resize, and delete secondary video regions.
    • Render the simultaneous multi-video composition in PreviewCanvas (side-by-side split, top/bottom split, wipe comparison, and draggable/resizable PiP overlay) synchronized with the playhead, trims, and speed regions.
    • Add an inspector selection pane (FloatingInspector) to pick the secondary video asset, switch layout modes (side-by-side, top-bottom, pip, wipe-compare), adjust split ratio / PiP size, and toggle audio mute.
    • Extend SceneDescription with videoOverlayRegions so the scene contract carries the resolved multi-video regions.
  3. AI Agent & MCP Tools:
    • Expose addVideoOverlay and setVideoOverlay (and support removeModifier + getCurrentDocument readback) so both the in-app agent and external MCP clients can author side-by-side comparisons and PiP overlays programmatically.
Describe alternatives you've considered

Turning the primary timeline into a free-form N-track non-linear editor was rejected because it would break the contiguous primary timeline invariant (decisions.md) and add unnecessary complexity. Modeling secondary video presentations as clip-anchored regions keeps the sleek single-timeline UX intact.

Additional context

Follows the 11-step region checklist in technical-documentation/architecture/editor-shell.md.

Lenguaje dominante
TypeScript
Estrellas
3.7k
Forks
231
Merge medio
16 h 25 min
PR fusionados (30 d)
331

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de getopenscreen/openscreen

Todos los issues de getopenscreen/openscreen

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.