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

REFACTOR: Repositioning of Components in Project Structure

Browse Source
This commit is contained in:
Chris-1010
2025-02-16 19:36:34 +00:00
parent bd091b079a
commit b3de7ba238
17 changed files with 356 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Button from "../components/Layout/Button";
import Button from "../components/Input/Button";
const NotFoundPage: React.FC = () => {
const navigate = useNavigate();

6
frontend/src/pages/UserPage.tsx
View File

@@ -1,13 +1,13 @@
import React, { useState, useEffect } from "react";
import Navbar from "../components/Layout/Navbar";
import Navbar from "../components/Navigation/Navbar";
import AuthModal from "../components/Auth/AuthModal";
import { useAuthModal } from "../hooks/useAuthModal";
import { useAuth } from "../context/AuthContext";
import { useParams } from "react-router-dom";
import { ListItem } from "../components/Layout/ListRow";
import ListItem from "../components/Layout/ListItem";
import { useFollow } from "../hooks/useFollow";
import { useNavigate } from "react-router-dom";
import Button from "../components/Layout/Button";
import Button from "../components/Input/Button";
interface UserProfileData {
id: number;

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, { ToggleButton } from "../components/Layout/Button";
import Navbar from "../components/Navigation/Navbar";
import { ToggleButton } from "../components/Input/Button";
import ChatPanel from "../components/Video/ChatPanel";
import { useNavigate, useParams } from "react-router-dom";
import { useAuthModal } from "../hooks/useAuthModal";
@@ -9,7 +9,7 @@ import { useFollow } from "../hooks/useFollow";
import VideoPlayer from "../components/Video/VideoPlayer";
import { SocketProvider } from "../context/SocketContext";
import AuthModal from "../components/Auth/AuthModal";
import CheckoutForm, {Return} from "../components/Checkout/CheckoutForm";
import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
interface VideoPageProps {
streamerId: number;
@@ -101,8 +101,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
<div
id="container"
className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
} grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
className={`grid ${
isChatOpen ? "w-[100vw]" : "w-[125vw]"
} grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
>
<div className="relative">
<VideoPlayer streamId={streamerId} />
@@ -115,7 +116,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
>
{isChatOpen ? "Hide Chat" : "Show Chat"}
<small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">Press C</small>
<small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">
Press C
</small>
</ToggleButton>
<ChatPanel
@@ -191,7 +194,10 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
<span className="text-gray-400 text-[0.75em]">Started</span>
<span className="text-[0.75em]">
{streamData
? `${Math.floor((Date.now() - new Date(streamData.startTime).getTime()) / 3600000)} hours ago`
? `${Math.floor(
(Date.now() - new Date(streamData.startTime).getTime()) /
3600000
)} hours ago`
: "Loading..."}
</span>
</div>
@@ -211,11 +217,17 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
Subscribe
</button>
</div>
</div>
{showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} streamerID={streamerId}/>}
{showCheckout && (
<CheckoutForm
onClose={() => setShowCheckout(false)}
streamerID={streamerId}
/>
)}
{showReturn && <Return />}
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
{showAuthModal && (
<AuthModal onClose={() => setShowAuthModal(false)} />
)}
</div>
</div>
</SocketProvider>