feat(frontend): add upload icon

Frontend uses .env URL.

README.md

@@ -1,33 +1,119 @@
-# Overview
+# VoD System
-The VoD System is a powerful clip management platform designed to streamline how you handle your video content. Whether you're a content creator, streamer, or educator, VoD System lets you:
 
-- Upload clips effortlessly and securely.
+A self-hosted clip management and live streaming platform. Upload videos, trim and compress clips, save sections of a live stream, and organise everything through a clean web interface — all running locally under Docker.
-- Edit and trim videos with intuitive controls.
-- Compress files to specific file sizes.
-- Organize your clips for quick access and sharing.
 
-This VoD system began as a small project back in my 5th year of secondary school, during lockdown. I wanted a quick way to send game clips to Discord, but the 8MB file size limit made it frustrating to manually tweak bitrates for every clip. To solve that, I wrote a simple Python script to automate the process. What started as a quick fix has since evolved into a full-fledged system — now built with a Spring Boot backend and a modern React/Vite frontend.
+This project started in secondary school during lockdown as a Python script to squeeze game clips under Discord's 8 MB file size limit. It has since grown into a full-stack application with a Spring Boot backend, a React/Vite/TypeScript frontend, and an nginx-rtmp sidecar for live streaming.
+
+---
+
+## Tech Stack
+
+| Layer      | Technology                                              |
+|------------|---------------------------------------------------------|
+| Backend    | Java 21, Spring Boot 3.4, Spring Security, JPA, FFmpeg |
+| Frontend   | React 19, TypeScript, Vite, Tailwind CSS v4            |
+| Database   | PostgreSQL 15                                           |
+| Streaming  | nginx-rtmp                                              |
+| Auth       | Google OAuth 2.0 + JWT                                  |
+| Runtime    | Docker Compose                                          |
+
+---
 
 ## Requirements
-- Docker & Docker Compose
-- JDK 21+
-- Node.js 16+
-- FFMPEG
-- Google Client keys
-## Steps
-1. Create your own two `.env` files based off the `example.env` files in the root and in the frontend folder 
-2. Spin up docker container with `docker compose up`
-3. Run `./mvnw clean package` to build the jar
-4. Run `./mvnw spring-boot:run` to run the backend section
-5. Run `cd frontend && npm install && npm run dev` to build and run the frontend
-6. Endpoints should be available at 8080 (backend) and 5173 (frontend)
 
