Skip to content

OPTI-3196: VR support#160

Merged
MattiasBuelens merged 15 commits into
mainfrom
feature/vr
Jun 25, 2026
Merged

OPTI-3196: VR support#160
MattiasBuelens merged 15 commits into
mainfrom
feature/vr

Conversation

@ceyhun-o

Copy link
Copy Markdown
Contributor

This PR adds VR components to Web UI. Main changes are:

  • New components for VR.
  • Device motion permission handling as part of the Play button (same logic as the vjs-based UI).

Default UI on desktop with a VR source (the VR compass can be customized on a custom UI):
Screenshot 2026-06-16 at 13 29 43

@ceyhun-o ceyhun-o requested a review from MattiasBuelens June 16, 2026 11:39
@ceyhun-o ceyhun-o added the enhancement New feature or request label Jun 16, 2026
@changeset-bot

changeset-bot Bot commented Jun 16, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: fe47b5c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@theoplayer/react-ui Minor
@theoplayer/web-ui Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@ceyhun-o

Copy link
Copy Markdown
Contributor Author

I am not very happy with where the compass is on default UI on mobile. Maybe it should go on the left of AirPlay icon. What do you think is the best @MattiasBuelens? Or does it look fine?

Screenshot 2026-06-16 at 14 00 31

Comment thread src/components/VRIOSFullscreen.ts Outdated
Comment on lines +111 to +114
const vr = this._player.vr;
if (vr !== undefined && vr.state !== 'unavailable') {
vr.useDeviceMotionControls = true;
}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks a bit out of place... 😕

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I suppose our video.js UI is also doing this when the BigPlayButton is clicked. Maybe we should move this inside ChromelessPlayer.prepareWithUserAction() instead... 🤔

Comment thread src/components/VRButton.css Outdated
Comment thread src/components/VRCompass.ts Outdated
Comment thread src/i18n/Locale.ts
@MattiasBuelens

Copy link
Copy Markdown
Collaborator

I am not very happy with where the compass is on default UI on mobile. Maybe it should go on the left of AirPlay icon. What do you think is the best @MattiasBuelens? Or does it look fine?

Yeah, that looks weird with the two "rows" at the top. 😅

What do other players do?

@ceyhun-o

Copy link
Copy Markdown
Contributor Author

Yeah, that looks weird with the two "rows" at the top. 😅

What do other players do?

I haven't (yet) seen another player with a VR compass. You can just move the video around.

@ceyhun-o ceyhun-o requested a review from MattiasBuelens June 25, 2026 12:02
@MattiasBuelens MattiasBuelens merged commit 605cf25 into main Jun 25, 2026
1 check passed
@MattiasBuelens MattiasBuelens deleted the feature/vr branch June 25, 2026 12:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants