diff --git a/src/react-components/presence-log.js b/src/react-components/presence-log.js index 7249ef70c2b428432f914482f4a59448f2cb19a6..5dc6664d13c1c797f579eb4a7bc73a640b82b59f 100644 --- 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 index 7a3987d2bb15f8b8dfa6ec8fafcdbac88d8478c4..012afee70e1e2aa4a590a49f800512a5944a7cc4 100644 --- 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 }}>