feat: video preview type

[guoyunhe]

近些年的 Web 应用中，图片和视频混排的情况非常多，因此希望在 Image 组件中支持视频预览，效果类似于 Twitter/X 的多图帖子。视频预览没有工具栏，仅有翻页和关闭按钮。

<Image
  src="/cover.jpg"
  preview={{
    type: 'video',
    src: '/video.mp4'
  }}
/>

Summary by CodeRabbit

Summary by CodeRabbit

• 新功能
  • 预览新增支持视频，视频在预览中与图片一致交互；在预览组中可混合展示图片与视频，默认仍为图片类型。
• 文档
  • 新增“预览视频”示例与演示页面，包含单个视频预览与混合预览组示例，便于参考使用。
• 样式
  • 统一预览媒体的尺寸约束（最大宽高）到图片与视频，显示更一致。

[coderabbitai[bot]]

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

本次变更在预览系统中引入媒体类型支持，扩展从仅图片到图片与视频两种类型。Image 将 preview.type 传递给 Preview；Preview 根据 type 分支渲染 <img> 或 <video>，并仅在图片时显示 Footer。样式选择器扩展至视频。新增演示文档与示例。

Changes

Cohort / File(s)	Summary
样式：预览媒体尺寸 assets/preview.less	选择器从 &-img 扩展为 &-img, &-video，使视频共享图片的 max-width / max-height 约束。
文档：演示页 docs/demo/previewvideo.md	新增 Demo 页面，引用 TSX 示例以展示视频预览。
示例：图片/视频预览与分组 docs/examples/previewvideo.tsx	新增 React 示例组件，演示单个视频预览与 PreviewGroup 中图片/视频混合预览，使用 `preview: { type: 'video'
组件：Image 传递预览类型 src/Image.tsx	从 preview 解构 type（默认 'image'），将其加入注册数据与 memo 依赖，并向 Preview 传递 type。
组件：Preview 支持视频渲染 src/Preview/index.tsx	在 InternalPreviewConfig 中新增 `type?: 'image'
组件：PreviewGroup 透传类型 src/PreviewGroup.tsx	从 mergedItems[current]?.data 解构 type 并传给 Preview，其余逻辑不变。
类型定义：可选介质判别字段 src/interface.ts	在 ImageElementProps 中新增可选字段 `type?: 'image'

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant I as Image
  participant PG as PreviewGroup
  participant P as Preview
  participant M as MediaRenderer

  rect rgba(238,246,255,0.7)
  note over I: 构建注册数据（包含 src 与 type）
  U->>I: 点击缩略图
  I->>P: open({ src, type })
  end

  alt 单图或分组打开
    P->>M: render(type)
  end

  par 渲染分支
    alt type == 'image'
      M->>M: 渲染 <img class="...-img">
      P-->>U: 显示 Footer/工具栏
    else type == 'video'
      M->>M: 渲染 <video class="...-video" controls autoplay>
      P-->>U: 不渲染 Footer
    end
  end

  note over P,M: 样式规则对 .-img 与 .-video 应用相同尺寸约束

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• react-component/image#392 — 修改了 Preview 实现的渲染/portal 行为，可能与本次 Preview 渲染路径变更冲突或需协同。
• react-component/image#384 — 同样调整了 preview 配置与组件，可能与 type 字段和预览流程有关。

Suggested reviewers

• zombieJ
• thinkasany

Pre-merge checks (2 passed, 1 warning)

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	Pull request 标题清晰地说明了主要功能改动：为 Image 组件添加视频预览类型，简洁明了地概括了变更的核心意图。
Description Check	✅ Passed	Pull request 描述明确阐述了新增视频预览功能的背景、效果和使用示例，与变更内容高度相关且具体。

Poem

小兔跳上键盘头，
图与影里同一舟。
预览一开声声柔，
图片视频共逍遥。
咔嚓咔嚓笑眯眯 🐰🎥

[!TIP]

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
		  - name: "Undocumented Breaking Changes"
			  mode: "warning"
			  instructions: |
				  Flag potential breaking changes that are not documented:
				  1. Identify changes to public APIs/exports, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints (including removed/renamed items and changes to types, required params, return values, defaults, or behavior).
				  2. Ignore purely internal/private changes (e.g., code not exported from package entry points or marked internal).
				  3. Verify documentation exists: a "Breaking Change" section in the PR description and updates to CHANGELOG.md.

Please share your feedback with us on this Discord post.

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
image	Error			Sep 9, 2025 5:27am

[zombieJ]

https://ant-design.antgroup.com/components/image-cn#toolbarrenderinfotype 可以自行定义，Image 组件还是不太适合提供 video type，很多属性语义就不对了。考虑一下 ConfigProvider 支持全局配置？