From 5abe229e04c9c525d9736b8d167fb51fcc1726a9 Mon Sep 17 00:00:00 2001 From: Wervice Date: Sat, 22 Jul 2023 21:56:36 +0200 Subject: [PATCH] Music Player --- __main__.py | 21 +++--- asset/musicplayer.css | 137 ++++++++++++++++++++++++++++++++++++ asset/pause_button.svg | 57 +++++++++++++++ asset/play_button.png | Bin 0 -> 296 bytes asset/play_button.svg | 54 ++++++++++++++ templates/music_player.html | 65 +++++++++++++++++ 6 files changed, 326 insertions(+), 8 deletions(-) create mode 100644 asset/musicplayer.css create mode 100644 asset/pause_button.svg create mode 100644 asset/play_button.png create mode 100644 asset/play_button.svg create mode 100644 templates/music_player.html diff --git a/__main__.py b/__main__.py index e7daef9..2e7557e 100644 --- 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 new file mode 100644 index 0000000..9b8eee9 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/asset/pause_button.svg b/asset/pause_button.svg new file mode 100644 index 0000000..0088c71 --- /dev/null +++ b/asset/pause_button.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + diff --git a/asset/play_button.png b/asset/play_button.png new file mode 100644 index 0000000000000000000000000000000000000000..9159f7417b163e650a31c2ea94aee86ab7132979 GIT binary patch literal 296 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F5he4R}c>anMprB-l zYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt)?UT^vI!dY4{Q^kYsGIQsEE zyUJb$&gloft0+{n8vNMBb%{B_lcPzw;h=!Zu606zuDlbzB;H^#JAG;W?@7 + + + + + + + + + diff --git a/templates/music_player.html b/templates/music_player.html new file mode 100644 index 0000000..844294a --- /dev/null +++ b/templates/music_player.html @@ -0,0 +1,65 @@ + + + + + + + + Lumos + + + + + + + + + Lumos +
+
+

Music


+ Music +

+ {{ filename }}
+ + +

+
+
+
+
+
+ + + \ No newline at end of file