From 2f9ddadb91dad6c1f32469e944675a02233f256e Mon Sep 17 00:00:00 2001 From: Dylan De Faoite Date: Wed, 29 Jul 2026 19:14:20 +0100 Subject: [PATCH 01/15] add new fonts --- frontend/index.html | 7 ++++++- frontend/src/App.css | 42 ------------------------------------- frontend/src/index.css | 21 ++++++++++--------- frontend/src/main.tsx | 2 +- frontend/src/pages/Home.tsx | 4 ++-- 5 files changed, 20 insertions(+), 56 deletions(-) delete mode 100644 frontend/src/App.css diff --git a/frontend/index.html b/frontend/index.html index 9552ecd..c27651a 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,8 +3,13 @@ + + + + + - Vite + React + TS + The VoD System
diff --git a/frontend/src/App.css b/frontend/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/frontend/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/frontend/src/index.css b/frontend/src/index.css index 6c52b81..4ee4c77 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,9 +1,10 @@ @import "tailwindcss"; @plugin "flowbite-react/plugin/tailwindcss"; -@source "../.flowbite-react/class-list.json"; @theme { - --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + --font-heading: "Newsreader", serif; + --font-body: "IBM Plex Sans", sans-serif; + --font-data: "IBM Plex Mono", monospace; /* Breakpoints */ --breakpoint-3xl: 1920px; @@ -22,14 +23,6 @@ --ease-snappy: cubic-bezier(0.2, 0, 0, 1); } -#range-slider .range-slider__range { - background: var(--color-primary); -} - -#range-slider .range-slider__thumb { - background: var(--color-primary); -} - :root { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; @@ -43,3 +36,11 @@ body { background-color: var(--color-background); } + +#range-slider .range-slider__range { + background: var(--color-primary); +} + +#range-slider .range-slider__thumb { + background: var(--color-primary); +} \ No newline at end of file diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index bef5202..2d6958f 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,6 +1,6 @@ +import './index.css' import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import './index.css' import App from './App.tsx' createRoot(document.getElementById('root')!).render( diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index c2f704d..6f4ada7 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -43,10 +43,10 @@ const Home = () => { alt="VoD System Logo" className="h-24 mb-6 object-contain" /> -

+

A home for your clips.

-

+

Upload, trim, and export video clips. Stream live if you need to.

