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

Update .gitignore;

Browse Source 
Update to style of CheckoutForm
This commit is contained in:
Chris-1010
2025-01-23 11:46:40 +00:00
parent e7822f3c98
commit be30d9c924
38 changed files with 1 additions and 5201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/App.tsx
View File

@@ -1,28 +0,0 @@
import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import VideoPage from "./pages/VideoPage";
import LoginPage from "./pages/LoginPage";
import SignupPage from "./pages/SignupPage";
// import CheckoutPage from "./pages/CheckoutPage";
import NotFoundPage from "./pages/NotFoundPage";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/video" element={<VideoPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignupPage />} />
{/* <Route path="/checkout" element={<CheckoutPage />} /> */}
{/* <Route path="/checkout" element={<CheckoutForm />} /> */}
{/* <Route path="/return" element={<Return />} /> */}
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
);
}
export default App;

91
frontend/src/assets/styles/index.css
View File

@@ -1,91 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: hsl(242, 100%, 10%);
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: #ff9900;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/*
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
} */

1
frontend/src/components/Auth/LoginForm.tsx
View File

@@ -1 +0,0 @@
// login.html

1
frontend/src/components/Auth/SignupForm.tsx
View File

@@ -1 +0,0 @@
// signup.html

95
frontend/src/components/Checkout/CheckoutForm.tsx
View File

@@ -1,95 +0,0 @@
import React, { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import {
EmbeddedCheckoutProvider,
EmbeddedCheckout,
} from "@stripe/react-stripe-js";
import { Navigate } from "react-router-dom";
const API_URL = import.meta.env.VITE_API_URL;
// Initialize Stripe once
const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY);
export const Return: React.FC = () => {
const [status, setStatus] = useState<string | null>(null);
const [customerEmail, setCustomerEmail] = useState("");
useEffect(() => {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const sessionId = urlParams.get("session_id");
if (sessionId) {
fetch(`${API_URL}/session-status?session_id=${sessionId}`)
.then((res) => res.json())
.then((data) => {
setStatus(data.status);
setCustomerEmail(data.customer_email);
});
}
}, []);
if (status === "open") {
return <Navigate to="/checkout" />;
}
if (status === "complete") {
return (
<section id="success">
<p>
We appreciate your business! A confirmation email will be sent to{" "}
{customerEmail}. If you have any questions, please email{" "}
<a href="mailto:orders@example.com">orders@example.com</a>.
</p>
</section>
);
}
return null;
};
// Main CheckoutForm component
interface CheckoutFormProps {
onClose: () => void;
}
const CheckoutForm: React.FC<CheckoutFormProps> = ({ onClose }) => {
const fetchClientSecret = () => {
return fetch(`${API_URL}/create-checkout-session`, {
method: "POST",
})
.then((res) => res.json())
.then((data) => data.clientSecret);
};
const options = { fetchClientSecret };
return (
<>
<div className="blurring-layer fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm"></div>
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 h-[70vh] m-auto w-fit py-[50px] px-[100px] rounded-[2rem]">
<button
onClick={onClose}
className="absolute top-[1rem] right-[3rem] text-[2rem] text-red-600 font-black hover:text-[2.5rem] transition-all"
>
✕
</button>
<div className="bg-white p-6 rounded-lg w-full max-w-2xl relative h-full rounded-[2rem]">
<div
id="checkout"
className="h-full overflow-auto min-w-[30vw]"
style={{ width: "clamp(300px, 60vw, 800px)" }}
>
<EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
<EmbeddedCheckout />
</EmbeddedCheckoutProvider>
</div>
</div>
</div>
</>
);
};
export default CheckoutForm;

24
frontend/src/components/Layout/BaseLayout.tsx
View File

@@ -1,24 +0,0 @@
// base.html
// src/components/Layout/BaseLayout.tsx
import React from 'react';
interface BaseLayoutProps {
children: React.ReactNode;
}
const BaseLayout: React.FC<BaseLayoutProps> = ({ children }) => {
return (
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Live Stream</title>
</head>
<body>
{children}
</body>
</html>
);
};
export default BaseLayout;

21
frontend/src/components/Layout/Button.tsx
View File

