From 4d9e819b395dbcedad7cec3a8aae8546b71e3ce7 Mon Sep 17 00:00:00 2001 From: white <122345776@umail.ucc.ie> Date: Wed, 29 Jan 2025 16:50:26 +0000 Subject: [PATCH 1/4] UPDATE: Improved chat tranmission speed by 3seconds --- .../src/components/Stream/StreamerRoute.tsx | 2 +- nginx/nginx.conf | 4 ++++ web_server/blueprints/chat.py | 9 ++++++--- web_server/database/app.db | Bin 73728 -> 73728 bytes web_server/database/testing_data.sql | 19 +++++++++++++++++- 5 files changed, 29 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Stream/StreamerRoute.tsx b/frontend/src/components/Stream/StreamerRoute.tsx index e915609..8835479 100644 --- a/frontend/src/components/Stream/StreamerRoute.tsx +++ b/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 ? : (streamerName ? :
Error: Streamer not found
); + return isLive ? : (streamerName ? :
Error: Streamer not found
); }; export default StreamerRoute; diff --git a/nginx/nginx.conf b/nginx/nginx.conf index a5d45b5..573f21a 100644 --- a/nginx/nginx.conf +++ b/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 / { diff --git a/web_server/blueprints/chat.py b/web_server/blueprints/chat.py index d113b54..f22f67b 100644 --- a/web_server/blueprints/chat.py +++ b/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 ----------------------> @@ -13,7 +13,7 @@ socketio = SocketIO(cors_allowed_origins="*") def handle_connection() -> None: """ Accept the connection from the frontend. - """ + """ print("Client Connected") # Confirmation connect has been made @@ -64,10 +64,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 diff --git a/web_server/database/app.db b/web_server/database/app.db index 03a85db4914665b0ab5beb8a8173abc595335ffc..c7a7cf1e8de2fcf01ec1070ec501d63a03444da7 100644 GIT binary patch delta 306 zcmZoTz|wGlWr8&0nTayajAu3`EV1Wd;XlW~|AGH0{|)|gn*|m2@pEyoFpDxKXC#&| zZ@%HLBf!PX@5jJ@gujR14=C@zUvIvG)i~G@q|qa_Qo*$>wWv}@At%2qGcO%zT`JThESk9( u7#NuO?=kS-zyyH61dtm6%aI&I0n4#qq(2G+57+ Date: Wed, 29 Jan 2025 20:12:46 +0000 Subject: [PATCH 2/4] FEAT: Faster Border Animation on Submit When User Submit Registration, border animation rotates 360 degrees every 1 sec. May seem weird when reset --- frontend/src/assets/styles/auth.css | 27 ++++++++++++++----- frontend/src/components/Auth/AuthModal.tsx | 21 +++++++++++---- frontend/src/components/Auth/RegisterForm.tsx | 7 ++++- frontend/tailwind.config.js | 9 ++----- 4 files changed, 44 insertions(+), 20 deletions(-) diff --git a/frontend/src/assets/styles/auth.css b/frontend/src/assets/styles/auth.css index b0794d1..bb6bbfa 100644 --- a/frontend/src/assets/styles/auth.css +++ b/frontend/src/assets/styles/auth.css @@ -3,24 +3,37 @@ @tailwind utilities; @layer utilities { - /* Act as a border */ - .card-wrapper { + + .container { @apply absolute overflow-hidden rounded-2xl ; } - /* Gradient */ - .card-wrapper::before { + .container::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 */ - .card-content { + .front-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); + } +} \ No newline at end of file diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx index 92f21da..ea57b50 100644 --- a/frontend/src/components/Auth/AuthModal.tsx +++ b/frontend/src/components/Auth/AuthModal.tsx @@ -12,20 +12,31 @@ interface AuthModalProps { const AuthModal: React.FC = ({ onClose }) => { const [selectedTab, setSelectedTab] = useState("Login"); + const [spinDuration, setSpinDuration] = useState("7s") + + const handleSubmit = () => { + setSpinDuration("1s"); + + setTimeout(() => { + setSpinDuration("7s"); + }, 5000); + }; return ( <> {/*Background Blur*/}
{/*Container*/} -
+
{/*Border Container*/}
@@ -52,7 +63,7 @@ const AuthModal: React.FC = ({ onClose }) => { Register
- {selectedTab === "Login" ? : } + {selectedTab === "Login" ? : }
diff --git a/frontend/src/components/Auth/RegisterForm.tsx b/frontend/src/components/Auth/RegisterForm.tsx index 6bcc523..59c62ec 100644 --- a/frontend/src/components/Auth/RegisterForm.tsx +++ b/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; // Add the prop for the callback +} + +const RegisterForm: React.FC = ({ onSubmit }) => { const { setIsLoggedIn } = useAuth(); const [formData, setFormData] = useState({ @@ -58,6 +62,7 @@ const RegisterForm: React.FC = () => { const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); + onSubmit(); if (validateForm()) { try { diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index c3054d7..11a8100 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -12,7 +12,7 @@ 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', // No duration here }, @@ -24,17 +24,12 @@ export default { moving_text_colour: { "0%": { backgroundPosition: "0% 50%" }, "100%": { backgroundPosition: "100% 50%" }, - + moving_bg: { '0%': { backgroundPosition: '0% 0%' }, '100%': { backgroundPosition: '100% 0%' }, } }, - 'border-spin': { - '100%': { - transform: 'rotate(360deg)', - }, - }, }, }, plugins: [ From 92f691b6bdf3cf276012cc7f553634fe328706ee Mon Sep 17 00:00:00 2001 From: EvanLin3141 Date: Wed, 29 Jan 2025 23:20:23 +0000 Subject: [PATCH 3/4] FEAT: BorderSpeed Up on Login --- frontend/src/assets/styles/auth.css | 1 + frontend/src/components/Auth/AuthModal.tsx | 4 ++-- frontend/src/components/Auth/LoginForm.tsx | 10 ++++++++-- frontend/src/components/Auth/RegisterForm.tsx | 4 ++-- 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/frontend/src/assets/styles/auth.css b/frontend/src/assets/styles/auth.css index bb6bbfa..8cf29ef 100644 --- a/frontend/src/assets/styles/auth.css +++ b/frontend/src/assets/styles/auth.css @@ -22,6 +22,7 @@ width: 200%; height: 200%; animation: border-spin var(--spin-duration) linear infinite; + } .front-content { diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx index ea57b50..abca0d8 100644 --- a/frontend/src/components/Auth/AuthModal.tsx +++ b/frontend/src/components/Auth/AuthModal.tsx @@ -19,7 +19,7 @@ const AuthModal: React.FC = ({ onClose }) => { setTimeout(() => { setSpinDuration("7s"); - }, 5000); + }, 3500); }; return ( @@ -63,7 +63,7 @@ const AuthModal: React.FC = ({ onClose }) => { Register
- {selectedTab === "Login" ? : } + {selectedTab === "Login" ? : } diff --git a/frontend/src/components/Auth/LoginForm.tsx b/frontend/src/components/Auth/LoginForm.tsx index 7ef72dd..aff6199 100644 --- a/frontend/src/components/Auth/LoginForm.tsx +++ b/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 = ({ onSubmit }) => { const { setIsLoggedIn } = useAuth(); const [formData, setFormData] = useState({ @@ -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 = () => {
{errors.general && (

{errors.general}

diff --git a/frontend/src/components/Auth/RegisterForm.tsx b/frontend/src/components/Auth/RegisterForm.tsx index 59c62ec..8f3e9bc 100644 --- a/frontend/src/components/Auth/RegisterForm.tsx +++ b/frontend/src/components/Auth/RegisterForm.tsx @@ -19,7 +19,7 @@ interface FormErrors { } interface SubmitProps { - onSubmit: () => void; // Add the prop for the callback + onSubmit: () => void; } const RegisterForm: React.FC = ({ onSubmit }) => { @@ -110,7 +110,7 @@ const RegisterForm: React.FC = ({ onSubmit }) => { {errors.general && (

{errors.general}

From 17ab2743de4b93418400790f10f591c2c53a4ea0 Mon Sep 17 00:00:00 2001 From: EvanLin3141 Date: Thu, 30 Jan 2025 00:52:39 +0000 Subject: [PATCH 4/4] FEAT: Floating Effect Implemented Floating Effect on AuthModel, need further adjustments --- frontend/src/components/Auth/AuthModal.tsx | 2 +- frontend/tailwind.config.js | 20 +++++++++++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx index abca0d8..1f6fcf6 100644 --- a/frontend/src/components/Auth/AuthModal.tsx +++ b/frontend/src/components/Auth/AuthModal.tsx @@ -29,7 +29,7 @@ const AuthModal: React.FC = ({ onClose }) => { {/*Container*/}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 11a8100..ed4c182 100644 --- a/frontend/tailwind.config.js +++ b/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 linear infinite', // No duration here + 'border-spin': 'border-spin linear infinite', + floating: "floating 30s linear infinite" }, @@ -30,6 +31,23 @@ export default { '100%': { backgroundPosition: '100% 0%' }, } }, + + floating: { + '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)' }, + }, }, }, plugins: [