voidscape-noir / app.py
PrometheusGroup's picture
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
}
]
@app.route('/')
def index():
return render_template('player.html')
@app.route('/api/playlist')
def get_playlist():
return jsonify(mock_playlist)
@app.route('/api/search', methods=['POST'])
def search():
query = request.json.get('query', '')
# In a real app, you would search your database or API here
return jsonify(mock_search_results)
@app.route('/api/add_to_playlist', methods=['POST'])
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
@app.route('/api/remove_from_playlist', methods=['POST'])
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)
```