feat: ✨ RoomID is fully implemented

main.py

@@ -1,9 +1,8 @@
 import requests
 import os
-from flask import Flask, request, render_template, redirect, session, url_for, sessions
+from flask import Flask, request, render_template, redirect, url_for
-from flask_session import Session
 from flask_bootstrap import Bootstrap5
-from utils.spotifyAPI import searchSpotify, create_spotify_oauth, get_spotify_username
+from utils.spotifyAPI import searchSpotify
 from utils.generateQRCode import generateQRCode
 import sqlite3
 from random import randint
@@ -13,7 +12,7 @@ bootstrap = Bootstrap5(app)
 
 database = sqlite3.connect("database.db", check_same_thread=False)
 cursor = database.cursor()
-cursor.execute("CREATE TABLE IF NOT EXISTS rooms (roomid TEXT PRIMARY KEY, spotify_id TEXT, playlist_name TEXT)")
+cursor.execute("CREATE TABLE IF NOT EXISTS rooms (roomid TEXT PRIMARY KEY, spotify_id TEXT, playlist_name TEXT, spotify_URL TEXT)")
 
 @app.route("/", methods=['GET', 'POST'])
 def main():
@@ -33,40 +32,54 @@ def create_playlist():
     playlistName = request.form.get('roomName')
     if not playlistName:
         return redirect(url_for('main'))
-    playlistID = "test"
+
-    # check if the room id already exists
     roomid = randint(10000000, 99999999)
     while cursor.execute("SELECT * FROM rooms WHERE roomid = ?", (roomid,)).fetchone():
         roomid = randint(10000000, 99999999)
-    cursor.execute("INSERT INTO rooms (roomid, spotify_id, playlist_name) VALUES (?, ?, ?)", (roomid, playlistID, playlistName))
+
-    database.commit()
+    try:
-    qrcode = generateQRCode("http://localhost:3000/search/" + str(roomid))
+        data = requests.get((os.getenv("n8n_webhook_create_playlist") + "/" + str(roomid) + "/" + playlistName))
-    print(qrcode)
+        playlistID = data.json()['playlistID']
-    return render_template("create.html", response="Playlist created successfully", comment="Enjoy the night \U0001f57a (and share this QRCode with your friends)", image=qrcode, type="success", roomid=roomid)
+        spotifyURL = data.json()['spotifyURL']
+        print(playlistID)
+        cursor.execute("INSERT INTO rooms (roomid, spotify_id, playlist_name, spotify_URL) VALUES (?, ?, ?, ?)",
+                       (roomid, playlistID, playlistName, spotifyURL))
+        database.commit()
+        qrcode = generateQRCode("http://localhost:3000/search/" + str(roomid))
+        return render_template("create.html", response="Playlist created successfully",
+                               comment="Enjoy the night \U0001f57a (and share this QRCode with your friends)",
+                               image=qrcode, type="success", roomid=roomid)
+
+    except requests.exceptions.RequestException as e:
+        return render_template("create.html", response='Request failed', comment=e, type="error")
 
 @app.route('/search/<string:roomid>', methods=['GET', 'POST'])
 def main_app(roomid):
     if len(roomid) != 8 or not cursor.execute("SELECT * FROM rooms WHERE roomid = ?", (roomid,)).fetchone():
         return main()
     playlistName = cursor.execute("SELECT playlist_name FROM rooms WHERE roomid = ?", (roomid,)).fetchone()[0]
+    playlistID = cursor.execute("SELECT spotify_id FROM rooms WHERE roomid = ?", (roomid,)).fetchone()[0]
+    spotifyURL = cursor.execute("SELECT spotify_URL FROM rooms WHERE roomid = ?", (roomid,)).fetchone()[0]
     # handle the POST request
     if request.method == 'POST':
         search = request.form.get('search')
         result = searchSpotify(search)
-        return render_template("found.html", query=search, tracks=result, roomid=roomid, playlistName=playlistName)
+        return render_template("found.html", query=search, tracks=result, roomid=roomid, playlistName=playlistName, playlistID=playlistID, spotifyURL=spotifyURL)
 
     # otherwise handle the GET request
-    return render_template("search.html", roomid=roomid, playlistName=playlistName)
+    return render_template("search.html", roomid=roomid, playlistName=playlistName, spotifyURL=spotifyURL)
 
-@app.route('/add/<string:roomid>/<string:trackid>', methods=['GET'])
+@app.route('/add/<string:roomid>/<string:playlistID>/<string:trackid>', methods=['GET'])
-def add_to_playlist(roomid, trackid):
+def add_to_playlist(roomid, playlistID, trackid):
     print(roomid)
