dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dylan De Faoite
2025-01-31 00:13:08 +00:00
parent 4396d71c2d dcb58248c1
commit 7c2c70ac84
5 changed files with 140 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -25,10 +25,10 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
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>
<div id="blurring-layer" className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
{/*Container*/}
<div
className="container fixed inset-0 flex flex-col items-center justify-around z-50
className="container fixed inset-0 flex flex-col items-center justify-around z-[9999]
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all animate-floating"
style={{ "--spin-duration": spinDuration } as React.CSSProperties}
>

41
frontend/src/components/Video/ChatPanel.tsx
View File

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef } from "react";
import Input from "../Layout/Input";
import { useAuth } from "../../context/AuthContext";
import { useSocket } from "../../context/SocketContext";
import Button from "../Layout/Button";
import AuthModal from "../Auth/AuthModal";
interface ChatMessage {
chatter_username: string;
@@ -93,7 +95,22 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
}
};
//added to show login/reg if not
const [showAuthModal, setShowAuthModal] = useState(false);
useEffect(() => {
if (showAuthModal) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
return () => {
document.body.style.overflow = "unset";
};
}, [showAuthModal]);
return (
<>
<div id="chat-panel" className="h-full flex flex-col rounded-lg p-4">
<h2 className="text-xl font-bold mb-4 text-white">Stream Chat</h2>
@@ -124,6 +141,8 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
</div>
<div className="flex justify-center gap-2">
{isLoggedIn &&
<>
<Input
type="text"
value={inputMessage}
@@ -131,17 +150,31 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
onKeyDown={handleKeyPress}
placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
disabled={!isLoggedIn}
extraClasses="flex-grow disabled:cursor-not-allowed"
/>
extraClasses="flex-grow"
onClick={() => (!isLoggedIn && setShowAuthModal(true))} />
<button
onClick={sendChat}
disabled={!isLoggedIn}
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
>
Send
</button>
</>
}
{!isLoggedIn &&
<Button
extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap z-[999]"
onClick={() => (setShowAuthModal(true))}></Button>
}
</div>
{showAuthModal && (
<div className="fixed inset-0 z-[9999] flex items-center justify-center">
<AuthModal onClose={() => setShowAuthModal(false)} />
</div>
)}
</div>
</>
);
};

32
frontend/src/pages/VideoPage.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import Navbar from "../components/Layout/Navbar";
import Button from "../components/Layout/Button";
import Button, { ToggleButton } from "../components/Layout/Button";
import ChatPanel from "../components/Video/ChatPanel";
import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
import { useNavigate, useParams } from "react-router-dom";
@@ -29,6 +29,13 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
const [streamData, setStreamData] = useState<StreamDataProps>();
const navigate = useNavigate();
const [isChatVisible, setIsChatVisible] = useState(false);
const [showAuthModal, setShowAuthModal] = useState(false);
const toggleChat = () => {
setIsChatVisible((prev) => !prev);
}
// useEffect(() => {
// // Prevent scrolling when checkout is open
// if (showCheckout) {
@@ -44,8 +51,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
useEffect(() => {
// Fetch stream data for this streamer
fetch(
`/api/get_stream_data/${streamerName}${
streamId == 0 ? "" : `/${streamId}`
`/api/get_stream_data/${streamerName}${streamId == 0 ? "" : `/${streamId}`
}`
).then((res) => {
if (!res.ok) {
@@ -67,14 +73,34 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
});
}, [streamId, streamerName]);
useEffect(() => {
document.body.style.overflow = showAuthModal ? "hidden" : "unset";
return () => {
document.body.style.overflow = "unset"; // Cleanup
};
}, [showAuthModal]);
return (
<div id="videoPage" className="w-full">
<Navbar />
<div id="container" className="bg-gray-900">
<VideoPlayer streamId={streamId} />
<ToggleButton
onClick={toggleChat}
toggled={isChatVisible}
extraClasses="absolute top-10 left-4 z-5"
>
{isChatVisible ? "Hide Chat" : "Show Chat"}
</ToggleButton>
{isChatVisible &&
<div id="chat" className="relative top-0 right-0 bg-gray-800 bg-opacity-75 text-white p-4 w-1/3 h-full z-10 overflow-y-auto">
<ChatPanel streamId={streamId} />
</div> }
<div
id="stream-info"

58
web_server/blueprints/oauth.py Normal file
View File

@@ -0,0 +1,58 @@
from authlib.integrations.flask_client import OAuth, OAuthError
from flask import Blueprint, url_for, jsonify, session
oauth_bp = Blueprint("oauth", __name__)
def init_oauth(app):
oauth = OAuth(app)
google = oauth.register(
'google',
client_id=app.config['GOOGLE_CLIENT_ID'],
client_secret=app.config['GOOGLE_CLIENT_SECRET'],
authorize_url='https://accounts.google.com/o/oauth2/auth',
authorize_params=None,
access_token_url='https://accounts.google.com/o/oauth2/token',
access_token_params=None,
refresh_token_url=None,
redirect_uri=url_for('google.google_auth', _external=True),
scope='openid profile email',
)
@oauth_bp.route('/login/google')
def login_google():
"""
Redirects to Google's OAuth authorization page
"""
return google.authorize_redirect(url_for('google.google_auth', _external=True))
@oauth_bp.route('/google_auth')
def google_auth():
try:
token = google.authorize_access_token()
user = google.parse_id_token(token)
# check if email exists else create a database entry
user_email = user.get("email")
session.clear()
session["username"] = "a"
session["user_id"] = 1
return jsonify({
'message': 'User authenticated successfully',
})
except OAuthError as e:
# Handle OAuth errors like failed authentication or invalid token
return jsonify({
'message': 'Authentication failed',
'error': str(e)
}), 400
except Exception as e:
# Handle other unexpected errors
return jsonify({
'message': 'An unexpected error occurred',
'error': str(e)
}), 500

1
web_server/requirements.txt
View File

@@ -24,5 +24,6 @@ WTForms==3.2.1
Gunicorn==20.1.0
gevent>=22.10.2
gevent-websocket
flask-oauthlib==0.9.6
celery==5.2.3
redis==5.2.1