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 %}

app/templates/players/player_fullscreen.html

@@ -96,7 +96,7 @@
     <div id="player-container">
         <div class="loading" id="loading">Loading playlist...</div>
         <img id="media-display" alt="Content">
-        <video id="video-display" style="display: none; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain;"></video>
+        <video id="video-display" muted autoplay playsinline style="display: none; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain;"></video>
         <div class="no-content" id="no-content" style="display: none;">
             <p>💭 No content in playlist</p>
             <p style="font-size: 16px; margin-top: 10px; opacity: 0.7;">Add content to the playlist to preview</p>
@@ -149,6 +149,7 @@
             
             if (item.type === 'video') {
                 videoDisplay.src = item.url;
+                videoDisplay.muted = item.muted !== false; // Muted unless explicitly set to false
                 videoDisplay.style.display = 'block';
                 videoDisplay.play();
                 

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 %}