@@ -1,21 +0,0 @@
import React from "react";
interface ButtonProps {
title?: string;
onClick?: () => void;
}
const Button: React.FC<ButtonProps> = ({
title = "Submit",
onClick,
}) => {
return (
<div>
<button onClick={onClick}>
{title}
</button>
</div>
);
};
export default Button;

76
frontend/src/components/Layout/ListRow.tsx
View File

@@ -1,76 +0,0 @@
import React from "react";
interface StreamItem {
id: number;
title: string;
streamer: string;
viewers: number;
thumbnail?: string;
}
interface ListEntryProps {
stream: StreamItem;
onClick?: () => void;
}
interface ListRowProps {
title: string;
description: string;
streams: StreamItem[];
onStreamClick?: (streamId: string) => void;
}
// Individual stream entry component
const ListEntry: React.FC<ListEntryProps> = ({ stream, onClick }) => {
return (
<div
className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
onClick={onClick}
>
<div className="relative w-full pt-[56.25%]">
{stream.thumbnail ? (
<img
src={`images/`+stream.thumbnail}
alt={stream.title}
className="absolute top-0 left-0 w-full h-full object-cover"
/>
) : (
<div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
)}
</div>
<div className="p-3">
<h3 className="font-semibold text-lg">{stream.title}</h3>
<p className="text-gray-400">{stream.streamer}</p>
<p className="text-sm text-gray-500">{stream.viewers} viewers</p>
</div>
</div>
);
};
// Row of stream entries
const ListRow: React.FC<ListRowProps> = ({
title,
description,
streams,
onStreamClick,
}) => {
return (
<div className="flex flex-col space-y-4 py-6">
<div className="space-y-1">
<h2 className="text-2xl font-bold">{title}</h2>
<p className="text-gray-400">{description}</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{streams.map((stream) => (
<ListEntry
key={stream.id}
stream={stream}
onClick={() => onStreamClick?.(stream.id)}
/>
))}
</div>
</div>
);
};
export default ListRow;

19
frontend/src/components/Layout/Logo.tsx
View File

@@ -1,19 +0,0 @@
import React from "react";
const Logo: React.FC = () => {
return (
<div className="text-center text-[12vh] font-bold text-orange-500">
<h6 className="text-sm">Go on, have a...</h6>
<div className="flex justify-center items-center space-x-6">
<span>G</span>
<span>A</span>
<span>N</span>
<span>D</span>
<span>E</span>
<span>R</span>
</div>
</div>
);
};
export default Logo;

58
frontend/src/components/Layout/Navbar.tsx
View File

@@ -1,58 +0,0 @@
import React from "react";
import Logo from "./Logo";
import Button from "./Button";
import { Link } from "react-router-dom";
import { Search, User, LogIn } from "lucide-react";
interface NavbarProps {
logged_in: boolean;
}
const Navbar: React.FC<NavbarProps> = ({ logged_in }) => {
return (
<div className="flex flex-col justify-around items-center h-[45vh]">
<Logo />
<div className="nav-buttons flex items-center space-x-4">
{logged_in ? (
<div>
<Link
to="/logout"
className="flex items-center text-gray-700 hover:text-purple-600"
>
<Button title="" />
</Link>
</div>
) : (
<div>
<Link
to="/login"
className="flex items-center text-gray-700 hover:text-purple-600"
>
<LogIn className="h-5 w-5 mr-1" />
Login
</Link>
<Link
to="/signup"
className="flex items-center text-gray-700 hover:text-purple-600"
>
<User className="h-5 w-5 mr-1" />
Sign Up
</Link>
</div>
)}
<Button title="Quick Settings" />
</div>
<div className="search-bar relative">
<input
type="text"
placeholder="Search..."
className="w-64 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-purple-500"
/>
<Search className="absolute right-3 top-2.5 h-5 w-5 text-gray-400" />
</div>
</div>
);
};
export default Navbar;

21
frontend/src/components/Stream/Thumbnail.tsx
View File

@@ -1,21 +0,0 @@
import React from 'react'
interface ThumbnailProps {
path: string;
alt?: string;
}
const Thumbnail = ({ path, alt }: ThumbnailProps) => {
return (
<div>
<img
width={300}
src={path}
alt={alt}
className="stream-thumbnail rounded-md"
/>
</div>
)
}
export default Thumbnail

