From ac165c528a108af0ef798d7d8045f740eae354d4 Mon Sep 17 00:00:00 2001
From: lalka2018 <99399973+lalka2016@users.noreply.github.com>
Date: Wed, 18 Oct 2023 16:19:58 +0300
Subject: [PATCH] =?UTF-8?q?Add=20audios=20picker=20&=20move=20track=20in?=
 =?UTF-8?q?=20smal=20player=20=D0=B2=D0=BD=D0=B8=D0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 VKAPI/Handlers/Wall.php                       |  16 +++
 Web/Models/Entities/Playlist.php              |   4 +-
 Web/Presenters/AudioPresenter.php             |  52 +++----
 Web/Presenters/CommentPresenter.php           |  26 +++-
 Web/Presenters/WallPresenter.php              |  26 +++-
 Web/Presenters/templates/Audio/Playlist.xml   |  23 +++-
 .../templates/Audio/apiGetContext.xml         |   7 +
 Web/Presenters/templates/Audio/player.xml     |  30 ++--
 .../templates/components/textArea.xml         |  12 +-
 Web/static/css/audios.css                     |  48 ++++++-
 Web/static/css/main.css                       |  21 ++-
 Web/static/img/audio.png                      | Bin 0 -> 364 bytes
 Web/static/img/pause.jpg                      | Bin 948 -> 0 bytes
 Web/static/img/play.jpg                       | Bin 994 -> 0 bytes
 Web/static/js/al_music.js                     | 129 +++++++++++++++++-
 locales/en.strings                            |   2 +
 locales/ru.strings                            |   2 +
 17 files changed, 324 insertions(+), 74 deletions(-)
 create mode 100644 Web/Presenters/templates/Audio/apiGetContext.xml
 create mode 100644 Web/static/img/audio.png
 delete mode 100644 Web/static/img/pause.jpg
 delete mode 100644 Web/static/img/play.jpg

diff --git a/VKAPI/Handlers/Wall.php b/VKAPI/Handlers/Wall.php
index f188a0e3..693ca3cb 100644
--- a/VKAPI/Handlers/Wall.php
+++ b/VKAPI/Handlers/Wall.php
@@ -59,6 +59,8 @@ final class Wall extends VKAPIRequestHandler
                     $attachments[] = $attachment->getApiStructure();
                 } else if ($attachment instanceof \openvk\Web\Models\Entities\Note) {
                     $attachments[] = $attachment->toVkApiStruct();
+                } else if ($attachment instanceof \openvk\Web\Models\Entities\Audio) {
+                    $attachments[] = $attachment->toVkApiStruct($this->getUser());
                 } else if ($attachment instanceof \openvk\Web\Models\Entities\Post) {
                     $repostAttachments = [];
 
@@ -234,6 +236,8 @@ final class Wall extends VKAPIRequestHandler
                         $attachments[] = $attachment->getApiStructure();
                     } else if ($attachment instanceof \openvk\Web\Models\Entities\Note) {
                         $attachments[] = $attachment->toVkApiStruct();
+                    } else if ($attachment instanceof \openvk\Web\Models\Entities\Audio) {
+                        $attachments[] = $attachment->toVkApiStruct($this->getUser());
                     } else if ($attachment instanceof \openvk\Web\Models\Entities\Post) {
                         $repostAttachments = [];
 
@@ -571,6 +575,8 @@ final class Wall extends VKAPIRequestHandler
                     $attachments[] = $this->getApiPhoto($attachment);
                 } elseif($attachment instanceof \openvk\Web\Models\Entities\Note) {
                     $attachments[] = $attachment->toVkApiStruct();
+                } elseif($attachment instanceof \openvk\Web\Models\Entities\Audio) {
+                    $attachments[] = $attachment->toVkApiStruct($this->getUser());
                 }
             }
 
@@ -637,6 +643,8 @@ final class Wall extends VKAPIRequestHandler
         foreach($comment->getChildren() as $attachment) {
             if($attachment instanceof \openvk\Web\Models\Entities\Photo) {
                 $attachments[] = $this->getApiPhoto($attachment);
+            } elseif($attachment instanceof \openvk\Web\Models\Entities\Audio) {
+                $attachments[] = $attachment->toVkApiStruct($this->getUser());
             }
         }
 
@@ -728,6 +736,8 @@ final class Wall extends VKAPIRequestHandler
                     $attachmentType = "photo";
                 elseif(str_contains($attac, "video"))
                     $attachmentType = "video";
+                elseif(str_contains($attac, "audio"))
+                    $attachmentType = "audio";
                 else
                     $this->fail(205, "Unknown attachment type");
 
@@ -753,6 +763,12 @@ final class Wall extends VKAPIRequestHandler
                     if(!$attacc->getOwner()->getPrivacyPermission('videos.read', $this->getUser()))
                         $this->fail(11, "Access to video denied");
 
+                    $comment->attach($attacc);
+                } elseif($attachmentType == "audio") {
+                    $attacc = (new AudiosRepo)->getByOwnerAndVID($attachmentOwner, $attachmentId);
+                    if(!$attacc || $attacc->isDeleted())
+                        $this->fail(100, "Audio does not exist");
+
                     $comment->attach($attacc);
                 }
             }
