{"_id":"@bandrews/pannellum-react","_rev":"2-8b40c69a5c5c897d324bf3cccd27dc32","name":"@bandrews/pannellum-react","dist-tags":{"latest":"1.2.3-alpha20201008"},"versions":{"1.2.3-alpha20200927":{"name":"@bandrews/pannellum-react","version":"1.2.3-alpha20200927","description":"Pannellum React Component, with Pannellum updated as of 2020-09-27","main":"lib/index.js","module":"es/index.js","scripts":{"build":"nwb build-react-component --copy-files","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","test":"nwb test-react","test:coverage":"nwb test-react --coverage","test:watch":"nwb test-react --server","deploy":"gh-pages -d demo/dist"},"dependencies":{"video.js":"^7.1.0"},"peerDependencies":{"react":"16.x"},"devDependencies":{"babel-eslint":"^10.0.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^5.8.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","gh-pages":"^1.2.0","nwb":"0.21.x","react":"^16.4.1","react-dom":"^16.4.1"},"author":{"name":"Ben Andrews","email":"bandrews@mofangheavyindustries.com"},"homepage":"https://github.com/bandrews/pannellum-react","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bandrews/pannellum-react.git"},"gitHead":"cd91004b5632c8f6bb71b26a1a665c869f2c6a6a","bugs":{"url":"https://github.com/bandrews/pannellum-react/issues"},"_id":"@bandrews/pannellum-react@1.2.3-alpha20200927","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-etXVj5aP1idhVEsA1R+/9IrfuGru5C8VKevUnQjtHn0rNu2G3ICKgaXk4/FIiW8VRejBwJ7kGjyEyCxL7LTnDA==","shasum":"6434485e0c9c83db3c4da5e290438c3a7692c5ff","tarball":"https://registry.npmjs.org/@bandrews/pannellum-react/-/pannellum-react-1.2.3-alpha20200927.tgz","fileCount":46,"unpackedSize":5903408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcTKKCRA9TVsSAnZWagAA0n0P/2oARAHgrc/rQdNeuWph\nEz8eqDbdAUwoIDytUpLggMz1nJfjXHNUKNp5cWeLZjYf8ynjBIFfE+d1J7KD\nPxBWu6Qy03t9Vr10mfaCO3CYZS4YUvLodedURktELuGC/GMWpEzTFxa6SBiX\n/ltNmeOP9NZAWfN16nUNbE6irOi4SHbH09wptNq6EnkjwD+9iCidjAT6WwpF\ny7Tl6Uwwkvruc0E28wW8tKkygnRQIx8OhmIvxmnZb3OJKIVa4mR+VHi+TQiu\n14Y3GFiyy/qr0sCm2amxXZPwPaZadoOyDlS8TwGpOq9Ozi2vbn8/N7Kxt6Qt\nnxW2InU1VOw+WHRlTtOESfPPys4MhwbSw/Ubbxo/YD44IA10e9MXw+3k9/I4\nARuqNKXeoiheOeirU44hN6K2camhShmNW99PTDUqyA6zoLo2J3Fzgqu6w4qZ\nJWfUfc58M08I4UdzYBafGxGyOyahYqkFQOIJ6WVoWBIYnjrYm5LhfbH5OaXl\nwucNz+8IJu7AMTzrH+PV/TIAeQG38l6IYtBryD5o7vdQSG1MFAsnG4IC5iuN\nCLwigfbXJVWfq4+NzHPX+aL1vnVlUewLF4bVRUSCbNqIi8YUH2V3Ar01Pkq0\n07sLec1an4E0nwt3Kw3L82X0p5gCKE2RLeMVL8gCmw6p+5DcQku9nQMn3YA2\nbgbb\r\n=ZhaW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbJCKTgL0VGJdp3NVgwonLnP4C2ITCtVLlekXD2rZaWgIgReSXxE+ipsINihJfuczz88hpEMJXqqd0Wi1hzhsTZKs="}]},"maintainers":[{"name":"bandrews","email":"bandrews@mofangheavyindustries.com"}],"_npmUser":{"name":"bandrews","email":"bandrews@mofangheavyindustries.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pannellum-react_1.2.3-alpha20200927_1601254025422_0.7001395412388303"},"_hasShrinkwrap":false},"1.2.3-alpha20201008":{"name":"@bandrews/pannellum-react","version":"1.2.3-alpha20201008","description":"Pannellum React Component, with Pannellum updated as of 2020-10-08","main":"lib/index.js","module":"es/index.js","scripts":{"build":"nwb build-react-component --copy-files","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","test":"nwb test-react","test:coverage":"nwb test-react --coverage","test:watch":"nwb test-react --server","deploy":"gh-pages -d demo/dist"},"dependencies":{"video.js":"^7.1.0"},"peerDependencies":{"react":"16.x"},"devDependencies":{"babel-eslint":"^10.0.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^5.8.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","gh-pages":"^1.2.0","nwb":"0.21.x","react":"^16.4.1","react-dom":"^16.4.1"},"author":{"name":"Ben Andrews","email":"bandrews@mofangheavyindustries.com"},"homepage":"https://github.com/bandrews/pannellum-react","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bandrews/pannellum-react.git"},"gitHead":"cd91004b5632c8f6bb71b26a1a665c869f2c6a6a","bugs":{"url":"https://github.com/bandrews/pannellum-react/issues"},"_id":"@bandrews/pannellum-react@1.2.3-alpha20201008","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-66lPq5JPI2UIH5cTSHTTfykZDQJxxR+6/4oeebSi1Fdb1u0Efj1lgimtRQK7MSnLHYhccHRKqcEPPLCL70duaQ==","shasum":"49153cfaee52c1de905bc55193122bb2239e2039","tarball":"https://registry.npmjs.org/@bandrews/pannellum-react/-/pannellum-react-1.2.3-alpha20201008.tgz","fileCount":46,"unpackedSize":5890184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff2/WCRA9TVsSAnZWagAAG1YP/RmJEfQKQyDgJkOLXeb0\nD9ECMmSdl8fKP98Vf9nN31UuaeLEWQqMY8PGUsr9JuujulmtkIvmtdEmxh1M\nWj4gCgs6J3yI+G3reKkuKAkOajshJePylZIO04J2DZDNjbg7FI76q3trJyMg\nSFDyEGiSckfAWBVbf1uxpqogi47gHYgjFmG5v85m4Z9cdcXtURrh5gMenjPE\n+PVaQAtGj+KbsQGnrs01G++fc+RmeBIOrUID9iwuaQdOYgBn6IFZVKt3hAyO\n88eT2UII91jwDLhlhBaG8cINTN2wqc/EFwTWbAJXwnAMeoLCsas0DFge2v5P\n+E2URJWR0O9xdfeM3XRhzDZvFiNhuCeLz8doFPAVA0+ipgvD1U5Cawfrjzzl\nuqZtALn27iUit/5TtPzTkzegB+bWvGNlRZYzN0sTJTuUtwAkdHS0rQll2GzO\ndfhfLNz/nV6xW92lPI5okP/ukyXFxhfIfB3LyfvjKeoysS/IJ0643utLlraf\nmDnAvW6CUXBEqk5PstYyk6g9lBtMYDFcvNdoxvHYIduFiNVSvlKY674itcXp\nNlLvVGT4w33S1XzAVjBqqKBIWrj8XjgchZSurlg4bqPXRxG6gozXvAHcWn5X\nAeMRpQWObmW1T1XmOzkZ5PDu07RC3ihT/DT44oTTzKKS9+Zbrz6Lsku1ijuj\nOjSQ\r\n=iYoG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRZHZ5vpEIveVda5o8tKS8NyBC+hkjZJ3jdB1ZoXfUdQIgJVPYF3bpUnxOjDqiVr/FQBYap4BxjunwYidwNtZ0kEM="}]},"maintainers":[{"name":"bandrews","email":"bandrews@mofangheavyindustries.com"}],"_npmUser":{"name":"bandrews","email":"bandrews@mofangheavyindustries.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pannellum-react_1.2.3-alpha20201008_1602187221930_0.615286512831233"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-28T00:47:05.388Z","1.2.3-alpha20200927":"2020-09-28T00:47:05.694Z","modified":"2022-04-04T17:41:20.712Z","1.2.3-alpha20201008":"2020-10-08T20:00:22.114Z"},"maintainers":[{"name":"bandrews","email":"bandrews@mofangheavyindustries.com"}],"description":"Pannellum React Component, with Pannellum updated as of 2020-10-08","homepage":"https://github.com/bandrews/pannellum-react","repository":{"type":"git","url":"git+https://github.com/bandrews/pannellum-react.git"},"author":{"name":"Ben Andrews","email":"bandrews@mofangheavyindustries.com"},"bugs":{"url":"https://github.com/bandrews/pannellum-react/issues"},"license":"MIT","readme":"# pannellum-react\r\n\r\n[![Travis][build-badge]][build]\r\n[![npm package][npm-badge]][npm]\r\n\r\nReact Component library for the [Pannellum](https://github.com/mpetroff/pannellum/) project.\r\n\r\n_Special thanks to [Matthew Petroff](https://github.com/mpetroff)_\r\n\r\n[build-badge]: https://travis-ci.org/farminf/pannellum-react.svg?branch=master\r\n[build]: https://travis-ci.org/farminf/pannellum-react\r\n[npm-badge]: https://img.shields.io/npm/v/pannellum-react.svg\r\n[npm]: https://www.npmjs.org/package/pannellum-react\r\n[coveralls-badge]: https://coveralls.io/repos/github/farminf/pannellum-react/badge.svg?branch=master\r\n[coveralls]: https://coveralls.io/github/farminf/pannellum-react\r\n\r\n## Install and Import\r\n\r\nInstall pannellum-react component\r\n\r\n```bash\r\nnpm install pannellum-react --save\r\n```\r\n\r\nImport pannellum-react in your react component file by\r\n\r\n```js\r\nimport { Pannellum, PannellumVideo } from \"pannellum-react\";\r\n```\r\n\r\n> **Note:** Currently only `equirectangular` type is supported! planning to do also `multires`\r\n\r\n> **Note:** `Tours` component currently is not supported but is WIP.\r\n> **Note:** For having video tours, there is the custum hotspot which can implement the video scene changing using `handleClick`. In fact in can be the tour for videos and photos.\r\n> **Note:** You can also create your tour with custom hotspot, by changing the image dynamically.\r\n> **Note:** If you manage the props by state, you can update the component smoothly (example: updating yaw, pitch or hfov won't re-render the image and it will dynamically update)\r\n\r\n## Demo\r\n\r\nhttps://farminf.github.io/pannellum-react/\r\n\r\nyou can also use codesandbox playground\r\n\r\n[![Edit q27rq5p6](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/q27rq5p6)\r\n\r\n## Simple Example\r\n\r\n```JavaScript\r\nimport React, { Component } from 'react';\r\nimport { render } from 'react-dom';\r\n\r\nimport { Pannellum, PannellumVideo } from \"pannellum-react\";\r\nimport myImage from \"./images/alma.jpg\";\r\nimport myVideo from \"./images/video.mp4\";\r\n\r\n\r\nconst PannellumReact = () => (\r\n
\r\n

Pannellum React Component\r\n {\r\n console.log(\"panorama loaded\");\r\n }}\r\n >\r\n \r\n\r\n \r\n \r\n\r\n {/****** for video 360 component *******/}\r\n\r\n \r\n this.hanldeClick(name)}\r\n name=\"hs1\"\r\n />\r\n\r\n \r\n \r\n\r\n

\r\n);\r\n\r\nexport default PannellumReact;\r\n```\r\n\r\n## API\r\n\r\npannellum-react has most of the official pannellum properties (not all of them). It just needed to be passed as props of the `pannellum` component like example above.on\r\n\r\n### **Props API**\r\n\r\n| Name | Type | Default | Description |\r\n| ---------------------- | -------- | ----------------------- | ----------------------------------------------------------------------------------------------- |\r\n| id | String | Unique Generated String | If you pass it, it will use it for div id, if not it would be unique string for each component |\r\n| width | String | \"100%\" | The width of the panorama div |\r\n| height | String | \"400px\" | The height of the panorama div |\r\n| image | String | \"\" | The 360 image path |\r\n| haov | Number | 360 | Initial horizontal angle of view |\r\n| vaov | Number | 180 | Initial vertical angle of view |\r\n| vOffsect | Number | 0 | Initial vertical offset angle |\r\n| yaw | Number | 0 | Starting yaw position in degrees |\r\n| pitch | Number | 0 | Starting pitch position in degrees |\r\n| hfov | Number | 100 | Starting horizontal field of view in degrees |\r\n| maxHfov | Number | 150 | Maximum field of view which user can zoom (in degrees) |\r\n| minHfov | Number | 50 | Minimum field of view which user can zoom (in degrees) |\r\n| maxPitch | Number | 90 | Maximum field of view pitch (in degrees) |\r\n| minPitch | Number | -90 | Minimum field of view pitch (in degrees) |\r\n| maxYaw | Number | 180 | Maximum field of view yaw (in degrees) |\r\n| minYaw | Number | -180 | Minimum field of view yaw (in degrees) |\r\n| autoRotate | Number | 0 | rotation speed in degrees per second. Positive is counter-clockwise, and negative is clockwise. |\r\n| compass | Boolean | false | Showing compass if true |\r\n| title | String | \"\" | Displays as the panorama’s title |\r\n| author | String | \"\" | Displays as the panorama’s author |\r\n| preview | String | \"\" | Preview image path to display |\r\n| previewTitle | String | \"\" | Preview title to display |\r\n| previewAuthor | String | \"\" | Preview Author to display |\r\n| autoLoad | Boolean | false | Load and dsplay the image automatically if true |\r\n| orientationOnByDefault | Boolean | false | If true Device orientation will work if device supported |\r\n| showZoomCtrl | Boolean | true | The zoom control display on the image |\r\n| keyboardZoom | Boolean | true | Enables zoom control from keyboard if true |\r\n| disableKeyboardCtrl | Boolean | false | Disables control from keyboard if true |\r\n| mouseZoom | Boolean | true | Enables zoom control with mouse if true |\r\n| draggable | Boolean | true | If false, mouse and touch dragging is disabled |\r\n| showFullscreenCtrl | Boolean | true | FullScreen control display |\r\n| showControls | Boolean | true | if False, no control displays |\r\n| onLoad | Function | | Callback function which fires after loading |\r\n| onRender | Function | | Callback function which fires after each render, helpful if you need to react to yaw/pitch/roll/zoom changes |\r\n| onError | Function | | Callback function which fires after error |\r\n| onErrorcleared | Function | | Callback function which calls after clearing the error |\r\n| onMousedown | Function | | Callback function which calls after mouse button press |\r\n| onMouseup | Function | | Callback function which calls after mouse button release |\r\n| onTouchstart | Function | | Callback function which calls after touch starts |\r\n| onTouchend | Function | | Callback function which calls after touch ends |\r\n| hotspotDebug | Boolean | false | For debug pupose (finding correct point for hotspot) |\r\n\r\nAdditionally, by Getting refrence of the component, you can get the pannellum **Viewer** calling `getViewer()` which gives all the available functions of the viewer such as `getPitch`, `setPitch` , `getyaw` and etc. find [here](https://pannellum.org/documentation/api/#viewer)\r\n\r\nMoreover, you can force render the component using `forceRender()` in case if you change a prop and didn't change constantly.(example would be hotspot: if you want to update hotspot dynamically, better to call forceRender after updating the hotspots)\r\n\r\n> example `this.PanImage.current.getViewer().getPitch()`, PanImage is ref of the component.\r\n\r\n> This is working also for the video component\r\n\r\n---\r\n\r\n### **HotSpot API**\r\n\r\n#### Info\r\n\r\n| Name | Type | Default | Description |\r\n| ----- | ------ | ------- | ---------------------------------------- |\r\n| type | String | info | you should pass it |\r\n| pitch | Number | 0 | the pitch for hotspot |\r\n| yaw | Number | 0 | the yaw for hotspot |\r\n| text | String | \"\" | on mouse over hotspot shows the text box |\r\n| URL | String | \"\" | onClick of hotspot opens on new page |\r\n\r\n---\r\n\r\n#### Custom\r\n\r\n| Name | Type | Default | Description |\r\n| -------------- | -------- | -------------------------- | --------------------------------------------------------------------------------------------- |\r\n| type | String | custom | you should pass it |\r\n| pitch | Number | 0 | the pitch for hotspot |\r\n| yaw | Number | 0 | the yaw for hotspot |\r\n| tooltip | Function | see demo | (createTooltipFunc) the function pass div element and you can append any shape or html or ... |\r\n| tooltipArg | Object | {} | (createTooltipArgs) will be passed to handleClick |\r\n| handleClick | Function | logging the handleClickArg | (clickHandlerFunc) fires onclick of hotspot |\r\n| handleClickArg | Object | {} | (clickHandlerArgs) will be passed to handleClick |\r\n| cssClass | String | tooltipcss | String is used as the CSS class for the hotspot |\r\n\r\n---\r\n\r\n### **Video API**\r\n\r\nthese are videojs configuration properties which can be used\r\n\r\n| Name | Type | Default | Description |\r\n| -------- | ------- | ------- | ----------------------------- |\r\n| video | String | \" \" | Path to your 360 video |\r\n| loop | Boolean | false | Looping over video |\r\n| autoplay | Boolean | true | Play the video as page loaded |\r\n| controls | Boolean | false | showing controls under |\r\n| muted | Boolean | true | making video mute |\r\n\r\nin addition there are also pannellum properties(panorama) which works on video\r\n\r\n| Name | Type | Default | Description |\r\n| ------------ | ------- | ------- | ----------------------------------------------------------------------------------------------- |\r\n| width | String | \"100%\" | The width of the panorama div |\r\n| height | String | \"400px\" | The height of the panorama div |\r\n| video | String | \"\" | The 360 video path |\r\n| yaw | Number | 0 | Starting yaw position in degrees |\r\n| pitch | Number | 0 | Starting pitch position in degrees |\r\n| hfov | Number | 100 | Starting horizontal field of view in degrees |\r\n| maxHfov | Number | 150 | Maximum field of view which user can zoom (in degrees) |\r\n| minHfov | Number | 50 | Minimum field of view which user can zoom (in degrees) |\r\n| maxPitch | Number | 90 | Maximum field of view pitch (in degrees) |\r\n| minPitch | Number | -90 | Minimum field of view pitch (in degrees) |\r\n| maxYaw | Number | 180 | Maximum field of view yaw (in degrees) |\r\n| minYaw | Number | -180 | Minimum field of view yaw (in degrees) |\r\n| autoRotate | Number | 0 | rotation speed in degrees per second. Positive is counter-clockwise, and negative is clockwise. |\r\n| mouseZoom | Boolean | true | Enables zoom control with mouse if true |\r\n| hotspotDebug | Boolean | false | For debug pupose (finding correct point for hotspot) |\r\n\r\n> if you are using chrome, try to keep muted true for autoplay.\r\n\r\n---\r\n\r\n### Example with all the available props\r\n\r\n```JavaScript\r\n {\r\n console.log(\"panorama loaded\");\r\n }}\r\n onError={err => {\r\n console.log(\"Error\", err);\r\n }}\r\n onErrorcleared={() => {\r\n console.log(\"Error Cleared\");\r\n }}\r\n onMousedown={evt => {\r\n console.log(\"Mouse Down\", evt);\r\n }}\r\n onMouseup={evt => {\r\n console.log(\"Mouse Up\", evt);\r\n }}\r\n onTouchstart={evt => {\r\n console.log(\"Touch Start\", evt);\r\n }}\r\n onTouchend={evt => {\r\n console.log(\"Touch End\", evt);\r\n }}\r\n>\r\n \r\n\r\n console.log(args.name)}\r\n handleClickArg={{ \"name\":\"test\" }}\r\n {/* there are 3 other props. see the custom hotspot doc above*/}\r\n />\r\n\r\n\r\n```\r\n\r\n## License\r\n\r\npannellum-react is released under the MIT license.\r\n","readmeFilename":"README.md"}