Created the banner structure and fixed the styling (reactplay#877)

* created the banner structure and fixed the styling

* filtered the array and fixed the banner-button

* fixed the linting issue

* fixed the height of dynamic banner

* fixed the backgroundImage issue

* removed truncate class from description

Co-authored-by: Tapas Adhikary <[email protected]>

src/common/playlists/DynamicBanner.jsx

@@ -0,0 +1,61 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import thumbPlay from 'images/thumb-play.png';
+import { Link } from 'react-router-dom';
+import { MdArrowRightAlt } from 'react-icons/md';
+
+const DynamicBanner = ({ randomPlay }) => {
+ const [coverImage, setCoverImage] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ setLoading(true);
+ if (loading && randomPlay && randomPlay.cover) {
+ setCoverImage(randomPlay.cover);
+ setLoading(false);
+ } else {
+ setLoading(true);
+ import(`plays/${randomPlay.slug}/cover.png`)
+ .then((Cover) => {
+ setCoverImage(Cover.default);
+ setLoading(false);
+ })
+ .catch((err) => {
+ setCoverImage(thumbPlay);
+
+ return {
+ success: false,
+ error: err,
+ message: `Cover image not found for the play ${randomPlay.name}. Setting the default cover image...`
+ };
+ });
+ }
+ }, [randomPlay]);
+
+ if (loading) return <p>loading...</p>;
+
+ return (
+ <Fragment>
+ <div
+ className="dynamic-banner-container"
+ style={{
+ background: `linear-gradient(rgba(0,0,0,0.5), #020808),url(${coverImage} ) center/cover no-repeat`,
+ minHeight: '50vh'
+ }}
+ >
+ <div className="dynamic-banner-body md:pl-14 px-4 py-2 md:py-3">
+ <h1 className="text-white text-3xl md:text-4xl lg:text-5xl">{randomPlay.name}</h1>
+ <p className="text-gray-400 mt-2 text-xs md:text-base ">{randomPlay.description}</p>
+ <Link to={`/plays/${encodeURI(randomPlay?.github?.toLowerCase())}/${randomPlay.slug}`}>
+ <button className="banner-button rounded-full font-extrabold uppercase px-8 md:px-12 md:py-1">
+ Let's Play <MdArrowRightAlt className="right-arrow-icon" size={40} />
+ </button>
+ </Link>
+
+ {/* <Link to={``}><button className='banner-button'>See Creator's profile</button></Link> */}
+ </div>
+ </div>
+ </Fragment>
+ );
+};
+
+export default DynamicBanner;

src/common/playlists/PlayList.jsx

@@ -1,16 +1,29 @@
 import PlayThumbnail from './PlayThumbnail';
 import { ReactComponent as ImageOops } from 'images/img-oops.svg';
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
 import Loader from 'common/spinner/spinner';
 import * as all_plays from 'plays';
 import useGetPlays from 'common/hooks/useGetPlays';
 
 import './playlist.css';
 import { toSanitized } from 'common/services/string';
+import DynamicBanner from './DynamicBanner';
 
 const PlayList = () => {
+ const [randomPlay, setRandomPlay] = useState({});
  const [loading, error, plays] = useGetPlays();
+ useEffect(() => {
+ const filteredPlays = plays.filter(
+ (play) => all_plays[play.component ? play.component : toSanitized(play.title_name)]
+ );
+ // If the filtered array has at least one item, select a random play from the filtered array
+ if (filteredPlays && filteredPlays.length > 0) {
+ // generate a random index to select a random play
+ const randomIndex = Math.floor(Math.random() * filteredPlays.length);
+ setRandomPlay(filteredPlays[randomIndex]);
+ }
+ }, [plays]);
 
  if (loading) {
  return <Loader />;
@@ -28,6 +41,7 @@ const PlayList = () => {
 
  return (
  <Fragment>
+ <DynamicBanner randomPlay={randomPlay} />
  <ol className="list-plays">
  {plays?.map((play, index) => (
  <React.Fragment key={index}>

src/common/playlists/playlist.css

@@ -760,3 +760,45 @@
  height: var(--play-thumb-size-h-mobile);
  }
 }
+
+/* dynamic banner */
+.dynamic-banner-container {
+ color: white;
+ position: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+.dynamic-banner-body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 100%;
+ font-weight: bold;
+ max-width: 600px;
+}
+
+.banner-button{
+ margin-right: 10px;
+ background-color: rgba(255, 255, 255, 0.947);
+ border: none;
+ outline: none;
+ transition-timing-function: 0.5s;
+ transition: all;
+ cursor: pointer;
+ color: black;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+.banner-button:hover{
+ background-color: #e6e6e6c3;
+ color: black;
+
+}
+.right-arrow-icon {
+ color: #25A0A7;
+}
+