audios: a bit changes

Web/Presenters/AudioPresenter.php

@@ -142,7 +142,13 @@ final class AudioPresenter extends OpenVKPresenter
         $this->assertUserLoggedIn();
 
         $group = NULL;
+        $playlist = NULL;
         $isAjax = $this->postParam("ajax", false) == 1;
+
+        if(!is_null($this->queryParam("gid")) && !is_null($this->queryParam("playlist"))) {
+            exit('ты тупой еблан');
+        }
+
         if(!is_null($this->queryParam("gid"))) {
             $gid   = (int) $this->queryParam("gid");
             $group = (new Clubs)->get($gid);
@@ -153,6 +159,19 @@ final class AudioPresenter extends OpenVKPresenter
                 $this->flashFail("err", tr("forbidden"), tr("not_enough_permissions_comment"), null, $isAjax);
         }
 
+        if(!is_null($this->queryParam("playlist"))) {
+            $playlist_id = (int)$this->queryParam("playlist");
+            $playlist = (new Audios)->getPlaylist($playlist_id);
+            if(!$playlist || $playlist->isDeleted())
+                $this->flashFail("err", tr("forbidden"), tr("not_enough_permissions_comment"), null, $isAjax);
+
+            if(!$playlist->canBeModifiedBy($this->user->identity))
+                $this->flashFail("err", tr("forbidden"), tr("not_enough_permissions_comment"), null, $isAjax);
+        
+            $this->template->playlist = $playlist;
+            $this->template->owner = $playlist->getOwner();
+        }
+
         $this->template->group = $group;
 
         if($_SERVER["REQUEST_METHOD"] !== "POST")
@@ -196,6 +215,8 @@ final class AudioPresenter extends OpenVKPresenter
         $lyrics    = $this->postParam("lyrics");
         $genre     = empty($this->postParam("genre")) ? "Other" : $this->postParam("genre");
         $nsfw      = ($this->postParam("explicit") ?? "off") === "on";
+        $is_unlisted = ($this->postParam("unlisted") ?? "off") === "on";
+
         if(empty($performer) || empty($name) || iconv_strlen($performer . $name) > 128) # FQN of audio must not be more than 128 chars
             $this->flashFail("err", tr("error"), tr("error_insufficient_info"), null, $isAjax);
 
@@ -206,6 +227,7 @@ final class AudioPresenter extends OpenVKPresenter
         $audio->setLyrics(empty($lyrics) ? NULL : $lyrics);
         $audio->setGenre($genre);
         $audio->setExplicit($nsfw);
+        $audio->setUnlisted($is_unlisted);
 
         try {
             $audio->setFile($upload);
@@ -215,13 +237,18 @@ final class AudioPresenter extends OpenVKPresenter
         } catch(\RuntimeException $ex) {
             $this->flashFail("err", tr("error"), tr("ffmpeg_timeout"), null, $isAjax);
         } catch(\BadMethodCallException $ex) {
-            $this->flashFail("err", tr("error"), "Загрузка аудио под Linux на данный момент не реализована. Следите за обновлениями: <a href='https://github.com/openvk/openvk/pull/512/commits'>https://github.com/openvk/openvk/pull/512/commits</a>", null, $isAjax);
+            $this->flashFail("err", tr("error"), "хз", null, $isAjax);
         } catch(\Exception $ex) {
             $this->flashFail("err", tr("error"), tr("ffmpeg_not_installed"), null, $isAjax);
         }
 
         $audio->save();
+
+        if($playlist) {
+            $playlist->add($audio);
+        } else {
             $audio->add($group ?? $this->user->identity);
+        }
 
         if(!$isAjax)
             $this->redirect(is_null($group) ? "/audios" . $this->user->id : "/audios-" . $group->getId());
@@ -233,8 +260,8 @@ final class AudioPresenter extends OpenVKPresenter
             else
                 $redirectLink .= $this->user->id;
 
