@geowiki/design-system 0.16.10-dev.0 → 0.16.10-dev.2

package/dist/index.d.mts

@@ -1124,8 +1124,9 @@ interface CarouselGalleryItemProps {
 
 interface Props$6 {
     galleryItems: CarouselGalleryItemProps[];
+    saveRotationChanges?: (base64: string | null) => void;
 }
-declare const CarouselItemList: ({ galleryItems }: Props$6) => react_jsx_runtime.JSX.Element;
+declare const CarouselItemList: ({ galleryItems, saveRotationChanges }: Props$6) => react_jsx_runtime.JSX.Element;
 
 declare const OldButton: ({ label, appearance, compact, handleClick, loading, type, }: any) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -1124,8 +1124,9 @@ interface CarouselGalleryItemProps {
 
 interface Props$6 {
     galleryItems: CarouselGalleryItemProps[];
+    saveRotationChanges?: (base64: string | null) => void;
 }
-declare const CarouselItemList: ({ galleryItems }: Props$6) => react_jsx_runtime.JSX.Element;
+declare const CarouselItemList: ({ galleryItems, saveRotationChanges }: Props$6) => react_jsx_runtime.JSX.Element;
 
 declare const OldButton: ({ label, appearance, compact, handleClick, loading, type, }: any) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -7547,7 +7547,7 @@ var VideoPlayer = (props) => {
 var import_jsx_runtime133 = require("react/jsx-runtime");
 var CarouselGalleryItem = ({ text, url }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
-    !url.includes(".mp4") && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", children: [
+    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", children: [
       /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         ImageElement,
         {
@@ -7559,7 +7559,7 @@ var CarouselGalleryItem = ({ text, url }) => {
       ),
       /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: " absolute bottom-6 opacity-0 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: " mx-6 text-white text-base leading-[120%] line-clamp-4", children: text }) })
     ] }),
-    url.includes(".mp4") && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: " max-w-sm aspect-square relative group cursor-pointer overflow-hidden rounded-xl", children: [
+    (url.includes(".mp4") || !url.includes(".mov")) && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: " max-w-sm aspect-square relative group cursor-pointer overflow-hidden rounded-xl", children: [
       /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "transition-all duration-300 group-hover:brightness-50", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         VideoPlayer,
         {
@@ -7584,7 +7584,8 @@ var GalleryCarouselOpen = ({
   list,
   currentPhoto,
   open,
-  setOpen
+  setOpen,
+  saveRotationChanges
 }) => {
   const [defaultPhoto, setDefaultPhoto] = (0, import_react25.useState)(currentPhoto);
   const [text, setDefaultText] = (0, import_react25.useState)("");
@@ -7610,6 +7611,22 @@ var GalleryCarouselOpen = ({
       setDefaultPhoto({ imageUrl: list[nextIndex].url });
     }
   };
+  const generateBase64ofImage = () => {
+    const img = new Image();
+    let base64;
+    img.src = defaultPhoto.imageUrl;
+    img.crossOrigin = "anonymous";
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    canvas.width = img.height;
+    canvas.height = img.width;
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate(rotation * Math.PI / 180);
+    ctx.drawImage(img, -img.width / 2, -img.height / 2);
+    base64 = canvas.toDataURL("image/jpeg");
+    return base64 != null ? base64 : null;
+  };
   (0, import_react25.useEffect)(() => {
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
     if (foundPhoto) {
@@ -7661,7 +7678,7 @@ var GalleryCarouselOpen = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "w-full flex-col flex justify-center items-center", children: [
-            !defaultPhoto.imageUrl.includes(".mp4") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+            !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "img",
               {
                 src: defaultPhoto.imageUrl,
@@ -7670,7 +7687,7 @@ var GalleryCarouselOpen = ({
                 className: " p-4"
               }
             ),
-            defaultPhoto.imageUrl.includes(".mp4") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+            (defaultPhoto.imageUrl.includes(".mp4") || defaultPhoto.imageUrl.includes(".mov")) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "video",
               {
                 src: defaultPhoto.imageUrl,
@@ -7692,13 +7709,23 @@ var GalleryCarouselOpen = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "gap-2 flex flex-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
-            setRotation(rotation - 90);
-          } }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
-            setRotation(rotation + 90);
-          } })
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "justify-between flex flex-row mb-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "gap-2 flex flex-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+              setRotation(rotation - 90);
+            } }),
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+              setRotation(rotation + 90);
+            } })
+          ] }),
+          saveRotationChanges && !defaultPhoto.imageUrl.includes(".mp4") && defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+            "div",
+            {
+              className: "z-40 text-white hover:cursor-pointer",
+              onClick: () => saveRotationChanges(generateBase64ofImage()),
+              children: "Save rotation changes"
+            }
+          )
         ] })
       ] }) })
     ] }) })
