Merge pull request 'feat/room-id' (#2) from feat/room-id into main

Reviewed-on: #2

.env.example

@@ -1,3 +1,4 @@
 client_id=
 client_secret=
 n8n_webhook=
+enviroment=dev

.gitignore

@@ -267,3 +267,5 @@ cython_debug/
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
 
+
+database.db

.idea/dataSources.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="database.db" uuid="bc21304a-7893-4f0b-bc20-7e9bb19b7991">
+      <driver-ref>sqlite.xerial</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>org.sqlite.JDBC</jdbc-driver>
+      <jdbc-url>jdbc:sqlite:database.db</jdbc-url>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+  </component>
+</project>

.idea/sqldialects.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SqlDialectMappings">
+    <file url="file://$PROJECT_DIR$/main.py" dialect="GenericSQL" />
+    <file url="PROJECT" dialect="SQLite" />
+  </component>
+</project>

main.py

@@ -1,41 +1,99 @@
 import requests
 import os
-from dotenv import load_dotenv
+from flask import Flask, request, render_template, redirect, url_for
-from flask import Flask, request, render_template
 from flask_bootstrap import Bootstrap5
-
+from utils.spotifyAPI import searchSpotify
-from spotifySearch import searchSpotify
+from utils.generateQRCode import generateQRCode
-
+import sqlite3
+from random import randint
 
 app = Flask(__name__)
 bootstrap = Bootstrap5(app)
 
-@app.route('/', methods=['GET', 'POST'])
+database = sqlite3.connect("database.db", check_same_thread=False)
-def main_app():
+cursor = database.cursor()
+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():
+    if request.method == 'POST':
+        roomid = request.form.get('roomID')
+        if len(roomid) != 8:
+            return render_template("index.html", response="Invalid room id", comment="A room ID should be composed of number and have a lenght of 8 characters", type="error", roomid=roomid)
+        roomSearch = cursor.execute("SELECT * FROM rooms WHERE roomid = ?", (roomid,)).fetchone()
+        if roomSearch:
+            return render_template("index.html", response="We found your collaborative playlist", comment="It is a great news, click the button below to access it.", type="success", roomid=roomid)
+        else:
+            return render_template("index.html", response="We could not find your collaborative playlist", comment="Please check the room id and try again or create one.", type="error", roomid=roomid)
+    return render_template("index.html")
+
+@app.route('/create', methods=["GET", "POST"])
+def create_playlist():
+    playlistName = request.form.get('roomName')
+    if not playlistName:
+        return redirect(url_for('main'))
+
+    roomid = randint(10000000, 99999999)
+    while cursor.execute("SELECT * FROM rooms WHERE roomid = ?", (roomid,)).fetchone():
+        roomid = randint(10000000, 99999999)
+
+    try:
+        data = requests.get((os.getenv("n8n_webhook_create_playlist") + "/" + str(roomid) + "/" + playlistName))
+        playlistID = data.json()['playlistID']
+        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)
+        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("index.html")
+    return render_template("search.html", roomid=roomid, playlistName=playlistName, spotifyURL=spotifyURL)
 
-@app.route('/add/<string:trackid>', methods=['GET'])
+@app.route('/add/<string:roomid>/<string:playlistID>/<string:trackid>', methods=['GET'])
-def add_to_playlist(trackid):
+def add_to_playlist(roomid, playlistID, trackid):
-    if not os.getenv("n8n_webhook"):
+    print(roomid)
-        return render_template("add.html", response="No n8n webhook provided", comment="Please provide a n8n webhook in the .env file", type="error")
+    print(playlistID)
+    print(trackid)
+    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") + "/" + trackid)
+        data = requests.get(os.getenv("n8n_webhook_add_tracks") + "/" + playlistID + "/" + trackid)
-        if data.json()['message'] == 'Workflow was started':
+        print(data.json)
-            return render_template("add.html", response="Track added to playlist successfully", comment="Enjoy the night \U0001f57a", type="success")
+        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:
-            return render_template("add.html", response='Invalid response from server', comment=data.text, type="error")
+            return render_template("add.html", response='Invalid response from server', comment=data.text, type="error", roomid=roomid)
     except requests.exceptions.RequestException as e:
-        return render_template("add.html", response='Request failed', comment=e, type="error")
+        return render_template("add.html", response='Request failed', comment=e, type="error", roomid=roomid)
 
 
 if __name__ == '__main__':
-    # run app in debug mode on port 5000
+    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'
+    if os.getenv("enviroment") != "production":
         app.run(debug=True, port="3000", host="0.0.0.0")
+    else:
+        app.run(debug=False, port="3000", host="0.0.0.0")

templates/add.html

@@ -16,7 +16,7 @@
                             icon: "{{ type }}",
                             confirmButtonText: "Add another track",
                         }).then(function() {
-                                window.location = "/";
+                                window.location = "/search/{{ roomid }}";
                         })
 
                     </script>

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

@@ -8,6 +8,12 @@
 </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">
@@ -35,7 +41,7 @@
                         <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/{{track[5]}}">
+                          <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>

templates/index.html

@@ -1,28 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+    <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>
+    </head>
-<body>
+    <body>
         <div class="container">
-        <form method="POST">
+            <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">
-            <div class="form-inline text-center">
+                            <label for="roomID">Enter here the room id:</label>
-                <label>Enter here the music that you want:</label>
+                            <input type="text" class="form-control" name="roomID" placeholder="00000000" maxlength="8" minlength="8" />
-                <label>
+                            <small id="roomIDHelp" class="form-text text-muted">If you don't have a room id, you can create one.</small>
-                    <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>
+                        <button type="submit" class="btn btn-primary">Join</button>
                     </form>
-
-
                 </div>
-</body>
+                <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/generateQRCode.py

@@ -0,0 +1,18 @@
+import qrcode
+from io import BytesIO
+import base64
+def generateQRCode(url: str, img_name: str = 'QR_Code.png') -> str:
+    """
+    This function generates a QR code from a given URL and saves it as an image file
+    :param url: URL to generate QR code from
+    :param img_name: Name of the image file
+    :return: base64 encoded image
+    """
+    code = qrcode.QRCode(version=1, box_size=10, border=4)
+    code.add_data(url)
+    code.make(fit=True)
+    img = code.make_image(fill_color="black", back_color="white")
+    buffered = BytesIO()
+    img.save(buffered)
+    img_str = base64.b64encode(buffered.getvalue()).decode()
+    return img_str

utils/spotifyAPI.py

@@ -1,7 +1,8 @@
 import spotipy
-from spotipy.oauth2 import SpotifyClientCredentials
+from spotipy.oauth2 import SpotifyClientCredentials, SpotifyOAuth
 import os
 from dotenv import load_dotenv
+from flask import url_for
 
 load_dotenv()