Fix 🐛 Bug #443 : Play snap is broken: Cover image is not appearing

src/common/playlists/PlayMeta.jsx

@@ -1,35 +1,62 @@
-import { useEffect, useState, Suspense } from "react";
+import { useEffect, useState, Suspense, useCallback } from "react";
 import { Helmet } from "react-helmet";
 import * as plays from "plays";
 import { useParams } from "react-router-dom";
 import { submit } from "common/services/request";
 import Loader from "common/spinner/spinner";
-import { toSanitized, toTitleCase, toTitleCaseTrimmed } from "common/services/string";
+import { toSanitized, toTitleCaseTrimmed } from "common/services/string";
 import { FetchPlaysBySlugAndUser } from "common/services/request/query/fetch-plays";
 import { PageNotFound } from "common";
+import thumbPlay from "images/thumb-play.png";
+import { getLocalPlayCoverURL } from "common/utils/playsUtil";
 
 function PlayMeta() {
   const [loading, setLoading] = useState(true);
   const [play, setPlay] = useState({});
   const [isError, setIsError] = useState(false);
   let { playname, username } = useParams(); // return the parameter of url
   const [metaImage, setMetaImage] = useState();
+  const [localImage, setLocalImage] = useState(getLocalPlayCoverURL(thumbPlay));
+
+  /**
+   * Fetch local playImage
+   */
+  const fetchLocalPlayCover = useCallback(async (playObj) => {
+    try {
+      /**
+       * Try to Fetch the local cover image
+       */
+      const response = await import(`plays/${playObj.slug}/cover.png`);
+      setLocalImage(getLocalPlayCoverURL(response.default));
+    } catch (_error) {
+      /**
+       * On error set the default image
+       */
+      setLocalImage(getLocalPlayCoverURL(thumbPlay));
+    }
+  }, []);
 
   useEffect(() => {
     submit(FetchPlaysBySlugAndUser(decodeURI(playname), decodeURI(username)))
       .then((res) => {
-          const play_obj = res[0];
-          play_obj.title_name = toTitleCaseTrimmed(play_obj.name);
-          setPlay(play_obj);
-          setMetaImage(play_obj.cover);
-          setLoading(false);
+        const play_obj = res[0];
+        play_obj.title_name = toTitleCaseTrimmed(play_obj.name);
+        setPlay(play_obj);
+        setMetaImage(play_obj.cover);
+        setLoading(false);
       })
       .catch((err) => {
         setIsError(true);
         setLoading(false);
       });
   }, [playname, username]);
 
+  useEffect(() => {
+    if (play) {
+      fetchLocalPlayCover(play);
+    }
+  }, [play, fetchLocalPlayCover]);
+
   if (loading) {
     return <Loader />;
   }
@@ -38,8 +65,7 @@ function PlayMeta() {
   }
 
   const renderPlayComponent = () => {
-    const Comp =
-      plays[play.component || toSanitized(play.title_name)] ;
+    const Comp = plays[play.component || toSanitized(play.title_name)];
     return <Comp {...play} />;
   };
 
@@ -49,13 +75,11 @@ function PlayMeta() {
         <meta name="description" content={play.description} />
         <meta property="og:title" content={play.name} />
         <meta property="og:description" content={play.description} />
-        {metaImage && (
-          <meta
-            property="og:image"
-            content={metaImage}
-            data-react-helmet="true"
-          />
-        )}
+        <meta
+          property="og:image"
+          content={metaImage ? metaImage : localImage}
+          data-react-helmet="true"
+        />
         <meta
           property="og:image:alt"
           content={play.description}
@@ -71,13 +95,11 @@ function PlayMeta() {
           content={play.description}
           data-react-helmet="true"
         />
-        {metaImage && (
-          <meta
-            name="twitter:image"
-            content={metaImage}
-            data-react-helmet="true"
-          />
-        )}
+        <meta
+          name="twitter:image"
+          content={metaImage ? metaImage : localImage}
+          data-react-helmet="true"
+        />
       </Helmet>
       <Suspense fallback={<Loader />}>{renderPlayComponent()}</Suspense>
     </>

src/common/utils/playsUtil.js

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param path cover path
+ * @returns absolute url for cover image
+ */
+export const getLocalPlayCoverURL = (path) => {
+  return `${window.location.protocol}//${window.location.hostname}${path}`;
+};