diff --git a/client/src/components/video-edit-modal.tsx b/client/src/components/video-edit-modal.tsx new file mode 100644 index 0000000..9f41b95 --- /dev/null +++ b/client/src/components/video-edit-modal.tsx @@ -0,0 +1,252 @@ +import { useState } from "react"; +import { X, Upload, Save } from "lucide-react"; +import { type Video, type UpdateVideo, updateVideoSchema } from "@shared/schema"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Label } from "@/components/ui/label"; +import { apiRequest, queryClient } from "@/lib/queryClient"; +import { useToast } from "@/hooks/use-toast"; +import { useMutation } from "@tanstack/react-query"; + +interface VideoEditModalProps { + video: Video; + isOpen: boolean; + onClose: () => void; +} + +export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModalProps) { + const [title, setTitle] = useState(video.title); + const [description, setDescription] = useState(video.description || ""); + const [category, setCategory] = useState(video.category || ""); + const [tags, setTags] = useState((video.tags || []).join(", ")); + const [isPublic, setIsPublic] = useState(video.isPublic); + const [customThumbnail, setCustomThumbnail] = useState(null); + const [thumbnailPreview, setThumbnailPreview] = useState(video.customThumbnailUrl); + + const { toast } = useToast(); + + const updateVideoMutation = useMutation({ + mutationFn: async (updates: UpdateVideo) => { + return apiRequest(`/api/videos/${video.id}`, { + method: "PATCH", + body: updates + }); + }, + onSuccess: () => { + toast({ title: "Video uspešno posodobljen!" }); + queryClient.invalidateQueries({ queryKey: ["/api/videos"] }); + onClose(); + }, + onError: () => { + toast({ + title: "Napaka pri posodabljanju", + description: "Video ni bil posodobljen", + variant: "destructive" + }); + } + }); + + const handleThumbnailChange = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (file) { + setCustomThumbnail(file); + const reader = new FileReader(); + reader.onload = () => setThumbnailPreview(reader.result as string); + reader.readAsDataURL(file); + } + }; + + const handleSave = () => { + try { + const tagsArray = tags.split(",").map(tag => tag.trim()).filter(tag => tag.length > 0); + + const updates: UpdateVideo = { + title: title.trim(), + description: description.trim(), + category: category.trim(), + tags: tagsArray, + isPublic + }; + + // If there's a custom thumbnail, we would need to upload it first + // For now, we'll just save the other metadata + if (customThumbnail) { + // TODO: Implement thumbnail upload to Bunny.net or storage service + toast({ + title: "Obvestilo", + description: "Nalaganje slik bo dodano v prihodnji različici" + }); + } + + updateVideoMutation.mutate(updates); + } catch (error) { + toast({ + title: "Napaka", + description: "Preverite vnesene podatke", + variant: "destructive" + }); + } + }; + + if (!isOpen) return null; + + return ( +
+
+
+ {/* Header */} +
+

+ Uredi video +

+ +
+ + {/* Form */} +
+ {/* Title */} +
+ + setTitle(e.target.value)} + placeholder="Vnesite naslov videoposnetka" + className="w-full" + data-testid="input-video-title" + /> +
+ + {/* Description */} +
+ +