mrege

Config/party.sql

@@ -12,3 +12,4 @@ CREATE TABLE IF NOT EXISTS spiel (spielname TEXT, Genre TEXT, Erscheinungsjahr T
 CREATE TABLE IF NOT EXISTS dateien (dateiID INTEGER PRIMARY KEY NOT NULL, dateiname TEXT, sessionID INTEGER);
 CREATE TABLE IF NOT EXISTS musikMetaDaten (songID INTEGER PRIMARY KEY Not NULL, artist TEXT, band TEXT, album TEXT, title TEXT, track TEXT, genre TEXT, composer TEXT, copyright TEXT, comment TEXT, releasedate TEXT, mp3_url TEXT, sessionID INTEGER, bildname TEXT);
 CREATE TABLE IF NOT EXISTS queue (songID INTEGER, sessionID INTEGER)
+CREATE TABLE IF NOT EXISTS messages (username TEXT, message TEXT, timestamp TEXT)

server.py

@@ -688,6 +688,16 @@ def server():
         log_server("called /chat")
         return render_template("chat.html")
 
+    @app.route("/music/<int:id>")
+    def get_music(id):
+        conn = sqlite3.connect("music.db")
+        cursor = conn.cursor()
+        cursor.execute("SELECT * FROM music WHERE id=?", (id,))
+        music = cursor.fetchone()
+        conn.close()
+        return send_file(music[1], attachment_filename=music[2], as_attachment=True)
+
+
     @app.errorhandler(404)
     def page_not_found(e):
         error_log("called non-existing page")

static/css/style.css

@@ -216,4 +216,30 @@ a {
             .timestamp {
               font-size: 12px;
               color: gray;
+            }
+
+
+            #player {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              height: 100vh;
+            }
+            .controls {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+            .controls button {
+              margin: 0 10px;
+            }
+
+            #send {
+              width: 80px;
+              display: inline-block;
+            }
+
+            #input {
+              width: calc(100% - 80px);
+              display: inline-block;
             }

templates/session.html

@@ -216,6 +216,31 @@
 		<div hidden class="tmplt_tab" id="_musik">
 			<center>
 			<h1>Musik</h1>
+			<div id="player">
+				<div class="controls">
+				  <button id="prev">Prev</button>
+				  <button id="play">Play</button>
+				  <button id="next">Next</button>
+				</div>
+			  </div>
+			  <script>
+				const player = new Howl({
+				  src: [`/music/${id}`],
+				  format: ["mp3"],
+				  onend: function() {
+					// play next track
+				  }
+				});
+				document.getElementById("play").addEventListener("click", function() {
+				  player.play();
+				});
+				document.getElementById("prev").addEventListener("click", function() {
+				  // play previous track
+				});
+				document.getElementById("next").addEventListener("click", function() {
+				  // play next track
+				});
+			  </script>
 		</center>
 		</div>
 		<div hidden class="tmplt_tab" id="_mate">
@@ -360,6 +385,7 @@
 	<script src="{{url_for('static', filename='js/control.js')}}"></script>
 	<script src="{{url_for('static', filename='js/chat.js')}}"></script>
 	<script src="{{url_for('static', filename='js/game.js')}}"></script>
+	<script src="https://cdn.jsdelivr.net/npm/howler@2.2.0/dist/howler.min.js"></script>
 </body>
 
 </html>