"Fix Drive clip rendering and download logic"

SM_SAYEED · SM_SAYEED · commit 1f862196c184 · 2025-08-03T18:42:29.000+02:00
diff --git a/templates/clips.html b/templates/clips.html
@@ -12,71 +12,80 @@
             box-shadow: 0 1px 6px #2224;
             color: #f1f1f1;
         }
-        .admin-link a {
-            color: #fff;
-            text-decoration: none;
-            margin-left: 1em;
-            font-weight: bold;
-        }
-        .admin-link a:hover {
-            text-decoration: underline;
+        iframe, video, audio {
+            margin-top: 0.7em;
+            width: 380px;
+            border: none;
         }
         .download-link {
             color: #6af;
             font-weight: bold;
         }
-        iframe {
-            margin-top: 0.7em;
-            width: 380px;
-            height: 240px;
-            border: none;
+        .admin-link a {
+            color: #fff;
+            text-decoration: none;
+            margin-left: 1em;
+            font-weight: bold;
         }
+        .admin-link a:hover { text-decoration: underline; }
     </style>
 </head>
 <body>
-    <div class="container">
-        <!-- Admin Login/Logout -->
-        <div class="admin-link" style="text-align: right; margin-bottom: 1em;">
-            {% if session.admin %}
-                <a href="{{ url_for('logout') }}">Logout</a>
-            {% else %}
-                <a href="{{ url_for('login') }}">Admin Login</a>
-            {% endif %}
-        </div>
+<div class="container">
+    <!-- Admin Login/Logout -->
+    <div class="admin-link" style="text-align: right; margin-bottom: 1em;">
+        {% if session.admin %}
+            <a href="{{ url_for('logout') }}">Logout</a>
+        {% else %}
+            <a href="{{ url_for('login') }}">Admin Login</a>
+        {% endif %}
+    </div>
 
-        <h1>Music & Guitar Clips</h1>
+    <h1>Music & Guitar Clips</h1>
 
-        {% if admin %}
-            <p style="margin-top: 1em;">
-                <a href="{{ url_for('add_drive_clip') }}" style="color: #6af; font-weight:bold;">
-                    ➕ Add Drive Clip via Form
-                </a>
-            </p>
-        {% endif %}
+    {% if admin %}
+        <p style="margin-top: 1em;">
+            <a href="{{ url_for('add_drive_clip') }}" style="color: #6af; font-weight:bold;">
+                ➕ Add Drive Clip via Form
+            </a>
+        </p>
+    {% endif %}
 
-        {% if clips %}
-            {% for preview, download, title, description in clips %}
+    {% if clips %}
+        {% for preview, download, title, description in clips %}
             <div class="section">
                 <b>{{ title }}</b><br>
                 <small>{{ description }}</small><br>
 
-                {% if preview %}
+                {% if 'drive.google.com' in preview %}
                     <iframe src="{{ preview }}" allow="autoplay" allowfullscreen></iframe>
+                {% elif preview.endswith('.mp4') %}
+                    <video controls>
+                        <source src="{{ preview }}">
+                        Your browser does not support the video tag.
+                    </video>
+                {% elif preview.endswith('.mp3') or preview.endswith('.wav') %}
+                    <audio controls>
+                        <source src="{{ preview }}">
+                        Your browser does not support the audio element.
+                    </audio>
+                {% else %}
+                    <a href="{{ preview }}" target="_blank">{{ preview }}</a>
                 {% endif %}
 
                 {% if download %}
                     <br><a class="download-link" href="{{ download }}" target="_blank">Download</a>
                 {% endif %}
             </div>
-            {% endfor %}
-        {% else %}
-            <p>No music clips listed in <code>drive_music.csv</code></p>
-        {% endif %}
+        {% endfor %}
+    {% else %}
+        <p>No music clips found.</p>
+    {% endif %}
 
-        <div style="margin-top: 2em;">
-            <a href="{{ url_for('public_home') }}">Home</a> |
-            <a href="{{ url_for('materials_portal') }}">Materials Database</a>
-        </div>
+    <div style="margin-top: 2em;">
+        <a href="{{ url_for('public_home') }}">Home</a> |
+        <a href="{{ url_for('materials_portal') }}">Materials Database</a>
     </div>
+</div>
 </body>
 </html>