+    print(playlistID)
     print(trackid)
-    if not os.getenv("n8n_webhook"):
+    if not os.getenv("n8n_webhook_add_tracks"):
         return render_template("add.html", response="No n8n webhook provided", comment="Please provide a n8n webhook in the .env file", type="error", roomid=roomid)
     try:
-        data = requests.get(os.getenv("n8n_webhook") + "/" + roomid + "/" + trackid)
+        data = requests.get(os.getenv("n8n_webhook_add_tracks") + "/" + playlistID + "/" + trackid)
-        if data.json()['message'] == 'Workflow was started':
+        print(data.json)
+        if data.json()['status'] == 'success':
             return render_template("add.html", response="Track added to playlist successfully", comment="Enjoy the night \U0001f57a", type="success", roomid=roomid)
 
         else:
@@ -75,27 +88,8 @@ def add_to_playlist(roomid, trackid):
         return render_template("add.html", response='Request failed', comment=e, type="error", roomid=roomid)
 
 
-@app.route('/authenticate')
-def authentification():
-    sp_auth = create_spotify_oauth()
-    auth_url = sp_auth.get_authorize_url()
-    session["token_info"] = sp_auth.get_cached_token()
-    return redirect(auth_url)
-
-@app.route('/callback')
-def callback():
-    sp_oauth = create_spotify_oauth()
-    code = request.args.get('code')
-    token_info = sp_oauth.get_access_token(code)
-    session["TOKEN_INFO"] = token_info
-    return redirect(url_for('info'))
-
-@app.route("/info")
-def info():
-    return get_spotify_username()
-
 if __name__ == '__main__':
-    if not os.getenv("client_id") or not os.getenv("client_secret") or not os.getenv("n8n_webhook"):
+    if not os.getenv("client_id") or not os.getenv("client_secret") or not os.getenv("n8n_webhook_add_tracks") or not os.getenv("n8n_webhook_create_playlist"):
         print("Please provide client_id, client_secret and n8n_webhook in the .env file")
         exit(1)
     app.secret_key = 'super secret key'

templates/add.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Fête de la musique</title>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        {{ bootstrap.load_css() }}
+    </head>
+    <body>
+        <div>
+                <div>
+                    <script>
+                        Swal.fire({
+                            title:"{{ response }}",
+                            text: "{{ comment }}",
+                            icon: "{{ type }}",
+                            confirmButtonText: "Add another track",
+                        }).then(function() {
+                                window.location = "/search/{{ roomid }}";
+                        })
+
+                    </script>
+                </div>
+        </div>
+    </body>
+</html>

templates/create.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Fête de la musique</title>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        {{ bootstrap.load_css() }}
+    </head>
+    <body>
+        <div>
+                <div>
+                    <script>
+                        if ("{{type}}" === "error") {
+                            Swal.fire({
+                                title: "{{ response }}",
+                                text: "{{ comment }}",
+                                icon: "{{ type }}",
+                                confirmButtonText: "Try again",
+                            }).then(function() {
+                                window.location = "/";
+                            })
+                        }
+                        Swal.fire({
+                            title:"{{ response }}",
+                            text: "{{ comment }}",
+                            icon: "{{ type }}",
+                            imageUrl: "data:image/png;base64, {{ image }}",
+                            confirmButtonText: "Add some music!",
+                        }).then(function() {
+                                window.location = "/search/{{ roomid }}";
+                        })
+                    </script>
+                </div>
+        </div>
+    </body>

