{"version":3,"file":"static/chunks/1977.a9e05bb96c8ef237.js","mappings":"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","sources":["webpack://_N_E/./src/components/ModalsPortal/FullViewImageScreen.tsx"],"sourcesContent":["import { useCallbackOnKeys, useDownloadImage, useScreen } from \"@/hooks\"\nimport { googleAnalytics } from \"@/lib/gtag\"\nimport { useExpandViewImage } from \"@/stores\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport React, { memo, useCallback, useEffect, useMemo, useState } from \"react\"\nimport { FaSearchMinus, FaSearchPlus, FaUndo } from \"react-icons/fa\"\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\"\nimport LoadingLogo from \"../LoadingLogo\"\nimport classNames from \"classnames\"\nimport client from \"@/api/client\"\nimport { DownloadIcon1, XIcon } from \"../shared/icons\"\nimport IconButton from \"../IconButton\"\n\nconst FullViewImageScreen = () => {\n  const [expandViewImage, setExpandViewImage] = useExpandViewImage(state => [\n    state.expandViewImage,\n    state.setExpandViewImage,\n  ])\n  const downloadImage = useDownloadImage(\n    expandViewImage?.url!,\n    expandViewImage?.name ?? expandViewImage?.id ?? expandViewImage?.url ?? \"image\",\n    () => {},\n  )\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n  const { width, height } = useScreen()\n  const alt = \"example\"\n  const zoomFactor = 5\n\n  const [imageNaturalWidth, setImageNaturalWidth] = useState<number>(0)\n  const [imageNaturalHeight, setImageNaturalHeight] = useState<number>(0)\n\n  const [rotate, setRotate] = useState<number>(0)\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  const onClose = useCallback(() => {\n    setExpandViewImage(null)\n  }, [setExpandViewImage])\n\n  const imageScale = useMemo(() => {\n    if (width === 0 || height === 0 || imageNaturalWidth === 0 || imageNaturalHeight === 0) return 0\n    const scale = Math.min(width / imageNaturalWidth, height / imageNaturalHeight)\n    return Math.min(Math.max(scale, 1), 1)\n  }, [width, height, imageNaturalWidth, imageNaturalHeight])\n\n  const handleImageOnLoad = (image: HTMLImageElement) => {\n    setImageNaturalWidth(image.naturalWidth)\n    setImageNaturalHeight(image.naturalHeight)\n  }\n\n  useCallbackOnKeys(\n    [\n      {\n        key: \"Escape\",\n      },\n    ],\n    () => {\n      onClose()\n    },\n    !!expandViewImage?.url,\n  )\n\n  useEffect(() => {\n    if (expandViewImage?.url) {\n      setImageLoaded(false)\n\n      const image = new Image()\n      image.onload = () => handleImageOnLoad(image)\n      image.src = expandViewImage.url\n\n      googleAnalytics.event({\n        action: \"click\",\n        category: \"full_view_image\",\n        label: `image_${expandViewImage.url}`,\n        value: 1,\n      })\n      return\n    }\n    setImageLoaded(false)\n  }, [expandViewImage?.url])\n\n  useEffect(() => {\n    if (!expandViewImage) return\n\n    addEventListener(\"popstate\", onClose)\n\n    return () => {\n      removeEventListener(\"popstate\", onClose)\n    }\n  }, [expandViewImage])\n\n  if (!expandViewImage) return null\n\n  return (\n    <AnimatePresence\n      mode=\"wait\"\n      key={imageLoaded ? \"loaded\" : \"loading\"}\n      onExitComplete={() => {\n        setImageNaturalWidth(0)\n        setImageNaturalHeight(0)\n        setRotate(0)\n      }}\n    >\n      <div\n        onClick={onClose}\n        className=\"fixed z-[51] flex flex-col w-full h-full overflow-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 bg-blackAlpha-900 modal-content-child\"\n      >\n        <motion.div\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: 0.25, ease: \"easeInOut\" }}\n          className=\"flex flex-col items-center justify-center flex-1 w-full\"\n        >\n          <div\n            className={classNames(\"absolute z-[1] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\", {\n              hidden: imageLoaded,\n            })}\n          >\n            <LoadingLogo />\n          </div>\n          <div\n            style={{\n              opacity: imageLoaded ? 1 : 0,\n              width: \"100%\",\n              height: \"100%\",\n            }}\n          >\n            {imageScale > 0 && (\n              <TransformWrapper\n                key={`${width}x${height}x${expandViewImage.url}`}\n                initialScale={imageScale}\n                minScale={0.5}\n                maxScale={imageScale * zoomFactor}\n                centerOnInit\n              >\n                {({ zoomIn, zoomOut }) => (\n                  <>\n                    <div className=\"fixed z-10 flex flex-row space-x-2 -translate-x-1/2 bottom-4 left-1/2\">\n                      <IconButton\n                        colorScheme=\"secondary\"\n                        onClick={e => {\n                          e.stopPropagation()\n                          zoomIn(0.25)\n                        }}\n                        className=\"p-2 transition-opacity duration-300 opacity-100 md:opacity-70 hover:opacity-100\"\n                      >\n                        <FaSearchPlus size=\"0.8rem\" />\n                      </IconButton>\n                      <IconButton\n                        colorScheme=\"secondary\"\n                        onClick={e => {\n                          e.stopPropagation()\n\n                          zoomOut(0.25)\n                        }}\n                        className=\"p-2 transition-opacity duration-300  opacity-100 md:opacity-70 hover:opacity-100\"\n                      >\n                        <FaSearchMinus size=\"0.8rem\" />\n                      </IconButton>\n                      <IconButton\n                        colorScheme=\"secondary\"\n                        onClick={e => {\n                          e.stopPropagation()\n\n                          setRotate(rotate - 90)\n                        }}\n                        className=\"p-2 transition-opacity duration-300  opacity-100 md:opacity-70 hover:opacity-100\"\n                      >\n                        <FaUndo size=\"0.8rem\" />\n                      </IconButton>\n\n                      <IconButton\n                        colorScheme=\"secondary\"\n                        onClick={e => {\n                          e.stopPropagation()\n\n                          setRotate(rotate + 90)\n                        }}\n                        style={{\n                          transform: \"rotateY(180deg)\",\n                        }}\n                        className=\"p-2 transition-opacity duration-300  opacity-100 md:opacity-70 hover:opacity-100\"\n                      >\n                        <FaUndo size=\"0.8rem\" />\n                      </IconButton>\n                      <IconButton\n                        colorScheme=\"secondary\"\n                        onClick={async e => {\n                          e.stopPropagation()\n\n                          await downloadImage().finally(async () => {\n                            try {\n                              if (!expandViewImage.id) return\n                              await client.api.imageControllerDownloadImage({\n                                imageIds: [expandViewImage.id],\n                              })\n                            } catch (error) {}\n                          })\n                        }}\n                        className=\"p-2 transition-opacity duration-300  opacity-100 md:opacity-70 hover:opacity-100\"\n                      >\n                        <DownloadIcon1 width={16} height={16} />\n                      </IconButton>\n                      <IconButton\n                        colorScheme=\"secondary\"\n                        onClick={e => {\n                          e.stopPropagation()\n                          onClose()\n                        }}\n                        className=\"p-2 transition-opacity duration-300  opacity-100 md:opacity-70 hover:opacity-100\"\n                      >\n                        <XIcon width={16} height={16} />\n                      </IconButton>\n                    </div>\n                    <TransformComponent\n                      wrapperStyle={{\n                        width: \"100%\",\n                        height: \"100%\",\n                      }}\n                    >\n                      <div\n                        onClick={e => {\n                          e.stopPropagation()\n                        }}\n                      >\n                        <img\n                          onLoad={() => setImageLoaded(true)}\n                          style={{\n                            transform: `rotate(${rotate}deg)`,\n                            transition: \"transform 0.25s\",\n                            maxHeight: \"100vh\",\n                          }}\n                          className=\"object-contain\"\n                          alt={alt}\n                          src={expandViewImage.url}\n                        />\n                      </div>\n                    </TransformComponent>\n                  </>\n                )}\n              </TransformWrapper>\n            )}\n          </div>\n        </motion.div>\n      </div>\n    </AnimatePresence>\n  )\n}\n\nexport default memo(FullViewImageScreen)\n"],"names":["__webpack_exports__","memo","expandViewImage","setExpandViewImage","useExpandViewImage","state","downloadImage","useDownloadImage","url","name","id","imageLoaded","setImageLoaded","useState","width","height","useScreen","imageNaturalWidth","setImageNaturalWidth","imageNaturalHeight","setImageNaturalHeight","rotate","setRotate","React","onClose","useCallback","imageScale","useMemo","Math","min","max","handleImageOnLoad","image","naturalWidth","naturalHeight","useCallbackOnKeys","key","useEffect","Image","onload","src","googleAnalytics","event","action","category","label","concat","value","addEventListener","removeEventListener","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsx","AnimatePresence","mode","onExitComplete","div","onClick","className","jsxs","motion","initial","opacity","animate","exit","transition","duration","ease","classNames","hidden","LoadingLogo","style","TransformWrapper","initialScale","minScale","maxScale","centerOnInit","zoomIn","zoomOut","param","Fragment","IconButton","colorScheme","e","stopPropagation","FaSearchPlus","size","FaSearchMinus","FaUndo","transform","finally","client","api","imageControllerDownloadImage","imageIds","error","DownloadIcon1","XIcon","TransformComponent","wrapperStyle","img","onLoad","maxHeight","alt"],"sourceRoot":""}