Skip to content

Commit 43a781a

Browse files
author
SM_SAYEED
committed
"Add tabbed upload UI for clips (file vs Google Drive)"
1 parent a43a294 commit 43a781a

File tree

1 file changed

+64
-24
lines changed

1 file changed

+64
-24
lines changed

‎templates/clips.html‎

Lines changed: 64 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,6 @@
3434
font-weight: bold;
3535
}
3636
.admin-link a:hover { text-decoration: underline; }
37-
pre {
38-
color: #faf070;
39-
background: #222;
40-
padding: 0.7em 1em;
41-
border-radius: 7px;
42-
}
4337
.delete-btn {
4438
background:#d33;
4539
color:#fff;
@@ -53,6 +47,22 @@
5347
.delete-btn:hover {
5448
background:#a22;
5549
}
50+
.tab-buttons button {
51+
padding: 0.5em 1.2em;
52+
margin-right: 0.7em;
53+
background: #333;
54+
color: white;
55+
border: none;
56+
border-radius: 6px;
57+
font-weight: bold;
58+
cursor: pointer;
59+
}
60+
.tab-buttons button:hover {
61+
background: #444;
62+
}
63+
.tab-content {
64+
margin-top: 1em;
65+
}
5666
</style>
5767
</head>
5868
<body>
@@ -65,33 +75,63 @@
6575
<a href="{{ url_for('login') }}">Admin Login</a>
6676
{% endif %}
6777
</div>
78+
6879
<h1>Music & Guitar Clips</h1>
69-
80+
7081
{% if session.admin %}
71-
<div class="upload-form" style="margin-bottom:2em;">
72-
<form action="{{ url_for('public_clips') }}" method="post" enctype="multipart/form-data">
73-
<input type="file" name="file" required>
74-
<input type="text" name="title" placeholder="Title" required>
75-
<input type="text" name="description" placeholder="Description">
76-
<button type="submit">Upload Clip</button>
77-
</form>
82+
<div class="upload-form" style="margin-bottom: 2em;">
83+
<div class="tab-buttons">
84+
<button onclick="showTab('uploadTab')" type="button">Upload File</button>
85+
<button onclick="showTab('driveTab')" type="button">Add from Google Drive</button>
86+
</div>
87+
7888
{% if message %}
79-
<div style="color:green;">{{ message }}</div>
89+
<div style="color:green; margin-top: 1em;">{{ message }}</div>
8090
{% endif %}
91+
92+
<div id="uploadTab" class="tab-content" style="display: block;">
93+
<h3>Upload a Music/Video File</h3>
94+
<form action="{{ url_for('public_clips') }}" method="post" enctype="multipart/form-data">
95+
<input type="hidden" name="action" value="upload_file">
96+
<p><input type="file" name="file" required></p>
97+
<p><input type="text" name="title" placeholder="Title" required></p>
98+
<p><input type="text" name="description" placeholder="Description"></p>
99+
<p><button type="submit">Upload Clip</button></p>
100+
</form>
101+
</div>
102+
103+
<div id="driveTab" class="tab-content" style="display: none;">
104+
<h3>Add from Google Drive</h3>
105+
<form action="{{ url_for('public_clips') }}" method="post">
106+
<input type="hidden" name="action" value="drive_link">
107+
<p><input type="text" name="title" placeholder="Title" required></p>
108+
<p><input type="text" name="description" placeholder="Description"></p>
109+
<p><input type="text" name="link" placeholder="Paste Google Drive Share Link Here" style="width: 100%;" required></p>
110+
<p><button type="submit">Add Clip</button></p>
111+
</form>
112+
</div>
113+
114+
<script>
115+
function showTab(tabId) {
116+
document.getElementById('uploadTab').style.display = 'none';
117+
document.getElementById('driveTab').style.display = 'none';
118+
document.getElementById(tabId).style.display = 'block';
119+
}
120+
</script>
81121
</div>
82122
{% endif %}
83-
84-
{# DEBUG: show the whole clips variable #}
85-
{# <pre>DEBUG clips: {{ clips|safe }}</pre> #}
86-
123+
87124
{% if clips and clips|length > 0 %}
88125
{% for id, filename, title, description in clips %}
89-
{# DEBUG: print the filename used #}
90-
{# <pre>DEBUG filename: {{ filename }}</pre> #}
91126
<div class="section">
92127
<b>{{ title }}</b><br>
93128
<small>{{ description }}</small><br>
94-
{% if filename.endswith('.mp3') or filename.endswith('.wav') or filename.endswith('.m4a') or filename.endswith('.ogg') %}
129+
{% if 'drive.google.com' in filename %}
130+
<audio controls style="margin-top:0.7em; width: 260px;">
131+
<source src="{{ filename }}">
132+
Your browser does not support the audio element.
133+
</audio>
134+
{% elif filename.endswith('.mp3') or filename.endswith('.wav') or filename.endswith('.m4a') or filename.endswith('.ogg') %}
95135
<audio controls style="margin-top:0.7em; width: 260px;">
96136
<source src="{{ url_for('uploaded_file', filename=filename) }}">
97137
Your browser does not support the audio element.
@@ -116,9 +156,9 @@ <h1>Music & Guitar Clips</h1>
116156
{% else %}
117157
<p>No music clips uploaded yet. Please check back later!</p>
118158
{% endif %}
119-
159+
120160
<div style="margin-top:2em;">
121-
<a href="{{ url_for('public_home') }}">Home</a> |
161+
<a href="{{ url_for('public_home') }}">Home</a> |
122162
<a href="{{ url_for('materials_portal') }}">Materials Database</a>
123163
</div>
124164
</div>

0 commit comments

Comments
 (0)