Skip to content

Commit d7899f0

Browse files
author
SM_SAYEED
committed
rendering logic modified
1 parent 43a781a commit d7899f0

File tree

1 file changed

+41
-62
lines changed

1 file changed

+41
-62
lines changed

‎templates/clips.html‎

Lines changed: 41 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -47,22 +47,6 @@
4747
.delete-btn:hover {
4848
background:#a22;
4949
}
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-
}
6650
</style>
6751
</head>
6852
<body>
@@ -79,73 +63,68 @@
7963
<h1>Music & Guitar Clips</h1>
8064

8165
{% if session.admin %}
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-
88-
{% if message %}
89-
<div style="color:green; margin-top: 1em;">{{ message }}</div>
90-
{% 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>
66+
<div class="upload-form" style="margin-bottom:2em;">
67+
<h3>Upload a Music/Video File</h3>
68+
<form action="{{ url_for('public_clips') }}" method="post" enctype="multipart/form-data">
69+
<input type="hidden" name="action" value="upload_file">
70+
<p><input type="file" name="file" required></p>
71+
<p><input type="text" name="title" placeholder="Title" required></p>
72+
<p><input type="text" name="description" placeholder="Description"></p>
73+
<p><button type="submit">Upload Clip</button></p>
74+
</form>
75+
</div>
10276

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>
77+
<div class="upload-form" style="margin-bottom:2em;">
78+
<h3>Add a Clip from Google Drive</h3>
79+
<form action="{{ url_for('public_clips') }}" method="post">
80+
<input type="hidden" name="action" value="drive_link">
81+
<p><input type="text" name="title" placeholder="Title" required></p>
82+
<p><input type="text" name="description" placeholder="Description"></p>
83+
<p><input type="text" name="link" placeholder="Paste Google Drive Share Link Here" style="width: 100%;" required></p>
84+
<p><button type="submit">Add Drive Clip</button></p>
85+
</form>
86+
</div>
11387

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>
121-
</div>
88+
{% if message %}
89+
<div style="color:green;">{{ message }}</div>
90+
{% endif %}
12291
{% endif %}
12392

12493
{% if clips and clips|length > 0 %}
12594
{% for id, filename, title, description in clips %}
95+
{% set is_drive = 'drive.google.com' in filename %}
96+
{% set is_video = filename.endswith('.mp4') or filename.endswith('.webm') or filename.endswith('.mov') %}
97+
{% set is_audio = filename.endswith('.mp3') or filename.endswith('.wav') or filename.endswith('.m4a') or filename.endswith('.ogg') %}
12698
<div class="section">
12799
<b>{{ title }}</b><br>
128100
<small>{{ description }}</small><br>
129-
{% if 'drive.google.com' in filename %}
130-
<audio controls style="margin-top:0.7em; width: 260px;">
101+
102+
{% if is_drive and 'mp4' in filename %}
103+
<video controls width="380" style="margin-top:0.7em;">
131104
<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') %}
105+
Your browser does not support the video tag.
106+
</video>
107+
{% elif is_drive %}
135108
<audio controls style="margin-top:0.7em; width: 260px;">
136-
<source src="{{ url_for('uploaded_file', filename=filename) }}">
109+
<source src="{{ filename }}">
137110
Your browser does not support the audio element.
138111
</audio>
139-
{% elif filename.endswith('.mp4') or filename.endswith('.webm') or filename.endswith('.mov') %}
112+
{% elif is_video %}
140113
<video controls width="380" style="margin-top:0.7em;">
141114
<source src="{{ url_for('uploaded_file', filename=filename) }}">
142115
Your browser does not support the video tag.
143116
</video>
117+
{% elif is_audio %}
118+
<audio controls style="margin-top:0.7em; width: 260px;">
119+
<source src="{{ url_for('uploaded_file', filename=filename) }}">
120+
Your browser does not support the audio element.
121+
</audio>
144122
{% else %}
145123
<span title="Unrecognized file type">{{ filename }}</span>
146124
{% endif %}
125+
147126
<br>
148-
<a href="{{ url_for('uploaded_file', filename=filename) }}" download>Download</a>
127+
<a href="{{ url_for('uploaded_file', filename=filename) if not is_drive else filename }}" download>Download</a>
149128
{% if admin %}
150129
<form action="{{ url_for('delete_clip', clip_id=id) }}" method="post" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this clip?');">
151130
<button type="submit" class="delete-btn">Delete</button>

0 commit comments

Comments
 (0)