feat: Add the "Upload video page"

Kiwi-Micro · Feb 7, 2025 · 18d5714 · 18d5714
1 parent 9729f77
commit 18d5714
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 22 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -231,3 +231,69 @@ footer {
 		text-align: center;
 	}
 }
+
+/* Admin Page Styles */
+
+.addVideoPage {
+	margin: 20px;
+	width: fit-content;
+	padding-top: 20px;
+	background-color: #2a2b2c;
+	border-radius: 50px;
+	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
+}
+
+.addVideoPageForm {
+	margin: 30px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.addVideoInput {
+	background-color: #ffffff;
+	border: none;
+	border-radius: 5px;
+	outline: none;
+	padding: 10px;
+	font-size: 16px;
+	width: 250px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+.addVideoDropdown {
+	background-color: #ffffff;
+	border: none;
+	border-radius: 5px;
+	outline: none;
+	padding: 10px;
+	font-size: 16px;
+	width: 270px;
+	height: 40px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+.addVideoButtonDiv {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	width: 100vw;
+}
+
+.addVideoButton {
+	background-color: #ffffff;
+	color: #000000;
+	border: none;
+	border-radius: 5px;
+	padding: 10px 20px;
+	text-align: center;
+	display: inline-block;
+	font-size: 16px;
+	width: 270px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
diff --git a/src/pages/admin/Add.tsx b/src/pages/admin/Add.tsx
@@ -1,27 +1,144 @@
 import GlobalNavBar from "../../components/GlobalNavBar";
 import GlobalFooter from "../../components/GlobalFooter";
 import CustomBreak from "../../components/CustomBreak";
+import { useState } from "react";
 import { UploadButton } from "../../utils/uploadthing";
+import { postJSONData } from "../../utils/api";
 
-interface AddProps {}
+/* TODO: Clean Up */
 
-function Add({}: AddProps) {
+function Add() {
 	document.title = "Hexagon TV Add | Add Video";
+
+	const [thumbnailURL, setThumbnailURL] = useState("");
+	const [videoURL, setVideoURL] = useState("");
+	const [name, setName] = useState("");
+	const [description, setDescription] = useState("");
+	const [urlName, setUrlName] = useState("");
+	const [ageRating, setAgeRating] = useState("");
+	const [category, setCategory] = useState("");
+	const [alert, setAlert] = useState("");
+
+	async function handleSubmit() {
+		const VITE_PUBLIC_API_URL = import.meta.env.VITE_PUBLIC_API_URL;
+		const VITE_PUBLIC_CLERK_SIGN_IN_URL = import.meta.env.VITE_PUBLIC_CLERK_SIGN_IN_URL;
+		if (
+			!name ||
+			!description ||
+			!category ||
+			!thumbnailURL ||
+			!videoURL ||
+			!urlName ||
+			!ageRating
+		) {
+			setAlert("Please fill out all fields!");
+			return;
+		}
+		const data = await postJSONData(`${VITE_PUBLIC_API_URL}/videoAPI/add`, {
+			userId: localStorage.getItem("userId") || "",
+			sessionId: localStorage.getItem("sessionId") || "",
+			name,
+			description,
+			category,
+			thumbnailURL,
+			videoURL,
+			urlName,
+			ageRating,
+		});
+		if (data.status !== "success") {
+			window.location.href = VITE_PUBLIC_CLERK_SIGN_IN_URL;
+			return;
+		}
+		window.location.href = "/admin";
+	}
+
 	return (
 		<div className="main">
 			<GlobalNavBar />
-			<CustomBreak height={3} />
-			<p>Add Page</p>
-			<UploadButton
-				endpoint="videoAndImage"
-				onUploadError={(error) => {
-					console.error("ERROR:", error, error.cause);
-				}}
-				headers={{
-					sessionId: localStorage.getItem("sessionId") || "",
-					userId: localStorage.getItem("userId") || "",
-				}}
-			/>
+			<CustomBreak height={1} />
+			<div className="center">
+				<div className="addVideoPage">
+					<h1 style={{ textAlign: "center" }}>Add A Video</h1>
+					{alert && <p style={{ color: "red" }}>{alert}</p>}
+					<div className="addVideoPageForm">
+						<h2 style={{ textAlign: "center", marginBottom: "10px" }}>
+							Upload Thumbnail
+						</h2>
+						<UploadButton
+							endpoint="thumbnail"
+							onUploadError={(error) => {
+								console.error("ERROR:", error, error.cause);
+							}}
+							onClientUploadComplete={(data: any) => {
+								setThumbnailURL(data[0].url);
+							}}
+							headers={{
+								sessionId: localStorage.getItem("sessionId") || "",
+								userId: localStorage.getItem("userId") || "",
+							}}
+						/>
+						<h2 style={{ textAlign: "center", marginBottom: "10px" }}>Upload Video</h2>
+						<UploadButton
+							endpoint="video"
+							onUploadError={(error) => {
+								console.error("ERROR:", error, error.cause);
+							}}
+							onClientUploadComplete={(data: any) => {
+								setVideoURL(data[0].url);
+							}}
+							headers={{
+								sessionId: localStorage.getItem("sessionId") || "",
+								userId: localStorage.getItem("userId") || "",
+							}}
+						/>
+						<input
+							className="addVideoInput"
+							type="text"
+							placeholder="Name"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+						/>
+						<input
+							className="addVideoInput"
+							type="text"
+							placeholder="Description"
+							value={description}
+							onChange={(e) => setDescription(e.target.value)}
+						/>
+						<input
+							className="addVideoInput"
+							type="text"
+							placeholder="urlName"
+							value={urlName}
+							onChange={(e) => setUrlName(e.target.value)}
+						/>
+						<input
+							className="addVideoInput"
+							type="text"
+							placeholder="ageRating"
+							value={ageRating}
+							onChange={(e) => setAgeRating(e.target.value)}
+						/>
+						{/* dropdown */}
+						<select
+							id="category"
+							value={category || "none"}
+							onChange={(e) => setCategory(e.target.value)}
+							className="addVideoDropdown"
+						>
+							<option value="none" disabled hidden>
+								-- Select Category --
+							</option>
+							<option value="movies">Movie</option>
+							<option value="tvshows">TV Show</option>
+							<option value="documentaries">Documentaries</option>
+						</select>
+						<button className="addVideoButton" onClick={() => handleSubmit()}>
+							Submit
+						</button>
+					</div>
+				</div>
+			</div>
 			<GlobalFooter />
 		</div>
 	);

diff --git a/src/pages/admin/Delete.tsx b/src/pages/admin/Delete.tsx
@@ -10,12 +10,11 @@ interface DeleteProps {
 }
 
 function handleCancel() {
-	window.location.href = "/";
+	window.location.href = "/admin";
 }
 
 async function handleRemove(urlName: string, setStatus: any) {
 	const VITE_PUBLIC_API_URL = import.meta.env.VITE_PUBLIC_API_URL;
-	/* TODO: Fix the API Call */
 	const userId = localStorage.getItem("userId");
 	const sessionId = localStorage.getItem("sessionId");
 	setStatus("Removing...");
@@ -48,6 +47,7 @@ function Delete({ video }: DeleteProps) {
 				<div className="buttons">
 					<button
 						className="redButton"
+						style={{ width: "fit-content" }}
 						onClick={() => handleRemove(video.urlName, setStatus)}
 					>
 						{status}

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -16,12 +16,8 @@ type Video = {
 const f = createUploadthing();
 
 export const uploadRouter = {
-	videoAndImage: f(
+	video: f(
 		{
-			image: {
-				maxFileSize: "4MB",
-				maxFileCount: 1,
-			},
 			video: {
 				maxFileSize: "16GB",
 				maxFileCount: 1,
@@ -33,6 +29,19 @@ export const uploadRouter = {
 	).onUploadComplete(async ({}) => {
 		return {};
 	}),
+	thumbnail: f(
+		{
+			image: {
+				maxFileSize: "4MB",
+				maxFileCount: 1,
+			},
+		},
+		{
+			awaitServerData: true,
+		},
+	).onUploadComplete(async ({}) => {
+		return {};
+	}),
 } satisfies FileRouter;
 
 type OurFileRouter = typeof uploadRouter;

diff --git a/src/utils/uploadthing.ts b/src/utils/uploadthing.ts
@@ -8,7 +8,7 @@ import {
 import type { OurFileRouter } from "./types";
 
 const initOpts = {
-	url: import.meta.env.VITE_API_URL,
+	url: import.meta.env.VITE_PUBLIC_API_URL,
 } satisfies GenerateTypedHelpersOptions;
 
 export const UploadButton = generateUploadButton<OurFileRouter>(initOpts);