add audio download button, simplify css

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;

Web/Presenters/templates/Audio/player.xml

@@ -28,7 +28,7 @@
 
             <div class="volume" style="display: flex; flex-direction: column;width:14%;">
                 <span class="nobold {if !$hideButtons}hideOnHover{/if}" data-unformatted="{$audio->getLength()}" style="text-align: center;margin-top: 12px;">{$audio->getFormattedLength()}</span>
-                <div class="buttons" style="margin-top: 8px;">
+                <div class="buttons">
                     {php $hasAudio = isset($thisUser) && $audio->isInLibraryOf($thisUser)}
 
                     {if !$hideButtons}
@@ -36,6 +36,7 @@
                         <div class="add-icon musicIcon hovermeicon" data-id="{$audio->getId()}" n:if="isset($thisUser) && !$hasAudio && !$isWithdrawn" ></div>
                         <div class="remove-icon-group musicIcon" data-id="{$audio->getId()}" data-club="{$club->getId()}" n:if="isset($thisUser) && isset($club) && $club->canBeModifiedBy($thisUser)" ></div>
                         <div class="add-icon-group musicIcon hidden" data-id="{$audio->getId()}" n:if="isset($thisUser) && !$isWithdrawn" ></div>
+                        <a class="download-icon musicIcon" n:if='isset($thisUser) && !$isWithdrawn && OPENVK_ROOT_CONF["openvk"]["preferences"]["music"]["exposeOriginalURLs"]' href="{$audio->getOriginalURL()}" download="{$audio->getDownloadName()}"></a>
                         <div class="edit-icon musicIcon" data-lyrics="{$audio->getLyrics()}" data-title="{$audio->getTitle()}" data-performer="{$audio->getPerformer()}" data-explicit="{(int)$audio->isExplicit()}" data-searchable="{(int)!$audio->isUnlisted()}" n:if="isset($thisUser) && $editable && !$isWithdrawn" ></div>
                         <div class="report-icon musicIcon" data-id="{$audio->getId()}" n:if="isset($thisUser) && !$editable && !$isWithdrawn" ></div>
                     {/if}

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;

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")
 })