Christian Krakau-Louis
132 lines
7.1 KiB
HTML
132 lines
7.1 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Import Playlist - Quizzical Beats{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 py-8">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-navy-800 font-montserrat mb-2">Import Playlist</h1>
|
|
<p class="text-gray-600">Create a music quiz round from a Spotify or Deezer playlist.</p>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-lg p-6">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="mb-4 p-4 border-l-4 {% if category == 'error' %}border-red-500 bg-red-50 text-red-700{% else %}border-green-500 bg-green-50 text-green-700{% endif %}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST" action="{{ url_for('generate.import_playlist') }}" id="importPlaylistForm">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="round_name">
|
|
Round Name (optional)
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="round_name" name="round_name" type="text" placeholder="Enter a name for this round">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="platform">
|
|
Platform
|
|
</label>
|
|
<div class="flex space-x-4">
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" class="form-radio" name="platform" value="spotify" checked>
|
|
<span class="ml-2">Spotify</span>
|
|
</label>
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" class="form-radio" name="platform" value="deezer">
|
|
<span class="ml-2">Deezer</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="playlist_url">
|
|
Playlist URL or ID
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="playlist_url" name="playlist_url" type="text" placeholder="Enter Spotify or Deezer playlist URL">
|
|
<p class="text-gray-600 text-xs italic mt-1">Example: https://open.spotify.com/playlist/37i9dQZF1DX0XUsuxWHRQd or https://www.deezer.com/en/playlist/1111111</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<button class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors"
|
|
type="submit" id="importButton">
|
|
<i class="fas fa-cloud-download-alt mr-2"></i>Import Playlist
|
|
</button>
|
|
<a class="inline-block align-baseline font-bold text-sm text-navy-700 hover:text-navy-800"
|
|
href="{{ url_for('generate.build_music_round') }}">
|
|
<i class="fas fa-arrow-left mr-1"></i>Back to Quiz Builder
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="mt-8 bg-navy-50 rounded-lg p-6 border border-navy-100">
|
|
<h3 class="text-xl font-semibold text-navy-800 mb-3 font-montserrat">Import Tips</h3>
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700">
|
|
<li>Make sure your playlist is public or at least accessible via link</li>
|
|
<li>Only the first 8 songs from the playlist will be imported for the quiz</li>
|
|
<li>Preview URLs might not be available for all songs</li>
|
|
<li>Songs will be saved in our database for future use</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Modal -->
|
|
<div id="loadingModal" class="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50 hidden">
|
|
<div class="bg-white p-8 rounded-lg shadow-lg text-center max-w-md w-full">
|
|
<div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-orange-500 mx-auto mb-4"></div>
|
|
<h3 class="text-xl font-bold text-navy-800 mb-2">Importing Playlist...</h3>
|
|
<p class="text-gray-600 mb-4">This might take a moment as we fetch and process each song.</p>
|
|
<div class="text-sm text-gray-500">
|
|
<p>We're working on:</p>
|
|
<ul id="importSteps" class="mt-2 space-y-2 text-left px-4">
|
|
<li><i class="fas fa-check-circle text-green-500 hidden step-complete"></i> <i class="fas fa-spinner fa-spin text-orange-500 step-in-progress"></i> <span class="ml-2">Fetching playlist data</span></li>
|
|
<li><i class="fas fa-check-circle text-green-500 hidden step-complete"></i> <i class="fas fa-spinner fa-spin text-orange-500 hidden step-in-progress"></i> <span class="ml-2">Importing songs to database</span></li>
|
|
<li><i class="fas fa-check-circle text-green-500 hidden step-complete"></i> <i class="fas fa-spinner fa-spin text-orange-500 hidden step-in-progress"></i> <span class="ml-2">Creating quiz round</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('importPlaylistForm');
|
|
const loadingModal = document.getElementById('loadingModal');
|
|
const importSteps = document.querySelectorAll('#importSteps li');
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
// Show loading modal when form is submitted
|
|
loadingModal.classList.remove('hidden');
|
|
|
|
// Simulate progress updates (since we can't track actual backend progress)
|
|
setTimeout(() => {
|
|
// Mark first step as complete and start second step
|
|
importSteps[0].querySelector('.step-in-progress').classList.add('hidden');
|
|
importSteps[0].querySelector('.step-complete').classList.remove('hidden');
|
|
importSteps[1].querySelector('.step-in-progress').classList.remove('hidden');
|
|
}, 2000);
|
|
|
|
setTimeout(() => {
|
|
// Mark second step as complete and start third step
|
|
importSteps[1].querySelector('.step-in-progress').classList.add('hidden');
|
|
importSteps[1].querySelector('.step-complete').classList.remove('hidden');
|
|
importSteps[2].querySelector('.step-in-progress').classList.remove('hidden');
|
|
}, 4000);
|
|
|
|
// Let the form submission continue
|
|
return true;
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |