Use photo landing page for tweet + include hub url

Hubs-Foundation · Nov 2, 2018 · 6815a01 · 6815a01
1 parent 94d057f
commit 6815a01
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/src/react-components/presence-log.js b/src/react-components/presence-log.js
@@ -6,8 +6,19 @@ import { FormattedMessage } from "react-intl";
 import ChatMessage from "./chat-message";
 import { share } from "../utils/share";
 
-function SpawnPhotoMessage({ name, body: { src: url }, className, maySpawn }) {
-  const onShareClicked = share.bind(null, { url, title: "Check out this photo from #hubs" });
+function SpawnPhotoMessage({ name, body: { src: url }, className, maySpawn, hubId }) {
+  let landingPageUrl = new URL(url);
+  const [hostname, port] = process.env.RETICULUM_SERVER.split(":");
+  console.log(hostname, port, landingPageUrl.port);
+  landingPageUrl.hostname = hostname;
+  if (port) landingPageUrl.port = port;
+  landingPageUrl.pathname = landingPageUrl.pathname.replace(".png", ".html");
+  landingPageUrl = landingPageUrl.toString();
+
+  const onShareClicked = share.bind(null, {
+    url: landingPageUrl,
+    title: `Taken in #hubs, join me at https://hub.link/${hubId}`
+  });
   return (
     <div className={className}>
       {maySpawn && <button className={classNames(styles.iconButton, styles.share)} onClick={onShareClicked} />}
@@ -18,13 +29,13 @@ function SpawnPhotoMessage({ name, body: { src: url }, className, maySpawn }) {
         <span>
           {"took a "}
           <b>
-            <a href={url} target="_blank" rel="noopener noreferrer">
+            <a href={landingPageUrl} target="_blank" rel="noopener noreferrer">
               photo
             </a>
           </b>.
         </span>
       </div>
-      <a href={url} target="_blank" rel="noopener noreferrer">
+      <a href={landingPageUrl} target="_blank" rel="noopener noreferrer">
         <img src={url} />
       </a>
     </div>
@@ -34,7 +45,8 @@ SpawnPhotoMessage.propTypes = {
   name: PropTypes.string,
   maySpawn: PropTypes.bool,
   body: PropTypes.object,
-  className: PropTypes.string
+  className: PropTypes.string,
+  hubId: PropTypes.string
 };
 
 function ChatBody(props) {
@@ -48,7 +60,8 @@ ChatBody.propTypes = {
 export default class PresenceLog extends Component {
   static propTypes = {
     entries: PropTypes.array,
-    inRoom: PropTypes.bool
+    inRoom: PropTypes.bool,
+    hubId: PropTypes.string
   };
 
   constructor(props) {
@@ -101,6 +114,7 @@ export default class PresenceLog extends Component {
             className={classNames(entryClasses, styles.media)}
             body={e.body}
             maySpawn={e.maySpawn}
+            hubId={this.props.hubId}
           />
         );
       }

diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
@@ -1027,12 +1027,14 @@ class UIRoot extends Component {
 
           {(!entryFinished || this.isWaitingForAutoExit()) && (
             <div className={styles.uiDialog}>
-              <PresenceLog entries={this.props.presenceLogEntries || []} />
+              <PresenceLog entries={this.props.presenceLogEntries || []} hubId={this.props.hubId} />
               <div className={dialogBoxContentsClassNames}>{dialogContents}</div>
             </div>
           )}
 
-          {entryFinished && <PresenceLog inRoom={true} entries={this.props.presenceLogEntries || []} />}
+          {entryFinished && (
+            <PresenceLog inRoom={true} entries={this.props.presenceLogEntries || []} hubId={this.props.hubId} />
+          )}
           {entryFinished && (
             <form onSubmit={this.sendMessage}>
               <div className={styles.messageEntryInRoom} style={{ height: pendingMessageFieldHeight }}>