[Glitch] Change design of embed modal in web UI

Port 24ef825 to glitch-soc

Signed-off-by: Claire <[email protected]>

app/javascript/flavours/glitch/components/copy_paste_text.tsx

@@ -0,0 +1,90 @@
+import { useRef, useState, useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
+import { Icon } from 'flavours/glitch/components/icon';
+import { useTimeout } from 'flavours/glitch/hooks/useTimeout';
+
+export const CopyPasteText: React.FC<{ value: string }> = ({ value }) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [copied, setCopied] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [setAnimationTimeout] = useTimeout();
+
+  const handleInputClick = useCallback(() => {
+    setCopied(false);
+
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      inputRef.current.setSelectionRange(0, value.length);
+    }
+  }, [setCopied, value]);
+
+  const handleButtonClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      void navigator.clipboard.writeText(value);
+      inputRef.current?.blur();
+      setCopied(true);
+      setAnimationTimeout(() => {
+        setCopied(false);
+      }, 700);
+    },
+    [setCopied, setAnimationTimeout, value],
+  );
+
+  const handleKeyUp = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key !== ' ') return;
+      void navigator.clipboard.writeText(value);
+      setCopied(true);
+      setAnimationTimeout(() => {
+        setCopied(false);
+      }, 700);
+    },
+    [setCopied, setAnimationTimeout, value],
+  );
+
+  const handleFocus = useCallback(() => {
+    setFocused(true);
+  }, [setFocused]);
+
+  const handleBlur = useCallback(() => {
+    setFocused(false);
+  }, [setFocused]);
+
+  return (
+    <div
+      className={classNames('copy-paste-text', { copied, focused })}
+      tabIndex={0}
+      role='button'
+      onClick={handleInputClick}
+      onKeyUp={handleKeyUp}
+    >
+      <textarea
+        readOnly
+        value={value}
+        ref={inputRef}
+        onClick={handleInputClick}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+
+      <button className='button' onClick={handleButtonClick}>
+        <Icon id='copy' icon={ContentCopyIcon} />{' '}
+        {copied ? (
+          <FormattedMessage id='copypaste.copied' defaultMessage='Copied' />
+        ) : (
+          <FormattedMessage
+            id='copypaste.copy_to_clipboard'
+            defaultMessage='Copy to clipboard'
+          />
+        )}
+      </button>
+    </div>
+  );
+};

app/javascript/flavours/glitch/components/status_action_bar.jsx

@@ -56,7 +56,7 @@ const messages = defineMessages({
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
   pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
   unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
-  embed: { id: 'status.embed', defaultMessage: 'Embed' },
+  embed: { id: 'status.embed', defaultMessage: 'Get embed code' },
   admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
   admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
   admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },

app/javascript/flavours/glitch/containers/status_container.js

@@ -34,8 +34,6 @@ import Status from 'flavours/glitch/components/status';
 import { deleteModal } from 'flavours/glitch/initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selectors';
 
-import { showAlertForError } from '../actions/alerts';
-
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
   const getPictureInPicture = makeGetPictureInPicture();
@@ -111,10 +109,7 @@ const mapDispatchToProps = (dispatch, { contextType }) => ({
   onEmbed (status) {
     dispatch(openModal({
       modalType: 'EMBED',
-      modalProps: {
-        id: status.get('id'),
-        onError: error => dispatch(showAlertForError(error)),
-      },
+      modalProps: { id: status.get('id') },
     }));
   },
 

app/javascript/flavours/glitch/features/onboarding/share.jsx

@@ -10,8 +10,8 @@ import { Link } from 'react-router-dom';
 import SwipeableViews from 'react-swipeable-views';
 
 import ArrowRightAltIcon from '@/material-icons/400-24px/arrow_right_alt.svg?react';
-import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
 import { ColumnBackButton } from 'flavours/glitch/components/column_back_button';
+import { CopyPasteText } from 'flavours/glitch/components/copy_paste_text';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { me, domain } from 'flavours/glitch/initial_state';
 import { useAppSelector } from 'flavours/glitch/store';
@@ -20,67 +20,6 @@ const messages = defineMessages({
   shareableMessage: { id: 'onboarding.share.message', defaultMessage: 'I\'m {username} on #Mastodon! Come follow me at {url}' },
 });
 
-class CopyPasteText extends PureComponent {
-
-  static propTypes = {
-    value: PropTypes.string,
-  };
-
-  state = {
-    copied: false,
-    focused: false,
-  };
-
-  setRef = c => {
-    this.input = c;
-  };
-
-  handleInputClick = () => {
-    this.setState({ copied: false });
-    this.input.focus();
-    this.input.select();
-    this.input.setSelectionRange(0, this.props.value.length);
-  };
-
-  handleButtonClick = e => {
-    e.stopPropagation();
-
-    const { value } = this.props;
-    navigator.clipboard.writeText(value);
-    this.input.blur();
-    this.setState({ copied: true });
-    this.timeout = setTimeout(() => this.setState({ copied: false }), 700);
-  };
-
-  handleFocus = () => {
-    this.setState({ focused: true });
-  };
-
-  handleBlur = () => {
-    this.setState({ focused: false });
-  };
-
-  componentWillUnmount () {
-    if (this.timeout) clearTimeout(this.timeout);
-  }
-
-  render () {
-    const { value } = this.props;
-    const { copied, focused } = this.state;
-
-    return (
-      <div className={classNames('copy-paste-text', { copied, focused })} tabIndex='0' role='button' onClick={this.handleInputClick}>
-        <textarea readOnly value={value} ref={this.setRef} onClick={this.handleInputClick} onFocus={this.handleFocus} onBlur={this.handleBlur} />
-
-        <button className='button' onClick={this.handleButtonClick}>
-          <Icon id='copy' icon={ContentCopyIcon} /> {copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : <FormattedMessage id='copypaste.copy_to_clipboard' defaultMessage='Copy to clipboard' />}
-        </button>
-      </div>
-    );
-  }
-
-}
-
 class TipCarousel extends PureComponent {
 
   static propTypes = {

app/javascript/flavours/glitch/features/status/components/action_bar.jsx

@@ -49,7 +49,7 @@ const messages = defineMessages({
   share: { id: 'status.share', defaultMessage: 'Share' },
   pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
   unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
-  embed: { id: 'status.embed', defaultMessage: 'Embed' },
+  embed: { id: 'status.embed', defaultMessage: 'Get embed code' },
   admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
   admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
   admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },