diff --git a/src/User.tsx b/src/User.tsx
index ff650dce5a8d76097d0d76d33fcbe879a95ad7f9..af2de17ad142bc6648b6cda09766d287eb50069a 100644
--- a/src/User.tsx
+++ b/src/User.tsx
@@ -195,16 +195,28 @@ function User() {
}`}
{...handlers}
>
- <p style={{ color: "white", padding: "0px", top: "0" }}>
- Swipe left and right to navigate
- </p>
+ {/* Logout button */}
+ <div className="logout__section">
+ <a className="button" onClick={handleLogout}>
+ <i className="fas fa-door-open"></i><span className="desktop__text"> Logout</span>
+ </a>
+ </div>
+
<div className="content-container">
{/* Section title */}
+
<div className="my-videos-container">
+ <div className="text">
<h2>Your engagements</h2>
- <button className="button" onClick={handleLogout}>
- Logout
- </button>
+ <p style={{ fontSize: "1rem" }} className="mobile__text">
+ Swipe left and right to navigate.<br></br> Touch video to play. <br></br>Tap background to return.
+ </p>
+ <p className="desktop__text">
+ Click and drag left and right to navigate.
+ <br></br> Click video to play.
+ <br></br>Click background to return.
+ </p>
+ </div>
</div>
{/* AnimatePresence ensures smooth transition between pages */}
diff --git a/src/components/FileUploader.tsx b/src/components/FileUploader.tsx
index c57bb048854fdcd4a043fd51286ba2d84a1977f5..ec3db0e1e43e9ab86ce103ed8f3de9435c03d35a 100644
--- a/src/components/FileUploader.tsx
+++ b/src/components/FileUploader.tsx
@@ -152,6 +152,16 @@ export default function FileUploader() {
return 0;
};
+ // Watch the status and redirect to home if successful
+ useEffect(() => {
+ if (status === "success") {
+ const timer = setTimeout(() => {
+ window.location.href = "/"; // Redirect to home
+ }, 1500); // Wait for 3 seconds before redirecting
+
+ return () => clearTimeout(timer); // Cleanup the timer on unmount
+ }
+ }, [status]);
// Get the progress message based on status
const getProgressMessage = () => {
if (status === "uploading") {
@@ -200,9 +210,16 @@ export default function FileUploader() {
Transcoding may take a while depending on video size...
</p>
)}
+
</div>
)}
+ {status === "success" && (
+ <p className="info-text">
+ Redirecting back to home...
+ </p>
+ )}
+
{/* <style>{`
`}</style> */}
diff --git a/src/styles/User.scss b/src/styles/User.scss
index 4d4ee6ace6476c4b652149df226b6322a748dce1..bcfce6ef2c96c69f5f8f1198270267cfd2588449 100644
--- a/src/styles/User.scss
+++ b/src/styles/User.scss
@@ -3,10 +3,10 @@
// Outer wrapper for the entire user page (full viewport)
.user-page-wrapper {
position: relative;
- width: 100vw;
- min-width: 100vw;
- height: 100vh;
- display: flex;
+ // width: 100vw;
+ // min-width: 100vw;
+ height: 70vh;
+ display: block;
justify-content: center; // Centers content horizontally
align-items: center; // Centers content vertically
}
@@ -17,6 +17,8 @@
flex-direction: column;
align-items: center; // Centers children horizontally
transition: filter 0.3s ease, transform 0.2s ease-in-out;
+ margin: 0 auto;
+ max-width: 80vw;
// Blur effect when a video is opened in fullscreen
&.blur {
@@ -48,30 +50,51 @@
// Content box with elevation and rounded corners
.content-container {
- display: flex;
+ // display: flex;
// min-width: 1000px;
flex-direction: column;
align-items: center;
// background-color: white;
border: 2px solid white;
- margin: auto;
- padding: 20px;
+ // margin: auto;
+ // padding: 20px;
+ height: 70vh;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
+.logout__section{
+ width: 90vw;
+ height: 60px;
+ margin: 10px 10px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: flex-end;
+}
// "My Videos" section title
.my-videos-container {
- // background-color: darkgreen;
display: flex;
+
+ padding: 0px 10px;
+ // background-color: darkgreen;
+ // display: flex;
justify-content: space-between;
color: white;
// padding: 10px 20px;
border-radius: 5px;
- gap: 50vw; // Adds space between elements
- margin-bottom: 20px;
+ // gap: 50vw; // Adds space between elements
+ // margin-bottom: 10px;
font-size: 1.4rem;
font-weight: bold;
+ .button{
+ font-size: 1.5rem;
+ height: 40px;
+ width: 80px;
+ // padding: 2px 15px;
+ text-align: center;
+ padding: auto;
+ }
}
// Video grid container with smooth page transition effect
@@ -79,11 +102,13 @@
display: grid;
grid-template-columns: repeat(3, 1fr); // 3-column layout
gap: 2%;
- background-color: #3b7543af;
+ // background-color: #3b7543af;
backdrop-filter: blur(5px); // Adds a subtle background blur effect
width: 90vw;
- height: 73vh;
- min-height: 73vh;
+ // height: 73vh;
+ // min-height: 73vh;
+ max-height: 40vh;
+ padding: 5px;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
@@ -222,22 +247,21 @@
// Mobile Responsiveness Adjustments
@media (max-width: 768px) {
+ .my-videos-container {
+ font-size: 1.2rem; // Adjust font size for smaller screens
+ display: block;
+ }
.video-grid {
grid-template-columns: repeat(2, 1fr); // Adjust to 2 columns for tablets
+ grid-auto-rows: auto; // Automatically create new rows for video thumbnails
}
- .home-button {
- width: 100%; // Full-width button for easier tap access
- }
+ // .home-button {
+ // width: 100%; // Full-width button for easier tap access
+ // }
}
-@media (max-width: 480px) {
- .video-grid {
- grid-template-columns: repeat(
- 1,
- 1fr
- ); // Show only 1 video per row for mobile
- }
+@media (max-width: 670px) {
.user-container {
padding: 10px; // Reduce padding to better fit small screens
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 1fd5dde882728af621959682f9ba42a2053261c3..56f5dfc3505b565828909fff97094d5e1491b8af 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -36,7 +36,8 @@ body {
text-decoration: none;
text-shadow: 0px 0px 13px #283966;
width: auto; // Let buttons size to their content
- min-width: 120px; // Optional: Ensure a minimum width
+ height: auto;
+ // min-width: 120px; // Optional: Ensure a minimum width
// display: inline-block;
transition: all 0.3s ease;
@@ -62,6 +63,10 @@ body {
margin-top: 200px;
}
+.mobile__text{
+ display: none;
+}
+
@media screen and (max-width: 800px){
.center-container{
margin-top: 300px;
@@ -70,7 +75,10 @@ body {
@media screen and (max-width: 1250px){
.desktop__text{
- display:none;
+ display:none;
+ }
+ .mobile__text{
+ display: block;
}
.button{
padding: 10px;