-# Future Plans
+- Docker and Docker Compose
-- **Format Handling**
+- A Google Cloud project with OAuth 2.0 credentials (Client ID and Secret)
-  - Backend conversion of non-MP4 files via FFMPEG for broader format support
+
-- **Input Sources**
+That is all. The backend, frontend, database, and RTMP server all run as containers — no local JDK, Node, or FFmpeg install required.
-    - Support for local file uploads and YouTube imports
+
-- **Testing**
+---
-    - Unit tests, including coverage for FFMPEG-related functionality
+
-- **API Documentation**
+## Getting Started
-  - Comprehensive and maintainable backend API docs
+
+### 1. Configure the environment
+
+Copy the example file and fill in the values:
+
+```bash
+cp .env.example .env
+```
+
+Open `.env` and set the following:
+
+```dotenv
+# OAuth credentials from your Google Cloud Console project
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# A long random string used to sign JWTs — treat it like a password
+JWT_SECRET_KEY=
+
+# Absolute paths on the host where persistent data will be stored
+POSTGRES_DATA=/path/to/postgres/data
+STREAM_DATA=/path/to/stream/data
+MEDIA_DATA=/path/to/media/data
+
+# Database credentials — change these from the defaults before deploying
+POSTGRES_URL=jdbc:postgresql://postgres:5432/vodSystem
+POSTGRES_USER=myuser
+POSTGRES_PASSWORD=mypassword
+POSTGRES_DB=vodSystem
+
+# The URLs the frontend will use to reach itself and the backend
+FRONTEND_URL=http://localhost:5173
+BACKEND_URL=http://localhost:8080
+```
+
+### 2. Start the application
+
+```bash
+docker compose up --build
+```
+
+This builds and starts four containers: `vod_postgres`, `vod_backend`, `vod_frontend`, and `vod_rtmp`.
+
+Once everything has started, the interfaces are available at:
+
+- Frontend: [http://localhost:5173](http://localhost:5173)
+- Backend API: [http://localhost:8080/api/v1](http://localhost:8080/api/v1)
+- RTMP ingest: `rtmp://localhost:1935/live`
+
+### 3. Authenticate
+
+Log in through the frontend using your Google account. The backend exchanges the Google ID token for a short-lived JWT that is used on all subsequent API requests.
+
+---
+
+## Development Mode
+
+For local backend or frontend development, a separate Compose file is provided that starts only the infrastructure services (PostgreSQL and the RTMP server), leaving the backend and frontend to run directly on the host:
+
+```bash
+docker compose -f docker-compose.dev.yml up
+```
+
+Then run the backend and frontend separately in your usual workflow.
+
+---
+
+## API Reference
+
+A [Bruno](https://www.usebruno.com/) collection is included under `bruno/VoD-System/` with pre-configured requests covering all major endpoints. Import it directly into Bruno and point the `local` environment at `http://localhost:8080/api/v1`.
+
+The collection is organised into four folders:
+
+| Folder   | Description                                      |
+|----------|--------------------------------------------------|
+| Users    | Google OAuth login flow, current user            |
+| Media    | Upload, compress, clip stream, save section      |
+| Jobs     | Poll job status, download completed output       |
+| Streams  | Stream history                                   |
+
+---
+
+## Future Plans
+
+- **Format handling** — backend conversion of non-MP4 files via FFmpeg for broader input format support
+- **Input sources** — YouTube imports and additional local upload options
+- **Testing** — unit and integration test coverage, including FFmpeg-related functionality
+- **API documentation** — comprehensive, auto-generated backend API docs

docker-compose.yml

@@ -32,6 +32,7 @@ services:
     container_name: vod_frontend
     environment:
       VITE_API_URL: ${BACKEND_URL}
+      VITE_FRONTEND_URL: ${FRONTEND_URL}
       VITE_GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
     depends_on:
       - backend
@@ -53,4 +54,4 @@ services:
     pull_policy: build
     restart: unless-stopped
     depends_on:
-      - backend
+      - backend

frontend/src/components/video/ExportWidget.tsx

@@ -5,15 +5,32 @@ type props = {
     dataSend: React.MouseEventHandler<HTMLButtonElement>;
     handleDownload: React.MouseEventHandler<HTMLButtonElement>;
     downloadable: boolean;
-    progress: number
+    progress: number;
+    uploading: boolean;
 }
 
-const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props) => {
+const Spinner = () => (
+    <svg
+        className="animate-spin h-4 w-4"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+    </svg>
+);
+
+const ExportWidget = ({dataSend, handleDownload, downloadable, progress, uploading}: props) => {
     return (
         <div className={"flex flex-col gap-3"}>
             <BlueButton
-                onClick={dataSend}>
+                onClick={dataSend}
-                Export
+                disabled={uploading}
+                className={uploading ? "opacity-60 cursor-not-allowed flex items-center justify-center gap-2" : ""}
+            >
+                {uploading && <Spinner />}
+                {uploading ? "Uploading..." : "Export"}
             </BlueButton>
 
             <div className="h-10 flex items-center">
@@ -33,4 +50,4 @@ const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props)
     )
 }
 
-export default ExportWidget;
+export default ExportWidget;

frontend/src/pages/ClipEdit.tsx

@@ -34,6 +34,7 @@ const ClipEdit = () => {
     });
     const [progress, setProgress] = useState(0);
     const [downloadable, setDownloadable] = useState(false);
+    const [uploading, setUploading] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
     useEffect(() => {
@@ -59,7 +60,10 @@ const ClipEdit = () => {
     };
 
     const sendData = async () => {
-        if (!localFile) return;
+        if (!localFile || uploading) return;
+
+        setUploading(true);
+        setError(null);
 
         let jobId: string;
         try {
@@ -67,6 +71,7 @@ const ClipEdit = () => {
             setUploadedId(jobId);
         } catch (err: unknown) {
             setError(`Failed to start compression: ${err instanceof Error ? err.message : 'Unknown error'}`);
+            setUploading(false);
             return;
         }
 
@@ -81,14 +86,17 @@ const ClipEdit = () => {
                 if (job.state === 'FAILED') {
                     setError(`Compression failed: ${job.errorOutput ?? 'Unknown error'}`);
                     clearInterval(intervalId);
+                    setUploading(false);
                 } else if (job.isComplete) {
                     clearInterval(intervalId);
                     setDownloadable(true);
+                    setUploading(false);
                 }
             })
             .catch((err: Error) => {
                 setError(`Failed to fetch progress: ${err.message}`);
                 clearInterval(intervalId);
+                setUploading(false);
             });
     };
 
@@ -166,6 +174,7 @@ const ClipEdit = () => {
                     handleDownload={handleDownload}
                     downloadable={downloadable}
                     progress={progress}
+                    uploading={uploading}
                 />
             </Box>
         </div>

frontend/vite.config.ts

@@ -1,27 +1,30 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 import flowbiteReact from "flowbite-react/plugin/vite";
 
+export default defineConfig(({ mode }) => {  // change to function form
+  const env = loadEnv(mode, process.cwd(), '')  // load all env vars
 
-// https://vite.dev/config/
+  return {
-export default defineConfig({
+    plugins: [react(), tailwindcss(), flowbiteReact()],
-  plugins: [react(), tailwindcss(), flowbiteReact()],
+    preview: {
-  preview: {
+      port: 5173,
-    port: 5173,
+      strictPort: true,
-    strictPort: true,
+    },
-  },
+    server: {
-  server: {
+      port: 5173,
-    port: 5173,
+      strictPort: true,
-    strictPort: true,
+      host: true,
-    host: true,
+      origin: env.VITE_FRONTEND_URL || "http://0.0.0.0:5173",  // use it here
-    origin: "http://0.0.0.0:5173",
+      allowedHosts: true,
-    proxy: {
+      proxy: {
-      '/api/v1': {
+        '/api/v1': {
-        target: 'http://localhost:8080',
+          target: 'http://localhost:8080',
-        changeOrigin: true,
+          changeOrigin: true,
-        secure: false,
+          secure: false,
+        }
       }
     }
   }
-})
+})

src/main/java/com/ddf/vodsystem/controllers/UserController.java

@@ -6,6 +6,7 @@ import com.ddf.vodsystem.entities.User;
 import com.ddf.vodsystem.exceptions.NotAuthenticated;
 import com.ddf.vodsystem.services.UserService;
 import jakarta.servlet.http.HttpServletResponse;
+import jakarta.servlet.http.HttpServletRequest;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.ResponseCookie;
 import org.springframework.http.ResponseEntity;
@@ -41,14 +42,15 @@ public class UserController {
 
     @PostMapping("/login")
     public ResponseEntity<APIResponse<Token>> login(@RequestBody Token token,
+		    				    HttpServletRequest request,
                                                     HttpServletResponse response) {
         String jwt = userService.login(token.token());
 
         ResponseCookie cookie = ResponseCookie.from("token", jwt)
                 .httpOnly(true)
                 .maxAge(jwtExpiration / 1000)
-                .sameSite("None")
+                .sameSite(request.isSecure() ? "None" : "Lax")
-                .secure(true)
+                .secure(request.isSecure())
                 .path("/")
                 .build();
 
@@ -60,12 +62,13 @@ public class UserController {
     }
 
     @PostMapping("/logout")
-    public ResponseEntity<APIResponse<Void>> logout(HttpServletResponse response) {
+    public ResponseEntity<APIResponse<Void>> logout(HttpServletResponse response,
+		    				    HttpServletRequest request) {
         ResponseCookie cookie = ResponseCookie.from("token", "")
                 .httpOnly(true)
                 .maxAge(0)
-                .sameSite("None")
+                .sameSite(request.isSecure() ? "None" : "Lax")
-                .secure(true)
+                .secure(request.isSecure())
                 .path("/")
                 .build();
 
@@ -75,4 +78,4 @@ public class UserController {
                 new APIResponse<>(SUCCESS, "Logged out successfully", null)
         );
     }
-}
+}