Mike Johnston
d2626aa691
Some checks failed
Build Images and Deploy / Update-PROD-Stack (push) Failing after 1m2s
590 lines
19 KiB
HTML
590 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple Video Editor</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header p {
|
|
opacity: 0.9;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.content {
|
|
padding: 40px;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 2px solid #e9ecef;
|
|
}
|
|
|
|
.section.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.section h2 {
|
|
color: #667eea;
|
|
margin-bottom: 20px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.upload-area {
|
|
border: 3px dashed #667eea;
|
|
border-radius: 8px;
|
|
padding: 40px;
|
|
text-align: center;
|
|
background: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.upload-area:hover {
|
|
background: #f8f9fa;
|
|
border-color: #764ba2;
|
|
}
|
|
|
|
.upload-area.dragover {
|
|
background: #e7f3ff;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.upload-icon {
|
|
font-size: 3em;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
input[type="file"] {
|
|
display: none;
|
|
}
|
|
|
|
.btn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 30px;
|
|
border-radius: 6px;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #6c757d;
|
|
}
|
|
|
|
.video-preview {
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.video-preview video {
|
|
max-width: 100%;
|
|
max-height: 400px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.video-info {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.video-info p {
|
|
margin: 5px 0;
|
|
color: #495057;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #495057;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 6px;
|
|
font-size: 1em;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.progress-container {
|
|
margin: 20px 0;
|
|
display: none;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 30px;
|
|
background: #e9ecef;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
transition: width 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.alert {
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.alert-error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
.range-container {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.range-slider {
|
|
width: 100%;
|
|
}
|
|
|
|
.crop-controls {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.preset-resolutions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.preset-btn {
|
|
padding: 8px 16px;
|
|
background: white;
|
|
border: 2px solid #667eea;
|
|
color: #667eea;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.preset-btn:hover,
|
|
.preset-btn.active {
|
|
background: #667eea;
|
|
color: white;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.loader {
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #667eea;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 20px auto;
|
|
display: none;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🎬 Simple Video Editor</h1>
|
|
<p>Trim, crop, and convert your videos with ease</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- Step 1: Upload Video -->
|
|
<div class="section" id="upload-section">
|
|
<h2>1. Select Video</h2>
|
|
<div class="upload-area" id="upload-area">
|
|
<div class="upload-icon">📹</div>
|
|
<h3>Drag and drop your video here</h3>
|
|
<p>or click to browse</p>
|
|
<p style="margin-top: 10px; color: #6c757d; font-size: 0.9em;">
|
|
Supported formats: MP4, AVI, MOV, MKV, WMV, FLV, WebM
|
|
</p>
|
|
<input type="file" id="video-input" accept="video/*">
|
|
</div>
|
|
<div class="loader" id="upload-loader"></div>
|
|
</div>
|
|
|
|
<!-- Step 2: Edit Video -->
|
|
<div class="section hidden" id="edit-section">
|
|
<h2>2. Edit Video</h2>
|
|
|
|
<div class="video-preview">
|
|
<video id="video-preview" controls></video>
|
|
</div>
|
|
|
|
<div class="video-info" id="video-info"></div>
|
|
|
|
<!-- Trim Controls -->
|
|
<div class="form-group">
|
|
<label>⏱️ Trim Video</label>
|
|
<div class="form-row">
|
|
<div>
|
|
<label style="font-weight: normal;">Start Time (seconds)</label>
|
|
<input type="number" id="start-time" value="0" min="0" step="0.1">
|
|
</div>
|
|
<div>
|
|
<label style="font-weight: normal;">End Time (seconds)</label>
|
|
<input type="number" id="end-time" min="0" step="0.1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resolution Controls -->
|
|
<div class="form-group">
|
|
<label>📐 Output Resolution</label>
|
|
<div class="preset-resolutions">
|
|
<button class="preset-btn" data-width="3840" data-height="2160">4K (3840x2160)</button>
|
|
<button class="preset-btn" data-width="1920" data-height="1080">1080p (1920x1080)</button>
|
|
<button class="preset-btn" data-width="1280" data-height="720">720p (1280x720)</button>
|
|
<button class="preset-btn" data-width="854" data-height="480">480p (854x480)</button>
|
|
<button class="preset-btn active" data-width="0" data-height="0">Original</button>
|
|
</div>
|
|
<div class="form-row">
|
|
<div>
|
|
<label style="font-weight: normal;">Width</label>
|
|
<input type="number" id="width" placeholder="Original" min="0">
|
|
</div>
|
|
<div>
|
|
<label style="font-weight: normal;">Height</label>
|
|
<input type="number" id="height" placeholder="Original" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Crop Controls -->
|
|
<div class="form-group">
|
|
<label>✂️ Crop Video (optional)</label>
|
|
<div class="crop-controls">
|
|
<div class="form-row">
|
|
<div>
|
|
<label style="font-weight: normal;">X Position</label>
|
|
<input type="number" id="crop-x" value="0" min="0">
|
|
</div>
|
|
<div>
|
|
<label style="font-weight: normal;">Y Position</label>
|
|
<input type="number" id="crop-y" value="0" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-row" style="margin-top: 10px;">
|
|
<div>
|
|
<label style="font-weight: normal;">Crop Width</label>
|
|
<input type="number" id="crop-width" placeholder="Full width" min="0">
|
|
</div>
|
|
<div>
|
|
<label style="font-weight: normal;">Crop Height</label>
|
|
<input type="number" id="crop-height" placeholder="Full height" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button class="btn" id="process-btn">🎬 Process Video</button>
|
|
<button class="btn btn-secondary" id="reset-btn">🔄 Start Over</button>
|
|
</div>
|
|
|
|
<div class="loader" id="process-loader"></div>
|
|
<div id="alert-container"></div>
|
|
</div>
|
|
|
|
<!-- Step 3: Download -->
|
|
<div class="section hidden" id="download-section">
|
|
<h2>3. Download Processed Video</h2>
|
|
<p style="margin-bottom: 20px;">Your video has been processed successfully!</p>
|
|
<div class="button-group">
|
|
<button class="btn" id="download-btn">⬇️ Download Video</button>
|
|
<button class="btn btn-secondary" id="new-video-btn">🎬 Process Another Video</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentFileId = null;
|
|
let videoInfo = null;
|
|
|
|
// Upload area handling
|
|
const uploadArea = document.getElementById('upload-area');
|
|
const videoInput = document.getElementById('video-input');
|
|
const uploadLoader = document.getElementById('upload-loader');
|
|
const processLoader = document.getElementById('process-loader');
|
|
|
|
uploadArea.addEventListener('click', () => videoInput.click());
|
|
|
|
uploadArea.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.classList.add('dragover');
|
|
});
|
|
|
|
uploadArea.addEventListener('dragleave', () => {
|
|
uploadArea.classList.remove('dragover');
|
|
});
|
|
|
|
uploadArea.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.classList.remove('dragover');
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
handleFileUpload(files[0]);
|
|
}
|
|
});
|
|
|
|
videoInput.addEventListener('change', (e) => {
|
|
if (e.target.files.length > 0) {
|
|
handleFileUpload(e.target.files[0]);
|
|
}
|
|
});
|
|
|
|
async function handleFileUpload(file) {
|
|
const formData = new FormData();
|
|
formData.append('video', file);
|
|
|
|
uploadLoader.style.display = 'block';
|
|
|
|
try {
|
|
const response = await fetch('/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Upload failed');
|
|
}
|
|
|
|
currentFileId = data.file_id;
|
|
videoInfo = data.info;
|
|
|
|
// Show video preview
|
|
const videoPreview = document.getElementById('video-preview');
|
|
videoPreview.src = URL.createObjectURL(file);
|
|
|
|
// Update video info
|
|
const videoInfoDiv = document.getElementById('video-info');
|
|
videoInfoDiv.innerHTML = `
|
|
<p><strong>File:</strong> ${data.original_name}</p>
|
|
<p><strong>Resolution:</strong> ${videoInfo.width}x${videoInfo.height}</p>
|
|
<p><strong>Duration:</strong> ${videoInfo.duration.toFixed(2)} seconds</p>
|
|
<p><strong>Codec:</strong> ${videoInfo.codec}</p>
|
|
`;
|
|
|
|
// Set default values
|
|
document.getElementById('end-time').value = videoInfo.duration.toFixed(2);
|
|
|
|
// Show edit section
|
|
document.getElementById('upload-section').classList.add('hidden');
|
|
document.getElementById('edit-section').classList.remove('hidden');
|
|
|
|
} catch (error) {
|
|
alert('Error uploading video: ' + error.message);
|
|
} finally {
|
|
uploadLoader.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Resolution presets
|
|
document.querySelectorAll('.preset-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
|
|
const width = btn.dataset.width;
|
|
const height = btn.dataset.height;
|
|
|
|
document.getElementById('width').value = width === '0' ? '' : width;
|
|
document.getElementById('height').value = height === '0' ? '' : height;
|
|
});
|
|
});
|
|
|
|
// Process video
|
|
document.getElementById('process-btn').addEventListener('click', async () => {
|
|
const startTime = parseFloat(document.getElementById('start-time').value) || 0;
|
|
const endTime = parseFloat(document.getElementById('end-time').value) || videoInfo.duration;
|
|
const width = parseInt(document.getElementById('width').value) || 0;
|
|
const height = parseInt(document.getElementById('height').value) || 0;
|
|
const cropX = parseInt(document.getElementById('crop-x').value) || 0;
|
|
const cropY = parseInt(document.getElementById('crop-y').value) || 0;
|
|
const cropWidth = parseInt(document.getElementById('crop-width').value) || 0;
|
|
const cropHeight = parseInt(document.getElementById('crop-height').value) || 0;
|
|
|
|
const payload = {
|
|
file_id: currentFileId,
|
|
start_time: startTime,
|
|
end_time: endTime
|
|
};
|
|
|
|
if (width > 0 && height > 0) {
|
|
payload.resolution = { width, height };
|
|
}
|
|
|
|
if (cropWidth > 0 && cropHeight > 0) {
|
|
payload.crop = {
|
|
x: cropX,
|
|
y: cropY,
|
|
width: cropWidth,
|
|
height: cropHeight
|
|
};
|
|
}
|
|
|
|
processLoader.style.display = 'block';
|
|
document.getElementById('process-btn').disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('/process', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Processing failed');
|
|
}
|
|
|
|
// Show download section
|
|
document.getElementById('edit-section').classList.add('hidden');
|
|
document.getElementById('download-section').classList.remove('hidden');
|
|
|
|
} catch (error) {
|
|
const alertContainer = document.getElementById('alert-container');
|
|
alertContainer.innerHTML = `<div class="alert alert-error">Error: ${error.message}</div>`;
|
|
} finally {
|
|
processLoader.style.display = 'none';
|
|
document.getElementById('process-btn').disabled = false;
|
|
}
|
|
});
|
|
|
|
// Download video
|
|
document.getElementById('download-btn').addEventListener('click', () => {
|
|
window.location.href = `/download/${currentFileId}`;
|
|
});
|
|
|
|
// Reset buttons
|
|
document.getElementById('reset-btn').addEventListener('click', resetApp);
|
|
document.getElementById('new-video-btn').addEventListener('click', resetApp);
|
|
|
|
async function resetApp() {
|
|
if (currentFileId) {
|
|
await fetch(`/cleanup/${currentFileId}`, { method: 'DELETE' });
|
|
}
|
|
|
|
currentFileId = null;
|
|
videoInfo = null;
|
|
|
|
document.getElementById('video-preview').src = '';
|
|
videoInput.value = '';
|
|
|
|
document.getElementById('upload-section').classList.remove('hidden');
|
|
document.getElementById('edit-section').classList.add('hidden');
|
|
document.getElementById('download-section').classList.add('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|