feat(dicom-video): add a plain HTML5 video viewport by cdrake · Pull Request #6363 · OHIF/Viewers

cdrake · 2026-10-20T14:24:15Z

Context

Video series in OHIF play through the Cornerstone video viewport. A mode whose image viewports are not Cornerstone, such as the NiiVue-only mode in the follow-up PR (part of niivue/mono#269, the NiiVue 1.0 OHIF viewer), has nothing to map the dicom-video SOP class handler to.

This is the first PR of a stack; the NiiVue mode PR builds on it.

Changes & Results

@ohif/extension-dicom-video now also exports a viewport module, dicom-video (OHIFDicomVideoViewport), that plays the display set in a native <video> element with the browser's own controls.
- Fetches through the display set's getVideoUrl (data source auth headers; the object URL is revoked on unmount or display set change) and falls back to videoUrl.
- Registers its element with useViewportElementRegistration.
- Shows "Video could not be loaded" when the fetch or playback fails.
- Compiles under the React Compiler; both compiler budgets are unchanged.
Unit tests for the viewport (6 tests) and a jest config for the extension.
No existing mode changes: they keep mapping video to the Cornerstone viewport, so there is no visible change until a mode opts in.

Testing

npx jest extensions/dicom-video
pnpm run compiler:coverage:ci and pnpm run lint:compiler:ci
cd platform/app && pnpm build

In a mode, map the dicom-video SOP class handler to the viewport:

{ namespace: '@ohif/extension-dicom-video.viewportModule.dicom-video', displaySetsToDisplay: ['@ohif/extension-dicom-video.sopClassHandlerModule.dicom-video'] }

The NiiVue mode PR does this.

Checklist

PR

My Pull Request title is descriptive, accurate and follows the
semantic-release format and guidelines.

Code

My code has been well-documented (function documentation, inline comments,
etc.)

Public Documentation Updates

The documentation page has been updated as necessary for any public API
additions or removals. (The new viewport module is not documented yet; happy to add a docs page if wanted.)

Tested Environment

OS: macOS 26
Node version: 24.2.0
Browser: Chromium 141 (Playwright)

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features
- Added support for viewing DICOM video studies in a native video viewport.
- Supports authenticated video URLs and standard video URLs, with browser playback controls.
- Added lazy loading for improved viewport performance.
- Displays clear errors when video loading fails or unsupported multiple-display-set content is provided.
Tests
- Added coverage for video loading, cleanup, cancellation, errors, and viewport lifecycle behavior.

The dicom-video extension now also exports a viewport module, `dicom-video`, that plays a video display set in a native <video> element with the browser's own controls. It gives modes whose image viewports are not Cornerstone (for example a NiiVue-only mode) a way to show video series. Existing modes are unchanged: they keep mapping video to the Cornerstone viewport. The viewport fetches through the display set's getVideoUrl (data source auth headers, object URL revoked on unmount) and falls back to videoUrl, registers its element with useViewportElementRegistration, and compiles under the React Compiler. Adds unit tests. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

coderabbitai · 2026-10-20T14:24:37Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 9cc46d96-b886-4f13-b338-6402022c3c44

📥 Commits

Reviewing files that changed from the base of the PR and between 5a78dac and a5f0f0b.

📒 Files selected for processing: 4

extensions/dicom-video/jest.config.js
extensions/dicom-video/src/index.tsx
extensions/dicom-video/src/viewports/OHIFDicomVideoViewport.test.ts
extensions/dicom-video/src/viewports/OHIFDicomVideoViewport.tsx

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

📝 Walkthrough

The DICOM video extension adds a native HTML5 video viewport. The viewport resolves video URLs, handles loading and cleanup, and renders playback controls. The extension lazy-loads and registers the viewport as the dicom-video module.

Changes: DICOM video playback

Layer / File(s)	Summary
Video loading and rendering `extensions/dicom-video/src/viewports/OHIFDicomVideoViewport.tsx`, `extensions/dicom-video/src/viewports/OHIFDicomVideoViewport.test.ts`	The viewport loads an authenticated URL when available and falls back to `videoUrl`. It handles failures, cancellation, stale results, and object-URL cleanup. It renders a video element with browser controls, and tests cover loading, cleanup, registration, and display-set constraints.
Extension registration `extensions/dicom-video/src/index.tsx`, `extensions/dicom-video/jest.config.js`	The extension lazy-loads the viewport and exposes it as the `dicom-video` viewport module. Jest configuration extends the shared base configuration with an `@ohif/*` platform-source alias.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant OHIFExtension
  participant OHIFDicomVideoViewport
  participant getVideoUrl
  participant HTMLVideoElement
  OHIFExtension->>OHIFDicomVideoViewport: Lazy-load viewport module
  OHIFDicomVideoViewport->>getVideoUrl: Resolve video URL when available
  getVideoUrl-->>OHIFDicomVideoViewport: Return resolved URL
  OHIFDicomVideoViewport->>HTMLVideoElement: Render video source with playback controls

Merge Risk: ⚪ Minimal · up to a5f0f

This change adds an opt-in HTML5 video viewport and leaves existing modes unchanged. No actionable merge-blocking risk is identified.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title clearly describes the primary change and follows the repository's semantic-release format.
Description check		The description includes the required Context, Changes & Results, Testing, Checklist, and Tested Environment sections. It explains the new viewport, test commands, build checks, usage mapping, and the…
Docstring Coverage		Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 4 files.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Description check

Explanation

The description includes the required Context, Changes & Results, Testing, Checklist, and Tested Environment sections. It explains the new viewport, test commands, build checks, usage mapping, and the outstanding documentation gap. The description is complete enough to pass, although the public documentation checkbox remains unchecked.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

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

netlify · 2026-10-20T14:25:20Z

✅ Deploy Preview for ohif-dev ready!

Name	Link
🔨 Latest commit	`a5f0f0b`
🔍 Latest deploy log	https://app.netlify.com/projects/ohif-dev/deploys/6ad7799377f7584a0ee0ed1b
😎 Deploy Preview	https://deploy-preview-6363--ohif-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

cdrake · 2026-10-20T14:27:07Z

@coderabbitai review

coderabbitai · 2026-10-20T14:27:15Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

claude

Claude Code Review

This pull request is from a fork — automated review is disabled. A repository maintainer can comment @claude review to run a one-time review.

cdrake · 2026-10-20T14:45:23Z

@jbocce @sedghi @wayfarer3130 this is the base of #6364 (the NiiVue mode): a plain HTML5 video viewport in extensions/dicom-video. Could one of you review it alongside #6364?

wayfarer3130 · 2026-10-20T23:28:06Z

I think I'd be more inclined to a change to just register the minimal set of display set information to enable using the existing viewport to work. Otherwise I don't really see an advantage to having this in CS3D since it won't interact with anything else such as key objects for selecting video ranges, occlusion boxes etc, whereas it would be very helpful to have a registerVideoMetadata method in the metadata package that simply creates fake metadata and uses the real video url to display in the existing viewport. That way you can call it from OHIF and it will just become part of the study, or will be it's own study and you can calibrate frames etc.

cdrake · 2026-10-20T23:53:05Z

Thanks @wayfarer3130, agreed. I hadn't noticed that 3.13 already removed the dicom-video viewport namespace in favour of the Cornerstone viewport. A plain <video> element would also lose key objects, occlusion boxes and frame calibration. The NiiVue mode already loads the cornerstone extension, so #6364 now maps video to the existing Cornerstone viewport and no longer depends on this PR. Closing this one. A registerVideoMetadata helper in the metadata package sounds useful for videos that aren't DICOM; happy to look at that separately.

cdrake mentioned this pull request Oct 20, 2026

feat(niivue): add a NiiVue-only viewer mode #6364

Open

5 of 6 tasks

cdrake marked this pull request as ready for review October 20, 2026 14:41

claude Bot reviewed Oct 20, 2026

View reviewed changes

cdrake closed this Oct 20, 2026

Navigation Menu

Repository navigation

feat(dicom-video): add a plain HTML5 video viewport - #6363

feat(dicom-video): add a plain HTML5 video viewport#6363
cdrake wants to merge 1 commit into
OHIF:masterfrom
cdrake:feat/dicom-video-html5-viewport

cdrake commented Oct 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Oct 20, 2026 •

edited

Loading

Sequence Diagram(s)

Uh oh!

netlify Bot commented Oct 20, 2026

Uh oh!

cdrake commented Oct 20, 2026

Uh oh!

coderabbitai Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

claude Bot left a comment

Uh oh!

cdrake commented Oct 20, 2026

Uh oh!

wayfarer3130 commented Oct 20, 2026

Uh oh!

cdrake commented Oct 20, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

cdrake commented Oct 20, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Changes & Results

Testing

Checklist

PR

Code

Public Documentation Updates

Tested Environment

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Sequence Diagram(s)

Uh oh!

netlify Bot commented Oct 20, 2026

✅ Deploy Preview for ohif-dev ready!

Uh oh!

cdrake commented Oct 20, 2026

Uh oh!

coderabbitai Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

cdrake commented Oct 20, 2026

Uh oh!

wayfarer3130 commented Oct 20, 2026

Uh oh!

cdrake commented Oct 20, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cdrake commented Oct 20, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 20, 2026 •

edited

Loading

coderabbitai Bot commented Oct 20, 2026 •

edited

Loading