updated pages

app/templates/player/fullscreen.html

@@ -105,13 +105,12 @@
         {% if content %}
             {% for item in content %}
             <div class="content-item" data-duration="{{ item.duration }}" data-id="{{ item.id }}">
-                {% if item.content_type.startswith('image/') %}
+                {% if item.content_type == 'image' %}
                     <img src="{{ url_for('static', filename='uploads/' + item.file_name) }}" 
                          alt="{{ item.original_name or item.file_name }}">
-                {% elif item.content_type.startswith('video/') %}
+                {% elif item.content_type == 'video' %}
                     <video muted autoplay>
-                        <source src="{{ url_for('static', filename='uploads/' + item.file_name) }}" 
-                                type="{{ item.content_type }}">
+                        <source src="{{ url_for('static', filename='uploads/' + item.file_name) }}">
                     </video>
                 {% endif %}
             </div>

app/templates/player/index.html

@@ -0,0 +1,337 @@
+{% extends "base.html" %}
+
+{% block title %}Player Management - SKE Digital Signage{% endblock %}
+
+{% block content %}
+<div class="container-fluid py-4">
+    <!-- Page Header -->
+    <div class="row mb-4">
+        <div class="col">
+            <h1><i class="bi bi-display"></i> Player Management</h1>
+            <p class="text-muted">Manage digital signage players and their configurations</p>
+        </div>
+        <div class="col-auto">
+            <a href="{{ url_for('player.add') }}" class="btn btn-primary">
+                <i class="bi bi-plus"></i> Add Player
+            </a>
+        </div>
+    </div>
+
+    <!-- Quick Stats -->
+    <div class="row mb-4">
+        <div class="col-md-3">
+            <div class="card text-white bg-primary">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between">
+                        <div>
+                            <h5 class="card-title">Total Players</h5>
+                            <h2>{{ players|length }}</h2>
+                        </div>
+                        <div class="align-self-center">
+                            <i class="bi bi-display" style="font-size: 2rem;"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card text-white bg-success">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between">
+                        <div>
+                            <h5 class="card-title">Active Players</h5>
+                            <h2>{{ players|selectattr('is_active')|list|length }}</h2>
+                        </div>
+                        <div class="align-self-center">
+                            <i class="bi bi-play-circle" style="font-size: 2rem;"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card text-white bg-warning">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between">
+                        <div>
+                            <h5 class="card-title">Online Players</h5>
+                            <h2>{{ players|selectattr('last_seen')|list|length }}</h2>
+                        </div>
+                        <div class="align-self-center">
+                            <i class="bi bi-wifi" style="font-size: 2rem;"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card text-white bg-info">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between">
+                        <div>
+                            <h5 class="card-title">Locked Players</h5>
+                            <h2>{{ players|selectattr('locked_to_group_id')|list|length }}</h2>
+                        </div>
+                        <div class="align-self-center">
+                            <i class="bi bi-lock" style="font-size: 2rem;"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Players Table -->
+    <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <h5><i class="bi bi-list"></i> Players</h5>
+            <div class="btn-group" role="group">
+                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="refreshPlayers()">
+                    <i class="bi bi-arrow-clockwise"></i> Refresh
+                </button>
+                <button type="button" class="btn btn-outline-danger btn-sm" onclick="bulkDelete()" disabled id="bulkDeleteBtn">
+                    <i class="bi bi-trash"></i> Delete Selected
+                </button>
+            </div>
+        </div>
+        <div class="card-body">
+            {% if players %}
+                <div class="table-responsive">
+                    <table class="table table-hover">
+                        <thead>
+                            <tr>
+                                <th>
+                                    <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
+                                </th>
+                                <th>Player Name</th>
+                                <th>Hostname</th>
+                                <th>Status</th>
+                                <th>Group</th>
+                                <th>Last Seen</th>
+                                <th>Version</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for player in players %}
+                            <tr>
+                                <td>
+                                    <input type="checkbox" class="player-checkbox" value="{{ player.id }}" onchange="updateBulkActions()">
+                                </td>
+                                <td>
+                                    <strong>{{ player.username }}</strong>
+                                    {% if player.locked_to_group_id %}
+                                        <span class="badge bg-warning" title="Locked to group">
+                                            <i class="bi bi-lock"></i>
+                                        </span>
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    <code>{{ player.hostname or 'Not set' }}</code>
+                                </td>
+                                <td>
+                                    {% if player.is_active %}
+                                        {% if player.last_seen and (now() - player.last_seen).total_seconds() < 300 %}
+                                            <span class="badge bg-success">Online</span>
+                                        {% else %}
+                                            <span class="badge bg-warning">Active</span>
+                                        {% endif %}
+                                    {% else %}
+                                        <span class="badge bg-secondary">Inactive</span>
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    {% if player.locked_to_group_id %}
+                                        <span class="badge bg-primary">Group {{ player.locked_to_group_id }}</span>
+                                    {% else %}
+                                        <span class="text-muted">No group</span>
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    {% if player.last_seen %}
+                                        <span title="{{ player.last_seen }}">
+                                            {{ player.last_seen.strftime('%Y-%m-%d %H:%M') }}
+                                        </span>
+                                    {% else %}
+                                        <span class="text-muted">Never</span>
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    <span class="badge bg-info">v{{ player.playlist_version or 0 }}</span>
+                                </td>
+                                <td>
+                                    <div class="btn-group btn-group-sm">
+                                        <a href="{{ url_for('player.view', id=player.id) }}" class="btn btn-outline-primary" title="View Player">
+                                            <i class="bi bi-eye"></i>
+                                        </a>
+                                        <a href="{{ url_for('player.edit', id=player.id) }}" class="btn btn-outline-warning" title="Edit Player">
+                                            <i class="bi bi-pencil"></i>
+                                        </a>
+                                        <button type="button" class="btn btn-outline-success" onclick="openPlayerWindow('{{ player.id }}')" title="Open Player View">
+                                            <i class="bi bi-window"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-outline-danger" onclick="deletePlayer('{{ player.id }}', '{{ player.username }}')" title="Delete Player">
+                                            <i class="bi bi-trash"></i>
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            {% else %}
+                <div class="text-center py-5">
+                    <i class="bi bi-display text-muted" style="font-size: 4rem;"></i>
+                    <h4 class="text-muted mt-3">No Players Found</h4>
+                    <p class="text-muted">Get started by adding your first digital signage player.</p>
+                    <a href="{{ url_for('player.add') }}" class="btn btn-primary">
+                        <i class="bi bi-plus"></i> Add First Player
+                    </a>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<!-- Delete Player Modal -->
+<div class="modal fade" id="deletePlayerModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Delete Player</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete player <strong id="deletePlayerName"></strong>?</p>
+                <p class="text-danger small">This action cannot be undone and will remove all player data.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <form method="POST" action="{{ url_for('player.delete') }}" style="display:inline;">
+                    <input type="hidden" id="deletePlayerId" name="player_id">
+                    <button type="submit" class="btn btn-danger">Delete Player</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Bulk Delete Modal -->
+<div class="modal fade" id="bulkDeleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Delete Selected Players</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete <span id="selectedCount">0</span> selected players?</p>
+                <p class="text-danger small">This action cannot be undone and will remove all player data.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" onclick="confirmBulkDelete()">Delete Players</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function deletePlayer(playerId, playerName) {
+    document.getElementById('deletePlayerId').value = playerId;
+    document.getElementById('deletePlayerName').textContent = playerName;
+    
+    const modal = new bootstrap.Modal(document.getElementById('deletePlayerModal'));
+    modal.show();
+}
+
+function toggleSelectAll() {
+    const selectAll = document.getElementById('selectAll');
+    const checkboxes = document.querySelectorAll('.player-checkbox');
+    
+    checkboxes.forEach(checkbox => {
+        checkbox.checked = selectAll.checked;
+    });
+    
+    updateBulkActions();
+}
+
+function updateBulkActions() {
+    const selectedCheckboxes = document.querySelectorAll('.player-checkbox:checked');
+    const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
+    
+    if (selectedCheckboxes.length > 0) {
+        bulkDeleteBtn.disabled = false;
+        bulkDeleteBtn.textContent = `Delete ${selectedCheckboxes.length} Selected`;
+    } else {
+        bulkDeleteBtn.disabled = true;
+        bulkDeleteBtn.innerHTML = '<i class="bi bi-trash"></i> Delete Selected';
+    }
+}
+
+function bulkDelete() {
+    const selectedCheckboxes = document.querySelectorAll('.player-checkbox:checked');
+    
+    if (selectedCheckboxes.length === 0) {
+        return;
+    }
+    
+    document.getElementById('selectedCount').textContent = selectedCheckboxes.length;
+    const modal = new bootstrap.Modal(document.getElementById('bulkDeleteModal'));
+    modal.show();
+}
+
+function confirmBulkDelete() {
+    const selectedCheckboxes = document.querySelectorAll('.player-checkbox:checked');
+    const playerIds = Array.from(selectedCheckboxes).map(cb => cb.value);
+    
+    // Create a form and submit it
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '{{ url_for("player.bulk_delete") }}';
+    
+    playerIds.forEach(id => {
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'player_ids';
+        input.value = id;
+        form.appendChild(input);
+    });
+    
+    document.body.appendChild(form);
+    form.submit();
+}
+
+function refreshPlayers() {
+    window.location.reload();
+}
+
+function openPlayerWindow(playerId) {
+    const url = `{{ url_for('player.fullscreen', id='PLAYER_ID') }}`.replace('PLAYER_ID', playerId);
+    window.open(url, '_blank', 'width=1920,height=1080,fullscreen=yes');
+}
+
+// Auto-refresh every 30 seconds
+setInterval(function() {
+    const visibilitySupported = typeof document.hidden !== 'undefined';
+    if (!visibilitySupported || !document.hidden) {
+        // Only refresh if page is visible
+        fetch(window.location.href)
+            .then(response => response.text())
+            .then(html => {
+                // Update only the stats if different
+                const parser = new DOMParser();
+                const newDoc = parser.parseFromString(html, 'text/html');
+                const currentStats = document.querySelector('.row.mb-4').innerHTML;
+                const newStats = newDoc.querySelector('.row.mb-4').innerHTML;
+                
+                if (currentStats !== newStats) {
+                    document.querySelector('.row.mb-4').innerHTML = newStats;
+                }
+            })
+            .catch(error => console.log('Auto-refresh failed:', error));
+    }
+}, 30000);
+</script>
+{% endblock %}

