From 7f15e2812175bd25e7d09785c3322d01b081f9e5 Mon Sep 17 00:00:00 2001 From: Miguel Sozinho Ramalho <19508417+msramalho@users.noreply.github.com> Date: Fri, 27 Jan 2023 19:25:10 +0000 Subject: [PATCH] mobile display fixes inc tweet embeds (#69) --- index.html | 4 +- package-lock.json | 25 +--------- package.json | 2 +- public/index.html | 2 +- src/components/TemplateCover.jsx | 9 ---- src/components/controls/Card.jsx | 6 +-- src/components/controls/atoms/Media.jsx | 42 ++++++++++------ .../controls/atoms/TwitterTweet.jsx | 50 +++++++++++++++++++ src/scss/infopopup.scss | 3 +- 9 files changed, 86 insertions(+), 57 deletions(-) create mode 100644 src/components/controls/atoms/TwitterTweet.jsx diff --git a/index.html b/index.html index afbf8bb..82703bd 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - TimeMap - Forensic Architecture + Civilian Harm in Ukraine Timemap - Bellingcat @@ -37,7 +37,7 @@
- This platform is unsuitable for mobile. Please revisit on a desktop. + If you see this message wait up to 30s, otherwise please revisit on a desktop device.
diff --git a/package-lock.json b/package-lock.json index bb91f7f..ee42e9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,11 +22,11 @@ "react-image": "^4.0.3", "react-redux": "^8.0.5", "react-tabs": "^6.0.0", - "react-twitter-embed": "^4.0.4", "redux": "^4.0.0", "redux-thunk": "^2.2.0", "reselect": "^4.1.7", "screenfull": "^6.0.2", + "scriptjs": "^2.5.9", "supercluster": "^7.1.5", "video-react": "^0.16.0" }, @@ -5978,21 +5978,6 @@ "react": "^18.0.0" } }, - "node_modules/react-twitter-embed": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz", - "integrity": "sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==", - "dependencies": { - "scriptjs": "^2.5.9" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "react": "^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -11844,14 +11829,6 @@ "prop-types": "^15.5.0" } }, - "react-twitter-embed": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz", - "integrity": "sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==", - "requires": { - "scriptjs": "^2.5.9" - } - }, "redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", diff --git a/package.json b/package.json index d8bfcdd..f268fb6 100644 --- a/package.json +++ b/package.json @@ -31,11 +31,11 @@ "react-image": "^4.0.3", "react-redux": "^8.0.5", "react-tabs": "^6.0.0", - "react-twitter-embed": "^4.0.4", "redux": "^4.0.0", "redux-thunk": "^2.2.0", "reselect": "^4.1.7", "screenfull": "^6.0.2", + "scriptjs": "^2.5.9", "supercluster": "^7.1.5", "video-react": "^0.16.0" }, diff --git a/public/index.html b/public/index.html index c99154c..dadb4ab 100644 --- a/public/index.html +++ b/public/index.html @@ -34,7 +34,7 @@
- This platform is unsuitable for mobile. Please revisit on a desktop. + If you see this message wait up to 30s, otherwise please revisit on a desktop device.
diff --git a/src/components/TemplateCover.jsx b/src/components/TemplateCover.jsx index 5b07ae8..58db260 100644 --- a/src/components/TemplateCover.jsx +++ b/src/components/TemplateCover.jsx @@ -157,15 +157,6 @@ class TemplateCover extends Component { return (
- {/* - Forensic Architecture logo - */} Bellingcat logo diff --git a/src/components/controls/Card.jsx b/src/components/controls/Card.jsx index c4846c5..67c2687 100644 --- a/src/components/controls/Card.jsx +++ b/src/components/controls/Card.jsx @@ -239,11 +239,11 @@ export const Card = ({ className={`event-card ${isSelected ? "selected" : ""}`} onClick={onSelect} > - {content.map((row) => { + {content.map((row, idx) => { if (row[0].kind === "sources" && row[0].values.length > 0) { return ( -
-
+
+
diff --git a/src/components/controls/atoms/Media.jsx b/src/components/controls/atoms/Media.jsx index 8339b39..092f979 100644 --- a/src/components/controls/atoms/Media.jsx +++ b/src/components/controls/atoms/Media.jsx @@ -1,7 +1,7 @@ import { useRef } from "react"; import { useCallback } from "react"; import { typeForPath } from "../../../common/utilities"; -import { TwitterTweetEmbed } from "react-twitter-embed"; +import TwitterTweet from'./TwitterTweet' import TelegramPostEmbed from "./TelegramEmbed"; const TITLE_LENGTH = 50; @@ -88,11 +88,18 @@ const Media = ({ cardIdx, src, title, graphic }) => { ); case "Telegram": - return wrapGraphic( -
- -
- ); + if (src.includes("https://t.me/c/")) { + return + } + try { + return wrapGraphic( +
+ +
+ ); + } catch (error) { + return
Unable to display telegram post
+ } case "Tweet": const tweetIdRegex = @@ -102,15 +109,18 @@ const Media = ({ cardIdx, src, title, graphic }) => { return null; } const tweetId = match[match.length - 1]; - - return wrapGraphic( -
- -
- ); + try { + return wrapGraphic( +
+ +
+ ); + } catch (error) { + return
Unable to display tweet
+ } default: if (src === "HIDDEN") { return ( @@ -123,7 +133,7 @@ const Media = ({ cardIdx, src, title, graphic }) => {
); } else { - return null; + return
other source
} } }; diff --git a/src/components/controls/atoms/TwitterTweet.jsx b/src/components/controls/atoms/TwitterTweet.jsx new file mode 100644 index 0000000..ce33d22 --- /dev/null +++ b/src/components/controls/atoms/TwitterTweet.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import script from 'scriptjs'; +/** + * vite changes led to this error: https://github.com/saurabhnemade/react-twitter-embed/issues/105 + * applied same solution, and dropped https://github.com/saurabhnemade/react-twitter-embed + */ + +var methodName$5 = 'createTweet'; +var twitterWidgetJs = 'https://platform.twitter.com/widgets.js'; + +const TwitterTweet = (props) => { + var ref = React.useRef(null); + + var _React$useState = React.useState(true), + loading = _React$useState[0], + setLoading = _React$useState[1]; + + React.useEffect(function () { + var isComponentMounted = true; + + script(twitterWidgetJs, 'twitter-embed', function () { + if (!window.twttr) { + console.error('Failure to load window.twttr, aborting load'); + return; + } + + if (isComponentMounted) { + if (!window.twttr.widgets[methodName$5]) { + console.error("Method " + methodName$5 + " is not present anymore in twttr.widget api"); + return; + } + + window.twttr.widgets[methodName$5](props.tweetId, ref === null || ref === void 0 ? void 0 : ref.current, props.options).then(function (element) { + setLoading(false); + + if (props.onLoad) { + props.onLoad(element); + } + }); + } + }); + return function () { + isComponentMounted = false; + }; + }, []); + return React.createElement(React.Fragment, null, loading && React.createElement(React.Fragment, null, props.placeholder), React.createElement("div", { + ref: ref + })); +}; +export default TwitterTweet; diff --git a/src/scss/infopopup.scss b/src/scss/infopopup.scss index 1917568..b276c8d 100644 --- a/src/scss/infopopup.scss +++ b/src/scss/infopopup.scss @@ -41,7 +41,7 @@ font-size: 18px; width: 98vw; max-width: none; - max-height: 95vh; + max-height: 80vh; background: rgba(0, 0, 0, 0.95); overflow: auto; figcaption { @@ -135,6 +135,7 @@ width: 100%; margin: 0; text-align: center; + margin-top:15px; } }