v0.2.4 beta - TvShow Player Updated

frontend/app/browse/movies/page.tsx

@@ -176,7 +176,7 @@ export default function MoviesPage() {
     const [filterActive, setFilterActive] = useState(false);
 
     return (
-        <div className="page min-h-screen pt-20 pb-4">
+        <div className="page min-h-screen animate-fade pt-20 pb-4">
             <div className="container mx-auto portrait:px-3 px-4">
                 {/* Header Section */}
                 <div className="mb-8 space-y-2">

frontend/app/browse/tvshows/page.tsx

@@ -176,7 +176,7 @@ export default function TvShowsPage() {
     const [filterActive, setFilterActive] = useState(false);
 
     return (
-        <div className="page min-h-screen pt-20 pb-4">
+        <div className="page min-h-screen animate-fade pt-20 pb-4">
             <div className="container mx-auto portrait:px-3 px-4">
                 {/* Header Section */}
                 <div className="mb-8 space-y-2">

frontend/app/details/movie/[title]/page.tsx

@@ -44,7 +44,7 @@ export default function MovieTitlePage() {
 
     return (
         <div
-            className="page relative w-full min-h-screen h-full flex items-start landscape:pt-24 pt-28 text-white"
+            className="page relative animate-fade w-full min-h-screen h-full flex items-start landscape:pt-24 pt-28 text-white"
             style={{
                 backgroundImage: `url(${movie.artworks?.[0]?.image || movie.image})`,
                 backgroundSize: 'cover',
@@ -64,119 +64,105 @@ export default function MovieTitlePage() {
                     <div className="lg:col-span-2 space-y-6">
                         <div className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
                             {/* Title and Year */}
-                            <div className="space-y-2">
-                                <h1 className="text-4xl font-bold text-white">
-                                    {movie.translations?.nameTranslations?.find(
-                                        (t: { language: string; name: string }) =>
-                                            t.language === 'eng',
-                                    )?.name ||
-                                        movie.translations?.nameTranslations?.find(
-                                            (t: {
-                                                isAlias: boolean;
-                                                language: string;
-                                                name: string;
-                                            }) => t.isAlias && t.language === 'eng',
+                            <div className="flex gap-6 justify-between">
+                                <div className="space-y-2 flex flex-col justify-around">
+                                    <h1 className="text-4xl portrait:text-2xl font-bold text-white">
+                                        {movie.translations?.nameTranslations?.find(
+                                            (t: { language: string; name: string }) =>
+                                                t.language === 'eng',
                                         )?.name ||
-                                        movie?.name ||
-                                        'Unknown Title'}
-                                </h1>
-                                <div className="flex items-center gap-3 text-gray-300">
-                                    <span className="text-lg">{movie.year}</span>
-                                    <span>•</span>
-                                    <span className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm">
-                                        Movie
-                                    </span>
-                                </div>
-                            </div>
-                            {/* Genres and Score */}
-                            <div className="flex flex-wrap items-center gap-4 mt-4">
-                                <div className="flex items-center gap-2">
-                                    <span className="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium">
-                                        ⭐ {movie.score ? (movie.score / 1000).toFixed(1) : 'N/A'}
-                                    </span>
-                                </div>
-                                <div className="flex flex-wrap gap-2">
-                                    {Array.isArray(movie.genres)
-                                        ? movie.genres.map((genre) => (
-                                              <Link
-                                                  key={genre.id}
-                                                  href={`/genre/${encodeURIComponent(genre.slug)}`}
-                                                  className="bg-gray-700/50 hover:bg-gray-600/50 text-gray-200 px-3 py-1 rounded-full text-sm transition-colors"
-                                              >
-                                                  {genre.name}
-                                              </Link>
-                                          ))
-                                        : null}
-                                </div>
-                            </div>
-                            {/* Content Ratings */}
-                            {Array.isArray(movie.contentRatings) &&
-                            movie.contentRatings.length > 0 ? (
-                                <div className="mt-6">
-                                    <h3 className="text-lg font-semibold text-gray-200 mb-3">
-                                        Content Ratings
-                                    </h3>
-                                    <ul className="flex flex-wrap gap-3">
-                                        {movie.contentRatings.map((rating, index) => {
-                                            const countryFlags = {
-                                                AUS: '🇦🇺',
-                                                USA: '🇺🇸',
-                                                GBR: '🇬🇧',
-                                                EU: '🇪🇺',
-                                                JPN: '🇯🇵',
-                                                KOR: '🇰🇷',
-                                                CAN: '🇨🇦',
-                                                DEU: '🇩🇪',
-                                                FRA: '🇫🇷',
-                                                ESP: '🇪🇸',
-                                                ITA: '🇮🇹',
-                                            };
-
-                                            const flag =
-                                                countryFlags[
-                                                    rating.country.toUpperCase() as keyof typeof countryFlags
-                                                ] || '🌍';
+                                            movie.translations?.nameTranslations?.find(
+                                                (t: {
+                                                    isAlias: boolean;
+                                                    language: string;
+                                                    name: string;
+                                                }) => t.isAlias && t.language === 'eng',
+                                            )?.name ||
+                                            movie?.name ||
+                                            'Unknown Title'}
+                                    </h1>
 
-                                            return (
-                                                <li
-                                                    key={index}
-                                                    className="flex items-center bg-gray-800/50 px-2 py-1 rounded-md text-xs"
-                                                >
-                                                    <span className="mr-2">{flag}</span>
-                                                    <span className="text-white font-semibold">
-                                                        {rating.name}
-                                                    </span>
-                                                    <span className="text-gray-400 ml-1">
-                                                        {' '}
-                                                        - {rating.description || 'N/A'}
-                                                    </span>
-                                                </li>
-                                            );
-                                        })}
-                                    </ul>
-                                </div>
-                            ) : (
-                                <p className="text-gray-400 text-sm">
-                                    No content ratings available.
-                                </p>
-                            )}
-
-                            {/* Action Buttons */}
-                            <div className="flex justify-start landscape:gap-2 mt-4">
+                                    <div className="flex items-center gap-3 text-gray-300">
+                                        <span className="text-lg">{movie.year}</span>
+                                        <span>•</span>
+                                        <span className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm">
+                                            Movie
+                                        </span>
+                                    </div>
+                                    {/* Genres and Score */}
+                                    <div className="flex flex-wrap items-center gap-4 mt-4">
+                                        <div className="flex items-center gap-2">
+                                            <span className="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium">
+                                                ⭐{' '}
+                                                {movie.score
+                                                    ? (movie.score / 1000).toFixed(1)
+                                                    : 'N/A'}
+                                            </span>
+                                        </div>
+                                        <div className="flex flex-wrap gap-2">
+                                            {Array.isArray(movie.genres)
+                                                ? movie.genres.map((genre) => (
+                                                      <Link
+                                                          key={genre.id}
+                                                          href={`/genre/${encodeURIComponent(genre.slug)}`}
+                                                          className="bg-gray-700/50 hover:bg-gray-600/50 text-gray-200 px-3 py-1 rounded-full text-sm transition-colors"
+                                                      >
+                                                          {genre.name}
+                                                      </Link>
+                                                  ))
+                                                : null}
+                                        </div>
+                                    </div>
+                                    {/* Content Ratings */}
+                                    {Array.isArray(movie.contentRatings) &&
+                                    movie.contentRatings.length > 0 ? (
+                                        <div className="mt-6">
+                                            <ul className="flex flex-wrap gap-3">
+                                                {movie.contentRatings.slice(0, 1).map((rating, index) => {
+                                                    return (
+                                                        <li
+                                                            key={index}
+                                                            className="flex items-center bg-gray-800/50 px-2 py-1 rounded-md text-xs"
+                                                        >
+                                                            <span className="text-white font-semibold">
+                                                                {rating.name}
+                                                            </span>
+                                                            <span className="text-gray-400 ml-1">
+                                                                {' '}
+                                                                - {rating.description || 'N/A'}
+                                                            </span>
+                                                        </li>
+                                                    );
+                                                })}
+                                            </ul>
+                                        </div>
+                                    ) : (
+                                        ''
+                                    )}
+                                                                {/* Action Buttons */}
+                            <div className="flex portrait:flex-col justify-start landscape:gap-2 mt-4">
                                 <Link
                                     href={`/watch/movie/${encodeURIComponent(decodedTitle)}`}
-                                    className="bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 md:px-8 landscape:rounded-3xl rounded-s-2xl flex items-center gap-1 transition-colors text-sm md:text-base"
+                                    className="bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-1 md:px-8 landscape:rounded-3xl rounded-s-2xl flex items-center gap-1 transition-colors text-sm md:text-base"
                                 >
                                     <PlayIcon className="size-5" />
                                     Play Now
                                 </Link>
                                 <Link
                                     href="#"
-                                    className="bg-gray-800/80 hover:bg-gray-700/80 px-4 py-2 md:px-8 landscape:rounded-3xl rounded-e-2xl transition-colors text-sm md:text-base"
+                                    className="bg-gray-800/80 hover:bg-gray-700/80 px-8 py-1 md:py-2-8 landscape:rounded-3xl rounded-e-2xl transition-colors text-sm md:text-base"
                                 >
                                     Add to My List
                                 </Link>
                             </div>
+                                </div>
+                                <img
+                                    src={movie.image}
+                                    alt={movie.name}
+                                    className="rounded-2xl h-64 w-auto"
+                                />
+                            </div>
+
                         </div>
                         {/* Overview Section */}
                         <div className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">

frontend/app/details/tvshow/[title]/page.tsx

@@ -52,7 +52,7 @@ export default function TvShowTitlePage() {
 
     return (
         <div
-            className="page relative w-full min-h-screen h-full flex items-start landscape:pt-24 pt-28 text-white"
+            className="page relative animate-fade w-full min-h-screen h-full flex items-start landscape:pt-24 pt-28 text-white"
             style={{
                 backgroundImage: `url(${tvshow.artworks?.[0]?.image || tvshow.image})`,
                 backgroundSize: 'cover',

frontend/app/mylist/page.tsx

@@ -12,5 +12,5 @@ export default function MyListPage() {
     if (spinnerLoading === false) {
         setSpinnerLoading(true);
     }
-    return <div></div>;
+    return <div className='animate-fade'></div>;
 }

frontend/app/page.tsx

@@ -6,6 +6,7 @@ import { getRecentItems } from '@lib/lb';
 import Link from 'next/link';
 import { useLoading } from '@/components/loading/SplashScreen';
 import { InformationCircleIcon, PlayIcon } from '@heroicons/react/24/outline';
+import { MOVIE_WATCH_RUOTE, TVSHOW_WATCH_ROUTE, MOVIE_DETAILS_ROUTE, TVSHOW_DETAILS_ROUTE } from '@/lib/config';
 
 interface Slide {
     image: string;
@@ -48,7 +49,7 @@ export default function Page() {
     }, [slides]);
 
     return (
-        <div className="page">
+        <div className="page animate-fade">
             {/* Hero Slideshow */}
             <div className="relative landscape:h-[100vh] portrait:h-[80vh]">
                 {/* Loading Skeleton */}
@@ -116,8 +117,8 @@ export default function Page() {
                                         <Link
                                             href={
                                                 slide.type === 'movie'
-                                                    ? `/watch/movie/${slide.title}`
-                                                    : `/watch/tvshow/${slide.title}`
+                                                    ? `${MOVIE_WATCH_RUOTE}/${slide.title}`
+                                                    : `${TVSHOW_WATCH_ROUTE}${slide.title}`
                                             }
                                             className="bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 landscape:py-2 py-2 md:px-8 md:py-3 landscape:rounded-3xl rounded-s-2xl flex flex-row gap-1 items-center transition-colors text-sm md:text-base"
                                         >
@@ -127,8 +128,8 @@ export default function Page() {
                                         <Link
                                             href={
                                                 slide.type === 'movie'
-                                                    ? `/details/movie/${slide.title}`
-                                                    : `/details/tvshow/${slide.title}`
+                                                    ? `${MOVIE_DETAILS_ROUTE}/${slide.title}`
+                                                    : `${TVSHOW_DETAILS_ROUTE}/${slide.title}`
                                             }
                                             className="bg-gray-800/80 hover:bg-gray-700/80 px-4 landscape:py-2 py-2  md:px-8 md:py-3 landscape:rounded-3xl rounded-e-2xl transition-colors text-sm md:text-base flex flex-row gap-1"
                                         >

frontend/app/search/page.tsx

@@ -8,6 +8,7 @@ import { TvShowCard } from '@/components/tvshow/TvShowCard';
 import ScrollSection from '@/components/sections/ScrollSection';
 import { getSeasonMetadata } from '@/lib/lb';
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { TVSHOW_WATCH_ROUTE } from '@/lib/config';
 
 type EpisodeMetadata = {
     id: number;
@@ -180,11 +181,11 @@ export default function SearchPage() {
     const flattenedEpisodes = results?.episodes ?? [];
 
     return (
-        <div className="page min-h-screen pt-20 pb-4">
+        <div className="page animate-fade min-h-screen pt-20 pb-4">
             <div className="container mx-auto portrait:px-3 px-4">
                 {/* Header Section */}
                 <div className="mb-8 space-y-2">
-                    <h2 className="text-4xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
+                    <h2 className="text-4xl font-bold text-gray-200">
                         Search
                     </h2>
                     <p className="text-gray-400 max-w-3xl">
@@ -230,7 +231,7 @@ export default function SearchPage() {
                                         key={type}
                                         type="button"
                                         onClick={() => toggleType(type)}
-                                        className={`px-5 py-2 rounded-full transition-all duration-300 font-medium
+                                        className={`px-5 py-1 font-extralight rounded-full transition-all duration-300 font-medium
                                         ${
                                             isActive
                                                 ? 'bg-gradient-to-r from-violet-600 to-purple-500 hover:from-violet-500 hover:to-purple-400 text-white shadow-lg shadow-purple-500/20'
@@ -307,7 +308,7 @@ export default function SearchPage() {
                             <ScrollSection title="Episodes" link="/browse/tvshows">
                                 {flattenedEpisodes.map((episode) => (
                                     <Link
-                                        href={`/watch/tvshow/${episode.series}/${episode.season}/${episode.title}`}
+                                        href={`${TVSHOW_WATCH_ROUTE}/${episode.series}/${episode.season}/${episode.title}`}
                                         key={episode.path}
                                         className="w-[180px] flex-shrink-0 rounded-md overflow-hidden bg-gray-800/60 backdrop-blur-sm 
                                         border border-gray-700/50 hover:border-purple-500/50 transition-all duration-300

frontend/app/watch/movie/[title]/page.tsx

@@ -37,8 +37,15 @@ const MoviePlayerPage = () => {
     const videoTitle = Array.isArray(title) ? title[0] : title;
 
     const handleClose = () => {
-        router.back();
+        if (window.history.length > 1) {
+            // If the browser history length is greater than 1, the user has navigated from another page
+            router.back();
+        } else {
+            // Otherwise, push to the homepage
+            router.push('/');
+        }
     };
+    
 
     const [movie, setMovie] = useState<Movie | null>(null);
 

frontend/app/watch/tvshow/[title]/[season]/[episode]/page.tsx

@@ -1,14 +1,16 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import TvShowPlayer from '@/components/tvshow/TvshowPlayer';
+import TvShowPlayer from '@/components/tvshow/TvShowPlayerv2';
 import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { getTvShowMetadata } from '@/lib/lb';
 const TvShowPlayerPage = () => {
     // Assuming you get the movie title from the route params
     const router = useRouter();
     const { title, season, episode } = useParams();
     const videoTitle = Array.isArray(title) ? title[0] : title;
-
+    const decodedTitle = decodeURIComponent(videoTitle);
     const handleClose = () => {
         router.back();
     };
@@ -16,11 +18,44 @@ const TvShowPlayerPage = () => {
     if (!title || !season || !episode) {
         return <div>tvshow title, season or episode is missing.</div>;
     }
+        interface TvShow {
+            name: string;
+            image: string;
+            translations?: any;
+            year?: number;
+            genres?: any[];
+            score?: number;
+            contentRatings?: any[];
+            characters?: any;
+            artworks?: any[];
+            file_structure?: any;
+        }
+    
+        interface FileStructure {
+            contents?: any[];
+        }
+    
+        const [tvshow, setTvShow] = useState<TvShow | null>(null);
+        const [fileStructure, setFileStructure] = useState<FileStructure>({});
+    
+        useEffect(() => {
+            async function fetchMovie() {
+                try {
+                    const data = await getTvShowMetadata(decodedTitle);
+                    setTvShow(data.data);
+                    setFileStructure(data.file_structure);
+                } catch (error) {
+                    console.error('Failed to fetch movie details', error);
+                }
+            }
+            fetchMovie();
+        }, [decodedTitle]);
     return (
         <TvShowPlayer
             videoTitle={decodeURIComponent(videoTitle) as string}
             season={season as string}
             episode={episode as string}
+            fileStructure={fileStructure}
             onClosePlayer={handleClose}
         />
     );

frontend/components/movie/MovieCard.tsx

@@ -12,6 +12,7 @@ import {
 import Link from 'next/link';
 import { StarIcon } from '@heroicons/react/24/solid';
 import TrailersComp from '@/components/shared/Trailers';
+import { MOVIE_DETAILS_ROUTE } from '@/lib/config';
 
 interface Artwork {
     id: number;
@@ -393,7 +394,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ title }) => {
                               {card.overview || 'No overview available.'}
                           </div>
                           <div className="flex flex-row items-center" data-oid="-3dgeqz">
-                              <Link href={`/details/movie/${title}`} data-oid=":xrx9h3">
+                              <Link href={`${MOVIE_DETAILS_ROUTE}/${title}`} data-oid=":xrx9h3">
                                   <button
                                       className="text-white bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 rounded-3xl flex items-center text-sm md:text-base transition-all duration-750 ease-in-out gap-0.5"
                                       data-oid="x3ov0_d"
@@ -413,7 +414,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ title }) => {
         <>
             <div
                 ref={cardRef}
-                className="relative block w-[fit-content] cursor-pointer"
+                className="relative block w-[fit-content] cursor-pointer animate-fade"
                 onMouseEnter={handleCardMouseEnter}
                 onMouseLeave={handleCardMouseLeave}
                 onClick={handleCardClick}
@@ -437,9 +438,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ title }) => {
                         <img
                             src={cardImage}
                             alt={card?.title || title}
-                            className={`w-full h-full object-cover transition-opacity ease-in-out duration-300 ${
-                                imageLoaded ? 'opacity-100' : 'opacity-0'
-                            }`}
+                            className={`w-full h-full animate-fade object-cover transition-opacity ease-in-out duration-300 `}
                             onLoad={() => setImageLoaded(true)}
                             data-oid="xg_ip5e"
                         />

frontend/components/sections/EpisodesSection.tsx

@@ -71,6 +71,11 @@ export default function EpisodesSection({
                             <div className="space-y-2">
                                 {activeSeasonContent.contents?.map(
                                     (episode: any, episodeIdx: number) => {
+                                        // Skip subtitle files
+                                        if (episode.path.endsWith('.srt') || episode.path.endsWith('.vtt')) {
+                                            return null;
+                                        }
+
                                         const match = episode.path.match(
                                             /[S](\d+)[E](\d+) - (.+?)\./,
                                         );

frontend/components/tvshow/EpisodeQueueIcon.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+import { AnimatePresence, motion } from 'framer-motion';
+import { RectangleStackIcon } from '@heroicons/react/16/solid';
+
+interface Episode {
+  episodeNum: string;
+  episodeTitle: string;
+  filePath: string;
+  isSpecial: boolean;
+}
+
+interface SeasonWithEpisodes {
+  seasonName: string;
+  episodes: Episode[];
+}
+
+interface PlayQueueModalProps {
+  seasons: SeasonWithEpisodes[];
+  currentlyPlaying: string; // The filePath or episodeNum of the currently playing episode
+  onClose: () => void;
+}
+
+const PlayQueueModal: React.FC<PlayQueueModalProps> = ({ seasons, currentlyPlaying, onClose }) => {
+  const handleExitAnimationComplete = () => {
+    onClose(); // Close modal after exit animation completes
+  };
+
+  const getEpisodeClass = (episodeFilePath: string) => {
+    // Compare the current episode filePath with the playing one
+    return episodeFilePath === currentlyPlaying
+      ? 'bg-purple-600/50 text-white' // Highlight style for currently playing episode
+      : 'hover:bg-gray-800/50'; // Default style for other episodes
+  };
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        className="absolute top-5 right-0 backdrop-blur-md bg-gray-900/80 text-white rounded-2xl md:w-[28rem] max-h-[80vh] flex flex-col"
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.9 }}
+        transition={{ duration: 0.3 }}
+        onAnimationComplete={(definition) => {
+          if (definition === 'exit') {
+            handleExitAnimationComplete(); // Close modal after exit animation completes
+          }
+        }}
+      >
+        {/* Header Section */}
+        <div className="p-4 bg-gray-900/50 rounded-2xl">
+          <div className="flex justify-between items-center mb-2">
+            <h3 className="text-2xl font-bold">Episodes</h3>
+            <button onClick={onClose}>
+              <XCircleIcon className="w-6 h-6 text-gray-300 hover:text-white transition-all" />
+            </button>
+          </div>
+        </div>
+
+        {/* Episodes Section (Scrollable) */}
+        <motion.div
+          className="space-y-4 overflow-y-scroll flex-grow p-4"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.3, delay: 0.1 }}
+        >
+          {seasons.map((season) => (
+            <div key={season.seasonName}>
+              <h4 className="text-lg font-semibold text-gray-300">{season.seasonName}</h4>
+              {season.episodes.map((episode) => (
+                <Link
+                  href={`/watch/tvshow/${episode.filePath}`}
+                  key={episode.filePath}
+                  passHref
+                >
+                  <motion.div
+                    className={`flex group items-center justify-between py-3 px-4 rounded-lg transition-colors ${getEpisodeClass(episode.filePath)}`}
+                    whileHover={{ scale: 1.05 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    {/* Episode Number and Title */}
+                    <div className="flex items-center">
+                      <span className="text-sm font-semibold text-gray-300 border-2 p-2 rounded-lg border-gray-600 group-hover:border-purple-700">
+                        {episode.episodeNum}
+                      </span>
+                      <span className="ml-3 text-md font-medium text-gray-200 truncate w-80">
+                        {episode.episodeTitle.replace(/_/g, ' ')}
+                      </span>
+                    </div>
+                  </motion.div>
+                </Link>
+              ))}
+            </div>
+          ))}
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+interface EpisodeQueueIconProps {
+  episodes: any[];
+  currentlyPlaying: string; // Pass the filePath or episodeNum for the currently playing episode
+}
+
+const EpisodeQueueIcon: React.FC<EpisodeQueueIconProps> = ({ episodes, currentlyPlaying }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <div className="flex items-center">
+      {episodes.length > 0 && (
+        <button onClick={toggleModal} className="text-white hover:text-purple-300 transition-colors p-2 rounded-full hover:bg-gray-900/30">
+          <RectangleStackIcon className="size-8" />
+        </button>
+      )}
+
+      {/* AnimatePresence ensures the modal exits smoothly */}
+      <AnimatePresence>
+        {isModalOpen && episodes.length > 0 && (
+          <PlayQueueModal
+            seasons={episodes} // Pass grouped seasons and episodes
+            onClose={closeModal}
+            currentlyPlaying={currentlyPlaying} // Pass the currently playing episode to highlight it
+          />
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default EpisodeQueueIcon;

frontend/components/tvshow/TvShowCard.tsx

@@ -12,6 +12,7 @@ import {
 import { StarIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import TrailersComp from '@/components/shared/Trailers';
+import { TVSHOW_DETAILS_ROUTE } from '@/lib/config';
 
 interface Artwork {
     id: number;
@@ -389,7 +390,7 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
                       </div>
                       {/* View Details Button */}
                       <div className="flex flex-row">
-                          <Link href={`/details/tvshow/${title}`}>
+                          <Link href={`${TVSHOW_DETAILS_ROUTE}/${title}`}>
                               <button className="text-white bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 rounded-3xl flex items-center text-sm md:text-base transition-all duration-750 ease-in-out gap-0.5">
                                   View Details
                                   <ChevronRightIcon className="size-4" />

frontend/components/tvshow/TvShowPlayerv2.tsx

@@ -0,0 +1,918 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+    PlayIcon,
+    PauseIcon,
+    SpeakerWaveIcon,
+    SpeakerXMarkIcon,
+    ArrowsPointingOutIcon,
+    ArrowsPointingInIcon,
+    ForwardIcon,
+    BackwardIcon,
+    QuestionMarkCircleIcon,
+} from '@heroicons/react/24/solid';
+import { XCircleIcon, FilmIcon, ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/outline';
+import { getEpisodeLinkByTitle } from '@/lib/lb';
+import { motion, AnimatePresence } from 'framer-motion';
+import EpisodeQueueIcon from './EpisodeQueueIcon';
+import { createPlayQueue } from './utils';
+import { title } from 'process';
+
+interface ContentRating {
+    country: string;
+    name: string;
+    description: string;
+}
+
+interface FileStructure {
+    contents?: any[];
+}
+
+interface MoviePlayerProps {
+    videoTitle: string;
+    season: string;
+    episode: string;
+    movieTitle?: string;
+    contentRatings?: ContentRating[];
+    thumbnail?: string;
+    fileStructure?: FileStructure;
+    poster?: string;
+    onClosePlayer?: () => void; // Optional close handler for page context
+}
+
+interface ProgressData {
+    status: string;
+    progress: number;
+    downloaded: number;
+    total: number;
+}
+
+// Keyboard shortcuts help component
+const KeyboardShortcutsHelp: React.FC = () => {
+    const [showHelp, setShowHelp] = useState(false);
+    const shortcuts = [
+        { key: 'Space / K', action: 'Play/Pause' },
+        { key: 'F', action: 'Toggle Fullscreen' },
+        { key: 'M', action: 'Mute/Unmute' },
+        { key: '←', action: 'Rewind 10s' },
+        { key: '→', action: 'Forward 10s' },
+        { key: '↑', action: 'Volume Up' },
+        { key: '↓', action: 'Volume Down' },
+        { key: '0-9', action: 'Seek to 0-90%' },
+    ];
+
+    return (
+        <div className="relative">
+            <button
+                onClick={() => setShowHelp(!showHelp)}
+                className="text-white hover:text-purple-300 transition-colors p-2 rounded-full hover:bg-gray-900/30 text-xs"
+                title="Keyboard Shortcuts"
+            >
+                <QuestionMarkCircleIcon className="size-6" />
+            </button>
+            <AnimatePresence>
+                {showHelp && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: 10 }}
+                        className="absolute bottom-full left-0 mb-2 p-3 bg-gray-900/90 backdrop-blur-sm rounded-lg text-white text-xs w-64 shadow-lg z-50"
+                    >
+                        <h4 className="font-bold mb-2 text-purple-400">Keyboard Shortcuts</h4>
+                        <div className="grid grid-cols-2 gap-y-1.5">
+                            {shortcuts.map((shortcut, index) => (
+                                <React.Fragment key={index}>
+                                    <div className="font-medium">{shortcut.key}</div>
+                                    <div className="text-gray-300">{shortcut.action}</div>
+                                </React.Fragment>
+                            ))}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+// Time preview component for the progress bar
+const TimePreview: React.FC<{
+    duration: number;
+    progressBarRef: React.RefObject<HTMLDivElement>;
+}> = ({ duration, progressBarRef }) => {
+    const [previewTime, setPreviewTime] = useState(0);
+    const [showPreview, setShowPreview] = useState(false);
+    const [previewPosition, setPreviewPosition] = useState(0);
+
+    // Listen for mousemove events on the document
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!progressBarRef.current || !duration) return;
+            const rect = progressBarRef.current.getBoundingClientRect();
+            // Check if mouse is over the progress bar
+            if (
+                e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top - 30 &&
+                e.clientY <= rect.bottom + 30
+            ) {
+                // Calculate position percentage
+                const position = (e.clientX - rect.left) / rect.width;
+                const time = position * duration;
+                setPreviewTime(time);
+                setPreviewPosition(position * 100);
+                setShowPreview(true);
+            } else {
+                setShowPreview(false);
+            }
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        return () => document.removeEventListener('mousemove', handleMouseMove);
+    }, [duration, progressBarRef]);
+
+    // Format the preview time
+    const formatTime = (time: number): string => {
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time % 3600) / 60);
+        const seconds = Math.floor(time % 60);
+        const minutesStr = minutes.toString().padStart(2, '0');
+        const secondsStr = seconds.toString().padStart(2, '0');
+        return hours > 0 ? `${hours}:${minutesStr}:${secondsStr}` : `${minutesStr}:${secondsStr}`;
+    };
+
+    return (
+        <AnimatePresence>
+            {showPreview && (
+                <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.15 }}
+                    className="absolute bottom-full mb-2 px-2 py-1 bg-gray-900/80 backdrop-blur-sm text-white text-xs rounded pointer-events-none z-50"
+                    style={{ left: `${previewPosition}%`, transform: 'translateX(-50%)' }}
+                >
+                    {formatTime(previewTime)}
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};
+
+const IntegratedPlayerControls: React.FC<{
+    isPlaying: boolean;
+    loading: boolean;
+    togglePlay: () => void;
+}> = ({ isPlaying, loading, togglePlay }) => (
+    <AnimatePresence mode="wait">
+        <motion.button
+            key="play-pause-button"
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 1.2, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            onClick={togglePlay}
+            className="text-white bg-gray-900/30 backdrop-blur-sm p-4 rounded-full hover:bg-purple-500/20 transition-all pointer-events-auto relative w-20 h-20 flex items-center justify-center"
+        >
+            {loading && (
+                <motion.div
+                    className="absolute inset-0 flex items-center justify-center"
+                    style={{ zIndex: 1 }} // Ensure spinner stays behind the button
+                >
+                    <motion.div
+                        animate={{ rotate: 360 }}
+                        transition={{ repeat: Infinity, duration: 1.2, ease: 'linear' }}
+                        className="absolute inset-0 border-4 border-transparent border-t-purple-600 border-l-purple-600 rounded-full"
+                    />
+                </motion.div>
+            )}
+
+            {/* Play/Pause Icon always visible */}
+            {isPlaying ? (
+                <PauseIcon className="w-20 h-20 z-10" />
+            ) : (
+                <PlayIcon className="w-20 h-20 z-10" />
+            )}
+        </motion.button>
+    </AnimatePresence>
+);
+
+// Ad component to show while fetching link with real progress
+const AdPlaceholder: React.FC<{
+    title: string;
+    progress: ProgressData | null;
+    poster: string | undefined;
+}> = ({ title, progress, poster }) => {
+    const progressPercent = progress ? Math.min(100, Math.max(0, progress.progress)) : 0;
+    return (
+        <div className="relative w-full h-full bg-gradient-to-br from-gray-900 to-gray-900 flex flex-col items-center justify-center overflow-hidden">
+            <div className="absolute inset-0 opacity-10">
+                <motion.div
+                    className="absolute w-[500px] h-[500px] rounded-full bg-purple-500 filter blur-3xl"
+                    animate={{ x: ['-20%', '120%'], y: ['30%', '60%'] }}
+                    transition={{
+                        repeat: Infinity,
+                        repeatType: 'reverse',
+                        duration: 15,
+                        ease: 'easeInOut',
+                    }}
+                />
+
+                <motion.div
+                    className="absolute w-[300px] h-[300px] rounded-full bg-blue-500 filter blur-3xl"
+                    animate={{ x: ['120%', '-20%'], y: ['60%', '20%'] }}
+                    transition={{
+                        repeat: Infinity,
+                        repeatType: 'reverse',
+                        duration: 18,
+                        ease: 'easeInOut',
+                    }}
+                />
+            </div>
+            <div className="z-10 text-center max-w-2xl px-6 py-10">
+                <motion.div
+                    initial={{ scale: 0.9, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    transition={{ duration: 0.5 }}
+                    className="mb-6 flex justify-center"
+                >
+                    {!poster ? (
+                        <FilmIcon className="h-20 w-20 text-purple-500" />
+                    ) : (
+                        <img src={poster} alt={title} className="h-auto w-20 rounded-lg" />
+                    )}
+                </motion.div>
+                <motion.h2
+                    initial={{ y: 20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ delay: 0.2, duration: 0.6 }}
+                    className="text-3xl md:text-4xl font-bold text-white mb-4"
+                >
+                    Preparing &quot;{title}&quot;
+                </motion.h2>
+                <motion.div
+                    initial={{ y: 20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ delay: 0.4, duration: 0.6 }}
+                >
+                    <p className="text-gray-300 text-lg mb-8">
+                        {progressPercent < 5
+                            ? 'Initializing your stream...'
+                            : progressPercent < 100
+                              ? 'Your movie is being prepared for streaming.'
+                              : 'Almost ready! Starting playback soon...'}
+                    </p>
+                    <div className="relative w-full h-3 bg-gray-800 rounded-full overflow-hidden">
+                        <div
+                            className="absolute top-0 left-0 h-full bg-gradient-to-r from-purple-600 to-blue-500 transition-all duration-300 ease-out"
+                            style={{ width: `${progressPercent}%` }}
+                        />
+
+                        <div
+                            className="absolute top-0 h-full w-8 bg-white/20 blur-sm transform -skew-x-12"
+                            style={{
+                                left: `calc(${progressPercent}% - 8px)`,
+                                opacity: progressPercent > 0 && progressPercent < 100 ? 1 : 0,
+                            }}
+                        />
+                    </div>
+                    <div className="flex justify-between mt-2 text-sm text-gray-400">
+                        <span>{progressPercent.toFixed(0)}% complete</span>
+                        {progress && progress.downloaded && progress.total && (
+                            <span className="text-gray-500">
+                                {(progress.downloaded / (1024 * 1024)).toFixed(1)} MB /{' '}
+                                {(progress.total / (1024 * 1024)).toFixed(1)} MB
+                            </span>
+                        )}
+                    </div>
+                    <p className="mt-6 text-purple-400 font-medium">
+                        {' '}
+                        Premium members enjoy faster streaming preparation{' '}
+                    </p>
+                </motion.div>
+            </div>
+        </div>
+    );
+};
+
+const MoviePlayer: React.FC<MoviePlayerProps> = ({
+    videoTitle,
+    season,
+    episode,
+    movieTitle = videoTitle,
+    contentRatings = [],
+    thumbnail,
+    poster,
+    fileStructure,
+    onClosePlayer,
+}) => {
+    // Extract season and episode info using regex
+    const episodeRegex = /.*S(\d+)E(\d+).*?-\s*(.*?)(?=\..*|$)/i;
+    const episodeMatch = episode.match(episodeRegex);
+    const seasonNumber = episodeMatch ? episodeMatch[1] : season;
+    const episodeNumber = episodeMatch ? episodeMatch[2] : '';
+    const episodeTitleClean = episodeMatch
+        ? decodeURIComponent(episodeMatch[3])
+        : decodeURIComponent(episode);
+    // Use local spinner state inside the player
+    const [localSpinnerLoading, setLocalSpinnerLoading] = useState(false);
+    // Refs
+    const containerRef = useRef<HTMLDivElement>(null);
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const progressBarRef = useRef<HTMLDivElement>(null);
+    const inactivityRef = useRef<NodeJS.Timeout | null>(null);
+    // Video URL & blob state
+    const [videoUrl, setVideoUrl] = useState<string | null>(null);
+    const [videoBlobUrl, setVideoBlobUrl] = useState<string>('');
+    // Player UI states
+    const [showControls, setShowControls] = useState(true);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isSeeking, setIsSeeking] = useState(false);
+    const [duration, setDuration] = useState(0);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const isMuted = volume === 0;
+    const [buffered, setBuffered] = useState(0);
+    // Link fetching states
+    const [progress, setProgress] = useState<ProgressData | null>(null);
+    const [pollingInterval, setPollingInterval] = useState<NodeJS.Timeout | null>(null);
+    const [videoFetched, setVideoFetched] = useState(false);
+    const videoFetchedRef = useRef(videoFetched);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const [episodes, setEpisodes] = useState<any[]>([]);
+    // Keep ref in sync
+    useEffect(() => {
+        videoFetchedRef.current = videoFetched;
+    }, [videoFetched]);
+
+    useEffect(() => {
+        if (fileStructure && season) {
+            console.log('current season', season);
+            const episodes = createPlayQueue(fileStructure);
+            setEpisodes(episodes);
+            console.log('Episodes:', episodes);
+        }
+    }, [fileStructure, season]);
+    // --- Link Fetching & Polling ---
+    const fetchMovieLink = async () => {
+        if (videoFetchedRef.current) return;
+        try {
+            const response = await getEpisodeLinkByTitle(videoTitle, season, episode);
+            if (response.url) {
+                // Stop any polling if running
+                if (pollingInterval) {
+                    clearInterval(pollingInterval);
+                    setPollingInterval(null);
+                }
+                setVideoUrl(response.url);
+                setVideoFetched(true);
+                console.log('Video URL fetched:', response.url);
+            } else if (response.progress_url) {
+                startPolling(response.progress_url);
+            }
+        } catch (error) {
+            console.error('Error fetching movie link:', error);
+        }
+    };
+
+    const pollProgress = async (progressUrl: string) => {
+        try {
+            const res = await fetch(progressUrl);
+            const data: { progress: ProgressData } = await res.json();
+            setProgress(data.progress);
+            if (data.progress.progress >= 100) {
+                if (pollingInterval) {
+                    clearInterval(pollingInterval);
+                    setPollingInterval(null);
+                }
+                if (!videoFetchedRef.current) {
+                    timeoutRef.current = setTimeout(fetchMovieLink, 5000);
+                }
+            }
+        } catch (error) {
+            console.error('Error polling progress:', error);
+        }
+    };
+
+    const startPolling = (progressUrl: string) => {
+        if (!pollingInterval) {
+            const interval = setInterval(() => pollProgress(progressUrl), 2000);
+            setPollingInterval(interval);
+        }
+    };
+
+    useEffect(() => {
+        fetchMovieLink();
+        return () => {
+            if (pollingInterval) clearInterval(pollingInterval);
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        };
+    }, [videoTitle]);
+
+    // --- Player Control Helpers ---
+    const resetInactivityTimer = () => {
+        setShowControls(true);
+        if (inactivityRef.current) clearTimeout(inactivityRef.current);
+        if (!localSpinnerLoading && isPlaying) {
+            inactivityRef.current = setTimeout(() => setShowControls(false), 3000);
+        }
+    };
+
+    const updateBuffered = () => {
+        if (videoRef.current) {
+            const bufferedTime =
+                videoRef.current.buffered.length > 0
+                    ? videoRef.current.buffered.end(videoRef.current.buffered.length - 1)
+                    : 0;
+            setBuffered(bufferedTime);
+        }
+    };
+
+    useEffect(() => {
+        const interval = setInterval(updateBuffered, 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    // --- Fullscreen Listener ---
+    useEffect(() => {
+        const handleFullScreenChange = () => {
+            setIsFullscreen(document.fullscreenElement === containerRef.current);
+        };
+        document.addEventListener('fullscreenchange', handleFullScreenChange);
+        return () => document.removeEventListener('fullscreenchange', handleFullScreenChange);
+    }, []);
+
+    // --- Blob Fetching ---
+    useEffect(() => {
+        if (videoUrl) {
+            setLocalSpinnerLoading(true);
+            const abortController = new AbortController();
+            const fetchBlob = async () => {
+                try {
+                    const response = await fetch(videoUrl, {
+                        signal: abortController.signal,
+                        mode: 'cors',
+                    });
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const blob = await response.blob();
+                    const blobUrl = URL.createObjectURL(blob);
+                    setVideoBlobUrl(blobUrl);
+                    console.log('Blob URL created:', blobUrl);
+                    setLocalSpinnerLoading(false);
+                } catch (error: any) {
+                    if (error.name === 'AbortError') {
+                        console.log('Blob fetch aborted.');
+                    } else {
+                        console.error('Error fetching video blob:', error);
+                        console.error('Falling back to direct video URL.');
+                        setVideoBlobUrl('');
+                        setLocalSpinnerLoading(false);
+                    }
+                }
+            };
+            fetchBlob();
+            return () => {
+                abortController.abort();
+                if (videoBlobUrl) {
+                    URL.revokeObjectURL(videoBlobUrl);
+                    console.log('Blob URL revoked:', videoBlobUrl);
+                }
+                setVideoBlobUrl('');
+            };
+        }
+    }, [videoUrl]);
+
+    // --- Reset Player on New URL ---
+    useEffect(() => {
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+        setVolume(1);
+        setIsFullscreen(false);
+        resetInactivityTimer();
+        console.log(
+            'Video player loaded using',
+            videoBlobUrl ? 'blob' : 'direct URL',
+            videoBlobUrl,
+        );
+        return () => {
+            if (inactivityRef.current) clearTimeout(inactivityRef.current);
+        };
+    }, [videoUrl]);
+
+    // --- Video Event Handlers ---
+    const handleLoadedMetadata = () => {
+        if (videoRef.current) {
+            setDuration(videoRef.current.duration);
+        }
+    };
+
+    const handleTimeUpdate = () => {
+        if (videoRef.current && !isSeeking) {
+            setCurrentTime(videoRef.current.currentTime);
+            updateBuffered();
+        }
+    };
+
+    const handleProgress = () => {
+        updateBuffered();
+    };
+
+    // Enhanced content rating overlay with Netflix-like animation - only shown once at start
+    const [showRatingOverlay, setShowRatingOverlay] = useState(false);
+    const [ratingShown, setRatingShown] = useState(false);
+
+    const triggerRatingOverlay = () => {
+        if (contentRatings.length > 0 && !ratingShown) {
+            setRatingShown(true);
+            setTimeout(() => {
+                setShowRatingOverlay(true);
+                setTimeout(() => setShowRatingOverlay(false), 8000);
+            }, 800);
+        }
+    };
+
+    const handlePlay = () => {
+        setIsPlaying(true);
+        setLocalSpinnerLoading(false);
+        triggerRatingOverlay();
+    };
+
+    const handlePause = () => {
+        setIsPlaying(false);
+    };
+
+    const togglePlay = () => {
+        if (!videoRef.current) return;
+        videoRef.current.paused ? videoRef.current.play() : videoRef.current.pause();
+    };
+
+    const handleSeekStart = () => setIsSeeking(true);
+    const handleSeekEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newTime = Number(e.target.value);
+        if (videoRef.current) videoRef.current.currentTime = newTime;
+        setCurrentTime(newTime);
+        setIsSeeking(false);
+    };
+
+    // Handle hover over the progress bar for time preview
+    const handleSeekHover = (e: React.MouseEvent<HTMLInputElement>) => {
+        // This is just to ensure the event handler exists
+        // The actual preview is handled by the TimePreview component
+    };
+    const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newVolume = Number(e.target.value);
+        setVolume(newVolume);
+        if (videoRef.current) videoRef.current.volume = newVolume;
+    };
+
+    const toggleMute = () => {
+        if (!videoRef.current) return;
+        if (volume > 0) {
+            setVolume(0);
+            videoRef.current.volume = 0;
+        } else {
+            setVolume(1);
+            videoRef.current.volume = 1;
+        }
+    };
+
+    const toggleFullscreen = async () => {
+        if (!containerRef.current) return;
+        if (!isFullscreen) {
+            await containerRef.current.requestFullscreen?.();
+            setIsFullscreen(true);
+        } else {
+            await document.exitFullscreen?.();
+            setIsFullscreen(false);
+        }
+    };
+
+    const handleClose = () => {
+        onClosePlayer && onClosePlayer();
+    };
+
+    // Keyboard controls
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (!videoRef.current) return;
+            switch (e.key.toLowerCase()) {
+                case ' ':
+                case 'k':
+                    e.preventDefault();
+                    togglePlay();
+                    break;
+                case 'f':
+                    e.preventDefault();
+                    toggleFullscreen();
+                    break;
+                case 'm':
+                    e.preventDefault();
+                    toggleMute();
+                    break;
+                case 'arrowright':
+                    e.preventDefault();
+                    videoRef.current.currentTime = Math.min(duration, currentTime + 10);
+                    break;
+                case 'arrowleft':
+                    e.preventDefault();
+                    videoRef.current.currentTime = Math.max(0, currentTime - 10);
+                    break;
+                case 'arrowup':
+                    e.preventDefault();
+                    const newVolUp = Math.min(1, volume + 0.1);
+                    setVolume(newVolUp);
+                    videoRef.current.volume = newVolUp;
+                    break;
+                case 'arrowdown':
+                    e.preventDefault();
+                    const newVolDown = Math.max(0, volume - 0.1);
+                    setVolume(newVolDown);
+                    videoRef.current.volume = newVolDown;
+                    break;
+                case '0':
+                case '1':
+                case '2':
+                case '3':
+                case '4':
+                case '5':
+                case '6':
+                case '7':
+                case '8':
+                case '9':
+                    const percent = parseInt(e.key) * 10;
+                    videoRef.current.currentTime = (percent / 100) * duration;
+                    break;
+            }
+        };
+
+        if (videoUrl) {
+            window.addEventListener('keydown', handleKeyDown);
+            return () => window.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [videoUrl, togglePlay, toggleFullscreen, toggleMute, duration, currentTime, volume]);
+
+    const formatTime = (time: number): string => {
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time % 3600) / 60);
+        const seconds = Math.floor(time % 60);
+        const minutesStr = minutes.toString().padStart(2, '0');
+        const secondsStr = seconds.toString().padStart(2, '0');
+        return hours > 0 ? `${hours}:${minutesStr}:${secondsStr}` : `${minutesStr}:${secondsStr}`;
+    };
+
+    // --- Progress Bar Calculations ---
+    const playedPercent = duration ? (currentTime / duration) * 100 : 0;
+    const bufferedPercent = duration ? (buffered / duration) * 100 : 0;
+
+    return (
+        <div
+            className="z-30 absolute flex w-full h-full"
+            ref={containerRef}
+            onMouseMove={resetInactivityTimer}
+        >
+            {videoUrl ? (
+                <>
+                    <video
+                        ref={videoRef}
+                        crossOrigin="anonymous"
+                        className="w-full h-full bg-gray-900 object-contain"
+                        style={{ pointerEvents: 'none' }}
+                        onLoadedMetadata={handleLoadedMetadata}
+                        onTimeUpdate={handleTimeUpdate}
+                        onProgress={handleProgress}
+                        onPlay={handlePlay}
+                        onPause={handlePause}
+                        onWaiting={() => setLocalSpinnerLoading(true)}
+                        onCanPlay={() => setLocalSpinnerLoading(false)}
+                        onPlaying={() => setLocalSpinnerLoading(false)}
+                        autoPlay
+                        poster={thumbnail}
+                    >
+                        <source src={videoBlobUrl || videoUrl} type="video/webm" />
+                    </video>
+                    <AnimatePresence>
+                        {showRatingOverlay && contentRatings.length > 0 && (
+                            <motion.div
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -20 }}
+                                transition={{ duration: 0.5 }}
+                                className="fixed top-[5rem] ml-4 inline-flex flex-col items-start bg-gray-900/60 backdrop-blur-sm text-white text-sm px-3 py-1 rounded-md border border-gray-700/50"
+                            >
+                                {/* Rating Name */}
+                                <motion.div className="flex items-center text-xl">
+                                    <span>{contentRatings[0].name}</span>
+                                    {contentRatings[0].country && (
+                                        <span className="w-1 h-6 bg-purple-500 rounded-sm ml-2 mr-2"></span>
+                                    )}
+                                    {/* Description */}
+                                    {contentRatings[0].description && (
+                                        <motion.p
+                                            className="text-white/90 text-xs text-center max-w-md"
+                                            initial={{ opacity: 0 }}
+                                            animate={{ opacity: 1 }}
+                                            transition={{ delay: 0.3, duration: 0.5 }}
+                                        >
+                                            {contentRatings[0].description}
+                                        </motion.p>
+                                    )}
+                                </motion.div>
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+                    {/* Controls Overlay */}
+                    <div
+                        className={`absolute inset-0 flex flex-col justify-between transition-opacity duration-300 z-[1000] ${showControls || localSpinnerLoading ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
+                    >
+                        {/* Top Controls */}
+                        <div className="flex items-center justify-between p-6 bg-gradient-to-b from-gray-900/90 via-gray-900/60 to-transparent">
+                            <div className="flex flex-col">
+                                <h1 className="text-white text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">
+                                    {movieTitle || 'Video Player'}
+                                </h1>
+                                {episodeMatch && (
+                                    <p className="text-white font-extralight text-xl mt-2">
+                                        Season {seasonNumber} - Episode {episodeNumber}:{' '}
+                                        {episodeTitleClean.replace(/_/g, ' ')}
+                                    </p>
+                                )}
+                            </div>
+
+                            {onClosePlayer && (
+                                <button
+                                    onClick={handleClose}
+                                    className="text-white hover:text-red-400 transition-colors p-2 rounded-full hover:bg-gray-900/30"
+                                >
+                                    <ArrowLeftStartOnRectangleIcon className="size-6" />
+                                </button>
+                            )}
+                        </div>
+                        {/* Center Play/Pause Button with integrated loading spinner and fast-forward/rewind controls */}
+                        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                            {/* Skip backward 10s */}
+                            <button
+                                onClick={() => {
+                                    if (videoRef.current) {
+                                        videoRef.current.currentTime = Math.max(
+                                            0,
+                                            currentTime - 10,
+                                        );
+                                    }
+                                }}
+                                className="z-10 relative pointer-events-auto text-white hover:text-purple-300 transition-colors p-2 rounded-full hover:bg-gray-900/30 mx-4"
+                            >
+                                <BackwardIcon className="w-10 h-10" />
+                            </button>
+
+                            <IntegratedPlayerControls
+                                isPlaying={isPlaying}
+                                loading={localSpinnerLoading}
+                                togglePlay={togglePlay}
+                            />
+
+                            {/* Skip forward 10s */}
+                            <button
+                                onClick={() => {
+                                    if (videoRef.current) {
+                                        videoRef.current.currentTime = Math.min(
+                                            duration,
+                                            currentTime + 10,
+                                        );
+                                    }
+                                }}
+                                className="z-10 relative pointer-events-auto text-white hover:text-purple-300 transition-colors p-2 rounded-full hover:bg-gray-900/30 mx-4"
+                            >
+                                <ForwardIcon className="w-10 h-10" />
+                            </button>
+                        </div>
+                        {/* Bottom Controls */}
+                        <div className="flex flex-col p-6 bg-gradient-to-t from-gray-900/90 via-gray-900/60 to-transparent">
+                            {/* Progress Bar */}
+                            <div className="flex items-center justify-between mb-4">
+                                <span className="text-white text-sm font-medium">
+                                    {formatTime(currentTime)}
+                                </span>
+                                {/* Enhanced Progress Bar with time preview */}
+                                <div className="relative w-full mx-4 group">
+                                    {/* Time preview tooltip */}
+                                    <TimePreview
+                                        duration={duration}
+                                        progressBarRef={progressBarRef}
+                                    />
+
+                                    {/* Progress bar */}
+                                    <div
+                                        ref={progressBarRef}
+                                        className="h-1.5 rounded-full bg-gray-700/70 group-hover:h-2.5 transition-all"
+                                    >
+                                        {/* Buffered progress */}
+                                        <div
+                                            className="h-full rounded-full bg-gray-400/50"
+                                            style={{ width: `${bufferedPercent}%` }}
+                                        ></div>
+                                        {/* Played progress */}
+                                        <div
+                                            className="h-full rounded-full bg-gradient-to-r from-purple-600 to-purple-400 absolute top-0 left-0 group-hover:shadow-glow"
+                                            style={{ width: `${playedPercent}%` }}
+                                        >
+                                            {/* Thumb indicator */}
+                                            <div className="absolute right-0 top-1/2 transform -translate-y-1/2 w-3 h-3 bg-white rounded-full scale-0 group-hover:scale-100 transition-transform"></div>
+                                        </div>
+                                    </div>
+                                    {/* Invisible range input for seeking */}
+                                    <input
+                                        type="range"
+                                        min="0"
+                                        max={duration}
+                                        value={
+                                            isSeeking
+                                                ? currentTime
+                                                : videoRef.current?.currentTime || 0
+                                        }
+                                        onMouseDown={handleSeekStart}
+                                        onTouchStart={handleSeekStart}
+                                        onChange={handleSeekEnd}
+                                        onMouseMove={handleSeekHover}
+                                        className="absolute top-0 left-0 w-full h-8 opacity-0 cursor-pointer"
+                                    />
+                                </div>
+                                <span className="text-white text-sm font-medium">
+                                    {formatTime(duration)}
+                                </span>
+                            </div>
+                            {/* Control Buttons */}
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center space-x-6">
+
+                                    {/* Volume */}
+                                    <div className="flex items-center space-x-2 group">
+                                        <button
+                                            onClick={toggleMute}
+                                            className="text-white hover:text-purple-300 transition-colors p-2 rounded-full hover:bg-gray-900/30"
+                                        >
+                                            {isMuted ? (
+                                                <SpeakerXMarkIcon className="size-6" />
+                                            ) : (
+                                                <SpeakerWaveIcon className="size-6" />
+                                            )}
+                                        </button>
+                                        <input
+                                            type="range"
+                                            min={0}
+                                            max={1}
+                                            step={0.01}
+                                            value={volume}
+                                            onChange={handleVolumeChange}
+                                            className="w-0 md:w-24 opacity-0 md:opacity-100 group-hover:w-24 group-hover:opacity-100 transition-all duration-300 accent-purple-500"
+                                        />
+                                    </div>
+                                        {/* Keyboard shortcuts help button */}
+                                        <KeyboardShortcutsHelp />
+                                </div>
+                                <div className="flex flex-row items-center space-x-4">
+                                    <EpisodeQueueIcon episodes={episodes} currentlyPlaying={`${decodeURIComponent(videoTitle)}/${decodeURIComponent(season)}/${decodeURIComponent(episode)}`}/>
+                                    {/* Fullscreen */}
+                                    <button
+                                        onClick={toggleFullscreen}
+                                        className="text-white hover:text-purple-300 transition-colors p-2 rounded-full hover:bg-gray-900/30"
+                                    >
+                                        {!isFullscreen ? (
+                                            <ArrowsPointingOutIcon className="size-6" />
+                                        ) : (
+                                            <ArrowsPointingInIcon className="size-6" />
+                                        )}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </>
+            ) : (
+                // Link Fetcher UI with Ad Placeholder and real progress
+                <AdPlaceholder title={movieTitle} progress={progress} poster={poster} />
+            )}
+            <style jsx>{`
+                @keyframes fade-out {
+                    0% {
+                        opacity: 1;
+                    }
+                    80% {
+                        opacity: 1;
+                    }
+                    100% {
+                        opacity: 0;
+                    }
+                }
+                .animate-fade-out {
+                    animation: fade-out 4s forwards;
+                }
+                .shadow-glow {
+                    box-shadow: 0 0 8px 2px rgba(168, 85, 247, 0.4);
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default MoviePlayer;

frontend/components/tvshow/TvshowPlayer.tsx

@@ -8,12 +8,13 @@ import {
     SpeakerXMarkIcon,
     ArrowsPointingOutIcon,
     ArrowsPointingInIcon,
-    RectangleStackIcon,
 } from '@heroicons/react/24/solid';
 import { XCircleIcon } from '@heroicons/react/24/outline';
 import { getEpisodeLinkByTitle } from '@/lib/lb';
 import Hls from 'hls.js';
 import { motion, AnimatePresence } from 'framer-motion';
+import EpisodeQueueIcon from './EpisodeQueueIcon';
+import { createPlayQueue } from './utils';
 
 interface ContentRating {
     country: string;
@@ -21,11 +22,16 @@ interface ContentRating {
     description: string;
 }
 
+interface FileStructure {
+    contents?: any[];
+}
+
 interface TvShowPlayerProps {
     videoTitle: string;
     season: string;
     episode: string;
     contentRatings?: ContentRating[];
+    fileStructure?: FileStructure;
     onClosePlayer?: () => void;
 }
 
@@ -65,6 +71,7 @@ const TvShowPlayer: React.FC<TvShowPlayerProps> = ({
     season,
     episode,
     contentRatings = [],
+    fileStructure,
     onClosePlayer,
 }) => {
     // Extract season and episode info using regex
@@ -112,12 +119,24 @@ const TvShowPlayer: React.FC<TvShowPlayerProps> = ({
     const [videoFetched, setVideoFetched] = useState(false);
     const videoFetchedRef = useRef(videoFetched);
     const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const [episodes, setEpisodes] = useState<any[]>([]);
 
     // Keep ref in sync
     useEffect(() => {
         videoFetchedRef.current = videoFetched;
     }, [videoFetched]);
 
+    useEffect(() => {
+        if (fileStructure && seasonNumber) {
+            console.log('current season',season)
+            const episodes = createPlayQueue(fileStructure, decodeURIComponent(season));
+            setEpisodes(episodes);
+            console.log('Episodes:', episodes);
+        }
+    }
+    , [fileStructure, seasonNumber]);
+
+
     // --- Link Fetching & Polling ---
     const fetchMovieLink = async () => {
         if (videoFetchedRef.current) return;
@@ -382,10 +401,6 @@ const TvShowPlayer: React.FC<TvShowPlayerProps> = ({
         }
     };
 
-    const toggleEpisodesContainer = () => {
-        console.log('Episodes container toggled');
-    };
-
     const handleClose = () => {
         onClosePlayer && onClosePlayer();
     };
@@ -585,12 +600,8 @@ const TvShowPlayer: React.FC<TvShowPlayerProps> = ({
                                     />
                                 </div>
                                 <div className="flex items-center space-x-6">
-                                    <button
-                                        onClick={toggleEpisodesContainer}
-                                        className="text-white hover:text-purple-300 transition-colors"
-                                    >
-                                        <RectangleStackIcon className="w-10 h-10" />
-                                    </button>
+                                    <EpisodeQueueIcon episodes={episodes}/>
+
                                     <button
                                         onClick={toggleFullscreen}
                                         className="text-white hover:text-purple-300 transition-colors"

frontend/components/tvshow/utils.ts

@@ -0,0 +1,67 @@
+interface FileStructure {
+    contents?: any[];
+}
+
+interface Episode {
+    episodeNum: string;
+    episodeTitle: string;
+    filePath: string;
+    isSpecial: boolean;
+}
+
+interface SeasonWithEpisodes {
+    seasonName: string;
+    episodes: Episode[];
+}
+
+export function createPlayQueue(fileStructure: FileStructure): SeasonWithEpisodes[] {
+    const seasonsWithEpisodes: SeasonWithEpisodes[] = [];
+
+    // Loop through each season in the file structure
+    fileStructure.contents?.forEach((seasonContent) => {
+        const seasonName = seasonContent.path.split('/').pop() || '';
+
+        const episodes: Episode[] = [];
+
+        // Process each episode in the season
+        seasonContent.contents?.forEach((episode: any) => {
+            // Skip subtitle files
+            if (episode.path.endsWith('.srt') || episode.path.endsWith('.vtt')) {
+                return;
+            }
+
+            // Match the episode name format
+            const match = episode.path.match(/[S](\d+)[E](\d+) - (.+?)\./);
+            if (match) {
+                const [, , episodeNum, episodeTitle] = match;
+                const isSpecial = seasonContent.path.includes('Specials');
+                let filePath = episode.path;
+
+                // Remove "tv/" from the file path
+                if (filePath.startsWith('tv/')) {
+                    filePath = filePath.slice(3);
+                }
+
+                episodes.push({
+                    episodeNum,
+                    episodeTitle,
+                    filePath: filePath,
+                    isSpecial,
+                });
+            }
+        });
+
+        // Sort episodes by their episode number
+        episodes.sort((a, b) => parseInt(a.episodeNum) - parseInt(b.episodeNum));
+
+        // Add the season with its episodes
+        if (episodes.length > 0) {
+            seasonsWithEpisodes.push({
+                seasonName,
+                episodes,
+            });
+        }
+    });
+
+    return seasonsWithEpisodes;
+}

frontend/lib/config.ts

@@ -1,2 +1,6 @@
-export const WEB_VERSION = 'v0.2.3 beta';
-export const SEARCH_API_URL = 'https://hans-den-search.hf.space';
+export const WEB_VERSION = 'v0.2.4 beta';
+export const SEARCH_API_URL = 'https://hans-den-search.hf.space';
+export const MOVIE_WATCH_RUOTE = '/watch/movie';
+export const TVSHOW_WATCH_ROUTE = '/watch/tvshow';
+export const MOVIE_DETAILS_ROUTE = '/details/movie';
+export const TVSHOW_DETAILS_ROUTE = '/details/tvshow';

frontend/lib/utils.ts

@@ -10,251 +10,3 @@ export function convertMinutesToHM(minutes:number) {
   const mins = minutes % 60;
   return `${hours}h${mins.toString().padStart(2, '0')}mins`;
 }
-
-const countryNames: { [key: string]: string } = {
-  AFG: 'Afghanistan',
-  ALB: 'Albania',
-  DZA: 'Algeria',
-  ASM: 'American Samoa',
-  AND: 'Andorra',
-  AGO: 'Angola',
-  AIA: 'Anguilla',
-  ATA: 'Antarctica',
-  ATG: 'Antigua and Barbuda',
-  ARG: 'Argentina',
-  ARM: 'Armenia',
-  ABW: 'Aruba',
-  AUS: 'Australia',
-  AUT: 'Austria',
-  AZE: 'Azerbaijan',
-  BHS: 'Bahamas',
-  BHR: 'Bahrain',
-  BGD: 'Bangladesh',
-  BRB: 'Barbados',
-  BLR: 'Belarus',
-  BEL: 'Belgium',
-  BLZ: 'Belize',
-  BEN: 'Benin',
-  BMU: 'Bermuda',
-  BTN: 'Bhutan',
-  BOL: 'Bolivia',
-  BIH: 'Bosnia and Herzegovina',
-  BWA: 'Botswana',
-  BRA: 'Brazil',
-  IOT: 'British Indian Ocean Territory',
-  VGB: 'British Virgin Islands',
-  BRN: 'Brunei',
-  BGR: 'Bulgaria',
-  BFA: 'Burkina Faso',
-  BDI: 'Burundi',
-  KHM: 'Cambodia',
-  CMR: 'Cameroon',
-  CAN: 'Canada',
-  CPV: 'Cape Verde',
-  CYM: 'Cayman Islands',
-  CAF: 'Central African Republic',
-  TCD: 'Chad',
-  CHL: 'Chile',
-  CHN: 'China',
-  CXR: 'Christmas Island',
-  CCK: 'Cocos Islands',
-  COL: 'Colombia',
-  COM: 'Comoros',
-  COK: 'Cook Islands',
-  CRI: 'Costa Rica',
-  HRV: 'Croatia',
-  CUB: 'Cuba',
-  CUW: 'Curacao',
-  CYP: 'Cyprus',
-  CZE: 'Czech Republic',
-  COD: 'Democratic Republic of the Congo',
-  DNK: 'Denmark',
-  DJI: 'Djibouti',
-  DMA: 'Dominica',
-  DOM: 'Dominican Republic',
-  TLS: 'East Timor',
-  ECU: 'Ecuador',
-  EGY: 'Egypt',
-  SLV: 'El Salvador',
-  GNQ: 'Equatorial Guinea',
-  ERI: 'Eritrea',
-  EST: 'Estonia',
-  ETH: 'Ethiopia',
-  FLK: 'Falkland Islands',
-  FRO: 'Faroe Islands',
-  FJI: 'Fiji',
-  FIN: 'Finland',
-  FRA: 'France',
-  PYF: 'French Polynesia',
-  GAB: 'Gabon',
-  GMB: 'Gambia',
-  GEO: 'Georgia',
-  DEU: 'Germany',
-  GHA: 'Ghana',
-  GIB: 'Gibraltar',
-  GRC: 'Greece',
-  GRL: 'Greenland',
-  GRD: 'Grenada',
-  GUM: 'Guam',
-  GTM: 'Guatemala',
-  GGY: 'Guernsey',
-  GIN: 'Guinea',
-  GNB: 'Guinea-Bissau',
-  GUY: 'Guyana',
-  HTI: 'Haiti',
-  HND: 'Honduras',
-  HKG: 'Hong Kong',
-  HUN: 'Hungary',
-  ISL: 'Iceland',
-  IND: 'India',
-  IDN: 'Indonesia',
-  IRN: 'Iran',
-  IRQ: 'Iraq',
-  IRL: 'Ireland',
-  IMN: 'Isle of Man',
-  ISR: 'Israel',
-  ITA: 'Italy',
-  CIV: 'Ivory Coast',
-  JAM: 'Jamaica',
-  JPN: 'Japan',
-  JEY: 'Jersey',
-  JOR: 'Jordan',
-  KAZ: 'Kazakhstan',
-  KEN: 'Kenya',
-  KIR: 'Kiribati',
-  XKX: 'Kosovo',
-  KWT: 'Kuwait',
-  KGZ: 'Kyrgyzstan',
-  LAO: 'Laos',
-  LVA: 'Latvia',
-  LBN: 'Lebanon',
-  LSO: 'Lesotho',
-  LBR: 'Liberia',
-  LBY: 'Libya',
-  LIE: 'Liechtenstein',
-  LTU: 'Lithuania',
-  LUX: 'Luxembourg',
-  MAC: 'Macau',
-  MKD: 'Macedonia',
-  MDG: 'Madagascar',
-  MWN: 'Malawi',
-  MYS: 'Malaysia',
-  MDV: 'Maldives',
-  MLI: 'Mali',
-  MLT: 'Malta',
-  MHL: 'Marshall Islands',
-  MRT: 'Mauritania',
-  MUS: 'Mauritius',
-  MYT: 'Mayotte',
-  MEX: 'Mexico',
-  FSM: 'Micronesia',
-  MDA: 'Moldova',
-  MCO: 'Monaco',
-  MNG: 'Mongolia',
-  MNE: 'Montenegro',
-  MSR: 'Montserrat',
-  MAR: 'Morocco',
-  MOZ: 'Mozambique',
-  MMR: 'Myanmar',
-  NAM: 'Namibia',
-  NRU: 'Nauru',
-  NPL: 'Nepal',
-  NLD: 'Netherlands',
-  ANT: 'Netherlands Antilles',
-  NCL: 'New Caledonia',
-  NZL: 'New Zealand',
-  NIC: 'Nicaragua',
-  NER: 'Niger',
-  NGA: 'Nigeria',
-  NIU: 'Niue',
-  PRK: 'North Korea',
-  MNP: 'Northern Mariana Islands',
-  NOR: 'Norway',
-  OMN: 'Oman',
-  PAK: 'Pakistan',
-  PLW: 'Palau',
-  PSE: 'Palestine',
-  PAN: 'Panama',
-  PNG: 'Papua New Guinea',
-  PRY: 'Paraguay',
-  PER: 'Peru',
-  PHL: 'Philippines',
-  PCN: 'Pitcairn',
-  POL: 'Poland',
-  PRT: 'Portugal',
-  PRI: 'Puerto Rico',
-  QAT: 'Qatar',
-  COG: 'Republic of the Congo',
-  REU: 'Reunion',
-  ROU: 'Romania',
-  RUS: 'Russia',
-  RWA: 'Rwanda',
-  BLM: 'Saint Barthelemy',
-  SHN: 'Saint Helena',
-  KNA: 'Saint Kitts and Nevis',
-  LCA: 'Saint Lucia',
-  MAO: 'Saint Martin',
-  SPM: 'Saint Pierre and Miquelon',
-  VCT: 'Saint Vincent and the Grenadines',
-  WSM: 'Samoa',
-  SMR: 'San Marino',
-  STP: 'Sao Tome and Principe',
-  SAU: 'Saudi Arabia',
-  SEN: 'Senegal',
-  SRB: 'Serbia',
-  SYC: 'Seychelles',
-  SLE: 'Sierra Leone',
-  SGP: 'Singapore',
-  SXM: 'Sint Maarten',
-  SVK: 'Slovakia',
-  SVN: 'Slovenia',
-  SLB: 'Solomon Islands',
-  SOM: 'Somalia',
-  ZAF: 'South Africa',
-  KOR: 'South Korea',
-  SSD: 'South Sudan',
-  ESP: 'Spain',
-  LKA: 'Sri Lanka',
-  SDN: 'Sudan',
-  SUR: 'Suriname',
-  SJM: 'Svalbard and Jan Mayen',
-  SWZ: 'Swaziland',
-  SWE: 'Sweden',
-  CHE: 'Switzerland',
-  SYR: 'Syria',
-  TWN: 'Taiwan',
-  TJK: 'Tajikistan',
-  TZA: 'Tanzania',
-  THA: 'Thailand',
-  TGO: 'Togo',
-  TKL: 'Tokelau',
-  TON: 'Tonga',
-  TTO: 'Trinidad and Tobago',
-  TUN: 'Tunisia',
-  TUR: 'Turkey',
-  TKM: 'Turkmenistan',
-  TCA: 'Turks and Caicos Islands',
-  TUV: 'Tuvalu',
-  VIR: 'U.S. Virgin Islands',
-  UGA: 'Uganda',
-  UKR: 'Ukraine',
-  ARE: 'United Arab Emirates',
-  GBR: 'United Kingdom',
-  USA: 'United States',
-  URY: 'Uruguay',
-  UZB: 'Uzbekistan',
-  VUT: 'Vanuatu',
-  VAT: 'Vatican',
-  VEN: 'Venezuela',
-  VNM: 'Vietnam',
-  WLF: 'Wallis and Futuna',
-  ESH: 'Western Sahara',
-  YEM: 'Yemen',
-  ZMB: 'Zambia',
-  ZWE: 'Zimbabwe',
-};
-
-export function getCountryName(countryCode: string): string {
-  const upperCaseCode = countryCode.toUpperCase();
-  return countryNames[upperCaseCode] || countryCode;
-}

frontend/tailwind.config.ts

@@ -9,6 +9,16 @@ const config: Config = {
   ],
   theme: {
   	extend: {
+		animation: {
+			fade: 'fadeIn .5s ease-in-out',
+		},
+
+		keyframes: {
+			fadeIn: {
+				from: { opacity: '0' },
+				to: { opacity: '1' },
+			},
+		},
   		backgroundImage: {
   			'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
   			'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'