app/templates/player/view.html

@@ -130,9 +130,9 @@
                                             {% endif %}
                                         </td>
                                         <td>
-                                            {% if item.content_type.startswith('image/') %}
+                                            {% if item.content_type == 'image' %}
                                                 <span class="badge bg-success"><i class="bi bi-image"></i> Image</span>
-                                            {% elif item.content_type.startswith('video/') %}
+                                            {% elif item.content_type == 'video' %}
                                                 <span class="badge bg-info"><i class="bi bi-play-circle"></i> Video</span>
                                             {% else %}
                                                 <span class="badge bg-secondary">{{ item.content_type }}</span>
@@ -146,6 +146,10 @@
                                                         onclick="previewContent('{{ item.id }}', '{{ item.file_name }}', '{{ item.content_type }}')">
                                                     <i class="bi bi-eye"></i>
                                                 </button>
+                                                <button type="button" class="btn btn-outline-warning" 
+                                                        onclick="editContent('{{ item.id }}', '{{ item.file_name }}', {{ item.duration }})">
+                                                    <i class="bi bi-pencil"></i>
+                                                </button>
                                                 <button type="button" class="btn btn-outline-danger" 
                                                         onclick="removeContent('{{ item.id }}', '{{ item.file_name }}')">
                                                     <i class="bi bi-trash"></i>