@@ -7708,7 +7735,7 @@ var GalleryCarouselOpen = ({
 // src/components/DesignElements/Carousel/CarouselGalleryItemList.tsx
 var import_react26 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
-var CarouselItemList = ({ galleryItems }) => {
+var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
   const [open, setOpen] = (0, import_react26.useState)(false);
   const [selectedItemId, setSelectedItemId] = (0, import_react26.useState)("");
   const handleOpenGallery = (id) => {
@@ -7737,7 +7764,8 @@ var CarouselItemList = ({ galleryItems }) => {
           text: galleryItem.text
         })),
         open,
-        setOpen
+        setOpen,
+        saveRotationChanges
       }
     )
   ] });

package/dist/index.mjs

@@ -5975,7 +5975,7 @@ import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { Link as Link3 } from "@geowiki/core";
 
 // src/components/Elements/ImageElement.tsx
-import { Image as Image2 } from "@geowiki/core";
+import { Image as Image3 } from "@geowiki/core";
 import { jsx as jsx118 } from "react/jsx-runtime";
 var ImageElement = ({
   src,
@@ -5988,7 +5988,7 @@ var ImageElement = ({
   if (width && height) {
     if (!showPlaceholder)
       return /* @__PURE__ */ jsx118(
-        Image2,
+        Image3,
         {
           className,
           src,
@@ -6000,7 +6000,7 @@ var ImageElement = ({
         }
       );
     return /* @__PURE__ */ jsx118(
-      Image2,
+      Image3,
       {
         className,
         src,
@@ -6015,7 +6015,7 @@ var ImageElement = ({
   }
   if (!showPlaceholder)
     return /* @__PURE__ */ jsx118(
-      Image2,
+      Image3,
       {
         className,
         src,
@@ -6027,7 +6027,7 @@ var ImageElement = ({
       }
     );
   return /* @__PURE__ */ jsx118("div", { className, children: /* @__PURE__ */ jsx118(
-    Image2,
+    Image3,
     {
       className: "rounded-xl",
       src,
@@ -7180,7 +7180,7 @@ var VideoPlayer = (props) => {
 import { Fragment as Fragment9, jsx as jsx132, jsxs as jsxs57 } from "react/jsx-runtime";
 var CarouselGalleryItem = ({ text, url }) => {
   return /* @__PURE__ */ jsxs57(Fragment9, { children: [
-    !url.includes(".mp4") && /* @__PURE__ */ jsxs57("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", children: [
+    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ jsxs57("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", children: [
       /* @__PURE__ */ jsx132(
         ImageElement,
         {
@@ -7192,7 +7192,7 @@ var CarouselGalleryItem = ({ text, url }) => {
       ),
       /* @__PURE__ */ jsx132("div", { className: " absolute bottom-6 opacity-0 group-hover:opacity-100", children: /* @__PURE__ */ jsx132("div", { className: " mx-6 text-white text-base leading-[120%] line-clamp-4", children: text }) })
     ] }),
-    url.includes(".mp4") && /* @__PURE__ */ jsxs57("div", { className: " max-w-sm aspect-square relative group cursor-pointer overflow-hidden rounded-xl", children: [
+    (url.includes(".mp4") || !url.includes(".mov")) && /* @__PURE__ */ jsxs57("div", { className: " max-w-sm aspect-square relative group cursor-pointer overflow-hidden rounded-xl", children: [
       /* @__PURE__ */ jsx132("div", { className: "transition-all duration-300 group-hover:brightness-50", children: /* @__PURE__ */ jsx132(
         VideoPlayer,
         {
@@ -7217,7 +7217,8 @@ var GalleryCarouselOpen = ({
   list,
   currentPhoto,
   open,
-  setOpen
+  setOpen,
+  saveRotationChanges
 }) => {
   const [defaultPhoto, setDefaultPhoto] = useState14(currentPhoto);
   const [text, setDefaultText] = useState14("");
@@ -7243,6 +7244,22 @@ var GalleryCarouselOpen = ({
       setDefaultPhoto({ imageUrl: list[nextIndex].url });
     }
   };
+  const generateBase64ofImage = () => {
+    const img = new Image();
+    let base64;
+    img.src = defaultPhoto.imageUrl;
+    img.crossOrigin = "anonymous";
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    canvas.width = img.height;
+    canvas.height = img.width;
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate(rotation * Math.PI / 180);
+    ctx.drawImage(img, -img.width / 2, -img.height / 2);
+    base64 = canvas.toDataURL("image/jpeg");
+    return base64 != null ? base64 : null;
+  };
   useEffect8(() => {
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
     if (foundPhoto) {
@@ -7294,7 +7311,7 @@ var GalleryCarouselOpen = ({
             }
           ),
           /* @__PURE__ */ jsxs58("div", { className: "w-full flex-col flex justify-center items-center", children: [
-            !defaultPhoto.imageUrl.includes(".mp4") && /* @__PURE__ */ jsx133(
+            !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ jsx133(
               "img",
               {
                 src: defaultPhoto.imageUrl,
@@ -7303,7 +7320,7 @@ var GalleryCarouselOpen = ({
                 className: " p-4"
               }
             ),
-            defaultPhoto.imageUrl.includes(".mp4") && /* @__PURE__ */ jsx133(
+            (defaultPhoto.imageUrl.includes(".mp4") || defaultPhoto.imageUrl.includes(".mov")) && /* @__PURE__ */ jsx133(
               "video",
               {
                 src: defaultPhoto.imageUrl,
@@ -7325,13 +7342,23 @@ var GalleryCarouselOpen = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs58("div", { className: "gap-2 flex flex-row", children: [
-          /* @__PURE__ */ jsx133(RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
-            setRotation(rotation - 90);
-          } }),
-          /* @__PURE__ */ jsx133(RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
-            setRotation(rotation + 90);
-          } })
+        /* @__PURE__ */ jsxs58("div", { className: "justify-between flex flex-row mb-5", children: [
+          /* @__PURE__ */ jsxs58("div", { className: "gap-2 flex flex-row", children: [
+            /* @__PURE__ */ jsx133(RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+              setRotation(rotation - 90);
+            } }),
+            /* @__PURE__ */ jsx133(RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+              setRotation(rotation + 90);
+            } })
+          ] }),
+          saveRotationChanges && !defaultPhoto.imageUrl.includes(".mp4") && defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ jsx133(
+            "div",
+            {
+              className: "z-40 text-white hover:cursor-pointer",
+              onClick: () => saveRotationChanges(generateBase64ofImage()),
+              children: "Save rotation changes"
+            }
+          )
         ] })
       ] }) })
     ] }) })
@@ -7341,7 +7368,7 @@ var GalleryCarouselOpen = ({
 // src/components/DesignElements/Carousel/CarouselGalleryItemList.tsx
 import { useState as useState15 } from "react";
 import { jsx as jsx134, jsxs as jsxs59 } from "react/jsx-runtime";
-var CarouselItemList = ({ galleryItems }) => {
+var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
   const [open, setOpen] = useState15(false);
   const [selectedItemId, setSelectedItemId] = useState15("");
   const handleOpenGallery = (id) => {
@@ -7370,7 +7397,8 @@ var CarouselItemList = ({ galleryItems }) => {
           text: galleryItem.text
         })),
         open,
-        setOpen
+        setOpen,
+        saveRotationChanges
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geowiki/design-system",
-  "version": "0.16.10-dev.0",
+  "version": "0.16.10-dev.2",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -15,7 +15,7 @@
   "peerDependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "@geowiki/core": "0.16.10-dev.0"
+    "@geowiki/core": "0.16.10-dev.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",