-            $pagesCount = (int)ceil((new Audios)->getCollectionSizeByEntityId(isset($group) ? $group->getRealId() : $this->user->id) / 10);
+            if($playlist)
-            $redirectLink .= "?p=".$pagesCount;
+                $redirectLink = "/playlist" . $playlist->getPrettyId();
             
             $this->returnJson([
                 "success" => true,

Web/Presenters/SearchPresenter.php

@@ -74,7 +74,7 @@ final class SearchPresenter extends OpenVKPresenter
                     
                     break;
                 case 'only_performers':
-                    if((int) $param_value != 1 || $param_value != 'on') continue;
+                    if((int) $param_value == 1 || $param_value == 'on')
                         $parameters['only_performers'] = true;
 
                     break;

Web/Presenters/templates/Audio/Playlist.xml

@@ -47,7 +47,8 @@
             {/if}
 
             <div class="profile_links" n:if="isset($thisUser)">
-                <a class="profile_link" href="/playlist{$playlist->getPrettyId()}/edit" n:if="$playlist->canBeModifiedBy($thisUser)">{_edit_playlist}</a>
+                <a class="profile_link" href="/player/upload?playlist={$playlist->getId()}" n:if="$canEdit">{_upload_audio}</a>
+                <a class="profile_link" href="/playlist{$playlist->getPrettyId()}/edit" n:if="$canEdit">{_edit_playlist}</a>
                 <a class="profile_link" id="bookmarkPlaylist" data-id="{$playlist->getId()}" n:if="!$isBookmarked">{_bookmark}</a>
                 <a class="profile_link" id="unbookmarkPlaylist" data-id="{$playlist->getId()}" n:if="$isBookmarked">{_unbookmark}</a>
             </div>

Web/Presenters/templates/Audio/Upload.xml

@@ -5,6 +5,7 @@
 {/block}
 
 {block header}
+    {if !$playlist}
         {if !is_null($group)}
             <a href="{$group->getURL()}">{$group->getCanonicalName()}</a>
             »
@@ -14,6 +15,13 @@
             »
             <a href="/audios{$thisUser->getId()}">{_audios}</a>
         {/if}
+    {else}
+        <a href="{$owner->getURL()}">{$owner->getCanonicalName()}</a>
+        »
+        <a href="/playlists{$ownerId}">{_playlists}</a>
+        »
+        <a href="/playlist{$playlist->getPrettyId()}">{_playlist}</a>
+    {/if}
 
     »
     {_upload_audio}
@@ -36,6 +44,7 @@
                         <input type="hidden" name="lyrics" />
                         <input type="hidden" name="genre" />
                         <input type="hidden" name="explicit" />
+                        <input type="hidden" name="unlisted" />
                         
                         <input type="hidden" name="hash" value="{$csrfToken}" />
                         <input id="audio_input" type="file" name="blob" accept="audio/*" style="display:none" />
@@ -49,14 +58,14 @@
             <div id="lastStep" style="display:none;">
                 <table cellspacing="7" cellpadding="0" border="0" align="center">
                     <tbody>
-                        <tr>
-                            <td width="120" valign="top"><span class="nobold">{_audio_name}:</span></td>
-                            <td><input type="text" name="name" autocomplete="off" maxlength="80" /></td>
-                        </tr>
                         <tr>
                             <td width="120" valign="top"><span class="nobold">{_performer}:</span></td>
                             <td><input name="performer" type="text" autocomplete="off" maxlength="80" /></td>
                         </tr>
+                        <tr>
+                            <td width="120" valign="top"><span class="nobold">{_audio_name}:</span></td>
+                            <td><input type="text" name="name" autocomplete="off" maxlength="80" /></td>
+                        </tr>
                         <tr>
                             <td width="120" valign="top"><span class="nobold">{_genre}:</span></td>
                             <td>
@@ -74,7 +83,8 @@
                         <tr>
                             <td width="120" valign="top"></td>
                             <td>
-                                <label><input type="checkbox" name="explicit">{_audios_explicit}</label>
+                                <label style='display:block'><input type="checkbox" name="explicit">{_audios_explicit}</label>
+                                <label><input type="checkbox" name="unlisted">{_audios_unlisted}</label>
                             </td>
                         </tr>
                         <tr>
@@ -101,7 +111,7 @@
             document.querySelector("#firstStep").style.display = "none"
             document.querySelector("#lastStep").style.display = "block"
             
-            let tags = await id3.fromFile(files[0]);
+            const tags = await id3.fromFile(files[0]);
             if(tags != null) {
                 console.log("ID" + tags.kind + " detected, setting values...");
                 
@@ -122,7 +132,12 @@
                         console.warn("Unknown genre: " + tags.genre);
                         document.querySelector("#lastStep select[name=genre]").value = "Other"
                     }
+                } else {
+                    document.querySelector("#lastStep select[name=genre]").value = "Other"
                 }
+
+                if(tags.comments != null)
+                    document.querySelector("#lastStep textarea[name=lyrics]").value = tags.comments
             } else {
                 document.querySelector("#lastStep input[name=name]").value = files[0].name
                 document.querySelector("#lastStep select[name=genre]").value = "Other"
@@ -147,12 +162,14 @@
             var genre_  = document.querySelector("#audio_upload input[name=genre]");
             var lyrics_ = document.querySelector("#audio_upload input[name=lyrics]");
             var explicit_ = document.querySelector("#audio_upload input[name=explicit]");
+            var unlisted_ = document.querySelector("#audio_upload input[name=unlisted]");
 
             name_.value = document.querySelector("#lastStep input[name=name]").value
             perf_.value = document.querySelector("#lastStep input[name=performer]").value
             genre_.value = document.querySelector("#lastStep select[name=genre]").value
             lyrics_.value = document.querySelector("#lastStep textarea[name=lyrics]").value
             explicit_.value = document.querySelector("#lastStep input[name=explicit]").checked ? "on" : "off"
+            unlisted_.value = document.querySelector("#lastStep input[name=unlisted]").checked ? "on" : "off"
 
             $("#audio_upload > form").trigger("submit");
         })

Web/Presenters/templates/Audio/bigplayer.xml

@@ -25,14 +25,14 @@
                 <div class="timer" style="float:right">
                     <span class="time">00:00</span>
                     <span>/</span>
-                    <span class="elapsedTime" style="cursor:pointer">-00:00</span>
+                    <span class="elapsedTime">-00:00</span>
                 </div>
             </div>
 
             <div class="track" style="margin-top: -2px;">
                 <div class="bigPlayerTip">00:00</div>
                 <div class="selectableTrack">
-                    <div style="width: 95%;position: relative;">&nbsp;
+                    <div id='bigPlayerLengthSliderWrapper'>&nbsp;
                         <div class="slider"></div>
                     </div>
                 </div>
@@ -41,7 +41,7 @@
 
         <div class="volumePanel">
             <div class="selectableTrack">
-                <div style="position: relative;width:72%">&nbsp;
+                <div id='bigPlayerVolumeSliderWrapper'>&nbsp;
                     <div class="slider"></div>
                 </div>
             </div>

Web/Presenters/templates/Audio/player.xml

@@ -11,7 +11,7 @@
             </div>
 
             <div class="status" style="margin-top: 12px;">
-                <div class="mediaInfo noOverflow" style="margin-bottom: -8px; cursor: pointer;display:flex;width: 85%;">
+                <div class="mediaInfo noOverflow">
                     <div class="info">
                         <strong class="performer">
                             <a href="/search?query=&section=audios&order=listens&only_performers=on&q={$audio->getPerformer()}">{$audio->getPerformer()}</a>
@@ -20,7 +20,9 @@
                         <span class="title {if !empty($audio->getLyrics())}withLyrics{/if}">{$audio->getTitle()}</span>
                     </div>
 
-                    <div class="explicitMark" n:if="$audio->isExplicit()"></div>
+                    <svg n:if="$audio->isExplicit()" class="explicitMark" xmlns="http://www.w3.org/2000/svg" height="11" viewBox="0 0 11 11" width="11">
+                        <path d="m1 2.506v5.988a1.5 1.5 0 0 0 1.491 1.506h6.019c.827 0 1.49-.674 1.49-1.506v-5.988a1.5 1.5 0 0 0 -1.491-1.506h-6.019c-.827 0-1.49.674-1.49 1.506zm4 2.494v-1h2v-1h-3v5h3v-1h-2v-1h2v-1zm-5-2.494a2.496 2.496 0 0 1 2.491-2.506h6.019a2.5 2.5 0 0 1 2.49 2.506v5.988a2.496 2.496 0 0 1 -2.491 2.506h-6.019a2.5 2.5 0 0 1 -2.49-2.506z" />
+                    </svg>
                 </div>
             </div>
 
