[Bug]: Crash when setting `navbar={false}`

[christiankaindl]

What happened?

When setting the option navbar to false, the whole component crashes with the error "TypeError: buttons is null".

What should have happened?

It should work. It previously worked with version "4.0.2-psv5.4.4"

Code

<ReactPhotoSphereViewer
  src="Test_Pano.jpg"
  height={"100vh"}
  navbar={false}
  width={"100%"}
  littlePlanet={false}
/>

Sandbox Link

https://codesandbox.io/p/sandbox/zealous-resonance-r65vmf?file=%2Fsrc%2FApp.js

Library Version

latest (4.2.1-psv5.6.0)

What operating system are you using?

macOS

What browser are you using?

Firefox

Logs

Unhandled Runtime Error

TypeError: buttons is null

**Call Stack**
setButtons
node_modules/react-photo-sphere-viewer/dist/node_modules/@photo-sphere-viewer/core/index.module.js (4346:0)
setOptions
node_modules/react-photo-sphere-viewer/dist/node_modules/@photo-sphere-viewer/core/index.module.js (7485:0)
setOption
node_modules/react-photo-sphere-viewer/dist/node_modules/@photo-sphere-viewer/core/index.module.js (7515:0)
ReactPhotoSphereViewer</<
node_modules/react-photo-sphere-viewer/dist/index.js (269:0)
commitHookEffectListMount
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (20998:0)
commitHookPassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23051:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23156:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23134:0)

Interest to fix the bug

• [ ] I would like to fix this bug!

[FrankZav]

Ran into the same issue, seems to work if you pass as a string. so it looks like navbar={'false'}

[christiankaindl]

@FrankZav that's an interesting workaround! 😄 though that only makes the navbar empty, the grey bar itself is still visible:

Also, the string doesn't have to be 'false', it can be any string in my testing

[mkubdev]

Hello, from the Readme it's indeed not trivial to find the appropriate navbar parameters, but you can check on the official photo-shpere-viewer parameters.

Also you can find an example of the implementation here: https://github.com/Elius94/react-photo-sphere-viewer/blob/89db201b8e62f1e2d1224e3e2c813df8a1abddc7/example/virtualtour/src/App.js#L132

[Elius94]

I'm working on it, there will be the possibility to hide the navbar by setting navbar={false} :)

[Elius94]

https://github.com/Elius94/react-photo-sphere-viewer/releases/tag/v5.0.0-psv5.7.1

Fixed in this release!

[!IMPORTANT] Since v5.0.0-psv5.7.1, to use <ReactPhotoSphereViewer /> you have to manually install the JS library @photo-sphere-viewer/core. This is a breaking change. The library is not included in the package anymore. You can install it using the command npm install @photo-sphere-viewer/core or yarn add @photo-sphere-viewer/core. I decided to remove the library from the package to reduce the size of the package and to avoid the need to update the package every time the original library is updated. In particular, from now on, to use a plugin or an adapter, you need to import it directly from the package. For example, to use the MarkersPlugin you need to import it from the package import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin'.