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