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

Fix: Imports on backend

Browse Source 
Fix: Connected Backend to Frontend over localhost
This commit is contained in:
Chris-1010
2025-01-21 23:54:11 +00:00
parent 2cda918e72
commit 1ede987914
101 changed files with 354 additions and 18641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web_server/frontend/src/App.tsx Normal file
View File

@@ -0,0 +1,24 @@
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="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
);
}
export default App;

BIN
web_server/frontend/src/assets/images/dance_game.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 KiB

BIN
web_server/frontend/src/assets/images/elf.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 372 KiB

BIN
web_server/frontend/src/assets/images/monkey.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
web_server/frontend/src/assets/images/surface.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 MiB

73
web_server/frontend/src/assets/styles/index.css Normal file
View File

@@ -0,0 +1,73 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
: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
web_server/frontend/src/components/Auth/LoginForm.tsx Normal file
View File

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

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

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

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

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

24
web_server/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;

36
web_server/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;

10
web_server/frontend/src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
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>,
)

10
web_server/frontend/src/pages/CheckoutPage.tsx Normal file
View File

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

73
web_server/frontend/src/pages/HomePage.tsx Normal file
View File

@@ -0,0 +1,73 @@
import React, { useState, useEffect } from "react";
// import { data, Link } from "react-router-dom";
// import { Search, User, LogIn } from "lucide-react";
const HomePage: React.FC = () => {
const [featuredStreams, setFeaturedStreams] = useState([{}]);
//! ↓↓ runs twice when in development mode
useEffect(() => {
fetch("http://127.0.0.1:5000/get_streams")
.then((response) => response.json())
.then((data) => {
setFeaturedStreams(data);
console.log(data);
});
}, []);
return (
<div>
<nav className="navbar">
<div className="logo">
<span>G</span>
<span>A</span>
<span>N</span>
<span>D</span>
<span>E</span>
<span>R</span>
</div>
<div className="nav-buttons">
<button className="nav-button">☰</button>
<button className="nav-button">⚙️</button>
</div>
</nav>
<div className="tagline">Behold, your next great watch!</div>
<div className="search-container">
{/* <input type="text" className="search-bar" placeholder="🔍 Search..."> */}
</div>
<h2 className="section-title">Live Now</h2>
<div className="streams-grid">
{featuredStreams.map((stream: any) => (
<div className="stream-card">
<img
src="/assets/images/dance_game.png"
alt="Stream thumbnail"
className="stream-thumbnail"
/>
<div className="stream-info">
<div className="streamer">
<span className="streamer-name">{stream.streamer}</span>
</div>
<div className="stream-title">{stream.title}</div>
<div className="viewer-count">{stream.viewers} viewers</div>
</div>
</div>
))}
</div>
<h2 className="section-title">Trending Categories</h2>
<div className="categories-grid">
<div className="category-card"></div>
<div className="category-card"></div>
<div className="category-card"></div>
<div className="category-card"></div>
<div className="category-card"></div>
</div>
</div>
);
};
export default HomePage;

10
web_server/frontend/src/pages/LoginPage.tsx Normal file
View File

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

10
web_server/frontend/src/pages/NotFoundPage.tsx Normal file
View File

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

10
web_server/frontend/src/pages/SignupPage.tsx Normal file
View File

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

11
web_server/frontend/src/pages/VideoPage.tsx Normal file
View File

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

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

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