@@ -208,6 +212,30 @@
     </div>
 </div>
 
+<!-- Edit Content Modal -->
+<div class="modal fade" id="editModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Edit Content Duration</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Edit display duration for <strong id="editFilename"></strong></p>
+                <div class="mb-3">
+                    <label for="editDuration" class="form-label">Duration (seconds)</label>
+                    <input type="number" class="form-control" id="editDuration" min="1" max="300" required>
+                    <div class="form-text">How long should this content be displayed? (1-300 seconds)</div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" onclick="confirmEditContent()">Update Duration</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script>
 let currentContentId = null;
 
@@ -217,17 +245,26 @@ function refreshPlayer() {
 }
 
 function previewContent(contentId, filename, contentType) {
+    console.log('Preview function called:', {contentId, filename, contentType});
+    
     const modal = new bootstrap.Modal(document.getElementById('previewModal'));
     const previewDiv = document.getElementById('previewContent');
     
-    if (contentType.startsWith('image/')) {
-        previewDiv.innerHTML = `<img src="/static/uploads/${filename}" class="img-fluid" alt="${filename}">`;
-    } else if (contentType.startsWith('video/')) {
+    if (contentType === 'image') {
+        const imgSrc = `/static/uploads/${filename}`;
+        console.log('Loading image from:', imgSrc);
+        previewDiv.innerHTML = `<img src="${imgSrc}" class="img-fluid" alt="${filename}" 
+                                onload="console.log('Image loaded successfully')"
+                                onerror="console.error('Failed to load image:', this.src)">`;
+    } else if (contentType === 'video') {
+        const videoSrc = `/static/uploads/${filename}`;
+        console.log('Loading video from:', videoSrc);
         previewDiv.innerHTML = `<video controls class="w-100" style="max-height: 400px;">
-                                  <source src="/static/uploads/${filename}" type="${contentType}">
+                                  <source src="${videoSrc}">
                                   Your browser does not support the video tag.
                                 </video>`;
     } else {
+        console.log('Unsupported content type:', contentType);
         previewDiv.innerHTML = `<p>Preview not available for this content type: ${contentType}</p>`;
     }
     
@@ -241,6 +278,52 @@ function removeContent(contentId, filename) {
     modal.show();
 }
 
+function editContent(contentId, filename, currentDuration) {
+    currentContentId = contentId;
+    document.getElementById('editFilename').textContent = filename;
+    document.getElementById('editDuration').value = currentDuration;
+    const modal = new bootstrap.Modal(document.getElementById('editModal'));
+    modal.show();
+}
+
+function confirmEditContent() {
+    if (currentContentId) {
+        const newDuration = parseInt(document.getElementById('editDuration').value);
+        
+        if (!newDuration || newDuration < 1 || newDuration > 300) {
+            alert('Please enter a valid duration between 1 and 300 seconds.');
+            return;
+        }
+        
+        // Make API call to update content duration
+        fetch(`/api/content/${currentContentId}/edit`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                duration: newDuration
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                location.reload();
+            } else {
+                alert('Error updating content: ' + data.message);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('Error updating content');
+        });
+        
+        // Close modal
+        const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
+        modal.hide();
+    }
+}
+
 function confirmRemoveContent() {
     if (currentContentId) {
         // Make API call to remove content from player