0.0.0.2 Alpha

frontend/src/components/HeroSection.css

@@ -1,3 +1,13 @@
+/* Fade-in animation for the hero section */
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
 .hero-container {
     position: relative;
     width: 100%;
@@ -13,6 +23,7 @@
     padding: 1rem;
     padding-bottom: 2.5rem;
     justify-content: flex-end;
+    animation: fadeIn 1s ease-in-out; /* Add fade-in animation */
 }
 
 .hero-image {
@@ -24,7 +35,7 @@
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    transition: opacity .1s ease-in-out;
+    transition: opacity 1s ease-in-out; /* Smooth transition */
     opacity: 0;
 }
 
@@ -54,6 +65,11 @@
     font-size: 1rem;
     font-weight: normal;
     line-height: 1.4;
+    overflow: hidden; /* Hide text overflow */
+    display: -webkit-box; /* Use flexbox layout */
+    -webkit-line-clamp: 3; /* Limit text to 3 lines */
+    -webkit-box-orient: vertical; /* Set box orientation to vertical */
+    text-overflow: ellipsis; /* Add ellipsis (...) */
     transition: font-size 0.3s ease-in-out;
 }
 

frontend/src/components/HeroSection.js

@@ -1,113 +1,84 @@
 'use client';
 import { useState, useEffect, useRef } from 'react';
 import './HeroSection.css';
-
-const dummyItems = [
-    {
-        title: "My Spy (2020)",
-        description: "An exciting new release!",
-        imageUrl: "https://i.ytimg.com/vi/pfAhQSz-j_o/maxresdefault.jpg"
-    },
-    {
-        title: "My Spy 2 (2024)",
-        description: "Don't miss this one!",
-        imageUrl: "https://m.media-amazon.com/images/M/MV5BNDA5MTlhMDMtN2QwOS00N2MwLTgyY2ItOTU3YjBkNjM4OTMwXkEyXkFqcGc@._V1_.jpg"
-    },
-    {
-        title: "The Matrix (1999)",
-        description: "A revolutionary sci-fi film.",
-        imageUrl: "https://www.visitindianacountypa.org/wp-content/uploads/2024/05/The-Matrix-1999-Movie-Poster.jpg"
-    },
-    {
-        title: "Inception (2010)",
-        description: "A mind-bending thriller.",
-        imageUrl: "https://i.ytimg.com/vi/T03XUKBn8UA/maxresdefault.jpg"
-    },
-    {
-        title: "Interstellar (2014)",
-        description: "A journey through space and time.",
-        imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZgarY79EPQu_BBe86NdqmVxRhgH0N6AgLEA&s"
-    },
-    {
-        title: "Parasite (2019)",
-        description: "A gripping social thriller.",
-        imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxR9Ata15qwHHpAnmpQrxHjHc19Y2UwBaTYw&s"
-    },
-    {
-        title: "Spider-Man: Into the Spider-Verse (2018)",
-        description: "A fresh take on the Spider-Man story.",
-        imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_Xg7zSuKysUusyQFXFSB1oy82y9wjHPx_qQ&s"
-    },
-    {
-        title: "Knives Out (2019)",
-        description: "A clever whodunit mystery.",
-        imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThiumkG9e13lc94b71SstKXbSiIrzcgZgBIA&s"
-    },
-    {
-        title: "Dune (2021)",
-        description: "An epic adaptation of the sci-fi classic.",
-        imageUrl: "https://spaceandsorcery.wordpress.com/wp-content/uploads/2021/10/dune-2021.jpg"
-    },
-    {
-        title: "Joker (2019)",
-        description: "A dark take on the iconic character.",
-        imageUrl: "https://miro.medium.com/v2/resize:fit:1400/1*WVZSodH2x8YwwjtotNbVxw.jpeg"
-    },
-    {
-        title: "Blade Runner 2049 (2017)",
-        description: "A visually stunning sci-fi sequel.",
-        imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXIGK_OIyih2iwse36yeywRq4nYLocWtLjcQ&s"
-    }
-];
-
+import apiClient from '@/api/apiClient';
+import SkeletonLoader from '@/skeletons/HeroSection';
 
 const HeroSection = () => {
     const [currentIndex, setCurrentIndex] = useState(0);
-    const intervalRef = useRef(null); 
+    const intervalRef = useRef(null);
     const [fadeOut, setFadeOut] = useState(false);
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchRecentItems = async () => {
+            try {
+                const response = await apiClient.getRecent();
+                const films = response.films.map(film => ({
+                    title: film[0],
+                    description: film[2],
+                    imageUrl: film[3],
+                    type: 'Film'
+                }));
+                const series = response.series.map(serie => ({
+                    title: serie[0],
+                    description: serie[2],
+                    imageUrl: serie[3],
+                    type: 'Series'
+                }));
+                setItems([...films, ...series]);
+            } catch (error) {
+                console.error('Error fetching recent items:', error);
+                // Handle error (e.g., set a default list or show an error message)
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchRecentItems();
+    }, []);
 
     const startAutoSwitch = () => {
         if (intervalRef.current) clearInterval(intervalRef.current);
         intervalRef.current = setInterval(() => {
-            setFadeOut(true); // Trigger fade-out
+            setFadeOut(true);
             setTimeout(() => {
-                setCurrentIndex(prevIndex => (prevIndex + 1) % dummyItems.length);
-                setFadeOut(false); // Trigger fade-in
-            }, 200); // Match this timeout with the animation duration
+                setCurrentIndex(prevIndex => (prevIndex + 1) % items.length);
+                setFadeOut(false);
+            }, 200);
         }, 5000);
     };
 
     useEffect(() => {
-        startAutoSwitch(); // Start auto-switching when component mounts
+        if (items.length > 0) {
+            startAutoSwitch();
+        }
 
         return () => {
-            clearInterval(intervalRef.current); // Clean up interval on component unmount
+            clearInterval(intervalRef.current);
         };
-    }, []);
+    }, [items]);
 
     const handleIndicatorClick = (index) => {
-        setFadeOut(true); // Trigger fade-out
+        setFadeOut(true);
         setTimeout(() => {
             setCurrentIndex(index);
-            setFadeOut(false); // Trigger fade-in
+            setFadeOut(false);
         }, 100);
         startAutoSwitch();
     };
 