@@ -33,7 +35,7 @@
                         <div class="remove-icon musicIcon" data-id="{$audio->getId()}" n:if="isset($thisUser) && $hasAudio" ></div>
                         <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" data-id="{$audio->getId()}" n:if="isset($thisUser) && !$isWithdrawn" ></div>
+                        <div class="add-icon-group musicIcon hidden" data-id="{$audio->getId()}" n:if="isset($thisUser) && !$isWithdrawn" ></div>
                         <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}
@@ -41,20 +43,20 @@
             </div>
         </div>
         <div class="subTracks">
-            <div style="width: 100%;">
+            <div class="lengthTrackWrapper">
-                <div class="track lengthTrack" style="margin-top: 3px;display:none">
+                <div class="track lengthTrack">
-                    <div class="selectableTrack" style="width: 100%;" n:attr="style => $isWithdrawn ? 'display: none;' : ''">
+                    <div class="selectableTrack" n:attr="style => $isWithdrawn ? 'display: none;' : ''">
-                        <div style="position: relative;width: calc(100% - 18px);">
+                        <div class="selectableTrackSlider">
                             <div class="slider"></div>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div style="width: 81px;margin-left: 16px;">
+            <div class="volumeTrackWrapper">
-                <div class="track volumeTrack" style="margin-top: 3px;display:none">
+                <div class="track volumeTrack">
-                    <div class="selectableTrack" style="width: 100%;" n:attr="style => $isWithdrawn ? 'display: none;' : ''">
+                    <div class="selectableTrack" n:attr="style => $isWithdrawn ? 'display: none;' : ''">
-                        <div style="position: relative;width: calc(100% - 18px);">
+                        <div class="selectableTrackSlider">
                             <div class="slider"></div>
                         </div>
                     </div>

Web/Presenters/templates/Audio/tabs.xml

@@ -30,7 +30,6 @@
                         <img src="{$fr->getAvatarURL()}" />
 
                         <div class="additionalInfo">
-                            {php $audioStatus = $fr->getCurrentAudioStatus()}
                             <span class="name noOverflow">{$fr->getCanonicalName()}</span>
                             <span class="desc">{$audioStatus ? $audioStatus->getName() : tr("audios_count", $fr->getAudiosCollectionSize())}</span>
                         </div>

Web/static/css/audios.css

@@ -8,21 +8,12 @@
     padding: 8px;
 }
 
-.overflowedName {
-    position: absolute;
-    z-index: 99;
-}
-
 .musicIcon {
     background-image: url('/assets/packages/static/openvk/img/audios_controls.png');
     background-repeat: no-repeat;
     cursor: pointer;
 }
 
-.musicIcon:hover {
-    filter: brightness(99%);
-}
-
 .musicIcon.pressed {
     filter: brightness(150%);
 }
@@ -177,6 +168,10 @@
     font-size: 10px;
 }
 
+.bigPlayer .paddingLayer .trackInfo .timer .elapsedTime {
+    cursor: pointer;
+}
+
 .bigPlayer .paddingLayer .trackInfo .trackName {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -194,6 +189,16 @@
     cursor: pointer;
 }
 
