From 7ea8a9fb142c515887dd400f5cdcf0a4bc36dfb4 Mon Sep 17 00:00:00 2001
From: joshrandall8478 <joshrandall8478@gmail.com>
Date: Tue, 18 Mar 2025 17:29:29 -0400
Subject: [PATCH] upload page finished
---
src/User.tsx | 4 ++--
src/components/FileUploader.tsx | 22 +++++++++++++++++-----
src/components/VideoPlayerUser.tsx | 2 ++
src/styles/upload.scss | 13 +++++++++----
src/terms.tsx | 4 ++--
5 files changed, 32 insertions(+), 13 deletions(-)
diff --git a/src/User.tsx b/src/User.tsx
index af2de17..1569348 100644
--- a/src/User.tsx
+++ b/src/User.tsx
@@ -12,7 +12,7 @@ import axios from "axios";
// }
// Set the number of videos displayed per page
-const VIDEOS_PER_PAGE = 9;
+const VIDEOS_PER_PAGE = 6;
let uploadServer = "http://localhost:3001";
if (import.meta.env.VITE_UPLOAD_SERVER !== undefined) {
@@ -197,7 +197,7 @@ function User() {
>
{/* Logout button */}
<div className="logout__section">
- <a className="button" onClick={handleLogout}>
+ <a className="button warning" onClick={handleLogout}>
<i className="fas fa-door-open"></i><span className="desktop__text"> Logout</span>
</a>
</div>
diff --git a/src/components/FileUploader.tsx b/src/components/FileUploader.tsx
index ec3db0e..c5688ff 100644
--- a/src/components/FileUploader.tsx
+++ b/src/components/FileUploader.tsx
@@ -4,6 +4,10 @@ import "dotenv";
import { io, Socket } from "socket.io-client";
import { v4 as uuidv4 } from "uuid";
+
+import "../styles/auth.scss";
+
+
let uploadServer = "http://localhost:3001";
if (import.meta.env.VITE_UPLOAD_SERVER !== undefined) {
uploadServer = import.meta.env.VITE_UPLOAD_SERVER;
@@ -177,21 +181,29 @@ export default function FileUploader() {
};
return (
- <div className="upload-container">
+ <div className="">
+ <div className="auth__container">
<div className="form-group">
<label htmlFor="title">Title: </label>
- <input name="title" value={title} onChange={handleTitleChange} />
+ <input name="title" className="auth__form-control" value={title} onChange={handleTitleChange} />
+
+ </div>
</div>
+ <div className="auth__container">
<div className="form-group">
<label htmlFor="desc">Description: </label>
- <input name="desc" value={desc} onChange={handleDescChange} />
+ <input name="desc" className="auth__form-control" value={desc} onChange={handleDescChange} />
+ </div>
+
</div>
- <div className="form-group">
+
+ <div className="form-group ">
<input type="file" accept="video/mp4" onChange={handleFileChange} />
+ <br />
{file && status === "idle" && (
- <button className="button" onClick={handleFileUpload}>Upload</button>
+ <button style={{margin: "15px auto"}} className="button primary" onClick={handleFileUpload}>Upload</button>
)}
</div>
diff --git a/src/components/VideoPlayerUser.tsx b/src/components/VideoPlayerUser.tsx
index 644041c..c14b826 100644
--- a/src/components/VideoPlayerUser.tsx
+++ b/src/components/VideoPlayerUser.tsx
@@ -1,6 +1,8 @@
import { useState } from "react";
import { motion } from "framer-motion";
+
+
// VideoPlayer Component - Toggles between a small and expanded video
export default function VideoPlayer() {
// State to track if the video is expanded or not
diff --git a/src/styles/upload.scss b/src/styles/upload.scss
index 0b10fa2..6ceb5b4 100644
--- a/src/styles/upload.scss
+++ b/src/styles/upload.scss
@@ -20,13 +20,10 @@ $backgroundImageUrl: url('src/assets/blob.png');
align-items: center;
justify-content: center;
height: 100vh;
- // background-image: $backgroundImageUrl;
background-position: top;
background-repeat: no-repeat;
- background-size: 300px;
- // background-color: #e0f7e0;
padding: 20px;
- max-height: 40vh;
+ max-height: 40vh;
}
.upload-banner{
@@ -111,6 +108,14 @@ $backgroundImageUrl: url('src/assets/blob.png');
.upload-title {
font-size: 2rem;
}
+ .upload-banner{
+ width: 80vw;
+ }
+ .upload-container {
+ font-size: 1rem;
+ width: 80vw;
+ // overflow-x: hidden;
+ }
.back-button {
padding: 8px 16px;
diff --git a/src/terms.tsx b/src/terms.tsx
index c4cd97b..24ce7c9 100644
--- a/src/terms.tsx
+++ b/src/terms.tsx
@@ -1,5 +1,5 @@
import { useNavigate } from 'react-router-dom';
-import './styles/signup.scss';
+import './styles/auth.scss';
function Terms(){
@@ -8,7 +8,7 @@ function Terms(){
<main>
<div className="center-container">
<h3 style={{ color: 'white' }}>No illegal content, otherwise go nuts</h3>
- <button className="signup__button" onClick={() => navigate('/signup')}>Back to Signup</button>
+ <button className="button primary" onClick={() => navigate('/signup')}>Back to Signup</button>
</div>
</main>
--
GitLab