templates/found.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Results</title>
+    {{ bootstrap.load_css() }}
+
+</head>
+<body>
+    <div class="container text-center">
+        <h2>Welcome</h2>
+        <p>Choose the music that will play tonight.</p>
+        <p>Info: You're in room: <b>{{ roomid }} </b>, the playlist is called: <b>{{ playlistName }} </b></p>
+        <form action="{{spotifyURL}}">
+            <button class="btn btn-success">Open in Spotify</button>
+        </form>
+        <form method="POST">
+            <div class="form-group">
+            <div class="form-inline text-center">
+                <label>Enter here the music that you want:</label>
+                <label>
+                    <input type="text" name="search" class="form-control" />
+                </label>
+            </div>
+            </div>
+
+            <div class="text-center">
+                <input type="submit" value="Submit" class="btn btn-primary">
+            </div>
+        </form>
+        <div class="alert alert-primary" role="alert">
+          Here's the music I found. If it doesn't match, try the query again in more detail.
+        </div>
+        <div class="container text-center">
+            <div class="row">
+                {% for track in tracks %}
+                <div class="col">
+                    <div class="card" style="width: 21rem;">
+                      <img class="card-img-top" src="{{ track[4] }}" alt="Card image cap">
+                      <div class="card-body">
+                        <h5 class="card-title"> {{ track[0] }} </h5>
+                        <p class="card-text">{{ track[1] }} - {{ track[2] }}</p>
+                          <audio controls><source src="{{ track[3] }}"></audio>
+                          <form method="GET" action="/add/{{roomid}}/{{playlistID}}/{{track[5]}}">
+                            <input type="hidden" name="track" value="{{ track[5] }}">
+                            <input type="submit" value="Add to the playlist" class="btn btn-primary">
+                          </form>
+                      </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+
+    </div>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Fête de la musique</title>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        {{ bootstrap.load_css() }}
+    </head>
+    <body>
+        <div class="container">
+            <h1>Make this playlist</h1>
+            <p>You too, choose the music that will play tonight.</p>
+            <div class="row">
+                <div class="col-sm">
+                    <h2>Join a room</h2>
+                    <form method="POST" >
+                        <div class="form-group">
+                            <label for="roomID">Enter here the room id:</label>
+                            <input type="text" class="form-control" name="roomID" placeholder="00000000" maxlength="8" minlength="8" />
+                            <small id="roomIDHelp" class="form-text text-muted">If you don't have a room id, you can create one.</small>
+                        </div>
+                        <button type="submit" class="btn btn-primary">Join</button>
+                    </form>
+                </div>
+                <div class="col-sm">
+                    <h2>Create a room</h2>
+                    <form method="POST" action="/create">
+                        <div class="form-group">
+                            <label for="roomName">Enter here the room name:</label>
+                            <input type="text" class="form-control" name="roomName" placeholder="Room name" />
+                            <small id="roomNameHelp" class="form-text text-muted">This will be the playlist name</small>
+                        </div>
+                        <button type="submit" class="btn btn-success">Create (require a Spotify account)</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div class="sweetalert">
+            <script>
+                if ("{{ type }}" !== "") {
+                    if ("{{ type }}" === "success") {
+                        Swal.fire({
+                            title: "{{ response }}",
+                            text: "{{ comment }}",
+                            icon: "{{ type }}",
+                            confirmButtonText: "Let's get in!",
+                        }).then(function() {
+                            window.location = "/search/{{ roomid }}";
+                        })
+                    } else {
+                        Swal.fire({
+                            title: "{{ response }}",
+                            text: "{{ comment }}",
+                            icon: "{{ type }}",
+                            confirmButtonText: "Try again",
+                        }).then(function() {
+                            window.location = "/";
+                        })
+                    }
+                }
+            </script>
+        </div>
+    </body>
+</html>

templates/search.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Fête de la musique</title>
+    {{ bootstrap.load_css() }}
+</head>
+<body>
+    <div class="container text-center">
+        <h2>Welcome</h2>
+        <p>Choose the music that will play tonight.</p>
+        <p>Info: You're in room: <b>{{ roomid }} </b>, the playlist is called: <b>{{ playlistName }} </b></p>
+        <form action="{{spotifyURL}}">
+            <button class="btn btn-success">Open in Spotify</button>
+        </form>
+        <form method="POST">
+            <div class="form-group">
+            <div class="form-inline text-center">
+                <label>Enter here the music that you want:</label>
+                <label>
+                    <input type="text" name="search" class="form-control" />
+                </label>
+            </div>
+            </div>
+
+            <div class="text-center">
+                <input type="submit" value="Submit" class="btn btn-primary">
+            </div>
+        </form>
+    </div>
+</body>
+</html>

utils/spotifyAPI.py

@@ -19,24 +19,4 @@ def searchSpotify(spotifySearch, limit=10):
         trackImage = results['tracks']['items'][i]['album']['images'][0]['url']
         trackID = results['tracks']['items'][i]['uri']
         tracks.append([trackName, trackArtist, trackAlbum, trackPreview, trackImage, trackID])
-    return tracks
+    return tracks
-
-
-def createPlaylist(playlistName):
-    #TODO: Implement this function
-    pass
-
-def create_spotify_oauth():
-    """
-    This function creates a Spotify OAuth object
-    :return: SpotifyOAuth object
-    """
-    return SpotifyOAuth(
-        client_id=os.getenv("client_id"),
-        client_secret=os.getenv("client_secret"),
-        redirect_uri=url_for('callback', _external=True),
-        scope='playlist-modify-public'
-    )
-
-def get_spotify_username():
-    return spotipy.Spotify(auth_manager=SpotifyOAuth(client_id=os.getenv("client_id"), client_secret=os.getenv("client_secret"), redirect_uri=url_for('callback', _external=True))).me()