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

Moved frontend out of webserver into it's own container

Browse Source
This commit is contained in:
Dylan De Faoite
2025-01-23 11:28:53 +00:00
parent e826311c34
commit c0674c58b4
50 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -0,0 +1,95 @@
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 Normal file
View File

@@ -0,0 +1,24 @@
// 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 Normal file
View File

@@ -0,0 +1,21 @@
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 Normal file
View File

@@ -0,0 +1,76 @@
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 Normal file
View File

@@ -0,0 +1,19 @@
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 Normal file
View File

@@ -0,0 +1,58 @@
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 Normal file
View File

@@ -0,0 +1,21 @@
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 Normal file
View File

@@ -0,0 +1,36 @@
// 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;