Added onPositionChange Feature

markpenaranda · Mar 10, 2020 · 68f83fc · 68f83fc
1 parent ea3d33b
commit 68f83fc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/example/src/App.js b/example/src/App.js
@@ -6,7 +6,7 @@ export default class App extends Component {
   render () {
     return (
       <div>
-        <ReactPhotoSphereViewer height="500" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQNfXFNW1ti-GCNgWuc6rFhdtClHTpnxsx3pd9LYBMyUN_wJXt2"/>
+        <ReactPhotoSphereViewer height="500" timeAnim={false} src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQNfXFNW1ti-GCNgWuc6rFhdtClHTpnxsx3pd9LYBMyUN_wJXt2"/>
       </div>
     )
   }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-photosphere",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Photosphere Viewer for React.JS",
   "author": "markpenaranda",
   "license": "MIT",

diff --git a/src/index.tsx b/src/index.tsx
@@ -12,7 +12,8 @@ export interface Props {
   navbar?: string[];
   height: number;
   width?: number;
-
+  timeAnim: number | boolean;
+  onPositionChange?(lat: number , lng: number): any;
 }
 
 const defaultNavbar = [
@@ -21,24 +22,33 @@ const defaultNavbar = [
   'fullscreen'
 ];
 
-export default function ReactPhotoSphereViewer ({ src, navbar, height, width }: Props): React.ReactElement {
+export default function ReactPhotoSphereViewer ({ src, navbar, height, width, timeAnim, onPositionChange }: Props): React.ReactElement {
   navbar = (navbar && navbar.length > 0) ? navbar : defaultNavbar;
   const sphereElementRef = React.createRef<HTMLDivElement>();
   React.useEffect(() => {
 
-      const shperePlayerInstance = PhotoSphereViewer({
+      const spherePlayerInstance = PhotoSphereViewer({
         container: sphereElementRef.current,
         panorama: src,
         size: {
           height,
           width
         },
-        navbar: navbar
+        navbar: navbar,
+        time_anim: timeAnim,
       });
 
+      spherePlayerInstance.on('position-updated', () => {
+
+        if(onPositionChange) {
+          const position = spherePlayerInstance.getPosition();
+          onPositionChange(position.lat, position.lng)
+        }
+
+      });
 
     return () => {
-      shperePlayerInstance.destroy();
+      spherePlayerInstance.destroy();
     };
   }, [src]);
   return (