From a77c24c91f6bfac6eed07a5eb3d0ffa33f272b00 Mon Sep 17 00:00:00 2001
From: Scald <104459145+Arikatsu@users.noreply.github.com>
Date: Thu, 2 Mar 2023 08:50:50 +0530
Subject: [PATCH] Complete Home page

---
 src/css/pages/Home.scss | 112 ++++++++++++++++++++++++----------------
 src/ui/pages/Home.tsx   |  42 +++++++++++++--
 2 files changed, 104 insertions(+), 50 deletions(-)

diff --git a/src/css/pages/Home.scss b/src/css/pages/Home.scss
index f4a6de7..3bfe663 100644
--- a/src/css/pages/Home.scss
+++ b/src/css/pages/Home.scss
@@ -22,64 +22,86 @@
     }
 }
 
-.Home_PlaylistFavorites {
-    width: 400px;
-    height: 270px;
-    background: linear-gradient(90deg, #930606, #c94f3f);
-    padding: 20px;
-    border-radius: 10px;
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+.Home_Column2 {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    padding: 0 20px;
+}
+
+.Home_Recents {
+    min-width: 800px;
+    margin-top: 40px;
+}
+
+.Home_Favorites {
+    margin-top: 40px;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    transition: all 5s ease-in-out;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    gap: 20px;
+}
 
-    svg {
-        width: 100px;
-        height: 100px;
-        margin-bottom: 20px;
-        color: white;
-        transition: all 0.4s ease-in-out;
+.Home_FavoritesTrack {
+    width: 200px;
+    height: 200px;
+    border-radius: 10px;
+    position: relative;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 10px;
+        z-index: 0;
     }
 
-    h3 {
-        margin: 0;
-        font-size: 30px;
+    p {
+        padding: 0 10px;
+        width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 15px;
+        font-weight: 300;
         color: white;
-        animation: fade-in 0.4s ease-in-out forwards;
-        font-weight: 500;
+        z-index: 100;
+        margin: 0;
+        position: absolute;
+        bottom: 10px;
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        background: linear-gradient(0deg, rgba(2, 1, 1, 0.89) 10%, rgba(0, 0, 0, 0));
+        border-radius: 10px;
+        z-index: 100;
     }
 
     &:hover {
         cursor: pointer;
-        box-shadow: 0 0 20px 0 var(--background-primary-color);
 
-        svg {
-            margin-top: 40px;
-            width: 120px;
-            height: 120px;
+        &::before, p {
+            animation: fade-out 0.2s ease-in-out forwards;
         }
-
-        h3 {
-            animation: fade-out 0.4s ease-in-out forwards;
-        }
-    }
-}
-
-@keyframes fade-out {
-    0% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
     }
 }
 
-@keyframes fade-in {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
+@media screen and (max-width: 1900px) {
+    .Home_Column2 {
+        flex-direction: column;
     }
 }
diff --git a/src/ui/pages/Home.tsx b/src/ui/pages/Home.tsx
index bf097a3..60ad736 100644
--- a/src/ui/pages/Home.tsx
+++ b/src/ui/pages/Home.tsx
@@ -2,16 +2,48 @@ import React from "react";
 
 import AnimatedView from "@components/common/AnimatedView";
 import Playlists from "@components/home/Playlists";
+import Recents from "@components/home/Recents";
+import Favorites from "@components/home/Favorites";
+
+import { playlists, recents, favorites } from "@backend/user";
+import emitter from "@backend/events";
 
 import "@css/pages/Home.scss";
 
 class Home extends React.Component {
+    update = () => this.forceUpdate();
+
+    componentDidMount() {
+        emitter.on("playlist", this.update);
+        emitter.on("recent", this.update);
+        emitter.on("favorites", this.update);
+    }
+
+    componentWillUnmount() {
+        emitter.off("playlist", this.update);
+        emitter.off("recent", this.update);
+        emitter.off("favorites", this.update);
+    }
+
     render() {
-        return (
-            <AnimatedView className={"Home"}>
-                <Playlists />
-            </AnimatedView>
-        );
+        if (playlists.length > 0 || recents.length > 0 || favorites.length > 0) {
+            return (
+                <AnimatedView className={"Home"}>
+                    { playlists.length > 0 && <Playlists /> }
+                    <div className={"Home_Column2"}>
+                        { recents.length > 0 && <Recents /> }
+                        { favorites.length > 0 && <Favorites /> }
+                    </div>
+                </AnimatedView>
+            );
+        } else {
+            return (
+                <AnimatedView className={"empty"}>
+                    <h1>No Content</h1>
+                    <p>Start using the app to fill up your Home page.</p>
+                </AnimatedView>
+            );
+        }
     }
 }