Merge branch 'main' into creator-dropdown

.all-contributorsrc

@@ -319,6 +319,24 @@
  "contributions": [
  "code"
  ]
+ },
+ {
+ "login": "ammaaraslam",
+ "name": "Ammaar Aslam",
+ "avatar_url": "https://avatars.githubusercontent.com/u/96367405?v=4",
+ "profile": "https://github.com/ammaaraslam",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "mayukh551",
+ "name": "Mayukh Bhowmick",
+ "avatar_url": "https://avatars.githubusercontent.com/u/82811112?v=4",
+ "profile": "https://github.com/mayukh551",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7,

README.md

@@ -1,6 +1,6 @@
 # ReactPlay(Repo: `react-play`)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-35-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-37-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -63,7 +63,7 @@ Please support the work by giving the repository a ⭐, contributing to it, and/
 
 You may want to set up the `react-play` repo for the following reasons:
 
-- You want to create a new play or want to edit an existing play as a contributor. Please check the [Create a Play Guide](./CREATE-PLAY.md) for more details. Also, please check the [Contribution Guide](./CONTRIBUTING.md) to get started.
+- You want to create a new play (A play is a React project) or want to edit an existing play as a contributor. Please check the [Create a Play Guide](./CREATE-PLAY.md) for more details. Also, please check the [Contribution Guide](./CONTRIBUTING.md) to get started.
 
 - You want to contribute to the `react-play` repo in general. Please check the [Contribution Guide](./CONTRIBUTING.md) to get started.
 
@@ -238,6 +238,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <td align="center"><a href="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/harshsinghatz"><img src="https://avatars.githubusercontent.com/u/51085015?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Harsh Singh</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=harshsinghatz" title="Code">💻</a></td>
  <td align="center"><a href="http:https://frankiefab.com"><img src="https://avatars.githubusercontent.com/u/46662771?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Franklin U.O. Ohaegbulam</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=frankiefab100" title="Code">💻</a></td>
  </tr>
+ <tr>
+ <td align="center"><a href="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/ammaaraslam"><img src="https://avatars.githubusercontent.com/u/96367405?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ammaar Aslam</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=ammaaraslam" title="Code">💻</a></td>
+ <td align="center"><a href="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/mayukh551"><img src="https://avatars.githubusercontent.com/u/82811112?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mayukh Bhowmick</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=mayukh551" title="Code">💻</a></td>
+ </tr>
 </table>
 
 <!-- markdownlint-restore -->

src/common/home/Home.jsx

@@ -36,7 +36,7 @@ const Home = () => {
  });
  }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 
- //* array of tweet IDs to show on the home page
+ // array of tweet IDs to show on the home page
  const tweetIdArray = [
  "1544376341172068352", 
  "1530197614771458049",
@@ -50,16 +50,11 @@ const Home = () => {
  "1532349503709122561"
  ]
 
- //* set the state for loading
-
+ // set the state for loading
  const [isTweetsLoading,setTweetsLoading] = useState(true)
 
-
-
- function tweetLoadHandler (){
- //* as soon as tweets loads on DOM disable the loading spinner
- setTweetsLoading(false)
- }
+ // Function to handle the tweets loading state after tweets have been loaded.
+ const tweetLoadHandler = () => setTweetsLoading(false)
 
 
  return (
@@ -171,20 +166,24 @@ const Home = () => {
  </strong> Says!
  </h3>
 
- {
- (isTweetsLoading) ? <Spinner/> :""
- }
- <div className="tweets-container active" >
- {
-
- tweetIdArray.map(id=> {
-
- return <Tweet key={id} tweetId={id}
- onLoad={tweetLoadHandler} options={{width:'410' ,conversation:"none",cards:"hidden",align:"center"}} />
- })
- }
+ {isTweetsLoading && (
+ <Spinner />
+ )}
+ <div className={isTweetsLoading ? "tweets-container" : "tweets-container active"}>
+ {tweetIdArray.map((id) => (
+ <Tweet
+ key={id}
+ tweetId={id}
+ onLoad={tweetLoadHandler}
+ options={{
+ width: "410",
+ conversation: "none",
+ cards: "hidden",
+ align: "center",
+ }}
+ />
+ ))}
  </div>
-
  </section>
  <section className="home-contributors">
  <Contributors />

src/common/playlists/PlayMeta.jsx

@@ -1,28 +1,70 @@
-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 { getProdUrl } 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 [ogTagImage, setOgTagImage] = useState();
+ // const [localImage, setLocalImage] = useState(thumbPlay);
+
+ /**
+ * Fetch local playImage
+ */
+ const processCoverImage = useCallback(async (playObj) => {
+ let metaImg = '';
+ let ogTagImg = '';
+ if(playObj.cover) {
+ metaImg = playObj.cover;
+ ogTagImg = playObj.cover;
+ setMetaImage(metaImg);
+ setOgTagImage(ogTagImg);
+ setLoading(false)
+ return
+ }
+ try {
+ /**
+ * Try to Fetch the local cover image
+ */
+ const response = await import(`plays/${playObj.slug}/cover.png`);
+
+ metaImg = getProdUrl(response.default);
+ ogTagImg = getProdUrl(response.default);
+ setMetaImage(metaImg);
+ setOgTagImage(ogTagImg);
+ setLoading(false) 
+ } catch (_error) {
+ /**
+ * On error set the default image
+ */
+
+ metaImg = thumbPlay;
+ ogTagImg = thumbPlay;
+ setMetaImage(metaImg);
+ setOgTagImage(ogTagImg);
+ setLoading(false) 
+ }
+ }, []);
 
  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);
+ processCoverImage(play_obj);
+ // setLoading(false);
  })
  .catch((err) => {
  setIsError(true);
@@ -38,8 +80,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 +90,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}
+ data-react-helmet="true"
+ />
  <meta
  property="og:image:alt"
  content={play.description}
@@ -71,13 +110,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={ogTagImage}
+ data-react-helmet="true"
+ />
  </Helmet>
  <Suspense fallback={<Loader />}>{renderPlayComponent()}</Suspense>
  </>

src/common/services/string.js

@@ -41,6 +41,9 @@ export const toSlug = (str) => {
 };
 
 export const toSanitized = (str) => {
+ if (!str) {
+ return "";
+ }
  //replace all special characters | symbols with a space
  str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, " ");
  // trim spaces at start and end of string

src/common/utils/playsUtil.js

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param path cover path
+ * @returns absolute url for cover image for production build
+ */
+export const getProdUrl = (path) => {
+ return `https://reactplay.io${path}`;
+};