mobile display fixes inc tweet embeds (#69)

2026-06-07 19:08:37 +03:00 · 2023-01-27 19:25:10 +00:00
parent d31b498819
commit 7f15e28121
9 changed files with 86 additions and 57 deletions
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <title>TimeMap - Forensic Architecture</title>
+  <title>Civilian Harm in Ukraine Timemap - Bellingcat</title>
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css">
  <!-- <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -37,7 +37,7 @@
  <div class="page">
    <div id="explore-app"></div>
    <div id="nodisplay">
-      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.
    </div>
  </div>
  <script type="module" src="/src/index.jsx"></script>
--- 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",
--- 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"
  },
--- a/public/index.html
+++ b/public/index.html
@@ -34,7 +34,7 @@
            <div id="explore-app"></div>
        </div>
        <div id="nodisplay">
-            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.
        </div>
    </div>
 </body>
--- a/src/components/TemplateCover.jsx
+++ b/src/components/TemplateCover.jsx
@@ -157,15 +157,6 @@ class TemplateCover extends Component {
    return (
      <div className="default-cover-container">
        <div className={showing ? "cover-header" : "cover-header minimized"}>
-          {/* <a
-            className="cover-logo-container"
-            href="https://forensic-architecture.org"
-          >
-            <img
-              className="cover-logo"
-              src={falogo}
-              alt="Forensic Architecture logo" />
-          </a> */}
          <a className="cover-logo-container" href="https://bellingcat.com">
            <img className="cover-logo" src={bcatlogo} alt="Bellingcat logo" />
          </a>
--- 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 (
-            <div>
-              <details open="true">
+            <div key={idx}>
+              <details open={true}>
                <summary>
                  <span className="summary-line"></span>
                  <span className="summary-text">
--- 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(
-        <div className="card-cell media embedded">
-          <TelegramPostEmbed src={src} />
-        </div>
-      );
+      if (src.includes("https://t.me/c/")) {
+        return <div>Private <a href={src}>telegram post</a></div>
+      }
+      try {
+        return wrapGraphic(
+          <div className="card-cell media embedded">
+            <TelegramPostEmbed src={src} />
+          </div>
+        );
+      } catch (error) {
+        return <div>Unable to display <a href={src}>telegram post</a></div>
+      }

    case "Tweet":
      const tweetIdRegex =
@@ -102,15 +109,18 @@ const Media = ({ cardIdx, src, title, graphic }) => {
        return null;
      }
      const tweetId = match[match.length - 1];
-
-      return wrapGraphic(
-        <div className="card-cell media embedded">
-          <TwitterTweetEmbed
-            tweetId={tweetId}
-            options={{ conversation: "none" }}
-          />
-        </div>
-      );
+      try {
+        return wrapGraphic(
+          <div className="card-cell media embedded">
+            <TwitterTweet
+              tweetId={tweetId}
+              options={{ conversation: "none" }}
+            />
+          </div>
+        );
+      } catch (error) {
+        return <div>Unable to display <a href={src}>tweet</a></div>
+      }
    default:
      if (src === "HIDDEN") {
        return (
@@ -123,7 +133,7 @@ const Media = ({ cardIdx, src, title, graphic }) => {
          </div>
        );
      } else {
-        return null;
+        return <div><a href={src}>other source</a></div>
      }
  }
 };
--- a/src/components/controls/atoms/TwitterTweet.jsx
+++ 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;
--- 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;
    }
  }