elius94 / react-photo-sphere-viewer Goto Github PK

What happened?

When showing multiple photospheres on one page, I get the following error. Verified on Chrome and Safari, Windows and Mac.

Unhandled Runtime Error
IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-5) is negative.
Call Stack
Loader.setProgress
node_modules/react-photo-sphere-viewer/dist/node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js (5774:0)
eval
node_modules/react-photo-sphere-viewer/dist/node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js (2995:0)
eval
node_modules/react-photo-sphere-viewer/dist/node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js (8299:0)
new Promise

TextureLoader.loadFile
node_modules/react-photo-sphere-viewer/dist/node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js (8297:0)
EquirectangularAdapter.__loadXMP
node_modules/react-photo-sphere-viewer/dist/node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js (3062:0)
EquirectangularAdapter.loadTexture
node_modules/react-photo-sphere-viewer/dist/node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js (2994:0)
Viewer.setPanorama
node_modules/react-photo-sphere-viewer/dist/node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js (9379:0)
new Viewer
node_modules/react-photo-sphere-viewer/dist/node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js (9097:0)
eval
node_modules/react-photo-sphere-viewer/dist/index.js (99:0)
commitHookEffectListMount
node_modules/react-dom/cjs/react-dom.development.js (23150:0)
commitPassiveMountOnFiber
node_modules/react-dom/cjs/react-dom.development.js (24926:0)
commitPassiveMountEffects_complete
node_modules/react-dom/cjs/react-dom.development.js (24891:0)
commitPassiveMountEffects_begin
node_modules/react-dom/cjs/react-dom.development.js (24878:0)
commitPassiveMountEffects
node_modules/react-dom/cjs/react-dom.development.js (24866:0)
flushPassiveEffectsImpl
node_modules/react-dom/cjs/react-dom.development.js (27039:0)
flushPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js (26984:0)
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js (26935:0)
commitRoot
node_modules/react-dom/cjs/react-dom.development.js (26682:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (26117:0)
flushSyncCallbacks
node_modules/react-dom/cjs/react-dom.development.js (12042:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (25651:0)

What should have happened?

Should have show the multiple photospheres

Code

No response

Sandbox Link

No response

Library Version

latest

What operating system are you using?

macOS

What browser are you using?

Chrome

Logs

No response

Interest to fix the bug

• I would like to fix this bug!

What are you trying to do?

Hi I'm using the react photosphere multiple times on the same page, i have a main photosphere that it's visible all of the time and some other photoshpere containers visible on expanded table rows in an overlay. If i create to many rows in table with photosphere elements > 8 the browser just crash. I have tried to use the destroy() method in order to free the memory on table row unexpanding method - so my table will display only one photosphere on the row at the time, and then in total will be rendered only 2 photospheres on the same page. But the problem which i encounter is that the destroy() method is killing also the main photosphere which should be visible all of the time.

I will attach a snippet with the code that it's called before toggling the expanding of the rows in the table and where the destroy method it's called.

How can i perform the cleanup of tree.js photoshpere only on the specific element without destroying all other instances of photosphere views?

Code

                onExpandedClick: (index: number) => { 
                    if (scene.isExpanded) {
                        const currentRef = ((scenesRef.current[i]) as any).current as any;
                        currentRef.destroy();
                    }
                    toggleFlagInSceneState(index, "isExpanded");
                },

Sandbox Link

No response

Library Version

3.4.0-psv5.4.0

What operating system are you using?

macOS

What browser are you using?

Firefox

Logs

No response

First off, thank you for putting this library together!!

I need the photo sphere to be reactive to the src url so I can easily change the displayed image. Here is the basic code

export const PhotoSphereViewer: FC<{ src: string }> = ({
  src,
}) => {
  const ref = useRef(null)

  useUpdateEffect(() => {
    // The library does not propagate updates to the URL, so update it if src changes.
    ref.current?.setPanorama(src).then(
      v => console.log('success', v),
      v => console.log('error', v)
    )
  }, [src])

  return <ReactPhotoSphereViewer ref={ref} src={src} />
}

If strict mode is off, this works perfectly. If strict mode is on, the viewer does not update but I observe 'success' in the console, indicating that the underlying viewer updated the view.

Strict mode mounts components twice, and that seems to cause two viewers to be created (this line runs twice).

I can see two viewers in the page markup.

What are you trying to do?

I am trying to figure out why multiple bundles of three js are being included in the build and I think I was able to track it down to a version mismatch in the peer dependencies of https://github.com/Elius94/psv-lens-flare-plugin.

I was wondering if you had some approaches to fix this, other than just keeping all the three versions the same

Code

No response

Sandbox Link

No response

Library Version

latest

What operating system are you using?

Windows

What browser are you using?

Chrome

Logs

No response

request full screen doesnt seem to work on safari. image is shown only in small size in top left corner. any fix?

What do you want?

Is there any way to custom the hover title of littlePlanet button:

Why do you want it?

use origin lang parameters to custom the title

How do you implement it?

No response

Are you interested in developing this feature?

• Yes, I am interested in developing this feature
• No, I am not interested in developing this feature

What do you want?

First of all, Thank you very much for this great plugin. This is very well developed and has a lot of features.

However it might be a nice to have a drag and drop feature for markers, and maybe a drop event on the viewer.

Why do you want it?

It would be great to be able to drag and drop points in the viewer from outside also maybe change marker position after placing.

How do you implement it?

Only the event information would be great i believe, everything else is already setup.

Just need yaw and pitch value once an item is dropped on the viewer.
For markers it would be great if they are draggable and share event data once drag starts and once it ends.

I selected yes, i am interested, however I might need help from you to understand how things are working right now if you want me to develop the feature.

Are you interested in developing this feature?

• Yes, I am interested in developing this feature
• No, I am not interested in developing this feature

Hi i was following the Readme and got the error when trying to use createRef.
The error description is shown in the image below:

How to fix that?

What happened?

I just using your library on Nextjs 14 app router project, I already follow the instructions about the setup, and it's pretty easy and clear, then I got this error

Attempted import error: './node_modules/eventemitter3/index.js' does not contain a default export (imported as 'EventEmitter').

What should have happened?

The error should not be shown, because it's from eventemitter3, which I don't know what that is yet.

Code

No response

Sandbox Link

No response

Library Version

^4.0.2-psv5.4.4

What operating system are you using?

Windows

What browser are you using?

Edge

Logs

Attempted import error: './node_modules/eventemitter3/index.js' does not contain a default export (imported as 'EventEmitter').```

### Interest to fix the bug

- [ ] I would like to fix this bug!

What are you trying to do?

Hi,

I am developing an web application using this library and the Virtual Tour Plugin, but I have not been able to customize the 3D arrow models and give specific values to their vertical position. Can you provide information on how I can do this?

Best Regards

Library Version

3.4.0-psv5.4.0

What operating system are you using?

macOS

What browser are you using?

Chrome

instance.getPlugin('MarkersPlugin') return undefined.

`import { useRef } from 'react';
import dynamic from 'next/dynamic';
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
import { Viewer } from '@photo-sphere-viewer/core';
const ReactPhotoSphereViewer = dynamic(
() =>
import('react-photo-sphere-viewer').then(
(mod) => mod.ReactPhotoSphereViewer
),
{
ssr: false,
}
);
const PanoramaModule = () => {
const photoSphereRef = useRef(null);
const handleReady = (instance: Viewer) => {
const markersPlugs: MarkersPlugin = instance.getPlugin('MarkersPlugin');
console.log(markersPlugs);
if (!markersPlugs) return;
console.log(markersPlugs); // instance.getPlugin('MarkersPlugin') return undefined.
markersPlugs.addMarker({
id: 'imageLayer2',
imageLayer: 'https://photo-sphere-viewer-data.netlify.app/assets/pictos/target.png',
size: { width: 220, height: 220 },
position: { yaw: '130.5deg', pitch: '-0.1deg' },
tooltip: 'Image embedded in the scene'
});
markersPlugs.addEventListener('select-marker', () => {
console.log('asd');
});
};

if (!MarkersPlugin) {
return null;
}
console.log(MarkersPlugin);

photoSphereRef?.current?.animate({
latitude: 0,
longitude: 0,
zoom: 55,
speed: '10rpm',
});

return (

export default PanoramaModule;
`

PACKAGE JSON:

"dependencies": {
"@googlemaps/js-api-loader": "~1.14.3",
"@liebherr/patternlib": "~2.4.0",
"@photo-sphere-viewer/core": "^5.0.1",
"@photo-sphere-viewer/markers-plugin": "^5.0.1",
"@react-google-maps/api": "~2.13.1",
"axios": "~0.27.2",
"mobx": "~6.6.2",
"mobx-react-lite": "~3.4.0",
"next": "~12.3.1",
"pure-react-carousel": "~1.29.0",
"react": "~18.2.0",
"react-compare-image": "~3.1.0",
"react-dom": "~18.2.0",
"react-photo-sphere-viewer": "^3.1.0-psv5.0.1",
"react-slick": "^0.29.0",
"react-swipeable": "~7.0.0"
},

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!

What are you trying to do?

I can't get it to work in Next.js. Please help!

Code

import dynamic from 'next/dynamic';
import Image from 'next/image';
import Test_Pano from '../public/Test_Pano.jpg';
const ReactPhotoSphereViewer = dynamic(
  () =>
    import('react-photo-sphere-viewer').then(
      (mod) => mod.ReactPhotoSphereViewer
    ),
  {
    ssr: false,
  }
);
const Test = () => {
  return (
    <div className="p-10 h-screen">
      <h1 className="text-5xl text-center mb-5">
        TEST - REACT PHOTO SPHERE VIEWER
      </h1>
      {/* 👇 Image loads okay */}
      <Image
        src={Test_Pano}
        width={500}
        alt="360!!"
      />
      {/* ❌👇 panorama can't be loaded error  */}
      <ReactPhotoSphereViewer
        src={Test_Pano.src}
        height={'100%'}
        width={'100%'}
        container={'viewer'}
      ></ReactPhotoSphereViewer>
    </div>
  );
};

export default Test;

Sandbox Link

No response

Library Version

"next": "^13.4.12",
"react-photo-sphere-viewer": "^3.4.0-psv5.4.0"

What operating system are you using?

macOS

What browser are you using?

Firefox

Logs

What happened?

Integrating one instance of React Photo Sphere Viewer shows a console warning: "WARNING: Multiple instances of Three.js being imported". The issue occurs in the sandbox demo linked in the docs (which I have also provided in this report)

What should have happened?

I don't see why multiple instances should be imported, if this is a necessity could an explanation be added to the docs?

Code

No response

Sandbox Link

https://codesandbox.io/p/sandbox/react-photo-sphere-viewer-playground-zd8nt8?file=%2Fsrc%2FApp.js

Library Version

latest

What operating system are you using?

Windows

What browser are you using?

None

Logs

WARNING: Multiple instances of Three.js being imported.

Interest to fix the bug

• I would like to fix this bug!

Hi There,

Thanks for releasing this library. It has been a joy to work with so far!

One issue I ran into is this: the Gyroscope plugin (which supports mobile device orientation controls) does not seem to be working as expected. My app is building correctly, but the plugin is not visible or working on mobile.

Here is a minimal reproduction: https://codesandbox.io/s/react-photo-sphere-gyroscope-plugin-test-klupfk?file=/src/App.js

And here is my code:

import React from "react";
import {
  ReactPhotoSphereViewer,
  GyroscopePlugin
} from "react-photo-sphere-viewer";

function PhotoSphere() {
  const photoSphereRef = React.useRef();

  const plugins = [GyroscopePlugin];

  return (
    <div>
      <ReactPhotoSphereViewer
        ref={photoSphereRef}
        src={"./bourke-pano.jpg"}
        height={"60vh"}
        width={"100%"}
        plugins={plugins}
      ></ReactPhotoSphereViewer>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <PhotoSphere />
    </div>
  );
}

The gyroscope feature should be available on mobile, but doesn't seem to be.

Please let me know if I should be doing anything differently.

Thanks!

What happened?

Three.js changes how lighting worked which caused the 3d arrows to darken. This bug was addressed in the 5.3 release.
See the change log here: https://github.com/mistic100/Photo-Sphere-Viewer/releases/tag/5.3.0

However when utilizing react-photo-sphere-viewer on version 3.4.0-psv5.4.0 the lighting of the arrows is still dark.

What should have happened?

I expected the update to 3.4.0-psv5.4.0 to address the issue, but the code changes do not appear to be effective when using react-photo-sphere-viewer.

Code

Link to original bug report that was merged into 5.3: mistic100/Photo-Sphere-Viewer#1048

Sandbox Link

No response

Library Version

3.4.0-psv5.4.0

What operating system are you using?

macOS

What browser are you using?

Chrome

Logs

No response

Interest to fix the bug

• I would like to fix this bug!

What are you trying to do?

Hello,
I have a partial panoramic photo, but there are some dark areas at the back and top of the image. Can you advise me on what settings I should use to hide them?

Sandbox Link

https://codesandbox.io/s/partial-panorama-react-photo-sphere-viewer-z7f3mk?file=/src/App.js

Library Version

3.3.3-psv5.1.1

What operating system are you using?

Windows

Thank you!

I added this line in my code:

import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";

and when i run my react app i got the following error message:

`import React, { forwardRef, createRef, useState, useEffect, useImperativeHandle } from 'react';
^^^^^

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
`

Using React version 16.9. Server-side rendering.

Thanks

What happened?

I'm trying to make it run using NextJs 14 + Typescript but none of the documented ways works.

What should have happened?

Following the NextJs documentation in the README should be enough to make it work

Code

No response

Sandbox Link

No response

Library Version

latest

What operating system are you using?

Ubuntu

What browser are you using?

Chrome

Logs

 ⨯ ./src/components/MdxComponents/PanoramaViewer/PanoramaViewer.tsx:6:4
Module not found: Can't resolve 'react-photo-sphere-viewer'
  4 | const ReactPhotoSphereViewer = dynamic(
  5 |   () =>
> 6 |     import('react-photo-sphere-viewer').then(
    |    ^
  7 |       (mod) => mod.ReactPhotoSphereViewer,
  8 |     ),
  9 |   {

https://nextjs.org/docs/messages/module-not-found

Interest to fix the bug

• I would like to fix this bug!

Description

First, thanks a lot for this lib. 🤘 I'm a big user of the original library by @mistic100, building on next.js with it.
I recently found your fork, and I was more than happy to see a react implementation. But unfortunately, I can't import it on next.js framework => SyntaxError: Cannot use import statement outside a module.

Context

From a fresh nextjs 13 + TypeScript install, using this implementation :

1. npx create-next-app@latest --ts test
2. cd test
3. npm i react-photo-sphere-viewer --save
4. Add the library in index.jsx :

• src/pages/index.tsx

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';
import { useRef } from 'react';

export default function Home() {
  const photoSphereRef: any = useRef();

  const handleClick = () => {
    photoSphereRef.current.animate({
      latitude: 0,
      longitude: 0,
      zoom: 55,
      speed: '10rpm',
    });
  };

  return (
    <div className="App">
      <ReactPhotoSphereViewer
        ref={photoSphereRef}
        src="Test_Pano.jpg"
        height={'100vh'}
        width={'100%'}
        onClick={handleClick}
      ></ReactPhotoSphereViewer>
    </div>
  );
}

• tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

6. npm run dev
7. Throwing error: SyntaxError: Cannot use import statement outside a module :
   

• Full error:

error - /home/mkubik/dev/10.labs/test/node_modules/react-photo-sphere-viewer/dist/index.js:1
import React, { forwardRef, createRef, useState, useEffect, useImperativeHandle } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module      
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1027:15)     
    at Module._compile (node:internal/modules/cjs/loader:1063:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)   
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)    at require (node:internal/modules/cjs/helpers:102:18)      
    at Object.react-photo-sphere-viewer (/home/mkubik/dev/10.labs/test/.next/server/pages/index.js:42:18)
    at __webpack_require__ (/home/mkubik/dev/10.labs/test/.next/server/webpack-runtime.js:33:42) {
  page: '/'
}

What I tried

• Everything from here

• Next.js Dynamic import:

// import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';

const ReactPhotoSphereViewer = dynamic(
  () => import('react-photo-sphere-viewer'),
  {
    ssr: false,
  }
);

But a new error appears:

• I also tried to add it like above (## Context) but with VanillaJS Next.js install, same results.
• Also tried next.js 12, same results.

Problems

I'm not sure of the problem here, but if I achieve to find it, I'll open a PR to fix it. I forked and will check ASAP.

Again, this lib wrapper is a super idea, thanks a lot! 🚀

here is the code
and i expected that i could have console.log('asd') but it does not work

import './App.css';
// import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';
import React from 'react';
import logo from './[email protected]';
// import { Viewer } from "photo-sphere-viewer";

import { useEffect } from "react" 

import { ReactPhotoSphereViewer, CompassPlugin, MarkersPlugin } from 'react-photo-sphere-viewer';

function App() {
  const [markersManager, setMarkerManager] = React.useState();
  const photoSphereRef = React.useCallback((node) => {
    console.log(node)
    const markersPlugs = node?.getPlugin(MarkersPlugin);
    setMarkerManager(markersPlugs);
  }, []);
  
  const plugins = [
    [CompassPlugin, {
      hotspots: [
        { longitude: '0deg' },
        { longitude: '90deg' },
        { longitude: '180deg' },
        { longitude: '270deg' },
      ],
    }],
    [MarkersPlugin, {
      markers: [
        {
          id: 'pin',
          longitude: 0.11,
          latitude: 0.32,
          image: 'https://photo-sphere-viewer-data.netlify.app/assets/pictos/pin-blue.png',
          width: 32,
          height: 32,
          anchor: 'bottom center',
          data : { compass: '#304ACC' },
        },
        {
          id: 'polygon',
          polygonPx: [2941, 1413, 3042, 1402, 3222, 1419, 3433, 1463, 3480, 1505, 3438, 1538, 3241, 1543, 3041, 1555, 2854, 1559, 2739, 1516, 2775, 1469, 2941, 1413 ],
          svgStyle : {
            fill       : 'rgba(255,0,0,0.2)',
            stroke     : 'rgba(255, 0, 50, 0.8)',
            strokeWidth: '2px',
          },
          data: { compass: 'rgba(255, 0, 50, 0.8)' },
        },
        {
          id: 'polyline',
          polylinePx: [2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301, 1519, 94, 1399, 34, 1356],
          svgStyle: {
            stroke        : 'rgba(80, 150, 50, 0.8)',
            strokeLinecap : 'round',
            strokeLinejoin: 'round',
            strokeWidth   : '20px',
          },
          data: { compass: 'rgba(80, 150, 50, 0.8)' },
        },
      ],
    }],
  ]

  const handleClick = (data: ClickData) => {
    console.log(photoSphereRef.current)

  }

  React.useEffect(() => {
    if (markersManager) {
      console.log(markersManager);
      markersManager.on('select-marker', (e, marker, data) => {
        console.log('asd')
      });
      markersManager.on('over-marker', (e, marker) => {
        console.log(`Cursor is over marker ${marker.id}`);
      });
    }
  }, [markersManager]);
  return (
    <div className="App">
      <ReactPhotoSphereViewer ref={photoSphereRef} src={logo} plugins={plugins} height={'100vh'} width={"100%"} onClick={handleClick}></ReactPhotoSphereViewer>
    </div>
  );
}

export default App;

What happened?

When I am trying to open ReactPhotoSphereViewer and starts loading the image it gives CORS error.

What should have happened?

It should have rendered the image without giving any error.

Code

Access to fetch at 'https://example.com/2354534534534' from origin 'https://example2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Sandbox Link

No response

Library Version

react-photo-sphere-viewer :- 4.2.1-psv5.6.0

What operating system are you using?

macOS

What browser are you using?

Chrome

Logs

TypeError: Failed to fetch
at n.value (three.module.js:34349:1)
at index.module.js:9192:1
at new Promise ()
at n.value (index.module.js:9188:1)
at n. (index.module.js:3947:1)
at u (index.module.js:52:1)
at Generator. (index.module.js:150:1)
at Generator.next (index.module.js:83:1)
at BP (index.module.js:364:1)
at o (index.module.js:386:9)
o @ index.module.js:9773
(anonymous) @ index.module.js:9828
Promise.then (async)
value @ index.module.js:9825
n @ index.module.js:9522
(anonymous) @ index.js:144
uu @ react-dom.production.min.js:5142
Ss @ react-dom.production.min.js:6494
t.unstable_runWithPriority @ scheduler.production.min.js:309
Yo @ react-dom.production.min.js:2816
Es @ react-dom.production.min.js:6474
ls @ react-dom.production.min.js:5870
(anonymous) @ react-dom.production.min.js:2851
t.unstable_runWithPriority @ scheduler.production.min.js:309
Yo @ react-dom.production.min.js:2816
Ko @ react-dom.production.min.js:2846
Qo @ react-dom.production.min.js:2836
(anonymous) @ react-dom.production.min.js:5910
L @ react-dom.production.min.js:7270
(anonymous) @ react-dom.production.min.js:1323
Show 19 more frames
Show less
three.module.js:34349

   Uncaught (in promise) TypeError: Failed to fetch
at n.value (three.module.js:34349:1)
at index.module.js:9192:1
at new Promise (<anonymous>)
at n.value (index.module.js:9188:1)
at n.<anonymous> (index.module.js:3947:1)
at u (index.module.js:52:1)
at Generator.<anonymous> (index.module.js:150:1)
at Generator.next (index.module.js:83:1)
at BP (index.module.js:364:1)
at o (index.module.js:386:9)

Interest to fix the bug

• I would like to fix this bug!

What happened?

on the photo-sphere-viewer docs, under the virtualTour plugin, there's a method called getCurrentNode which is supposed to return the current node. I used this in react-photo-sphere-viewer after getting an instance of the virtualTour plugin and got an error. I have attached an Image containing the error

What should have happened?

return current node

Code

// create an instance of the plugins
const handleReady = (instance) => {
// marker plugin intance
const markersPluginInstance = instance.getPlugin(MarkersPlugin);

// virtualTour plugin instance
const virtualTourPluginInstance = instance.getPlugin(VirtualTourPlugin);

virtualTourPluginInstance.setNodes(vtplg)
const recNode = virtualTourPluginInstance.getCurrentNode()
console.log(recNode);

if (markerPlug) {
  markerPlug.addEventListener("select-marker", () => {
    console.log("marker clicked");
  });
}

};

Sandbox Link

No response

Library Version

"^3.4.0-psv5.4.0"

What operating system are you using?

macOS

What browser are you using?

Chrome

Logs

No response

Interest to fix the bug

• I would like to fix this bug!

Nice work on this! I was actually going down the same path of trying to get PSV working nicely in React and just happened to find this because I had coincidentally named a repo with the same name.

I'm not sure if this is implemented, but how would you go about using an adapter or plugin. Like the compass plugin? I see that there is a plugins prop but not sure what your preferred method would be for bringing in CompassPlugin. Thanks!

What are you trying to do?

Hi, i want to use EquirectangularTilesAdapter with react-photo-sphere-viewer.
i've tried to follow the example in js : https://codesandbox.io/s/srpidc
But when i try in react, its doesn't work and show me an error.
can you help me to understand what is wrong in my react version ?

Code

No response

Sandbox Link

JS Example : https://codesandbox.io/s/srpidc
React version not working: https://codesandbox.io/s/friendly-alex-w1t43m?file=/src/App.js

Library Version

latest

What operating system are you using?

Windows

What browser are you using?

None

Logs

PSVError
An undefined value was given for adapter.

Hello. Thank you for providing such a good module.

I'm using the littleplanet props, but if I don't click it when I start, I can't zoom in with scroll or initialize it. Maybe it's meant to be?

  <ReactPhotoSphereViewer
    ref={pSRef}
    src={img}
    height={'100vh'}
    width={'100%'}
    onClick={handleClick}
    onReady={handleReady}
    plugins={plugins}
    defaultZoomLvl={50}
    container={''}
    littlePlanet
    minFov={-100}
    maxFov={50}
    defaultPitch={0}
  />

What happened?

Hello, thanks for the project.

Trying to use any of the plugins with Nextjs 13 gives this Syntaxerror.

What should have happened?

Should be able to use plugins without getting the error.

Code

import dynamic from "next/dynamic";
import Head from "next/head";
import { createRef } from "react";
import { MarkersPlugin } from "react-photo-sphere-viewer";

const ReactPhotoSphereViewer = dynamic(
  () => import("react-photo-sphere-viewer").then((mod) => mod.ReactPhotoSphereViewer),
  {
    ssr: false,
  }
);

const handleClick = (data: any & { type: "click" }) => {
  console.log(data);
};

export default function Home() {
  const pSRef = createRef();

  const handleReady = (instance: any) => {
    const markersPlugs = instance.getPlugin(MarkersPlugin);
    if (!markersPlugs) return;
    console.log(markersPlugs);
    markersPlugs.addMarker({
      id: "imageLayer2",
      imageLayer: "test.png",
      size: { width: 220, height: 220 },
      position: { yaw: "130.5deg", pitch: "-0.1deg" },
      tooltip: "Image embedded in the scene",
    });
    markersPlugs.addEventListener("select-marker", () => {
      console.log("asd");
    });
  };

  const plugins = [
    [
      MarkersPlugin,
      {
        // list of markers
        markers: [
          {
            // image marker that opens the panel when clicked
            id: "image",
            position: { yaw: "0.33deg", pitch: "0.1deg" },
            image: "pin-blue.png",
            anchor: "bottom center",
            size: { width: 32, height: 32 },
            tooltip: "Mountain peak. <b>Click me!</b>",
          },
          {
            // image marker rendered in the 3D scene
            id: "imageLayer",
            imageLayer: "drone.png",
            size: { width: 220, height: 220 },
            position: { yaw: "13.5deg", pitch: "-0.1deg" },
            tooltip: "Image embedded in the scene",
          },
        ],
      },
    ],
  ];

  return (
    <>
      <Head>
        <title>Virtual tour</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <ReactPhotoSphereViewer
        ref={pSRef}
        src="test.jpg"
        height={"100vh"}
        width={"100%"}
        littlePlanet={false}
        onReady={handleReady}
        onClick={handleClick}
        plugins={plugins as any}
        container="main"
      ></ReactPhotoSphereViewer>
    </>
  );
}

Sandbox Link

https://codesandbox.io/p/sandbox/autumn-forest-0ugkzs?file=%2Fnext.config.js&selection=%5B%7B%22endColumn%22%3A2%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A2%2C%22startLineNumber%22%3A4%7D%5D

Library Version

latest

What operating system are you using?

Windows

What browser are you using?

Chrome

Logs

import { AutorotatePlugin } from './node_modules/@photo-sphere-viewer/autorotate-plugin/index.module.js';
         ^^^^^^^^^^^^^^^^
SyntaxError: Named export 'AutorotatePlugin' not found. The requested module './node_modules/@photo-sphere-viewer/autorotate-plugin/index.module.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from './node_modules/@photo-sphere-viewer/autorotate-plugin/index.module.js';
const { AutorotatePlugin } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  page: '/'
}

Interest to fix the bug

• I would like to fix this bug!

What are you trying to do?

I'm tryng to use the example provided by the offical guide, but it's not working, it shows me blank screen with a label "loading" in white colored. I think there is a problem related to the src prop required in the component.
What SRC should I provide? There is an other way to do it?

[https://photo-sphere-viewer.js.org/plugins/virtual-tour.html#example](URL TO EXAMPLE SOURCE CODE)

Code

import React, { useEffect, useState } from 'react';
import AppLayout from '@/Layouts/AppLayout';
import useTypedPage from '@/Hooks/useTypedPage';
import GraphicLayout from '@/Layouts/GraphicLayout';

import {
ReactPhotoSphereViewer,
MarkersPlugin,
VirtualTourPlugin,
} from 'react-photo-sphere-viewer';
import Utils from '../../../services/utils';

export default function MainView() {
const page = useTypedPage();

const pSRef = React.createRef();

const plugins = [
[
VirtualTourPlugin,
{
positionMode: 'gps',
renderMode: '3d',
},
],
];

const handleReady = instance => {
const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const caption = 'Cape Florida Light, Key Biscayne © Pixexid';

const virtualTour = instance.getPlugin(VirtualTourPlugin);

const markerLighthouse = {
  id: 'marker-1',
  image: baseUrl + 'pictos/pin-red.png',
  tooltip: 'Cape Florida Light, Key Biscayne',
  size: { width: 32, height: 32 },
  anchor: 'bottom center',
  gps: [-80.155973, 25.666601, 3],
};

virtualTour.setNodes(
  [
    {
      id: '1',
      panorama: baseUrl + 'tour/key-biscayne-1.jpg',
      thumbnail: baseUrl + 'tour/key-biscayne-1-thumb.jpg',
      name: 'One',
      caption: `[1] ${caption}`,
      links: [{ nodeId: '2' }],
      markers: [markerLighthouse],
      gps: [-80.156479, 25.666725, 3],
      panoData: { poseHeading: 180 },
    },
    {
      id: '2',
      panorama: baseUrl + 'tour/key-biscayne-2.jpg',
      thumbnail: baseUrl + 'tour/key-biscayne-2-thumb.jpg',
      name: 'Two',
      caption: `[2] ${caption}`,
      links: [{ nodeId: '3' }, { nodeId: '1' }],
      markers: [markerLighthouse],
      gps: [-80.156168, 25.666623, 3],
      panoData: { poseHeading: 318 },
    },
    {
      id: '3',
      panorama: baseUrl + 'tour/key-biscayne-3.jpg',
      thumbnail: baseUrl + 'tour/key-biscayne-3-thumb.jpg',
      name: 'Three',
      caption: `[3] ${caption}`,
      links: [{ nodeId: '4' }, { nodeId: '2' }, { nodeId: '5' }],
      gps: [-80.155932, 25.666498, 5],
      panoData: { poseHeading: 310 },
    },
    {
      id: '4',
      panorama: baseUrl + 'tour/key-biscayne-4.jpg',
      thumbnail: baseUrl + 'tour/key-biscayne-4-thumb.jpg',
      name: 'Four',
      caption: `[4] ${caption}`,
      links: [{ nodeId: '3' }, { nodeId: '5' }],
      gps: [-80.156089, 25.666357, 3],
      panoData: { poseHeading: 78 },
    },
    {
      id: '5',
      panorama: baseUrl + 'tour/key-biscayne-5.jpg',
      thumbnail: baseUrl + 'tour/key-biscayne-5-thumb.jpg',
      name: 'Five',
      caption: `[5] ${caption}`,
      links: [{ nodeId: '6' }, { nodeId: '3' }, { nodeId: '4' }],
      gps: [-80.156292, 25.666446, 2],
      panoData: { poseHeading: 190 },
    },
    {
      id: '6',
      panorama: baseUrl + 'tour/key-biscayne-6.jpg',
      thumbnail: baseUrl + 'tour/key-biscayne-6-thumb.jpg',
      name: 'Six',
      caption: `[6] ${caption}`,
      links: [{ nodeId: '5' }, { nodeId: '7' }],
      gps: [-80.156465, 25.666496, 2],
      panoData: { poseHeading: 295 },
    },
    {
      id: '7',
      panorama: baseUrl + 'tour/key-biscayne-7.jpg',
      thumbnail: baseUrl + 'tour/key-biscayne-7-thumb.jpg',
      name: 'Seven',
      caption: `[7] ${caption}`,
      links: [{ nodeId: '6' }],
      gps: [-80.15707, 25.6665, 3],
      panoData: { poseHeading: 250, posePitch: 3 },
    },
  ],
  '2',
);
if (!markersPlugs) return;

};

const handleClick = data => {
console.log(data);
};

return (
<AppLayout title={'Main Page'}>

<div
className={'col-span-1 sm:col-span-4 md:col-span-12 my-auto py-24 '}
id={'container-360'}
>
{plugins && (
<ReactPhotoSphereViewer
ref={pSRef}
height={'700px'}
width={'100%'}
littlePlanet={false}
onClick={handleClick}
onReady={handleReady}
plugins={plugins}
container={'container-360'}
>
)}



);
}

Sandbox Link

No response

Library Version

latest

What operating system are you using?

Windows

What browser are you using?

Chrome

Logs

No response

What do you want?

Update the readme examples in order to work with nextjs 13/14, with page and app router.

Why do you want it?

Because users struggle to implement it, eg #51

How do you implement it?

No response

Are you interested in developing this feature?

• Yes, I am interested in developing this feature
• No, I am not interested in developing this feature

What happened?

The error continues to occur in Next.js 14.

What should have happened?

A bug happened!

Code

No response

Sandbox Link

No response

Library Version

4.2.1-psv5.6.0

What operating system are you using?

Windows

What browser are you using?

None

Logs

No response

Interest to fix the bug

• I would like to fix this bug!

What do you want?

When the Photo Sphere Window opens , it should also have close window icon. So, that user can close the window.

Why do you want it?

I am integrating this with my application.But when the Photo Sphere Window opens up it does not have close icon.

How do you implement it?

Just Add close window icon in top right corner.

Are you interested in developing this feature?

• Yes, I am interested in developing this feature
• No, I am not interested in developing this feature

What are you trying to do?

Hi, thanks for this great project! it seems like changing the src property does not reload the 360 image.

<ReactPhotoSphereViewer
        src={url}
        height={"100vh"}
        width={"100%"}
        littlePlanet={false}
      ></ReactPhotoSphereViewer>

Code

No response

Sandbox Link

https://codesandbox.io/s/sandbox-react-photo-sphere-viewer-by-elius94-j064sm?file=/src/App.js

Library Version

Latest

What operating system are you using?

macOS

What browser are you using?

Chrome

Logs

No response

What are you trying to do?

in VirtualTourPlugin ,i change the nodes's panorama from string to object. i want VirtualTourPlugin support tiles.

Code

No response

Sandbox Link

No response

Library Version

lasted

What operating system are you using?

Windows

What browser are you using?

None

Logs

No response

It seems like the example app included in the repo is not working.

To reproduce:

cd .\example\
npm install
npm start

Results in:

I also tried modifying the package.json to use the published package from the registry instead of the symbolic link to the local one, but the error still comes up.

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "prop-types": "^15.5.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-photo-sphere-viewer": "^2.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

What happened?

Hello, when changing the screen by setPanorama() fade-in effect does not work. After I changed the screen, it wait for a time and then opens the new screen suddenly.
I don't know if it is my bad but I follow the original documentation, I also create an issue for the original library, and the author said it suppose to work.
Is there any solution or working example?
Thank you!

What should have happened?

The fade-in effect should be shown.

Code

export function loadPanorama(psvRef, pano) {
 psvRef.current.setPanorama(pano, {
    panoData: panoData,
  });
}

Version

react-photo-sphere-viewer 3.3.3-psv5.1.1.

What are you trying to do?

Hello,

I'm trying to use the VirtualTourPlugin, but I can't get the navigation working.

As you can see in the sandbox, the navigation arrows/markers appear but it doesn't navigate to the next node/panorama.

Code

import dynamic from "next/dynamic";
import Head from "next/head";
import { createRef } from "react";
import {
  GalleryPlugin,
  MarkersPlugin,
  VirtualTourPlugin,
} from "react-photo-sphere-viewer/dist/index";

const ReactPhotoSphereViewer = dynamic(
  () =>
    import("react-photo-sphere-viewer").then(
      (mod) => mod.ReactPhotoSphereViewer
    ),
  {
    ssr: false,
  }
);

export default function Home() {
  const pSRef = createRef();

  const plugins = [
    [
      VirtualTourPlugin,
      {
        nodes: [
          {
            id: "node-2",
            panorama: "test.jpg",
            name: "tahe1",
            links: [
              {
                nodeId: "node-2",
                position: { textureX: 1500, textureY: 780 },
              },
            ],
          },
          {
            id: "node-3",
            panorama: "test.jpg",
            name: "tahe2",
            links: [
              {
                nodeId: "node-2",
                position: { textureX: 1500, textureY: 1000 },
              },
            ],
          },
        ],
      },
    ],
    [
      GalleryPlugin,
      {
        thumbnailSize: { width: 100, height: 100 },
      },
    ],
  ];

  return (
    <>
      <Head>
        <title>Virtual tour</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <ReactPhotoSphereViewer
        ref={pSRef}
        src="test.jpg"
        height={"100vh"}
        width={"100%"}
        plugins={plugins as any}
        container="main"
      ></ReactPhotoSphereViewer>
    </>
  );
}

Sandbox Link

https://codesandbox.io/p/sandbox/stupefied-bartik-yun73x

Library Version

latest

What operating system are you using?

Windows

What browser are you using?

None

Logs

No response

error - /Users/parikh/dev/MVCweb/node_modules/react-photo-sphere-viewer/dist/index.js:1
import React, { forwardRef, createRef, useState, useEffect, useImperativeHandle } from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:360:18) at wrapSafe (node:internal/modules/cjs/loader:1055:15) at Module._compile (node:internal/modules/cjs/loader:1090:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10) at Module.load (node:internal/modules/cjs/loader:1004:32) at Function.Module._load (node:internal/modules/cjs/loader:839:12) at Module.require (node:internal/modules/cjs/loader:1028:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.react-photo-sphere-viewer (/Users/parikh/dev/MVCweb/.next/server/pages/test.js:98:18) at __webpack_require__ (/Users/parikh/dev/MVCweb/.next/server/webpack-runtime.js:33:42) { page: '/test' }

As official doc says, first need to get markPlugin, but useRef.current can't getPlugin

const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);

how to getPlugin and use methods in react-photo-sphere-viewer?

What are you trying to do?

Hello again

In the main library we forked, we customized the 3D arrow and put our own model and it worked very well. After forking the main library and putting our own 3d arrow, we want to use the arrow we customized through this React library. How can we give a path to the library we forked in this library.

Library Version

3.4.0-psv5.4.0

What operating system are you using?

macOS

What browser are you using?

Chrome

What happened?

Trying to run library in test react app as described in example and it doesn't render anything.
These are the dependencies versions that I use:
"react": "^18.2.0", "react-dom": "^18.2.0", "react-photo-sphere-viewer": "^4.2.1-psv5.6.0",
Getting the following error:

WARNING in ./node_modules/react-photo-sphere-viewer/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/.../photo-share-test/node_modules/react-photo-sphere-viewer/src/index.tsx' file: Error: ENOENT: no such file or directory, open '/home/.../photo-share-test/node_modules/react-photo-sphere-viewer/src/index.tsx'

Same error appears when I use .js or .tsx files in two separate projects.

What should have happened?

Must render panorama.

Code

import './App.css';

function App() {
  return (
    <div className="App">
          <ReactPhotoSphereViewer src="./pano_1.jpg" height={'100vh'} width={"100%"}></ReactPhotoSphereViewer>
    </div>
  );
}

export default App;```

### Sandbox Link

_No response_

### Library Version

latest

### What operating system are you using?

Ubuntu

### What browser are you using?

Chrome

### Logs

_No response_

### Interest to fix the bug

- [ ] I would like to fix this bug!

`import { __assign, __spreadArray } from './node_modules/tslib/tslib.es6.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1032:15)
at Module._compile (node:internal/modules/cjs/loader:1067:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)`

I get the above error in a Nextjs project.

What are you trying to do?

Trying to use this with an Equirectangular video. I had issues with PhotoSphereViewer directly, so I found this package.

Am I missing something for using it? Adding src to the component keep resulting in "Invalid panorama configuration, are you using the right adapter?"

Code

<ReactPhotoSphereViewer
  height="500px"
  width="100%"
  plugins={[[VideoPlugin]]}
  adapter={[EquirectangularVideoAdapter]}
  panorama={{
  source:
                    "my mp4 video url set by state",
  }}
  keyboardActions={true}
  keyboard={true}
></ReactPhotoSphereViewer>

Sandbox Link

No response

Library Version

^3.3.5-psv5.1.4

What operating system are you using?

macOS

What browser are you using?

Chrome

Logs

No response

import "./styles.css";
import {
  ReactPhotoSphereViewer,
  MarkersPlugin
} from "react-photo-sphere-viewer";
import React from "react";

function App() {
  //const photoSphereRef = React.createRef();
  const [markersManager, setMarkerManager] = React.useState();
  const pSRef = React.useCallback((node) => {
    const markersPlugs = node?.getPlugin(MarkersPlugin);
    setMarkerManager(markersPlugs);
  }, []);

  React.useEffect(() => {
    if (markersManager) {
      console.log(markersManager);
    }
  }, [markersManager]);

  const plugins = [
    [
      MarkersPlugin,
      {
        // list of markers
        markers: [
          {
            // image marker that opens the panel when clicked
            id: "image",
            longitude: 0.33,
            latitude: 0.1,
            image: "pin-blue.png",
            width: 32,
            height: 32,
            anchor: "bottom center",
            tooltip: "Mountain peak. <b>Click me!</b>"
          },
          {
            // image marker rendered in the 3D scene
            id: "imageLayer",
            imageLayer: "drone.png",
            width: 220,
            height: 220,
            longitude: 13.5,
            latitude: -0.1,
            tooltip: "Image embedded in the scene"
          }
        ]
      }
    ]
  ];

  const handleClick = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <ReactPhotoSphereViewer
        ref={pSRef}
        src="Test_Pano.jpg"
        height={"100vh"}
        width={"100%"}
        littlePlanet={false}
        onClick={handleClick}
        plugins={plugins}
      ></ReactPhotoSphereViewer>
    </div>
  );
}

export default App;

It's currently difficult to manage the marker plugins methods.