Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#1,316 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

  • #1318 của @rainyflash — đã đóng, không merge

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
20/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
electron, typescript
Lĩnh vực
full-stack

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
3.7k
Fork
231
Merge trung bình
16 giờ 38 phút
Pull request đã merge (30 ngày)
327

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của getopenscreen/openscreen

Tất cả issue của getopenscreen/openscreen

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.