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 632dc6e8..ddb71b73 100644 Binary files a/Web/static/img/audios_controls.png and b/Web/static/img/audios_controls.png differ 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") })