Music Player

Wervice · Jul 22, 2023 · 5abe229 · 5abe229
1 parent 3591a17
commit 5abe229
Show file tree

Hide file tree

Showing 6 changed files with 326 additions and 8 deletions.
diff --git a/__main__.py b/__main__.py
@@ -511,14 +511,19 @@ def load_file(filename):
         username = json_array[request.remote_addr]
         if not validate_access_permissions(filename=filename):
             if not filename in enced_file_array:
-                return send_file(
-                    io.BytesIO(open("users/"+username+"/" +
-                            secure_filename(filename), 'rb').read()),
-                    mimetype=str(mime.guess_type(
-                        "users/"+username+"/"+secure_filename(filename))),
-                        as_attachment=True,
-                        download_name=filename
-                )
+                music_extensions = ["mp3", "wav", "m4a"]
+                if not filename.split(".")[1] in music_extensions:
+                    return send_file(
+                        io.BytesIO(open("users/"+username+"/" +
+                                secure_filename(filename), 'rb').read()),
+                        mimetype=str(mime.guess_type(
+                            "users/"+username+"/"+secure_filename(filename))),
+                            as_attachment=True,
+                            download_name=filename
+                    )
+                else:
+                    b64_data = "data:audio/"+filename.split(".")[1]+";base64,"+str(base64.b64encode(open("users/"+json_array[request.remote_addr]+"/"+filename, "rb").read())).replace("b'", "").replace("'","")
+                    return render_template("music_player.html", filename = filename, song_in_b64 = b64_data)
             else:
                 return "", 901
         else:

diff --git a/asset/musicplayer.css b/asset/musicplayer.css
@@ -0,0 +1,137 @@
+::placeholder {
+    color: var(--foreground-color);
+}
+
+::-webkit-scrollbar {
+    display: none;
+}
+
+@font-face {
+    font-family: "Instrument Sans";
+    src: url("InstrumentSans-Regular.ttf");
+}
+
+@font-face {
+    font-family: "Instrument Sans Bold";
+    src: url("InstrumentSans-Bold.ttf");
+}
+
+@font-face {
+    font-family: "Instrument Sans Italic";
+    src: url("InstrumentSans-Italic.ttf");
+}
+
+@keyframes fall-down {
+    0% {
+        opacity: 0%;
+        height: 0px;
+    }
+}
+
+::selection {
+    background-color: transparent;
+}
+
+*.selectable::selection {
+    background-color: var(--accent-color);
+}
+
+*:focus {
+    outline: none;
+}
+
+* {
+    cursor: default;
+}
+
+/*
+-- Login Box --
+Width: 33vw
+Padding: 40px;
+Height: 100vh - 80
+Margin-Top: 40px;
+*/
+
+html {
+    height: 100%;
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--foreground-color);
+    font-family: "Instrument Sans", sans-serif;
+    margin: 0px;
+    height: 100%;
+}
+
+#lumos_title {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    opacity: 0.3;
+}
+
+#player_box {
+    --width: 320px;
+    --height: 400px;
+    --pading: 20px;
+    width: var(--width);
+    height: var(--height);
+    padding: var(--pading);
+    position: fixed;
+    top: calc(50vh - (var(--height) + var(--pading)) / 2);
+    left: calc(50vw - (var(--width) + var(--pading)) / 2);
+    background-color: var(--grey-1);
+    border-radius: 15px;
+    box-shadow: 0px 1px 0px 0px #A0A0A0 inset, 0px 5px 15px 0px rgba(0, 0, 0, 0.50);
+}
+
+#player_box img {
+    filter: 0px 5px 15px 0px rgba(0, 0, 0, 0.50);
+}
+
+#song_title {
+    font-size: large;
+    max-width: 200px;
+    margin: 10px;
+}
+
+#play_button {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    font-size: 16px;
+    margin-top: calc(25% - 10px);
+}
+
+#play_button img {
+    width: 20px;
+    padding-top: 2.5px;
+}
+
+@keyframes pulse {
+    0% {}
+    50% {filter: brightness(1.4);}
+    100% {}
+}
+
+.pulse {
+    animation-name: pulse;
+    animation-duration: 0.5s;
+    animation-iteration-count: infinite;
+}
+
+#scale_bg {
+    border-radius: 2px;
+    background-color: #efefef;
+    width: 200px;
+    height: 10px;
+    box-shadow: 0px 1px 0px 0px #A0A0A0 inset, 0px 5px 15px 0px rgba(0, 0, 0, 0.50);
+}
+
+#scale_fg {
+    border-radius: 2px;
+    background-color: var(--accent-color);
+    height: 10px;
+    width: 0px;
+}
diff --git a/asset/pause_button.svg b/asset/pause_button.svg
diff --git a/asset/play_button.png b/asset/play_button.png
diff --git a/asset/play_button.svg b/asset/play_button.svg
diff --git a/templates/music_player.html b/templates/music_player.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lumos</title>
+    <link rel="stylesheet" href="/asset/musicplayer.css">
+    <meta http-equiv="cache-control" content="no-cache">
+    <link rel="stylesheet" href="/asset/themeoverride.css">
+    <link rel="stylesheet" href="/asset/lui.css">
+    <script>
+        play_toggle = true;
+        window.onload = function () {
+            song_duration = document.getElementById("player").duration
+            document.getElementById("play_button").onclick = function () {
+                if (play_toggle) {
+                    document.getElementById("player").play()
+                    document.getElementById("play_button").innerHTML = "<img src=/asset/pause_button.svg>"
+                    document.getElementById("play_button").classList.add("pulse")
+                    upd = setInterval(() => {
+                        song_duration_percent = Math.floor((document.getElementById("player").currentTime / song_duration)*100) / 100
+                        document.getElementById("scale_fg").style.width = ((song_duration_percent*200))+"px"
+                        if (song_duration_percent <= 0 && document.getElementById("player").currentTime > 3) {
+                            document.getElementById("player").pause()
+                            document.getElementById("play_button").innerHTML = "<img src=/asset/play_button.svg>"
+                            document.getElementById("play_button").classList.remove("pulse")
+                            clearInterval(upd)
+                            document.getElementById("player").currentTime = 0
+                        }
+                    }, 100);
+                }
+                else {
+                    document.getElementById("player").pause()
+                    document.getElementById("play_button").innerHTML = "<img src=/asset/play_button.svg>"
+                    document.getElementById("play_button").classList.remove("pulse")
+                    clearInterval(upd)
+                }
+                play_toggle = !play_toggle
+
+            }
+        }
+    </script>
+</head>
+
+<body>
+    <span id="lumos_title">Lumos</span>
+    <div id="player_box">
+        <div align="center">
+            <h2>Music</h2><br>
+            <img src="/asset/mime_video.svg" alt="Music" width="100">
+            <br><br>
+            <span id="song_title"> {{ filename }} </span><br>
+            <button id="play_button"><img src=/asset/play_button.svg></button>
+            <audio src="{{ song_in_b64 }}" id="player" hidden></audio>
+            <br><br>
+            <div id="scale_bg" align="left">
+                <div id="scale_fg"></div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>