Merge branch 'main' of https://github.com/john-david3/cs3305-team11

frontend/src/assets/styles/auth.css

@@ -3,24 +3,38 @@
 @tailwind utilities;
 
 @layer utilities {
-  /* Act as a border */
+
-  .card-wrapper {
+  .container {
     @apply absolute overflow-hidden rounded-2xl ;
   }
 
-  /* Gradient */
+  .container::before {     
-  .card-wrapper::before {     
     background-image: conic-gradient(
         from 200deg at 50% 50%,
         transparent 70%,
         #55e28b 85%, 
         #3b82f6 90%,
         #BF40BF 95%);
-    @apply absolute left-[-50%] top-[-50%] h-[200%] w-[200%] animate-border-spin content-[''];
+      
+    content: '';
+    position: absolute;
+
+    width: 200%;
+    height: 200%;
+    animation: border-spin var(--spin-duration) linear infinite;
+    
   }
 
-  /* Body */
+  .front-content {
-  .card-content {
     @apply absolute left-[1px] top-[1px] h-[calc(100%-4px)] w-[calc(100%-4px)] rounded-2xl ;
   }
 }
+
+@keyframes border-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

frontend/src/components/Auth/AuthModal.tsx

@@ -12,20 +12,31 @@ interface AuthModalProps {
 
 const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
   const [selectedTab, setSelectedTab] = useState<string>("Login");
+  const [spinDuration, setSpinDuration] = useState("7s")
+
+  const handleSubmit = () => {
+    setSpinDuration("1s");
+
+    setTimeout(() => {
+      setSpinDuration("7s");
+    }, 3500);
+  };
 
   return (
     <>
       {/*Background Blur*/}
       <div id="blurring-layer" className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
       {/*Container*/}
-      <div className="card-wrapper fixed inset-0 flex flex-col items-center justify-around z-50 
+      <div
-      h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]
+        className="container fixed inset-0 flex flex-col items-center justify-around z-50 
-       transition-all" >
+        h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all animate-floating"
+        style={{ "--spin-duration": spinDuration } as React.CSSProperties}
+      >
 
         {/*Border Container*/}  
         <div  
           id="border-container"
-          className="card-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
+          className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
           z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
           >
           <div id="login-methods" className=" w-full flex flex-row items-center justify-evenly">
@@ -52,7 +63,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
               Register
             </ToggleButton>
           </div>
-          {selectedTab === "Login" ? <LoginForm /> : <RegisterForm />}
+          {selectedTab === "Login" ? <LoginForm onSubmit={handleSubmit} /> : <RegisterForm onSubmit={handleSubmit}/>}
         </div>
       </div>
     </>

frontend/src/components/Auth/LoginForm.tsx

@@ -14,7 +14,12 @@ interface FormErrors {
   general?: string; // For general authentication errors
 }
 
-const LoginForm: React.FC = () => {
+//Speed up border animation
+interface SubmitProps {
+  onSubmit: () => void; 
+}
+
+const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
   const { setIsLoggedIn } = useAuth();
 
   const [formData, setFormData] = useState<LoginFormData>({
@@ -46,6 +51,7 @@ const LoginForm: React.FC = () => {
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
+    onSubmit();
     e.preventDefault();
 
     if (validateForm()) {
@@ -94,7 +100,7 @@ const LoginForm: React.FC = () => {
     <form
       onSubmit={handleSubmit}
       id="login-form"
-      className="h-[100%] flex flex-col h-full justify-evenly items-center"
+      className="h-[100%] flex flex-col justify-evenly items-center"
     >
       {errors.general && (
         <p className="text-red-500 text-sm text-center">{errors.general}</p>

frontend/src/components/Auth/RegisterForm.tsx

@@ -18,7 +18,11 @@ interface FormErrors {
   general?: string; // For general authentication errors
 }
 
-const RegisterForm: React.FC = () => {
+interface SubmitProps {
+  onSubmit: () => void; 
+}
+
+const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
   const { setIsLoggedIn } = useAuth();
 
   const [formData, setFormData] = useState<RegisterFormData>({
@@ -58,6 +62,7 @@ const RegisterForm: React.FC = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    onSubmit();
 
     if (validateForm()) {
       try {
@@ -105,7 +110,7 @@ const RegisterForm: React.FC = () => {
     <form
       onSubmit={handleSubmit}
       id="register-form"
-      className="h-[100%] flex flex-col h-full justify-evenly items-center"
+      className="h-[100%] flex flex-col justify-evenly items-center"
     >
       {errors.general && (
         <p className="text-red-500 text-sm text-center">{errors.general}</p>

frontend/src/components/Stream/StreamerRoute.tsx

@@ -35,7 +35,7 @@ const StreamerRoute: React.FC = () => {
   }
 
   // streamId=0 is a special case for the streamer's latest stream
-  return isLive ? <VideoPage streamId={0} /> : (streamerName ? <UserPage username={streamerName} /> : <div>Error: Streamer not found</div>);
+  return isLive ? <VideoPage streamId={1} /> : (streamerName ? <UserPage username={streamerName} /> : <div>Error: Streamer not found</div>);
 };
 
 export default StreamerRoute;

frontend/tailwind.config.js

@@ -12,7 +12,8 @@ export default {
       animation: {
         moving_text_colour: "moving_text_colour 6s ease-in-out infinite alternate",
         moving_bg: 'moving_bg 200s linear infinite',
-        'border-spin': 'border-spin 7s linear infinite',
+        'border-spin': 'border-spin linear infinite', 
+        floating: "floating 30s linear infinite"
       },
 
 
@@ -30,10 +31,22 @@ export default {
             '100%': { backgroundPosition: '100% 0%' },
           }
         },
-        'border-spin': {
+
-          '100%': {
+        floating: {
-            transform: 'rotate(360deg)',
+          '0%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' },
-          },
+          '5%': { transform: 'translate(-3px, -5.5px) rotateX(-0.35deg) rotateY(-0.55deg)' },
+          '10%': { transform: 'translate(-9px, -6.15px) rotateX(-1.1deg) rotateY(-1.23deg)' },
+          '13%': { transform: 'translate(-12px, -5.5px) rotateX(-1.9deg) rotateY(-1.34deg)' },
+          //Top Left
+          '20%': { transform: 'translate(-10px, -7px) rotateX(-2.5deg) rotateY(-1.5deg)' }, 
+          '25%': { transform: 'translate(-6px, -5px) rotateX(-1.75deg) rotateY(-0.65deg)' },
+          '30%': { transform: 'translate(-4px, -1px) rotateX(0.45deg) rotateY(-0.45deg)' },
+          '35%': { transform: 'translate(-7px, 4px) rotateX(1.85deg) rotateY(-1.5deg)' },
+          //Bottom Left
+          '40%': { transform: 'translate(-10px, 7px) rotateX(2.5deg) rotateY(-1.5deg)' },  /* Bottom-left tilt */
+          '60%': { transform: 'translate(10px, 7px) rotateX(2.5deg) rotateY(1.5deg)' },   /* Bottom-right tilt */
+          '80%': { transform: 'translate(10px, -7px) rotateX(-2.5deg) rotateY(1.5deg)' }, /* Top-right tilt */
+          '100%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' }, 
         },
       },
     },

nginx/nginx.conf

@@ -65,6 +65,10 @@ http {
 
         location /socket.io/ {
             proxy_pass http://web_server:5000/socket.io/;
+            proxy_http_version 1.1;
+            proxy_buffering off;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
         }
 
         location / {

web_server/blueprints/chat.py

@@ -5,7 +5,7 @@ from datetime import datetime
 from flask_socketio import SocketIO
 
 chat_bp = Blueprint("chat", __name__)
-socketio = SocketIO(cors_allowed_origins="*")
+socketio = SocketIO()
 
 # <---------------------- ROUTES NEEDS TO BE CHANGED TO VIDEO OR DELETED AS DEEMED APPROPRIATE ---------------------->
 
@@ -63,10 +63,13 @@ def get_past_chat(stream_id: int):
                                     LIMIT 50
                                )
                                ORDER BY time_sent ASC;""", (stream_id,))
+
     db.close_connection()
 
     # Create JSON output of chat_history to pass through NGINX proxy
-    chat_history = [{"chatter_id": chat[0], "message": chat[1], "time_sent": chat[2]} for chat in all_chats]
+    print(f"Bollocks: {all_chats}", flush=True)
+    chat_history = [{"chatter_id": chat["chatter_id"], "message": chat["message"], "time_sent": chat["time_sent"]} for chat in all_chats]
+    print(f"chat history: {chat_history}", flush=True)
 
     # Pass the chat history to the proxy
     return jsonify({"chat_history": chat_history}), 200

web_server/database/testing_data.sql

@@ -49,6 +49,11 @@ INSERT INTO subscribes (user_id, subscribed_id, since, expires) VALUES
 INSERT INTO users (username, password, email, num_followers, stream_key, is_partnered, bio) VALUES 
 ('GamerDude2', 'password123', 'gamerdude3@gmail.com', 3200, '7890', 0, 'Streaming my gaming adventures!');
 
+INSERT INTO chat (stream_id, chatter_id, message) VALUES
+(1, 'Susan', 'Hey Every, loving the stream'),
+(1, 'Susan', 'This stream is crazy man'),
+(1, 'JohnnyHash', 'Woah, cannot believe that');
+
 SELECT * FROM users;
 SELECT * FROM follows;
 SELECT * FROM user_preferences;
@@ -64,3 +69,15 @@ SELECT name FROM sqlite_master WHERE type='table';
 
 
 SELECT isLive FROM streams WHERE user_id = '5';
+
+
+
+SELECT *
+FROM (
+    SELECT chatter_id, message, time_sent
+    FROM chat
+    WHERE stream_id = 1
+    ORDER BY time_sent DESC
+    LIMIT 50
+)
+ORDER BY time_sent ASC