stuff

src/App.jsx

@@ -8,7 +8,7 @@ function App() {
   return (
     <div className="main">
       <Sidebar />
-      <Player className="top-video" video={1} information={{
+      <Player className="top-video" video={2} 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",

src/Components/DesktopSidebar.jsx

@@ -8,8 +8,13 @@ import Grandpa from "../icons/Grandpa.jsx"
 import Person from "../icons/Person.jsx"
 import Phone from "../icons/Phone.jsx"
 import Search from "../icons/Search.jsx"
+import Wrong2 from "../icons/Wrong2.jsx"
 
-function search() {
+import Cookies from "js-cookie"
+import { config, signedIn } from '../main.jsx'
+import { useNavigate } from 'react-router'
+
+function search(minimized) {
     if (minimized) {
         // goto search page
         return;
@@ -18,8 +23,63 @@ function search() {
     // goto search page with search query
 }
 
+function HajeeberButton(props) {
+    const {size, minimized, navigate} = props;
+
+    if(signedIn()) {
+        return <>
+            <button onClick={() => {
+                if (signedIn()) {
+                    navigate("/profile");
+                } else {
+                    navigate("/login");
+                }
+            }}>
+                <img src={`${config.serverURL + "/account/myself/picture"}`} width={size} height={size}></img>
+                {!minimized && 'my hajeeber'}
+            </button>
+        </>
+    } else {
+        return <>
+            <button onClick={() => {
+                if(signedIn()) {
+                    navigate("/profile");
+                } else {
+                    navigate("/login");
+                }
+            }}>
+                <Person size={size} />
+                {!minimized && 'my hajeeber'}
+            </button>
+        </>
+    }
+}
+
+function LogOutButton(props) {
+    const { size, minimized } = props;
+
+    if (signedIn()) {
+        return <>
+            <li>
+                <button onClick={logOut}>
+                    <Wrong2 size={size} />
+                    {!minimized && 'log out'}
+                </button>
+            </li>
+        </> 
+    } else {
+        return
+    }
+}
+
+function logOut() {
+    Cookies.remove("token");
+    window.location.reload();
+}
+
 function DesktopSidebar(props) {
     const minimized = props.minimized;
+    let navigate = useNavigate();
 
     let size = 40;
     let sidebarCode = <>
@@ -33,14 +93,16 @@ function DesktopSidebar(props) {
 
             <ul className="middle">
                 <div className="searchContainer" style={{ width: minimized ? "100px" : "250px" }}>
-                    <button className="searchButton" onClick={search}>
+                    <button className="searchButton" onClick={() => {search(minimized)}}>
                         <Search size={size} />
                     </button>
                     {!minimized && <input type="text" placeholder="Search" className="searchBar" />}
                 </div>
 
                 <li>
-                    <button>
+                    <button onClick={() => {
+                        navigate("/");
+                    }}>
                         <Home size={size} />
                         {!minimized && 'home'}
                     </button>
@@ -68,12 +130,11 @@ function DesktopSidebar(props) {
                 </li>
 
                 <li>
-                    <button>
-                        <Person size={size} />
-                        {!minimized && 'my hajeeber'}
-                    </button>
+                    <HajeeberButton size={size} minimized={minimized} navigate={navigate} />
                 </li>
 
+                <LogOutButton size={size} minimized={minimized} />
+
                 <li>
                     <button>
                         <Phone size={size} />

src/Components/MobileSidebar.jsx

@@ -4,14 +4,77 @@ import Home from "../icons/Home.jsx"
 import Person from "../icons/Person.jsx"
 import Search from "../icons/Search.jsx"
 
+import Cookies from "js-cookie"
+import { config, signedIn } from "../main.jsx"
+import Wrong2 from '../icons/Wrong2.jsx'
+import { useNavigate } from 'react-router'
+
+function HajeeberButton(props) {
+	const {size, navigate} = props;
+
+	if (signedIn()) {
+		return <>
+			<button onClick={() => {
+				if (signedIn()) {
+					navigate("/profile");
+				} else {
+					navigate("/login");
+				}
+			}}>
+				<img src={`${config.serverURL + "/account/myself/picture"}`} width={size} height={size}></img>
+				hajeeber
+			</button>
+		</>
+	} else {
+		return <>
+			<button onClick={() => {
+				if (signedIn()) {
+					navigate("/profile");
+				} else {
+					navigate("/login");
+				}
+			}}>
+				<Person size={size} />
+				hajeeber
+			</button>
+		</>
+	}
+}
+
+function LogOutButton(props) {
+	const size = props.size;
+
+	if(signedIn()) {
+		return <>
+			<li>
+				<button onClick={logOut}>
+					<Wrong2 size={size} />
+					log out
+				</button>
+			</li>
+		</>
+	} else {
+		return
+	}
+}
+
+function logOut() {
+	Cookies.remove("token");
+	window.location.reload();
+}
+
 function MobileSidebar() {
 	let size = 40;
+	let navigate = useNavigate();
+
 	return (
 		<>
 			<div className="sidebar-container">
 				<ul className="mobile-sidebar">
 					<li>
-						<button>
+						<button onClick={() => {
+							navigate("/");
+						}}>
 							<Home size={size} />
 							home
 						</button>
@@ -32,11 +95,10 @@ function MobileSidebar() {
 					</li>
 
 					<li>
-						<button>
-							<Person size={size} />
-							hajeeber
-						</button>
+						<HajeeberButton size={size} navigate={navigate} />
 					</li>
+
+					<LogOutButton size={size} />
 				</ul>
 			</div>
 		</>

src/Components/Player.jsx

@@ -6,26 +6,89 @@ import Contact from "../icons/Contact.jsx"
 import ArrowRight from "../icons/ArrowRight.jsx"
 import ThreeDots from "../icons/ThreeDots.jsx"
 import Play from "../icons/Play.jsx"
+import Pause from "../icons/Pause.jsx"
 import { default as axios } from 'axios'
 import { config } from '../main.jsx'
+import { animate, createScope } from 'animejs'
+import { useRef, useEffect } from 'react';
 
 function Player(props) {
+    const root = useRef(null);
+    const scope = useRef(null);
     const { video, information, top, className } = props;
     const screenHeight = window.innerHeight;
     const videoHeight = screenHeight - 100; // Adjusting for some padding/margin
+    const videoRef = useRef(null);
+
+    const animateDetail = (id) => {
+        scope.current = createScope({ root }).add(() => {
+            console.log("monkey")
+            animate(id, {
+                width: {
+                    from: "50px",
+                    to: "300px"
+                },
+                height: {
+                    from: "50px",
+                    to: "300px"
+                },
+                opacity: {
+                    from: 0,
+                    to: 0.5
+                },
+
+                ease: "inExpo",
+                duration: 500,
+                loop: false,
+                onComplete: () => {
+                    animate(id, {
+                        opacity: {
+                            from: 0.5,
+                            to: 0
+                        }
+                    })
+                }
+            });
+        })
+    }
+
+    const handlePlay = () => {
+        if(videoRef.current.paused) {
+            videoRef.current.play();
+            animateDetail("#play-icon");
+        } else {
+            videoRef.current.pause();
+            animateDetail("#pause-icon");
+        }
+    }
 
     return (
         <>
-            <div className={`container ${className}`} style={{ transform: `translateY(${top})` }}>
-                <div className="video-container">
-                    <video className="video-player" id="video-player" controls height={videoHeight}>
+            <div className={`container ${className}`} ref={root} style={{ transform: `translateY(${top})` }}>
+                <div className="video-container" onClick={handlePlay}>
+                    <video
+                        className="video-player"
+                        id="video-player"
+                        height={videoHeight}
+                        ref={videoRef}
+                    >
                         <source src={config.serverURL + "/video/" + video} type="video/mp4"></source>
                     </video>
+
+                    <div className="animated-detail" id="play-icon">
+                        <Play size={"100%"} />
+                    </div>
+
+                    <div className="animated-detail" id="pause-icon">
+                        <Pause size={"100%"} />
+                    </div>
+
                     <div className="video-information">
                         <h1>{information.title}</h1>
                         <p>{information.description}</p>
                     </div>
                 </div>
+
                 <div className="video-interactions">
                     <button className="interaction" id="like">
                         <Heart size={30} />
@@ -50,7 +113,7 @@ function Player(props) {
                 </div>
             </div>
         </>
-    )
+    );
 }
 
 export default Player

src/Search.jsx

@@ -0,0 +1,19 @@
+import './css/Search.css'
+import Sidebar from './Components/Sidebar'
+import { default as axios } from 'axios'
+import Cookies from 'js-cookie'
+
+function Search() {
+	return (
+		<>
+			<div>
+				<Sidebar />
+				<div className="profile-container">
+
+				</div>
+			</div>
+		</>
+	)
+}
+
+export default Search

src/css/Player.css

@@ -50,8 +50,6 @@
 }
 
 .video-information {
-
-
     width: 100%;
     pointer-events: none;
 
@@ -111,4 +109,25 @@
 
 #dislike {
     filter: grayscale(100%);
+}
+
+.animated-detail {
+    position: fixed;
+    inset: 0px;
+    width: 50px;
+    height: 50px;
+    max-width: 100vw;
+    max-height: 100dvh;
+    margin: auto;
+
+    z-index: 100;
+    pointer-events: none;
+}
+
+#play-icon {
+    opacity: 0;
+}
+
+#pause-icon {
+    opacity: 0;
 }

src/icons/Pause.jsx

@@ -0,0 +1,10 @@
+function Pause(props) {
+    const {size} = props;
+    return <img width={size} height={size} src="/icons/pause.png" alt="Pause icon" />
+}
+
+Pause.defaultProps = {
+    size: 24
+}
+
+export default Pause

src/main.jsx

@@ -5,11 +5,17 @@ import './css/index.css'
 import App from './App.jsx'
 import Login from "./Login.jsx"
 import Profile from "./Profile.jsx"
+import Cookies from "js-cookie"
 
+// helper shit
 export const config = {
   "serverURL": "http://localhost:8080"
 }
 
+export function signedIn() {
+  return Cookies.get("token") && Cookies.get("token").startsWith("HajeebToken");
+}
+
 createRoot(document.getElementById('root')).render(
   <BrowserRouter>
     <Routes>