things

src/App.vue

@@ -36,8 +36,7 @@ import { RouterView } from 'vue-router'
 
     width: 100vw;
     height: 100vh;
-
-    overflow: hidden;
+	overflow: hidden;
 }
 
 html,

src/components/DesktopSidebar.vue

@@ -161,6 +161,7 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+	position: sticky;
 
     top: 0;
     left: 0;

src/components/Player.vue

@@ -99,6 +99,7 @@ export default defineComponent({
                 class="video-player"
                 id="video-player"
                 :height="videoHeight"
+				loop
             >
                 <source :src="config.serverURL + '/video/' + video + '/get'" type="video/mp4"></source>
             </video>
@@ -207,7 +208,6 @@ export default defineComponent({
     justify-content: center;
     align-items: start;
 	gap: 0px;
-	line-height: 15px; /* this fix is fucked up but it wont wanna look ok otherwise */
 
     max-width: 100%;
 
@@ -228,7 +228,6 @@ export default defineComponent({
 }
 
 .container {
-    width: 100%;
     height: 100%;
     margin: 0;
 

src/components/ProfileVideo.vue

@@ -1,59 +1,70 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { config } from '@/main'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
-    name: 'ProfileVideo',
-    props: {
-        id: {
-            type: Number,
-            required: true
-        }
-    },
-    data () {
-        return {
-            config
-        }
-    }
+	name: 'ProfileVideo',
+	props: {
+		id: {
+			type: Number,
+			required: true,
+		},
+		accountId: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			config,
+		}
+	},
+	setup() {
+		const router = useRouter();
+		return { router }
+	},
 })
 </script>
 
 <template>
-    <div class="profile-video">
-        <img :src="`${config.serverURL}/video/${id}/thumbnail`" class="profile-video-thumbnail" />
-    </div>
+	<div class="profile-video" @click="this.router.push(`/profile/${accountId}/videos?video=${id}`)">
+		<img :src="`${config.serverURL}/video/${id}/thumbnail`" class="profile-video-thumbnail" />
+	</div>
 </template>
 
 <style scoped>
 .profile-video {
-    border-radius: 15px;
-    border: 2px solid var(--accent-color);
-    width: min-content;
+	border-radius: 15px;
+	border: 2px solid var(--accent-color);
+	width: 200px;
+	height: 300px;
 }
 
 .profile-video:hover {
-    cursor: pointer;
-    animation-name: interaction;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
+	cursor: pointer;
+	animation-name: interaction;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
 }
 
 .profile-video-thumbnail {
-    border-radius: 15px;
-    width: 200px;
+	border-radius: 15px;
+	width: 100%;
+	height: 100%;
 }
 
 @keyframes interaction {
-    0% {
-        transform: scale(1);
-    }
+	0% {
+		transform: scale(1);
+	}
 
-    50% {
-        transform: scale(1.2);
-    }
+	50% {
+		transform: scale(1.2);
+	}
 
-    100% {
-        transform: scale(1);
-    }
+	100% {
+		transform: scale(1);
+	}
 }
 </style>

src/components/Sidebar.vue

@@ -4,28 +4,36 @@ import DesktopSidebar from '@/components/DesktopSidebar.vue'
 import MobileSidebar from '@/components/MobileSidebar.vue'
 
 export default defineComponent({
-    name: 'Sidebar',
-    components: { DesktopSidebar, MobileSidebar },
-    data() {
-        return {
-            windowWidth: window.innerWidth,
-        }
-    },
-    created() {
-        window.addEventListener('resize', this.handleResize)
-    },
-    unmounted() {
-        window.removeEventListener('resize', this.handleResize)
-    },
-    methods: {
-        handleResize() {
-            this.windowWidth = window.innerWidth
-        },
-    },
+	name: 'Sidebar',
+	components: { DesktopSidebar, MobileSidebar },
+	data() {
+		return {
+			windowWidth: window.innerWidth,
+		}
+	},
+	created() {
+		window.addEventListener('resize', this.handleResize)
+	},
+	unmounted() {
+		window.removeEventListener('resize', this.handleResize)
+	},
+	methods: {
+		handleResize() {
+			this.windowWidth = window.innerWidth
+		},
+	},
 })
 </script>
 
 <template>
-    <MobileSidebar v-if="windowWidth < 768" />
-    <DesktopSidebar v-if="windowWidth > 768" :minimized="windowWidth < 1300" />
+	<div id="sidebar">
+		<MobileSidebar v-if="windowWidth < 768" />
+		<DesktopSidebar v-if="windowWidth > 768" :minimized="windowWidth < 1300" />
+	</div>
 </template>
+
+<style>
+#sidebar {
+	z-index: 999;
+}
+</style>

src/components/VideoFeed.vue

@@ -3,6 +3,7 @@ import { defineComponent } from 'vue'
 import Player from '@/components/Player.vue'
 import { config } from '@/main.js'
 import { animate, createSpring } from 'animejs'
+import Cookies from 'js-cookie'
 
 export default defineComponent({
     name: 'VideoFeed',
@@ -28,6 +29,11 @@ export default defineComponent({
         scrollDown() {
             if(this.animating) return;
             if (this.feedIndex >= this.feed.length - 1) {
+				if(!this.signedIn()) {
+					alert("SIGN IN to see more EPIC content!!!");
+					this.animating = false;
+					return;
+				}
                 console.log("Reached end of feed");
                 this.animating = false;
                 return;
@@ -128,20 +134,24 @@ export default defineComponent({
                 this.scrollUp();
             }
         },
+		signedIn() {
+			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
+		},
     },
     created () {
         // initial setup for players
         this.player1 = this.feed[this.feedIndex];
         this.player2 = this.feed[this.feedIndex + 1];
-        document.addEventListener("DOMContentLoaded", () => {
-            animate(".player2", {
-                translateY: window.innerHeight,
-                duration: 1
-            })
-        })
 
         document.addEventListener("wheel", this.handleScroll);
     },
+	mounted () {
+		console.log("peepee")
+		animate(".player2", {
+			translateY: -window.innerHeight,
+			duration: 0
+		})
+	},
     components: { Player },
 })
 </script>
@@ -149,7 +159,7 @@ export default defineComponent({
 <template>
     <div id="player-container">
         <Player
-            class-name="player1 player-wrapper"
+            class-name="player1"
             :video="player1?.id ?? 1"
             :key="player1?.id ?? 1"
             :information="{
@@ -167,7 +177,7 @@ export default defineComponent({
         />
 
         <Player
-            class-name="player2 player-wrapper"
+            class-name="player2"
             :video="player2?.id ?? 1"
             :key="player2?.id ?? 1"
             :information="{
@@ -187,12 +197,11 @@ export default defineComponent({
 </template>
 
 <style scoped>
-.player-wrapper {
-    position: absolute;
-    width: 100%;
-    height: 100vh;
-    top: 0;
-    left: 0;
+#player-container
+{
+	flex-grow: 1;
+	display: flex;
+	justify-content: center;
 }
 
 .player1 {

src/router/index.js

@@ -4,6 +4,8 @@ import ProfileView from '../views/ProfileView.vue'
 import SearchView from '../views/SearchView.vue'
 import LoginView from '../views/LoginView.vue'
 import UploadView from '../views/UploadView.vue'
+import UpdateAccountView from '@/views/UpdateAccountView.vue'
+import ProfileVideosView from '@/views/ProfileVideosView.vue'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -18,6 +20,11 @@ const router = createRouter({
             name: 'about',
             component: ProfileView,
         },
+		{
+			path: '/profile/:id/videos',
+			name: 'profileVideos',
+			component: ProfileVideosView,
+		},
         {
             path: '/search',
             name: 'search',
@@ -32,7 +39,12 @@ const router = createRouter({
             path: '/upload',
             name: 'upload',
             component: UploadView
-        }
+        },
+		{
+			path: '/updateAccount',
+			name: 'updateAccount',
+			component: UpdateAccountView
+		}
     ],
 })
 

src/views/HomeView.vue

@@ -10,7 +10,7 @@ export default defineComponent({
     name: 'HomeView',
     components: { VideoFeed, Player, Sidebar },
 	created () {
-// Fetch account data //
+		// Fetch feed data //
 		axios
 			.get(`${config.serverURL}/video/feed`, {
 				withCredentials: true,

src/views/ProfileVideosView.vue

@@ -0,0 +1,47 @@
+<script>
+import { defineComponent } from 'vue'
+import VideoFeed from '@/components/VideoFeed.vue'
+import Sidebar from '@/components/Sidebar.vue'
+import axios from 'axios'
+import { config } from '@/main.js'
+
+export default defineComponent({
+	name: 'ProfileVideosView',
+	components: { Sidebar, VideoFeed },
+	created () {
+		const searchParams = new URLSearchParams(window.location.search);
+		if(searchParams.get('video')) this.url = `${config.serverURL}/account/${this.$route.params.id}/videos?video=${searchParams.get('video')}`
+		else this.url = `${config.serverURL}/account/${this.$route.params.id}/videos`
+
+		// Fetch feed data //
+		axios
+			.get(this.url, {
+				withCredentials: true,
+			})
+			.then((response) => {
+				if (response.data.error) return;
+				this.data = response.data
+				console.log(this.data)
+			})
+			.catch((error) => {
+				console.error('Error in getting feed!')
+				console.error(error)
+			})
+	},
+	data () {
+		return {
+			data: null
+		}
+	}
+})
+</script>
+
+<template>
+	<div class="main">
+		<Sidebar />
+		<VideoFeed v-if="this.data" :feed="this.data" />
+		<p v-else>loading</p>
+	</div>
+</template>
+
+<style scoped></style>

src/views/ProfileView.vue

@@ -14,58 +14,68 @@ export default defineComponent({
 		return {
 			config,
 			data: null,
-			videos: null
+			videos: null,
 		}
 	},
 	setup() {
 		const router = useRouter()
 		return { router }
 	},
+	watch: {
+		'$route.params.id'(newId, oldId) {
+			this.data = null;
+			this.fetchData(newId)
+		}
+	},
 	created() {
-		// Fetch account data //
-		axios
-			.get(`${config.serverURL}/account/${this.$route.params.id}/get`, {
-				withCredentials: true,
-			})
-			.then((response) => {
-				if (response.data.error)
-					return (this.data = {
+		this.fetchData(this.$route.params.id);
+	},
+	methods: {
+		fetchData(id) {
+			// Fetch account data //
+			axios
+				.get(`${config.serverURL}/account/${id}/get`, {
+					withCredentials: true,
+				})
+				.then((response) => {
+					if (response.data.error)
+						return (this.data = {
+							username: 'profile not found',
+							followers: 'profile not found',
+							following: 'profile not found',
+						})
+					this.data = response.data
+					console.log(this.data)
+				})
+				.catch((error) => {
+					this.data = {
 						username: 'profile not found',
 						followers: 'profile not found',
 						following: 'profile not found',
-					})
-				this.data = response.data
-				console.log(this.data)
-			})
-			.catch((error) => {
-				this.data = {
-					username: 'profile not found',
-					followers: 'profile not found',
-					following: 'profile not found',
-				}
-
-				console.error('Error in getting profile id ' + this.$route.params.id + '!')
-				console.error(error)
-			})
-
-		// Fetch video data //
-		axios
-			.get(`${config.serverURL}/account/${this.$route.params.id}/videos`, {
-				withCredentials: true,
-			})
-			.then((response) => {
-				if (response.data.error) return (this.videos = [])
-				this.videos = response.data
-				console.log(this.videos)
-			})
-			.catch((error) => {
-				this.videos = []
-
-				console.error('Error in getting profile id ' + this.$route.params.id + ' videos!')
-				console.error(error)
-			})
-	},
-	methods: {
+					}
+
+					console.error('Error in getting profile id ' + id + '!')
+					console.error(error)
+				})
+
+			// Fetch video data //
+			axios
+				.get(`${config.serverURL}/account/${id}/videos`, {
+					withCredentials: true,
+				})
+				.then((response) => {
+					if (response.data.error) return (this.videos = [])
+					this.videos = response.data
+				})
+				.catch((error) => {
+					this.videos = []
+
+					console.error(
+						'Error in getting profile id ' + id + ' videos!',
+					)
+					console.error(error)
+				})
+		},
 		openBio() {
 			document.getElementById('bio-container').classList.remove('hidden')
 		},
@@ -75,7 +85,7 @@ export default defineComponent({
 		signedIn() {
 			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
 		},
-	}
+	},
 })
 </script>
 
@@ -99,7 +109,13 @@ export default defineComponent({
 						<button class="india-button">follow</button>
 						<button class="india-button">message</button>
 						<span v-if="this.data">
-							<button class="india-button" v-if="this.data.myself" @click="this.router.push('/upload')">upload</button>
+							<button
+								class="india-button"
+								v-if="this.data.myself"
+								@click="this.router.push('/upload')"
+							>
+								upload
+							</button>
 						</span>
 						<span v-else>loading</span>
 					</span>
@@ -132,7 +148,11 @@ export default defineComponent({
 			</div>
 
 			<div class="profile-videos">
-				<ProfileVideo :id="video.id" v-for="video in videos" />
+				<ProfileVideo
+					:account-id="$route.params.id"
+					:id="video.id"
+					v-for="video in videos"
+				/>
 			</div>
 		</div>
 
@@ -140,7 +160,7 @@ export default defineComponent({
 			<div class="bio-panel">
 				<button class="india-button bio-text" @click="closeBio">close</button>
 				<div class="profile-links" v-if="this.data" v-for="link in this.data.links">
-					<a :href="link.url" class="profile-link">{{link.url}}</a>
+					<a :href="link.url" class="profile-link">{{ link.url }}</a>
 				</div>
 				<div v-else>loading</div>
 				<p v-if="this.data">{{ this.data.bio }}</p>
@@ -190,11 +210,12 @@ export default defineComponent({
 }
 
 .profile-videos {
-	display: grid;
-	grid-auto-flow: row;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	flex-grow: 1;
+	display: flex;
+	flex-wrap: wrap;
 	gap: 16px;
 	padding: 16px;
+	overflow-y: scroll;
 }
 
 .profile-row {

src/views/SearchView.vue

@@ -36,15 +36,10 @@ export default defineComponent({
             searchResults: null,
         }
     },
-    created () {
-        console.log(window.location.search);
-        const searchParams = new URLSearchParams(window.location.search);
-        if(searchParams.get('searchQuery')) {
-            document.addEventListener("DOMContentLoaded", () => {
-                this.search(searchParams.get('searchQuery'));
-            });
-        }
-    }
+	mounted () {
+		const searchParams = new URLSearchParams(window.location.search);
+		if(searchParams.get('searchQuery')) this.search(searchParams.get('searchQuery'));
+	}
 })
 </script>
 

src/views/UpdateAccountView.vue

@@ -41,6 +41,11 @@ export default defineComponent({
 			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
 		},
 	},
+	data () {
+		return {
+			config
+		}
+	}
 })
 </script>
 
@@ -50,13 +55,16 @@ export default defineComponent({
 		<div class="update-container">
 			<form class="update" id="form" @submit="handleSubmit" enctype="multipart/form-data">
 				<img src="/assets/hajeebtok.png" width="300px" alt="HajeebTok logo" />
+				<label for="picture">current profile picture:</label>
+				<img class="profile-picture" :src="`${config.serverURL}/account/myself/picture`" alt="profile picture" />
 				<input
 					type="file"
 					name="picture"
 					accept="image/png, image/jpeg, image/jpg, image/webp"
 				/>
-				<input type="text" placeholder="title" name="title" />
-				<input type="text" placeholder="description" name="description" />
+				<h1>OR pick a PREMIUM profile picture!!!</h1>
+				<button class="india-button">PREMIUM profile PICTURES!!!</button>
+				<input type="text" placeholder="biography" name="bio" />
 				<input type="submit" value="update Account" id="submit" />
 			</form>
 		</div>
@@ -101,4 +109,53 @@ input {
 input:focus {
 	outline: none;
 }
+
+.india-button {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+
+	padding: 10px 10px;
+	background: none;
+	color: var(--accent-color);
+	font-family: 'Pinyon Script', cursive;
+	font-size: 30px;
+
+	border-style: solid;
+	border-width: 10px 20px;
+	border-image-source: url('/assets/indiaButton.png');
+	border-image-slice: 0 80 fill;
+	border-image-repeat: stretch;
+	border-image-outset: 0;
+	border-image-width: 10px 40px;
+	border-radius: 40px;
+	background-clip: padding-box;
+}
+
+.india-button:hover {
+	animation-name: interaction;
+	animation-duration: 0.5s;
+	animation-iteration-count: infinite;
+	cursor: pointer;
+}
+
+.profile-picture {
+	width: 100px;
+	height: 100px;
+	border-radius: 100%;
+}
+
+@keyframes interaction {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.2);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}
 </style>