diff --git a/src/app/pages/marking-video/page.tsx b/src/app/pages/marking-video/page.tsx
index c0fcde0..53fcd68 100644
--- a/src/app/pages/marking-video/page.tsx
+++ b/src/app/pages/marking-video/page.tsx
@@ -1,7 +1,8 @@
import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table';
import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
import TestSection from '@/app/ui/marking-page/test-section';
-import { IconVideoFile } from '@/app/ui/icons/icons';
+import UploadSectionVideo from '@/app/ui/marking-page/upload-section-video';
+
export default function Page() {
return (
@@ -10,6 +11,7 @@ export default function Page() {
Защита видео
+
diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css
index 84a1f20..431b28b 100644
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@@ -9,8 +9,6 @@ body {
* {
box-sizing: border-box;
- padding: 0;
- margin: 0;
}
a {
diff --git a/src/app/ui/marking-page/upload-section-image.tsx b/src/app/ui/marking-page/upload-section-image.tsx
index af9420f..1cf0bf0 100644
--- a/src/app/ui/marking-page/upload-section-image.tsx
+++ b/src/app/ui/marking-page/upload-section-image.tsx
@@ -1,7 +1,6 @@
'use client'
import React, { useRef, useState, useCallback, ChangeEvent, DragEvent } from 'react';
-import { IconImageFile } from '@/app/ui/icons/icons';
interface SelectedFile {
file: File;
diff --git a/src/app/ui/marking-page/upload-section-video.tsx b/src/app/ui/marking-page/upload-section-video.tsx
new file mode 100644
index 0000000..868afca
--- /dev/null
+++ b/src/app/ui/marking-page/upload-section-video.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { useState, useRef } from 'react';
+
+const CHUNK_SIZE = 1024 * 1024;
+
+export default function UploadSectionVideo() {
+ const [uploading, setUploading] = useState(false);
+ const [progress, setProgress] = useState(0);
+ const [videoId, setVideoId] = useState(null);
+ const fileInputRef = useRef(null);
+
+ const uploadVideoInChunks = async (file: File) => {
+ setUploading(true);
+ setProgress(0);
+
+ const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+ const uploadId = Date.now().toString();
+
+ let start = 0;
+ let chunkIndex = 0;
+
+ try {
+ while (start < file.size) {
+ const end = Math.min(start + CHUNK_SIZE, file.size);
+ const chunk = file.slice(start, end);
+
+ const formData = new FormData();
+ formData.append('video', chunk);
+ formData.append('uploadId', uploadId);
+ formData.append('chunkIndex', chunkIndex.toString());
+ formData.append('totalChunks', totalChunks.toString());
+ formData.append('fileName', file.name);
+ formData.append('fileType', file.type);
+
+ const response = await fetch('/api/upload-video', {
+ method: 'POST',
+ body: formData,
+ });
+
+ if (!response.ok) {
+ throw new Error(`Upload failed: ${response.statusText}`);
+ }
+
+ const result = await response.json();
+
+ const currentProgress = Math.round(((chunkIndex + 1) / totalChunks) * 100);
+ setProgress(currentProgress);
+
+ if (chunkIndex === totalChunks - 1) {
+ setVideoId(result.videoId);
+ }
+
+ start = end;
+ chunkIndex++;
+ }
+
+ console.log('Video uploaded successfully');
+ } catch (error) {
+ console.error('Upload error:', error);
+ alert('Upload failed');
+ } finally {
+ setUploading(false);
+ }
+ };
+
+ const handleFileSelect = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ if (!file.type.startsWith('video/')) {
+ alert('Please select a video file');
+ return;
+ }
+
+ await uploadVideoInChunks(file);
+ };
+
+ return (
+
+
+
+ {uploading && (
+
+
+
Uploading: {progress}%
+
+ )}
+
+ {videoId && (
+
+
Video uploaded successfully!
+
Video ID: {videoId}
+
+ )}
+
+ );
+}
\ No newline at end of file