Adds Share button to picture and video items in Chat

Hubs-Foundation · Oct 29, 2024 · fdd587c · fdd587c
1 parent 95a08fc
commit fdd587c
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/src/react-components/room/ChatSidebar.js b/src/react-components/room/ChatSidebar.js
@@ -7,6 +7,7 @@ import { ReactComponent as WandIcon } from "../icons/Wand.svg";
 import { ReactComponent as AttachIcon } from "../icons/Attach.svg";
 import { ReactComponent as SendIcon } from "../icons/Send.svg";
 import { ReactComponent as ReactionIcon } from "../icons/Reaction.svg";
+import { ReactComponent as ShareIcon } from "../icons/Share.svg";
 import { IconButton } from "../input/IconButton";
 import { TextAreaInput } from "../input/TextAreaInput";
 import { Popover } from "../popover/Popover";
@@ -15,6 +16,8 @@ import styles from "./ChatSidebar.scss";
 import { formatMessageBody } from "../../utils/chat-message";
 import { FormattedMessage, useIntl, defineMessages, FormattedRelativeTime } from "react-intl";
 import { permissionMessage } from "./PermissionNotifications";
+import { share } from "../../utils/share";
+import configs from "../../utils/configs";
 
 export function SpawnMessageButton(props) {
   return (
@@ -377,7 +380,21 @@ MessageBubble.propTypes = {
   permission: PropTypes.bool
 };
 
-function getMessageComponent(message) {
+function getMessageComponent(message, intl) {
+  const onShareClick = async () => {
+    try {
+      await share({
+        url: message.body?.src,
+        title: intl.formatMessage(
+          { id: "photo-message.default-tweet", defaultMessage: "Taken in {shareHashtag}" },
+          { shareHashtag: configs.translation("share-hashtag") }
+        )
+      });
+    } catch (error) {
+      console.error(`while sharing (from chat sidebar):`, error);
+    }
+  };
+
   switch (message.type) {
     case "chat": {
       const { formattedBody, monospace, emoji } = formatMessageBody(message.body);
@@ -391,13 +408,27 @@ function getMessageComponent(message) {
       return (
         <MessageBubble key={message.id} media>
           <video controls src={message.body.src} />
+          <IconButton
+            className={styles.iconButton}
+            onClick={onShareClick}
+            title={intl.formatMessage({ id: "share-popover.title", defaultMessage: "Share" })}
+          >
+            <ShareIcon />
+          </IconButton>
         </MessageBubble>
       );
     case "image":
     case "photo":
       return (
         <MessageBubble key={message.id} media>
           <img src={message.body.src} />
+          <IconButton
+            className={styles.iconButton}
+            onClick={onShareClick}
+            title={intl.formatMessage({ id: "share-popover.title", defaultMessage: "Share" })}
+          >
+            <ShareIcon />
+          </IconButton>
         </MessageBubble>
       );
     case "permission":

diff --git a/src/react-components/room/ChatSidebar.scss b/src/react-components/room/ChatSidebar.scss
@@ -47,6 +47,9 @@
   padding: 10px 16px;
   max-width: 80%;
   width: max-content;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
   font-size: theme.$font-size-md;
   overflow-wrap: break-word;
   line-height: 1.25;
@@ -71,6 +74,8 @@
     background-color: theme.$chat-bubble-bg-color-sent;
     color: theme.$chat-bubble-text-color-sent;
     align-self: flex-end;
+    flex-direction: row-reverse;
+    justify-content: end;
 
     a {
       color: theme.$chat-bubble-text-color-sent;
@@ -134,6 +139,24 @@
   }
 }
 
+:local(.icon-button) {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 18px;
+  background-color: transparent;
+
+  &:hover {
+    @media (pointer: fine) {
+      color: theme.$primary-color-hover;
+    }
+  }
+}
+
 :local(.chat-input-warning) {
   padding-top: theme.$spacing-2xs;
 }