0.0.0.8 Alpha

frontend/src/app/genres/[genre]/page.js

@@ -141,7 +141,7 @@ export default function GenrePage({ params }) {
               <ScrollSection title="TV Shows" link={"/tvshows"}>
                 {genreItems.series.map((item, index) => (
                   <div key={index} className="genre-item-card">
-                    <Link href={`/series/${item[0]}`} passHref>
+                    <Link href={`/tvshow/${item[0]}`} passHref>
                       <div className="genre-item-link">
                         <Image
                           src={

frontend/src/app/globals.css

@@ -9,6 +9,7 @@
   --bg-secondary: #0c0c16;
   --primary-special-color:#4343ff;
   --gray-text-color:#d8d8d8;
+  --card-color: #1b1b3b;
 }
 
 body {

frontend/src/app/index.css

@@ -2,9 +2,17 @@
   max-width: 100dvw;
 }
 
+@media (orientation: portrait) {
+  .index-page-content {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
 @media (orientation: landscape) {
   .index-page-content {
-    padding: 50px;
+    padding-left: 50px;
+    padding-right: 50px;
   }
 }
 
@@ -14,9 +22,8 @@
   flex: 1;
 }
 
-.index-page-content{
+.index-page-content {
   width: 100dvw;
-  padding: 10px;
   z-index: 1;
 }
 
@@ -33,4 +40,4 @@
   grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
   gap: 16px;
   padding: 0 16px;
-}
+}

frontend/src/app/movie/[title]/movie.css

@@ -222,6 +222,7 @@
   text-align: center;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .movie-genre-item {

frontend/src/app/movie/[title]/page.js

@@ -43,7 +43,9 @@ export async function generateMetadata({ params }) {
   const englishTitle =
     metadata?.translations?.nameTranslations?.find(
       (translation) => translation.language === "eng"
-    )?.name || metadata?.name || "Title not available";
+    )?.name ||
+    metadata?.name ||
+    "Title not available";
 
   return {
     title: englishTitle,
@@ -65,7 +67,9 @@ export default async function MovieDetailsPage({ params }) {
   const englishTitle =
     metadata?.translations?.nameTranslations?.find(
       (translation) => translation.language === "eng"
-    )?.name || metadata?.name || "Title not available";
+    )?.name ||
+    metadata?.name ||
+    "Title not available";
 
   const englishOverview =
     metadata?.translations?.overviewTranslations?.find(
@@ -81,16 +85,18 @@ export default async function MovieDetailsPage({ params }) {
 
   return (
     <div className="movie-details-page app-container">
-      <div
-        className="movie-details-backdrop"
-        style={{
-          backgroundImage: `
+      {backdropImage && (
+        <div
+          className="movie-details-backdrop"
+          style={{
+            backgroundImage: `
             linear-gradient(to right,  rgb(17 18 31 / 80%) 50%, transparent 50%),
             linear-gradient(rgba(0, 0, 0, 0.1) 0%, #11121f 70%),
             url("${backdropImage}")
         `,
-        }}
-      ></div>
+          }}
+        ></div>
+      )}
 
       <div className="movie-details-page-container">
         <div className="movie-details-info">
@@ -114,7 +120,6 @@ export default async function MovieDetailsPage({ params }) {
                   </h1>
                 </div>
                 <label className="movie-geners-section">
-                  <strong>Genre:</strong>{" "}
                   {genres.length > 0 ? (
                     <ul className="movie-genre-list">
                       {genres.map((genre) => (
@@ -128,7 +133,7 @@ export default async function MovieDetailsPage({ params }) {
                       ))}
                     </ul>
                   ) : (
-                    "Genres not available"
+                    ""
                   )}
                 </label>
                 <p>
@@ -148,23 +153,9 @@ export default async function MovieDetailsPage({ params }) {
               <FontAwesomeIcon icon={faBookmarkRegular} size="lg" /> MyList
             </button>
           </div>
-          <div className="movie-details-metadata">
-            <p>
-              <strong>Director / Writer:</strong> Jon Watts, Steve Ditko, Stan
-              Lee, Chris McKenna, Erik Sommers
-            </p>
-            <p>
-              <strong>Stars:</strong> Tom Holland, Angourie Rice, Samuel L.
-              Jackson, Zendaya, Jon Favreau, Jake Gyllenhaal, Marisa Tomei
-            </p>
-          </div>
           <div className="movie-details-overview">
             <h2>Storyline</h2>
             <p>{englishOverview}</p>
-            <p>
-              <strong>Content Rating:</strong>{" "}
-              {metadata?.contentRatings?.[0]?.fullname || "Not Rated"}
-            </p>
           </div>
           <div className="movie-details-metadata">
             <CastSection cast={cast} />

frontend/src/app/player/tvshow/[title]/[season]/[episode]/TvShowPlayerPage.css

@@ -0,0 +1,37 @@
+.film-player-container {
+  width: 100dvw;
+  height: 100dvh;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+}
+
+.loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+.text-white {
+  color: black;
+}
+
+.download-status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.subtitle-inputs {
+  width: 30%;
+  height: 10%;
+  background-color: green;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1000;
+}

frontend/src/app/player/tvshow/[title]/[season]/[episode]/page.js

@@ -1,16 +1,148 @@
 "use client";
+import apiClient from "@/api/apiClient";
+import { useEffect, useState } from "react";
+import MoviePlayer from "@/components/Player/Movie/MoviePlayer";
+import "./TvShowPlayerPage.css";
+import { Spinner } from "@/components/shared/Spinner/Spinner";
+import { Alert } from "react-bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
+import NotFound from "@/app/not-found";
+import ErrorPage from "@/app/_error";
 
-import { useParams } from "next/navigation";
+const DEBUG = false; // Set to true to enable debug mode
 
-export default function TVShowPlayer() {
-  const { title, season, episode } = useParams();
+export default function FilmPlayer({ params }) {
+  const title = decodeURIComponent(params.title);
+  const season = decodeURIComponent(params.season);
+  const episode = decodeURIComponent(params.episode);
+  const [videoUrl, setVideoUrl] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [downloadProgress, setDownloadProgress] = useState(null);
+  const [downloadProgressUrl, setDownloadProgressUrl] = useState(null);
+  const [metadata, setMetadata] = useState(null);
+
+  useEffect(() => {
+    if (DEBUG) {
+      setMetadata({ title: "Debug Tv Show", year: "2024" });
+    } else {
+      const fetchSeriesCard = async () => {
+        try {
+          const data = await apiClient.getSeriesCard(title);
+          if (data.title) {
+            setMetadata(data);
+          } else {
+            setError("Movie card not found");
+            setLoading(false);
+          }
+        } catch (err) {
+          setError("Failed to fetch movie card");
+          setLoading(false);
+        }
+      };
+
+      fetchSeriesCard();
+    }
+  }, [title]);
+
+  useEffect(() => {
+    if (!metadata) return;
+
+    if (DEBUG) {
+      setTimeout(() => {
+        setDownloadProgressUrl("dummy_progress_url");
+        setLoading(false);
+      }, 1000);
+    } else {
+      const fetchVideoData = async () => {
+        try {
+          const data = await apiClient.getSeriesEpisode(title, season, episode);
+          if (data.url) {
+            setVideoUrl(data.url);
+            setLoading(false);
+          } else if (data.status === "Download started") {
+            setDownloadProgressUrl(data.progress_url);
+            setLoading(false);
+          }
+        } catch (err) {
+          setError("Failed to fetch video data");
+          setLoading(false);
+        }
+      };
+
+      fetchVideoData();
+    }
+  }, [title, season, episode, metadata]);
+
+  useEffect(() => {
+    if (!downloadProgressUrl) return;
+
+    if (DEBUG) {
+      const dummyProgressData = {
+        progress: {
+          status: "Downloading",
+          progress: 45.5,
+          eta: 120,
+        },
+      };
+      setDownloadProgress(dummyProgressData.progress);
+    } else {
+      const intervalId = setInterval(async () => {
+        try {
+          const response = await fetch(downloadProgressUrl);
+          const progressData = await response.json();
+          if (progressData.progress.status === "Completed") {
+            clearInterval(intervalId);
+            setDownloadProgressUrl(null);
+            setDownloadProgress(null);
+            setLoading(true);
+            setTimeout(async () => {
+              const data = await apiClient.getSeriesEpisode(title, season, episode);
+              if (data.url) {
+                setVideoUrl(data.url);
+                setLoading(false);
+              }
+            }, 5000); // Wait 5 seconds before fetching the video URL again
+          } else {
+            setDownloadProgress(progressData.progress);
+          }
+        } catch (err) {
+          setError("Failed to fetch download progress");
+        }
+      }, 5000);
+
+      return () => clearInterval(intervalId);
+    }
+  }, [downloadProgressUrl, title, season, episode]);
 
   return (
-    <>
-      <div>
-        <h1 className="text-white">TV Show Player - {title + season + episode}</h1>
-        {/* Add TV show player component here */}
-      </div>
-    </>
+    <div className="film-player-container">
+      {loading && (
+        <div className="loading">
+          <Spinner />
+        </div>
+      )}
+      {error === "Failed to fetch movie card" ? (
+        <NotFound />
+      ) : error && (
+        <ErrorPage errorMessage={error} />
+      )}
+      {downloadProgressUrl && downloadProgress ? (
+        <div className="download-status">
+          <Alert variant="info">
+            <strong>{downloadProgress.status}</strong> -{" "}
+            {downloadProgress.progress.toFixed(2)}%{" "}
+            <p>Wait for {downloadProgress.eta.toFixed(1)} Seconds</p>
+          </Alert>
+        </div>
+      ) : (
+        videoUrl && (
+          <MoviePlayer
+            videoUrl={videoUrl}
+            title={`${metadata.title} (${metadata.year})`}
+          />
+        )
+      )}
+    </div>
   );
 }

frontend/src/app/tvshow/[title]/SeasonSection.css

@@ -0,0 +1,154 @@
+.seasons-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+select {
+  padding: 10px;
+  margin-bottom: 20px;
+  font-size: 1rem;
+  border: 1px solid var(--primary-special-color);
+  border-radius: 8px;
+  background-color: var(--card-color);
+  color: var(--primary-text-color);
+  outline: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+select:hover {
+  background-color: var(--primary-special-color);
+  color: var(--secondary-text-color);
+}
+
+.episode-list {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+}
+
+.episode-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.episode-card {
+  border: 1px solid var(--primary-special-color);
+  background-color: var(--card-color);
+  border-radius: 8px;
+  padding: 16px;
+  margin: 8px;
+  width: 100%;
+  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.episode-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.episode-header {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.episode-number {
+  font-size: 1rem;
+  color: var(--secondary-text-color);
+}
+
+.episode-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.episode-name {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--primary-text-color);
+  text-align: center;
+}
+
+.episode-details {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 0.9rem;
+  color: var(--secondary-text-color);
+}
+
+.episode-overview-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  padding: 20px;
+  box-sizing: border-box;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.episode-card:hover .episode-overview-overlay,
+.show-overlay .episode-overview-overlay {
+  opacity: 1;
+}
+
+.episode-overview {
+  font-size: 0.9rem;
+  color: var(--secondary-text-color);
+  text-align: center;
+  margin-top: 10px;
+  padding: 0 20px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .episode-card {
+    width: 90%;
+  }
+
+  .episode-header {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .episode-name {
+    font-size: 1rem;
+  }
+
+  .episode-image {
+    height: 150px;
+  }
+
+  .episode-details {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .episode-overview {
+    font-size: 0.8rem;
+  }
+}

frontend/src/app/tvshow/[title]/SeasonsSection.js

@@ -0,0 +1,134 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import "./SeasonSection.css";
+import apiClient from "@/api/apiClient";
+import Image from "next/image";
+import Link from "next/link";
+
+const EpisodeSection = ({ episodes }) => (
+  <div className="episode-list">
+    {episodes.map((episode, index) => {
+      // Split the path and remove the first part
+      const pathParts = episode.path.split('/');
+      const newPath = pathParts.slice(1).join('/'); // Join remaining parts
+
+      return (
+        <Link href={`/player/tvshow/${newPath}`} key={episode.path}>
+          <div className="episode-card">
+            <div className="episode-header">
+              <p className="episode-number">Episode {index + 1}</p>
+              <p className="episode-name">{episode.name}</p>
+            </div>
+            <Image
+              src={`https://artworks.thetvdb.com${episode.image}`}
+              alt={episode.name}
+              width={200}
+              height={150}
+              className="episode-image"
+            />
+            <div className="episode-details">
+              <p className="episode-aired">Aired: {episode.aired}</p>
+              <p className="episode-runtime">Runtime: {episode.runtime} mins</p>
+            </div>
+            <div className="episode-overview-overlay">
+              <p className="episode-overview">{episode.overview}</p>
+            </div>
+          </div>
+        </Link>
+      );
+    })}
+  </div>
+);
+
+const fetchSeasonMetadata = async (seriesId, seasonName) => {
+  try {
+    const metadata = await apiClient.getSeasonMetadataBySeriesId(
+      seriesId,
+      seasonName
+    );
+    return metadata;
+  } catch (error) {
+    console.error("Failed to fetch season metadata:", error);
+    return null; // Handle error appropriately
+  }
+};
+
+const SeasonsSection = ({ fileStructure, seriesId, selectedSeason }) => {
+  const [episodesWithMetadata, setEpisodesWithMetadata] = useState([]);
+  const [seasonToFetch, setSeasonToFetch] = useState(
+    selectedSeason ||
+      (fileStructure.contents.length > 0
+        ? fileStructure.contents[0].path.split("/").pop()
+        : "")
+  );
+
+  useEffect(() => {
+    const loadSeasonMetadata = async () => {
+      const seasons = fileStructure.contents.filter(
+        (item) => item.type === "directory"
+      );
+      const metadata = await fetchSeasonMetadata(seriesId, seasonToFetch);
+
+      const selectedSeasonData = seasons.find(
+        (season) => season.path.split("/").pop() === seasonToFetch
+      );
+
+      const episodes = selectedSeasonData
+        ? selectedSeasonData.contents.map((episode) => {
+            const episodeNumber = parseInt(episode.path.match(/S\d+E(\d+)/)[1]); // Extract episode number from path
+            const matchingMetadata = metadata
+              ? metadata.find((meta) => meta.number === episodeNumber)
+              : null;
+
+            return {
+              path: episode.path,
+              name: matchingMetadata
+                ? matchingMetadata.name
+                : episode.path.split("/").pop(),
+              overview: matchingMetadata
+                ? matchingMetadata.overview
+                : "No overview available.",
+              aired: matchingMetadata
+                ? matchingMetadata.aired
+                : "Unknown air date",
+              runtime: matchingMetadata ? matchingMetadata.runtime : 0,
+              image: matchingMetadata ? matchingMetadata.image : "", // Fallback to no image
+            };
+          })
+        : [];
+
+      setEpisodesWithMetadata(episodes);
+    };
+
+    loadSeasonMetadata();
+  }, [fileStructure, seriesId, seasonToFetch]);
+
+  const handleSeasonChange = (event) => {
+    setSeasonToFetch(event.target.value);
+  };
+
+  const seasons = fileStructure.contents.filter(
+    (item) => item.type === "directory"
+  );
+
+  return (
+    <div className="seasons-container">
+      <select defaultValue={seasonToFetch} onChange={handleSeasonChange}>
+        {seasons.map((season) => (
+          <option key={season.path} value={season.path.split("/").pop()}>
+            {season.path.split("/").pop()}
+          </option>
+        ))}
+      </select>
+
+      {episodesWithMetadata.length > 0 ? (
+        <EpisodeSection episodes={episodesWithMetadata} />
+      ) : (
+        <p>No episodes available for this season.</p>
+      )}
+    </div>
+  );
+};
+
+export default SeasonsSection;

frontend/src/app/tvshow/[title]/page.js

@@ -0,0 +1,161 @@
+"use server";
+
+import Link from "next/link";
+import Image from "next/image";
+import "./tvshow.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faPlay,
+  faBookmark as faBookmarkSolid,
+} from "@fortawesome/free-solid-svg-icons";
+import { faBookmark as faBookmarkRegular } from "@fortawesome/free-regular-svg-icons";
+import apiClient from "@/api/apiClient";
+import CastSection from "@/components/shared/Sections/CastSection";
+import NotFound from "@/app/not-found";
+import SeasonsSection from "./SeasonsSection";
+
+function formatTime(minutes) {
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  return `${hours}h ${remainingMinutes}m`;
+}
+
+// Fetch tvshow metadata once and return it
+async function fetchTvshowMetadata(title) {
+  try {
+    const decodedTitle = decodeURIComponent(title);
+    const metadata = await apiClient.getSeriesMetadataByTitle(decodedTitle);
+    return metadata?.data ? metadata : null;
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+}
+
+export async function generateMetadata({ params }) {
+  const { title } = params;
+  const data = await fetchTvshowMetadata(title);
+  const metadata = data?.data;
+  if (!metadata) {
+    return {
+      title: "Tv Show Not Found",
+      description: "The Tv Show you are looking for does not exist.",
+    };
+  }
+
+  const englishTitle =
+    metadata?.translations?.nameTranslations?.find(
+      (translation) => translation.language === "eng"
+    )?.name ||
+    metadata?.name ||
+    "Title not available";
+
+  return {
+    title: englishTitle,
+    description: `Details and information about the Tv Show ${englishTitle}`,
+    openGraph: {
+      images: [metadata?.image || "/default-movie-image.jpg"],
+    },
+  };
+}
+
+export default async function TvShowDetailsPage({ params }) {
+  const { title } = params;
+  const data = await fetchTvshowMetadata(title);
+  const metadata = data?.data;
+  const fileStructure = data?.file_structure || [];
+
+  if (!metadata) {
+    return <NotFound />;
+  }
+
+  const seriesId = metadata?.id || null;
+
+  const englishTitle =
+    metadata?.translations?.nameTranslations?.find(
+      (translation) => translation.language === "eng"
+    )?.name ||
+    metadata?.name ||
+    "Title not available";
+
+  const englishOverview =
+    metadata?.translations?.overviewTranslations?.find(
+      (translation) => translation.language === "eng"
+    )?.overview || "Overview not available";
+
+  const backdropImage = metadata?.artworks?.find(
+    (artwork) => artwork.type === 3
+  )?.image;
+
+  const genres = metadata?.genres || [];
+  const cast = metadata?.characters || [];
+
+  return (
+    <div className="movie-details-page app-container">
+      {backdropImage && (
+        <div
+          className="movie-details-backdrop"
+          style={{
+            backgroundImage: `
+            linear-gradient(to right,  rgb(17 18 31 / 80%) 50%, transparent 50%),
+            linear-gradient(rgba(0, 0, 0, 0.1) 0%, #11121f 70%),
+            url("${backdropImage}")
+        `,
+          }}
+        ></div>
+      )}
+
+      <div className="movie-details-page-container">
+        <div className="movie-details-info">
+          <div className="movie-details-head-section">
+            <div className="movie-details-poster-layout">
+              <div className="movie-details-poster">
+                <Image
+                  src={
+                    metadata?.image ||
+                    "https://via.placeholder.com/800x450?text=No+Image+Available"
+                  }
+                  alt={`${englishTitle} Poster`}
+                  height={300}
+                  width={250}
+                />
+              </div>
+              <div className="movie-details-metadata-right">
+                <div className="movie-details-header">
+                  <h1>
+                    {englishTitle} {"(" + metadata?.year + ")" || ""}
+                  </h1>
+                </div>
+                <label className="movie-geners-section">
+                  {genres.length > 0 ? (
+                    <ul className="movie-genre-list">
+                      {genres.map((genre) => (
+                        <li key={genre.id} className="movie-genre-item">
+                          <Link href={`/genres/${genre.name}`} passHref>
+                            <label className="movie-genre-link">
+                              {genre.name}
+                            </label>
+                          </Link>
+                        </li>
+                      ))}
+                    </ul>
+                  ) : (
+                    "Genres not available"
+                  )}
+                </label>
+              </div>
+            </div>
+          </div>
+          <div className="movie-details-overview">
+            <h2>Storyline</h2>
+            <p>{englishOverview}</p>
+          </div>
+          <div className="movie-details-metadata">
+            <CastSection cast={cast} />
+          </div>
+          <SeasonsSection fileStructure={fileStructure} seriesId={seriesId} />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/tvshow/[title]/tvshow.css

@@ -0,0 +1,257 @@
+@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
+.movie-details-page {
+  position: relative;
+  overflow: hidden;
+  scroll-behavior: smooth;
+  color: #fff;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Backdrop Styling */
+.movie-details-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: 250% ; /* Adjusted size to create a zooming effect */
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: -1;
+  animation: backdrop-anim-portrait 20s ease-in-out infinite;
+  filter: blur(10px);
+}
+
+@keyframes backdrop-anim-portrait {
+  0% {
+    background-position: center;
+    background-size: 300% ;
+  }
+  25% {
+    background-position: top left;
+    background-size: 250% ;
+  }
+  50% {
+    background-position: bottom right;
+    background-size: 300% ;
+  }
+  75% {
+    background-position: top right;
+    background-size: 2500% ;
+  }
+  100% {
+    background-position: center;
+    background-size: 300% ;
+  }
+}
+
+@media (orientation: landscape) {
+  .movie-details-backdrop {
+    background-size: 250%; /* Adjusted size to create a zooming effect */
+    animation: backdrop-anim-landscape 20s ease-in-out infinite;
+  }
+}
+
+@keyframes backdrop-anim-landscape {
+  0% {
+    background-position: center;
+    background-size: 150% ;
+  }
+  25% {
+    background-position: top left;
+    background-size: 120% ;
+  }
+  50% {
+    background-position: bottom right;
+    background-size: 150% ;
+  }
+  75% {
+    background-position: top right;
+    background-size: 120% ;
+  }
+  100% {
+    background-position: center;
+    background-size: 150% ;
+  }
+}
+/* Container Styling */
+.movie-details-page-container {
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Header Styling */
+.movie-details-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.movie-details-header h1 {
+  font-size: 4.5rem;
+  font-family: "Anton", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  margin: 0;
+  text-overflow: ellipsis;
+}
+
+/* Action Buttons */
+.movie-details-actions {
+  display: flex;
+  gap: 15px;
+}
+
+.play-button {
+  border: 1px solid #4339ff;
+  background-color: #17174a; /* Red button color */
+}
+
+.add-list-button {
+  background-color: #333;
+}
+
+.play-button,
+.add-list-button {
+  color: #fff;
+  padding: 12px 24px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.play-button:hover {
+  background-color: #27277c;
+}
+
+.add-list-button:hover {
+  background-color: #444;
+}
+
+.play-button:hover,
+.add-list-button:hover {
+  transform: scale(1.05);
+}
+
+/* Poster Styling */
+.movie-details-poster img {
+  width: 250px;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+  margin-bottom: 20px;
+}
+
+/* Info Section Styling */
+.movie-details-info {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.movie-details-metadata,
+.movie-details-overview {
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+.movie-details-metadata p,
+.movie-details-overview p {
+  margin: 8px 0;
+  line-height: 1.6;
+  font-weight: 300;
+}
+
+.movie-details-metadata-right{
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 100%;
+  flex-wrap: wrap;
+  overflow-wrap: break-word;
+}
+
+.movie-details-overview h2 {
+  margin-bottom: 15px;
+  font-size: 1.5rem;
+  border-bottom: 2px solid #4339ff;
+  padding-bottom: 5px;
+  font-weight: 600;
+}
+
+.movie-details-head-section{
+  display: flex;
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
+.movie-details-poster-layout{
+  display: flex;
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .movie-details-header h1 {
+    font-size: 1.5rem;
+  }
+
+  .movie-details-poster img {
+    width: 100%;
+    max-width: 400px;
+    min-width: 150px;
+  }
+
+  .movie-details-info {
+    flex-direction: column;
+  }
+}
+
+.movie-geners-section {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  align-items: center;
+}
+
+.movie-genre-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.movie-genre-item {
+  margin: 5px;
+}
+
+.movie-genre-link {
+  text-decoration: none;
+  color: #0082f3; /* Next.js blue color */
+  font-weight: bold;
+}
+
+.movie-genre-link:hover {
+  text-decoration: underline;
+}
+
+.loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}

frontend/src/app/tvshows/TvShows.css

@@ -1,4 +1,97 @@
-.page-container{
-    width: 100dvw;
+/* Films Page Container */
+.films-page-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
     height: 100dvh;
-}
+  }
+  
+  /* Films Grid */
+  .films-page {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 0fr));
+    gap: 0;
+    width: 100%;
+    height: auto;
+    justify-content: center;
+  }
+  
+  /* Media Queries for Responsiveness */
+  @media (max-width: 768px) {
+    .films-page {
+      grid-template-columns: repeat(auto-fill, minmax(120px, 0rem));
+      gap: 0;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .films-page {
+      grid-template-columns: repeat(auto-fill, minmax(120px, 0rem));
+    }
+  }
+  
+  /* Pagination Controls */
+  .pagination-controls {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 93dvh;
+    transition: top .2s ease;
+  }
+  
+  /* Pagination Button */
+  .pagination-button {
+    background-color: #1c2354;
+    border: 1px solid #4339ff;
+    color: #ffffff;
+    border-radius: 50%;
+    padding: 10px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 1s, border .5s;
+  }
+  
+  .pagination-button.enabled:hover {
+    background-color: #273281;
+  }
+  
+  .pagination-button.disabled {
+    background-color: #333;
+    cursor: not-allowed;
+    border: none;
+  }
+  
+  /* Page Info */
+  .page-info {
+    font-size: 1.2em;
+    margin: 0 15px;
+    color: #e0e0e0;
+  }
+  
+  /* Handle Animations on Page Load */
+  @keyframes pageLoad {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  .films-page-container {
+    animation: pageLoad 1s ease;
+  }
+  
+  .page-h1{
+    font-size: 2rem;
+    color: white;
+    font-weight: 600;
+  }
+  

frontend/src/app/tvshows/page.js

@@ -1,13 +1,81 @@
-import StillInDevelopment from '../_still-in-development';
-import './TvShows.css';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import apiClient from "@/api/apiClient";
+import TvShowCard from "@/components/shared/Card/TvShowCard";
+import "./TvShows.css";
+
+import {
+  faChevronLeft,
+  faChevronRight,
+} from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
 
 export const metadata = {
   title: 'Tv Shows',
-  description: 'This is Tv Shows Page. here you can Discover Tv Shows.',
+  description: 'This is Tv Shows Page. Here you can discover TV shows.',
+}
+
+const SHOWS_PER_PAGE = 10;
+
+async function fetchShows(page) {
+  let shows = [];
+
+  try {
+    const response = await apiClient.getAllSeriesShows();
+    shows = Object.keys(response);
+  } catch (error) {
+    console.error("Failed to get all shows:", error);
+  }
+
+  const totalPages = Math.ceil(shows.length / SHOWS_PER_PAGE);
+  const currentPage = Math.max(1, Math.min(page, totalPages));
+  const startIndex = (currentPage - 1) * SHOWS_PER_PAGE;
+  const currentShows = shows.slice(startIndex, startIndex + SHOWS_PER_PAGE);
+
+  return { currentShows, currentPage, totalPages };
 }
 
-export default function TVShows() {
+const TvShowsPage = async ({ searchParams }) => {
+  const page = parseInt(searchParams.page) || 1;
+  const { currentShows, currentPage, totalPages } = await fetchShows(page);
+  
+  const isPrevButtonEnabled = currentPage > 1;
+  const isNextButtonEnabled = currentPage < totalPages;
+
   return (
-    <StillInDevelopment/>
+    <div className="films-page-container app-container">
+      <h1 className="page-h1">TV Shows</h1>
+      <div className="films-page">
+        {currentShows.map((title, index) => (
+          <TvShowCard key={index} title={title} />
+        ))}
+      </div>
+      <div className="pagination-controls">
+        <Link href={`?page=${currentPage - 1}`} passHref>
+          <button
+            disabled={!isPrevButtonEnabled}
+            className={`pagination-button ${
+              isPrevButtonEnabled ? "enabled" : "disabled"
+            }`}
+          >
+            <FontAwesomeIcon icon={faChevronLeft} size="xl" />
+          </button>
+        </Link>
+        <span className="page-info">
+          {currentPage} of {totalPages}
+        </span>
+        <Link href={`?page=${currentPage + 1}`} passHref>
+          <button
+            disabled={!isNextButtonEnabled}
+            className={`pagination-button ${
+              isNextButtonEnabled ? "enabled" : "disabled"
+            }`}
+          >
+            <FontAwesomeIcon icon={faChevronRight} size="xl" />
+          </button>
+        </Link>
+      </div>
+    </div>
   );
-}
+};
+
+export default TvShowsPage;

frontend/src/components/shared/Card/Card.css

@@ -4,10 +4,10 @@
 
 .movie-card {
   position: relative;
-  width: 115px;
-  height: 225px;
-  min-width: 115px;
-  min-height: 225px;
+  width: 130px;
+  height: 250px;
+  min-width: 130px;
+  min-height: 250px;
   margin: 10px;
   border-radius: 8px;
   overflow: hidden;

frontend/src/components/shared/Card/TvShowCard.js

@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import apiClient from '@/api/apiClient';
 import SkeletonLoader from '@/skeletons/Card/movieCard';
+import Link from 'next/link';
 import './Card.css';
 
 const TvShowCard = async ({ title }) => {
@@ -27,6 +28,7 @@ const TvShowCard = async ({ title }) => {
   }
 
   return (
+    <Link href={`/tvshow/${title}`}>
     <div className="movie-card">
       <div className="movie-card-image-container">
         <Image
@@ -43,6 +45,7 @@ const TvShowCard = async ({ title }) => {
         <p className="movie-card-year">{movieData.year}</p>
       </div>
     </div>
+    </Link>
   );
 };
 

frontend/src/lib/config.js

@@ -1,7 +1,7 @@
 const config = {
     apiBaseUrl: 'https://hans-den-load-balancer.hf.space',
     searchUrl: 'https://unicone-studio-search.hf.space/api/search',
-    version: "0.0.0.6 Alpha",
+    version: "0.0.0.8 Alpha",
   };
   
 export default config;