From 37a8bc70837aaaf60b21717e7d4b79c4342ab166 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Apr 2022 17:52:42 -0500
Subject: [PATCH 1/3] WIP: embeds

---
 .../features/status/components/action-bar.tsx | 13 ++++++++-----
 .../features/ui/components/embed_modal.js     | 19 ++++++++++++++-----
 app/soapbox/utils/features.ts                 |  1 +
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/features/status/components/action-bar.tsx b/app/soapbox/features/status/components/action-bar.tsx
index 1e5efa765..bc9ff3bc8 100644
--- a/app/soapbox/features/status/components/action-bar.tsx
+++ b/app/soapbox/features/status/components/action-bar.tsx
@@ -368,11 +368,14 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         action: this.handleCopy,
         icon: require('@tabler/icons/icons/link.svg'),
       });
-      // menu.push({
-      //   text: intl.formatMessage(messages.embed),
-      //   action: this.handleEmbed,
-      //   icon: require('feather-icons/dist/icons/link-2.svg'),
-      // });
+
+      if (features.embeds) {
+        menu.push({
+          text: intl.formatMessage(messages.embed),
+          action: this.handleEmbed,
+          icon: require('feather-icons/dist/icons/link-2.svg'),
+        });
+      }
     }
 
     if (me) {
diff --git a/app/soapbox/features/ui/components/embed_modal.js b/app/soapbox/features/ui/components/embed_modal.js
index 6d10ee5bc..dde549af1 100644
--- a/app/soapbox/features/ui/components/embed_modal.js
+++ b/app/soapbox/features/ui/components/embed_modal.js
@@ -1,10 +1,13 @@
-import axios from 'axios';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
 
-export default @injectIntl
+import api from 'soapbox/api';
+
+export default @connect()
+@injectIntl
 class EmbedModal extends ImmutablePureComponent {
 
   static propTypes = {
@@ -19,12 +22,18 @@ class EmbedModal extends ImmutablePureComponent {
     oembed: null,
   };
 
-  componentDidMount() {
-    const { url } = this.props;
+  fetchEmbed = () => {
+    const { dispatch, url } = this.props;
 
+    return dispatch((dispatch, getState) => {
+      return api(getState).get('/api/oembed', { params: { url } });
+    });
+  }
+
+  componentDidMount() {
     this.setState({ loading: true });
 
-    axios.post('/api/web/embed', { url }).then(res => {
+    this.fetchEmbed().then(res => {
       this.setState({ loading: false, oembed: res.data });
 
       const iframeDocument = this.iframe.contentWindow.document;
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 93529f21e..39c2df262 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -30,6 +30,7 @@ const getInstanceFeatures = (instance: Instance) => {
     privacyScopes: v.software !== TRUTHSOCIAL,
     spoilers: v.software !== TRUTHSOCIAL,
     filters: v.software !== TRUTHSOCIAL,
+    embeds: v.software === MASTODON,
     polls: any([
       v.software === MASTODON && gte(v.version, '2.8.0'),
       v.software === PLEROMA,

From 851c28a3a87cee973c3207dcbbb7a01094982c96 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 3 May 2022 16:23:26 -0500
Subject: [PATCH 2/3] EmbedModal: fix styles

---
 app/soapbox/components/status_action_bar.tsx  | 13 ++++--
 .../features/status/components/action-bar.tsx |  2 +-
 .../features/ui/components/embed_modal.js     | 46 +++++++++----------
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index 341476820..3737edfd8 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -381,11 +381,14 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         action: this.handleCopy,
         icon: require('@tabler/icons/icons/link.svg'),
       });
-      // menu.push({
-      //   text: intl.formatMessage(messages.embed),
-      //   action: this.handleEmbed,
-      //   icon: require('feather-icons/dist/icons/link-2.svg'),
-      // });
+
+      if (features.embeds) {
+        menu.push({
+          text: intl.formatMessage(messages.embed),
+          action: this.handleEmbed,
+          icon: require('@tabler/icons/icons/share.svg'),
+        });
+      }
     }
 
     if (!me) {
diff --git a/app/soapbox/features/status/components/action-bar.tsx b/app/soapbox/features/status/components/action-bar.tsx
index c9d8a37d2..fff6654b9 100644
--- a/app/soapbox/features/status/components/action-bar.tsx
+++ b/app/soapbox/features/status/components/action-bar.tsx
@@ -374,7 +374,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: this.handleEmbed,
-          icon: require('feather-icons/dist/icons/link-2.svg'),
+          icon: require('@tabler/icons/icons/share.svg'),
         });
       }
     }
diff --git a/app/soapbox/features/ui/components/embed_modal.js b/app/soapbox/features/ui/components/embed_modal.js
index dde549af1..42a1bbd94 100644
--- a/app/soapbox/features/ui/components/embed_modal.js
+++ b/app/soapbox/features/ui/components/embed_modal.js
@@ -5,6 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
 import api from 'soapbox/api';
+import { Modal, Stack, Text, Input } from 'soapbox/components/ui';
 
 export default @connect()
 @injectIntl
@@ -42,9 +43,13 @@ class EmbedModal extends ImmutablePureComponent {
       iframeDocument.write(res.data.html);
       iframeDocument.close();
 
+      const innerFrame = iframeDocument.querySelector('iframe');
+
       iframeDocument.body.style.margin = 0;
-      this.iframe.width  = iframeDocument.body.scrollWidth;
-      this.iframe.height = iframeDocument.body.scrollHeight;
+
+      if (innerFrame) {
+        innerFrame.width = '100%';
+      }
     }).catch(error => {
       this.props.onError(error);
     });
@@ -62,35 +67,30 @@ class EmbedModal extends ImmutablePureComponent {
     const { oembed } = this.state;
 
     return (
-      <div className='modal-root__modal embed-modal'>
-        <h4><FormattedMessage id='status.embed' defaultMessage='Embed' /></h4>
+      <Modal title={<FormattedMessage id='status.embed' defaultMessage='Embed' />}>
+        <Stack space={4}>
+          <Stack>
+            <Text theme='muted' size='sm'>
+              <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
+            </Text>
 
-        <div className='embed-modal__container'>
-          <p className='hint'>
-            <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
-          </p>
-
-          <input
-            type='text'
-            className='embed-modal__html'
-            readOnly
-            value={oembed && oembed.html || ''}
-            onClick={this.handleTextareaClick}
-          />
-
-          <p className='hint'>
-            <FormattedMessage id='embed.preview' defaultMessage='Here is what it will look like:' />
-          </p>
+            <Input
+              type='text'
+              readOnly
+              value={oembed?.html || ''}
+              onClick={this.handleTextareaClick}
+            />
+          </Stack>
 
           <iframe
-            className='embed-modal__iframe'
+            className='inline-flex rounded-xl overflow-hidden max-w-full'
             frameBorder='0'
             ref={this.setIframeRef}
             sandbox='allow-same-origin'
             title='preview'
           />
-        </div>
-      </div>
+        </Stack>
+      </Modal>
     );
   }
 

From 485748d947b08ccdfc70738d2a5608ce7733e29e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 3 May 2022 16:43:04 -0500
Subject: [PATCH 3/3] EmbedModal: convert to typescript

---
 app/soapbox/components/ui/input/input.tsx     |  2 +-
 .../features/ui/components/embed_modal.js     | 97 -------------------
 .../features/ui/components/embed_modal.tsx    | 81 ++++++++++++++++
 3 files changed, 82 insertions(+), 98 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/embed_modal.js
 create mode 100644 app/soapbox/features/ui/components/embed_modal.tsx

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 14bbeb60d..cab86e10e 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -11,7 +11,7 @@ const messages = defineMessages({
   hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
 });
 
-interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled'> {
+interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */
diff --git a/app/soapbox/features/ui/components/embed_modal.js b/app/soapbox/features/ui/components/embed_modal.js
deleted file mode 100644
index 42a1bbd94..000000000
--- a/app/soapbox/features/ui/components/embed_modal.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import api from 'soapbox/api';
-import { Modal, Stack, Text, Input } from 'soapbox/components/ui';
-
-export default @connect()
-@injectIntl
-class EmbedModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    url: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onError: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  }
-
-  state = {
-    loading: false,
-    oembed: null,
-  };
-
-  fetchEmbed = () => {
-    const { dispatch, url } = this.props;
-
-    return dispatch((dispatch, getState) => {
-      return api(getState).get('/api/oembed', { params: { url } });
-    });
-  }
-
-  componentDidMount() {
-    this.setState({ loading: true });
-
-    this.fetchEmbed().then(res => {
-      this.setState({ loading: false, oembed: res.data });
-
-      const iframeDocument = this.iframe.contentWindow.document;
-
-      iframeDocument.open();
-      iframeDocument.write(res.data.html);
-      iframeDocument.close();
-
-      const innerFrame = iframeDocument.querySelector('iframe');
-
-      iframeDocument.body.style.margin = 0;
-
-      if (innerFrame) {
-        innerFrame.width = '100%';
-      }
-    }).catch(error => {
-      this.props.onError(error);
-    });
-  }
-
-  setIframeRef = c =>  {
-    this.iframe = c;
-  }
-
-  handleTextareaClick = (e) => {
-    e.target.select();
-  }
-
-  render() {
-    const { oembed } = this.state;
-
-    return (
-      <Modal title={<FormattedMessage id='status.embed' defaultMessage='Embed' />}>
-        <Stack space={4}>
-          <Stack>
-            <Text theme='muted' size='sm'>
-              <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
-            </Text>
-
-            <Input
-              type='text'
-              readOnly
-              value={oembed?.html || ''}
-              onClick={this.handleTextareaClick}
-            />
-          </Stack>
-
-          <iframe
-            className='inline-flex rounded-xl overflow-hidden max-w-full'
-            frameBorder='0'
-            ref={this.setIframeRef}
-            sandbox='allow-same-origin'
-            title='preview'
-          />
-        </Stack>
-      </Modal>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/embed_modal.tsx b/app/soapbox/features/ui/components/embed_modal.tsx
new file mode 100644
index 000000000..00a8f3767
--- /dev/null
+++ b/app/soapbox/features/ui/components/embed_modal.tsx
@@ -0,0 +1,81 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import api from 'soapbox/api';
+import { Modal, Stack, Text, Input } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const fetchEmbed = (url: string) => {
+  return (dispatch: any, getState: any) => {
+    return api(getState).get('/api/oembed', { params: { url } });
+  };
+};
+
+interface IEmbedModal {
+  url: string,
+  onError: (error: any) => void,
+}
+
+const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
+  const dispatch = useAppDispatch();
+
+  const iframe = useRef<HTMLIFrameElement>(null);
+  const [oembed, setOembed] = useState<any>(null);
+
+  useEffect(() => {
+
+    dispatch(fetchEmbed(url)).then(({ data }) => {
+      if (!iframe.current?.contentWindow) return;
+      setOembed(data);
+
+      const iframeDocument = iframe.current.contentWindow.document;
+
+      iframeDocument.open();
+      iframeDocument.write(data.html);
+      iframeDocument.close();
+
+      const innerFrame = iframeDocument.querySelector('iframe');
+
+      iframeDocument.body.style.margin = '0';
+
+      if (innerFrame) {
+        innerFrame.width = '100%';
+      }
+    }).catch(error => {
+      onError(error);
+    });
+  }, [!!iframe.current]);
+
+  const handleInputClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
+    e.currentTarget.select();
+  };
+
+  return (
+    <Modal title={<FormattedMessage id='status.embed' defaultMessage='Embed' />}>
+      <Stack space={4}>
+        <Stack>
+          <Text theme='muted' size='sm'>
+            <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
+          </Text>
+
+          <Input
+            type='text'
+            readOnly
+            value={oembed?.html || ''}
+            onClick={handleInputClick}
+          />
+        </Stack>
+
+        <iframe
+          className='inline-flex rounded-xl overflow-hidden max-w-full'
+          frameBorder='0'
+          ref={iframe}
+          sandbox='allow-same-origin'
+          title='preview'
+        />
+      </Stack>
+    </Modal>
+  );
+};
+
+export default EmbedModal;
\ No newline at end of file