From 5e6ba13423fef7620fdbe168efa63c2dc3bff01b Mon Sep 17 00:00:00 2001
From: netpro2k <netpro2k@gmail.com>
Date: Fri, 2 Nov 2018 15:51:38 -0700
Subject: [PATCH] Cleanup suggestions from PR
---
src/react-components/photo-message.js | 44 ++++++++++++++++++++++++
src/react-components/presence-log.js | 48 ++-------------------------
src/scene-entry-manager.js | 1 -
src/utils/phoenix-utils.js | 5 +++
src/utils/share.js | 3 ++
5 files changed, 55 insertions(+), 46 deletions(-)
create mode 100644 src/react-components/photo-message.js
diff --git a/src/react-components/photo-message.js b/src/react-components/photo-message.js
new file mode 100644
index 000000000..ac4cfbceb
--- /dev/null
+++ b/src/react-components/photo-message.js
@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import styles from "../assets/stylesheets/presence-log.scss";
+import classNames from "classnames";
+
+import { share } from "../utils/share";
+import { getLandingPageForPhoto } from "../utils/phoenix-utils";
+
+export default function PhotoMessage({ name, body: { src: url }, className, maySpawn, hubId }) {
+ const landingPageUrl = getLandingPageForPhoto(url);
+ 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} />}
+ <div className={styles.mediaBody}>
+ <span>
+ <b>{name}</b>
+ </span>
+ <span>
+ {"took a "}
+ <b>
+ <a href={landingPageUrl} target="_blank" rel="noopener noreferrer">
+ photo
+ </a>
+ </b>.
+ </span>
+ </div>
+ <a href={landingPageUrl} target="_blank" rel="noopener noreferrer">
+ <img src={url} />
+ </a>
+ </div>
+ );
+}
+PhotoMessage.propTypes = {
+ name: PropTypes.string,
+ maySpawn: PropTypes.bool,
+ body: PropTypes.object,
+ className: PropTypes.string,
+ hubId: PropTypes.string
+};
diff --git a/src/react-components/presence-log.js b/src/react-components/presence-log.js
index 88f411b8f..4426ac46e 100644
--- a/src/react-components/presence-log.js
+++ b/src/react-components/presence-log.js
@@ -3,51 +3,9 @@ import PropTypes from "prop-types";
import styles from "../assets/stylesheets/presence-log.scss";
import classNames from "classnames";
import { FormattedMessage } from "react-intl";
-import ChatMessage from "./chat-message";
-import { share } from "../utils/share";
-
-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} />}
- <div className={styles.mediaBody}>
- <span>
- <b>{name}</b>
- </span>
- <span>
- {"took a "}
- <b>
- <a href={landingPageUrl} target="_blank" rel="noopener noreferrer">
- photo
- </a>
- </b>.
- </span>
- </div>
- <a href={landingPageUrl} target="_blank" rel="noopener noreferrer">
- <img src={url} />
- </a>
- </div>
- );
-}
-SpawnPhotoMessage.propTypes = {
- name: PropTypes.string,
- maySpawn: PropTypes.bool,
- body: PropTypes.object,
- className: PropTypes.string,
- hubId: PropTypes.string
-};
+import ChatMessage from "./chat-message";
+import PhotoMessage from "./photo-message";
export default class PresenceLog extends Component {
static propTypes = {
@@ -100,7 +58,7 @@ export default class PresenceLog extends Component {
);
case "spawn": {
return (
- <SpawnPhotoMessage
+ <PhotoMessage
key={e.key}
name={e.name}
className={classNames(entryClasses, styles.media)}
diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js
index ed8679104..461f42107 100644
--- a/src/scene-entry-manager.js
+++ b/src/scene-entry-manager.js
@@ -259,7 +259,6 @@ export default class SceneEntryManager {
});
this.scene.addEventListener("photo_taken", e => {
- console.log(e);
this.hubChannel.sendMessage({ src: e.detail }, "spawn");
});
};
diff --git a/src/utils/phoenix-utils.js b/src/utils/phoenix-utils.js
index 19619599a..5d5307db8 100644
--- a/src/utils/phoenix-utils.js
+++ b/src/utils/phoenix-utils.js
@@ -43,3 +43,8 @@ export function getReticulumFetchUrl(path) {
return path;
}
}
+
+export function getLandingPageForPhoto(photoUrl) {
+ const parsedUrl = new URL(photoUrl);
+ return getReticulumFetchUrl(parsedUrl.pathname.replace(".png", ".html") + parsedUrl.search);
+}
diff --git a/src/utils/share.js b/src/utils/share.js
index 80cf4ed02..e563431ff 100644
--- a/src/utils/share.js
+++ b/src/utils/share.js
@@ -1,3 +1,6 @@
+/**
+ * Wraps navigator.share with a fallback to twitter for unsupported browsers
+ */
export function share(opts) {
if (navigator.share) {
return navigator.share(opts);
--
GitLab