-- 2.49.1 From c86e5e556880e783e3ea4b0cb001150ed8dd1965 Mon Sep 17 00:00:00 2001 From: Dylan De Faoite Date: Wed, 29 Jul 2026 20:20:26 +0100 Subject: [PATCH 02/15] add colour and remove topbar --- frontend/index.html | 2 +- frontend/src/components/Sidebar.tsx | 89 ++++++++++++--- frontend/src/components/Topbar.tsx | 103 ------------------ .../src/components/buttons/MenuButton.tsx | 2 +- .../src/components/buttons/SidebarButton.tsx | 6 +- frontend/src/index.css | 34 ++---- frontend/src/layouts/MainLayout.tsx | 39 +------ frontend/src/main.tsx | 5 +- frontend/src/pages/Home.tsx | 81 ++------------ frontend/src/utils/AuthContext.tsx | 42 +++++++ 10 files changed, 147 insertions(+), 256 deletions(-) delete mode 100644 frontend/src/components/Topbar.tsx create mode 100644 frontend/src/utils/AuthContext.tsx diff --git a/frontend/index.html b/frontend/index.html index c27651a..54219dd 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,7 +6,7 @@ - + The VoD System diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index bb33d56..32d1f0e 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,27 +1,50 @@ import clsx from "clsx"; import SidebarButton from "./buttons/SidebarButton.tsx"; -import { Plus, Film, Home, User as UserIcon, Video, Radio } from 'lucide-react'; -import type {User} from "../utils/types.ts"; +import { Plus, Film, Home, Video, Radio } from 'lucide-react'; +import {useAuth} from "../utils/AuthContext.tsx"; +import {type CredentialResponse, GoogleLogin} from "@react-oauth/google"; +import {getUser, login, logout} from "../utils/api/users.ts"; type props = { - user: User | null; className?: string } -const Divider = () =>
; +const Divider = () =>
; + +const Sidebar = ({ className }: props) => { + const { user, setUser } = useAuth() + + const handleLogin = (response: CredentialResponse) => { + if (!response.credential) { + console.error("No credential received from Google login."); + return; + } + + login(response.credential) + .then(() => { + getUser().then(userData => setUser(userData)) + }) + .catch((error) => { + console.error("Login failed:", error); + }); + } + const handleLogout = () => { + logout() + .then(() => + setUser(null) + ) + .catch((error) => { + console.error("Logout failed:", error); + }); + } -const Sidebar = ({user, className}: props) => { return ( - ); diff --git a/frontend/src/components/buttons/MenuButton.tsx b/frontend/src/components/buttons/MenuButton.tsx deleted file mode 100644 index eba154c..0000000 --- a/frontend/src/components/buttons/MenuButton.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import clsx from "clsx"; - -type Props = React.ButtonHTMLAttributes; - -const MenuButton: React.FC = ({ className = "", ...props }) => { - return ( - ) } diff --git a/frontend/src/index.css b/frontend/src/index.css index 428c9e2..13fda01 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -11,6 +11,7 @@ --color-background: #F7F4EE; --color-sidebar: #F2EEE6; --color-card: #FDFBF7; + --color-accent: #A85A38; /* Colour Fonts */ --color-text-primary: #2B2620; diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx index d78a1dc..37c2940 100644 --- a/frontend/src/layouts/MainLayout.tsx +++ b/frontend/src/layouts/MainLayout.tsx @@ -10,7 +10,7 @@ const MainLayout = () => {
-
+
-- 2.49.1 From 9dcab4446530d3be98f61d1413509e6954f9de01 Mon Sep 17 00:00:00 2001 From: Dylan De Faoite Date: Wed, 29 Jul 2026 21:23:34 +0100 Subject: [PATCH 04/15] add titles to homepage --- frontend/index.html | 2 +- frontend/src/components/NoAccessPage.tsx | 17 ++++++++++++++ frontend/src/index.css | 9 +++++++- frontend/src/pages/Home.tsx | 28 ++++++++++++++++++++---- 4 files changed, 50 insertions(+), 6 deletions(-) create mode 100644 frontend/src/components/NoAccessPage.tsx diff --git a/frontend/index.html b/frontend/index.html index 54219dd..1dd4518 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,7 +6,7 @@ - + The VoD System diff --git a/frontend/src/components/NoAccessPage.tsx b/frontend/src/components/NoAccessPage.tsx new file mode 100644 index 0000000..14126d4 --- /dev/null +++ b/frontend/src/components/NoAccessPage.tsx @@ -0,0 +1,17 @@ +import {Lock} from "lucide-react"; + +const NoAccessPage = () => { + return ( +
+ +

+ Log in to see this page +

+

+ Sign in with Google to view your clips and account details. +

+
+ ); +} + +export default NoAccessPage; \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index 13fda01..fe6a963 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -3,7 +3,7 @@ @theme { /* Fonts */ - --font-heading: "Newsreader", serif; + /*--font-heading: "Newsreader", serif; */ --font-body: "IBM Plex Sans", sans-serif; --font-data: "IBM Plex Mono", monospace; @@ -12,6 +12,7 @@ --color-sidebar: #F2EEE6; --color-card: #FDFBF7; --color-accent: #A85A38; + --color-accent-hover: #94492A; /* Colour Fonts */ --color-text-primary: #2B2620; @@ -34,4 +35,10 @@ body { background-color: var(--color-background); + font-family: "IBM Plex Sans", sans-serif; +} + +@utility font-heading { + font-family: "Newsreader", serif; + font-weight: 400; } \ No newline at end of file diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 9588864..ee7959a 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -1,15 +1,35 @@ +import {useAuth} from "../utils/AuthContext.tsx"; +import NoAccessPage from "../components/NoAccessPage.tsx"; +import {Link} from "react-router-dom"; + const Home = () => { + const { user } = useAuth(); const now = new Date(); const formatted: string = new Intl.DateTimeFormat('en-IE', { - weekday: 'short', + weekday: 'long', day: 'numeric', - month: 'short', + month: 'long', }).format(now); + if (user == null) { + return () + } + return ( -
-

{formatted}

+
+
+
+

{formatted.toLocaleUpperCase()}

+

Good evening, {user.name.split(" ", 1)}

+
+ + + + +
); }; -- 2.49.1 From 3c50d6aaf4886aeb92b05faf0fbc2a5fc6d48c94 Mon Sep 17 00:00:00 2001 From: Dylan De Faoite Date: Wed, 29 Jul 2026 21:28:34 +0100 Subject: [PATCH 05/15] add cringe home message --- frontend/src/pages/Home.tsx | 44 ++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index ee7959a..870cec6 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -2,6 +2,48 @@ import {useAuth} from "../utils/AuthContext.tsx"; import NoAccessPage from "../components/NoAccessPage.tsx"; import {Link} from "react-router-dom"; +type TimeOfDay = "morning" | "afternoon" | "evening" | "night"; + +function getTimeOfDay(date: Date = new Date()): TimeOfDay { + const hour = date.getHours(); + + if (hour >= 5 && hour < 12) return "morning"; + if (hour >= 12 && hour < 17) return "afternoon"; + if (hour >= 17 && hour < 22) return "evening"; + return "night"; +} + +function getGreetingSubtext(date: Date = new Date()): string { + const timeOfDay = getTimeOfDay(date); + + const messages: Record = { + morning: [ + "Good morning.", + "Coffee first, then clips.", + "Here's what's waiting for you.", + ], + afternoon: [ + "Good afternoon.", + "A quiet moment for your clips.", + "Catching up?", + ], + evening: [ + "Good evening.", + "Settle in.", + "Time to unwind.", + ], + night: [ + "Still up?", + "Quiet night for it.", + "Good night, when you're ready.", + ] + } + + const options = messages[timeOfDay]; + return options[Math.floor(Math.random() * options.length)]; +} + + const Home = () => { const { user } = useAuth(); const now = new Date(); @@ -21,7 +63,7 @@ const Home = () => {

{formatted.toLocaleUpperCase()}

-

Good evening, {user.name.split(" ", 1)}

+

{getGreetingSubtext(new Date())}

-- 2.49.1 From bb771e630bf41985c094292fd9de4f2e73dd30e3 Mon Sep 17 00:00:00 2001 From: Dylan De Faoite Date: Wed, 29 Jul 2026 22:21:45 +0100 Subject: [PATCH 06/15] rename Box to Card --- frontend/src/components/Box.tsx | 14 -------------- frontend/src/components/Card.tsx | 14 ++++++++++++++ frontend/src/components/Sidebar.tsx | 16 +++++++--------- frontend/src/index.css | 1 + frontend/src/layouts/MainLayout.tsx | 2 +- frontend/src/pages/ClipEdit.tsx | 14 +++++++------- frontend/src/pages/ClipUpload.tsx | 6 +++--- frontend/src/pages/EditClip.tsx | 6 +++--- frontend/src/pages/EditVod.tsx | 6 +++--- frontend/src/pages/Home.tsx | 21 ++++++++++++++------- frontend/src/pages/MediaPlayer.tsx | 6 +++--- frontend/src/pages/Profile.tsx | 10 +++++----- frontend/src/pages/StreamControl.tsx | 22 +++++++++++----------- 13 files changed, 72 insertions(+), 66 deletions(-) delete mode 100644 frontend/src/components/Box.tsx create mode 100644 frontend/src/components/Card.tsx diff --git a/frontend/src/components/Box.tsx b/frontend/src/components/Box.tsx deleted file mode 100644 index 31a3872..0000000 --- a/frontend/src/components/Box.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import clsx from "clsx"; - -type Props = { - children: React.ReactNode; - className?: string; -}; - -const Box = ({ children, className }: Props) => ( -
- {children} -
-); - -export default Box; diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx new file mode 100644 index 0000000..b7ffc48 --- /dev/null +++ b/frontend/src/components/Card.tsx @@ -0,0 +1,14 @@ +import clsx from "clsx"; + +type Props = { + children: React.ReactNode; + className?: string; +}; + +const Card = ({ children, className }: Props) => ( +
+ {children} +
+); + +export default Card; diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 2b4409a..2d804ef 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,6 +1,6 @@ import clsx from "clsx"; import SidebarButton from "./buttons/SidebarButton.tsx"; -import { Plus, Film, Home, Video, Radio, PlaySquareIcon} from 'lucide-react'; +import { Plus, Film, Home, Video, Radio } from 'lucide-react'; import {useAuth} from "../utils/AuthContext.tsx"; import {type CredentialResponse, GoogleLogin} from "@react-oauth/google"; import {getUser, login, logout} from "../utils/api/users.ts"; @@ -9,7 +9,7 @@ type props = { className?: string } -const Divider = () =>
; +const Divider = () =>
; const Sidebar = ({ className }: props) => { const { user, setUser } = useAuth() @@ -40,21 +40,19 @@ const Sidebar = ({ className }: props) => { } return ( -
); }; diff --git a/frontend/src/pages/StreamControl.tsx b/frontend/src/pages/StreamControl.tsx index 480ee20..5d6f2af 100644 --- a/frontend/src/pages/StreamControl.tsx +++ b/frontend/src/pages/StreamControl.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import { Radio, Check, Bookmark, Scissors, Film, Activity, Loader2, X } from "lucide-react"; import clsx from "clsx"; -import Box from "../components/Box.tsx"; +import Card from "../components/Card.tsx"; import BlueButton from "../components/buttons/BlueButton.tsx"; import { getUser } from "../utils/api/users.ts"; import { getCurrentStream, getStreamHistory } from "../utils/api/stream.ts"; @@ -244,7 +244,7 @@ const StreamControl = () => {

Stream Control

{/* Hero status bar */} - @@ -271,12 +271,12 @@ const StreamControl = () => { ) : ( )} - + {isStreaming && ( <> {/* Quick mark toolbar */} - +
{ })}
)} - + {/* Forefront actions */}
- +
@@ -348,9 +348,9 @@ const StreamControl = () => {