OPTI-3196: VR support#160
Conversation
🦋 Changeset detectedLatest commit: 4b30ce3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
|
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? 
|
| /** | ||
| * A helper component for iOS that forces the player into fullscreen while VR (stereo) | ||
| * content is being presented, and restores the previous state when it stops. | ||
| * | ||
| * This component renders nothing visible. | ||
| */ |
There was a problem hiding this comment.
Why is this a separate component? Shouldn't we put this logic inside UIContainer itself then?
There was a problem hiding this comment.
I tried to implement the components the same way they are on the vjs-based UI. And there this was a separate component. I agree that it could be a better idea to put it in UIContainer as this is just a behavioral component.
I will move it.
| const vr = this._player.vr; | ||
| if (vr !== undefined && vr.state !== 'unavailable') { | ||
| vr.useDeviceMotionControls = true; | ||
| } |
There was a problem hiding this comment.
This looks a bit out of place... 😕
There was a problem hiding this comment.
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... 🤔
| /* | ||
| * When no VR capable device is available, the button is disabled/greyed out. | ||
| */ | ||
| :host([disabled]) svg, | ||
| :host([disabled]) img, | ||
| :host([disabled]) ::slotted(svg), | ||
| :host([disabled]) ::slotted(img) { | ||
| color: var(--theoplayer-button-disabled-text-color, #ccc); | ||
| opacity: var(--theoplayer-vr-button-disabled-icon-opacity, 0.5); | ||
| } |
There was a problem hiding this comment.
Should we move these styles to Button.css, so all disabled buttons will look like this? 🤔
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. |
2 participants
This PR adds VR components to Web UI. Main changes are:
Default UI on desktop with a VR source (the VR compass can be customized on a custom UI):
