-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
140 lines (132 loc) · 6.61 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Download Demo (PHP Version)</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-lg w-full max-w-md overflow-hidden">
<div class="bg-blue-600 p-6 text-white">
<h1 class="text-2xl font-bold">API Download Demo</h1>
</div>
<form id="downloadForm" class="p-6 space-y-6">
<div>
<label for="provider" class="block text-sm font-medium text-gray-700 mb-1">Select Provider:</label>
<select id="provider" name="provider" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">Choose a provider</option>
<option value="lorempicsum">Lorem Picsum (Test)</option>
<option value="shutterstock">Shutterstock</option>
<option value="adobestock">Adobe Stock</option>
<option value="freepik">Freepik</option>
<!-- Add other providers as needed -->
</select>
</div>
<div>
<label for="code" class="block text-sm font-medium text-gray-700 mb-1">Enter Code or Link:</label>
<input type="text" id="code" name="code" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div id="optionsContainer" class="hidden">
<label for="format" class="block text-sm font-medium text-gray-700 mb-1">Format (for video):</label>
<select id="format" name="format" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">Choose a format</option>
<option value="HD">HD</option>
<option value="4K">4K</option>
</select>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg">
Download
</button>
</form>
<div id="result" class="px-6 pb-6 text-sm"></div>
</div>
<script>
const providerSelect = document.getElementById('provider');
const optionsContainer = document.getElementById('optionsContainer');
const resultDiv = document.getElementById('result');
providerSelect.addEventListener('change', function() {
const selectedProvider = this.value;
if (selectedProvider.includes('video')) {
optionsContainer.classList.remove('hidden');
} else {
optionsContainer.classList.add('hidden');
}
});
document.getElementById('downloadForm').addEventListener('submit', function(e) {
e.preventDefault();
const provider = document.getElementById('provider').value;
const codeOrLink = document.getElementById('code').value;
const format = document.getElementById('format').value;
resultDiv.innerHTML = '<p class="text-gray-600">Processing...</p>';
let requestBody = {
options: [{ name: '', value: '' }],
providerName: provider
};
if (codeOrLink.startsWith('http')) {
requestBody.link = codeOrLink;
} else {
requestBody.code = codeOrLink;
}
if (provider.includes('video') && format) {
requestBody.options = [{ name: 'format', value: format }];
}
fetch('api-proxy.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody)
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.jobId) {
resultDiv.innerHTML = `<p class="text-gray-600">Job ID: ${data.jobId}<br>Status: Processing</p>`;
checkStatus(data.jobId);
} else {
resultDiv.innerHTML = `<p class="text-red-600">Error: ${JSON.stringify(data)}</p>`;
}
})
.catch(error => {
console.error('Error:', error);
resultDiv.innerHTML = `<p class="text-red-600">Error: ${error.message}<br>Please try again later.</p>`;
});
});
function checkStatus(jobId) {
fetch(`api-proxy.php?jobId=${jobId}`, {
method: 'GET',
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.downloadLink) {
resultDiv.innerHTML = `<p class="text-green-600">Download completed: <a href="${data.downloadLink}" target="_blank" class="text-blue-600 hover:underline">Download Link</a></p>`;
} else if (data.error) {
resultDiv.innerHTML = `<p class="text-red-600">Download failed: ${data.error}</p>`;
} else if (data.progress !== undefined) {
resultDiv.innerHTML = `<p class="text-gray-600">Status: Processing - Progress: ${data.progress}%</p>`;
if (data.progress < 100) {
setTimeout(() => checkStatus(jobId), 5000);
}
} else {
resultDiv.innerHTML = `<p class="text-gray-600">Status: Unknown - ${JSON.stringify(data)}</p>`;
setTimeout(() => checkStatus(jobId), 5000);
}
})
.catch(error => {
console.error('Error checking status:', error);
resultDiv.innerHTML = `<p class="text-red-600">Error checking status: ${error.message}<br>Please try again later.</p>`;
});
}
</script>
</body>
</html>