updated view and playlist management

app/templates/playlist/manage_playlist.html

@@ -369,6 +369,43 @@
         background: #5a1e1e;
         color: #ef5350;
     }
+    
+    /* 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);
+    }
 </style>
 
 <div class="playlist-container">
@@ -433,6 +470,7 @@
                     <th>Filename</th>
                     <th style="width: 100px;">Type</th>
                     <th style="width: 120px;">Duration (s)</th>
+                    <th style="width: 80px;">Audio</th>
                     <th style="width: 100px;">Size</th>
                     <th style="width: 150px;">Actions</th>
                 </tr>
@@ -479,6 +517,24 @@
                             </button>
                         </div>
                     </td>
+                    <td>
+                        {% if content.content_type == 'video' %}
+                        <label class="audio-toggle" onclick="event.stopPropagation()">
+                            <input type="checkbox" 
+                                   class="audio-checkbox"
+                                   data-content-id="{{ content.id }}"
+                                   {{ 'checked' if not content._playlist_muted else '' }}
+                                   onchange="toggleAudio({{ content.id }}, this.checked)"
+                                   onclick="event.stopPropagation()">
+                            <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>{{ "%.2f"|format(content.file_size_mb) }} MB</td>
                     <td>
                         <form method="POST" 
@@ -764,6 +820,38 @@ function updateTotalDuration() {
         }
     });
 }
+
+function toggleAudio(contentId, enabled) {
+    const muted = !enabled; // Checkbox is "enabled audio", but backend stores "muted"
+    const playerId = {{ player.id }};
+    const url = `/playlist/${playerId}/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 %}