From 07d55fceb001435ef39c8eb2d283a4418c64c568 Mon Sep 17 00:00:00 2001
From: Afzaal B <afzaalopera@gmail.com>
Date: Fri, 3 Feb 2023 20:26:44 +0500
Subject: [PATCH] TV Seasons and Episodes support added

---
 src/components/season/EpisodesList.js |  59 +++++++++
 src/components/season/SeasonsList.js  |   4 +-
 src/containers/episode-item/index.js  | 171 ++++++++++++++++++++++++++
 src/containers/season-item/index.js   |  15 ++-
 src/routes/index.js                   |   6 +
 5 files changed, 249 insertions(+), 6 deletions(-)
 create mode 100644 src/components/season/EpisodesList.js
 create mode 100644 src/containers/episode-item/index.js

diff --git a/src/components/season/EpisodesList.js b/src/components/season/EpisodesList.js
new file mode 100644
index 00000000..43243569
--- /dev/null
+++ b/src/components/season/EpisodesList.js
@@ -0,0 +1,59 @@
+import React from "react";
+import { Calendar } from "react-bytesize-icons";
+import Img from "react-cool-img";
+import { Link } from "react-router-dom";
+import { COVER_URL, FALLBACK_IMAGE } from "../../constants";
+
+const EpisodesList = ({ showName, tvId, seasonNumber, episodes }) =>
+  episodes && episodes.length > 0 ? (
+    <article>
+      <h6>Episodes</h6>
+      <div className="row">
+        {episodes.map((episode, i) => {
+          const { name, overview, episode_number, still_path, air_date } =
+            episode;
+          return (
+            <Link
+              key={i}
+              to={`/tv/${tvId}/${showName}/seasons/${seasonNumber}/episodes/${episode_number}`}
+              className="col-sm-12 col-xs-12"
+            >
+              <div className="d-flex rounded-card">
+                <div className="py-2 px-2">
+                  <Img
+                    src={`${COVER_URL + still_path}`}
+                    error={FALLBACK_IMAGE}
+                    className="rounded"
+                    width={144}
+                    alt={name}
+                  />
+                </div>
+                <div className="flex-1-1-a py-2 px-3">
+                  <h6 className="d-flex align-items-center">
+                    <span className="mr-2">{name}</span>
+                    <span className="flex-shrink-0 pill px-3 py-1 mr-2 d-flex align-items-center">
+                      <Calendar
+                        className="align-top mr-2"
+                        width="14"
+                        height="14"
+                        strokeWidth="2"
+                      />
+                      <span>Aired {air_date}</span>
+                    </span>
+                    <small className="flex-shrink-0 ml-auto text-muted">
+                      Episode {episode_number}
+                    </small>
+                  </h6>
+                  <p className="m-0">{overview}</p>
+                </div>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </article>
+  ) : (
+    ""
+  );
+
+export default EpisodesList;
diff --git a/src/components/season/SeasonsList.js b/src/components/season/SeasonsList.js
index 6a6aa12d..a5173e4e 100644
--- a/src/components/season/SeasonsList.js
+++ b/src/components/season/SeasonsList.js
@@ -32,7 +32,7 @@ const SeasonsList = ({ showName, tvId, seasons }) =>
                   <div className="flex-1-1-a py-2 px-3">
                     <h6 className="d-flex align-items-center">
                       <span className="mr-2">{name}</span>
-                      <span className="pill px-3 py-1 mr-2 d-flex align-items-center">
+                      <span className="ml-auto pill px-3 py-1 mr-2 d-flex align-items-center">
                         <Calendar
                           className="align-top mr-2"
                           width="14"
@@ -42,7 +42,7 @@ const SeasonsList = ({ showName, tvId, seasons }) =>
                         <span>Aired {air_date}</span>
                       </span>
                     </h6>
-                    <p>{overview}</p>
+                    <p className="m-0">{overview}</p>
                   </div>
                 </div>
               </Link>
diff --git a/src/containers/episode-item/index.js b/src/containers/episode-item/index.js
new file mode 100644
index 00000000..61213923
--- /dev/null
+++ b/src/containers/episode-item/index.js
@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import { getItemTrailer } from "../../utils";
+import theMovieDb from "themoviedb-javascript-library";
+import isEmpty from "lodash/isEmpty";
+import NoDataFound from "../../components/shared/NoDataFound";
+import Loader from "../../components/shared/Loader";
+import Player from "../../components/item/Player";
+import ItemDetails from "../../components/item/ItemDetails";
+import GA from "react-ga";
+
+class EpisodeItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      playing: false,
+      itemDetails: {},
+      loading: true,
+    };
+  }
+
+  componentDidMount() {
+    const { id, number, episode } = this.props.match.params;
+    this.getItemById(id, number, episode);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { id, number, episode } = this.props.match.params;
+    if (id !== prevProps.match.params.id) {
+      this.getItemById(id, number, episode);
+    }
+  }
+
+  getItemById = (id, season_number, episode_number) => {
+    theMovieDb.tvEpisodes.getById(
+      {
+        id,
+        season_number,
+        episode_number,
+        append_to_response:
+          "videos,recommendations,images&include_image_language=en,null",
+      },
+      (data) => this.successCB(data, id, season_number, episode_number),
+      this.errorCB
+    );
+  };
+
+  successCB = (data, id, season_number, episode_number) => {
+    const fetchedData = JSON.parse(data);
+    this.setState(
+      {
+        loading: false,
+        itemDetails: fetchedData,
+      },
+      () => {
+        theMovieDb.tv.getCredits(
+          { id, season_number, episode_number },
+          this.creditsSuccessCB,
+          this.errorCB
+        );
+      }
+    );
+  };
+
+  errorCB = (data) => {
+    if (data) {
+      this.setState({
+        loading: false,
+        tmdbResponse: JSON.parse(data).status_message,
+      });
+    } else {
+      this.setState({
+        loading: false,
+        itemDetails: {},
+      });
+    }
+  };
+
+  creditsSuccessCB = (data) => {
+    const { itemDetails } = this.state;
+    const fetchedData = JSON.parse(data);
+    this.setState({
+      itemDetails: { ...itemDetails, casts: fetchedData },
+    });
+  };
+
+  handlePlayerState = () => {
+    const { playing } = this.state;
+    this.setState(
+      {
+        playing: !playing,
+      },
+      () => {
+        this.state.playing &&
+          GA.event({
+            category: "Player",
+            action: "Play trailer for tv episode",
+          });
+      }
+    );
+  };
+
+  render() {
+    const { playing, itemDetails, tmdbResponse, loading } = this.state;
+    const {
+      name,
+      status,
+      overview,
+      vote_average,
+      first_air_date,
+      still_path,
+      backdrop_path,
+      genres,
+      homepage,
+      budget,
+      revenue,
+      runtime,
+      imdb_id,
+      videos,
+      images,
+      production_companies,
+    } = itemDetails;
+
+    if (!isEmpty(itemDetails)) {
+      var { stills } = images;
+      var { results } = videos;
+    }
+
+    if (!isEmpty(itemDetails.casts)) {
+      var { cast, crew } = itemDetails.casts;
+    }
+
+    return !isEmpty(itemDetails) ? (
+      <>
+        {results.length > 0 && (
+          <Player
+            videoId={getItemTrailer(results)}
+            poster={backdrop_path ? backdrop_path : still_path}
+            title={name}
+            playing={playing}
+            handlePlayerState={this.handlePlayerState}
+          />
+        )}
+        <ItemDetails
+          id={this.props.match.params.id}
+          title={name}
+          release={first_air_date}
+          genres={genres}
+          runtime={runtime}
+          overview={overview}
+          rating={vote_average}
+          poster={still_path}
+          status={status}
+          link={homepage}
+          budget={budget}
+          revenue={revenue}
+          imdb={imdb_id}
+          backdrops={stills}
+          cast={cast}
+          crew={crew}
+          productionCompanies={production_companies}
+        />
+      </>
+    ) : tmdbResponse ? (
+      <NoDataFound alignCenter spaceTop message={tmdbResponse} />
+    ) : loading ? (
+      <Loader spaceTop />
+    ) : null;
+  }
+}
+
+export default EpisodeItem;
diff --git a/src/containers/season-item/index.js b/src/containers/season-item/index.js
index 7a22a3a8..ff8416ad 100644
--- a/src/containers/season-item/index.js
+++ b/src/containers/season-item/index.js
@@ -1,4 +1,4 @@
-import React, { Component, lazy } from "react";
+import React, { Component } from "react";
 import { getItemTrailer } from "../../utils";
 import theMovieDb from "themoviedb-javascript-library";
 import isEmpty from "lodash/isEmpty";
@@ -6,6 +6,7 @@ import NoDataFound from "../../components/shared/NoDataFound";
 import Loader from "../../components/shared/Loader";
 import Player from "../../components/item/Player";
 import ItemDetails from "../../components/item/ItemDetails";
+import EpisodesList from "../../components/season/EpisodesList";
 import GA from "react-ga";
 
 class SeasonItem extends Component {
@@ -115,7 +116,7 @@ class SeasonItem extends Component {
       imdb_id,
       videos,
       images,
-      seasons,
+      episodes,
       production_companies,
     } = itemDetails;
 
@@ -153,12 +154,18 @@ class SeasonItem extends Component {
           budget={budget}
           revenue={revenue}
           imdb={imdb_id}
-          seasons={seasons}
           backdrops={posters || backdrops}
           cast={cast}
           crew={crew}
           productionCompanies={production_companies}
-        />
+        >
+          <EpisodesList
+            showName={this.props.match.params.name}
+            tvId={this.props.match.params.id}
+            seasonNumber={this.props.match.params.number}
+            episodes={episodes}
+          />
+        </ItemDetails>
       </>
     ) : tmdbResponse ? (
       <NoDataFound alignCenter spaceTop message={tmdbResponse} />
diff --git a/src/routes/index.js b/src/routes/index.js
index 8a4e24f6..bf82f69c 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -8,6 +8,7 @@ import MovieItem from "../containers/movie-item";
 import TvShows from "../containers/tv-shows";
 import TvItem from "../containers/tv-item";
 import SeasonItem from "../containers/season-item";
+import EpisodeItem from "../containers/episode-item";
 import Person from "../containers/person";
 import Search from "../containers/search";
 import Settings from "../containers/settings";
@@ -40,6 +41,11 @@ const MyRouter = () => (
         path="/tv/:id/:name/seasons/:number"
         render={renderComponent(SeasonItem)}
       />
+      <Route
+        exact
+        path="/tv/:id/:name/seasons/:number/episodes/:episode"
+        render={renderComponent(EpisodeItem)}
+      />
 
       {/* Other Features */}
       <Route exact path="/search" render={renderComponent(Search)} />