From 933c4ee45a882da22cf74a356d377612d66396c6 Mon Sep 17 00:00:00 2001 From: mrilyew <99399973+mrilyew@users.noreply.github.com> Date: Mon, 21 Oct 2024 18:00:04 +0300 Subject: [PATCH] add audio download button, simplify css --- Web/Models/Entities/Audio.php | 5 ++++ Web/Presenters/templates/Audio/player.xml | 3 ++- Web/static/css/audios.css | 28 +++++++++++++--------- Web/static/img/audios_controls.png | Bin 4128 -> 4259 bytes Web/static/js/al_music.js | 7 ++++-- 5 files changed, 29 insertions(+), 14 deletions(-) diff --git a/Web/Models/Entities/Audio.php b/Web/Models/Entities/Audio.php index 6be207dd..3b998f32 100644 --- a/Web/Models/Entities/Audio.php +++ b/Web/Models/Entities/Audio.php @@ -152,6 +152,11 @@ class Audio extends Media return $this->getPerformer() . " — " . $this->getTitle(); } + function getDownloadName(): string + { + return preg_replace('/[\\/:*?"<>|]/', '_', str_replace(' ', '_', $this->getName())); + } + function getGenre(): ?string { return $this->getRecord()->genre; diff --git a/Web/Presenters/templates/Audio/player.xml b/Web/Presenters/templates/Audio/player.xml index 28eb00b7..f235dc93 100644 --- a/Web/Presenters/templates/Audio/player.xml +++ b/Web/Presenters/templates/Audio/player.xml @@ -28,7 +28,7 @@
{$audio->getFormattedLength()} -
+
{php $hasAudio = isset($thisUser) && $audio->isInLibraryOf($thisUser)} {if !$hideButtons} @@ -36,6 +36,7 @@
+
{/if} diff --git a/Web/static/css/audios.css b/Web/static/css/audios.css index 45c131df..6a602e51 100644 --- a/Web/static/css/audios.css +++ b/Web/static/css/audios.css @@ -273,6 +273,10 @@ background-position: -152px -51px; } +.audioEntry.nowPlaying .buttons .musicIcon.download-icon { + background-position: -151px -67px; +} + .audioEntry.nowPlaying .buttons .musicIcon.add-icon { background-position: -94px -52px; } @@ -381,7 +385,7 @@ } .audioEntry:hover .buttons { - display: block; + display: flex; } .audioEntry:hover .volume .hideOnHover { @@ -390,11 +394,16 @@ .audioEntry .buttons { display: none; + flex-direction: row-reverse; + gap: 5px; + align-items: center; + justify-content: flex-start; width: 62px; height: 20px; position: absolute; right: 3%; top: 2px; + margin-top: 7px; /* чтоб избежать заедания во время ховера кнопки добавления */ clip-path: inset(0 0 0 0); } @@ -403,18 +412,21 @@ width: 11px; height: 11px; float: right; - margin-right: 4px; - margin-top: 3px; background-position: -137px -51px; } +.audioEntry .buttons .download-icon { + width: 11px; + height: 11px; + float: right; + background-position: -136px -67px; +} + .audioEntry .buttons .add-icon { width: 11px; height: 11px; float: right; background-position: -80px -52px; - margin-top: 3px; - margin-left: 2px; } .audioEntry .buttons .add-icon-group { @@ -422,7 +434,6 @@ height: 11px; float: right; background-position: -94px -52px; - margin-top: 3px; transition: margin-right 0.1s ease-out, opacity 0.1s ease-out; } @@ -431,8 +442,6 @@ height: 11px; float: right; background-position: -50px -67px; - margin-top: 3px; - margin-right: 3px; } .add-icon-noaction { @@ -446,16 +455,13 @@ } .audioEntry .buttons .remove-icon { - margin-top: 3px; width: 11px; height: 11px; - margin-left: 2px; float: right; background-position: -108px -52px; } .audioEntry .buttons .remove-icon-group { - margin-top: 3px; width: 13px; height: 11px; float: right; diff --git a/Web/static/img/audios_controls.png b/Web/static/img/audios_controls.png index 632dc6e8c7d999eb31dbb76988697afa4c6cd02c..ddb71b730b8e12f7ee3e23c8640e2f8568d69a83 100644 GIT binary patch delta 4213 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 LNkvXXu0mjfk4O`) delta 4081 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 diff --git a/Web/static/js/al_music.js b/Web/static/js/al_music.js index 33fb20b0..c495dffb 100644 --- a/Web/static/js/al_music.js +++ b/Web/static/js/al_music.js @@ -353,6 +353,10 @@ class bigPlayer { }) u(document).on("keyup", (e) => { + if(document.activeElement.closest('.page_header')) { + return + } + if([87, 65, 83, 68, 82, 77].includes(e.keyCode)) { if(document.querySelector(".ovk-diag-cont") != null) return @@ -652,7 +656,6 @@ document.addEventListener("DOMContentLoaded", function() { $(document).on("mouseover mouseleave", `.audioEntry .mediaInfo`, (e) => { const info = e.currentTarget.closest(".mediaInfo") - const overfl = info.querySelector(".info") if(e.originalEvent.type == "mouseleave" || e.originalEvent.type == "mouseout") { info.classList.add("noOverflow") @@ -981,7 +984,7 @@ $(document).on("click", ".musicIcon.edit-icon", (e) => { }) $(document).on("click", ".title.withLyrics", (e) => { - let parent = e.currentTarget.closest(".audioEmbed") + const parent = e.currentTarget.closest(".audioEmbed") parent.querySelector(".lyrics").classList.toggle("showed") })