updated to 4k images from pptx

templates/create_group.html

@@ -49,11 +49,23 @@
                         </select>
                     </div>
                 </div>
+                <div class="col-md-6 col-12">
+                    <div class="mb-3">
+                        <label for="orientation" class="form-label">Group Orientation</label>
+                        <select class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="orientation" name="orientation" required>
+                            <option value="Landscape" selected>Landscape</option>
+                            <option value="Portret">Portret</option>
+                        </select>
+                    </div>
+                </div>
             </div>
             <div class="alert alert-warning" role="alert">
                 <strong>Warning:</strong> Adding players to a group will delete their individual playlists. 
                 All players in a group will share the same content.
             </div>
+            <div id="orientation-warning" class="alert alert-danger d-none" role="alert">
+                No players with the selected orientation are available.
+            </div>
             <div class="text-center">
                 <button type="submit" class="btn btn-primary">Create Group</button>
                 <a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
@@ -61,5 +73,38 @@
         </form>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Get all players and their orientations from the backend
+        const players = [
+            {% for player in players %}
+                {id: {{ player.id }}, username: "{{ player.username }}", orientation: "{{ player.orientation }}"},
+            {% endfor %}
+        ];
+
+        const orientationSelect = document.getElementById('orientation');
+        const playersSelect = document.getElementById('players');
+        const orientationWarning = document.getElementById('orientation-warning');
+
+        function filterPlayers() {
+            const selectedOrientation = orientationSelect.value;
+            playersSelect.innerHTML = '';
+            let compatibleCount = 0;
+            players.forEach(player => {
+                if (player.orientation === selectedOrientation) {
+                    const option = document.createElement('option');
+                    option.value = player.id;
+                    option.textContent = player.username;
+                    playersSelect.appendChild(option);
+                    compatibleCount++;
+                }
+            });
+            document.getElementById('orientation-warning').classList.toggle('d-none', compatibleCount > 0);
+        }
+
+        orientationSelect.addEventListener('change', filterPlayers);
+
+        // Initial filter on page load
+        filterPlayers();
+    </script>
 </body>
 </html>

templates/edit_player.html

@@ -60,6 +60,13 @@
                     </div>
                 </div>
             </div>
+            <div class="mb-3">
+                <label for="orientation" class="form-label">Orientation</label>
+                <select class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="orientation" name="orientation" required>
+                    <option value="Landscape" {% if player.orientation == 'Landscape' %}selected{% endif %}>Landscape</option>
+                    <option value="Portret" {% if player.orientation == 'Portret' %}selected{% endif %}>Portret</option>
+                </select>
+            </div>
             <div class="text-center">
                 <button type="submit" class="btn btn-primary">Update Player</button>
                 <a href="{{ return_url }}" class="btn btn-secondary mt-3">Back to Player Page</a>

templates/player_page.html

@@ -106,8 +106,12 @@
                                         ☰
                                     </div>
                                     
-                                    <!-- Media Name -->
-                                    <div class="flex-grow-1 mb-2 mb-md-0">
+                                    <!-- Media Thumbnail and Name -->
+                                    <div class="flex-grow-1 mb-2 mb-md-0 d-flex align-items-center">
+                                        <img src="{{ url_for('static', filename='uploads/' ~ media.file_name) }}"
+                                             alt="thumbnail"
+                                             style="width: 48px; height: 48px; object-fit: cover; margin-right: 10px; border-radius: 4px;"
+                                             onerror="this.style.display='none';">
                                         <p class="mb-0"><strong>Media Name:</strong> {{ media.file_name }}</p>
                                     </div>