search

Elius94 / react-photo-sphere-viewer

Photosphere Viewer for React.JS
MIT License
65 stars 21 forks source link

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

Closed christiankaindl closed 7 months ago

christiankaindl commented 7 months ago

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

Screenshot 2024-02-25 at 13 46 33 
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

FrankZav commented 7 months ago

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

christiankaindl commented 7 months ago

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

Screenshot 2024-02-29 at 10 38 28

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

mkubdev commented 7 months ago

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 commented 7 months ago

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

Elius94 commented 7 months ago

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'.