From 3ab7cbcbff0dd72f9e8f42d4383072cc718281c4 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Tue, 10 May 2022 13:17:15 -0700
Subject: [PATCH] adding image popout

---
 .../TopicItem/ImageAsset/ImageAsset.jsx       | 42 +++++++++++++++++++
 .../TopicItem/ImageAsset/ImageAsset.styled.js | 30 +++++++++++++
 .../User/Conversation/TopicItem/TopicItem.jsx |  7 ++--
 .../TopicItem/VideoAsset/VideoAsset.jsx       |  4 +-
 4 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx
 create mode 100644 net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.styled.js

diff --git a/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx b/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx
new file mode 100644
index 00000000..a18faf0a
--- /dev/null
+++ b/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx
@@ -0,0 +1,42 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Button, Modal } from 'antd';
+import ReactResizeDetector from 'react-resize-detector';
+import { SelectOutlined, ExpandOutlined, MinusCircleOutlined, PlayCircleOutlined } from '@ant-design/icons';
+import { ImageAssetWrapper } from './ImageAsset.styled';
+
+export function ImageAsset({ thumbUrl, fullUrl }) {
+
+  const [state, setState] = useState({ width: 0, height: 0, popout: false });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const onPopOut = () => {
+    updateState({ popout: true });
+  }
+
+  return (
+    <ImageAssetWrapper>
+      <ReactResizeDetector handleWidth={true} handleHeight={true}>
+        {({ width, height }) => {
+          if (width != state.width || height != state.height) {
+            updateState({ width, height });
+          }
+          return <img style={{ height: '100%', objectFit: 'contain' }} src={thumbUrl} alt="" />
+        }}
+      </ReactResizeDetector>
+      <div class="viewer">
+        <div class="overlay" style={{ width: state.width, height: state.height }}>
+          <div class="expand" onClick={() => onPopOut()}>
+            <ExpandOutlined style={{ fontSize: 24, color: '#eeeeee', cursor: 'pointer' }} />
+          </div>
+        </div>
+      </div>
+      <Modal visible={state.popout} width={'80%'} bodyStyle={{ paddingBottom: 6, paddingTop: 6, paddingLeft: 6, paddingRight: 6, backgroundColor: '#dddddd' }} footer={null} destroyOnClose={true} closable={false} onCancel={() => { updateState({ popout: false })}}>
+        <img style={{ width: '100%', objectFit: 'contain' }} src={fullUrl} alt="" />
+      </Modal>
+    </ImageAssetWrapper>
+  )
+}
+
diff --git a/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.styled.js b/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.styled.js
new file mode 100644
index 00000000..797d5ac3
--- /dev/null
+++ b/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.styled.js
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const ImageAssetWrapper = styled.div`
+  position: relative;
+  height: 100%;
+
+  .viewer {
+    top: 0;
+    position: absolute;
+  }
+
+  .viewer:hover .overlay {
+    visibility: visible;
+  }
+
+  .overlay {
+    visibility: hidden;
+    position: relative;
+    background-color: black;
+    opacity: 0.5;
+  }
+
+  .expand {
+    padding-right: 2px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+`;
+
diff --git a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx b/net/web/src/User/Conversation/TopicItem/TopicItem.jsx
index a79d5608..d6c0d290 100644
--- a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx
+++ b/net/web/src/User/Conversation/TopicItem/TopicItem.jsx
@@ -3,6 +3,7 @@ import { TopicItemWrapper } from './TopicItem.styled';
 import { useTopicItem } from './useTopicItem.hook';
 import { VideoAsset } from './VideoAsset/VideoAsset';
 import { AudioAsset } from './AudioAsset/AudioAsset';
+import { ImageAsset } from './ImageAsset/ImageAsset';
 import { Avatar } from 'avatar/Avatar';
 import { CommentOutlined } from '@ant-design/icons';
 import { Carousel } from 'Carousel/Carousel';
@@ -18,10 +19,8 @@ export function TopicItem({ topic }) {
 
   const renderAsset = (asset) => {
     if (asset.image) {
-      if (asset.image.thumb) {
-        return <img style={{ height: '100%', objectFit: 'contain' }} src={actions.getAssetUrl(asset.image.thumb)} alt="" />
-      }
-      return <img style={{ height: '100%', objectFit: 'contain' }} src={actions.getAssetUrl(asset.image.full)} alt="" />
+      return <ImageAsset thumbUrl={actions.getAssetUrl(asset.image.thumb)}
+          fullUrl={actions.getAssetUrl(asset.image.full)} />
     }
     if (asset.video) {
       return <VideoAsset thumbUrl={actions.getAssetUrl(asset.video.thumb)}
diff --git a/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx b/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx
index ecffdd4c..0b740816 100644
--- a/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx
+++ b/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx
@@ -17,7 +17,7 @@ export function VideoAsset({ thumbUrl, lqUrl, hdUrl }) {
   useEffect(() => {
   }, [thumbUrl, hdUrl, lqUrl]);
 
-  const onFullScreen = () => {
+  const onPopOut = () => {
     updateState({ inline: false, popout: true, popoutUrl: hdUrl, playing: false, inlineUrl: null });
   }
 
@@ -51,7 +51,7 @@ export function VideoAsset({ thumbUrl, lqUrl, hdUrl }) {
         <div class="control">
           <CenterButton />
         </div>
-        <div class="expand" onClick={() => onFullScreen()}>
+        <div class="expand" onClick={() => onPopOut()}>
           <ExpandOutlined style={{ fontSize: 24, color: '#eeeeee', cursor: 'pointer' }} />
         </div>
       </div>