36
frontend/src/components/Video/VideoPlayer.tsx
View File

@@ -1,36 +0,0 @@
// video.html
// src/components/Video/VideoPlayer.tsx
import React, { useEffect } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
const VideoPlayer: React.FC = () => {
useEffect(() => {
const player = videojs('player', {
width: 1280,
height: 720,
controls: true,
preload: 'auto',
sources: [{
src: '/hls/stream.m3u8',
type: 'application/x-mpegURL'
}]
});
return () => {
if (player) {
player.dispose();
}
};
}, []);
return (
<video
id="player"
className="video-js vjs-default-skin"
/>
);
};
export default VideoPlayer;

10
frontend/src/main.tsx
View File

@@ -1,10 +0,0 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './assets/styles/index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

64
frontend/src/pages/HomePage.tsx
View File

@@ -1,64 +0,0 @@
import React, { useState, useEffect } from "react";
import Navbar from "../components/Layout/Navbar";
import ListRow from "../components/Layout/ListRow";
// import { data, Link } from "react-router-dom";
const API_URL = import.meta.env.VITE_API_URL;
const handleStreamClick = (streamId: string) => {
// Handle navigation to stream page
console.log(`Navigating to stream ${streamId}`);
};
interface StreamItem {
id: number;
title: string;
streamer: string;
viewers: number;
thumbnail?: string;
}
const HomePage: React.FC = () => {
const [featuredStreams, setFeaturedStreams] = useState<StreamItem[]>([]);
const [loggedInStatus, setLoggedInStatus] = useState<boolean>(false);
// ↓↓ runs twice when in development mode
useEffect(() => {
fetch(`${API_URL}/get_loggedin_status`)
.then((response) => response.json())
.then((data) => {
setLoggedInStatus(data);
console.log(data);
});
fetch(`${API_URL}/get_streams`)
.then((response) => response.json())
.then((data: StreamItem[]) => {
setFeaturedStreams(data);
console.log(data);
});
}, []);
return (
<div
className="home-page bg-repeat"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<Navbar logged_in={loggedInStatus} />
<ListRow
title="Live Now"
description="Streamers that are currently live"
streams={featuredStreams}
onStreamClick={handleStreamClick}
/>
<ListRow
title="Trending Categories"
description="Categories that have been 'popping off' lately"
streams={featuredStreams}
onStreamClick={handleStreamClick}
/>
</div>
);
};
export default HomePage;

10
frontend/src/pages/LoginPage.tsx
View File

@@ -1,10 +0,0 @@
import React from 'react';
const LoginPage: React.FC = () => {
return (
<div>
</div>
);
};
export default LoginPage;

10
frontend/src/pages/NotFoundPage.tsx
View File

@@ -1,10 +0,0 @@
import React from 'react';
const NotFoundPage: React.FC = () => {
return (
<div>
</div>
);
};
export default NotFoundPage;

10
frontend/src/pages/SignupPage.tsx
View File

@@ -1,10 +0,0 @@
import React from 'react';
const SignupPage: React.FC = () => {
return (
<div>
</div>
);
};
export default SignupPage;

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

@@ -1,36 +0,0 @@
import React, { useState, useEffect } from 'react';
import Button from '../components/Layout/Button';
import CheckoutForm, { Return } from '../components/Checkout/CheckoutForm';
const VideoPage: React.FC = () => {
const [showCheckout, setShowCheckout] = useState(false);
const showReturn = window.location.search.includes('session_id');
useEffect(() => {
if (showCheckout) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
// Cleanup function to ensure overflow is restored when component unmounts
return () => {
document.body.style.overflow = "unset";
};
}, [showCheckout]);
return (
<div>
<h1>Hello!</h1>
<Button
title="Payment Screen Test"
onClick={() => setShowCheckout(true)}
/>
{showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />}
{showReturn && <Return />}
</div>
);
};
export default VideoPage;

1
frontend/src/vite-env.d.ts vendored
View File

@@ -1 +0,0 @@
/// <reference types="vite/client" />