From 9f9e52658bb74dc908750b94e2fa4826e203e97b Mon Sep 17 00:00:00 2001
From: Marc Rabat <marcrabat@gmail.com>
Date: Fri, 17 Dec 2021 11:13:41 +0100
Subject: [PATCH] chore(react): remove share and full-screen

---
 .../botonic-react/src/components/image.jsx    | 32 +++++++++++++++++--
 .../src/components/size-checker.jsx           | 12 +++++++
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 packages/botonic-react/src/components/size-checker.jsx

diff --git a/packages/botonic-react/src/components/image.jsx b/packages/botonic-react/src/components/image.jsx
index 028ec3dcc2..73a0474758 100644
--- a/packages/botonic-react/src/components/image.jsx
+++ b/packages/botonic-react/src/components/image.jsx
@@ -1,13 +1,14 @@
 import 'react-photoswipe/lib/photoswipe.css'
 
 import { INPUT, isBrowser } from '@botonic/core'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { PhotoSwipe } from 'react-photoswipe'
 import styled from 'styled-components'
 
 import { ROLES } from '../constants'
 import { Portal } from '../webchat/components/portal-modal'
 import { Message } from './message'
+import { getMeta } from './size-checker'
 
 const StyledImage = styled.img`
   border-radius: 8px;
@@ -23,7 +24,28 @@ const serialize = imageProps => {
 
 export const Image = props => {
   let content = props.children
+
   const [isGalleryOpened, setIsGalleryOpened] = useState(false)
+  const [imageDimensions, setImageDimensions] = useState({})
+  useEffect(() => {
+    // Remove fullscreen and share buttons
+    if (isGalleryOpened) {
+      const fullScreenButton = document.getElementsByClassName(
+        'pswp__button pswp__button--fs'
+      )[0]
+      fullScreenButton.remove()
+      const shareButton = document.getElementsByClassName(
+        'pswp__button pswp__button--share'
+      )[0]
+      shareButton.remove()
+    }
+  }, [isGalleryOpened])
+
+  useEffect(async () => {
+    if (props.src !== undefined) {
+      setImageDimensions(await getMeta(props.src))
+    }
+  }, [props.src])
 
   if (isBrowser()) {
     content = (
@@ -33,7 +55,13 @@ export const Image = props => {
           <Portal>
             <PhotoSwipe
               isOpen={true}
-              items={[{ src: props.src, w: 1200, h: 900 }]}
+              items={[
+                {
+                  src: props.src,
+                  w: imageDimensions.width,
+                  h: imageDimensions.height,
+                },
+              ]}
               options={{ bgOpacity: 0.7 }}
               onClose={() => setIsGalleryOpened(false)}
             />
diff --git a/packages/botonic-react/src/components/size-checker.jsx b/packages/botonic-react/src/components/size-checker.jsx
new file mode 100644
index 0000000000..6aed702b55
--- /dev/null
+++ b/packages/botonic-react/src/components/size-checker.jsx
@@ -0,0 +1,12 @@
+export function getMeta(url) {
+  try {
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      img.onload = () => resolve({ height: img.height, width: img.width })
+      img.onerror = reject
+      img.src = url
+    })
+  } catch (e) {
+    console.error(e)
+  }
+}