feat(frontend): add edit clip page

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import Home from './pages/Home';
 import {useEffect} from "react";
 import MyClips from './pages/MyClips';
 import VideoPlayer from "./pages/VideoPlayer.tsx";
+import EditClip from "./pages/EditClip.tsx";
 import Profile from "./pages/Profile.tsx";
 import { GoogleOAuthProvider } from '@react-oauth/google';
 
@@ -26,6 +27,7 @@ function App() {
                         <Route path="/create/:id" element={<ClipEdit />} />
                         <Route path="/my-clips" element={<MyClips />} />
                         <Route path="/video/:id" element={<VideoPlayer />} />
+                        <Route path="/clips/:id/edit" element={<EditClip />} />
                         <Route path="/profile" element={<Profile />} />
                     </Route>
                 </Routes>

frontend/src/components/video/VideoCard.tsx

@@ -3,13 +3,14 @@ import { formatTime, stringToDate, dateToTimeAgo } from "../../utils/utils.ts";
 import { Link } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
 import { isThumbnailAvailable } from "../../utils/endpoints.ts";
-import { MoreVertical, Trash2 } from "lucide-react";
+import { MoreVertical, Pencil, Trash2 } from "lucide-react";
 
 type VideoCardProps = {
     id: number,
     title: string,
     duration: number,
     createdAt: string,
+    onEdit?: () => void,
     onDelete?: () => void,
     className?: string,
 }
@@ -17,7 +18,7 @@ type VideoCardProps = {
 const fallbackThumbnail = "../../../public/default_thumbnail.png";
 const API_URL = import.meta.env.VITE_API_URL;
 
-const VideoCard = ({ id, title, duration, createdAt, onDelete, className }: VideoCardProps) => {
+const VideoCard = ({ id, title, duration, createdAt, onEdit, onDelete, className }: VideoCardProps) => {
     const [timeAgo, setTimeAgo] = useState(dateToTimeAgo(stringToDate(createdAt)));
     const [thumbnailAvailable, setThumbnailAvailable] = useState(true);
     const [menuOpen, setMenuOpen] = useState(false);
@@ -66,7 +67,7 @@ const VideoCard = ({ id, title, duration, createdAt, onDelete, className }: Vide
                         {formatTime(duration)}
                     </span>
 
-                    {onDelete && (
+                    {(onEdit || onDelete) && (
                         <div
                             ref={menuRef}
                             className="absolute top-1.5 right-1.5"
@@ -81,7 +82,16 @@ const VideoCard = ({ id, title, duration, createdAt, onDelete, className }: Vide
 
                             {menuOpen && (
                                 <div className="absolute right-0 top-7 w-32 bg-white rounded-lg border border-gray-200 shadow-md z-50 py-1 overflow-hidden">
-                                    {!confirmDelete && (
+                                    {!confirmDelete && (<>
+                                        {onEdit && (
+                                            <button
+                                                onClick={(e) => stopAndRun(e, onEdit)}
+                                                className="flex items-center gap-2 w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                                            >
+                                                <Pencil size={13} /> Edit
+                                            </button>
+                                        )}
+                                        {onDelete && (
                                             <button
                                                 onClick={(e) => stopAndRun(e, () => setConfirmDelete(true))}
                                                 className="flex items-center gap-2 w-full px-3 py-2 text-sm text-red-500 hover:bg-red-50"
@@ -89,6 +99,7 @@ const VideoCard = ({ id, title, duration, createdAt, onDelete, className }: Vide
                                                 <Trash2 size={13} /> Delete
                                             </button>
                                         )}
+                                    </>)}
                                     {confirmDelete && (
                                         <div className="px-3 py-2">
                                             <p className="text-xs text-gray-600 mb-2">Delete this clip?</p>

frontend/src/pages/EditClip.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, Check } from "lucide-react";
+import { getClipById, patchClip } from "../utils/endpoints.ts";
+import Box from "../components/Box.tsx";
+import BlueButton from "../components/buttons/BlueButton.tsx";
+
+const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
+
+const EditClip = () => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (!id) return;
+        getClipById(id)
+            .then((clip) => {
+                if (clip) {
+                    setTitle(clip.title ?? "");
+                    setDescription(clip.description ?? "");
+                }
+            })
+            .catch(() => setError("Failed to load clip."))
+            .finally(() => setLoading(false));
+    }, [id]);
+
+    const handleSave = async () => {
+        if (!id) return;
+        setSaving(true);
+        setError(null);
+        try {
+            await patchClip(Number(id), { title, description });
+            setSaved(true);
+            setTimeout(() => setSaved(false), 2000);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to save.");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <div className="px-8 py-10 max-w-2xl mx-auto">
+            <button
+                onClick={() => navigate(-1)}
+                className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-900 mb-6 transition-colors duration-150"
+            >
+                <ArrowLeft size={16} />
+                Back
+            </button>
+
+            <h1 className="text-2xl font-semibold text-gray-900 mb-6">Edit Clip</h1>
+
+            {loading ? (
+                <div className="text-gray-400 text-sm">Loading...</div>
+            ) : (
+                <Box className="p-6 flex flex-col gap-4">
+                    <div className="flex flex-col gap-1.5">
+                        <label className="text-sm font-medium text-gray-700">Title</label>
+                        <input
+                            type="text"
+                            value={title}
+                            onChange={(e) => setTitle(e.target.value)}
+                            placeholder="Enter title"
+                            className={inputClass}
+                        />
+                    </div>
+
+                    <div className="flex flex-col gap-1.5">
+                        <label className="text-sm font-medium text-gray-700">Description</label>
+                        <textarea
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            placeholder="Enter description"
+                            rows={4}
+                            className={inputClass + " resize-none"}
+                        />
+                    </div>
+
+                    {error && <p className="text-sm text-red-500">{error}</p>}
+
+                    <div className="flex items-center gap-3 pt-1">
+                        <BlueButton onClick={handleSave} disabled={saving} className="w-28">
+                            {saving ? "Saving…" : saved
+                                ? <span className="flex items-center gap-1.5 justify-center"><Check size={14} />Saved</span>
+                                : "Save"}
+                        </BlueButton>
+                        <button
+                            onClick={() => navigate(-1)}
+                            className="text-sm text-gray-500 hover:text-gray-900 transition-colors duration-150"
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </Box>
+            )}
+        </div>
+    );
+};
+
+export default EditClip;

frontend/src/pages/MyClips.tsx

@@ -1,11 +1,13 @@
 import VideoCard from "../components/video/VideoCard";
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { getClips, deleteClip } from "../utils/endpoints";
 import type { Clip } from "../utils/types";
 
 const MyClips = () => {
     const [clips, setClips] = useState<Clip[]>([]);
     const [error, setError] = useState<null | string>(null);
+    const navigate = useNavigate();
 
     useEffect(() => {
         getClips()
@@ -34,6 +36,7 @@ const MyClips = () => {
                         title={clip.title}
                         duration={clip.duration}
                         createdAt={clip.createdAt}
+                        onEdit={() => navigate(`/clips/${clip.id}/edit`)}
                         onDelete={() => handleDelete(clip.id)}
                     />
                 ))}

frontend/src/utils/endpoints.ts

@@ -253,6 +253,26 @@ const getVideoBlob = async(id: string): Promise<Blob> => {
     }
 }
 
+const patchClip = async (id: number, data: { title?: string; description?: string }): Promise<Clip> => {
+    const response = await fetch(API_URL + `/api/v1/clips/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+        throw new Error(`Failed to update clip: ${response.status}`);
+    }
+
+    const result: APIResponse = await response.json();
+    if (result.status === 'error') {
+        throw new Error(`Failed to update clip: ${result.message}`);
+    }
+
+    return result.data;
+};
+
 const deleteClip = async (id: number): Promise<void> => {
     const response = await fetch(API_URL + `/api/v1/clips/${id}`, {
         method: 'DELETE',
@@ -289,6 +309,7 @@ export {
     getClips,
     getClipById,
     getVideoBlob,
+    patchClip,
     deleteClip,
     isThumbnailAvailable
 };

src/main/java/com/ddf/vodsystem/configuration/CorsConfig.java

@@ -19,7 +19,7 @@ public class CorsConfig {
             public void addCorsMappings(CorsRegistry registry) {
                 registry.addMapping("/api/v1/**")
                         .allowedOrigins(frontendUrl)
-                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
+                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH")
                         .allowedHeaders("*")
                         .allowCredentials(true);
             }