Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
#1,316 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

  • #1318 par @rainyflash — fermée sans fusion

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
20/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
electron, typescript
Domaine
full-stack

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
3.7k
Forks
231
Merge moyen
16 h 25 min
PR mergées (30 j)
331

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de getopenscreen/openscreen

Toutes les issues de getopenscreen/openscreen

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.