diff --git a/Web/Models/Entities/Playlist.php b/Web/Models/Entities/Playlist.php
index 90a517d1..7bd0caf7 100644
--- a/Web/Models/Entities/Playlist.php
+++ b/Web/Models/Entities/Playlist.php
@@ -30,10 +30,10 @@ class Playlist extends MediaCollection
         $this->importTable = DatabaseConnection::i()->getContext()->table("playlist_imports");
     }
 
-    function getCoverURL(): ?string
+    function getCoverURL(string $size = "normal"): ?string
     {
         $photo = (new Photos)->get((int) $this->getRecord()->cover_photo_id);
-        return is_null($photo) ? "/assets/packages/static/openvk/img/song.jpg" : $photo->getURL();
+        return is_null($photo) ? "/assets/packages/static/openvk/img/song.jpg" : $photo->getURLBySizeId($size);
     }
 
     function getLength(): int
diff --git a/Web/Presenters/AudioPresenter.php b/Web/Presenters/AudioPresenter.php
index e98fc6fc..999c469c 100644
--- a/Web/Presenters/AudioPresenter.php
+++ b/Web/Presenters/AudioPresenter.php
@@ -285,46 +285,23 @@ final class AudioPresenter extends OpenVKPresenter
 
             $this->redirect("/playlist" . $owner . "_" . $playlist->getId());
         } else {
-            $this->template->audios = iterator_to_array($this->audios->getByUser($this->user->identity));
+            $this->template->audios = iterator_to_array($this->audios->getByUser($this->user->identity, 1, 10));
         }
     }
 
     function renderPlaylist(int $owner_id, int $virtual_id): void
     {
         $playlist = $this->audios->getPlaylistByOwnerAndVID($owner_id, $virtual_id);
-
+        $page = (int)($this->queryParam("p") ?? 1);
         if (!$playlist || $playlist->isDeleted())
             $this->notFound();
 
         $this->template->playlist = $playlist;
-        $this->template->page = (int)($this->queryParam("p") ?? 0);
-        $this->template->audios = iterator_to_array($playlist->getAudios());
+        $this->template->page = $page;
+        $this->template->audios = iterator_to_array($playlist->fetch($page, 10));
         $this->template->isBookmarked = $playlist->isBookmarkedBy($this->user->identity);
         $this->template->isMy = $playlist->getOwner()->getId() === $this->user->id;
         $this->template->canEdit = ($this->template->isMy || ($playlist->getOwner() instanceof Club && $playlist->getOwner()->canBeModifiedBy($this->user->identity)));
-        $this->template->edit = $this->queryParam("act") === "edit";
-
-        if ($this->template->edit) {
-            if (!$this->template->canEdit) {
-                $this->flashFail("err", tr("error"), tr("forbidden"));
-            }
-
-            $_ids = [];
-            $audios = iterator_to_array($playlist->getAudios());
-            foreach ($audios as $audio) {
-                $_ids[] = $audio->getId();
-            }
-
-            foreach ($this->audios->getByUser($this->user->identity) as $audio) {
-                if (!in_array($audio->getId(), $_ids)) {
-                    $audios[] = $audio;
-                }
-            }
-
-            $this->template->audios = $audios;
-        } else {
-            $this->template->audios = iterator_to_array($playlist->getAudios());
-        }
 
         /*if ($_SERVER["REQUEST_METHOD"] === "POST") {
             if (!$this->template->canEdit) {
@@ -473,8 +450,8 @@ final class AudioPresenter extends OpenVKPresenter
         switch($ctx_type) {
             default:
             case "entity_audios":
-                if($ctx_id > 0) {
-                    $entity = (new Users)->get($ctx_id);
+                if($ctx_id >= 0) {
+                    $entity = $ctx_id != 0 ? (new Users)->get($ctx_id) : $this->user->identity;
 
                     if(!$entity || !$entity->getPrivacyPermission("audios.read", $this->user->identity))
                         $this->flashFail("err", "Error", "Can't get queue", 80, true);
@@ -505,13 +482,28 @@ final class AudioPresenter extends OpenVKPresenter
                 if (!$playlist || $playlist->isDeleted())
                     $this->flashFail("err", "Error", "Can't get queue", 80, true);
 
-                $audios = $playlist->getAudios($page, 10);
+                $audios = $playlist->fetch($page, 10);
                 $audiosCount = $playlist->size();
                 break;
+            case "search_context":
+                $stream = $this->audios->search($this->postParam("query"), 2);
+                $audios = $stream->page($page, 10);
+                $audiosCount = $stream->size();
+                break;
         }
 
         $pagesCount = ceil($audiosCount / $perPage);
 
+        # костылёк для получения плееров в пикере аудиозаписей
+        if((int)($this->postParam("returnPlayers")) === 1) {
+            $this->template->audios = $audios;
+            $this->template->page = $page;
+            $this->template->pagesCount = $pagesCount;
+            $this->template->count = $audiosCount;
+
+            return 0;
+        }
+
         $audiosArr = [];
 
         foreach($audios as $audio) {
diff --git a/Web/Presenters/CommentPresenter.php b/Web/Presenters/CommentPresenter.php
index e005af86..86ccb126 100644
--- a/Web/Presenters/CommentPresenter.php
+++ b/Web/Presenters/CommentPresenter.php
@@ -2,7 +2,7 @@
 namespace openvk\Web\Presenters;
 use openvk\Web\Models\Entities\{Comment, Notifications\MentionNotification, Photo, Video, User, Topic, Post};
 use openvk\Web\Models\Entities\Notifications\CommentNotification;
-use openvk\Web\Models\Repositories\{Comments, Clubs, Videos, Photos};
+use openvk\Web\Models\Repositories\{Comments, Clubs, Videos, Photos, Audios};
 
 final class CommentPresenter extends OpenVKPresenter
 {
@@ -103,8 +103,27 @@ final class CommentPresenter extends OpenVKPresenter
                 }
             }
         }
+
+        $audios = [];
+
+        if(!empty($this->postParam("audios"))) {
+            $un  = rtrim($this->postParam("audios"), ",");
+            $arr = explode(",", $un);
+
+            if(sizeof($arr) < 11) {
+                foreach($arr as $dat) {
+                    $ids = explode("_", $dat);
+                    $audio = (new Audios)->getByOwnerAndVID((int)$ids[0], (int)$ids[1]);
+    
+                    if(!$audio || $audio->isDeleted())
+                        continue;
+    
+                    $audios[] = $audio;
+                }
+            }
+        }
         
-        if(empty($this->postParam("text")) && sizeof($photos) < 1 && sizeof($videos) < 1)
+        if(empty($this->postParam("text")) && sizeof($photos) < 1 && sizeof($videos) < 1 && sizeof($audios) < 1)
             $this->flashFail("err", tr("error_when_publishing_comment"), tr("error_comment_empty"));
         
         try {
@@ -126,6 +145,9 @@ final class CommentPresenter extends OpenVKPresenter
         if(sizeof($videos) > 0)
             foreach($videos as $vid)
                 $comment->attach($vid);
+
+        foreach($audios as $audio)
+            $comment->attach($audio);
         
         if($entity->getOwner()->getId() !== $this->user->identity->getId())
             if(($owner = $entity->getOwner()) instanceof User)
diff --git a/Web/Presenters/WallPresenter.php b/Web/Presenters/WallPresenter.php
index 2f9d611d..7a30a19e 100644
--- a/Web/Presenters/WallPresenter.php
+++ b/Web/Presenters/WallPresenter.php
@@ -3,7 +3,7 @@ namespace openvk\Web\Presenters;
 use openvk\Web\Models\Exceptions\TooMuchOptionsException;
 use openvk\Web\Models\Entities\{Poll, Post, Photo, Video, Club, User};
 use openvk\Web\Models\Entities\Notifications\{MentionNotification, RepostNotification, WallPostNotification};
-use openvk\Web\Models\Repositories\{Posts, Users, Clubs, Albums, Notes, Videos, Comments, Photos};
+use openvk\Web\Models\Repositories\{Posts, Users, Clubs, Albums, Notes, Videos, Comments, Photos, Audios};
 use Chandler\Database\DatabaseConnection;
 use Nette\InvalidStateException as ISE;
 use Bhaktaraz\RSSGenerator\Item;
@@ -311,8 +311,27 @@ final class WallPresenter extends OpenVKPresenter
                 }
             }
         }
+
+        $audios = [];
+
+        if(!empty($this->postParam("audios"))) {
+            $un  = rtrim($this->postParam("audios"), ",");
+            $arr = explode(",", $un);
+
+            if(sizeof($arr) < 11) {
+                foreach($arr as $dat) {
+                    $ids = explode("_", $dat);
+                    $audio = (new Audios)->getByOwnerAndVID((int)$ids[0], (int)$ids[1]);
+    
+                    if(!$audio || $audio->isDeleted())
+                        continue;
+    
+                    $audios[] = $audio;
+                }
+            }
+        }
         
-        if(empty($this->postParam("text")) && sizeof($photos) < 1 && sizeof($videos) < 1 && !$poll && !$note)
+        if(empty($this->postParam("text")) && sizeof($photos) < 1 && sizeof($videos) && sizeof($audios) < 1 && !$poll && !$note)
             $this->flashFail("err", tr("failed_to_publish_post"), tr("post_is_empty_or_too_big"));
         
         try {
@@ -341,6 +360,9 @@ final class WallPresenter extends OpenVKPresenter
 
         if(!is_null($note))
             $post->attach($note);
+
+        foreach($audios as $audio)
+        	$post->attach($audio);
         
         if($wall > 0 && $wall !== $this->user->identity->getId())
             (new WallPostNotification($wallOwner, $post, $this->user->identity))->emit();
diff --git a/Web/Presenters/templates/Audio/Playlist.xml b/Web/Presenters/templates/Audio/Playlist.xml
index 1b8516ba..769be645 100644
--- a/Web/Presenters/templates/Audio/Playlist.xml
+++ b/Web/Presenters/templates/Audio/Playlist.xml
@@ -16,7 +16,9 @@
     <input type="hidden" name="bigplayer_context" data-type="playlist_context" data-entity="{$playlist->getId()}" data-page="{$page}">
     <div class="playlistBlock">
         <div class="playlistCover" style="float: left;">
-            <img src="{$playlist->getCoverURL()}">
+            <a href="{$playlist->getCoverURL()}" target="_blank">
+                <img src="{$playlist->getCoverURL('normal')}">
+            </a>
 
             <div class="profile_links" style="width: 139px;">
                 <a id="profile_link" style="width: 98%;" n:if="$canEdit">{_edit_playlist}</a>
@@ -30,7 +32,8 @@
                 <h4 style="border-bottom:unset;">{$playlist->getName()}</h4>
 
                 <div class="moreInfo">
-                    <span>{tr("audios_count", $count)}</span> • <span>{_created_playlist}</span> {$playlist->getPublicationTime()}
+                    <span>{tr("audios_count", $count)}</span> • 
+                    <span>{_created_playlist}</span> {$playlist->getPublicationTime()}
                     
                     <div style="margin-top: 11px;">
                         <span>{$playlist->getDescription()}</span>
@@ -38,11 +41,21 @@
                     <hr style="color: #f7f7f7;">
                 </div>
             </div>
-            <div class="audios" style="margin-top: 14px;">
+            <div class="audiosContainer infContainer" style="margin-top: 14px;">
                 {if $count < 1}
                     {_empty_playlist}
-                {else}
-                    й йбй бй дй д яюдюяд ю бяб бля лбябл бялб я бля бляб ля я не сделал....
+                {else}  
+                    <div class="infObj" n:foreach="$audios as $audio">
+                        {include "player.xml", audio => $audio}
+                    </div>
+
+                    {include "../components/paginator.xml", conf => (object) [
+                        "page"     => $page,
+                        "count"    => $count,
+                        "amount"   => sizeof($audios),
+                        "perPage"  => $perPage ?? OPENVK_DEFAULT_PER_PAGE,
+                        "atBottom" => true,
+                    ]}
                 {/if}
             </div>
         </div>
diff --git a/Web/Presenters/templates/Audio/apiGetContext.xml b/Web/Presenters/templates/Audio/apiGetContext.xml
new file mode 100644
index 00000000..77b99990
--- /dev/null
+++ b/Web/Presenters/templates/Audio/apiGetContext.xml
@@ -0,0 +1,7 @@
+<input type="hidden" name="count" value="{$count}">
+<input type="hidden" name="pagesCount" value="{$pagesCount}">
+<input type="hidden" name="page" value="{$page}">
+
+{foreach $audios as $audio} 
+    {include "player.xml", audio => $audio, hideButtons => true}
+{/foreach}
diff --git a/Web/Presenters/templates/Audio/player.xml b/Web/Presenters/templates/Audio/player.xml
index e1d33993..ac109b90 100644
--- a/Web/Presenters/templates/Audio/player.xml
+++ b/Web/Presenters/templates/Audio/player.xml
@@ -1,10 +1,7 @@
-{* На одной странице может оказаться несколько одинаковых аудиозаписей, и если запустить
-одну, то начнут проигрываться все остальные. Поэтому тут мы добавляем рандомное число*}
-
 {php $id = $audio->getId() . rand(0, 1000)}
 {php $isWithdrawn = $audio->isWithdrawn()}
 {php $editable = isset($thisUser) && $audio->canBeModifiedBy($thisUser)}
-<div id="audioEmbed-{$id}" data-realid="{$audio->getId()}" data-genre="{$audio->getGenre()}" class="audioEmbed {if !$audio->isAvailable()}processed{/if} {if $isWithdrawn}withdrawn{/if}" onmouseenter="!this.classList.contains('inited') ? initPlayer({$id}, {$audio->getKeys()}, {$audio->getURL()}, {$audio->getLength()}) : void(0)">
+<div id="audioEmbed-{$id}" data-realid="{$audio->getId()}" {if $hideButtons}data-prettyid="{$audio->getPrettyId()}" data-name="{$audio->getName()}"{/if} data-genre="{$audio->getGenre()}" class="audioEmbed {if !$audio->isAvailable()}processed{/if} {if $isWithdrawn}withdrawn{/if}" onmouseenter="!this.classList.contains('inited') ? initPlayer({$id}, {$audio->getKeys()}, {$audio->getURL()}, {$audio->getLength()}) : void(0)">
     <audio class="audio" />
 
     <div id="miniplayer" class="audioEntry" style="min-height: 37px;">
@@ -24,17 +21,6 @@
                         fill="#828a99" fill-opacity=".7"/>
                 </svg>
             </div>
-
-            <div class="track" style="margin-top: 3px">
-                <center class="claimed" style="width: 100%; padding: 4px; color: #45688E; font-weight: bold;" n:if="$isWithdrawn">
-                    {_audio_embed_withdrawn}
-                </center>
-                <div class="selectableTrack" n:attr="style => $isWithdrawn ? 'display: none;' : ''">
-                    <div>&nbsp;
-                        <!-- actual track -->
-                    </div>
-                </div>
-            </div>
         </div>
 
         <div class="volume" style="display: flex; flex-direction: column;width:14%;">
@@ -42,18 +28,26 @@
             <div class="buttons" style="margin-top: 8px;">
                 {php $hasAudio = isset($thisUser) && $audio->isInLibraryOf($thisUser)}
 
-                {if !$addToPlaylistButton}
+                {if !$hideButtons}
                     <div class="remove-icon musicIcon" data-id="{$audio->getId()}" n:if="isset($thisUser) && $hasAudio" ></div>
                     <div class="add-icon musicIcon" data-id="{$audio->getId()}" n:if="isset($thisUser) && !$hasAudio && !$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>
-                {else}
-                    jrgnwighweif
                 {/if}
             </div>
         </div>
     </div>
 
+    <div class="tracks">
+        <div class="track" style="margin-top: 3px;display:none">
+            <div class="selectableTrack" n:attr="style => $isWithdrawn ? 'display: none;' : ''">
+                <div>&nbsp;
+                    <!-- actual track -->
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="lyrics" n:if="!empty($audio->getLyrics())">
         {nl2br($audio->getLyrics())|noescape}
     </div>
diff --git a/Web/Presenters/templates/components/textArea.xml b/Web/Presenters/templates/components/textArea.xml
index 1ae0dd3c..530174b1 100644
--- a/Web/Presenters/templates/components/textArea.xml
+++ b/Web/Presenters/templates/components/textArea.xml
@@ -22,7 +22,7 @@
                 
             </div>
             <div class="post-has-videos"></div>
-            <div class="post-has-audio"></div>
+            <div class="post-has-audios"></div>
 
             <div n:if="$postOpts ?? true" class="post-opts">
                 {var $anonEnabled = OPENVK_ROOT_CONF['openvk']['preferences']['wall']['anonymousPosting']['enable']}
@@ -63,6 +63,7 @@
             </div>
             <input type="hidden" name="photos" value="" />
             <input type="hidden" name="videos" value="" />
+            <input type="hidden" name="audios" value="" />
             <input type="hidden" name="poll" value="none" />
             <input type="hidden" id="note" name="note" value="none" />
             <input type="hidden" name="type" value="1" />
@@ -86,14 +87,14 @@
                         <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/mimetypes/application-vnd.rn-realmedia.png" />
                         {_video}
                     </a>
-                    <a n:if="$notes ?? false" href="javascript:attachNote({$textAreaId})">
-                        <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/mimetypes/application-x-srt.png" />
-                        {_note}
-                    </a>
                     <a id="_audioAttachment">
                         <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/mimetypes/audio-ac3.png" />
                         {_audio}
                     </a>
+                    <a n:if="$notes ?? false" href="javascript:attachNote({$textAreaId})">
+                        <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/mimetypes/application-x-srt.png" />
+                        {_note}
+                    </a>
                     <a n:if="$graffiti ?? false" href="javascript:initGraffiti({$textAreaId});">
                         <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/actions/draw-brush.png" />
                         {_graffiti}
@@ -115,6 +116,7 @@
 
     u("#post-buttons{$textAreaId} input[name='videos']")["nodes"].at(0).value = ""
     u("#post-buttons{$textAreaId} input[name='photos']")["nodes"].at(0).value = ""
+    u("#post-buttons{$textAreaId} input[name='audios']")["nodes"].at(0).value = ""
 </script>
 
 {if $graffiti}
diff --git a/Web/static/css/audios.css b/Web/static/css/audios.css
index beb13e3c..60c2208d 100644
--- a/Web/static/css/audios.css
+++ b/Web/static/css/audios.css
@@ -5,7 +5,7 @@
 }
 
 .musicIcon.pressed {
-    filter: brightness(0%);
+    filter: brightness(150%);
 }
 
 .bigPlayer {
@@ -190,7 +190,7 @@
     opacity: .7;
 }
 
-.audioEntry .status .track > .selectableTrack, .bigPlayer .selectableTrack {
+.audioEmbed .track > .selectableTrack, .bigPlayer .selectableTrack {
     margin-top: 3px;
     width: calc(100% - 8px);
     border-top: #707070 1px solid;
@@ -199,7 +199,7 @@
     user-select: none;
 }
 
-.audioEntry .status .track > div > div {
+.audioEmbed .track > div > div {
     height: 100%;
     width: 0%;
     background-color: #BFBFBF;
@@ -275,6 +275,7 @@
 }
 
 .audioEntry .status {
+    overflow: hidden;
     display: grid;
     grid-template-columns: 1fr;
     width: 85%;
@@ -285,12 +286,12 @@
     color: #4C4C4C;
 }
 
-.audioEntry .status .track {
+.audioEmbed .track {
     display: none;
     padding: 4px 0;
 }
 
-#audioEmbed .audioEntry .status .track, .audioEntry.playing .status .track {
+.audioEmbed .track, .audioEmbed.playing .track {
     display: unset;
 }
 
@@ -308,7 +309,7 @@
     width: 62px;
     height: 20px;
     position: absolute;
-    right: 46px;
+    right: 10%;
     top: 2px;
 }
 
@@ -406,4 +407,39 @@
 
 .playlistContainer .infObj:first-of-type {
     margin-left: 0px;
+}
+
+.ovk-diag-body .searchBox {
+    background: #e6e6e6;
+    padding-top: 10px;
+    height: 35px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.ovk-diag-body .searchBox input {
+    height: 24px;
+}
+
+.ovk-diag-body .audiosInsert {
+    height: 82%;
+    padding: 9px 5px 9px 9px;
+    overflow-y: auto;
+}
+
+.ovk-diag-body .attachAudio {
+    float: left;
+    width: 28%;
+    height: 26px;
+    padding-top: 11px;
+    text-align: center;
+}
+
+.ovk-diag-body .attachAudio span {
+    user-select: none;
+}
+
+.ovk-diag-body .attachAudio:hover {
+    background: rgb(236, 236, 236);
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/Web/static/css/main.css b/Web/static/css/main.css
index 1f43b8a2..6a800e2c 100644
--- a/Web/static/css/main.css
+++ b/Web/static/css/main.css
@@ -1418,7 +1418,7 @@ body.scrolled .toTop:hover {
     display: none;
 }
 
-.post-has-videos {
+.post-has-videos, .post-has-audios {
     margin-top: 11px;
     margin-left: 3px;
     color: #3c3c3c;
@@ -1435,7 +1435,7 @@ body.scrolled .toTop:hover {
     margin-left: 2px;
 }
 
-.post-has-video {
+.post-has-video, .post-has-audio {
     padding-bottom: 4px;
     cursor: pointer;
 }
@@ -1444,6 +1444,10 @@ body.scrolled .toTop:hover {
     text-decoration: underline;
 }
 
+.post-has-audio:hover span {
+    text-decoration: underline;
+}
+
 .post-has-video::before {
     content: " ";
     width: 14px;
@@ -1457,6 +1461,19 @@ body.scrolled .toTop:hover {
     margin-bottom: -1px;
 }
 
+.post-has-audio::before {
+    content: " ";
+    width: 14px;
+    height: 15px;
+    display: inline-block;
+    vertical-align: bottom;
+    background-image: url("/assets/packages/static/openvk/img/audio.png");
+    background-repeat: no-repeat;
+    margin: 3px;
+    margin-left: 2px;
+    margin-bottom: -1px;
+}
+
 .post-opts {
     margin-top: 10px;
 }
diff --git a/Web/static/img/audio.png b/Web/static/img/audio.png
new file mode 100644
index 0000000000000000000000000000000000000000..c75536920b3b4ae17dd1571a01cdffc9b0ae0861
GIT binary patch
literal 364
zcmV-y0h9iTP)<h;3K|Lk000e1NJLTq000gE000jN1^@s6)D-@700001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGf6951U69E94oEQKA0Rc%wK~y+Tz0$Eu
z0#N|R@w-5qOKNh8hT3yBa1;6y8k&NGh6V$}MP1a%>A)eJ9gPM-ho+`zY3L6KLK;Ge
zq)4;x@9}z=ytRJt;ojYQzq@zb1^=EfiXuC7SwRYEY-1NYmXeL*_*ILRbASi*P)8m~
z+~5T!zT!IiIKw$=XrY5=n2xWgYq#j)($bCe#5aWS7Bw-%2orqaC#IzMii%sXl({{6
zi*C~92m`dSi5XmR10^(&!6%e`Tp))-=+jK$ikhsVfMb|RlEC7&pYX1MimTYt$wJ2V
zs4br24p%sVc@-5uP{bp&#U`$yXpzqMpdaHNzf&n!*X-~w69nHxn=}Au0`#H)0000<
KMNUMnLSTX}SC?r3

literal 0
HcmV?d00001

diff --git a/Web/static/img/pause.jpg b/Web/static/img/pause.jpg
deleted file mode 100644
index 2b185a647e573b2e46bc1440a29062e02afc38d2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 948
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^=X2?RhSGZ3(_v48*v8yhPdCkGc7CkH1d
z7Y{!V7dIa_Cnv8UFCV{vfS>>ukC3pCfH06P05XITq?4J21E^7eo0A(TN+S4wfI*Oh
z!G*zrnNf*>Nsy6Qkn#T!26+YsMpmF}K@NrjMkZz!RyKAHPA+bsf~^7!OhCJtSeRK^
zSy+IoYk~3%EP|{;iiVDC!hwnGN`)dujT0AgC_8ODC>nI}gNkudQ4=SZn7D+bl&YG#
zhNhN@shPQjrIoXbtDC!rr&n-DXjpheWK?oWYFc_mW>#@YX<2ziWmR)aYg>CqXV;|3
zQ>IRvK4a#rMT?g#UABD1%2k^-Z`rzS`;MKv4jn#n^w{weCr@3veC6u3>o;!Rdidz^
zlc&#~zj*oT<EPJGzJB}u<L57szZe;qA>M-f49#DHKz}i@0E3hr<S$01av)|FWMNe_
zWD{}>WKS#<Rx)bj5OJEgaN|KvW#ga^qDe&;xx`dV9;$u>c@69{;yl(wme1fGL-^|!
z0}nGJF!GoM8SEK;=|8@HeEr-0H~K%8+RRsf8~^F=Zp%;mU(Wcle)@|=4O|*f{Hyta
z{_*v1>fhc6s(Ww!X8)(Z+a*5Nznu9MsBQsMm&OAAYh6F}zkU7BFjM;9qx#?3@loL?
z>$k7}bK?GY;r|S`qZsTH*8iMW|4#Bh!}idxOKYb8X01Q-`9DL!`M<l?uhn4w6bCef
ziU$2^eti8v{F{29&sP0;Zw>U><LweapDhHrm|;<u1{8yQb|C(3KhS5Z{>)bg`t0#;
vOQ6pdd|AN1ru09<&&2->O#h}%bQNI;gyOJ$jsF>R|1&(Wzt*L}{Qo8ZMe=)*

diff --git a/Web/static/img/play.jpg b/Web/static/img/play.jpg
deleted file mode 100644
index 1bf73952146b13e0e3a32d2f3e86e3598bcb0c66..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 994
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^=X2?RhSGZ3(_v48*v8yhPdCkGc7CkH1d
z7Y{!V7dIa_Cnv8UFCV{vfS>>ukC3pCfH06P05XITq?4J21E^7eo0A(TN+S4wfI*Oh
z!G*zrnNf*>Nsy6Qkn#T!26+YsMpmF}K@NrjMkZz!RyKAHPA+bsf~^7!OhCJtSeRK^
zSy+IoYk~3%EP|{;iiVDC!hwnGN`)dujT0AgC_8ODC>nI}gNkudQ4=SZn7D+bl&YG#
zhNhN@shPQjrIoXbtDC!rr&n-DXjpheWK?oWYFc_mW>#@YX<2ziWmR)aYg>CqXV;|3
zQ>IRvK4a#rMT?g#UABD1%2k^-Z`rzS`;MKv4jn#n^w{weCr@3veC6u3>o;!Rdidz^
zlc&#~zj*oT<EPJGzJB}u<L57szZe;qA>M-f49#DHKz}i@0E3hr<S$01av)|FWMNe_
zWD{}>WKS#<Rx)bj5OJEgaN|KvW#ga^qDe&;xx`dV9;$u>c@69{;yl(wme1fGL-^|!
z0}nGJF!GoM8SEK;=|8@HeEr-0H~K%8+RRsf8~^F=Zp%;mU(Wcle)@|=4O|*f{Hyta
z{_*v1>fhc6s(Ww!X8)(Z+a*5Nznu9MsBQsMm&O97{ZZPV;`T>rFn>P&`1*nPA3^dr
z;y;G|XUMJ3tzG>urta+1O1tpCCbc&|*KXXtui{hG-;DL=<@@6q>mPd5C)OVg|GV|?
z)^F>77XCJ$`s8Q)my6%i&we|0@8<*NlNpP;7&L%b`|G0ps;|ES-Sp?<kFOtJ{}ZqO
zCjKXA{*C=N_GkTPnErmt&wb@n|1<bp&a+ux^X_e*e}BB({)grN8Gz<%{_XzT4K%;*
zxBu+tmGNKBnms=C{oK17&rfDBEb7u=ShR1!kFOuZf6M>o{-?Fy`rPmEKRezYvswQu
zqc;2LFR=X}H)w#=aRb#Q|1JlrQ$P7z|Idzh=W6c%%COa7el1)7FQWdy{-r5_t_&hj
TEV_O{{ptE2{9l3E|K9`vcf6WS

diff --git a/Web/static/js/al_music.js b/Web/static/js/al_music.js
index 33cc54ec..3c5976d2 100644
--- a/Web/static/js/al_music.js
+++ b/Web/static/js/al_music.js
@@ -484,7 +484,7 @@ class bigPlayer {
             title: obj.name,
             artist: obj.performer,
             album: album == null ? "OpenVK Audios" : album.querySelector(".playlistInfo h4").innerHTML,
-            artwork: [{ src: album == null ? "/assets/packages/static/openvk/img/song.jpg" : album.querySelector(".playlistCover img") }],
+            artwork: [{ src: album == null ? "/assets/packages/static/openvk/img/song.jpg" : album.querySelector(".playlistCover img").src }],
         });
     }
 }
@@ -756,10 +756,135 @@ $(document).on("click", ".musicIcon.add-icon", (e) => {
 })
 
 $(document).on("click", "#_audioAttachment", (e) => {
+    let form = e.currentTarget.closest("form")
     let body = `
-        я ещё не сделал
+        <div class="searchBox">
+            <input name="query" type="text" placeholder="${tr("header_search")}">
+        </div>
+
+        <div class="audiosInsert"></div>
     `
     MessageBox(tr("select_audio"), body, [tr("ok")], [Function.noop])
+
+    document.querySelector(".ovk-diag-body").style.padding = "0"
+    document.querySelector(".ovk-diag-cont").style.width = "580px"
+    document.querySelector(".ovk-diag-body").style.height = "335px"
+
+    async function insertAudios(page, query = "") {
+        document.querySelector(".audiosInsert").insertAdjacentHTML("beforeend", `<img id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">`)
+
+        $.ajax({
+            type: "POST",
+            url: "/audios/context",
+            data: {
+                context: query == "" ? "entity_audios" : "search_context",
+                hash: u("meta[name=csrf]").attr("value"),
+                page: page,
+                query: query == "" ? null : query,
+                context_entity: 0,
+                returnPlayers: 1,
+            },
+            success: (response) => {
+                let domparser = new DOMParser()
+                let result = domparser.parseFromString(response, "text/html")
+
+                let pagesCount = result.querySelector("input[name='pagesCount']").value
+                let count = Number(result.querySelector("input[name='count']").value)
+
+                if(count < 1) {
+                    document.querySelector(".audiosInsert").innerHTML = tr("no_results")
+                    return
+                }
+
+                result.querySelectorAll(".audioEmbed").forEach(el => {
+                    let id = el.dataset.prettyid
+                    let name = el.dataset.name
+                    let isAttached = (form.querySelector("input[name='audios']").value.includes(`${id},`))
+                    document.querySelector(".audiosInsert").insertAdjacentHTML("beforeend", `
+                        <div style="display: table;width: 100%;clear: both;">
+                            <div style="width: 72%;float: left;">${el.outerHTML}</div>
+                            <div class="attachAudio" data-attachmentdata="${id}" data-name="${name}">
+                                <span>${isAttached ? tr("detach_audio") : tr("attach_audio")}</span>
+                            </div>
+                        </div>
+                    `)
+                })
+
+                u("#loader").remove()
+
+                if(page < pagesCount) {
+                    document.querySelector(".audiosInsert").insertAdjacentHTML("beforeend", `
+                    <div id="showMoreAudios" data-pagesCount="${pagesCount}" data-page="${page + 1}" style="width: 100%;text-align: center;background: #d5d5d5;height: 22px;padding-top: 9px;cursor:pointer;">
+                        <span>more...</span>
+                    </div>`)
+                }
+            }
+        })
+    }
+
+    insertAudios(1)
+
+    $(".audiosInsert").on("click", "#showMoreAudios", (e) => {
+        u(e.currentTarget).remove()
+        insertAudios(Number(e.currentTarget.dataset.page))
+    })
+
+    $(".searchBox input").on("change", async (e) => {
+        await new Promise(r => setTimeout(r, 1000));
+
+        if(e.currentTarget.value === document.querySelector(".searchBox input").value) {
+            document.querySelector(".audiosInsert").innerHTML = ""
+            insertAudios(1, e.currentTarget.value)
+            return;
+        } else {
+            console.info("skipping")
+        }
+    })
+
+    function insertAttachment(id) {
+        let audios = form.querySelector("input[name='audios']") 
+
+        if(!audios.value.includes(id + ",")) {
+            if(audios.value.split(",").length > 10) {
+                NewNotification(tr("error"), tr("max_attached_audios"))
+                return false
+            }
+
+            form.querySelector("input[name='audios']").value += (id + ",")
+
+            console.info(id + " attached")
+            return true
+        } else {
+            form.querySelector("input[name='audios']").value = form.querySelector("input[name='audios']").value.replace(id + ",", "")
+
+            console.info(id + " detached")
+            return false
+        }
+    }
+
+    $(".audiosInsert").on("click", ".attachAudio", (ev) => {
+        if(!insertAttachment(ev.currentTarget.dataset.attachmentdata)) {
+            u(`.post-has-audios .post-has-audio[data-id='${ev.currentTarget.dataset.attachmentdata}']`).remove()
+            ev.currentTarget.querySelector("span").innerHTML = tr("attach_audio")
+        } else {
+            ev.currentTarget.querySelector("span").innerHTML = tr("detach_audio")
+
+            form.querySelector(".post-has-audios").insertAdjacentHTML("beforeend", `
+                <div class="post-has-audio" id="unattachAudio" data-id="${ev.currentTarget.dataset.attachmentdata}">
+                    <span>${ovk_proc_strtr(escapeHtml(ev.currentTarget.dataset.name), 40)}</span>
+                </div>
+            `)
+
+            u(`#unattachAudio[data-id='${ev.currentTarget.dataset.attachmentdata}']`).on("click", (e) => {
+                let id = ev.currentTarget.dataset.attachmentdata
+                form.querySelector("input[name='audios']").value = form.querySelector("input[name='audios']").value.replace(id + ",", "")
+                
+                console.info(id + " detached")
+               
+                u(e.currentTarget).remove()
+            })
+        }
+    })
 })
 
 $(document).on("click", ".audioEmbed.processed", (e) => {
diff --git a/locales/en.strings b/locales/en.strings
index b5766204..0722afa1 100644
--- a/locales/en.strings
+++ b/locales/en.strings
@@ -786,6 +786,8 @@
 "unable_to_load_queue" = "Error when loading queue.";
 
 "fully_delete_audio" = "Fully delete audio";
+"attach_audio" = "Attach audio";
+"detach_audio" = "Detach audio";
 
 /* Notifications */
 
diff --git a/locales/ru.strings b/locales/ru.strings
index 48a619b4..50394dc3 100644
--- a/locales/ru.strings
+++ b/locales/ru.strings
@@ -742,6 +742,8 @@
 "unable_to_load_queue" = "Не удалось загрузить очередь.";
 
 "fully_delete_audio" = "Полностью удалить аудиозапись";
+"attach_audio" = "Прикрепить аудиозапись";
+"detach_audio" = "Открепить аудиозапись";
 
 /* Notifications */