Support for custom content in Full Screen mode

[haseebanwar]

Describe the feature

It looks like we cannot add custom content to show up in the viewer in full-screen mode. Consider the code snippets

HTML

<div id="viewer">
  <h1>some text</h1>
</div>

CSS

html, body, #viewer {
  margin: 0;
  width: 100vw;
  height: 100vh;
  font-family: sans-serif;
}
h1 {
  position: absolute;
  z-index: 99999;
  top: 5px;
  left: 5px;
}

JS

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

const viewer = new PhotoSphereViewer.Viewer({
    container: 'viewer',
    panorama: baseUrl + 'sphere.jpg',
    loadingImg: baseUrl + 'loader.gif',
    touchmoveTwoFingers: true,
    mousewheelCtrlKey: true,
    navbar: [
        'zoom',
        'fullscreen',
    ],
});

In the non-full-screen mode, the text "some text" shows up on the top left of the viewer as it is positioned absolutely. But when you switch to the full-screen mode the text "some text" disappears.

If we look at the final markup after the photosphere renders the viewer in the #viewer element, it looks like this.

<div id="viewer">
  <h1>some text</h1>
  <div class="psv-container psv--has-navbar">
    <!-- all viewer content -->
  </div>
</div>

Now, the problem is photosphere sets requestFullScreen() on the .psv-container element, and doing this makes the inside content visible and outer content (in this case: <h1>some text</h1>) disappear, and it seems like there is no CSS hack that can make custom content visible in full-screen mode.

If photosphere calls requestFullScreen() on the #viewer element instead of .psv-container element, it will solve the problem.

I have searched the documentation but found nothing that could cover this use case. Please share if there's a solution or hack for it. I am sorry if there's already a solution for it and I missed it. And if there's not, then please add this functionality.

Thanks

Alternatives you've considered

No response

Additional context

No response

[mistic100]

you can add your content to the viewer element itself like the plugins do

viewer.on('ready', () => {
  viewer.container.appendChild(.....);
});

[haseebanwar]

@mistic100 Thanks, it works. But in React, it makes the process lengthy because we cannot give JSX directly to appendChild(). It would be easier for React devs if Photosphere accepts children directly. Since appendChild() works, so please close the issue if you think the suggested fix is unnecessary.

Thanks

[mistic100]

I changed to use the parent element in fullscreen. There does not seem do be any undesirable side effect.

[github-actions]

This feature/bug fix has been released in version 5.2.0.