stuff

src/Components/DesktopSidebar.jsx

@@ -32,7 +32,7 @@ function HajeeberButton(props) {
         return <>
             <button onClick={() => {
                 if (signedIn()) {
-                    navigate("/profile");
+                    navigate("/profile/myself");
                 } else {
                     navigate("/login");
                 }

src/Components/MobileSidebar.jsx

@@ -29,7 +29,7 @@ function HajeeberButton(props) {
 		return <>
 			<button onClick={() => {
 				if (signedIn()) {
-					navigate("/profile");
+					navigate("/profile/myself");
 				} else {
 					navigate("/login");
 				}

src/Components/ProfileVideo.jsx

@@ -0,0 +1,13 @@
+import "../css/ProfileVideo.css";
+import { config } from "../main";
+
+function ProfileVideo(props) {
+	const { id } = props;
+	return (
+		<div className="profile-video">
+			<img src={`${config.serverURL}/video/${id}/thumbnail`} className="profile-video-thumbnail"></img>
+		</div>
+	)
+}
+
+export default ProfileVideo

src/Components/VideoFeed.jsx

@@ -1,85 +1,67 @@
-import '../css/VideoFeed.css'
-
-import Player from "./Player.jsx"
-import { useEffect, useRef } from "react";
-import { createScope, animate, createSpring } from 'animejs';
+import { useRef, useState } from "react"
+import "../css/VideoFeed.css"
+import Player from "./Player";
+import { animate, createScope } from "animejs";
 
 function VideoFeed() {
-    const root = useRef(null);
-    const scope = useRef(null);
-    const screenHeight = window.innerHeight;
-    let scrolling = false;
+	const {feed, setFeed} = useState(null);
+	const root = useRef(null);
+	const scope = useRef(null);
+
+	const {topState, setTopState} = useState(true);
+	const {bottomState, setBottomState } = useState(false);
+
+	const screenHeight = window.innerHeight;
+	let scrolling = false;
 
-    const stiffness = 550;
-    const damping = 15;
+	const stiffness = 550;
+	const damping = 15;
 
-    // Animation functions (no hooks inside)
-    const scrollDown = () => {
-        scope.current = createScope({ root }).add(() => {
-            animate(".bottom-video", {
-                y: [-screenHeight, 0],
-                ease: createSpring({ stiffness, damping }),
-            });
-            animate(".top-video", {
-                y: [0, screenHeight],
-                ease: createSpring({ stiffness, damping }),
-            });
-        });
-    };
-    const scrollUp = () => {
-        scope.current = createScope({ root }).add(() => {
-            animate(".bottom-video", {
-                y: [0, -screenHeight],
-                ease: createSpring({ stiffness, damping }),
-            });
-            animate(".top-video", {
-                y: [-screenHeight, 0],
-                ease: createSpring({ stiffness, damping }),
-            });
-        });
-    };
+	// Animation functions (no hooks inside)
+	const scrollDown = () => {
+		scope.current = createScope({ root }).add(() => {
+			animate(".bottom-video", {
+				y: [-screenHeight, 0],
+				ease: createSpring({ stiffness, damping }),
+			});
+			animate(".top-video", {
+				y: [0, screenHeight],
+				ease: createSpring({ stiffness, damping }),
+			});
+		});
+	};
+	const scrollUp = () => {
+		scope.current = createScope({ root }).add(() => {
+			animate(".bottom-video", {
+				y: [0, -screenHeight],
+				ease: createSpring({ stiffness, damping }),
+			});
+			animate(".top-video", {
+				y: [-screenHeight, 0],
+				ease: createSpring({ stiffness, damping }),
+			});
+		});
+	};
 
-    useEffect(() => {
-        const handleWheel = (ev) => {
-            if (ev.deltaY > 0) {
-                console.log("scroll up")
-                scrollUp();
-            } else {
-                scrollDown();
-            }
-        };
-        document.addEventListener("wheel", handleWheel);
-        return () => document.removeEventListener("wheel", handleWheel);
-    }, [screenHeight]);
+	useEffect(() => {
+		const handleWheel = (ev) => {
+			if (ev.deltaY > 0) {
+				console.log("scroll up")
+				scrollUp();
+			} else {
+				scrollDown();
+			}
+		};
+		document.addEventListener("wheel", handleWheel);
+		return () => document.removeEventListener("wheel", handleWheel);
+	}, [screenHeight]);
 
-    return (
-        <>
-            <div ref={root}>
-                <Player className="top-video" video={"/assets/16_final.mp4"} information={{
-                    title: "habibi habibi",
-                    description: "my name is john clapper. i clap everyone. i clap first at the cinema. no one else claps.",
-                    likes: "1.2M",
-                    dislikes: "1K",
-                    comments: "1.2K",
-                    shares: "392",
-                    author: "John Clapper",
-                    authorAvatar: "https://i.imgur.com/4Z2b7aH.png",
-                    authorId: "johnclapper",
-                }} />
-                <Player top={-screenHeight} className="bottom-video" video={"/assets/34_final.mp4"} information={{
-                    title: "habibi habibi",
-                    description: "my name is john clapper. i clap everyone. i clap first at the cinema. no one else claps.",
-                    likes: "1.2M",
-                    dislikes: "1K",
-                    comments: "1.2K",
-                    shares: "392",
-                    author: "John Clapper",
-                    authorAvatar: "https://i.imgur.com/4Z2b7aH.png",
-                    authorId: "johnclapper",
-                }} />
-            </div>
-        </>
-    )
+	return (
+		<div ref={root}>
+			<Player id="player1" />
+			<Player id="player2" />
+		</div>
+	)
 }
 
-export default VideoFeed
+export default VideoFeed

src/Login.jsx

@@ -32,7 +32,7 @@ function Login() {
 
 		// Login successful
 		Cookies.set("token", `HajeebToken ${response.data.token}`);
-		return navigate("/");
+		return navigate("/profile/myself");
 	};
 
 	return (

src/Profile.jsx

@@ -2,38 +2,72 @@ import './css/Profile.css'
 import Sidebar from './Components/Sidebar'
 import { default as axios } from 'axios'
 import { config } from './main'
+import { useParams } from 'react-router'
+import { useEffect, useState } from 'react'
+import ProfileVideo from './Components/ProfileVideo'
+
+function Profile() {
+	const params = useParams();
+	const [data, setData] = useState(null);
+
+	useEffect(() => {
+		let ignore = false;
+		setData(null);
+		axios.get(`${config.serverURL}/account/${params.id}/get`, {
+			withCredentials: true
+		}).then(response => {
+			if (response.error) setData({
+				username: "profile not found"
+			});
+			if(!ignore) setData(response.data);
+
+			console.log(response.data);
+		}).catch(error => {
+			setData({
+				username: "profile not found",
+				followers: "profile not found",
+				following: "profile not found",
+			});
+		});
+		
+		return () => {
+			ignore = true;
+		}
+	}, [params, config]);
+
 
-function Profile(props) {
-	const {
-		id, username, verified, bio, followers, following, videos
-	} = props;
 
 	return (
 		<>
-			<div>
-				<Sidebar  />
+			<div className="main">
+				<Sidebar />
 				<div className="profile-container">
 					<div className="profile-details">
-						<img src={`${config.serverURL}/account/${id}/picture`} className="profile-picture"></img>
+						<span className="profile-detail" id="profile-picture">
+							<img src={`${config.serverURL}/account/${params.id}/picture`} className="profile-picture" alt="profile" />
+							{data ? data.username : "loading"}
+						</span>
 
-						<span class="profile-detail">
-							{followers}
+						<span className="profile-detail">
+							{data ? data.followers : "loading"} <br />
 							followers
 						</span>
 
-						<span class="profile-detail">
-							{following}
+						<span className="profile-detail">
+							{data ? data.following : "loading"} <br />
 							following
 						</span>
 
-						<span class="profile-detail">
-							{videos.length}
+						<span className="profile-detail" id="profile-video-detail">
+							2 <br />
 							videos
 						</span>
 					</div>
-					
+
 					<div className="profile-videos">
-						
+						<ProfileVideo id={1} />
+						<ProfileVideo id={1} />
+						<ProfileVideo id={1} />
 					</div>
 				</div>
 			</div>

src/css/DesktopSidebar.css

@@ -70,7 +70,7 @@ li {
 
 .searchButton:hover {
     cursor: pointer;
-    animation-name: searchButton;
+    animation-name: interaction;
     animation-duration: 1s;
     animation-iteration-count: infinite;
 }
@@ -99,7 +99,7 @@ li {
     outline: none;
 }
 
-@keyframes searchButton {
+@keyframes interaction {
     0% {
         transform: scale(1);
     }

src/css/Profile.css

@@ -10,12 +10,61 @@
 .profile-details {
 	background-color: var(--accent-color);
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 
 	justify-content: space-between;
+
+	padding: 10px;
 }
 
 .profile-detail {
 	display: flex;
 	flex-direction: column;
+	gap: 10px;
+
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+
+	font-size: 40px;
+}
+
+.profile-picture {
+	width: 200px;
+	height: 200px;
+	border-radius: 100%;
+}
+
+#profile-picture {
+	width: 200px;
+	font-size: 1em;
+}
+
+.profile-videos {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 16px;
+	padding: 16px;
+}
+
+@media only screen and (max-width: 768px) {
+	.profile-detail {
+		font-size: 30px;
+	}
+
+	.profile-picture {
+		width: 100px;
+		height: 100px;
+	}
+}
+
+@media only screen and (max-width: 500px) {
+	#profile-video-detail {
+		display: none;
+	}
+
+	.profile-detail {
+		font-size: 25px;
+	}
 }

src/css/ProfileVideo.css

@@ -0,0 +1,31 @@
+.profile-video {
+	border-radius: 15px;
+	border: 2px solid var(--accent-color);
+	width: min-content;
+}
+
+.profile-video:hover {
+	cursor: pointer;
+	animation-name: interaction;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+}
+
+.profile-video-thumbnail {
+	border-radius: 15px;
+	width: 200px;
+}
+
+@keyframes interaction {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.2);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}

src/css/index.css

@@ -18,6 +18,7 @@
   --secondary-background-color: #363636;
   --text-color: white;
   --inverted-text-color: black;
+  --mobile-width: 768px;
 
   font-family: "Knewave", 'Times New Roman', Times, serif;
   color-scheme: light dark;

src/main.jsx

@@ -22,7 +22,7 @@ createRoot(document.getElementById('root')).render(
     <Routes>
       <Route path="/" element={<App />} />
       <Route path="/login" element={<Login />} />
-      <Route path="/profile" element={<Profile />} />
+      <Route path="/profile/:id" element={<Profile />} />
       <Route path="/search" element={<Search />} />
     </Routes>
   </BrowserRouter>