@readr-media/react-360 - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

lib/cjs/react-components/index.js

@@ -21,2 +21,7 @@ "use strict";
   componentId: "sc-w8pthh-0"
+})([""]);
+
+const PannellumWrapper = _styledComponents.default.div.withConfig({
+  displayName: "react-components__PannellumWrapper",
+  componentId: "sc-w8pthh-1"
 })(["position:relative;height:", ";", ""], ({
@@ -35,8 +40,12 @@ wrapperHeight
   displayName: "react-components__Caption",
-  componentId: "sc-w8pthh-1"
-})(["font-size:14px;ine-height:1.8;font-weight:400;color:rgba(0,0,0,0.5);margin-top:12px;@media (min-width:768px){margin-top:20px;}"]);
+  componentId: "sc-w8pthh-2"
+})(["font-size:14px;ine-height:1.8;font-weight:400;color:rgba(0,0,0,0.5);margin-top:12px;@media (min-width:768px){margin-top:20px;}", ""], ({
+  isFullScreenWidth
+}) => isFullScreenWidth && `
+    text-align: center;
+  `);
 
 const Error = _styledComponents.default.div.withConfig({
   displayName: "react-components__Error",
-  componentId: "sc-w8pthh-2"
+  componentId: "sc-w8pthh-3"
 })(["width:100%;height:100%;color:red;font-size:18px;display:flex;justify-content:center;align-items:center;"]);
@@ -68,36 +77,39 @@ /**
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    wrapperHeight: `${imageHeight}px`,
-    isFullScreenWidth: isFullScreenWidth,
-    children: [!imageUrl ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(Error, {
-      children: ["No Image Url Provided! `", imageUrl, "`"]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_pannellumReact.Pannellum, {
-      ref: pannellumRef,
-      width: "100%",
-      height: "100%",
-      image: imageUrl,
-      pitch: 0,
-      yaw: 0 // set maxHfov, minHfov to prevent zoom in/out
-      ,
-      hfov: 100,
-      maxHfov: 100,
-      minHfov: 100,
-      autoLoad: true,
-      showZoomCtrl: false,
-      showFullscreenCtrl: false,
-      mouseZoom: false,
-      onMousedown: e => {
-        console.log(`current viewing point: pitch ${pannellumRef.current.getViewer().getPitch()}, yaw ${pannellumRef.current.getViewer().getYaw()}`); // Calculate the pitch and yaw based on the click coordinates
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PannellumWrapper, {
+      wrapperHeight: `${imageHeight}px`,
+      isFullScreenWidth: isFullScreenWidth,
+      children: !imageUrl ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(Error, {
+        children: ["No Image Url Provided! `", imageUrl, "`"]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_pannellumReact.Pannellum, {
+        ref: pannellumRef,
+        width: "100%",
+        height: "100%",
+        image: imageUrl,
+        pitch: 0,
+        yaw: 0 // set maxHfov, minHfov to prevent zoom in/out
+        ,
+        hfov: 100,
+        maxHfov: 100,
+        minHfov: 100,
+        autoLoad: true,
+        showZoomCtrl: false,
+        showFullscreenCtrl: false,
+        mouseZoom: false,
+        onMousedown: e => {
+          console.log(`current viewing point: pitch ${pannellumRef.current.getViewer().getPitch()}, yaw ${pannellumRef.current.getViewer().getYaw()}`); // Calculate the pitch and yaw based on the click coordinates
 
-        const viewer = pannellumRef.current.getViewer();
-        const pitchYaw = viewer.mouseEventToCoords(e);
-        console.log('Clicked at Pitch:', pitchYaw[0], 'Yaw:', pitchYaw[1]);
-      },
-      children: hotspots.map(hotspot => /*#__PURE__*/(0, _jsxRuntime.jsx)(_pannellumReact.Pannellum.Hotspot, {
-        type: hotspot.type,
-        pitch: hotspot.pitch,
-        yaw: hotspot.yaw,
-        text: hotspot.text,
-        URL: hotspot.url
-      }, `${hotspot.text}_${hotspot.pitch}_${hotspot.yaw}`))
+          const viewer = pannellumRef.current.getViewer();
+          const pitchYaw = viewer.mouseEventToCoords(e);
+          console.log('Clicked at Pitch:', pitchYaw[0], 'Yaw:', pitchYaw[1]);
+        },
+        children: hotspots.map(hotspot => /*#__PURE__*/(0, _jsxRuntime.jsx)(_pannellumReact.Pannellum.Hotspot, {
+          type: hotspot.type,
+          pitch: hotspot.pitch,
+          yaw: hotspot.yaw,
+          text: hotspot.text,
+          URL: hotspot.url
+        }, `${hotspot.text}_${hotspot.pitch}_${hotspot.yaw}`))
+      })
     }), caption && /*#__PURE__*/(0, _jsxRuntime.jsx)(Caption, {
+      isFullScreenWidth: isFullScreenWidth,
       children: caption
@@ -104,0 +116,0 @@ })]

lib/esm/react-components/index.js

@@ -9,2 +9,6 @@ import { Pannellum } from '@readr-media/pannellum-react';
   componentId: "sc-w8pthh-0"
