Add player media editing feature with versioning
- Added PlayerEdit model to track edited media history - Created /api/player-edit-media endpoint for receiving edited files from players - Implemented versioned storage: edited_media/<content_id>/<filename_vN.ext> - Automatic playlist update when edited media is received - Updated content.filename to reference versioned file in playlist - Added 'Edited Media on the Player' card to player management page - UI shows version history grouped by original file - Each edit preserves previous versions in archive folder - Includes dark mode support for new UI elements - Documentation: PLAYER_EDIT_MEDIA_API.md
This commit is contained in:
DigiServer Developer
@@ -247,6 +247,33 @@
|
||||
color: #a0aec0 !important;
|
||||
}
|
||||
|
||||
/* Edited Media Cards Dark Mode */
|
||||
body.dark-mode .card[style*="border: 2px solid #7c3aed"] {
|
||||
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
|
||||
border-color: #8b5cf6 !important;
|
||||
}
|
||||
|
||||
body.dark-mode .card[style*="border: 2px solid #7c3aed"] h3 {
|
||||
color: #a78bfa !important;
|
||||
}
|
||||
|
||||
body.dark-mode .card[style*="border: 2px solid #7c3aed"] div[style*="background: white"] {
|
||||
background: #374151 !important;
|
||||
}
|
||||
|
||||
body.dark-mode .card[style*="border: 2px solid #7c3aed"] strong {
|
||||
color: #a78bfa !important;
|
||||
}
|
||||
|
||||
body.dark-mode .card[style*="border: 2px solid #7c3aed"] p[style*="color: #475569"],
|
||||
body.dark-mode .card[style*="border: 2px solid #7c3aed"] p[style*="color: #64748b"] {
|
||||
color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
body.dark-mode div[style*="background: #f8f9fa; border-radius: 8px"] {
|
||||
background: #2d3748 !important;
|
||||
}
|
||||
|
||||
body.dark-mode .card > div[style*="text-align: center"] p {
|
||||
color: #a0aec0 !important;
|
||||
}
|
||||
@@ -611,6 +638,97 @@ document.addEventListener('keydown', function(event) {
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Edited Media Section - Full Width -->
|
||||
<div class="card" style="margin-top: 2rem;">
|
||||
<h2 style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<img src="{{ url_for('static', filename='icons/edit.svg') }}" alt="" style="width: 24px; height: 24px;">
|
||||
Edited Media on the Player
|
||||
</h2>
|
||||
<p style="color: #6c757d; font-size: 0.9rem;">History of media files edited on this player, grouped by original file</p>
|
||||
|
||||
{% if edited_media %}
|
||||
{% set edited_by_content = {} %}
|
||||
{% for edit in edited_media %}
|
||||
{% if edit.content_id not in edited_by_content %}
|
||||
{% set _ = edited_by_content.update({edit.content_id: {'original_name': edit.original_name, 'content_id': edit.content_id, 'versions': []}}) %}
|
||||
{% endif %}
|
||||
{% set _ = edited_by_content[edit.content_id]['versions'].append(edit) %}
|
||||
{% endfor %}
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.5rem; margin-top: 1.5rem;">
|
||||
{% for content_id, data in edited_by_content.items() %}
|
||||
<div class="card" style="background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%); border: 2px solid #7c3aed; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);">
|
||||
<div style="padding: 1rem;">
|
||||
<h3 style="margin: 0 0 0.75rem 0; color: #7c3aed; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem;">
|
||||
✏️ {{ data.original_name }}
|
||||
</h3>
|
||||
<p style="margin: 0 0 1rem 0; font-size: 0.85rem; color: #6c757d;">
|
||||
{{ data.versions|length }} version{{ 's' if data.versions|length > 1 else '' }}
|
||||
</p>
|
||||
|
||||
<div style="max-height: 400px; overflow-y: auto;">
|
||||
{% for edit in data.versions|sort(attribute='version', reverse=True) %}
|
||||
<div style="padding: 0.75rem; margin-bottom: 0.75rem; background: white; border-radius: 6px; border-left: 4px solid {% if loop.first %}#7c3aed{% else %}#cbd5e1{% endif %}; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem;">
|
||||
<strong style="color: {% if loop.first %}#7c3aed{% else %}#64748b{% endif %}; font-size: 0.95rem;">
|
||||
Version {{ edit.version }}
|
||||
{% if loop.first %}
|
||||
<span style="background: #7c3aed; color: white; padding: 0.15rem 0.5rem; border-radius: 12px; font-size: 0.75rem; margin-left: 0.5rem;">Latest</span>
|
||||
{% endif %}
|
||||
</strong>
|
||||
<small style="color: #6c757d; white-space: nowrap;">
|
||||
{{ edit.created_at | localtime('%m/%d %H:%M') }}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<p style="margin: 0.25rem 0; font-size: 0.85rem; color: #475569;">
|
||||
📄 {{ edit.new_name }}
|
||||
</p>
|
||||
|
||||
{% if edit.user %}
|
||||
<p style="margin: 0.25rem 0; font-size: 0.8rem; color: #64748b;">
|
||||
👤 {{ edit.user }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if edit.time_of_modification %}
|
||||
<p style="margin: 0.25rem 0; font-size: 0.8rem; color: #64748b;">
|
||||
🕒 {{ edit.time_of_modification | localtime('%Y-%m-%d %H:%M') }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top: 0.75rem; display: flex; gap: 0.5rem;">
|
||||
<a href="{{ url_for('static', filename='uploads/edited_media/' ~ edit.content_id ~ '/' ~ edit.new_name) }}"
|
||||
target="_blank"
|
||||
style="display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.75rem; background: #7c3aed; color: white; text-decoration: none; border-radius: 4px; font-size: 0.8rem; transition: background 0.2s;"
|
||||
onmouseover="this.style.background='#6d28d9'"
|
||||
onmouseout="this.style.background='#7c3aed'">
|
||||
📥 View File
|
||||
</a>
|
||||
<a href="{{ url_for('static', filename='uploads/edited_media/' ~ edit.content_id ~ '/' ~ edit.new_name) }}"
|
||||
download
|
||||
style="display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.75rem; background: #64748b; color: white; text-decoration: none; border-radius: 4px; font-size: 0.8rem; transition: background 0.2s;"
|
||||
onmouseover="this.style.background='#475569'"
|
||||
onmouseout="this.style.background='#64748b'">
|
||||
💾 Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="text-align: center; padding: 3rem; color: #6c757d; background: #f8f9fa; border-radius: 8px; margin-top: 1.5rem;">
|
||||
<p style="font-size: 2rem; margin: 0;">📝</p>
|
||||
<p style="margin: 0.5rem 0 0 0; font-size: 1.1rem; font-weight: 500;">No edited media yet</p>
|
||||
<p style="font-size: 0.9rem; margin: 0.5rem 0 0 0;">Media edits will appear here once the player sends edited files</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Additional Info Section -->
|
||||
<div class="card" style="margin-top: 2rem;">
|
||||
<h2>ℹ️ Player Information</h2>
|
||||
|
||||
Reference in New Issue
Block a user