Merge pull request #81 from ShreeluSantosh/ShreeluSantoshbranch

Add Up Next episode card
Avdhesh-Varshney · Jun 6, 2024 · 03d046c · 03d046c
2 parents d964119 + 531345a
commit 03d046c
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 14 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -20,16 +20,15 @@ function App() {
       setValue('');
     }
   };
-
-
+
   const handleKeyPress = (event) => {
     if (event.key === 'Enter') {
       setEpisodeNumber(value);
       setStartPlayback(true);
     }
   };
 
-  const handleKey=(e)=>{
+  const handleKey = (e) => {
     setEpisodeNumber(value);
     setStartPlayback(true);
   };
@@ -61,24 +60,21 @@ function App() {
       <div className="row g-3 text-center align-items-center justify-content-center mb-5">
         <div className="col-auto">
           <label htmlFor="inputNumber" className="col-form-label">Episode Number</label>
-
         </div>
         <div className="col-auto">
           <input type="number" id="inputNumber" className="form-control" value={value} onKeyDown={handleKeyPress} onChange={handleOnChange} />
-
         </div>
         <div className='col-auto'>
           <button
-          onClick={handleKey}
-          className="px-4 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded"
+            onClick={handleKey}
+            className="px-4 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded"
           >
             Enter
           </button>
-          </div>
+        </div>
       </div>
 
       {startPlayback && <RequestEpisode episodeNumber={episodeNumber} setEpisodeNumber={setEpisodeNumber} setProgress={setProgress} />}
-
     </div>
   );
 }

diff --git a/src/components/Pages/RequestEpisode.jsx b/src/components/Pages/RequestEpisode.jsx
@@ -12,23 +12,29 @@ const segregate = (url) => {
   } else {
     throw new Error("Unexpected filename format");
   }
+  const title = splitFilename[0];
   const content = splitFilename[1].split(".")[0];
-  return { content, url };
+  return { title, content, url };
 };
 
 const RequestEpisode = (props) => {
-  const { episodeNumber, setProgress,setEpisodeNumber } = props;
+  const { episodeNumber, setProgress, setEpisodeNumber } = props;
   const [content, setContent] = useState('');
   const [url, setUrl] = useState('');
+  const [nextContent, setNextContent] = useState('');
+  const [nextTitle, setNextTitle] = useState('');
 
   const fetchData = async (episodeNumber) => {
     setProgress(5);
     setEpisodeNumber(episodeNumber);
     let episodeName = '';
+    let nextEpisodeName = '';
     if (episodeNumber < 10) {
       episodeName = `Ep 0${episodeNumber}`;
+      nextEpisodeName = `Ep 0${episodeNumber + 1}`;
     } else {
       episodeName = `Ep ${episodeNumber}`;
+      nextEpisodeName = `Ep ${episodeNumber + 1}`;
     }
     setProgress(10);
     try {
@@ -41,28 +47,51 @@ const RequestEpisode = (props) => {
 
       setProgress(55);
       const URL = audioFiles.find(url => url.includes(episodeName));
+      const nextURL = audioFiles.find(url => url.includes(nextEpisodeName));
       if (!URL) {
         throw new Error(`${episodeName} not found`);
       }
       setProgress(80);
       let trimData = segregate(URL);
+      let nextTrimData = nextURL ? segregate(nextURL) : { title: 'No more episodes available,', content: 'this is the finale' };
       setContent(trimData.content);
       setUrl(trimData.url);
+      setNextTitle(nextTrimData.title);
+      setNextContent(nextTrimData.content);
     } catch (error) {
       console.error('Error fetching episode:', error);
       setContent('Error fetching episode');
+      setNextTitle('Error fetching next episode');
+      setNextContent('');
     }
     setProgress(100);
   };
+
   useEffect(() => {
     fetchData(episodeNumber);
   }, [episodeNumber]);
 
   return (
-    <div className="d-flex flex-wrap align-content-around justify-content-evenly">
-      <Card title={`Episode ${episodeNumber}`} content={content} url={url} setEpisodeNumber={setEpisodeNumber} episodeNumber={episodeNumber} fetchData={fetchData} useEffect={useEffect} />
+    <div className="episode-container">
+      <div className="card-container">
+        <Card
+          title={`Episode ${episodeNumber}`}
+          content={content}
+          url={url}
+          setEpisodeNumber={setEpisodeNumber}
+          episodeNumber={episodeNumber}
+          fetchData={fetchData}
+          useEffect={useEffect}
+        />
+      </div>
+      {nextTitle && nextContent && (
+        <div className="next-episode-card">
+          <h5>Up Next:</h5>
+          <p>{nextTitle}  {nextContent}</p>
+        </div>
+      )}
     </div>
   );
-}
+};
 
 export default RequestEpisode;
diff --git a/src/index.css b/src/index.css
@@ -87,3 +87,40 @@ body {
       transform: translateX(1);
   }
 }
+
+/* Adjusting text color highlight for better visibility */
+.episode-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.next-episode-card {
+  border: 1px solid #fff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-top: 20px;
+  width: 450px;
+  height: auto; /* Allow height to adjust to content */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  background-color: rgba(40, 40, 40, 0.8);
+  color: #fff;
+  position: relative;
+}
+
+.card-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.next-episode-card h5, .next-episode-card p {
+  color: #FFBF00; /* Adjusting text color */
+  display: inline-block;
+  padding: 0 4px;
+  border-radius: 4px;
+}
+