Spaces:
Running
Running
use dark, moder, clean CSS and HTML5, use separate html and python files, draggable mini-player, with play/pause next/previous random shuffle icon, video "x of y", main page has a title header, search bar, under the search bar is a flex-grid (variable zoom upto 8x8 cards - use "+" and "-" buttons) displaying search results using CSS cards, video thumbnail, duration, video title, video author or channel name, green background signifying it is downloaded, each card will have a remove "X" circle button on the lower right corner, when user enters text and clicks search a modal opens and displays the results in a search grid (this search grid is to be the same format as the playlist flex-grid - css cards will have a red background for 'not downloaded', a remove "x" circle button to remove it from the search results list, user can click a card to add it to the playlist when selected a card in the search results display gets a green glowing border. Search modal needs a 'back' button, returning the user to the playlist, where they can press 'download new' to start the downloads. Theuser must be able to acess the search AND playlist while a video is playing. apply best practice to padding, margins, and layout.
0df20ca
verified
| ```python | |
| from flask import Flask, render_template, request, jsonify | |
| app = Flask(__name__) | |
| # Mock data for demonstration | |
| mock_playlist = [ | |
| { | |
| "id": 1, | |
| "title": "Midnight City", | |
| "artist": "M83", | |
| "duration": "4:03", | |
| "thumbnail": "http://static.photos/music/200x200/1", | |
| "downloaded": True | |
| }, | |
| { | |
| "id": 2, | |
| "title": "Blinding Lights", | |
| "artist": "The Weeknd", | |
| "duration": "3:20", | |
| "thumbnail": "http://static.photos/music/200x200/2", | |
| "downloaded": True | |
| } | |
| ] | |
| mock_search_results = [ | |
| { | |
| "id": 3, | |
| "title": "Save Your Tears", | |
| "artist": "The Weeknd", | |
| "duration": "3:35", | |
| "thumbnail": "http://static.photos/music/200x200/3", | |
| "downloaded": False | |
| }, | |
| { | |
| "id": 4, | |
| "title": "Starboy", | |
| "artist": "The Weeknd ft. Daft Punk", | |
| "duration": "3:50", | |
| "thumbnail": "http://static.photos/music/200x200/4", | |
| "downloaded": False | |
| } | |
| ] | |
| def index(): | |
| return render_template('player.html') | |
| def get_playlist(): | |
| return jsonify(mock_playlist) | |
| def search(): | |
| query = request.json.get('query', '') | |
| # In a real app, you would search your database or API here | |
| return jsonify(mock_search_results) | |
| def add_to_playlist(): | |
| song_id = request.json.get('id') | |
| # Find the song in search results and add to playlist | |
| for song in mock_search_results: | |
| if song['id'] == song_id: | |
| new_song = song.copy() | |
| new_song['downloaded'] = False | |
| mock_playlist.append(new_song) | |
| return jsonify({"success": True}) | |
| return jsonify({"success": False}), 404 | |
| def remove_from_playlist(): | |
| song_id = request.json.get('id') | |
| global mock_playlist | |
| mock_playlist = [song for song in mock_playlist if song['id'] != song_id] | |
| return jsonify({"success": True}) | |
| if __name__ == '__main__': | |
| app.run(debug=True) | |
| ``` |