added the video feature

2025-01-24 22:33:42 +02:00
parent ed8c87a9ef
commit 118ebf18d7
5 changed files with 68 additions and 34 deletions
--- a/templates/group_fullscreen.html
+++ b/templates/group_fullscreen.html
@@ -11,12 +11,12 @@
            align-items: center;
            background-color: black;
        }
-        img {
+        img, video {
            max-width: 100%;
            max-height: 100%;
            display: none;
        }
-        img.active {
+        .active {
            display: block;
        }
    </style>
@@ -24,26 +24,43 @@
 <body>
    <div id="content">
        {% for item in content %}
-            <img src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" alt="Content Image" data-duration="{{ item.duration }}">
+            {% if item.file_name.endswith('.mp4') %}
+                <video class="content-item" data-duration="{{ item.duration }}" controls>
+                    <source src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            {% else %}
+                <img src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" alt="Content Image" class="content-item" data-duration="{{ item.duration }}">
+            {% endif %}
        {% endfor %}
    </div>
    <script>
-        const images = document.querySelectorAll('#content img');
-        let index = 0;
+        document.addEventListener('DOMContentLoaded', function() {
+            const items = document.querySelectorAll('.content-item');
+            let currentIndex = 0;

-        function showNextImage() {
-            images.forEach((img, i) => {
-                img.classList.toggle('active', i === index);
-            });
-            const duration = images[index].getAttribute('data-duration') * 1000;
-            index = (index + 1) % images.length;
-            setTimeout(showNextImage, duration);
-        }
+            function showNextItem() {
+                items.forEach(item => item.classList.remove('active'));
+                const currentItem = items[currentIndex];
+                currentItem.classList.add('active');

-        if (images.length > 0) {
-            images[0].classList.add('active');
-            showNextImage();
-        }
+                const duration = parseInt(currentItem.getAttribute('data-duration'), 10) * 1000;
+                if (currentItem.tagName === 'VIDEO') {
+                    currentItem.play();
+                    currentItem.onended = () => {
+                        currentIndex = (currentIndex + 1) % items.length;
+                        showNextItem();
+                    };
+                } else {
+                    setTimeout(() => {
+                        currentIndex = (currentIndex + 1) % items.length;
+                        showNextItem();
+                    }, duration);
+                }
+            }
+
+            showNextItem();
+        });
    </script>
 </body>
 </html>