-    useEffect(() => {
-        startAutoSwitch();
-
-        return () => {
-            clearInterval(intervalRef.current);
-        };
-    }, [currentIndex]);
+    if (loading) {
+        return <SkeletonLoader />;
+    }
 
-    const { title, description, imageUrl } = dummyItems[currentIndex];
+    const { title, description, imageUrl } = items[currentIndex];
 
     return (
         <div className="hero-container">
             <div className="hero-section">
-                {dummyItems.map((item, index) => (
+                {items.map((item, index) => (
                     <div
                         key={index}
                         className={`hero-image ${index === currentIndex ? 'active' : ''} ${fadeOut ? 'fade-out' : ''}`}
@@ -116,12 +87,12 @@ const HeroSection = () => {
                 ))}
                 <div className="hero-text">
                     <h1 className="hero-title">{title}</h1>
-                    <h2 className="hero-description">{description}</h2>
+                    <p className="hero-description">{description}</p>
                 </div>
             </div>
 
             <div className="hero-indicators">
-                {dummyItems.map((_, index) => (
+                {items.map((_, index) => (
                     <div
                         key={index}
                         className={`indicator ${index === currentIndex ? 'active' : ''}`}

frontend/src/components/Sidebar.css

@@ -87,11 +87,9 @@
   @media only screen and (orientation: portrait) {
     .sidebar-footer {
         padding: 16px;
-        margin-bottom: 100px;
       }
 }
 
-  
   .sidebar-item {
     display: flex;
     align-items: center;

frontend/src/components/Sidebar.js

@@ -12,7 +12,10 @@ import {
   faTv,
   faFilm,
   faBookBookmark,
+  faCodeCommit,
+  faBook,
 } from "@fortawesome/free-solid-svg-icons";
+import config from "@/lib/config";
 
 const Sidebar = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -83,9 +86,7 @@ const Sidebar = () => {
             </Link>
             <Link
               href="/new"
-              className={`sidebar-link ${
-                pathname === "/new" ? "active" : ""
-              }`}
+              className={`sidebar-link ${pathname === "/new" ? "active" : ""}`}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
             >
@@ -105,7 +106,28 @@ const Sidebar = () => {
         )}
         {isOpen && (
           <div className="sidebar-footer">
-            <SidebarItem icon={faCogs} text="Settings" />
+            <Link
+              href="/dashboard"
+              className={`sidebar-link ${
+                pathname === "/dashboard" ? "active" : ""
+              }`}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <SidebarItem icon={faBook} text="Dashboard" />
+            </Link>
+            <Link
+              href="/settings"
+              className={`sidebar-link ${
+                pathname === "/settings" ? "active" : ""
+              }`}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <SidebarItem icon={faCogs} text="Settings" />
+            </Link>
+
+            <SidebarItem icon={faCodeCommit} text={config.version} />
           </div>
         )}
       </div>

frontend/src/lib/LoadBalancer.js

@@ -60,7 +60,11 @@ class LoadBalancerAPI {
     async getAllTVShows() {
       return this._getRequest('/api/get/tv/all');
     }
-  
+
+    async getRecent() {
+      return this._getRequest('/api/get/recent');
+    }
+
     async getDownloadProgress(url) {
       return this._getRequestNoBase(url);
     }

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.1 Alpha",
+    version: "0.0.0.2 Alpha",
   };
   
 export default config;

frontend/src/skeletons/HeroSection.css

@@ -0,0 +1,111 @@
+/* SkeletonLoader.css */
+
+.skeleton-container {
+    position: relative;
+    width: 100%;
+    height: 480px; /* Set height to auto for responsiveness */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    background-color: #1b1d2b; /* Dark purple background */
+    padding: 1rem;
+    padding-bottom: 2rem;
+    overflow: hidden;
+}
+
+.skeleton-image {
+    width: 100%;
+    height: 100%; /* Adjust height to fit container */
+    max-height: 400px; /* Maximum height to maintain aspect ratio */
+    border-radius: 4px;
+    background: linear-gradient(90deg, #3b3f5c 25%, #2b2d43 50%, #3b3f5c 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+}
+
+.skeleton-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    position: relative;
+    z-index: 1;
+    padding-top: 10px;
+}
+
+.skeleton-title, .skeleton-description {
+    background: linear-gradient(90deg, #3b3f5c 25%, #2b2d43 50%, #3b3f5c 75%);
+    background-size: 200% 100%;
+    border-radius: 4px;
+    animation: shimmer 1.5s infinite;
+}
+
+.skeleton-title {
+    width: 50%;
+    height: 2rem;
+}
+
+.skeleton-description {
+    width: 70%;
+    height: 1.2rem;
+}
+
+/* Responsive Styles */
+@media (max-width: 1200px) {
+    .skeleton-title {
+        width: 60%;
+    }
+    .skeleton-description {
+        width: 80%;
+    }
+}
+
+@media (max-width: 992px) {
+    .skeleton-container {
+        height: 400px;
+    }
+    .skeleton-title {
+        width: 70%;
+        height: 1.8rem;
+    }
+    .skeleton-description {
+        width: 85%;
+        height: 1.1rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .skeleton-container {
+        height: 300px;
+    }
+    .skeleton-title {
+        width: 80%;
+        height: 1.6rem;
+    }
+    .skeleton-description {
+        width: 90%;
+        height: 1rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .skeleton-container {
+        height: 200px;
+    }
+    .skeleton-title {
+        width: 90%;
+        height: 1.4rem;
+    }
+    .skeleton-description {
+        width: 95%;
+        height: 0.9rem;
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}

frontend/src/skeletons/HeroSection.js

@@ -0,0 +1,16 @@
+// SkeletonLoader.js
+import './HeroSection.css';
+
+const SkeletonLoader = () => {
+    return (
+        <div className="skeleton-container">
+            <div className="skeleton-image"></div>
+            <div className="skeleton-text">
+                <div className="skeleton-title"></div>
+                <div className="skeleton-description"></div>
+            </div>
+        </div>
+    );
+};
+
+export default SkeletonLoader;