updated view and playlist management

app/templates/content/manage_playlist_content.html

@@ -88,6 +88,72 @@
         justify-content: space-between;
         align-items: center;
     }
+    
+    /* Audio toggle styles */
+    .audio-toggle {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+    }
+    
+    .audio-checkbox {
+        display: none;
+    }
+    
+    .audio-label {
+        font-size: 20px;
+        transition: all 0.3s ease;
+    }
+    
+    .audio-checkbox + .audio-label .audio-on {
+        display: none;
+    }
+    
+    .audio-checkbox + .audio-label .audio-off {
+        display: inline;
+    }
+    
+    .audio-checkbox:checked + .audio-label .audio-on {
+        display: inline;
+    }
+    
+    .audio-checkbox:checked + .audio-label .audio-off {
+        display: none;
+    }
+    
+    .audio-label:hover {
+        transform: scale(1.2);
+    }
+    
+    /* Dark mode support */
+    body.dark-mode .playlist-table th {
+        background: #1a202c;
+        color: #cbd5e0;
+        border-bottom-color: #4a5568;
+    }
+    
+    body.dark-mode .playlist-table td {
+        border-bottom-color: #4a5568;
+        color: #e2e8f0;
+    }
+    
+    body.dark-mode .draggable-row:hover {
+        background: #1a202c;
+    }
+    
+    body.dark-mode .drag-handle {
+        color: #718096;
+    }
+    
+    body.dark-mode .content-item {
+        background: #1a202c;
+        color: #e2e8f0;
+    }
+    
+    body.dark-mode .available-content {
+        color: #e2e8f0;
+    }
 </style>
 
 <div class="container" style="max-width: 1400px;">
@@ -136,6 +202,7 @@
                         <th>Filename</th>
                         <th style="width: 100px;">Type</th>
                         <th style="width: 100px;">Duration</th>
+                        <th style="width: 80px;">Audio</th>
                         <th style="width: 100px;">Actions</th>
                     </tr>
                 </thead>
@@ -152,6 +219,23 @@
                             {% else %}📁 Other{% endif %}
                         </td>
                         <td>{{ content._playlist_duration or content.duration }}s</td>
+                        <td>
+                            {% if content.content_type == 'video' %}
+                            <label class="audio-toggle">
+                                <input type="checkbox" 
+                                       class="audio-checkbox"
+                                       data-content-id="{{ content.id }}"
+                                       {{ 'checked' if not content._playlist_muted else '' }}
+                                       onchange="toggleAudio({{ content.id }}, this.checked)">
+                                <span class="audio-label">
+                                    <span class="audio-on">🔊</span>
+                                    <span class="audio-off">🔇</span>
+                                </span>
+                            </label>
+                            {% else %}
+                            <span style="color: #999;">—</span>
+                            {% endif %}
+                        </td>
                         <td>
                             <form method="POST" 
                                   action="{{ url_for('content.remove_content_from_playlist', playlist_id=playlist.id, content_id=content.id) }}"
@@ -299,6 +383,38 @@ function saveOrder() {
         console.error('Error:', error);
     });
 }
+
+function toggleAudio(contentId, enabled) {
+    const muted = !enabled; // Checkbox is "enabled audio", but backend stores "muted"
+    const playlistId = {{ playlist.id }};
+    const url = `/content/playlist/${playlistId}/update-muted/${contentId}`;
+    
+    const formData = new FormData();
+    formData.append('muted', muted ? 'true' : 'false');
+    
+    fetch(url, {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            console.log('Audio setting updated:', enabled ? 'Enabled' : 'Muted');
+        } else {
+            alert('Error updating audio setting: ' + data.message);
+            // Revert checkbox on error
+            const checkbox = document.querySelector(`.audio-checkbox[data-content-id="${contentId}"]`);
+            if (checkbox) checkbox.checked = !enabled;
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Error updating audio setting');
+        // Revert checkbox on error
+        const checkbox = document.querySelector(`.audio-checkbox[data-content-id="${contentId}"]`);
+        if (checkbox) checkbox.checked = !enabled;
+    });
+}
 </script>
 
 {% endblock %}