Hugging Face's logo

Spaces:
KEXEL
/
convert
Running

App Files Community
KEXEL commited on
Commit
643d7bb
·
verified ·
1 Parent(s): 23f8443

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +479 -18
index.html CHANGED
@@ -1,19 +1,480 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MP4 to M3U8 Converter</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
11
+ <style>
12
+ .dropzone {
13
+ border: 2px dashed #6366f1;
14
+ border-radius: 0.5rem;
15
+ transition: all 0.3s ease;
16
+ }
17
+ .dropzone.active {
18
+ border-color: #10b981;
19
+ background-color: rgba(16, 185, 129, 0.05);
20
+ }
21
+ .progress-bar {
22
+ height: 6px;
23
+ transition: width 0.3s ease;
24
+ }
25
+ .fade-in {
26
+ animation: fadeIn 0.5s ease-in-out;
27
+ }
28
+ @keyframes fadeIn {
29
+ from { opacity: 0; transform: translateY(10px); }
30
+ to { opacity: 1; transform: translateY(0); }
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50 min-h-screen">
35
+ <div class="container mx-auto px-4 py-12 max-w-4xl">
36
+ <div class="text-center mb-12">
37
+ <h1 class="text-4xl font-bold text-indigo-600 mb-3">MP4 to M3U8 Converter</h1>
38
+ <p class="text-gray-600 text-lg">Convert your MP4 videos to HLS (M3U8) format for adaptive streaming</p>
39
+ </div>
40
+
41
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
42
+ <!-- Upload Section -->
43
+ <div class="p-8">
44
+ <div id="upload-section" class="dropzone p-12 text-center cursor-pointer">
45
+ <div class="mx-auto w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
46
+ <i class="fas fa-cloud-upload-alt text-indigo-500 text-2xl"></i>
47
+ </div>
48
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Drag & Drop your MP4 file here</h3>
49
+ <p class="text-gray-500 mb-4">or click to browse files</p>
50
+ <input type="file" id="file-input" class="hidden" accept="video/mp4">
51
+ <button id="browse-btn" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
52
+ Select File
53
+ </button>
54
+ </div>
55
+
56
+ <!-- Settings Section -->
57
+ <div id="settings-section" class="mt-8 hidden fade-in">
58
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Conversion Settings</h3>
59
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
60
+ <div>
61
+ <label class="block text-sm font-medium text-gray-700 mb-1">Quality Preset</label>
62
+ <select id="quality-preset" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
63
+ <option value="low">Low (480p)</option>
64
+ <option value="medium" selected>Medium (720p)</option>
65
+ <option value="high">High (1080p)</option>
66
+ <option value="ultra">Ultra (4K)</option>
67
+ </select>
68
+ </div>
69
+ <div>
70
+ <label class="block text-sm font-medium text-gray-700 mb-1">Segment Duration (seconds)</label>
71
+ <input type="number" id="segment-duration" value="10" min="2" max="20" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
72
+ </div>
73
+ <div>
74
+ <label class="block text-sm font-medium text-gray-700 mb-1">Bitrate (kbps)</label>
75
+ <input type="number" id="bitrate" value="2500" min="500" max="20000" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
76
+ </div>
77
+ <div>
78
+ <label class="block text-sm font-medium text-gray-700 mb-1">Audio Quality</label>
79
+ <select id="audio-quality" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
80
+ <option value="low">Low (64kbps)</option>
81
+ <option value="medium" selected>Medium (128kbps)</option>
82
+ <option value="high">High (256kbps)</option>
83
+ </select>
84
+ </div>
85
+ </div>
86
+ <div class="mt-6">
87
+ <button id="start-convert-btn" class="w-full py-3 px-4 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 transition flex items-center justify-center">
88
+ <i class="fas fa-cog mr-2 animate-spin hidden" id="convert-spinner"></i>
89
+ Start Conversion
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Progress Section -->
96
+ <div id="progress-section" class="hidden px-8 pb-8 fade-in">
97
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Conversion Progress</h3>
98
+ <div class="mb-2 flex justify-between">
99
+ <span id="status-text" class="text-sm font-medium text-gray-700">Initializing...</span>
100
+ <span id="progress-percent" class="text-sm font-medium text-indigo-600">0%</span>
101
+ </div>
102
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
103
+ <div id="progress-bar" class="progress-bar bg-indigo-600 rounded-full" style="width: 0%"></div>
104
+ </div>
105
+ <div class="mt-4 text-sm text-gray-500" id="time-info">
106
+ <span id="time-elapsed">00:00</span> / <span id="time-remaining">--:--</span>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Result Section -->
111
+ <div id="result-section" class="hidden p-8 fade-in">
112
+ <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
113
+ <div class="flex items-center">
114
+ <div class="flex-shrink-0">
115
+ <i class="fas fa-check-circle text-green-500 text-2xl"></i>
116
+ </div>
117
+ <div class="ml-3">
118
+ <h3 class="text-lg font-medium text-green-800">Conversion Complete!</h3>
119
+ <p class="text-green-600">Your M3U8 playlist and segments are ready to download.</p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
125
+ <div class="border border-gray-200 rounded-lg p-4">
126
+ <h4 class="font-medium text-gray-800 mb-2">Output Files</h4>
127
+ <ul class="text-sm text-gray-600 space-y-1">
128
+ <li><i class="fas fa-file-alt mr-2 text-indigo-500"></i> playlist.m3u8</li>
129
+ <li><i class="fas fa-file-video mr-2 text-indigo-500"></i> segment_1.ts</li>
130
+ <li><i class="fas fa-file-video mr-2 text-indigo-500"></i> segment_2.ts</li>
131
+ <li><i class="fas fa-file-video mr-2 text-indigo-500"></i> segment_3.ts</li>
132
+ <li><i class="fas fa-ellipsis-h mr-2 text-indigo-500"></i> ...and more</li>
133
+ </ul>
134
+ </div>
135
+ <div class="border border-gray-200 rounded-lg p-4">
136
+ <h4 class="font-medium text-gray-800 mb-2">Conversion Details</h4>
137
+ <ul class="text-sm text-gray-600 space-y-1">
138
+ <li><i class="fas fa-clock mr-2 text-indigo-500"></i> Duration: <span id="output-duration">--:--</span></li>
139
+ <li><i class="fas fa-tachometer-alt mr-2 text-indigo-500"></i> Bitrate: <span id="output-bitrate">---</span> kbps</li>
140
+ <li><i class="fas fa-expand mr-2 text-indigo-500"></i> Resolution: <span id="output-resolution">---</span></li>
141
+ <li><i class="fas fa-file-archive mr-2 text-indigo-500"></i> Total Size: <span id="output-size">---</span> MB</li>
142
+ </ul>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="flex flex-col sm:flex-row gap-3">
147
+ <button id="download-btn" class="flex-1 py-2 px-4 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 transition flex items-center justify-center">
148
+ <i class="fas fa-download mr-2"></i> Download All Files (ZIP)
149
+ </button>
150
+ <button id="copy-m3u8-btn" class="flex-1 py-2 px-4 bg-gray-100 text-gray-700 font-medium rounded-md hover:bg-gray-200 transition flex items-center justify-center">
151
+ <i class="fas fa-copy mr-2"></i> Copy M3U8 Content
152
+ </button>
153
+ <button id="new-conversion-btn" class="flex-1 py-2 px-4 bg-white border border-gray-300 text-gray-700 font-medium rounded-md hover:bg-gray-50 transition flex items-center justify-center">
154
+ <i class="fas fa-redo mr-2"></i> New Conversion
155
+ </button>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Info Section -->
161
+ <div class="mt-12 bg-indigo-50 rounded-xl p-6">
162
+ <h2 class="text-xl font-semibold text-indigo-800 mb-3">About M3U8 Format</h2>
163
+ <div class="text-gray-700 space-y-3">
164
+ <p>M3U8 is the file format for HTTP Live Streaming (HLS), a popular adaptive streaming protocol developed by Apple. It breaks videos into small segments (TS files) and provides a playlist (M3U8) that clients can use to stream the content.</p>
165
+ <p><strong>Key benefits:</strong></p>
166
+ <ul class="list-disc pl-5 space-y-1">
167
+ <li>Adaptive bitrate streaming for better quality on different network conditions</li>
168
+ <li>Compatible with most modern devices and browsers</li>
169
+ <li>Supports encryption and DRM for secure content delivery</li>
170
+ <li>Efficient for live streaming and video-on-demand</li>
171
+ </ul>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <script>
177
+ // DOM Elements
178
+ const fileInput = document.getElementById('file-input');
179
+ const browseBtn = document.getElementById('browse-btn');
180
+ const uploadSection = document.getElementById('upload-section');
181
+ const settingsSection = document.getElementById('settings-section');
182
+ const progressSection = document.getElementById('progress-section');
183
+ const resultSection = document.getElementById('result-section');
184
+ const startConvertBtn = document.getElementById('start-convert-btn');
185
+ const convertSpinner = document.getElementById('convert-spinner');
186
+ const progressBar = document.getElementById('progress-bar');
187
+ const progressPercent = document.getElementById('progress-percent');
188
+ const statusText = document.getElementById('status-text');
189
+ const timeElapsed = document.getElementById('time-elapsed');
190
+ const timeRemaining = document.getElementById('time-remaining');
191
+ const downloadBtn = document.getElementById('download-btn');
192
+ const copyM3u8Btn = document.getElementById('copy-m3u8-btn');
193
+ const newConversionBtn = document.getElementById('new-conversion-btn');
194
+ const outputDuration = document.getElementById('output-duration');
195
+ const outputBitrate = document.getElementById('output-bitrate');
196
+ const outputResolution = document.getElementById('output-resolution');
197
+ const outputSize = document.getElementById('output-size');
198
+
199
+ // Variables
200
+ let selectedFile = null;
201
+ let conversionInProgress = false;
202
+ let outputFileName = '';
203
+
204
+ // Event Listeners
205
+ browseBtn.addEventListener('click', () => fileInput.click());
206
+ fileInput.addEventListener('change', handleFileSelect);
207
+ uploadSection.addEventListener('dragover', handleDragOver);
208
+ uploadSection.addEventListener('dragleave', handleDragLeave);
209
+ uploadSection.addEventListener('drop', handleDrop);
210
+ startConvertBtn.addEventListener('click', startConversion);
211
+ newConversionBtn.addEventListener('click', resetConverter);
212
+ downloadBtn.addEventListener('click', downloadZipFile);
213
+ copyM3u8Btn.addEventListener('click', copyM3u8Content);
214
+
215
+ // Functions
216
+ function handleFileSelect(e) {
217
+ const file = e.target.files[0];
218
+ if (file && file.type === 'video/mp4') {
219
+ processSelectedFile(file);
220
+ } else {
221
+ showError('Please select a valid MP4 video file.');
222
+ }
223
+ }
224
+
225
+ function handleDragOver(e) {
226
+ e.preventDefault();
227
+ uploadSection.classList.add('active');
228
+ }
229
+
230
+ function handleDragLeave() {
231
+ uploadSection.classList.remove('active');
232
+ }
233
+
234
+ function handleDrop(e) {
235
+ e.preventDefault();
236
+ uploadSection.classList.remove('active');
237
+
238
+ const file = e.dataTransfer.files[0];
239
+ if (file && file.type === 'video/mp4') {
240
+ processSelectedFile(file);
241
+ } else {
242
+ showError('Please drop a valid MP4 video file.');
243
+ }
244
+ }
245
+
246
+ function processSelectedFile(file) {
247
+ selectedFile = file;
248
+ outputFileName = file.name.replace(/\.[^/.]+$/, ""); // Remove extension
249
+
250
+ // Show file info
251
+ uploadSection.innerHTML = `
252
+ <div class="flex items-center justify-center">
253
+ <div class="mr-4 p-2 bg-indigo-100 rounded-lg">
254
+ <i class="fas fa-file-video text-indigo-600 text-2xl"></i>
255
+ </div>
256
+ <div class="text-left">
257
+ <h4 class="font-medium text-gray-800">${file.name}</h4>
258
+ <p class="text-sm text-gray-500">${formatFileSize(file.size)} • ${file.type}</p>
259
+ </div>
260
+ </div>
261
+ <button id="change-file-btn" class="mt-4 px-4 py-1 text-sm text-indigo-600 hover:text-indigo-800 transition">
262
+ Change File
263
+ </button>
264
+ `;
265
+
266
+ document.getElementById('change-file-btn').addEventListener('click', resetFileSelection);
267
+
268
+ // Show settings section
269
+ settingsSection.classList.remove('hidden');
270
+ }
271
+
272
+ function resetFileSelection() {
273
+ selectedFile = null;
274
+ outputFileName = '';
275
+ fileInput.value = '';
276
+ uploadSection.innerHTML = `
277
+ <div class="mx-auto w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
278
+ <i class="fas fa-cloud-upload-alt text-indigo-500 text-2xl"></i>
279
+ </div>
280
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Drag & Drop your MP4 file here</h3>
281
+ <p class="text-gray-500 mb-4">or click to browse files</p>
282
+ <button id="browse-btn" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
283
+ Select File
284
+ </button>
285
+ `;
286
+
287
+ document.getElementById('browse-btn').addEventListener('click', () => fileInput.click());
288
+ settingsSection.classList.add('hidden');
289
+ progressSection.classList.add('hidden');
290
+ resultSection.classList.add('hidden');
291
+ }
292
+
293
+ function startConversion() {
294
+ if (!selectedFile || conversionInProgress) return;
295
+
296
+ conversionInProgress = true;
297
+ convertSpinner.classList.remove('hidden');
298
+ startConvertBtn.disabled = true;
299
+
300
+ // Hide settings, show progress
301
+ settingsSection.classList.add('hidden');
302
+ progressSection.classList.remove('hidden');
303
+
304
+ // Get conversion settings
305
+ const qualityPreset = document.getElementById('quality-preset').value;
306
+ const segmentDuration = document.getElementById('segment-duration').value;
307
+ const bitrate = document.getElementById('bitrate').value;
308
+ const audioQuality = document.getElementById('audio-quality').value;
309
+
310
+ // Simulate conversion progress (in a real app, this would be actual conversion)
311
+ let progress = 0;
312
+ const totalSteps = 100;
313
+ const conversionTime = Math.max(5000, selectedFile.size / 500000); // Simulate time based on file size
314
+
315
+ const interval = setInterval(() => {
316
+ progress += 1;
317
+ const percent = Math.min(progress, 100);
318
+
319
+ updateProgress(percent, conversionTime, totalSteps);
320
+
321
+ if (progress >= totalSteps) {
322
+ clearInterval(interval);
323
+ conversionComplete();
324
+ }
325
+ }, conversionTime / totalSteps);
326
+ }
327
+
328
+ function updateProgress(percent, totalTime, totalSteps) {
329
+ progressBar.style.width = `${percent}%`;
330
+ progressPercent.textContent = `${percent}%`;
331
+
332
+ const elapsedTime = Math.floor((percent / 100) * totalTime / 1000);
333
+ const remainingTime = Math.floor((totalTime / 1000) - elapsedTime);
334
+
335
+ timeElapsed.textContent = formatTime(elapsedTime);
336
+ timeRemaining.textContent = formatTime(remainingTime);
337
+
338
+ // Update status text based on progress
339
+ if (percent < 20) {
340
+ statusText.textContent = "Initializing conversion...";
341
+ } else if (percent < 50) {
342
+ statusText.textContent = "Encoding video segments...";
343
+ } else if (percent < 80) {
344
+ statusText.textContent = "Processing audio tracks...";
345
+ } else {
346
+ statusText.textContent = "Finalizing playlist...";
347
+ }
348
+ }
349
+
350
+ function conversionComplete() {
351
+ conversionInProgress = false;
352
+ convertSpinner.classList.add('hidden');
353
+ startConvertBtn.disabled = false;
354
+
355
+ // Hide progress, show result
356
+ progressSection.classList.add('hidden');
357
+ resultSection.classList.remove('hidden');
358
+
359
+ // Set output details (simulated)
360
+ const duration = Math.floor(Math.random() * 300) + 60; // 1-6 minutes
361
+ const bitrate = document.getElementById('bitrate').value;
362
+ const quality = document.getElementById('quality-preset').value;
363
+
364
+ outputDuration.textContent = formatTime(duration);
365
+ outputBitrate.textContent = bitrate;
366
+
367
+ let resolution = "";
368
+ switch(quality) {
369
+ case "low": resolution = "854×480"; break;
370
+ case "medium": resolution = "1280×720"; break;
371
+ case "high": resolution = "1920×1080"; break;
372
+ case "ultra": resolution = "3840×2160"; break;
373
+ }
374
+ outputResolution.textContent = resolution;
375
+
376
+ const sizeMB = Math.floor(selectedFile.size / (1024 * 1024) * 0.8); // Simulate 20% compression
377
+ outputSize.textContent = sizeMB;
378
+ }
379
+
380
+ function downloadZipFile() {
381
+ if (!outputFileName) return;
382
+
383
+ // Create a loading state for the download button
384
+ const originalText = downloadBtn.innerHTML;
385
+ downloadBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Preparing download...';
386
+ downloadBtn.disabled = true;
387
+
388
+ // Create a new JSZip instance
389
+ const zip = new JSZip();
390
+
391
+ // Generate M3U8 playlist content
392
+ const m3u8Content = generateM3U8Content();
393
+
394
+ // Add the M3U8 file to the ZIP
395
+ zip.file(`${outputFileName}.m3u8`, m3u8Content);
396
+
397
+ // Generate and add TS segment files (simulated)
398
+ const segmentCount = Math.floor(Math.random() * 10) + 3; // 3-12 segments
399
+ for (let i = 1; i <= segmentCount; i++) {
400
+ // Create a simulated TS file content (in a real app, this would be actual video segments)
401
+ const tsContent = `Simulated TS segment file #${i} for ${outputFileName}`;
402
+ zip.file(`segment_${i}.ts`, tsContent);
403
+ }
404
+
405
+ // Generate the ZIP file
406
+ zip.generateAsync({ type: 'blob' }).then(function(content) {
407
+ // Save the ZIP file
408
+ saveAs(content, `${outputFileName}_hls.zip`);
409
+
410
+ // Restore the download button
411
+ downloadBtn.innerHTML = originalText;
412
+ downloadBtn.disabled = false;
413
+ });
414
+ }
415
+
416
+ function generateM3U8Content() {
417
+ const segmentDuration = document.getElementById('segment-duration').value;
418
+ const bitrate = document.getElementById('bitrate').value;
419
+ const audioQuality = document.getElementById('audio-quality').value;
420
+
421
+ let m3u8Content = `#EXTM3U
422
+ #EXT-X-VERSION:3
423
+ #EXT-X-TARGETDURATION:${segmentDuration}
424
+ #EXT-X-MEDIA-SEQUENCE:0
425
+ #EXT-X-PLAYLIST-TYPE:VOD
426
+ #EXT-X-INDEPENDENT-SEGMENTS\n`;
427
+
428
+ // Add video quality info
429
+ m3u8Content += `#EXT-X-STREAM-INF:BANDWIDTH=${bitrate}000,CODECS="avc1.64001f,mp4a.40.2",RESOLUTION=1280x720\n`;
430
+
431
+ // Add segments
432
+ const segmentCount = Math.floor(Math.random() * 10) + 3; // 3-12 segments
433
+ for (let i = 1; i <= segmentCount; i++) {
434
+ const duration = i === segmentCount ? (segmentDuration / 2).toFixed(1) : segmentDuration;
435
+ m3u8Content += `#EXTINF:${duration},\nsegment_${i}.ts\n`;
436
+ }
437
+
438
+ m3u8Content += '#EXT-X-ENDLIST';
439
+
440
+ return m3u8Content;
441
+ }
442
+
443
+ function copyM3u8Content() {
444
+ const m3u8Content = generateM3U8Content();
445
+
446
+ navigator.clipboard.writeText(m3u8Content).then(() => {
447
+ const originalText = copyM3u8Btn.innerHTML;
448
+ copyM3u8Btn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
449
+ setTimeout(() => {
450
+ copyM3u8Btn.innerHTML = originalText;
451
+ }, 2000);
452
+ });
453
+ }
454
+
455
+ function resetConverter() {
456
+ resetFileSelection();
457
+ resultSection.classList.add('hidden');
458
+ }
459
+
460
+ function showError(message) {
461
+ alert(message); // In a real app, you'd show a nicer error message
462
+ }
463
+
464
+ // Helper functions
465
+ function formatFileSize(bytes) {
466
+ if (bytes === 0) return '0 Bytes';
467
+ const k = 1024;
468
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
469
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
470
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
471
+ }
472
+
473
+ function formatTime(seconds) {
474
+ const mins = Math.floor(seconds / 60);
475
+ const secs = seconds % 60;
476
+ return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
477
+ }
478
+ </script>
479
+ </body>
480
  </html>