This commit is contained in:
JustIceO7
2025-01-30 01:22:35 +00:00
10 changed files with 100 additions and 27 deletions

View File

@@ -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);
}
}

View File

@@ -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>
</>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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;

View File

@@ -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)' },
},
},
},

View File

@@ -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 / {

View File

@@ -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.

View File

@@ -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