| 1 |
<div class="audio-upload" id="audio-upload" data-item-id="{{ item.id }}"> |
| 2 |
{% if let Some(s3_key) = audio_s3_key %} |
| 3 |
<div class="current-audio" id="current-audio"> |
| 4 |
<div class="audio-info"> |
| 5 |
<span class="audio-icon">♫</span> |
| 6 |
<div class="audio-details"> |
| 7 |
<span class="audio-filename">{{ s3_key.rsplit('/').next().unwrap_or(&s3_key) }}</span> |
| 8 |
{% if let Some(duration) = duration_seconds %} |
| 9 |
<span class="audio-duration">{{ duration / 60 }}:{{ format!("{:02}", duration % 60) }}</span> |
| 10 |
{% endif %} |
| 11 |
</div> |
| 12 |
</div> |
| 13 |
<button type="button" class="btn-secondary" id="replace-audio-btn">Replace Audio</button> |
| 14 |
</div> |
| 15 |
{% endif %} |
| 16 |
|
| 17 |
<div class="upload-area {% if audio_s3_key.is_some() %}hidden{% endif %}" id="upload-area"> |
| 18 |
<div class="file-upload-area" id="audio-dropzone"> |
| 19 |
<div class="upload-icon">♫</div> |
| 20 |
<div class="upload-text">Drop audio file here or click to upload</div> |
| 21 |
<div class="upload-hint">Supports MP3, WAV, FLAC, M4A up to 500 MB</div> |
| 22 |
<input type="file" id="audio-file-input" class="sr-only" accept="audio/*"> |
| 23 |
</div> |
| 24 |
|
| 25 |
<div class="upload-progress hidden" id="upload-progress"> |
| 26 |
<div class="progress-info"> |
| 27 |
<span id="upload-filename">filename.mp3</span> |
| 28 |
<span id="upload-percent">0%</span> |
| 29 |
</div> |
| 30 |
<div class="progress-bar-container"> |
| 31 |
<div class="progress-bar" id="progress-bar"></div> |
| 32 |
</div> |
| 33 |
<div id="upload-speed" class="upload-speed-text"></div> |
| 34 |
<button type="button" class="btn-secondary" id="cancel-upload-btn">Cancel</button> |
| 35 |
</div> |
| 36 |
|
| 37 |
<div class="upload-success hidden" id="upload-success"> |
| 38 |
<span>Upload complete</span> |
| 39 |
</div> |
| 40 |
|
| 41 |
<div class="upload-error hidden" id="upload-error"> |
| 42 |
<span class="error-message" id="error-message"></span> |
| 43 |
<button type="button" class="btn-secondary" id="retry-upload-btn">Try Again</button> |
| 44 |
</div> |
| 45 |
</div> |
| 46 |
</div> |
| 47 |
|