+.bigPlayer .paddingLayer .trackPanel .track .selectableTrack > div {
+    width: 95%;
+    position: relative;
+}
+
+.bigPlayer .paddingLayer .volumePanel .selectableTrack > div {
+    position: relative;
+    width:72%
+}
+
 .audioEmbed .track > .selectableTrack, .bigPlayer .selectableTrack {
     margin-top: 3px;
     width: calc(100% - 8px);
@@ -220,7 +225,7 @@
 
 .audioEntry.nowPlaying {
     background: #606060;
-    border: 1px solid #4f4f4f;
+    outline: 1px solid #4f4f4f;
     box-sizing: border-box;
 }
 
@@ -230,6 +235,7 @@
 
 .audioEntry.nowPlaying:hover {
     background: #4e4e4e !important;
+    border-radius: inherit !important;
 }
 
 .audioEntry.nowPlaying .performer a {
@@ -252,8 +258,28 @@
     color: white !important;
 }
 
-.audioEntry.nowPlaying .buttons .musicIcon, .audioEntry.nowPlaying .explicitMark {
+.audioEntry.nowPlaying .explicitMark path {
-    filter: brightness(187%) opacity(72%);
+    fill: #ffffff;
+}
+
+.audioEntry.nowPlaying .buttons .musicIcon.edit-icon {
+    background-position: -152px -51px;
+}
+
+.audioEntry.nowPlaying .buttons .musicIcon.add-icon {
+    background-position: -94px -52px;
+}
+
+.audioEntry.nowPlaying .buttons .musicIcon.report-icon {
+    background-position: -66px -67px;
+}
+
+.audioEntry.nowPlaying .buttons .musicIcon.remove-icon-group {
+    background-position: -122px -67px;
+}
+
+.audioEntry.nowPlaying .buttons .musicIcon.remove-icon {
+    background-position: -108px -67px;
 }
 
 .audioEntry {
@@ -270,12 +296,16 @@
 }
 
 .audioEntry .subTracks {
-    display: flex;
+    display: none;
     padding-bottom: 5px;
     padding-left: 8px;
     padding-right: 12px;
 }
 
+.audioEntry .subTracks.shown {
+    display: flex;
+}
+
 .audioEntry .playerButton .playIcon {
     background-image: url('/assets/packages/static/openvk/img/play_buttons.gif');
     cursor: pointer;
@@ -296,16 +326,45 @@
     height: 23px;
 }
 
+.audioEntry .status .mediaInfo {
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+}
+
+.overflowedName {
+    position: absolute;
+    z-index: 99;
+    width: 85% !important;
+}
+
 .audioEntry .status strong {
     color: #4C4C4C;
 }
 
 .audioEmbed .track {
-    display: none;
+    padding: 0px 0;
-    padding: 4px 0;
 }
 
-.audioEmbed .track, .audioEmbed.playing .track {
+.audioEmbed .track .selectableTrack {
+    width: 100%;
+}
+
+.audioEmbed .track .selectableTrack .selectableTrackSlider {
+    position: relative;
+    width: calc(100% - 18px);
+}
+
+.audioEmbed .subTracks .lengthTrackWrapper {
+    width: 100%;
+}
+
+.audioEmbed .subTracks .volumeTrackWrapper {
+    width: 81px;
+    margin-left: 16px;
+}
+
+.audioEmbed.playing .track {
     display: unset;
 }
 
@@ -364,7 +423,7 @@
     width: 12px;
     height: 11px;
     float: right;
-    background-position: -67px -51px;
+    background-position: -50px -67px;
     margin-top: 3px;
     margin-right: 3px;
 }
@@ -394,8 +453,6 @@
     height: 11px;
     float: right;
     background-position: -122px -52px;
-    margin-left: 3px;
-    margin-right: 3px;
 }
 
 .audioEmbed .lyrics {
@@ -416,12 +473,12 @@
     text-decoration: underline;
 }
 
-.audioEmbed.withdrawn .status > *, .audioEmbed.processed .status > *, .audioEmbed.withdrawn .playerButton > *, .audioEmbed.processed .playerButton > * {
+.audioEmbed.withdrawn .status > *, .audioEmbed.processed .playerButton > *, .audioEmbed.withdrawn .playerButton > * {
     pointer-events: none;
 }
 
 .audioEmbed.withdrawn {
-    filter: opacity(0.8);
+    opacity: 0.8;
 }
 
 .playlistCover img {
@@ -535,6 +592,11 @@
     background-repeat: no-repeat;
 }
 
+.explicitMark path {
+    fill: #828a99;
+    fill-opacity: .7;
+}
+
 .audioStatus span {
     color: #2B587A;
 }

Web/static/js/al_music.js

@@ -747,24 +747,14 @@ function initPlayer(id, keys, url, length) {
             document.querySelector('link[rel="icon"], link[rel="shortcut icon"]').setAttribute("href", "/assets/packages/static/openvk/img/favicons/favicon24_playing.png")
         }
 
-        u('.subTracks .lengthTrack').nodes.forEach(el => {
+        u('.subTracks').nodes.forEach(el => {
-            if(el && (el.style.display == 'block' || el.style.display == '')) {
+            el.classList.remove('shown')
-                const audioEmbed = el.closest('.audioEmbed')
-                
-                if(audioEmbed.dataset && Number(audioEmbed.dataset.realid) == Number(playerObject.dataset.realid)) {
-                    return
-                }
-
-                el.style.display = 'none'
-                audioEmbed.querySelector('.volumeTrack').style.display = 'none'
-            }
         })
 
+        u(`#audioEmbed-${ id} .subTracks`).addClass('shown')
         if(!$(`#audioEmbed-${ id}`).hasClass("havePlayed")) {
             $(`#audioEmbed-${ id}`).addClass("havePlayed")
 
-            $(`#audioEmbed-${ id} .track`).toggle()
-
             $.post(`/audio${playerObject.dataset.realid}/listen`, {
                 hash: u("meta[name=csrf]").attr("value")
             });
@@ -772,7 +762,7 @@ function initPlayer(id, keys, url, length) {
     };
 
     const hideTracks = () => {
-        $(`#audioEmbed-${ id} .track`).toggle()
+        $(`#audioEmbed-${ id} .track`).removeClass('shown')
         $(`#audioEmbed-${ id}`).removeClass("havePlayed")
     }
 
@@ -810,7 +800,13 @@ function initPlayer(id, keys, url, length) {
         hideTracks()
     })
 
-    u(`#audioEmbed-${ id} .lengthTrack > div`).on("click", (e) => {
+    u(`#audioEmbed-${ id} .lengthTrack > div`).on("click mouseup mousemove", (e) => {
+        if(e.type == "mousemove") {
+            let buttonsPresseed = _bsdnUnwrapBitMask(e.buttons)
+            if(!buttonsPresseed[0])
+                return;
+        }
+
         let rect  = document.querySelector("#audioEmbed-" + id + " .selectableTrack").getBoundingClientRect();
         const width = e.clientX - rect.left;
         const time = Math.ceil((width * length) / (rect.right - rect.left));
@@ -830,7 +826,7 @@ function initPlayer(id, keys, url, length) {
         const width = e.clientX - rect.left;
         const volume = (width * 1) / (rect.right - rect.left);
 
-        audio.volume = volume;
+        audio.volume = Math.max(0, volume);
     });
 
     audio.volume = localStorage.volume ?? 0.75
@@ -963,10 +959,10 @@ $(document).on("click", ".musicIcon.edit-icon", (e) => {
 
     u(".ovk-diag-body #_fullyDeleteAudio").on("click", (e) => {
         u("body").removeClass("dimmed");
+        u(".ovk-diag-cont").remove();
         document.querySelector("html").style.overflowY = "scroll"
 
-        u(".ovk-diag-cont").remove();
+        MessageBox(tr('confirm'), tr('confirm_deleting_audio'), [tr('yes'), tr('no')], [() => {
-
             $.ajax({
                 type: "POST",
                 url: `/audio${id}/action?act=delete`,
@@ -980,6 +976,7 @@ $(document).on("click", ".musicIcon.edit-icon", (e) => {
                         fastError(response.flash.message)
                 }
             });
+        }, () => {Function.noop}])
     })
 })
 
@@ -992,7 +989,12 @@ $(document).on("click", ".title.withLyrics", (e) => {
 $(document).on("click", ".musicIcon.remove-icon", (e) => {
     e.stopImmediatePropagation()
 
-    let id = e.currentTarget.dataset.id
+    const id = e.currentTarget.dataset.id
+    if(e.altKey) {
+        const player = e.target.closest('.audioEmbed')
+        player.querySelector('.add-icon-group').click()
+        return
+    }
 
     let formdata = new FormData()
     formdata.append("hash", u("meta[name=csrf]").attr("value"))
@@ -1081,7 +1083,7 @@ $(document).on("click", ".musicIcon.add-icon-group", async (ev) => {
 
     window.openvk.writeableClubs.forEach(el => {
         document.querySelector("#addIconsWindow").insertAdjacentHTML("beforeend", `
-            <option value="${el.id}">${ovk_proc_strtr(el.name, 20)}</option>
+            <option value="${el.id}">${ovk_proc_strtr(escapeHtml(el.name), 50)}</option>
         `)
     })
 
@@ -1108,7 +1110,12 @@ $(document).on("click", ".musicIcon.add-icon-group", async (ev) => {
 })
 
 $(document).on("click", ".musicIcon.add-icon", (e) => {
-    let id = e.currentTarget.dataset.id
+    const id = e.currentTarget.dataset.id
+    if(e.altKey) {
+        const player = e.target.closest('.audioEmbed')
+        player.querySelector('.add-icon-group').click()
+        return
+    }
 
     let formdata = new FormData()
     formdata.append("hash", u("meta[name=csrf]").attr("value"))
@@ -1310,7 +1317,7 @@ $(document).on("click", "#_audioAttachment", (e) => {
     })
 })
 
-$(document).on("click", ".audioEmbed.processed", (e) => {
+$(document).on("click", ".audioEmbed.processed .playerButton", (e) => {
     MessageBox(tr("error"), tr("audio_embed_processing"), [tr("ok")], [Function.noop])
 })
 

Web/static/js/al_navigation.js

@@ -58,7 +58,7 @@ u(`#search_box input[type='search']`).on('input', async (e) => {
     const current_query = u(`#search_box input[type='search']`).nodes[0].value
     const section = u(`#search_box select[name='section']`).nodes[0].value
     let results = null
-    if(/*query.length < 2 || */query != current_query || ['users', 'groups', 'videos'].indexOf(section) == -1) {
+    if(/*query.length < 2 || */query != current_query || ['users', 'groups', 'videos', 'audios_playlists'].indexOf(section) == -1) {
         return
     }
 
@@ -74,6 +74,9 @@ u(`#search_box input[type='search']`).on('input', async (e) => {
         case 'videos':
             results = await fetch(`/method/video.search?auth_mechanism=roaming&q=${query}&count=10&sort=4&extended=1`)
             break
+        case 'audios_playlists':
+            results = await fetch(`/method/audio.searchAlbums?auth_mechanism=roaming&query=${query}&count=10`)
+            break
     }
 
     json_result = await results.json()
@@ -103,6 +106,13 @@ u(`#search_box input[type='search']`).on('input', async (e) => {
                 item['preview'] = item['photo_50']
             })
             break
+        case 'audios_playlists':
+            json_result['items'].forEach(item => {
+                item['name'] = item['title']
+                item['url'] = '/playlist' + item['owner_id'] + '_' + item['id']
+                item['preview'] = item['cover_url']
+            })
+            break
         case 'videos':
             const profiles = json_result['profiles']
             const groups = json_result['groups']
@@ -126,7 +136,6 @@ u(`#search_box input[type='search']`).on('input', async (e) => {
 
     u('#searchBoxFastTips').addClass('shown')
     u('#searchBoxFastTips').html('')
-    console.log(json_result)
     json_result.items.forEach(item => {
         u('#searchBoxFastTips').append(`
             <a href='${item['url']}'>

locales/ru.strings

@@ -836,6 +836,7 @@
 "my_playlists" = "Мои плейлисты";
 "playlists" = "Плейлисты";
 "audios_explicit" = "Содержит нецензурную лексику";
+"audios_unlisted" = "Скрыто из поиска";
 "withdrawn" = "Изъято";
 "deleted" = "Удалено";
 "owner" = "Владелец";
@@ -906,6 +907,7 @@
 "shuffle_tip" = "Перемешать";
 "mute_tip" = "Заглушить";
 "playlist_hide_from_search" = "Не показывать в поиске";
+"confirm_deleting_audio" = "Вы действительно хотите полностью удалить аудиозапись?";
 
 /* Notifications */