ADD export button calling backend to process clip

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "VoD-System",
+  "name": "vodSystem",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

src/main/frontend/components/ClipRangeSlider.tsx

@@ -1,4 +1,4 @@
-import {VideoMetadata} from "Frontend/components/Playbar";
+import {VideoMetadataFrontend} from "Frontend/components/Playbar";
 import RangeSlider from 'react-range-slider-input';
 import 'react-range-slider-input/dist/style.css';
 import {useRef} from "react";
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 
 type Props = {
     videoRef: HTMLVideoElement | null;
-    videoMetadata: VideoMetadata;
+    videoMetadata: VideoMetadataFrontend;
     setSliderValue: Function;
     setClipRangeValue: Function;
     className?: string;

src/main/frontend/components/PlaybackSlider.tsx

@@ -1,10 +1,10 @@
-import {VideoMetadata} from "Frontend/components/Playbar";
+import {VideoMetadataFrontend} from "Frontend/components/Playbar";
 import {useEffect, useState} from "react";
 import clsx from 'clsx';
 
 type Props = {
     videoRef: HTMLVideoElement | null;
-    videoMetadata: VideoMetadata;
+    videoMetadata: VideoMetadataFrontend;
     sliderValue: number;
     setSliderValue: Function;
     className?: string;

src/main/frontend/components/Playbar.tsx

@@ -3,7 +3,7 @@ import { Volume, Play, Pause } from 'lucide-react';
 import clsx from 'clsx';
 
 
-export type VideoMetadata = {
+export type VideoMetadataFrontend = {
     startPoint: number,
     endPoint: number,
     fps: number,
@@ -14,7 +14,7 @@ export type VideoMetadata = {
 
 type Props = {
     video: HTMLVideoElement | null;
-    videoMetadata: VideoMetadata;
+    videoMetadata: VideoMetadataFrontend;
     className?: string;
 };
 

src/main/frontend/views/video/{id}.tsx

@@ -1,10 +1,12 @@
 import { useParams } from 'react-router-dom';
 import { useEffect, useRef, useState } from "react";
-import { VideoMetadata } from "Frontend/components/Playbar";
+import { VideoMetadataFrontend } from "Frontend/components/Playbar";
 import Playbar from "./../../components/Playbar";
 import PlaybackSlider from "./../../components/PlaybackSlider";
 import ClipRangeSlider from "./../../components/ClipRangeSlider";
 import ClipConfig from "./../../components/ClipConfig";
+import * as editService from "../../generated/EditService";
+import VideoMetadata from "Frontend/generated/com/ddf/vodsystem/entities/VideoMetadata";
 
 function exportFile(uuid: string,
                     startPoint: number,
@@ -13,23 +15,20 @@ function exportFile(uuid: string,
                     height: number,
                     fps: number,
                     fileSize: number) {
-    var body: string = `startPoint=${startPoint}&endPoint=${endPoint}&width=${width}&height=${height}&fps=${fps}&fileSize=${fileSize*1000}`;
 
-    fetch(`api/v1/edit/${uuid}`, {
+    const metadata: VideoMetadata = {
-        method: "POST",
+        startPoint: startPoint,
-        headers: {
+        endPoint: endPoint,
-            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        width: width,
-        },
+        height: height,
-        body: body,
+        fps: fps,
-    })
+        fileSize: fileSize*1000
-        .then(res => {
+    }
-            console.log("RESPONSE: " + res);
-            return res
-        })
-        .then(data => console.log('Response:', data))
-        .catch(err => console.error('Error:', err));
 
-    return null;
+    editService.edit(uuid, metadata)
+        .then(r => {
+            editService.process(uuid);
+        });
 }
 
 export default function VideoId() {
@@ -37,7 +36,7 @@ export default function VideoId() {
     const videoRef = useRef<HTMLVideoElement | null>(null);
     const videoUrl = `api/v1/download/input/${id}`
 
-    const [metadata, setMetadata] = useState<VideoMetadata | null>(null);
+    const [metadata, setMetadata] = useState<VideoMetadataFrontend | null>(null);
     const [playbackValue, setPlaybackValue] = useState(0);
     const [clipRangeValue, setClipRangeValue] = useState([0, 1]);
     const [width, setWidth] = useState(1280);

src/main/java/com/ddf/vodsystem/services/EditService.java

@@ -3,9 +3,13 @@ package com.ddf.vodsystem.services;
 import com.ddf.vodsystem.entities.VideoMetadata;
 import com.ddf.vodsystem.entities.Job;
 import com.ddf.vodsystem.entities.JobStatus;
+import com.vaadin.flow.server.auth.AnonymousAllowed;
+import com.vaadin.hilla.Endpoint;
 import org.springframework.stereotype.Service;
 
 @Service
+@Endpoint
+@AnonymousAllowed
 public class EditService {
     private final JobService jobService;