Merge branch 'main' of https://github.com/john-david3/cs3305-team11
This commit is contained in:
@@ -3,24 +3,38 @@
|
||||
@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);
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]
|
||||
transition-all" >
|
||||
<div
|
||||
className="container fixed inset-0 flex flex-col items-center justify-around z-50
|
||||
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>
|
||||
</>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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%': {
|
||||
transform: 'rotate(360deg)',
|
||||
},
|
||||
|
||||
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)' },
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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 / {
|
||||
|
||||
@@ -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
|
||||
|
||||
Binary file not shown.
@@ -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
|
||||
Reference in New Issue
Block a user