Modified the play not found message with search term

src/common/playlists/PlayList.jsx

@@ -1,6 +1,7 @@
 import PlayThumbnail from "./PlayThumbnail";
 import { ReactComponent as ImageOops } from "images/img-oops.svg";
-import React, { Fragment } from "react";
+import React, { Fragment, useEffect, useState, useContext } from "react";
+import { SearchContext } from "common/search/search-context";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "common/spinner/spinner";
 import * as all_plays from "plays";
@@ -11,17 +12,28 @@ import { toSanitized } from "common/services/string";
 
 const PlayList = () => {
   const [loading, error, plays] = useGetPlays();
+  const { searchTerm, filterQuery } = useContext(SearchContext);
+
+  const hasFilterQuery =
+    filterQuery.level_id.length > 0 ||
+    filterQuery.tags.length > 0 ||
+    filterQuery.owner_user_id.length > 0 ||
+    filterQuery.language.length > 0;
 
+    let { playid } = useParams(); // return the parameter of url 
   if (loading) {
     return <Loader />;
   }
 
   if (plays?.length === 0 || error) {
     return (
-      <div className="play-not-found">
-        <ImageOops className="play-not-found-image" />
-        <p className="page-404-lead">Play not found</p>
-        <p className="page-404-desc">
+      <div className='play-not-found'>
+        <ImageOops className='play-not-found-image' />  
+        <p className='page-404-lead'>Play not found 
+        {hasFilterQuery? " for matched filter criteria" : null}
+        {searchTerm ? " for " + searchTerm : null}
+        </p>
+        <p className='page-404-desc'>
           Please change your search or adjust filters to find plays.
         </p>
       </div>