+})([""]);
+const PannellumWrapper = styled.div.withConfig({
+  displayName: "react-components__PannellumWrapper",
+  componentId: "sc-w8pthh-1"
 })(["position:relative;height:", ";", ""], ({
@@ -22,7 +26,11 @@ wrapperHeight
   displayName: "react-components__Caption",
-  componentId: "sc-w8pthh-1"
-})(["font-size:14px;ine-height:1.8;font-weight:400;color:rgba(0,0,0,0.5);margin-top:12px;@media (min-width:768px){margin-top:20px;}"]);
+  componentId: "sc-w8pthh-2"
+})(["font-size:14px;ine-height:1.8;font-weight:400;color:rgba(0,0,0,0.5);margin-top:12px;@media (min-width:768px){margin-top:20px;}", ""], ({
+  isFullScreenWidth
+}) => isFullScreenWidth && `
+    text-align: center;
+  `);
 const Error = styled.div.withConfig({
   displayName: "react-components__Error",
-  componentId: "sc-w8pthh-2"
+  componentId: "sc-w8pthh-3"
 })(["width:100%;height:100%;color:red;font-size:18px;display:flex;justify-content:center;align-items:center;"]);
@@ -53,36 +61,39 @@ /**
   return /*#__PURE__*/_jsxs(Wrapper, {
-    wrapperHeight: `${imageHeight}px`,
-    isFullScreenWidth: isFullScreenWidth,
-    children: [!imageUrl ? /*#__PURE__*/_jsxs(Error, {
-      children: ["No Image Url Provided! `", imageUrl, "`"]
-    }) : /*#__PURE__*/_jsx(Pannellum, {
-      ref: pannellumRef,
-      width: "100%",
-      height: "100%",
-      image: imageUrl,
-      pitch: 0,
-      yaw: 0 // set maxHfov, minHfov to prevent zoom in/out
-      ,
-      hfov: 100,
-      maxHfov: 100,
-      minHfov: 100,
-      autoLoad: true,
-      showZoomCtrl: false,
-      showFullscreenCtrl: false,
-      mouseZoom: false,
-      onMousedown: e => {
-        console.log(`current viewing point: pitch ${pannellumRef.current.getViewer().getPitch()}, yaw ${pannellumRef.current.getViewer().getYaw()}`); // Calculate the pitch and yaw based on the click coordinates
+    children: [/*#__PURE__*/_jsx(PannellumWrapper, {
+      wrapperHeight: `${imageHeight}px`,
+      isFullScreenWidth: isFullScreenWidth,
+      children: !imageUrl ? /*#__PURE__*/_jsxs(Error, {
+        children: ["No Image Url Provided! `", imageUrl, "`"]
+      }) : /*#__PURE__*/_jsx(Pannellum, {
+        ref: pannellumRef,
+        width: "100%",
+        height: "100%",
+        image: imageUrl,
+        pitch: 0,
+        yaw: 0 // set maxHfov, minHfov to prevent zoom in/out
+        ,
+        hfov: 100,
+        maxHfov: 100,
+        minHfov: 100,
+        autoLoad: true,
+        showZoomCtrl: false,
+        showFullscreenCtrl: false,
+        mouseZoom: false,
+        onMousedown: e => {
+          console.log(`current viewing point: pitch ${pannellumRef.current.getViewer().getPitch()}, yaw ${pannellumRef.current.getViewer().getYaw()}`); // Calculate the pitch and yaw based on the click coordinates
 
-        const viewer = pannellumRef.current.getViewer();
-        const pitchYaw = viewer.mouseEventToCoords(e);
-        console.log('Clicked at Pitch:', pitchYaw[0], 'Yaw:', pitchYaw[1]);
-      },
-      children: hotspots.map(hotspot => /*#__PURE__*/_jsx(Pannellum.Hotspot, {
-        type: hotspot.type,
-        pitch: hotspot.pitch,
-        yaw: hotspot.yaw,
-        text: hotspot.text,
-        URL: hotspot.url
-      }, `${hotspot.text}_${hotspot.pitch}_${hotspot.yaw}`))
+          const viewer = pannellumRef.current.getViewer();
+          const pitchYaw = viewer.mouseEventToCoords(e);
+          console.log('Clicked at Pitch:', pitchYaw[0], 'Yaw:', pitchYaw[1]);
+        },
+        children: hotspots.map(hotspot => /*#__PURE__*/_jsx(Pannellum.Hotspot, {
+          type: hotspot.type,
+          pitch: hotspot.pitch,
+          yaw: hotspot.yaw,
+          text: hotspot.text,
+          URL: hotspot.url
+        }, `${hotspot.text}_${hotspot.pitch}_${hotspot.yaw}`))
+      })
     }), caption && /*#__PURE__*/_jsx(Caption, {
+      isFullScreenWidth: isFullScreenWidth,
       children: caption
@@ -89,0 +100,0 @@ })]

package.json

 {
   "name": "@readr-media/react-360",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

8284421

increased by0.01%

Lines of code

206

increased by11.96%

No dependency changes