Web/Models/Entities/Audio.php

@@ -147,11 +147,6 @@ class Audio extends Media
         return $this->getRecord()->performer;
     }
 
-    function getPerformers(): array
-    {
-        return explode(", ", $this->getRecord()->performer);
-    }
-
     function getName(): string
     {
         return $this->getPerformer() . " — " . $this->getTitle();

Web/Models/Repositories/Audios.php

@@ -248,17 +248,15 @@ class Audios
     {
         $query = "%$query%";
         $result = $this->audios->where([
-            "unlisted"  => 0,
-            "deleted"   => 0,
-            /*"withdrawn" => 0,
-            "processed" => 1,*/
+            "unlisted" => 0,
+            "deleted"  => 0,
         ]);
         $order_str = (in_array($order['type'], ['id', 'length', 'listens']) ? $order['type'] : 'id') . ' ' . ($order['invert'] ? 'ASC' : 'DESC');;
 
         if($params["only_performers"] == "1") {
             $result->where("performer LIKE ?", $query);
         } else {
-            $result->where("CONCAT_WS(' ', performer, name) LIKE ?", $query);
+            $result->where("name LIKE ? OR performer LIKE ?", $query, $query);
         }
 
         foreach($params as $paramName => $paramValue) {

Web/Presenters/AudioPresenter.php

@@ -97,12 +97,9 @@ final class AudioPresenter extends OpenVKPresenter
             $this->template->club = $owner < 0 ? $entity : NULL;
             $this->template->isMy = ($owner > 0 && ($entity->getId() === $this->user->id));
             $this->template->isMyClub = ($owner < 0 && $entity->canBeModifiedBy($this->user->identity));
-        } else if ($mode === 'alone_audio') {
-            $audios = [$this->template->alone_audio];
-            $audiosCount = 1;
-
-            $this->template->owner   = $this->user->identity;
-            $this->template->ownerId = $this->user->id;
+        } else {
+            $audios = $this->audios->getPopular();
+            $audiosCount = $audios->size();
         }
 
         // $this->renderApp("owner=$owner");
@@ -274,19 +271,6 @@ final class AudioPresenter extends OpenVKPresenter
         }
     }
 
-    function renderAloneAudio(int $owner_id, int $audio_id): void
-    {
-        $this->assertUserLoggedIn();
-
-        $found_audio = $this->audios->get($audio_id);
-        if(!$found_audio || $found_audio->isDeleted() || !$found_audio->canBeViewedBy($this->user->identity)) {
-            $this->notFound();
-        }
-
-        $this->template->alone_audio = $found_audio;
-        $this->renderList(NULL, 'alone_audio');
-    }
-
     function renderListen(int $id): void
     {
         if ($_SERVER["REQUEST_METHOD"] === "POST") {
@@ -343,15 +327,17 @@ final class AudioPresenter extends OpenVKPresenter
             $this->template->club = $club;
         }
 
+        $this->template->owner = $owner;
+
         if ($_SERVER["REQUEST_METHOD"] === "POST") {
             $title = $this->postParam("title");
             $description = $this->postParam("description");
             $is_unlisted = (int)$this->postParam('is_unlisted');
-            $is_ajax = (int)$this->postParam('ajax') == 1;
-            $audios = array_slice(explode(",", $this->postParam("audios")), 0, 1000);
+
+            $audios = !empty($this->postParam("audios")) ? array_slice(explode(",", $this->postParam("audios")), 0, 1000) : [];
 
             if(empty($title) || iconv_strlen($title) < 1)
-                $this->flashFail("err", tr("error"), tr("set_playlist_name"), NULL, $is_ajax);
+                $this->flashFail("err", tr("error"), tr("set_playlist_name"));
 
             $playlist = new Playlist;
             $playlist->setOwner($owner);
@@ -362,12 +348,12 @@ final class AudioPresenter extends OpenVKPresenter
             
             if($_FILES["cover"]["error"] === UPLOAD_ERR_OK) {
                 if(!str_starts_with($_FILES["cover"]["type"], "image"))
-                    $this->flashFail("err", tr("error"), tr("not_a_photo"), NULL, $is_ajax);
+                    $this->flashFail("err", tr("error"), tr("not_a_photo"));
 
                 try {
                     $playlist->fastMakeCover($this->user->id, $_FILES["cover"]);
                 } catch(\Throwable $e) {
-                    $this->flashFail("err", tr("error"), tr("invalid_cover_photo"), NULL, $is_ajax);
+                    $this->flashFail("err", tr("error"), tr("invalid_cover_photo"));
                 }
             }
 
@@ -375,22 +361,25 @@ final class AudioPresenter extends OpenVKPresenter
 
             foreach($audios as $audio) {
                 $audio = $this->audios->get((int)$audio);
-                if(!$audio || $audio->isDeleted())
+
+                if(!$audio || $audio->isDeleted() || !$audio->canBeViewedBy($this->user->identity))
                     continue;
 
                 $playlist->add($audio);
             }
 
             $playlist->bookmark(isset($club) ? $club : $this->user->identity);
-            if($is_ajax) {
-                $this->returnJson([
-                    'success' => true,
-                    'redirect' => '/playlist' . $owner . "_" . $playlist->getId()
-                ]);
-            }
             $this->redirect("/playlist" . $owner . "_" . $playlist->getId());
         } else {
-            $this->template->owner = $owner;
+            if(isset($club)) {
+                $this->template->audios = iterator_to_array($this->audios->getByClub($club, 1, 10));
+                $count = (new Audios)->getClubCollectionSize($club); 
+            } else {
+                $this->template->audios = iterator_to_array($this->audios->getByUser($this->user->identity, 1, 10));
+                $count = (new Audios)->getUserCollectionSize($this->user->identity);
+            }
+
+            $this->template->pagesCount = ceil($count / 10);
         }
     }
 
@@ -446,20 +435,28 @@ final class AudioPresenter extends OpenVKPresenter
         $this->willExecuteWriteAction();
 
         $playlist = $this->audios->getPlaylistByOwnerAndVID($owner_id, $virtual_id);
+        $page = (int)($this->queryParam("p") ?? 1);
         if (!$playlist || $playlist->isDeleted() || !$playlist->canBeModifiedBy($this->user->identity))
             $this->notFound();
 
         $this->template->playlist = $playlist;
+        $this->template->page = $page;
         
         $audios = iterator_to_array($playlist->fetch(1, $playlist->size()));
-        $this->template->audios = array_slice($audios, 0, 1000);
+        $this->template->audios = array_slice($audios, 0, 10);
+        $audiosIds = [];
+
+        foreach($audios as $aud)
+            $audiosIds[] = $aud->getId();
+
+        $this->template->audiosIds = implode(",", array_unique($audiosIds)) . ",";
         $this->template->ownerId = $owner_id;
         $this->template->owner = $playlist->getOwner();
+        $this->template->pagesCount = $pagesCount = ceil($playlist->size() / 10);
 
         if($_SERVER["REQUEST_METHOD"] !== "POST")
             return;
 
-        $is_ajax = (int)$this->postParam('ajax') == 1;
         $title = $this->postParam("title");
         $description = $this->postParam("description");
         $is_unlisted = (int)$this->postParam('is_unlisted');
@@ -474,12 +471,12 @@ final class AudioPresenter extends OpenVKPresenter
         $playlist->resetLength();
         $playlist->setUnlisted((bool)$is_unlisted);
 
-        if($_FILES["cover"]["error"] === UPLOAD_ERR_OK) {
-            if(!str_starts_with($_FILES["cover"]["type"], "image"))
+        if($_FILES["new_cover"]["error"] === UPLOAD_ERR_OK) {
+            if(!str_starts_with($_FILES["new_cover"]["type"], "image"))
                 $this->flashFail("err", tr("error"), tr("not_a_photo"));
             
             try {
-                $playlist->fastMakeCover($this->user->id, $_FILES["cover"]);
+                $playlist->fastMakeCover($this->user->id, $_FILES["new_cover"]);
             } catch(\Throwable $e) {
                 $this->flashFail("err", tr("error"), tr("invalid_cover_photo"));
             }
@@ -493,18 +490,13 @@ final class AudioPresenter extends OpenVKPresenter
 
         foreach ($new_audios as $new_audio) {
             $audio = (new Audios)->get((int)$new_audio);
+
             if(!$audio || $audio->isDeleted())
                 continue;
 
             $playlist->add($audio);
         }
 
-        if($is_ajax) {
-            $this->returnJson([
-                'success' => true,
-                'redirect' => '/playlist' . $playlist->getPrettyId()
-            ]);
-        }
         $this->redirect("/playlist".$playlist->getPrettyId());
     }
 
@@ -770,15 +762,6 @@ final class AudioPresenter extends OpenVKPresenter
                 $audios = $stream->page($page, 10);
                 $audiosCount = $stream->size();
                 break;
-            case 'alone_audio':
-                $found_audio = $this->audios->get($ctx_id);
-                if(!$found_audio || $found_audio->isDeleted() || !$found_audio->canBeViewedBy($this->user->identity)) {
-                    $this->flashFail("err", "Error", "Not found", 89, true);
-                }
-
-                $audios = [$found_audio];
-                $audiosCount = 1;
-                break;
         }
 
         $pagesCount = ceil($audiosCount / $perPage);
@@ -796,21 +779,16 @@ final class AudioPresenter extends OpenVKPresenter
         $audiosArr = [];
 
         foreach($audios as $audio) {
-            $output_array = [];
-            $output_array['id'] = $audio->getId();
-            $output_array['name'] = $audio->getTitle();
-            $output_array['performer'] = $audio->getPerformer();
-
-            if(!$audio->isWithdrawn()) {
-                $output_array['keys'] = $audio->getKeys();
-                $output_array['url'] = $audio->getUrl();
-            }
-
-            $output_array['length'] = $audio->getLength();
-            $output_array['available'] = $audio->isAvailable();
-            $output_array['withdrawn'] = $audio->isWithdrawn();
-
-            $audiosArr[] = $output_array;
+            $audiosArr[] = [
+                "id" => $audio->getId(),
+                "name" => $audio->getTitle(),
+                "performer" => $audio->getPerformer(),
+                "keys" => $audio->getKeys(),
+                "url" => $audio->getUrl(),
+                "length" => $audio->getLength(),
+                "available" => $audio->isAvailable(),
+                "withdrawn" => $audio->isWithdrawn(),
+            ];
         }
 
         $resultArr = [

Web/Presenters/AuthPresenter.php

@@ -228,7 +228,6 @@ final class AuthPresenter extends OpenVKPresenter
             return;
         }
 
-        $this->template->disable_ajax = 1;
         $this->template->is2faEnabled = $request->getUser()->is2faEnabled();
         
         if($_SERVER["REQUEST_METHOD"] === "POST") {

Web/Presenters/MessengerPresenter.php

@@ -63,7 +63,6 @@ final class MessengerPresenter extends OpenVKPresenter
             $this->flash("err", tr("warning"), tr("user_may_not_reply"));
         }
         
-        $this->template->disable_ajax  = 1;
         $this->template->selId         = $sel;
         $this->template->correspondent = $correspondent;
     }

Web/Presenters/NoSpamPresenter.php

@@ -38,7 +38,6 @@ final class NoSpamPresenter extends OpenVKPresenter
 
         if ($mode === "form") {
             $this->template->_template = "NoSpam/Index";
-            $this->template->disable_ajax = 1;
             $foundClasses = [];
             foreach (Finder::findFiles('*.php')->from($targetDir) as $file) {
                 $content = file_get_contents($file->getPathname());
@@ -68,7 +67,6 @@ final class NoSpamPresenter extends OpenVKPresenter
             $this->template->models = $models;
         } else if ($mode === "templates") {
             $this->template->_template = "NoSpam/Templates.xml";
-            $this->template->disable_ajax = 1;
             $filter = [];
             if ($this->queryParam("id")) {
                 $filter["id"] = (int)$this->queryParam("id");

Web/Presenters/OpenVKPresenter.php

@@ -282,11 +282,11 @@ abstract class OpenVKPresenter extends SimplePresenter
                 $this->redirect("/maintenances/");
             }
         }
-        
-        if($_SERVER['HTTP_X_OPENVK_AJAX_QUERY'] == '1' && $this->user->identity) {
-            error_reporting(0);
+
+        /*if($this->queryParam('al') == '1') {
+            $this->assertNoCSRF();
             header('Content-Type: text/plain; charset=UTF-8');
-        }
+        }*/
 
         parent::onStartup();
     }

Web/Presenters/ReportPresenter.php

@@ -43,7 +43,6 @@ final class ReportPresenter extends OpenVKPresenter
             "perPage" => 15,
         ];
         $this->template->mode = $act ?? "all";
-        $this->template->disable_ajax = 1;
 
         if ($_SERVER["REQUEST_METHOD"] === "POST") {
             $reports = [];
@@ -79,7 +78,6 @@ final class ReportPresenter extends OpenVKPresenter
             $this->notFound();
         
         $this->template->report = $report;
-        $this->template->disable_ajax = 1;
     }
     
     function renderCreate(int $id): void

Web/Presenters/UserPresenter.php

@@ -34,7 +34,7 @@ final class UserPresenter extends OpenVKPresenter
                 $this->template->_template = "User/deactivated.xml";
                 
                 $this->template->user = $user;
-            } else if(!is_null($user) && !$user->canBeViewedBy($this->user->identity)) {
+            } else if(!$user->canBeViewedBy($this->user->identity)) {
                 $this->template->_template = "User/private.xml";
                 
                 $this->template->user = $user;

Web/Presenters/templates/@layout.xml

@@ -20,6 +20,7 @@
         {script "js/utils.js"}
         {script "js/node_modules/dashjs/dist/dash.all.min.js"}
         <script src="/assets/packages/static/openvk/js/node_modules/cropperjs/dist/cropper.js" type="module"></script>
+        {script "js/al_music.js"}
 
         {css "js/node_modules/tippy.js/dist/backdrop.css"}
         {css "js/node_modules/cropperjs/dist/cropper.css"}
@@ -30,10 +31,6 @@
         {script "js/node_modules/@popperjs/core/dist/umd/popper.min.js"}
         {script "js/node_modules/tippy.js/dist/tippy-bundle.umd.min.js"}
         {script "js/node_modules/handlebars/dist/handlebars.min.js"}
-        {script "js/node_modules/react/dist/react-with-addons.min.js"}
-        {script "js/node_modules/react-dom/dist/react-dom.min.js"}
-        {script "js/vnd_literallycanvas.js"}
-        {css "js/node_modules/literallycanvas/lib/css/literallycanvas.css"}
 
         {if $isTimezoned == NULL}
             {script "js/timezone.js"}
@@ -202,18 +199,18 @@
                             {var $canAccessHelpdesk   = $thisUser->getChandlerUser()->can("write")->model('openvk\Web\Models\Entities\TicketReply')->whichBelongsTo(0)}
                             {var $menuLinksAvaiable   = sizeof(OPENVK_ROOT_CONF['openvk']['preferences']['menu']['links']) > 0 && $thisUser->getLeftMenuItemStatus('links')}
                             <div n:if="$canAccessAdminPanel || $canAccessHelpdesk || $menuLinksAvaiable" class="menu_divider"></div>
-                            <a href="/admin" class="link" n:if="$canAccessAdminPanel" title="{_admin} [Alt+Shift+A]" accesskey="a" rel="nofollow">{_admin}</a>
-                            <a href="/support/tickets" class="link" n:if="$canAccessHelpdesk" rel="nofollow">{_helpdesk}
+                            <a href="/admin" class="link" n:if="$canAccessAdminPanel" title="{_admin} [Alt+Shift+A]" accesskey="a">{_admin}</a>
+                            <a href="/support/tickets" class="link" n:if="$canAccessHelpdesk">{_helpdesk}
                                 {if $helpdeskTicketNotAnsweredCount > 0}
                                     (<b>{$helpdeskTicketNotAnsweredCount}</b>)
                                 {/if}
                             </a>
-                            <a n:if="$canAccessHelpdesk" href="/scumfeed" class="link" rel="nofollow">{tr("reports")}
+                            <a n:if="$canAccessHelpdesk" href="/scumfeed" class="link">{tr("reports")}
                                 {if $reportNotAnsweredCount > 0}
                                     (<b>{$reportNotAnsweredCount}</b>)
                                 {/if}
                             </a>
-                            <a n:if="$canAccessHelpdesk" href="/noSpam" class="link" rel="nofollow">
+                            <a n:if="$canAccessHelpdesk" href="/noSpam" class="link">
                                 noSpam
                             </a>
                         <a
@@ -395,9 +392,6 @@
         {script "js/al_suggestions.js"}
         {script "js/al_navigation.js"}
         {script "js/al_comments.js"}
-        {script "js/al_music.js"}
-        {script "js/al_despacito_wall.js"}
-        {script "js/al_photos.js"}
 
         {ifset $thisUser}
             {script "js/al_notifs.js"}
@@ -439,21 +433,19 @@
             //]]>
         </script>
 
-        <script id='_js_ep_script'>
+        <script>
             window.openvk = {
                 "audio_genres": {\openvk\Web\Models\Entities\Audio::genres},
                 "at_search": {$atSearch ?? false},
                 "max_attachments": {\OPENVK_ROOT_CONF["openvk"]["preferences"]["wall"]["postSizes"]["maxAttachments"] ?? 10},
                 "max_filesize_mb": 5,
                 "current_id": {$thisUser ? $thisUser->getId() : 0},
-                "disable_ajax": {$disable_ajax ? $disable_ajax : 0},
             }
         </script>
 
         {ifset bodyScripts}
             {include bodyScripts}
         {/ifset}
-        {script "js/router.js"}
     </body>
 </html>
 {/if}

Web/Presenters/templates/Apps/Edit.xml

@@ -101,6 +101,12 @@
     </div>
 
     <script>
-        window.coins = {$coins}
+        async function withdraw(id) {
+            let coins = await API.Apps.withdrawFunds(id);
+            if(coins == 0)
+                MessageBox({_app_withdrawal}, {_app_withdrawal_empty}, ["OK"], [Function.noop]);
+            else
+                MessageBox({_app_withdrawal}, {tr("app_withdrawal_created", $coins)}, ["OK"], [Function.noop]);
+        }
     </script>
 {/block}

Web/Presenters/templates/Apps/Play.xml

@@ -7,7 +7,7 @@
 
 {block header}
     {$name}
-    <a style="float: right;" onClick="reportApp({$id})" n:if="$canReport ?? false">{_report}</a>
+    <a style="float: right;" onClick="reportApp()" n:if="$canReport ?? false">{_report}</a>
 {/block}
 
 {block content}
@@ -36,5 +36,29 @@
         window.appOrigin = {$origin};
     </script>
 
+    <script n:if="$canReport ?? false">
+        function reportApp() {
+            uReportMsgTxt  = {_going_to_report_app};
+            uReportMsgTxt += "<br/>"+tr("report_question_text");
+            uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
+
+            MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
+                (function() {
+                    res = document.querySelector("#uReportMsgInput").value;
+                    xhr = new XMLHttpRequest();
+                    xhr.open("GET", "/report/" + {$id} + "?reason=" + res + "&type=app", true);
+                    xhr.onload = (function() {
+                    if(xhr.responseText.indexOf("reason") === -1)
+                        MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
+                    else
+                        MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
+                    });
+                    xhr.send(null);
+                }),
+                Function.noop
+            ]);
+        }
+    </script>
+
     {script "js/al_games.js"}
 {/block}

Web/Presenters/templates/Audio/EditPlaylist.xml

@@ -13,44 +13,90 @@
 {/block}
 
 {block content}
-    <div class='PE_wrapper'>
-        <div class='PE_playlistEditPage'>
-            <div class="playlistCover">
-                <a onclick="document.querySelector(`input[name='cover']`).click()">
-                    <input type='file' name='cover' style='display:none;' accept=".jpg,.png">
-                    <img src="{$playlist->getCoverURL('normal')}" alt="{_playlist_cover}">
-                </a>
-                <div class="profile_links" style="width: 139px;">
-                    <a class="profile_link" style="width: 98%;" id="_deletePlaylist" data-id="{$playlist->getId()}">{_delete_playlist}</a>
-                </div>
+    <div class="playlistBlock" style="display: flex;margin-top: 0px;">
+        <div class="playlistCover">
+            <a>
+                <img src="{$playlist->getCoverURL('normal')}" alt="{_playlist_cover}">
+            </a>
+
+            <div class="profile_links" style="width: 139px;">
+                <a class="profile_link" style="width: 98%;" id="_deletePlaylist" data-id="{$playlist->getId()}">{_delete_playlist}</a>
+            </div>
+        </div>
+
+        <div style="padding-left: 13px;width:75%">
+            <div class="playlistInfo">
+                <input value="{$playlist->getName()}" type="text" name="title" maxlength="125">
             </div>
 
-            <div class="PE_playlistInfo">
-                <div>
-                    <input value='{$playlist->getName()}' type="text" name="title" placeholder="{_title}" maxlength="125" />
-                </div>
-                <div class="moreInfo">
-                    <textarea placeholder="{_description}" name="description" maxlength="2045">{$playlist->getDescription()}</textarea>
-                </div>
-                <label>
-                    <input type='checkbox' name='is_unlisted' value='1' n:attr='checked => $playlist->isUnlisted()'>
-                    {_playlist_hide_from_search}
-                </label>
-                <a id='_playlistAppendTracks'>{_add_audio_verb}</a>
+            <div class="moreInfo">
+                <textarea placeholder="{_description}" name="description" maxlength="2045" style="margin-top: 11px;">{$playlist->getDescription()}</textarea>
             </div>
-        </div>
-        <div class='PE_audios generic_audio_list'>
-            <div n:foreach='$audios as $audio' class='vertical-attachment upload-item' data-id='{$audio->getId()}'>
-                <div class='vertical-attachment-content'>
-                    {include 'player.xml', audio => $audio, hideButtons => true}
-                </div>
-                <div class="vertical-attachment-remove">
-                    <div id="small_remove_button"></div>
-                </div>
-            </div>
-        </div>
-        <div class='PE_end'>
-            <input class="button" type="button" id='playlist_edit' value="{_save}">
+
+            <label>
+                <input type='checkbox' name='is_unlisted' n:attr='checked => $playlist->isUnlisted()'>
+                {_playlist_hide_from_search}
+            </label>
         </div>
     </div>
+
+    <div style="margin-top: 19px;">
+        <input id="playlist_query" type="text" style="height: 26px;" placeholder="{_header_search}">
+        <div class="playlistAudiosContainer editContainer">
+            <div id="newPlaylistAudios" n:foreach="$audios as $audio">
+                <div class="playerContainer">
+                    {include "player.xml", audio => $audio, hideButtons => true}
+                </div>
+                <div class="attachAudio addToPlaylist" data-id="{$audio->getId()}">
+                    <span>{_remove_from_playlist}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="showMoreAudiosPlaylist" data-page="2" data-playlist="{$playlist->getId()}" n:if="$pagesCount > 1">
+            {_show_more_audios}
+        </div>
+    </div>
+
+    <form method="post" id="editPlaylistForm" data-id="{$playlist->getId()}" enctype="multipart/form-data">
+        <input type="hidden" name="title" maxlength="128" />
+        <input type="hidden" name="hash" value="{$csrfToken}" />
+        <input type="hidden" name="is_unlisted" value="0" />
+        <textarea style="display:none;" name="description" maxlength="2048" />
+        <input type="hidden" name="audios">
+        <input type="file" style="display:none;" name="new_cover" accept=".jpg,.png">
+
+        <div style="float:right;margin-top: 8px;">
+            <button class="button" type="submit">{_save}</button>
+        </div>
+    </form>
+
+    <script>
+        document.querySelector("input[name='audios']").value = {$audiosIds}
+
+        u("#editPlaylistForm").on("submit", (e) => {
+            document.querySelector("#editPlaylistForm input[name='title']").value = document.querySelector(".playlistInfo input[name='title']").value
+            document.querySelector("#editPlaylistForm textarea[name='description']").value = document.querySelector(".playlistBlock textarea[name='description']").value
+            document.querySelector("#editPlaylistForm input[name='is_unlisted']").value = document.querySelector("input[name='is_unlisted']").checked ? 1 : 0
+        })
+
+        u("#editPlaylistForm input[name='new_cover']").on("change", (e) => {
+            if(!e.currentTarget.files[0].type.startsWith("image/")) {
+                fastError(tr("not_a_photo"))
+                return
+            }
+            
+            let image = URL.createObjectURL(e.currentTarget.files[0])
+
+            document.querySelector(".playlistCover img").src = image
+        })
+
+        u(".playlistCover img").on("click", (e) => {
+            document.querySelector("input[name='new_cover']").click()
+        })
+
+        document.querySelector("#editPlaylistForm input[name='new_cover']").value = ""
+    </script>
+
+    {script "js/al_playlists.js"}
 {/block}

Web/Presenters/templates/Audio/List.xml

@@ -11,8 +11,6 @@
         {_audio_new}
     {elseif $mode == 'popular'}
         {_audio_popular}
-    {elseif $mode == 'alone_audio'}
-        {$alone_audio->getName()}
     {else}
         {if $ownerId > 0}
             {_playlists} {$owner->getMorphedName("genitive", false)}
@@ -49,10 +47,6 @@
         »
         {if $isMy}{_my_playlists}{else}{_playlists}{/if}
     </div>
-
-    <div n:if="$mode == 'alone_audio'">
-        {_my_audios_small}
-    </div>
 {/block}
 
 {block content}
@@ -60,30 +54,18 @@
     
     {include "bigplayer.xml"}
 
-    <script>
-        window.__current_page_audio_context = null
-        {if $mode == 'list'}
-            window.__current_page_audio_context = {
-                name: 'entity_audios',
-                entity_id: {$ownerId},
-                page: {$page}
-            }
-        {elseif $mode == 'alone_audio'}
-            window.__current_page_audio_context = {
-                name: 'alone_audio',
-                entity_id: {$alone_audio->getId()},
-                page: 1
-            }
-        {/if}
-    </script>
+    <input n:if="$mode == 'list'" type="hidden" name="bigplayer_context" data-type="entity_audios" data-entity="{$ownerId}" data-page="{$page}">
+    <input n:if="$mode == 'new'" type="hidden" name="bigplayer_context" data-type="new_audios" data-entity="0" data-page="1">
+    <input n:if="$mode == 'popular'" type="hidden" name="bigplayer_context" data-type="popular_audios" data-entity="0" data-page="1">
+    <div class="bigPlayerDetector"></div>
 
     <div class="audiosDiv">
-        <div class="audiosContainer audiosSideContainer audiosPaddingContainer" n:if="$mode != 'playlists'">
-            <div n:if="$audiosCount <= 0" style='height: 100%;'>
+        <div style="width: 74%;" class="audiosContainer audiosPaddingContainer" n:if="$mode != 'playlists'">
+            <div n:if="$audiosCount <= 0" style='height: 50%;'>
                 {include "../components/content_error.xml", description => $ownerId > 0 ? ($ownerId == $thisUser->getId() ? tr("no_audios_thisuser") : tr("no_audios_user")) : tr("no_audios_club")}
             </div>
-            <div n:if="$audiosCount > 0" class="scroll_container">
-                <div class="scroll_node" n:foreach="$audios as $audio">
+            <div n:if="$audiosCount > 0" class="scroll_container infContainer">
+                <div class="scroll_node infObj" n:foreach="$audios as $audio">
                     {include "player.xml", audio => $audio, club => $club}
                 </div>
             </div>
@@ -99,12 +81,12 @@
             </div>
         </div>
         
-        <div class="audiosPaddingContainer audiosSideContainer audiosPaddingContainer" n:if="$mode == 'playlists'">
+        <div style="width: 71.8%;" class="audiosPaddingContainer audiosPaddingContainer" n:if="$mode == 'playlists'">
             <div n:if="$playlistsCount <= 0" style='height: 100%;'>
                 {include "../components/content_error.xml", description => $ownerId > 0 ? ($ownerId == $thisUser->getId() ? tr("no_playlists_thisuser") : tr("no_playlists_user")) : tr("no_playlists_club")}
             </div>
 
-            <div class="scroll_container playlistContainer" n:if="$playlistsCount > 0">
+            <div class="scroll_container infContainer playlistContainer" n:if="$playlistsCount > 0">
                 <div class='scroll_node' n:foreach='$playlists as $playlist'>
                     {include 'playlistListView.xml', playlist => $playlist}
                 </div>

Web/Presenters/templates/Audio/NewPlaylist.xml

@@ -19,32 +19,97 @@
 {/block}
 
 {block content}
-    <div class='PE_wrapper'>
-        <div class='PE_playlistEditPage'>
-            <div class="playlistCover" onclick="document.querySelector(`input[name='cover']`).click()">
-                <a>
-                    <input type='file' name='cover' style='display:none;' accept=".jpg,.png">
-                    <img src="/assets/packages/static/openvk/img/song.jpg" alt="{_playlist_cover}">
-                </a>
-            </div>
+    <style>
+        textarea[name='description'] {
+            padding: 4px;
+        }
 
-            <div class="PE_playlistInfo">
-                <div>
-                    <input type="text" name="title" placeholder="{_title}" maxlength="125" />
-                </div>
-                <div class="moreInfo">
-                    <textarea placeholder="{_description}" name="description" maxlength="2045" />
-                </div>
-                <label>
-                    <input type='checkbox' name='is_unlisted' value='1'>
-                    {_playlist_hide_from_search}
-                </label>
-                <a id='_playlistAppendTracks'>{_add_audio_verb}</a>
-            </div>
+        .playlistInfo {
+            width: 76%;
+            margin-left: 8px;
+        }
+    </style>
+
+    <div style="display:flex;">
+        <div class="playlistCover" onclick="document.querySelector(`#newPlaylistForm input[name='cover']`).click()">
+            <a>
+                <img src="/assets/packages/static/openvk/img/song.jpg" alt="{_playlist_cover}">
+            </a>
         </div>
-        <div class='PE_audios generic_audio_list'></div>
-        <div class='PE_end'>
-            <input class="button" type="button" id='playlist_create' value="{_create}">
+
+        <div style="padding-left: 17px;width: 75%;" class="plinfo">
+            <div>
+                <input type="text" name="title" placeholder="{_title}" maxlength="125" />
+            </div>
+            <div class="moreInfo" style="margin-top: 11px;">
+                <textarea placeholder="{_description}" name="description" maxlength="2045" />
+            </div>
+            <label>
+                <input type='checkbox' name='is_unlisted'>
+                {_playlist_hide_from_search}
+            </label>
         </div>
     </div>
+
+    <div style="margin-top: 19px;">
+        <input id="playlist_query" type="text" style="height: 26px;" placeholder="{_header_search}">
+        <div class="playlistAudiosContainer editContainer">
+            <div id="newPlaylistAudios" n:foreach="$audios as $audio">
+                <div style="width: 78%;float: left;">
+                    {include "player.xml", audio => $audio, hideButtons => true}
+                </div>
+                <div class="attachAudio addToPlaylist" data-id="{$audio->getId()}">
+                    <span>{_add_to_playlist}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="showMoreAudiosPlaylist" data-page="2" {if !is_null($_GET["gid"])}data-club="{abs($_GET['gid'])}"{/if} n:if="$pagesCount > 1">
+            {_show_more_audios}
+        </div>
+    </div>
+
+    <form method="post" id="newPlaylistForm" enctype="multipart/form-data">
+        <input type="hidden" name="title" maxlength="125" />
+        <input type="hidden" name="hash" value="{$csrfToken}" />
+        <input type="hidden" name="is_unlisted" value="0" />
+        <textarea style="display:none;" name="description" maxlength="2045" />
+        <input type="hidden" name="audios">
+        <input type="file" style="display:none;" name="cover" accept=".jpg,.png">
+
+        <div style="float: right;margin-top: 9px;">
+            <button class="button" type="submit">{_create}</button>
+        </div>
+    </form>
+
+    <script>
+        document.querySelector("input[name='audios']").value = ""
+
+        u("#newPlaylistForm").on("submit", (e) => {
+            document.querySelector("#newPlaylistForm input[name='title']").value = document.querySelector(".plinfo input[name='title']").value
+            document.querySelector("#newPlaylistForm textarea[name='description']").value = document.querySelector(".plinfo textarea[name='description']").value
+            document.querySelector("#newPlaylistForm input[name='is_unlisted']").value = document.querySelector(".plinfo input[name='is_unlisted']").checked ? 1 : 0
+        })
+
+        u("#newPlaylistForm input[name='cover']").on("change", (e) => {
+            if(!e.currentTarget.files[0].type.startsWith("image/")) {
+                fastError(tr("not_a_photo"))
+                return
+            }
+
+            let image = URL.createObjectURL(e.currentTarget.files[0])
+
+            document.querySelector(".playlistCover img").src = image
+            document.querySelector(".playlistCover img").style.display = "block"
+        })
+
+        u(".playlistCover img").on("click", (e) => {
+            document.querySelector("#newPlaylistForm input[name='cover']").value = ""
+            e.currentTarget.href = ""
+        })
+
+        document.querySelector("#newPlaylistForm input[name='cover']").value = ""
+    </script>
+
+    {script "js/al_playlists.js"}
 {/block}

Web/Presenters/templates/Audio/Playlist.xml

@@ -32,14 +32,8 @@
 
 {block content}
     {include "bigplayer.xml"}
-    <script>
-        window.__current_page_audio_context = {
-            name: 'playlist_context',
-            entity_id: {$playlist->getId()},
-            page: {$page}
-        }
-    </script>
     
+    <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;">
             {if $cover}

Web/Presenters/templates/Audio/Upload.xml

@@ -38,196 +38,217 @@
                     <li>{tr("audio_requirements_2")}</li>
                 </ul>
                 <div id="audio_upload">
-                    <input id="audio_input" multiple type="file" name="blob" accept="audio/*" style="display:none" />
-                    <input value="{_upload_button}" class="button" type="button" onclick="document.querySelector('#audio_input').click()">
+                    <form enctype="multipart/form-data" method="POST">
+                        <input type="hidden" name="name" />
+                        <input type="hidden" name="performer" />
+                        <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" />
+                        <input value="{_upload_button}" class="button" type="button" onclick="document.querySelector('#audio_input').click()">
+                    </form>
                 </div><br/>
             
                 <span>{_you_can_also_add_audio_using} <b><a href="/search?section=audios">{_search_audio_inst}</a></b>.<span>
             </div>
 
             <div id="lastStep" style="display:none;">
-                <div id="lastStepContainers"></div>
-                <div id="lastStepButtons" style="text-align: center;margin-top: 10px;">
-                    <input class="button" type="button" id="uploadMusic" value="{_upload_button}">
-                    <input class="button" type="button" id="backToUpload" onclick="document.querySelector('#audio_input').click()" value="{_select_another_file}">
-                </div>
+                <table cellspacing="7" cellpadding="0" border="0" align="center">
+                    <tbody>
+                        <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>
+                                <select name="genre">
+                                    <option n:foreach='\openvk\Web\Models\Entities\Audio::genres as $genre' n:attr="selected: $genre == 'Other'" value="{$genre}">
+                                        {$genre}
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="120" valign="top"><span class="nobold">{_lyrics}:</span></td>
+                            <td><textarea name="lyrics" style="resize: vertical;max-height: 300px;"></textarea></td>
+                        </tr>
+                        <tr>
+                            <td width="120" valign="top"></td>
+                            <td>
+                                <label style='display:block'><input type="checkbox" name="explicit">{_audios_explicit}</label>
+                                <label><input type="checkbox" name="unlisted">{_audios_unlisted}</label>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="120" valign="top"></td>
+                            <td>
+                                <input class="button" type="button" id="uploadMuziko" value="{_upload_button}">
+                                <input class="button" type="button" id="backToUpload" value="{_select_another_file}">
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>
-
-    <script type="module" n:syntax='off'>
+    
+    <script type="module">
         import * as id3 from "/assets/packages/static/openvk/js/node_modules/id3js/lib/id3.js";
+        
+        u("#audio_input").on("change", async function(e) {
+            let files = e.currentTarget.files
+            if(files.length <= 0)
+                return;
+            
+            document.querySelector("#firstStep").style.display = "none"
+            document.querySelector("#lastStep").style.display = "block"
 
-        window.__audio_upload_page = new class {
-            files_list = []
+            function fallback() {
+                console.info('Tags not found, setting default values.')
 
-            hideFirstPage() {
-                u('#firstStep').attr('style', 'display:none')
-                u('#lastStep').attr('style', 'display:block')
+                document.querySelector("#lastStep input[name=name]").value = files[0].name
+                document.querySelector("#lastStep select[name=genre]").value = "Other"
+                document.querySelector("#lastStep input[name=performer]").value = tr("track_unknown");
             }
+            
+            let tags = null
 
-            showFirstPage() {
-                u('#firstStep').attr('style', 'display:block')
-                u('#lastStep').attr('style', 'display:none')
+            try {
+                tags = await id3.fromFile(files[0]);
+            } catch(e) {
+                console.error(e)
             }
-
-            async detectTags(blob) {
-                const return_params = {
-                    performer: '',
-                    name: '',
-                    genre: '',
-                    lyrics: '',
-                    explicit: 0,
-                    unlisted: 0,
-                }
-
-                function fallback() {
-                    console.info('Tags not found, setting default values.')
-                    return_params.name = remove_file_format(blob.name)
-                    return_params.genre = 'Other'
-                    return_params.performer = tr('track_unknown')
-                }
-
-                let tags = null
-                try {
-                    tags = await id3.fromFile(blob)
-                } catch(e) {
-                    console.error(e)
-                }
-
-                console.log(tags)
-                if(tags != null) {
-                    console.log("ID" + tags.kind + " detected, setting values...")
-                    if(tags.title) {
-                        return_params.name = tags.title
-                    } else {
-                        return_params.name = remove_file_format(blob.name)
-                    }
-
-                    if(tags.artist) {
-                        return_params.performer = tags.artist
-                    } else {
-                        return_params.performer = tr('track_unknown')
-                        // todo: split performer and title from filename
-                    }
-
-                    if(tags.genre != null) {
-                        if(tags.genre.split(', ').length > 1) {
-                            const genres = tags.genre.split(', ')
-
-                            genres.forEach(genre => {
-                                if(window.openvk.audio_genres[genre]) {
-                                    return_params.genre = genre;
-                                }
-                            })
-                        } else {
-                            if(window.openvk.audio_genres.indexOf(tags.genre) != -1) {
-                                return_params.genre = tags.genre
-                            } else {
-                                console.warn("Unknown genre: " + tags.genre)
-                                return_params.genre = 'Other'
-                            }
-                        }
-                    } else {
-                        return_params.genre = 'Other'
-                    }
-
-                    if(tags.comments != null)
-                        return_params.lyrics = tags.comments
-                } else {
-                    fallback()
-                }
-
-                return return_params
-            }
-
-            async appendFile(appender) 
-            {
-                appender.info = await this.detectTags(appender.file)
-                const audio_index = this.files_list.push(appender) - 1
-                this.appendAudioFrame(audio_index)
-            }
-
-            appendAudioFrame(audio_index) {
-                const audio_element = this.files_list[audio_index]
-                if(!audio_element) {
-                    return
+            
+            console.log(tags)
+            if(tags != null) {
+                console.log("ID" + tags.kind + " detected, setting values...");
                 
-                }
-                const template = u(`
-                <div class='upload_container_element' data-index="${audio_index}">
-                    <div class='upload_container_name'>
-                        <span>${ovk_proc_strtr(escapeHtml(audio_element.file.name), 63)}</span>
-                        <div id="small_remove_button"></div>
-                    </div>
-                    <table cellspacing="7" cellpadding="0" border="0" align="center">
-                        <tbody>
-                            <tr>
-                                <td width="120" valign="top"><span class="nobold">${tr('performer')}:</span></td>
-                                <td><input value='${audio_element.info.performer}' name="performer" type="text" autocomplete="off" maxlength="80" /></td>
-                            </tr>
-                            <tr>
-                                <td width="120" valign="top"><span class="nobold">${tr('audio_name')}:</span></td>
-                                <td><input type="text" value='${audio_element.info.name}' name="name" autocomplete="off" maxlength="80" /></td>
-                            </tr>
-                            <tr>
-                                <td width="120" valign="top"><span class="nobold">${tr('genre')}:</span></td>
-                                <td>
-                                    <select name="genre"></select>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td width="120" valign="top"><span class="nobold">${tr('lyrics')}:</span></td>
-                                <td><textarea name="lyrics" style="resize: vertical;max-height: 300px;">${audio_element.info.lyrics}</textarea></td>
-                            </tr>
-                            <tr>
-                                <td width="120" valign="top"></td>
-                                <td>
-                                    <label style='display:block'><input type="checkbox" name="explicit">${tr('audios_explicit')}</label>
-                                    <label><input type="checkbox" name="unlisted">${tr('audios_unlisted')}</label>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                `)
-                window.openvk.audio_genres.forEach(genre => {
-                    template.find('select').append(`
-                        <option ${genre == audio_element.info.genre ? 'selected': ''} value='${genre}'>${genre}</option>
-                    `)
-                })
-                u('#lastStep #lastStepContainers').append(template)
-            }
-        }
+                if(tags.title != null)
+                    document.querySelector("#lastStep input[name=name]").value = tags.title;
+                else
+                    document.querySelector("#lastStep input[name=name]").value = files[0].name
+                
+                if(tags.artist != null)
+                    document.querySelector("#lastStep input[name=performer]").value = tags.artist;
+                else
+                    document.querySelector("#lastStep input[name=performer]").value = tr("track_unknown");
+                
+                if(tags.genre != null) {
+                    // if there are more than one genre
+                    if(tags.genre.split(', ').length > 1) {
+                        const genres = tags.genre.split(', ')
 
-        u(`#audio_upload input`).on('change', (e) => {
-            const files = e.target.files
-            if(files.length <= 0) {
-                return
-            }
-
-            Array.from(files).forEach(async file => {
-                let has_duplicates = false
-                const appender = {
-                    'file': file
-                }
-
-                if(!file.type.startsWith('audio/')) {
-                    makeError(tr('only_audios_accepted', escapeHtml(file.name)))
-                    return
-                }
-
-                window.__audio_upload_page.files_list.forEach(el => {
-                    if(el && file.name == el.file.name) {
-                        has_duplicates = true
+                        genres.forEach(genre => {
+                            if(document.querySelector("#lastStep select[name=genre] > option[value='" + genre + "']") != null) {
+                                document.querySelector("#lastStep select[name=genre]").value = genre;
+                            }
+                        })
+                    } else {
+                        if(document.querySelector("#lastStep select[name=genre] > option[value='" + tags.genre + "']") != null) {
+                            document.querySelector("#lastStep select[name=genre]").value = tags.genre;
+                        } else {
+                            console.warn("Unknown genre: " + tags.genre);
+                            document.querySelector("#lastStep select[name=genre]").value = "Other"
+                        }
                     }
-                })
+                } else {
+                    document.querySelector("#lastStep select[name=genre]").value = "Other"
+                }
 
-                if(!has_duplicates) {
-                    window.__audio_upload_page.appendFile(appender)
+                if(tags.comments != null)
+                    document.querySelector("#lastStep textarea[name=lyrics]").value = tags.comments
+            } else {
+                fallback()
+            }
+        });
+
+        u("#backToUpload").on("click", (e) => {
+            document.querySelector("#firstStep").style.display = "block"
+            document.querySelector("#lastStep").style.display = "none"
+
+            document.querySelector("#lastStep input[name=name]").value = ""
+            document.querySelector("#lastStep input[name=performer]").value = ""
+            document.querySelector("#lastStep select[name=genre]").value = ""
+            document.querySelector("#lastStep textarea[name=lyrics]").value = ""
+            document.querySelector("#audio_input").value = ""
+        })
+
+        u("#uploadMuziko").on("click", (e) => {
+            var name_   = document.querySelector("#audio_upload input[name=name]");
+            var perf_   = document.querySelector("#audio_upload input[name=performer]");
+            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");
+        })
+
+        $(document).on("dragover drop", (e) => {
+            e.preventDefault()
+
+            return false;
+        })
+
+        $(".container_gray").on("drop", (e) => {
+            e.originalEvent.dataTransfer.dropEffect = 'move';
+            e.preventDefault()
+
+            let file = e.originalEvent.dataTransfer.files[0]
+
+            if(!file.type.startsWith('audio/')) {
+                MessageBox(tr("error"), tr("only_audios_accepted", escapeHtml(file.name)), [tr("ok")], [() => Function.noop])
+                return;
+            }
+
+            document.getElementById("audio_input").files = e.originalEvent.dataTransfer.files
+            u("#audio_input").trigger("change")
+        })
+        
+        $("#audio_upload").on("submit", "form", (e) => {
+            e.preventDefault()
+
+            let fd = new FormData(e.currentTarget)
+            fd.append("ajax", 1)
+
+            $.ajax({
+                type: "POST",
+                url: location.href,
+                contentType: false,
+                processData: false,
+                data: fd,
+                beforeSend: function() {
+                    document.querySelector("#lastStep").classList.add("lagged")
+                    document.querySelector("#upload_container").classList.add("uploading")
+                },
+                success: (response) => {
+                    document.querySelector("#lastStep").classList.remove("lagged")
+                    document.querySelector("#upload_container").classList.remove("uploading")
+                    if(response.success) {
+                        u("#backToUpload").trigger("click")
+                        NewNotification(tr("success"), tr("audio_successfully_uploaded"), null, () => {
+                            window.location.assign(response.redirect_link)
+                        })
+                    } else {
+                        fastError(response.flash.message)
+                    }
                 }
             })
-            window.__audio_upload_page.hideFirstPage()
         })
     </script>
 {/block}

Web/Presenters/templates/Audio/bigplayer.xml

@@ -1,56 +1,56 @@
-<div n:class="bigPlayer, ctx_place, $tidy ? tidy">
-    <div class="bigPlayerWrapper">
+<div n:class="bigPlayer, $tidy ? tidy">
+    <audio class="audio" />
+    <div class="paddingLayer">
         <div class="playButtons">
-            <div class="playButton musicIcon" data-tip='simple' data-title="{_play_tip} [Space]"></div>
+            <div class="playButton musicIcon" title="{_play_tip} [Space]"></div>
                 
             <div class="arrowsButtons">
-                <div class="nextButton musicIcon" data-tip='simple' data-title=""></div>
-                <div class="backButton musicIcon" data-tip='simple' data-title=""></div>
+                <div>
+                    <div class="nextButton musicIcon"></div>
+                </div>
+
+                <div>
+                    <div class="backButton musicIcon"></div>
+                </div>
             </div>
         </div>
 
         <div class="trackPanel">
             <div class="trackInfo">
                 <div class="trackName">
-                    <span class="trackPerformers">
-                        <a>{_track_unknown}</a>
-                    </span> —
+                    <a>{_track_unknown}</a> —
                     <span>{_track_noname}</span>
                 </div>
 
-                <div class="timer">
+                <div class="timer" style="float:right">
                     <span class="time">00:00</span>
                     <span>/</span>
                     <span class="elapsedTime">-00:00</span>
                 </div>
             </div>
 
-            <div class="track">
+            <div class="track" style="margin-top: -2px;">
+                <div class="bigPlayerTip">00:00</div>
                 <div class="selectableTrack">
                     <div id='bigPlayerLengthSliderWrapper'>&nbsp;
                         <div class="slider"></div>
                     </div>
-                    <div class='selectableTrackLoadProgress'>
-                        <div class="load_bar"></div>
-                    </div>
                 </div>
             </div>
         </div>
 
         <div class="volumePanel">
-            <div class="volumePanelTrack">
-                <div class="selectableTrack">
-                    <div id='bigPlayerVolumeSliderWrapper'>&nbsp;
-                        <div class="slider"></div>
-                    </div>
+            <div class="selectableTrack">
+                <div id='bigPlayerVolumeSliderWrapper'>&nbsp;
+                    <div class="slider"></div>
                 </div>
             </div>
         </div>
 
         <div class="additionalButtons">
-            <div class="repeatButton musicIcon" data-tip='simple' data-title="{_repeat_tip} [R]" ></div>
-            <div class="shuffleButton musicIcon" data-tip='simple' data-title="{_shuffle_tip}"></div>
-            <div class="deviceButton musicIcon" data-tip='simple' data-title="{_mute_tip} [M]"></div>
+            <div class="repeatButton musicIcon" title="{_repeat_tip} [R]" ></div>
+            <div class="shuffleButton musicIcon" title="{_shuffle_tip}"></div>
+            <div class="deviceButton musicIcon" title="{_mute_tip} [M]"></div>
         </div>
     </div>
 </div>

Web/Presenters/templates/Audio/player.xml

@@ -1,25 +1,24 @@
 {php $id = $audio->getId() . rand(0, 1000)}
 {php $isWithdrawn = $audio->isWithdrawn()}
 {php $isAvailable = $audio->isAvailable()}
-{php $performers = $audio->getPerformers()}
 {php $editable = isset($thisUser) && $audio->canBeModifiedBy($thisUser)}
-<div id="audioEmbed-{$id}" data-realid="{$audio->getId()}" {if $hideButtons}data-prettyid="{$audio->getPrettyId()}"{/if} data-name="{$audio->getName()}" data-genre="{$audio->getGenre()}" n:class="audioEmbed, ctx_place, !$isAvailable ? processed, $isWithdrawn ? withdrawn" data-length="{$audio->getLength()}" data-keys="{json_encode($audio->getKeys())}" data-url="{$audio->getURL()}">
+<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 !$isAvailable}processed{/if} {if $isWithdrawn}withdrawn{/if}" data-length="{$audio->getLength()}" data-keys="{json_encode($audio->getKeys())}" data-url="{$audio->getURL()}">
     <audio class="audio" />
 
     <div id="miniplayer" class="audioEntry">
-        <div class='audioEntryWrapper' draggable='true'>
+        <div class='audioEntryWrapper' style="display: flex;" draggable='true'>
             <div class="playerButton">
                 <div class="playIcon"></div>
             </div>
 
-            <div class="status">
+            <div class="status" draggable='false'>
                 <div class="mediaInfo noOverflow">
                     <div class="info">
-                        <strong class="performer" n:foreach='$performers as $performer'>
-                            <a draggable='false' href="/search?section=audios&order=listens&only_performers=on&q={$performer}">{$performer}</a>{if $performer != end($performers)}, {/if}
+                        <strong class="performer">
+                            <a href="/search?section=audios&order=listens&only_performers=on&q={$audio->getPerformer()}">{$audio->getPerformer()}</a>
                         </strong>
                         —
-                        <span draggable='false' class="title {if !empty($audio->getLyrics())}withLyrics{/if}">{$audio->getTitle()}</span>
+                        <span class="title {if !empty($audio->getLyrics())}withLyrics{/if}">{$audio->getTitle()}</span>
                     </div>
 
                     <svg n:if="$audio->isExplicit()" class="explicitMark" xmlns="http://www.w3.org/2000/svg" height="11" viewBox="0 0 11 11" width="11">
@@ -28,7 +27,7 @@
                 </div>
             </div>
 
-            <div class="mini_timer">
+            <div class="volume">
                 <span class="nobold {if !$hideButtons}hideOnHover{/if}" data-unformatted="{$audio->getLength()}">{$audio->getFormattedLength()}</span>
                 <div class="buttons">
                     {php $hasAudio = isset($thisUser) && $audio->isInLibraryOf($thisUser)}
@@ -45,13 +44,10 @@
                 </div>
             </div>
         </div>
-        <div class="subTracks" draggable='false' n:if="!$isWithdrawn">
+        <div class="subTracks" draggable='false'>
             <div class="lengthTrackWrapper">
                 <div class="track lengthTrack">
-                    <div class="selectableTrack">
-                        <div class='selectableTrackLoadProgress'>
-                            <div class="load_bar"></div>
-                        </div>
+                    <div class="selectableTrack" n:attr="style => $isWithdrawn ? 'display: none;' : ''">
                         <div class="selectableTrackSlider">
                             <div class="slider"></div>
                         </div>

Web/Presenters/templates/Audio/tabs.xml

@@ -2,7 +2,6 @@
     <div class="verticalGrayTabs">
         <div class='with_padding'>
             <a n:if="isset($thisUser)" n:attr="id => $mode === 'list' && $isMy ? 'used' : 'ki'" href="/audios{$thisUser->getId()}">{_my_music}</a>
-            {* TODO: show upload link as and plusick (little plus) in button up*}
             <a n:if="isset($thisUser)" href="/player/upload{if $isMyClub}?gid={abs($ownerId)}{/if}">{_upload_audio}</a>
             <a n:if="isset($thisUser)" n:attr="id => $mode === 'new' ? 'used' : 'ki'" href="/search?section=audios">{_audio_new}</a>
             <a n:if="isset($thisUser)" n:attr="id => $mode === 'popular' ? 'used' : 'ki'" href="/search?section=audios&order=listens">{_audio_popular}</a>
@@ -13,7 +12,7 @@
 
             <a n:if="isset($thisUser)" href="/audios/newPlaylist">{_new_playlist}</a>
 
-            {if !$isMy && $mode !== 'popular' && $mode !== 'new' && $mode != 'alone_audio'}
+            {if !$isMy && $mode !== 'popular' && $mode !== 'new'}
                 <hr>
                 
                 <a n:if="!$isMy" n:attr="id => $mode === 'list' ? 'used' : 'ki'" href="/audios{$ownerId}">{if $ownerId > 0}{_music_user}{else}{_music_club}{/if}</a>
@@ -25,13 +24,13 @@
 
         {if $friendsAudios}
             <div class="friendsAudiosList">
-                <a href="/audios{$friend->getRealId()}" n:foreach="$friendsAudios as $friend">
+                <a href="/audios{$fr->getRealId()}" n:foreach="$friendsAudios as $fr">
                     <div class="elem">
-                        <img src="{$friend->getAvatarURL()}" />
+                        <img src="{$fr->getAvatarURL()}" />
 
                         <div class="additionalInfo">
-                            <span class="name noOverflow">{$friend->getCanonicalName()}</span>
-                            <span class="desc">{$audioStatus ? $audioStatus->getName() : tr("audios_count", $friend->getAudiosCollectionSize())}</span>
+                            <span class="name noOverflow">{$fr->getCanonicalName()}</span>
+                            <span class="desc">{$audioStatus ? $audioStatus->getName() : tr("audios_count", $fr->getAudiosCollectionSize())}</span>
                         </div>
                     </div>
                 </a>

Web/Presenters/templates/Gifts/Pick.xml

@@ -13,7 +13,7 @@
 
 {block content}
     <div class="gift_grid scroll_container">
-        <a href='/gifts?act=confirm&user={$user->getId()}&pack={$cat->getId()}&elid={$gift->getId()}' n:foreach="$gifts as $gift" n:class="scroll_node, gift_sel, !$gift->canUse($thisUser) ? disabled" data-gift="{$gift->getId()}">
+        <div n:foreach="$gifts as $gift" n:class="scroll_node, gift_sel, !$gift->canUse($thisUser) ? disabled" data-gift="{$gift->getId()}">
             <img class="gift_pic" src="{$gift->getImage(2)}" alt="{_gift}" loading=lazy />
 
             <strong class="gift_price">
@@ -29,7 +29,7 @@
                     {tr("gifts_left", $gift->getUsagesLeft($thisUser))}
                 {/if}&nbsp;
             </strong>
-        </a>
+        </div>
     </div>
 
     <div style="padding: 8px;">
@@ -41,3 +41,18 @@
         ]}
     </div>
 {/block}
+
+{block bodyScripts}
+    <script>
+        $(".gift_sel").click(function() {
+            let el = $(this);
+            if(el.hasClass("disabled"))
+                return false;
+
+            let link = "/gifts?act=confirm&user={$user->getId()}&pack={$cat->getId()}&elid=";
+            let gift = el.data("gift");
+
+            window.location.assign(link + gift);
+        });
+    </script>
+{/block}

Web/Presenters/templates/Group/Followers.xml

@@ -80,6 +80,27 @@
             
         </tbody>
     </table>
+
+    <script n:if="$club->getOwner()->getId() != $user->getId() && $manager && $thisUser->getId() == $club->getOwner()->getId()">
+        function changeOwner(club, newOwner) {
+            const action = "/groups/" + club + "/setNewOwner/" + newOwner;
+
+            MessageBox({_group_changeowner_modal_title}, `
+                {tr("group_changeowner_modal_text", htmlentities($user->getFullName()))|noescape}
+                <br/><br/>
+                <form id="transfer-owner-permissions-form" method="post">
+                    <label for="password">{_password|noescape}</label>
+                    <input type="password" id="password" name="password" required />
+                    <input type="hidden" name="hash" value={$csrfToken} />
+                </form>
+            `, [{_transfer}, {_cancel}], [
+                () => {
+                    $("#transfer-owner-permissions-form").attr("action", action);
+                    document.querySelector("#transfer-owner-permissions-form").submit();
+                }, Function.noop
+            ]);
+        }
+    </script>
 {/block}
 
 {block actions}
@@ -94,7 +115,7 @@
             {/if}
         </a>
         {if $club->getOwner()->getId() != $user->getId() && $manager && $thisUser->getId() == $club->getOwner()->getId()}
-            <a class="profile_link" href="javascript:changeOwner({$club->getId()}, {$user->getId()}, '{$user->getCanonicalName()}')">
+            <a class="profile_link" href="javascript:changeOwner({$club->getId()}, {$user->getId()})">
                 {_promote_to_owner}
             </a>
         {/if}

Web/Presenters/templates/Group/View.xml

@@ -145,7 +145,7 @@
     <div n:ifset="$thisUser" id="profile_links">
         {if $club->canBeModifiedBy($thisUser)}
             <a href="/club{$club->getId()}/edit" id="profile_link">{_edit_group}</a>
-            <a href="/club{$club->getId()}/stats" rel="nofollow" id="profile_link">{_statistics}</a>
+            <a href="/club{$club->getId()}/stats" id="profile_link">{_statistics}</a>
         {/if}
         {if $thisUser->getChandlerUser()->can("access")->model("admin")->whichBelongsTo(NULL)}
             <a href="/admin/clubs/id{$club->getId()}" id="profile_link">{_manage_group_action}</a>
@@ -168,7 +168,31 @@
         {/if}
         {var $canReport = $thisUser->getId() != $club->getOwner()->getId()}
         {if $canReport}
-        <a class="profile_link" style="display:block;" href="javascript:reportClub({$club->getId()})">{_report}</a>
+        <a class="profile_link" style="display:block;" href="javascript:reportClub()">{_report}</a>
+
+        <script>
+            function reportClub() {
+            uReportMsgTxt  = tr("going_to_report_club");
+            uReportMsgTxt += "<br/>"+tr("report_question_text");
+            uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
+
+            MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
+                (function() {
+                    res = document.querySelector("#uReportMsgInput").value;
+                    xhr = new XMLHttpRequest();
+                    xhr.open("GET", "/report/" + {$club->getId()} + "?reason=" + res + "&type=group", true);
+                    xhr.onload = (function() {
+                    if(xhr.responseText.indexOf("reason") === -1)
+                        MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
+                    else
+                        MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
+                    });
+                    xhr.send(null);
+                    }),
+                Function.noop
+                ]);
+            }
+        </script>
         {/if}
         <a n:if="!$club->isHideFromGlobalFeedEnabled()" class="profile_link" style="display:block;" id="__ignoreSomeone" data-val='{!$ignore_status ? 1 : 0}' data-id="{$club->getRealId()}">
             {if !$ignore_status}{_ignore_club}{else}{_unignore_club}{/if}
@@ -294,3 +318,7 @@
 </div>
 
 {/block}
+
+{block bodyScripts}
+    {script "js/al_despacito_wall.js"}
+{/block}

Web/Presenters/templates/Notes/List.xml

@@ -20,7 +20,7 @@
                 {tr("notes_list", $count)}
                 <span n:if="isset($thisUser) && $thisUser->getId() == $owner->getId()">
                     &nbsp;|&nbsp;
-                    <a href="/notes/create" rel='nofollow'>{_create_note}</a>
+                    <a href="/notes/create">{_create_note}</a>
                 </span>
         </div>
     </div>
@@ -99,7 +99,7 @@
                         <span n:if="isset($thisUser) && $thisUser->getId() === $dat->getOwner()->getId()">&nbsp;|&nbsp;
                             <a id="_noteDelete" href="/note{$dat->getOwner()->getId()}_{$dat->getId()}/delete">{_delete}</a>
                             &nbsp;|&nbsp;
-                            <a href="/note{$dat->getOwner()->getId()}_{$dat->getVirtualId()}/edit" rel='nofollow'>{_edit}</a>
+                            <a href="/note{$dat->getOwner()->getId()}_{$dat->getVirtualId()}/edit">{_edit}</a>
                         </span>
                     </div>
                 </div>

Web/Presenters/templates/Notes/View.xml

@@ -66,7 +66,7 @@
             <span n:if="isset($thisUser) && $thisUser->getId() === $note->getOwner()->getId()">&nbsp;|&nbsp;
                 <a id="_noteDelete" href="/note{$note->getOwner()->getId()}_{$note->getId()}/delete">{_delete}</a>
                 &nbsp;|&nbsp;
-                <a href="/note{$note->getOwner()->getId()}_{$note->getVirtualId()}/edit" rel='nofollow'>{_edit}</a>
+                <a href="/note{$note->getOwner()->getId()}_{$note->getVirtualId()}/edit">{_edit}</a>
             </span>
         </div>
     </div>

Web/Presenters/templates/Photos/UploadPhoto.xml

@@ -25,9 +25,9 @@
         </div>
     </div>
 
-    <input type="file" accept=".jpg,.png,.gif" name="files[]" multiple class="button photo_ajax_upload_button" id="uploadButton" style="display:none">
+    <input type="file" accept=".jpg,.png,.gif" name="files[]" multiple class="button" id="uploadButton" style="display:none">
 
-    <div class="container_gray photo_upload_container" style="min-height: 344px;">
+    <div class="container_gray" style="min-height: 344px;">
         <div class="insertThere"></div>
         <div class="whiteBox" style="display: block;">
             <div class="boxContent">
@@ -62,3 +62,7 @@
         uploadButton.value = ''
     </script>
 {/block}
+
+{block bodyScripts}
+    {script "js/al_photos.js"}
+{/block}

Web/Presenters/templates/Search/Index.xml

@@ -17,18 +17,8 @@
             <div class="page_wrap">
                 {if $section == 'audios' && $count > 1}
                     {include "../Audio/bigplayer.xml", tidy => true}
-                    <script>
-                        window.__current_page_audio_context = {
-                            'name': 'classic_search_context',
-                            'order': {$order},
-                            'query': {$query},
-                            'genre': {$_REQUEST['genre']},
-                            'invert': {$invert ? 1 : 0},
-                            'only_performers': {$_REQUEST['only_performers'] ? 1 : 0},
-                            'with_lyrics': {$_REQUEST['with_lyrics'] ? 1 : 0},
-                            'page': {$page}
-                        }
-                    </script>
+
+                    <input type="hidden" name="bigplayer_context" data-type="classic_search_context" data-entity='{"order":"{$order}","query":"{$query}","invert":{$invert ? 1 : 0},"only_performers":{$_REQUEST['only_performers'] ? 1 : 0},"genre":"{$_REQUEST['genre']}","with_lyrics":"{$_REQUEST['with_lyrics'] ? 1 : 0}"}' data-page="{$page}">
                 {/if}
                 <div class='summaryBar summaryBarFlex padding'>
                     <div class='summary'>

Web/Presenters/templates/Topics/Create.xml

@@ -86,4 +86,11 @@
             setupWallPostInputHandlers(1);
         });
     </script>
+
+    {if $graffiti}
+        {script "js/node_modules/react/dist/react-with-addons.min.js"}
+        {script "js/node_modules/react-dom/dist/react-dom.min.js"}
+        {script "js/vnd_literallycanvas.js"}
+        {css "js/node_modules/literallycanvas/lib/css/literallycanvas.css"}
+    {/if}
 {/block}

Web/Presenters/templates/User/Edit.xml

@@ -179,6 +179,17 @@
                     </tr>
                 </tbody>
             </table>
+            <script>
+                function toggleMaritalStatus(e) {
+                    let elem = $("#maritalstatus-user");
+                    $("#maritalstatus-user-select").empty();
+                    if ([0, 1, 8].includes(Number(e.value))) {
+                        elem.hide();
+                    } else {
+                        elem.show();
+                    }
+                }
+            </script>
         </form>
 
         {elseif $isContacts}

Web/Presenters/templates/User/Settings.xml

@@ -492,6 +492,30 @@
             <input type="hidden" name="hash" value="{$csrfToken}" />
             <input type="submit" value="{_redeem}" class="button" />
         </form>
+        <script>
+            u(".vouncher_input").on("paste", function(event) {
+                const vouncher = event.clipboardData.getData("text");
+
+                let segments;
+                if(vouncher.length === 27) {
+                    segments = vouncher.split("-");
+                    if(segments.length !== 4)
+                        segments = undefined;
+                } else if(vouncher.length === 24) {
+                    segments = chunkSubstr(vouncher, 6);
+                }
+
+                if(segments !== undefined) {
+                    document.vouncher_form.key0.value = segments[0];
+                    document.vouncher_form.key1.value = segments[1];
+                    document.vouncher_form.key2.value = segments[2];
+                    document.vouncher_form.key3.value = segments[3];
+                    document.vouncher_form.key3.focus();
+                }
+
+                event.preventDefault();
+            });
+        </script>
         
         {elseif $isInterface}
         

Web/Presenters/templates/User/View.xml

@@ -113,10 +113,10 @@
                     <a href="javascript:warnUser()" class="profile_link" style="width: 194px;">
                         {_warn_user_action}
                     </a>
-                    <a href="/admin/user{$user->getId()}/bans" class="profile_link" rel="nofollow">
+                    <a href="/admin/user{$user->getId()}/bans" class="profile_link">
                         {_blocks}
                     </a>
-                    <a href="/admin/logs?uid={$user->getId()}" class="profile_link" style="width: 194px;" rel="nofollow">
+                    <a href="/admin/logs?uid={$user->getId()}" class="profile_link" style="width: 194px;">
                         {_last_actions}
                     </a>
                 {/if}
@@ -165,10 +165,33 @@
                     </form>
                 {/if}
 
-                <a class="profile_link" style="display:block;width:96%;" href="javascript:reportUser({$user->getId()})">{_report}</a>
+                <a class="profile_link" style="display:block;width:96%;" href="javascript:reportUser()">{_report}</a>
                 <a n:if="!$user->isHideFromGlobalFeedEnabled()" class="profile_link" style="display:block;width:96%;" id="__ignoreSomeone" data-val='{!$ignore_status ? 1 : 0}' data-id="{$user->getId()}">
                     {if !$ignore_status}{_ignore_user}{else}{_unignore_user}{/if}
                 </a>
+                <script>
+                    function reportUser() {
+                        uReportMsgTxt  = tr("going_to_report_user");
+                        uReportMsgTxt += "<br/>"+tr("report_question_text");
+                        uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
+
+                        MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
+                            (function() {
+                                res = document.querySelector("#uReportMsgInput").value;
+                                xhr = new XMLHttpRequest();
+                                xhr.open("GET", "/report/" + {$user->getId()} + "?reason=" + res + "&type=user", true);
+                                xhr.onload = (function() {
+                                    if(xhr.responseText.indexOf("reason") === -1)
+                                        MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
+                                    else
+                                        MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
+                                });
+                                xhr.send(null);
+                            }),
+                            Function.noop
+                        ]);
+                    }
+                </script>
             {/if}
             <a style="width: 194px;" n:if="$user->getFollowersCount() > 0" href="/friends{$user->getId()}?act=incoming" class="profile_link">{tr("followers", $user->getFollowersCount())}</a>
         </div>
@@ -737,6 +760,51 @@
                 }
             {/if}
         </script>
+
+        <script n:if="isset($thisUser) && $user->getId() == $thisUser->getId()" n:syntax="off">
+            function setStatusEditorShown(shown) {
+                document.getElementById("status_editor").style.display = shown ? "block" : "none";
+            }
+
+            document.addEventListener("click", event => {
+                if(!event.target.closest("#status_editor") && !event.target.closest("#page_status_text"))
+                    setStatusEditorShown(false);
+            });
+
+            document.getElementById("page_status_text").onclick = setStatusEditorShown.bind(this, true);
+
+            async function changeStatus() {
+                const status = document.status_popup_form.status.value;
+                const broadcast = document.status_popup_form.broadcast.checked;
+
+                document.status_popup_form.submit.innerHTML = "<div class=\"button-loading\"></div>";
+                document.status_popup_form.submit.disabled = true;
+
+                const formData = new FormData();
+                formData.append("status", status);
+                formData.append("broadcast", Number(broadcast));
+                formData.append("hash", document.status_popup_form.hash.value);
+                const response = await ky.post("/edit?act=status", {body: formData});
+
+                if(!parseAjaxResponse(await response.text())) {
+                    document.status_popup_form.submit.innerHTML = tr("send");
+                    document.status_popup_form.submit.disabled = false;
+                    return;
+                }
+
+                if(document.status_popup_form.status.value === "") {
+                    document.querySelector("#page_status_text").innerHTML = `[ ${tr("change_status")} ]`;
+                    document.querySelector("#page_status_text").className = "edit_link page_status_edit_button";
+                } else {
+                    document.querySelector("#page_status_text").innerHTML = status;
+                    document.querySelector("#page_status_text").className = "page_status page_status_edit_button";
+                }
+
+                setStatusEditorShown(false);
+                document.status_popup_form.submit.innerHTML = tr("send");
+                document.status_popup_form.submit.disabled = false;
+            }
+        </script>
     </div>
     
     {/if}
@@ -745,3 +813,7 @@
         {include "banned.xml"}
     {/if}
 {/block}
+
+{block bodyScripts}
+    {script "js/al_despacito_wall.js"}
+{/block}

Web/Presenters/templates/User/private.xml

@@ -17,7 +17,7 @@
                 style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
         </div>
         <div id="profile_links" n:if="isset($thisUser)">
-            <a style="width: 194px;" n:if="$user->getPrivacyPermission('messages.write', $thisUser)" href="/im?sel={$user->getId()}" class="profile_link" rel='nofollow'>{_send_message}</a>
+            <a style="width: 194px;" n:if="$user->getPrivacyPermission('messages.write', $thisUser)" href="/im?sel={$user->getId()}" class="profile_link">{_send_message}</a>
             {var $subStatus = $user->getSubscriptionStatus($thisUser)}
             {if $subStatus === 0}
                 <form action="/setSub/user" method="post" class="profile_link_form" id="addToFriends">
@@ -41,7 +41,30 @@
                     <input type="submit" class="profile_link" value="{_friends_reject}" style="width: 194px;" />
                 </form>
             {/if}
-            <a class="profile_link" style="display:block;width:96%;" href="javascript:reportUser({$user->getId()})">{_report}</a>
+            <a class="profile_link" style="display:block;width:96%;" href="javascript:reportUser()">{_report}</a>
+            <script>
+                function reportUser() {
+                    uReportMsgTxt  = "Вы собираетесь пожаловаться на данного пользователя.";
+                    uReportMsgTxt += "<br/>Что именно вам кажется недопустимым в этом материале?";
+                    uReportMsgTxt += "<br/><br/><b>Причина жалобы</b>: <input type='text' id='uReportMsgInput' placeholder='Причина' />"
+
+                    MessageBox("Пожаловаться?", uReportMsgTxt, ["Подтвердить", "Отмена"], [
+                        (function() {
+                            res = document.querySelector("#uReportMsgInput").value;
+                            xhr = new XMLHttpRequest();
+                            xhr.open("GET", "/report/" + {$user->getId()} + "?reason=" + res + "&type=user", true);
+                            xhr.onload = (function() {
+                                if(xhr.responseText.indexOf("reason") === -1)
+                                    MessageBox("Ошибка", "Не удалось подать жалобу...", ["OK"], [Function.noop]);
+                                else
+                                    MessageBox("Операция успешна", "Скоро её рассмотрят модераторы", ["OK"], [Function.noop]);
+                            });
+                            xhr.send(null);
+                        }),
+                        Function.noop
+                    ]);
+                }
+            </script>
         </div>
     </div>
 

Web/Presenters/templates/components/comment.xml

@@ -57,7 +57,7 @@
                             {if $thisUser->getId() != $author->getRealId()}
                                 |
                                 {var $canReport = true}
-                                <a href="javascript:reportComment({$comment->getId()})">{_report}</a>
+                                <a href="javascript:reportComment()">{_report}</a>
                             {/if}
                             <div style="float: right; font-size: .7rem;">
                                 <a class="post-like-button" href="/comment{$comment->getId()}/like?hash={rawurlencode($csrfToken)}" data-likes='{$likesCount}' data-id="1_{$comment->getPrettyId()}" data-type='comment'>
@@ -82,3 +82,26 @@
         </tr>
     </tbody>
 </table>
+<script n:if="$canReport ?? false">
+    function reportComment() {
+        uReportMsgTxt  = tr("going_to_report_comment");
+        uReportMsgTxt += "<br/>"+tr("report_question_text");
+        uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
+
+        MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
+            (function() {
+                res = document.querySelector("#uReportMsgInput").value;
+                xhr = new XMLHttpRequest();
+                xhr.open("GET", "/report/" + {$comment->getId()} + "?reason=" + res + "&type=comment", true);
+                xhr.onload = (function() {
+                    if(xhr.responseText.indexOf("reason") === -1)
+                        MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
+                    else
+                        MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
+                    });
+                xhr.send(null);
+            }),
+            Function.noop
+        ]);
+    }
+</script>

Web/Presenters/templates/components/textArea.xml

@@ -54,11 +54,11 @@
                     <input type="checkbox" name="as_group" /> {_comment_as_group}
                 </label>
             </div>
-            <input type="hidden" name="horizontal_attachments" value="" autocomplete="off" />
-            <input type="hidden" name="vertical_attachments" value="" autocomplete="off" />
-            <input type="hidden" name="poll" value="none" autocomplete="off" />
-            <input type="hidden" id="source" name="source" value="none" autocomplete="off" />
-            <input type="hidden" name="type" value="1" autocomplete="off" />
+            <input type="hidden" name="horizontal_attachments" value="" />
+            <input type="hidden" name="vertical_attachments" value="" />
+            <input type="hidden" name="poll" value="none" />
+            <input type="hidden" id="source" name="source" value="none" />
+            <input type="hidden" name="type" value="1" />
             <input type="hidden" name="hash" value="{$csrfToken}" />
             <br/>
             <input type="submit" value="{_write}" class="button" />
@@ -104,3 +104,15 @@
         </div>
     </form>
 </div>
+
+<script>
+    u("#post-buttons{$textAreaId} input[name='horizontal_attachments']")["nodes"].at(0).value = ""
+    u("#post-buttons{$textAreaId} input[name='vertical_attachments']")["nodes"].at(0).value = ""
+</script>
+
+{if $graffiti}
+    {script "js/node_modules/react/dist/react-with-addons.min.js"}
+    {script "js/node_modules/react-dom/dist/react-dom.min.js"}
+    {script "js/vnd_literallycanvas.js"}
+    {css "js/node_modules/literallycanvas/lib/css/literallycanvas.css"}
+{/if}

Web/routes.yml

@@ -201,10 +201,14 @@ routes:
       handler: "Audio->upload"
     - url: "/audios{num}"
       handler: "Audio->list"
+    - url: "/audios/popular"
+      handler: "Audio->popular"
+    - url: "/audios/new"
+      handler: "Audio->new"
+    - url: "/audio{num}_{num}/embed.xhtml"
+      handler: "Audio->embed"
     - url: "/audio{num}/listen"
       handler: "Audio->listen"
-    - url: "/audio{num}_{num}"
-      handler: "Audio->aloneAudio"
     - url: "/audios/search"
       handler: "Audio->search"
     - url: "/audios/newPlaylist"

Web/static/css/audios.css

@@ -8,12 +8,8 @@
     padding: 8px;
 }
 
-.audiosSideContainer {
-    width: 74%;
-}
-
 .musicIcon {
-    background-image: url('/assets/packages/static/openvk/img/audios_controls.png?v=6');
+    background-image: url('/assets/packages/static/openvk/img/audios_controls.png?v=2');
     background-repeat: no-repeat;
     cursor: pointer;
 }
@@ -22,8 +18,6 @@
     filter: brightness(150%);
 }
 
-/* Main music player */
-
 .bigPlayer {
     background-color: rgb(240, 241, 242);
     margin-left: -10px;
@@ -34,61 +28,68 @@
     box-shadow: 1px 0px 8px 0px rgba(34, 60, 80, 0.2);
     position: sticky;
     top: 0px;
-    z-index: 10;
+    z-index: 1;
 }
 
-/* for search */
 .bigPlayer.tidy {
     width: 100%;
     margin-left: unset;
     margin-top: unset;
 }
 
-.bigPlayer .bigPlayerWrapper {
-    padding: 0px 14px 0px 14px;
-    display: grid;
-    grid-template-columns: 0fr 3fr 1fr 0fr;
-    align-items: center;
-    height: 46px;
+.bigPlayer.floating {
+    position: fixed;
+    z-index: 199;
+    width: 627px;
+    margin-top: -76px;
 }
 
-/* Play button and arrows */
-.bigPlayer .playButtons {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    width: 62px;
+.bigPlayer .paddingLayer {
+    padding: 0px 0px 0px 14px;
 }
 
-.bigPlayer .playButtons .playButton {
+.bigPlayer .paddingLayer .playButtons {
+    padding: 12px 0px;
+}
+
+.bigPlayer .paddingLayer .playButtons .playButton {
     width: 22px;
     height: 22px;
+    float: left;
     background-position-x: -72px;
 }
 
-.bigPlayer .playButtons .playButton.pause {
+.bigPlayer .paddingLayer .playButtons .playButton.pause {
     background-position-x: -168px;
 }
 
-.bigPlayer .playButtons .nextButton,
-.bigPlayer .playButtons .backButton {
-    width: 12px;
-    height: 12px;
+.bigPlayer .paddingLayer .playButtons .nextButton {
+    width: 16px;
+    height: 16px;
+    background-position-y: -47px;
 }
 
-.bigPlayer .playButtons .nextButton {
-    background-position: -3px -51px;
+.bigPlayer .paddingLayer .playButtons .backButton {
+    width: 16px;
+    height: 16px;
+    background-position-y: -47px;
+    background-position-x: -16px;
+    margin-left: 6px;
 }
 
-.bigPlayer .playButtons .backButton {
-    background-position: -18px -51px;
+.bigPlayer .paddingLayer .additionalButtons {
+    float: left;
+    margin-top: -6px;
+    width: 11%;
 }
 
-.bigPlayer .playButtons .arrowsButtons {
-    display: flex;
-    align-items: center;
-    gap: 9px;
-    height: 11px;
+.bigPlayer .paddingLayer .additionalButtons .repeatButton {
+    width: 14px;
+    height: 16px;
+    background-position-y: -49px;
+    background-position-x: -31px;
+    margin-left: 7px;
+    float: left;
 }
 
 .broadcastButton {
@@ -110,47 +111,55 @@
     float: left;
 }
 
-/* Track panel and volume */
-.bigPlayer .trackPanel {
-    position: relative;
-    margin-left: 15px;
+.bigPlayer .paddingLayer .additionalButtons .shuffleButton {
+    width: 14px;
+    height: 16px;
+    background-position: -50px -50px;
+    margin-left: 7px;
+    float: left;
+}
+
+.bigPlayer .paddingLayer .additionalButtons .deviceButton {
+    width: 12px;
+    height: 16px;
+    background-position: -202px -50px;
+    margin-left: 7px;
+    float: left;
+}
+
+.bigPlayer .paddingLayer .playButtons .arrowsButtons {
+    float: left;
     display: flex;
-    flex-direction: column;
-    width: 386px;
+    padding-left: 4px;
+    padding-top: 1.2px;
 }
 
-.bigPlayer .trackPanel .track {
-    margin-top: -3px;
+.bigPlayer .paddingLayer .trackPanel {
+    float: left;
+    margin-top: -13px;
+    margin-left: 13px;
+    width: 63%;
+    position: relative;
 }
 
-.tip_result {
-    width: max-content;
-    height: 11px;
-    padding: 4px;
-    top: -6px;
-    background: #f7f7f7;
-    border: 1px solid #d8d8d8;
+.bigPlayer .paddingLayer .bigPlayerTip {
+    display: none;
+    z-index: 999;
+    background: #cecece;
+    padding: 3px;
+    top: -3px;
     position: absolute;
-    z-index: 10;
     transition: all .1s ease-out;
     user-select: none;
-    transform: translate(-20%, -15%);
 }
 
-.bigPlayer .volumePanel {
-    display: flex;
-    align-items: center;
-    padding-top: 12px;
+.bigPlayer .paddingLayer .volumePanel {
     width: 73px;
-    position: relative;
+    float: left;
 }
 
-.bigPlayer .volumePanel .volumePanelTrack {
-    width: 100%;
-}
-
-.bigPlayer .slider, .audioEmbed .track .slider {
-    width: 15px;
+.bigPlayer .paddingLayer .slider, .audioEmbed .track .slider {
+    width: 18px;
     height: 7px;
     background: #606060;
     position: absolute;
@@ -159,97 +168,59 @@
     pointer-events: none;
 }
 
-.bigPlayer .trackInfo {
-    display: flex;
-    flex-direction: row;
-    height: 15px;
-    justify-content: space-between;
+.bigPlayer .paddingLayer .trackInfo .timer {
+    float: right;
+    margin-right: 8px;
+    font-size: 10px;
 }
 
-.bigPlayer .trackPanel .trackInfo, 
-.bigPlayer .trackPanel .track,
-.bigPlayer .volumePanel .volumePanelTrack {
-    padding-right: 8px;
+.bigPlayer .paddingLayer .trackInfo .timer .elapsedTime {
+    cursor: pointer;
 }
 
-.bigPlayer .trackInfo .trackName {
+.bigPlayer .paddingLayer .trackInfo .trackName {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 81%;
-    height: 16px;
+    width: 81%;
+    height: 13px;
     display: inline-block;
     line-height: 14px;
 }
 
-.bigPlayer .trackInfo .timer span,
-.bigPlayer .trackInfo .timer {
-    font-size: 9px;
+.bigPlayer .paddingLayer .trackInfo .timer span {
+    font-size: 10px;
 }
 
-.bigPlayer .trackInfo a {
+.bigPlayer .paddingLayer .trackInfo a {
     font-weight: bold;
     color: black;
 }
 
-.bigPlayer .trackInfo .timer .elapsedTime {
-    cursor: pointer;
-}
-
-/* Additional buttons */
-.bigPlayer .additionalButtons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    position: relative;
-    gap: 7px;
-    height: 43px;
-}
-
-.bigPlayer .additionalButtons .repeatButton,
-.bigPlayer .additionalButtons .shuffleButton,
-.bigPlayer .additionalButtons .deviceButton {
-    width: 13px;
-    height: 14px;
-}
-
-.bigPlayer .additionalButtons .repeatButton {
-    background-position: -32px -49px;
-}
-
-.bigPlayer .additionalButtons .shuffleButton {
-    background-position: -50px -50px;
-}
-
-.bigPlayer .additionalButtons .deviceButton {
-    background-position: -201px -50px;
-}
-
-.bigPlayer .trackInfo a:hover {
+.bigPlayer .paddingLayer .trackInfo a:hover {
     text-decoration: underline;
     cursor: pointer;
 }
 
-.bigPlayer .trackPanel .track .selectableTrack > div {
-    width: 96%;
+.bigPlayer .paddingLayer .trackPanel .track .selectableTrack > div {
+    width: 95%;
     position: relative;
 }
 
-.bigPlayer .volumePanel .selectableTrack > div {
+.bigPlayer .paddingLayer .volumePanel .selectableTrack > div {
     position: relative;
-    width: 77%;
+    width:72%
 }
 
 .audioEmbed .track > .selectableTrack, .bigPlayer .selectableTrack {
     margin-top: 3px;
-    width: 100%;
+    width: calc(100% - 8px);
     border-top: #606060 1px solid;
     height: 6px;
     position: relative;
     user-select: none;
 }
 
-/* Audio miniplayer */
 #audioEmbed {
     cursor: pointer;
     user-select: none;
@@ -265,26 +236,6 @@
     border: 1px solid #8B8B8B;
 }
 
-/* Audio states */
-.audioEntry {
-    width: 100%;
-    height: 100%;
-}
-
-.audioEntry .audioEntryWrapper {
-    padding: 9px 9px;
-    display: grid;
-    grid-template-columns: 0fr 10fr 1fr;
-    align-items: center;
-    gap: 9px;
-    height: 17px;
-    position: relative;
-}
-
-.audioEntry .audioEntryWrapper.compact {
-    padding: 10px 0px;
-}
-
 .audioEntry.nowPlaying {
     background: #606060;
     outline: 1px solid #4f4f4f;
@@ -300,35 +251,10 @@
     border-radius: inherit !important;
 }
 
-.audioEntry.nowPlaying .performer a,
-.audioEntry.nowPlaying .performer {
+.audioEntry.nowPlaying .performer a {
     color: #f4f4f4 !important;
 }
 
-.audioEmbed.withdrawn .status > *, .audioEmbed.processed .playerButton > *, .audioEmbed.withdrawn .playerButton > * {
-    pointer-events: none;
-}
-
-.audioEmbed.withdrawn {
-    opacity: 0.8;
-}
-
-.audioEmbed.processed {
-    filter: opacity(0.6);
-}
-
-/* Audio subparts */
-.audioEntry .playerButton {
-    position: relative;
-    width: 16px;
-    height: 16px;
-}
-
-.audioEntry .nobold {
-    text-align: center;
-    min-width: 28px;
-}
-
 .audioEntry .performer a {
     color: #4C4C4C;
 }
@@ -341,12 +267,18 @@
     color: white;
 }
 
-.audioEntry .mini_timer {
+.audioEntry .volume {
     display: flex; 
     flex-direction: column;
+    width: 14%;
 }
 
-.audioEntry.nowPlaying .mini_timer .nobold {
+.audioEntry .nobold {
+    text-align: center;
+    margin-top: 12px;
+}
+
+.audioEntry.nowPlaying .volume .nobold {
     color: white !important;
 }
 
@@ -354,7 +286,6 @@
     fill: #ffffff;
 }
 
-/* Audio icons */
 .audioEntry.nowPlaying .buttons .musicIcon.edit-icon {
     background-position: -152px -51px;
 }
@@ -379,12 +310,25 @@
     background-position: -108px -67px;
 }
 
+.audioEntry {
+    height: 100%;
+    position: relative;
+    width: 100%;
+    min-height: 39px;
+}
+
+.audioEntry .playerButton {
+    position: relative;
+    padding: 10px 9px 9px 9px;
+    width: 16px;
+    height: 16px;
+}
+
 .audioEntry .subTracks {
     display: none;
     padding-bottom: 5px;
     padding-left: 8px;
     padding-right: 12px;
-    margin-top: -5px;
 }
 
 .audioEntry .subTracks.shown {
@@ -404,37 +348,25 @@
 }
 
 .audioEntry .status {
-    /*position: relative;*/
-    height: 14px;
     overflow: hidden;
+    display: grid;
+    grid-template-columns: 1fr;
+    width: 85%;
+    height: 23px;
+    margin-top: 12px;
 }
 
 .audioEntry .status .mediaInfo {
     cursor: pointer;
+    display: flex;
     line-height: 14px;
     width: 100%;
 }
 
-.audioEntry .status .mediaInfo .info {
-    display: inline;
-}
-
-@keyframes marquee {
-    from { left: -100%; }
-    to { left: 100%; }
-}
-
-.audioEntry .status:hover .mediaInfo {
+.overflowedName {
     position: absolute;
-    z-index: 2;
-    overflow: visible;
-    white-space: wrap;
-    text-overflow: unset;
-    width: 83%;
-}
-
-.audioEntry .status:hover .mediaInfo .info {
-    width: 100%;
+    z-index: 99;
+    width: 80% !important;
 }
 
 .audioEntry .status strong {
@@ -449,41 +381,13 @@
     width: 100%;
 }
 
-.selectableTrack .selectableTrackLoadProgress {
-    top: -13px;
-    z-index: -1;
-    overflow: hidden;
-    height: 7px;
-    width: 100% !important;
-}
-
-.selectableTrack .selectableTrackLoadProgress .load_bar {
-    background: #e7e7e7;
-    border-bottom: 1px solid #dfdfdf;
-    box-sizing: border-box;
-    height: 7px;
-    position: absolute;
-}
-
-.audioEmbed .selectableTrack .selectableTrackLoadProgress {
-    position: absolute;
-    top: 0px;
-}
-
 .audioEmbed .track .selectableTrack .selectableTrackSlider {
     position: relative;
     width: calc(100% - 18px);
 }
 
-.audioEmbed .subTracks .lengthTrackWrapper,
-.audioEmbed .subTracks .volumeTrackWrapper {
+.audioEmbed .subTracks .lengthTrackWrapper {
     width: 100%;
-    position: relative;
-}
-
-.audioEmbed .subTracks .lengthTrackWrapper .tip_result,
-.audioEmbed .subTracks .volumeTrackWrapper .tip_result {
-    top: -20px;
 }
 
 .audioEmbed .subTracks .volumeTrackWrapper {
@@ -504,71 +408,86 @@
     display: flex;
 }
 
-.audioEntry:hover .mini_timer .hideOnHover {
+.audioEntry:hover .volume .hideOnHover {
     display: none;
 }
 
 .audioEntry .buttons {
     display: none;
     flex-direction: row-reverse;
-    justify-content: flex-start;
-    align-items: center;
     gap: 5px;
+    align-items: center;
+    justify-content: flex-start;
+    width: 62px;
+    height: 20px;
     position: absolute;
-    z-index: 9;
-    right: 10px;
-    top: 0;
+    right: 3%;
+    top: 2px;
+    margin-top: 7px;
     /* чтоб избежать заедания во время ховера кнопки добавления */
     clip-path: inset(0 0 0 0);
-    width: 62px;
-    height: 100%;
-}
-
-.audioEntry .buttons .edit-icon,
-.audioEntry .buttons .download-icon,
-.audioEntry .buttons .add-icon,
-.audioEntry .buttons .add-icon-group,
-.audioEntry .buttons .report-icon,
-.add-icon-noaction,
-.audioEntry .buttons .remove-icon,
-.audioEntry .buttons .remove-icon-group {
-    width: 11px;
-    height: 11px;
 }
 
 .audioEntry .buttons .edit-icon {
+    width: 11px;
+    height: 11px;
+    float: right;
     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;
 }
 
 .audioEntry .buttons .add-icon-group {
+    width: 14px;
+    height: 11px;
+    float: right;
     background-position: -94px -52px;
     transition: margin-right 0.1s ease-out, opacity 0.1s ease-out;
 }
 
 .audioEntry .buttons .report-icon {
-    background-position: -51px -67px;
+    width: 12px;
+    height: 11px;
+    float: right;
+    background-position: -50px -67px;
+}
+
+.add-icon-noaction {
+    background-image: url('/assets/packages/static/openvk/img/audios_controls.png');
+    width: 11px;
+    height: 11px;
+    float: right;
+    background-position: -94px -52px;
+    margin-top: 2px;
+    margin-right: 2px;
 }
 
 .audioEntry .buttons .remove-icon {
+    width: 11px;
+    height: 11px;
+    float: right;
     background-position: -108px -52px;
 }
 
 .audioEntry .buttons .remove-icon-group {
     width: 13px;
     height: 11px;
+    float: right;
     background-position: -122px -52px;
 }
 
-/* Lyrics */
-
 .audioEmbed .lyrics {
     display: none;
     padding: 6px 33px 10px 33px;
@@ -587,6 +506,14 @@
     text-decoration: underline;
 }
 
+.audioEmbed.withdrawn .status > *, .audioEmbed.processed .playerButton > *, .audioEmbed.withdrawn .playerButton > * {
+    pointer-events: none;
+}
+
+.audioEmbed.withdrawn {
+    opacity: 0.8;
+}
+
 .playlistCover img {
     max-width: 135px;
     max-height: 135px;
@@ -606,28 +533,6 @@
     width: 100%;
 }
 
-.PE_playlistEditPage {
-    display: flex;
-    gap: 10px;
-}
-
-.PE_playlistEditPage .PE_playlistInfo {
-    width: 76%;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.PE_playlistEditPage textarea[name='description'] {
-    padding: 4px;
-    font-size: 11px;
-}
-
-.PE_end {
-    text-align: right;
-    margin-top: 10px;
-}
-
 /* playlist listview */
 
 .playlistListView {
@@ -712,10 +617,10 @@
 }
 
 .explicitMark {
-    width: 13px;
+    margin-top: 2px;
+    margin-left: 3px;
+    width: 11px;
     height: 11px;
-    margin-bottom: -2px;
-    display: inline-block;
 }
 
 .explicitMark path {
@@ -904,146 +809,3 @@
     margin-top: 6px;
     padding: 1px;
 }
-
-/* AJAX player */
-#ajax_audio_player {
-    transition: background .1s ease-out;
-    background: rgba(44, 44, 44, 0.7);
-    padding: 1px;
-    width: 500px;
-    height: 37px;
-    position: fixed;
-    z-index: 1025;
-    border-radius: 3px;
-}
-
-#ajax_audio_player.hidden {
-    display: none;
-}
-
-#ajax_audio_player #aj_player {
-    position: relative;
-    height: 100%;
-}
-
-#ajax_audio_player #aj_player #aj_player_internal_controls {
-    padding: 7px 8px;
-    display: flex;
-    gap: 7px;
-}
-
-#ajax_audio_player.ui-draggable-dragging {
-    background: rgba(20, 20, 20, 0.9);
-}
-
-#ajax_audio_player #aj_player_close_btn, #ajax_audio_player #aj_player_play {
-    padding: 3px 0px;
-}
-
-#ajax_audio_player #aj_player_close_btn, 
-#ajax_audio_player #aj_player_play #aj_player_play_btn,
-#ajax_audio_player #aj_player_buttons > div {
-    background: url('/assets/packages/static/openvk/img/audios_controls.png?v=6');
-    background-repeat: no-repeat;
-    cursor: pointer;
-}
-
-#ajax_audio_player #aj_player_close_btn {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 10px;
-    height: 9px;
-    background-position: 0px -77px;
-    opacity: 0.6;
-}
-
-#ajax_audio_player #aj_player_close_btn:hover {
-    opacity: 1;
-}
-
-#ajax_audio_player #aj_player_play #aj_player_play_btn {
-    width: 16px;
-    height: 16px;
-    background-position: -147px -28px;
-}
-
-#ajax_audio_player #aj_player_play #aj_player_play_btn.paused {
-    background-position: -165px -28px;
-}
-
-#ajax_audio_player #aj_player_track {
-    width: 100%;
-    position: relative;
-}
-
-#ajax_audio_player #aj_player_track #aj_player_track_name {
-    display: flex;
-    justify-content: space-between;
-}
-
-#ajax_audio_player #aj_player_track #aj_player_track_name #aj_player_track_title,
-#ajax_audio_player #aj_player_track #aj_player_track_name #aj_player_track_title b, 
-#ajax_audio_player #aj_player_track #aj_player_track_name #aj_player_track_title span,
-#ajax_audio_player #aj_player_track #aj_player_track_name span {
-    color: white;
-}
-
-#ajax_audio_player #aj_time {
-    cursor: pointer;
-}
-
-#ajax_audio_player #aj_time:hover {
-    text-decoration: underline;
-}
-
-#ajax_audio_player .selectableTrack {
-    width: 100%;
-    position: relative;
-    height: 6px;
-    border-top: #ffffff 1px solid;
-    user-select: none;
-}
-
-#ajax_audio_player .selectableTrack .slider {
-    width: 11px;
-    height: 6px;
-    background: #ffffff;
-    position: absolute;
-}
-
-#ajax_audio_player #aj_player_volume {
-    width: 60px;
-    padding-top: 15px;
-    position: relative;
-}
-
-#ajax_audio_player #aj_player_buttons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
-    opacity: 0.9;
-}
-
-#ajax_audio_player #aj_player_buttons #aj_player_previous {
-    width: 14px;
-    height: 12px;
-    background-position: -194px -5px;
-}
-
-#ajax_audio_player #aj_player_buttons #aj_player_repeat {
-    width: 14px;
-    height: 13px;
-    background-position: -233px -5px;
-}
-
-#ajax_audio_player #aj_player_buttons #aj_player_repeat.pressed {
-    opacity: 0.6;
-}
-
-#ajax_audio_player #aj_player_buttons #aj_player_next {
-    width: 15px;
-    height: 12px;
-    background-position: -214px -5px;
-}

Web/static/css/dialog.css

@@ -139,7 +139,7 @@ body.dimmed > .dimmer #absolute_territory {
 }
 
 .miniplayer {
-    position: fixed;
+    position: absolute;
     background: rgba(54, 54, 54, 0.95);
     border-radius: 3px;
     min-width: 299px;

Web/static/css/main.css

@@ -2261,25 +2261,6 @@ table td[width="120"] {
     margin: 0;
 }
 
-#upload_container #lastStepContainers {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-#upload_container .upload_container_element {
-    border: 1px solid #d6d6d6;
-    background: #f6f6f6;
-}
-
-#upload_container .upload_container_element .upload_container_name {
-    padding: 5px 5px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-
 #audio_upload {
     width: 350px;
     margin: 20px auto;
@@ -2573,55 +2554,57 @@ a.poll-retract-vote {
     border-radius: 3px;
 }
 
-.vertical-attachment {
+.post-vertical .vertical-attachment {
     display: grid;
     grid-template-columns: 1fr 0fr;
 }
 
-.vertical-attachment:first-of-type {
+.post-vertical .vertical-attachment:first-of-type {
     margin-top: 7px;
 }
 
-.vertical-attachment .audioEntry {
+.post-vertical .vertical-attachment .audioEntry {
     max-height: 28px;
     min-height: 18px;
 }
 
-.vertical-attachment .audioEntry:hover {
+.post-vertical .vertical-attachment .audioEntry:hover {
     background: unset !important;
 }
 
-.vertical-attachment .audioEntry .buttons {
+.post-vertical .vertical-attachment .audioEntry .playerButton {
+    padding: 0px 3px 0px 0px;
+}
+
+.post-vertical .vertical-attachment .audioEntry .buttons {
     display: none;
 }
 
-.vertical-attachment .audioEntry .status {
+.post-vertical .vertical-attachment .audioEntry .status {
     margin-top: 1px;
     margin-left: 2px;
     height: 15px;
 }
 
-.vertical-attachment .audioEntry .nobold {
+.post-vertical .vertical-attachment .audioEntry .nobold {
     margin-top: 1px;
 }
 
-.vertical-attachment .audioEntry .subTracks {
-    padding-left: 0px;
+.post-vertical .vertical-attachment .audioEntry .subTracks {
+    padding-bottom: 2px;
+    padding-left: 3px;
     padding-right: 0px;
-    margin-top: 2px;
 }
 
-.vertical-attachment .audioEntry .audioEntryWrapper {
-    height: 14px;
-    padding: 0px 4px 0px 0px;
-    gap: 2px;
+.post-vertical .vertical-attachment .audioEntry .audioEntryWrapper {
+    height: 18px;
 }
 
-.vertical-attachment .vertical-attachment-content { 
+.post-vertical .vertical-attachment .vertical-attachment-content { 
     max-height: 27px;
 }
 
-.vertical-attachment .vertical-attachment-content .overflowedName {
+.post-vertical .vertical-attachment .vertical-attachment-content .overflowedName {
     position: initial;
     width: 100% !important;
 }
@@ -2850,10 +2833,6 @@ a.poll-retract-vote {
     z-index: 2;
 }
 
-.page_header.search_expanded_at_all .header_navigation #search_box #searchBoxFastTips.shown {
-    display: none;
-}
-
 .page_header.search_expanded .link {
     display: none;
 }
@@ -3580,7 +3559,7 @@ hr {
     cursor: pointer;
 }
 
-#upload_container .upload_container_element .upload_container_name.uploading {
+#upload_container.uploading {
     background: white url('/assets/packages/static/openvk/img/progressbar.gif') !important;
     background-position-x: 0% !important;
     background-position-y: 0% !important;
@@ -3878,36 +3857,3 @@ hr {
 .tippy-box[data-animation='up_down'][data-state='visible'] {
     inset: auto auto 0px 0px;
 }
-
-.ctx_place {
-    position: relative;
-}
-
-#ctx_menu {
-    position: absolute;
-    z-index: 100;
-    background: #f7f7f7;
-    border: 1px solid #d8d8d8;
-    display: flex;
-    flex-direction: column;
-    min-width: 185px;
-}
-
-#ctx_menu a {
-    padding: 6px 6px 6px 26px;
-    color: black;
-    position: relative;
-}
-
-#ctx_menu a:hover {
-    background: #e9e9e9;
-}
-
-#ctx_menu a.pressed::before {
-    content: '✓';
-    display: inline-block;
-    position: absolute;
-    left: 9px;
-    top: 3px;
-    font-size: 15px;
-}

Web/static/js/al_despacito_wall.js

@@ -1,3 +1,4 @@
+const contentPage = document.querySelector(".page_content");
 const rootElement = document.documentElement;
 
 // охуенное название файла, КТО ЭТО ПРИДУМАЛ КРАСАВА Я ИЗ КОМНАТЫ С ЭТОГО УЛЕТЕЛ НАХУЙ
@@ -7,11 +8,11 @@ let scrolledAndHidden = false;
 let smallBlockObserver = new IntersectionObserver(entries => {
     entries.forEach(x => {
         window.requestAnimationFrame(() => {
-            let pastHeight = u('.page_content').nodes[0].getBoundingClientRect().height;
+            let pastHeight = contentPage.getBoundingClientRect().height;
             if(x.isIntersecting)
-                u('.page_content').nodes[0].classList.remove("overscrolled");
+                contentPage.classList.remove("overscrolled");
             else
-            u('.page_content').nodes[0].classList.add("overscrolled");
+                contentPage.classList.add("overscrolled");
 
             // let currentHeight = contentPage.getBoundingClientRect().height;
             // let ratio         = currentHeight / pastHeight;
@@ -21,7 +22,7 @@ let smallBlockObserver = new IntersectionObserver(entries => {
             // То что я задокументировал - работает мегакриво.
             // Пусть юзер и проскролливает какую-то часть контента, зато не получит
             // эпилепсии при использовании :)
-        }, u('.page_content').nodes[0]);
+        }, contentPage);
     });
 }, {
     root: null, // screen

Web/static/js/al_feed.js

@@ -157,7 +157,7 @@ u(document).on('click', '#__feed_settings_link', (e) => {
                         FINAL_URL.searchParams.delete('return_banned')
                     }
                     
-                    window.router.route(FINAL_URL.href)
+                    window.location.assign(FINAL_URL.href)
                 })
                 
                 COUNT.forEach(item => {

Web/static/js/al_photos.js

@@ -1,4 +1,4 @@
-$(document).on("change", ".photo_ajax_upload_button", (e) => {
+$(document).on("change", "#uploadButton", (e) => {
     let iterator = 0
 
     if(e.currentTarget.files.length > 10) {
@@ -56,7 +56,7 @@ $(document).on("change", ".photo_ajax_upload_button", (e) => {
                         <textarea style="margin-left: 62px; resize: none;" maxlength="255"></textarea>
                     </div>
                     <div class="uploadedImage">
-                        <a onclick="OpenMiniature(event, '${photo.link}', null, '${photo.pretty_id}', null)"><img width="125" src="${photo.url}"></a>
+                        <a href="${photo.link}" target="_blank"><img width="125" src="${photo.url}"></a>
                         <a class="profile_link" style="width: 125px;" id="deletePhoto" data-id="${photo.vid}" data-owner="${photo.owner}">${tr("delete")}</a>
                         <!--<div class="smallFrame" style="margin-top: 6px;">
                             <div class="smallBtn">${tr("album_poster")}</div>
@@ -76,7 +76,7 @@ $(document).on("change", ".photo_ajax_upload_button", (e) => {
     xhr.send(photos)
 })
 
-$(document).on("click", ".photo_upload_container #endUploading", (e) => {
+$(document).on("click", "#endUploading", (e) => {
     let table = document.querySelector("#photos")
     let data  = new FormData()
     let arr   = new Map();
@@ -108,7 +108,7 @@ $(document).on("click", ".photo_upload_container #endUploading", (e) => {
             document.querySelector(".page_content .insertPhotos").innerHTML = ""
             document.getElementById("endUploading").style.display = "none"
     
-            NewNotification(tr("photos_successfully_uploaded"), tr("click_to_go_to_album"), null, () => {window.router.route({url:`/album${result.owner}_${result.album}`})})
+            NewNotification(tr("photos_successfully_uploaded"), tr("click_to_go_to_album"), null, () => {window.location.assign(`/album${result.owner}_${result.album}`)})
             
             document.querySelector(".whiteBox").style.display = "block"
             document.querySelector(".insertAgain").append(document.getElementById("fakeButton"))
@@ -120,7 +120,7 @@ $(document).on("click", ".photo_upload_container #endUploading", (e) => {
     xhr.send(data)
 })
 
-$(document).on("click", ".photo_upload_container #deletePhoto", (e) => {
+$(document).on("click", "#deletePhoto", (e) => {
     let data  = new FormData()
     data.append("hash", u("meta[name=csrf]").attr("value"))
 
@@ -154,19 +154,19 @@ $(document).on("dragover drop", (e) => {
     return false;
 })
 
-$(document).on("dragover", ".photo_upload_container", (e) => {
+$(".container_gray").on("dragover", (e) => {
     e.preventDefault()
     document.querySelector("#fakeButton").classList.add("dragged")
     document.querySelector("#fakeButton").value = tr("drag_files_here")
 })
 
-$(document).on("dragleave", ".photo_upload_container", (e) => {
+$(".container_gray").on("dragleave", (e) => {
     e.preventDefault()
     document.querySelector("#fakeButton").classList.remove("dragged")
     document.querySelector("#fakeButton").value = tr("upload_picts")
 })
 
-$(document).on("drop", ".photo_upload_container", (e) => {
+$(".container_gray").on("drop", (e) => {
     e.originalEvent.dataTransfer.dropEffect = 'move';
     e.preventDefault()
 
@@ -190,7 +190,7 @@ $(document).on("drop", ".photo_upload_container", (e) => {
     u("#uploadButton").trigger("change")
 })
 
-u(document).on("paste", ".photo_upload_container", (e) => {
+u(".container_gray").on("paste", (e) => {
     if(e.clipboardData.files.length > 0 && e.clipboardData.files.length < 10) {
         document.getElementById("uploadButton").files = e.clipboardData.files;
         u("#uploadButton").trigger("change")

Web/static/js/al_playlists.js

@@ -0,0 +1,113 @@
+let context_type = "entity_audios"
+let context_id = 0
+
+if(document.querySelector("#editPlaylistForm")) {
+    context_type = "playlist_context"
+    context_id = document.querySelector("#editPlaylistForm").dataset.id
+}
+
+if(document.querySelector(".showMoreAudiosPlaylist") && document.querySelector(".showMoreAudiosPlaylist").dataset.club != null) {
+    context_type = "entity_audios"
+    context_id = Number(document.querySelector(".showMoreAudiosPlaylist").dataset.club) * -1
+}
+
+let searcher = new playersSearcher(context_type, context_id)
+
+searcher.successCallback = (response, thisc) => {
+    let domparser = new DOMParser()
+    let result = domparser.parseFromString(response, "text/html")
+    let pagesCount = Number(result.querySelector("input[name='pagesCount']").value)
+    let count = Number(result.querySelector("input[name='count']").value)
+
+    result.querySelectorAll(".audioEmbed").forEach(el => {
+        let id = Number(el.dataset.realid)
+        let isAttached = (document.querySelector("input[name='audios']").value.includes(`${id},`))
+
+        document.querySelector(".playlistAudiosContainer").insertAdjacentHTML("beforeend", `
+            <div id="newPlaylistAudios">
+                <div class="playerContainer">
+                    ${el.outerHTML}
+                </div>
+                <div class="attachAudio addToPlaylist" data-id="${id}">
+                    <span>${isAttached ? tr("remove_from_playlist") : tr("add_to_playlist")}</span>
+                </div>
+            </div>
+        `)
+    })
+
+    if(count < 1)
+        document.querySelector(".playlistAudiosContainer").insertAdjacentHTML("beforeend", `
+            ${tr("no_results")}
+        `)
+
+    if(Number(thisc.page) >= pagesCount)
+        u(".showMoreAudiosPlaylist").remove()
+    else {
+        if(document.querySelector(".showMoreAudiosPlaylist") != null) {
+            document.querySelector(".showMoreAudiosPlaylist").setAttribute("data-page", thisc.page + 1)
+
+            if(thisc.query != "") {
+                document.querySelector(".showMoreAudiosPlaylist").setAttribute("data-query", thisc.query)
+            }
+
+            document.querySelector(".showMoreAudiosPlaylist").style.display = "block"
+        } else {
+            document.querySelector(".playlistAudiosContainer").parentNode.insertAdjacentHTML("beforeend", `
+                <div class="showMoreAudiosPlaylist" data-page="2" 
+                ${thisc.query != "" ? `"data-query="${thisc.query}"` : ""} 
+                ${thisc.context_type == "entity_audios" ? `"data-playlist="${thisc.context_id}"` : ""}
+                ${thisc.context_id < 0 ? `"data-club="${thisc.context_id}"` : ""}>
+                    ${tr("show_more_audios")}
+                </div>
+            `)
+        }
+    }
+
+    u("#loader").remove()
+}
+
+searcher.beforesendCallback = () => {
+    document.querySelector(".playlistAudiosContainer").parentNode.insertAdjacentHTML("beforeend", `<img id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">`)
+
+    if(document.querySelector(".showMoreAudiosPlaylist") != null)
+        document.querySelector(".showMoreAudiosPlaylist").style.display = "none"
+}
+
+searcher.errorCallback = () => {
+    fastError("Error when loading players")
+}
+
+searcher.clearContainer = () => {
+    document.querySelector(".playlistAudiosContainer").innerHTML = ""
+}
+
+$(document).on("click", ".showMoreAudiosPlaylist", (e) => {
+    searcher.movePage(Number(e.currentTarget.dataset.page))
+})
+
+$(document).on("change", "input#playlist_query", async (e) => {
+    e.preventDefault()
+    
+    await new Promise(r => setTimeout(r, 500));
+
+    if(e.currentTarget.value === document.querySelector("input#playlist_query").value) {
+        searcher.clearContainer()
+
+        if(e.currentTarget.value == "") {
+            searcher.context_type = "entity_audios"
+            searcher.context_id = 0
+            searcher.query = ""
+
+            searcher.movePage(1)
+
+            return
+        }
+
+        searcher.context_type = "search_context"
+        searcher.context_id = 0
+        searcher.query = e.currentTarget.value
+
+        searcher.movePage(1)
+        return;
+    }
+})

Web/static/js/al_suggestions.js

@@ -161,7 +161,6 @@ function loadMoreSuggestedPosts() {
 // нажатие на "x предложенных записей"
 $(document).on("click", ".sugglist a", (e) => {
     e.preventDefault()
-    e.stopPropagation()
     
     if(e.currentTarget.getAttribute("data-toogled") == null || e.currentTarget.getAttribute("data-toogled") == "false") {
         e.currentTarget.setAttribute("data-toogled", "true")

Web/static/js/al_wall.js

@@ -53,9 +53,8 @@ u(document).on('click', '.menu_toggler', (e) => {
     }
 })
 
-u(document).on("click", ".post-like-button", function(e) {
+$(document).on("click", ".post-like-button", function(e) {
     e.preventDefault();
-    e.stopPropagation()
     
     var thisBtn = u(this).first();
     var link    = u(this).attr("href");
@@ -91,7 +90,6 @@ async function OpenMiniature(e, photo, post, photo_id, type = "post") {
     костыли но смешные однако
     */
     e.preventDefault();
-    e.stopPropagation()
 
     // Значения для переключения фоток
 
@@ -424,7 +422,7 @@ async function OpenVideo(video_arr = [], init_player = true)
 
         u('body').append(miniplayer)
         miniplayer.find('.miniplayer-body').nodes[0].append(msgbox.getNode().find('.center-part > *').nodes[0])
-        miniplayer.attr('style', `left:100px;top:0px;`)
+        miniplayer.attr('style', `left:100px;top:${scrollY}px;`)
         miniplayer.find('#__miniplayer_return').on('click', (e) => {
             msgbox.reveal()
             msgbox.getNode().find('.center-part').nodes[0].append(miniplayer.find('.miniplayer-body > *').nodes[0])
@@ -436,7 +434,7 @@ async function OpenVideo(video_arr = [], init_player = true)
             u('.miniplayer').remove()
         })
 
-        $('.miniplayer').draggable({cursor: 'grabbing', containment: 'window', cancel: '.miniplayer-body'})
+        $('.miniplayer').draggable({cursor: 'grabbing', containment: 'body', cancel: '.miniplayer-body'})
         $('.miniplayer').resizable({
             maxHeight: 2000,
             maxWidth: 3000,
@@ -450,7 +448,6 @@ async function OpenVideo(video_arr = [], init_player = true)
 
 u(document).on('click', '#videoOpen', (e) => {
     e.preventDefault()
-    e.stopPropagation()
 
     try {
         const target = e.target.closest('#videoOpen')
@@ -473,7 +470,6 @@ u(document).on('keydown', '.edit_menu #write', (e) => {
         e.target.closest('.edit_menu').querySelector('#__edit_save').click()
 })
 
-// Migrated from inline start
 function reportPhoto(photo_id) {
     uReportMsgTxt  = tr("going_to_report_photo");
     uReportMsgTxt += "<br/>"+tr("report_question_text");
@@ -518,280 +514,6 @@ function reportVideo(video_id) {
     ]);
 }
 
-function reportUser(user_id) {
-    uReportMsgTxt  = tr("going_to_report_user");
-    uReportMsgTxt += "<br/>"+tr("report_question_text");
-    uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
-
-    MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
-        (function() {
-            res = document.querySelector("#uReportMsgInput").value;
-            xhr = new XMLHttpRequest();
-            xhr.open("GET", "/report/" + user_id + "?reason=" + res + "&type=user", true);
-            xhr.onload = (function() {
-                if(xhr.responseText.indexOf("reason") === -1)
-                    MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
-                else
-                    MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
-            });
-            xhr.send(null);
-        }),
-        Function.noop
-    ]);
-}
-
-function reportComment(comment_id) {
-    uReportMsgTxt  = tr("going_to_report_comment");
-    uReportMsgTxt += "<br/>"+tr("report_question_text");
-    uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
-
-    MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
-        (function() {
-            res = document.querySelector("#uReportMsgInput").value;
-            xhr = new XMLHttpRequest();
-            xhr.open("GET", "/report/" + comment_id + "?reason=" + res + "&type=comment", true);
-            xhr.onload = (function() {
-                if(xhr.responseText.indexOf("reason") === -1)
-                    MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
-                else
-                    MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
-                });
-            xhr.send(null);
-        }),
-        Function.noop
-    ]);
-}
-
-function reportApp(id) {
-    uReportMsgTxt  = tr('going_to_report_app');
-    uReportMsgTxt += "<br/>"+tr("report_question_text");
-    uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
-
-    MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
-        (function() {
-            res = document.querySelector("#uReportMsgInput").value;
-            xhr = new XMLHttpRequest();
-            xhr.open("GET", "/report/" + id + "?reason=" + res + "&type=app", true);
-            xhr.onload = (function() {
-            if(xhr.responseText.indexOf("reason") === -1)
-                MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
-            else
-                MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
-            });
-            xhr.send(null);
-        }),
-        Function.noop
-    ]);
-}
-
-function reportClub(club_id) {
-    uReportMsgTxt  = tr("going_to_report_club");
-    uReportMsgTxt += "<br/>"+tr("report_question_text");
-    uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
-
-    MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
-        (function() {
-            res = document.querySelector("#uReportMsgInput").value;
-            xhr = new XMLHttpRequest();
-            xhr.open("GET", "/report/" + club_id + "?reason=" + res + "&type=group", true);
-            xhr.onload = (function() {
-            if(xhr.responseText.indexOf("reason") === -1)
-                MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
-            else
-                MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
-            });
-            xhr.send(null);
-            }),
-        Function.noop
-    ]);
-}
-
-$(document).on("click", "#_photoDelete, #_videoDelete", function(e) {
-    var formHtml = "<form id='tmpPhDelF' action='" + u(this).attr("href") + "' >";
-    formHtml    += "<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />";
-    formHtml    += "</form>";
-    u("body").append(formHtml);
-    
-    MessageBox(tr('warning'), tr('question_confirm'), [
-        tr('yes'),
-        tr('no')
-    ], [
-        (function() {
-            u("#tmpPhDelF").nodes[0].submit();
-        }),
-        (function() {
-            u("#tmpPhDelF").remove();
-        }),
-    ]);
-    
-    e.stopPropagation()
-    return e.preventDefault();
-});
-/* @rem-pai why this func wasn't named as "#_deleteDialog"? It looks universal IMO */
-
-u(document).on("click", "#_noteDelete", function(e) {
-    var formHtml = "<form id='tmpPhDelF' action='" + u(this).attr("href") + "' >";
-    formHtml    += "<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />";
-    formHtml    += "</form>";
-    u("body").append(formHtml);
-    
-    MessageBox(tr('warning'), tr('question_confirm'), [
-        tr('yes'),
-        tr('no')
-    ], [
-        (function() {
-            u("#tmpPhDelF").nodes[0].submit();
-        }),
-        (function() {
-            u("#tmpPhDelF").remove();
-        }),
-    ]);
-    
-    e.stopPropagation()
-    return e.preventDefault();
-});
-
-// TODO REWRITE cuz its a little broken
-u(document).on("click", "#_pinGroup", async function(e) {
-    e.preventDefault();
-    e.stopPropagation()
-
-    let link = u(this).attr("href");
-    let thisButton = u(this);
-    let groupName = u(this).attr("data-group-name");
-    let groupUrl = u(this).attr("data-group-url");
-    let list = u('#_groupListPinnedGroups');
-    
-    thisButton.nodes[0].classList.add('loading');
-    thisButton.nodes[0].classList.add('disable');
-
-    let req = await ky(link);
-    if(req.ok == false) {
-        NewNotification(tr('error'), tr('error_1'), null);
-        thisButton.nodes[0].classList.remove('loading');
-        thisButton.nodes[0].classList.remove('disable');
-        return;
-    }
-
-    if(!parseAjaxResponse(await req.text())) {
-        thisButton.nodes[0].classList.remove('loading');
-        thisButton.nodes[0].classList.remove('disable');
-        return;
-    }
-
-    // Adding a divider if not already there
-    if(list.nodes[0].children.length == 0) {
-        list.nodes[0].append(u('<div class="menu_divider"></div>').first());
-    }
-
-    // Changing the button name
-    if(thisButton.html().trim() == tr('remove_from_left_menu')) {
-        thisButton.html(tr('add_to_left_menu'));
-        for(let i = 0; i < list.nodes[0].children.length; i++) {
-            let element = list.nodes[0].children[i];
-            if(element.pathname == groupUrl) {
-                element.remove();
-            }
-        }
-    }else{
-        thisButton.html(tr('remove_from_left_menu'));
-        list.nodes[0].append(u('<a href="' + groupUrl + '" class="link group_link">' + groupName + '</a>').first());
-    }
-
-    // Adding the group to the left group list
-    if(list.nodes[0].children[0].className != "menu_divider" || list.nodes[0].children.length == 1) {
-        list.nodes[0].children[0].remove();
-    }
-    
-    thisButton.nodes[0].classList.remove('loading');
-    thisButton.nodes[0].classList.remove('disable');
-
-    return false;
-});
-
-u(document).handle("submit", "#_submitUserSubscriptionAction", async function(e) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    u(this).nodes[0].parentElement.classList.add('loading');
-    u(this).nodes[0].parentElement.classList.add('disable');
-    console.log(e.target);
-    const data = await fetch(u(this).attr('action'), { method: 'POST', body: new FormData(e.target) });
-    if (data.ok) {
-        u(this).nodes[0].parentElement.classList.remove('loading');
-        u(this).nodes[0].parentElement.classList.remove('disable');
-        if (e.target[0].value == "add") {
-            u(this).nodes[0].parentElement.innerHTML = tr("friends_add_msg");
-        } else if (e.target[0].value == "rej") {
-            u(this).nodes[0].parentElement.innerHTML = tr("friends_rej_msg");
-        } else if (e.target[0].value == "rem") {
-            u(this).nodes[0].parentElement.innerHTML = tr("friends_rem_msg");
-        }
-    }
-})
-
-function changeOwner(club, newOwner, newOwnerName) {
-    const action = "/groups/" + club + "/setNewOwner/" + newOwner;
-
-    MessageBox(tr('group_changeowner_modal_title'), `
-        ${tr("group_changeowner_modal_text", escapeHtml(newOwnerName))}
-        <br/><br/>
-        <form id="transfer-owner-permissions-form" method="post">
-            <label for="password">${tr('password')}</label>
-            <input type="password" id="password" name="password" required />
-            <input type="hidden" name="hash" value='${window.router.csrf}' />
-        </form>
-    `, [tr('transfer'), tr('cancel')], [
-        () => {
-            $("#transfer-owner-permissions-form").attr("action", action);
-            document.querySelector("#transfer-owner-permissions-form").submit();
-        }, Function.noop
-    ]);
-}
-
-async function withdraw(id) {
-    let coins = await API.Apps.withdrawFunds(id);
-    if(coins == 0)
-        MessageBox(tr('app_withdrawal'), tr('app_withdrawal_empty'), ["OK"], [Function.noop]);
-    else
-        MessageBox(tr('app_withdrawal'), tr("app_withdrawal_created", window.coins), ["OK"], [Function.noop]);
-}
-
-function toggleMaritalStatus(e) {
-    let elem = $("#maritalstatus-user");
-    $("#maritalstatus-user-select").empty();
-    if ([0, 1, 8].includes(Number(e.value))) {
-        elem.hide();
-    } else {
-        elem.show();
-    }
-}
-
-u(document).on("paste", ".vouncher_input", function(event) {
-    const vouncher = event.clipboardData.getData("text");
-
-    let segments;
-    if(vouncher.length === 27) {
-        segments = vouncher.split("-");
-        if(segments.length !== 4)
-            segments = undefined;
-    } else if(vouncher.length === 24) {
-        segments = chunkSubstr(vouncher, 6);
-    }
-
-    if(segments !== undefined) {
-        document.vouncher_form.key0.value = segments[0];
-        document.vouncher_form.key1.value = segments[1];
-        document.vouncher_form.key2.value = segments[2];
-        document.vouncher_form.key3.value = segments[3];
-        document.vouncher_form.key3.focus();
-    }
-
-    event.preventDefault();
-});
-
-// Migrated from inline end
-
 var tooltipClientTemplate = Handlebars.compile(`
     <table>
         <tr>
@@ -1227,14 +949,14 @@ u(document).on('paste', '#write .small-textarea', (e) => {
     }
 })
 
-u(document).on('dragstart', '#write .post-horizontal .upload-item, .post-vertical .upload-item, .PE_audios .vertical-attachment', (e) => {
+u(document).on('dragstart', '#write .post-horizontal .upload-item, .post-vertical .upload-item', (e) => {
     //e.preventDefault()
     //console.log(e)
     u(e.target).closest('.upload-item').addClass('currently_dragging')
     return
 })
 
-u(document).on('dragover', '#write .post-horizontal .upload-item, .post-vertical .upload-item, .PE_audios .vertical-attachment', (e) => {
+u(document).on('dragover', '#write .post-horizontal .upload-item, .post-vertical .upload-item', (e) => {
     e.preventDefault()
 
     const target = u(e.target).closest('.upload-item')
@@ -1251,12 +973,7 @@ u(document).on('dragover', '#write .post-horizontal .upload-item, .post-vertical
     return
 })
 
-u(document).on("dragover drop", async (e) => {
-    e.preventDefault()
-    return false;
-})
-
-u(document).on('dragleave dragend', '#write .post-horizontal .upload-item, .post-vertical .upload-item, .PE_audios .vertical-attachment', (e) => {
+u(document).on('#write dragleave dragend', '.post-horizontal .upload-item, .post-vertical .upload-item', (e) => {
     //console.log(e)
     u(e.target).closest('.upload-item').removeClass('dragged')
     return
@@ -1290,6 +1007,25 @@ u(document).on("drop", '#write', function(e) {
     }
 })
 
+u(document).on('submit', '#write > form', (e) => {
+    const target = u(e.target)
+    const horizontal_array = []
+    const horizontal_input = target.find(`input[name='horizontal_attachments']`)
+    const horizontal_attachments = target.find(`.post-horizontal > a`)
+    horizontal_attachments.nodes.forEach(_node => {
+        horizontal_array.push(`${_node.dataset.type}${_node.dataset.id}`)
+    })
+    horizontal_input.nodes[0].value = horizontal_array.join(',')
+
+    const vertical_array = []
+    const vertical_input = target.find(`input[name='vertical_attachments']`)
+    const vertical_attachments = target.find(`.post-vertical > .vertical-attachment`)
+    vertical_attachments.nodes.forEach(_node => {
+        vertical_array.push(`${_node.dataset.type}${_node.dataset.id}`)
+    })
+    vertical_input.nodes[0].value = vertical_array.join(',')
+})
+
 // !!! PHOTO PICKER !!!
 u(document).on("click", "#__photoAttachment", async (e) => {
     const photos_per_page = 23
@@ -1381,7 +1117,6 @@ u(document).on("click", "#__photoAttachment", async (e) => {
     // add photo
     u(".ovk-diag-body .attachment_selector").on("click", ".album-photo", async (ev) => {
         ev.preventDefault()
-        ev.stopPropagation()
         
         const target = u(ev.target).closest('.album-photo')
         const dataset = target.nodes[0].dataset
@@ -1900,14 +1635,13 @@ u(document).on('click', `.post-horizontal .upload-item .upload-delete`, (e) => {
     u(e.target).closest('.upload-item').remove()
 })
 
-u(document).on('click', `.vertical-attachment #small_remove_button`, (e) => {
+u(document).on('click', `.post-vertical .vertical-attachment #small_remove_button`, (e) => {
     e.preventDefault()
     u(e.target).closest('.vertical-attachment').remove()
 })
 
 u(document).on('click', '.post-buttons .upload-item', (e) => {
     e.preventDefault()
-    e.stopPropagation()
 })
 
 u(document).on('click', '.post.post-nsfw .post-content', (e) => {
@@ -2201,6 +1935,7 @@ $(document).on("click", "#add_image", (e) => {
         let video = document.querySelector("#_takeSelfieFrame video")
 
         if(!navigator.mediaDevices) {
+            // ех вот бы месседжбоксы были бы классами
             u("body").removeClass("dimmed");
             document.querySelector("html").style.overflowY = "scroll"
             u(".ovk-diag-cont").remove();
@@ -2343,19 +2078,10 @@ async function __processPaginatorNextPage(page)
         container.nodes[0].append(u(`.paginator:not(.paginator-at-top)`).nodes[0].parentNode)
     }
     
-    if(window.player && window.player.isAtAudiosPage() && window.player.isAtCurrentContextPage()) {
-        window.player.loadContext(page)
-        window.player.__highlightActiveTrack()
+    if(window.player) {
+        window.player.loadContextPage(page)
     }
 
-    /*if(window.router) {
-        window.router.savePreviousPage()
-    }*/
-
-    const new_url = new URL(location.href)
-    new_url.hash = page
-    history.replaceState(null, null, new_url)
-
     if(typeof __scrollHook != 'undefined') {
         __scrollHook(page)
     }
@@ -2371,10 +2097,6 @@ const showMoreObserver = new IntersectionObserver(entries => {
             if(u('.scroll_container').length < 1) {
                 return
             }
-
-            /*if(window.player && window.player.isAtAudiosPage() && !window.player.isAtCurrentContextPage()) {
-                return
-            }*/
             
             const target = u(x.target)
             if(target.length < 1 || target.hasClass('paginator-at-top')) {
@@ -2499,76 +2221,3 @@ u(document).on('keyup', async (e) => {
         }
     }
 })
-
-u(document).on('mouseover mousemove mouseout', `div[data-tip='simple']`, (e) => {
-    if(e.target.dataset.allow_mousemove != '1' && e.type == 'mousemove') {
-        return
-    }
-
-    if(e.type == 'mouseout') {
-        u(`.tip_result`).remove()
-        return
-    }
-
-    const target = u(e.target).closest(`div[data-tip='simple']`)
-    const title  = target.attr('data-title')
-    if(title == '') {
-        return
-    }
-
-    target.nodes[0].parentNode.insertAdjacentHTML('afterbegin', `
-        <div class='tip_result' style='left:${e.layerX}px;'>
-            ${escapeHtml(title)}
-        </div>    
-    `)
-})
-
-function setStatusEditorShown(shown) {
-    document.getElementById("status_editor").style.display = shown ? "block" : "none";
-}
-
-u(document).on('click', (event) => {
-    u('#ctx_menu').remove()
-    if(u('#status_editor').length < 1) {
-        return
-    }
-
-    if(!event.target.closest("#status_editor") && !event.target.closest("#page_status_text"))
-        setStatusEditorShown(false);
-})
-
-u(document).on('click', '#page_status_text', (e) => {
-    setStatusEditorShown(true)
-})
-
-async function changeStatus() {
-    const status = document.status_popup_form.status.value;
-    const broadcast = document.status_popup_form.broadcast.checked;
-
-    document.status_popup_form.submit.innerHTML = "<div class=\"button-loading\"></div>";
-    document.status_popup_form.submit.disabled = true;
-
-    const formData = new FormData();
-    formData.append("status", status);
-    formData.append("broadcast", Number(broadcast));
-    formData.append("hash", document.status_popup_form.hash.value);
-    const response = await ky.post("/edit?act=status", {body: formData});
-
-    if(!parseAjaxResponse(await response.text())) {
-        document.status_popup_form.submit.innerHTML = tr("send");
-        document.status_popup_form.submit.disabled = false;
-        return;
-    }
-
-    if(document.status_popup_form.status.value === "") {
-        document.querySelector("#page_status_text").innerHTML = `[ ${tr("change_status")} ]`;
-        document.querySelector("#page_status_text").className = "edit_link page_status_edit_button";
-    } else {
-        document.querySelector("#page_status_text").innerHTML = status;
-        document.querySelector("#page_status_text").className = "page_status page_status_edit_button";
-    }
-
-    setStatusEditorShown(false);
-    document.status_popup_form.submit.innerHTML = tr("send");
-    document.status_popup_form.submit.disabled = false;
-}

Web/static/js/messagebox.js

@@ -82,7 +82,7 @@ class CMessageBox {
 
     __exitDialog() {
         this.getNode().remove()
-        if(u('.ovk-msg-all:not(.msgbox-hidden)').length < 1) {
+        if(u('.ovk-msg-all').length < 1) {
             u('body').removeClass('dimmed')
             u('html').attr('style', 'overflow-y:scroll')
         }
@@ -101,15 +101,13 @@ class CMessageBox {
     hide() {
         u('body').removeClass('dimmed')
         u('html').attr('style', 'overflow-y:scroll')
-        this.getNode().attr('style', 'display: none;').addClass('msgbox-hidden')
-        this.hidden = true
+        this.getNode().attr('style', 'display: none;')
     }
 
     reveal() {
         u('body').addClass('dimmed')
         u('html').attr('style', 'overflow-y:hidden')
         this.getNode().attr('style', 'display: block;')
-        this.hidden = false
     }
 
     static toggleLoader() {

Web/static/js/openvk.cls.js

@@ -39,6 +39,126 @@ function parseAjaxResponse(responseString) {
     }
 }
 
+document.addEventListener("DOMContentLoaded", function() { //BEGIN
+
+    $(document).on("click", "#_photoDelete, #_videoDelete", function(e) {
+        var formHtml = "<form id='tmpPhDelF' action='" + u(this).attr("href") + "' >";
+        formHtml    += "<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />";
+        formHtml    += "</form>";
+        u("body").append(formHtml);
+        
+        MessageBox(tr('warning'), tr('question_confirm'), [
+            tr('yes'),
+            tr('no')
+        ], [
+            (function() {
+                u("#tmpPhDelF").nodes[0].submit();
+            }),
+            (function() {
+                u("#tmpPhDelF").remove();
+            }),
+        ]);
+        
+        return e.preventDefault();
+    });
+    /* @rem-pai why this func wasn't named as "#_deleteDialog"? It looks universal IMO */
+
+    u(document).on("click", "#_noteDelete", function(e) {
+        var formHtml = "<form id='tmpPhDelF' action='" + u(this).attr("href") + "' >";
+        formHtml    += "<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />";
+        formHtml    += "</form>";
+        u("body").append(formHtml);
+        
+        MessageBox(tr('warning'), tr('question_confirm'), [
+            tr('yes'),
+            tr('no')
+        ], [
+            (function() {
+                u("#tmpPhDelF").nodes[0].submit();
+            }),
+            (function() {
+                u("#tmpPhDelF").remove();
+            }),
+        ]);
+        
+        return e.preventDefault();
+    });
+
+    u("#_pinGroup").on("click", async function(e) {
+        e.preventDefault();
+
+        let link = u(this).attr("href");
+        let thisButton = u(this);
+        let groupName = u(this).attr("data-group-name");
+        let groupUrl = u(this).attr("data-group-url");
+        let list = u('#_groupListPinnedGroups');
+        
+        thisButton.nodes[0].classList.add('loading');
+        thisButton.nodes[0].classList.add('disable');
+
+        let req = await ky(link);
+        if(req.ok == false) {
+            NewNotification(tr('error'), tr('error_1'), null);
+            thisButton.nodes[0].classList.remove('loading');
+            thisButton.nodes[0].classList.remove('disable');
+            return;
+        }
+
+        if(!parseAjaxResponse(await req.text())) {
+            thisButton.nodes[0].classList.remove('loading');
+            thisButton.nodes[0].classList.remove('disable');
+            return;
+        }
+
+        // Adding a divider if not already there
+        if(list.nodes[0].children.length == 0) {
+            list.nodes[0].append(u('<div class="menu_divider"></div>').first());
+        }
+
+        // Changing the button name
+        if(thisButton.html().trim() == tr('remove_from_left_menu')) {
+            thisButton.html(tr('add_to_left_menu'));
+            for(let i = 0; i < list.nodes[0].children.length; i++) {
+                let element = list.nodes[0].children[i];
+                if(element.pathname == groupUrl) {
+                    element.remove();
+                }
+            }
+        }else{
+            thisButton.html(tr('remove_from_left_menu'));
+            list.nodes[0].append(u('<a href="' + groupUrl + '" class="link group_link">' + groupName + '</a>').first());
+        }
+
+        // Adding the group to the left group list
+        if(list.nodes[0].children[0].className != "menu_divider" || list.nodes[0].children.length == 1) {
+            list.nodes[0].children[0].remove();
+        }
+        
+        thisButton.nodes[0].classList.remove('loading');
+        thisButton.nodes[0].classList.remove('disable');
+
+        return false;
+    });
+
+    u(document).handle("submit", "#_submitUserSubscriptionAction", async function(e) {
+        u(this).nodes[0].parentElement.classList.add('loading');
+        u(this).nodes[0].parentElement.classList.add('disable');
+        console.log(e.target);
+        const data = await fetch(u(this).attr('action'), { method: 'POST', body: new FormData(e.target) });
+        if (data.ok) {
+            u(this).nodes[0].parentElement.classList.remove('loading');
+            u(this).nodes[0].parentElement.classList.remove('disable');
+            if (e.target[0].value == "add") {
+                u(this).nodes[0].parentElement.innerHTML = tr("friends_add_msg");
+            } else if (e.target[0].value == "rej") {
+                u(this).nodes[0].parentElement.innerHTML = tr("friends_rej_msg");
+            } else if (e.target[0].value == "rem") {
+                u(this).nodes[0].parentElement.innerHTML = tr("friends_rem_msg");
+            }
+        }
+    })
+}); //END ONREADY DECLS
+
 function setClubAdminComment(clubId, adminId, hash) {
     MessageBox("Изменить комментарий к администратору", `
         <form action="/club${clubId}/setAdmin" method="post" id="uClubAdminCommentForm_${clubId}_${adminId}">

Web/static/js/router.js

@@ -1,384 +0,0 @@
-window.router = new class {
-    get csrf() {
-        return u("meta[name=csrf]").attr("value")
-    }
-
-    __isScriptAlreadyLoaded(script) {
-        if(script.src) {
-            const script_url = new URL(script.src)
-            const script_main_part = script_url.pathname
-
-            return u(`script[src^='${script_main_part}']`).length > 0
-        }
-
-        return false
-    }
-
-    __appendScript(script) {
-        const _t_scr = document.createElement('script')
-        _t_scr.crossorigin = 'anonymous'
-        if(script.getAttribute('integrity')) {
-            _t_scr.setAttribute('integrity', script.getAttribute('integrity'))
-        }
-
-        if(script.getAttribute('id')) { 
-            _t_scr.id = script.id
-        }
-
-        if(script.getAttribute('type')) { 
-            _t_scr.type = script.type
-        }
-
-        //const parent = script.parentNode
-        //const idx = Array.from(parent.children).indexOf(script)
-
-        if(script.src) {
-            _t_scr.src = script.src
-        } else {
-            _t_scr.async = false
-            _t_scr.textContent = script.textContent
-        }   
-
-        //parent.children[idx].before(script)
-        document.body.appendChild(_t_scr)
-    }
-
-    __clearScripts() {
-        u(`script:not([src])`).remove()
-    }
-
-    __closeMsgs() {
-        window.messagebox_stack.forEach(msg => {
-            if(msg.hidden) {
-                return
-            }
-
-            msg.close()
-        })
-    }
-
-    __appendPage(parsed_content) {
-        const scripts_to_append = []
-        const page_body = u(parsed_content.querySelector('.page_body'))
-        const sidebar = u(parsed_content.querySelector('.sidebar'))
-        const page_header = u(parsed_content.querySelector('.page_header'))
-        const page_footer = u(parsed_content.querySelector('.page_footer'))
-        const backdrop = u(parsed_content.querySelector('#backdrop'))
-        if(page_body.length < 1) {
-            throw new Error('Invalid page has been loaded')
-            return
-        }
-
-        window.__current_page_audio_context = null
-        this.__clearScripts()
-        parsed_content.querySelectorAll('.page_body script, #_js_ep_script').forEach(script => {
-            if(!this.__isScriptAlreadyLoaded(script)) {
-                scripts_to_append.push(script)
-                script.parentNode.removeChild(script)
-            }
-        })
-        u('.page_body').html(page_body.html())
-        u('.sidebar').html(sidebar.html())
-        u('.page_footer').html(page_footer.html())
-        if(backdrop.length > 0) {
-            if(u('#backdrop').length == 0) {
-                u('body').append(`<div id="backdrop"></div>`)
-            }
-            u('#backdrop').nodes[0].outerHTML = (backdrop.nodes[0].outerHTML)
-        } else {
-            u('#backdrop').remove()
-        }
-        
-        if(u('.page_header #search_box select').length > 0 && page_header.find('#search_box select').length > 0) {
-            u('.page_header #search_box select').nodes[0].value = page_header.find('#search_box select').nodes[0].value
-        }
-
-        if(u('.page_header #search_box input').length > 0 && page_header.find('#search_box input').length > 0) {
-            u('.page_header #search_box input').nodes[0].value = page_header.find('#search_box input').nodes[0].value
-        }
-
-        if(page_header.hasClass('search_expanded_at_all')) {
-            u('.page_header').addClass('search_expanded_at_all').addClass('search_expanded')
-        } else {
-            if(u('.page_header').hasClass('search_expanded_at_all')) {
-                u('.page_header').removeClass('search_expanded_at_all').removeClass('search_expanded')
-            }
-        }
-        
-        u("meta[name=csrf]").attr("value", u(parsed_content.querySelector('meta[name=csrf]')).attr('value'))
-        
-        document.title = parsed_content.title
-        scripts_to_append.forEach(append_me => {
-            this.__appendScript(append_me)
-        })
-    }
-
-    async __integratePage(scrolling = null) {
-        window.temp_y_scroll = null
-        u('.toTop').removeClass('has_down')
-        window.scrollTo(0, scrolling ?? 0)
-        bsdnHydrate()
-
-        if(u('.paginator:not(.paginator-at-top)').length > 0) {
-            showMoreObserver.observe(u('.paginator:not(.paginator-at-top)').nodes[0])
-        }
-
-        if(u(`div[class$="_small_block"]`).length > 0 && typeof smallBlockObserver != 'undefined') {
-            smallBlockObserver.observe(u(`div[class$="_small_block"]`).nodes[0])
-        }
-
-        if(window.player) {
-            window.player.dump()
-            await window.player._handlePageTransition()
-        }
-    }
-
-    __unlinkObservers() {
-        if(u('.paginator:not(.paginator-at-top)').length > 0) {
-            showMoreObserver.unobserve(u('.paginator:not(.paginator-at-top)').nodes[0])
-        }
-
-        if(u(`div[class$="_small_block"]`).length > 0 && typeof smallBlockObserver != 'undefined') {
-            smallBlockObserver.unobserve(u(`div[class$="_small_block"]`).nodes[0])
-        }
-    }
-
-    checkUrl(url) {
-        if(window.openvk.disable_ajax == 1) {
-            return false
-        }
-
-        if((localStorage.getItem('ux.disable_ajax_routing') ?? 0) == 1 || window.openvk.current_id == 0) {
-            return false
-        }
-
-        if(!url || url == '' || url == '/') {
-            return false
-        }
-
-        if(url.indexOf(location.origin) == -1) {
-            return false
-        }
-
-        if(url.indexOf('hash=') != -1) {
-            return false
-        }
-
-        return true
-    }
-
-    savePreviousPage() {
-        this.prev_page_html = {
-            url: location.href,
-            pathname: location.pathname,
-            html: u('.page_body').html(),
-        }
-    }
-
-    async route(params = {}) {
-        if(typeof params == 'string') {
-            params = {
-                url: params
-            }
-        }
-
-        const old_url = location.href
-        let url = params.url
-        if(url.indexOf(location.origin)) {
-            url = location.origin + url
-        }
-
-        if((localStorage.getItem('ux.disable_ajax_routing') ?? 0) == 1 || window.openvk.current_id == 0) {
-            window.location.assign(url)
-            return
-        }
-
-        if(this.prev_page_html && this.prev_page_html.pathname != location.pathname) {
-            this.prev_page_html = null
-        }
-        
-        const push_url = params.push_state ?? true
-        const next_page_url = new URL(url)
-        if(push_url) {
-            history.pushState({'from_router': 1}, '', url)
-        } else {
-            history.replaceState({'from_router': 1}, '', url)
-        }
-
-        const parser = new DOMParser
-        const next_page_request = await fetch(next_page_url, {
-            method: 'AJAX',
-            referrer: old_url,
-            headers: {
-                'X-OpenVK-Ajax-Query': '1',
-            }
-        })
-        const next_page_text = await next_page_request.text()
-        const parsed_content = parser.parseFromString(next_page_text, 'text/html')
-        if(next_page_request.redirected) {
-            history.replaceState({'from_router': 1}, '', next_page_request.url)
-        }
-        
-        this.__closeMsgs()
-        this.__unlinkObservers()
-
-        try {
-            this.__appendPage(parsed_content)
-            await this.__integratePage()
-        } catch(e) {
-            console.error(e)
-            next_page_url.searchParams.delete('al', 1)
-            location.assign(next_page_url)
-        }
-    }
-}
-
-u(document).on('click', 'a', async (e) => {
-    const target = u(e.target).closest('a')
-    const dom_url = target.attr('href')
-    const id = target.attr('id')
-    let url = target.nodes[0].href
-
-    if(id) {
-        if(['act_tab_a', 'ki', 'used', '_pinGroup', 'profile_link'].indexOf(id) == -1) {
-            console.log('AJAX | Skipping cuz maybe its function call link.')
-            return
-        }
-    }
-
-    /*if(url.indexOf('hash=') != -1) {
-        e.preventDefault()
-        return false
-    }*/
-
-    if(target.attr('rel') == 'nofollow') {
-        console.log('AJAX | Skipped because its nofollow')
-        return
-    }
-
-    if(target.nodes[0].hasAttribute('download')) {
-        console.log('AJAX | Skipped because its download')
-        return
-    }
-
-    if(!dom_url || dom_url == '#' || dom_url.indexOf('javascript:') != -1) {
-        console.log('AJAX | Skipped because its anchor or function call')
-        return
-    }
-
-    if(target.attr('target') == '_blank') {
-        console.log('AJAX | Skipping because its _blank.')
-        return
-    }
-
-    if(!window.router.checkUrl(url)) {
-        return
-    }
-
-    e.preventDefault()
-
-    console.log(`AJAX | Going to URL ${url}`)
-    await window.router.route({
-        url: url,
-    })
-})
-
-u(document).on('submit', 'form', async (e) => {
-    if(u('#ajloader').hasClass('shown')) {
-        e.preventDefault()
-        return
-    }
-
-    if((localStorage.getItem('ux.disable_ajax_routing') ?? 0) == 1 || window.openvk.current_id == 0) {
-        return false
-    }
-
-    if(window.openvk.disable_ajax == 1) {
-        return false
-    }
-
-    if(e.target.closest('#write')) {
-        const target = u(e.target)
-        collect_attachments_node(target)
-    }
-
-    u('#ajloader').addClass('shown')
-
-    const form = e.target
-    const method = form.method ?? 'get'
-    const url = form.action
-    if(form.onsubmit || url.indexOf('/settings?act=interface') != -1) {
-        u('#ajloader').removeClass('shown')
-        return false
-    }
-    e.preventDefault()
-
-    const url_object = new URL(url)
-    if(method == 'get' || method == 'GET') {
-        //url_object.searchParams.append('hash', window.router.csrf)
-        $(form).serializeArray().forEach(param => {
-            url_object.searchParams.append(param.name, param.value)
-        })
-    }
-
-    if(!url) {
-        u('#ajloader').removeClass('shown')
-        return
-    }
-
-    const form_data = serializeForm(form, e.submitter)
-    const request_object = {
-        method: method,
-        headers: {
-            'X-OpenVK-Ajax-Query': '1',
-        }
-    }
-
-    if(method != 'GET' && method != 'get') {
-        request_object.body = form_data
-    }
-
-    const form_res = await fetch(url_object, request_object)
-    const form_result = await form_res.text()
-    switch(form_res.status) {
-        case 500:
-        case 502:
-            makeError(form_res.statusText)
-            break
-    }
-
-    const parser = new DOMParser
-    const parsed_content = parser.parseFromString(form_result, 'text/html')
-
-    if(form_res.redirected) {
-        history.replaceState({'from_router': 1}, '', form_res.url)
-    } else {
-        const __new_url = new URL(form_res.url)
-        __new_url.searchParams.delete('al')
-        __new_url.searchParams.delete('hash')
-
-        history.pushState({'from_router': 1}, '', __new_url)
-    }
-    
-    window.router.__appendPage(parsed_content)
-    window.router.__closeMsgs()
-    await window.router.__integratePage()
-
-    u('#ajloader').removeClass('shown')
-})
-
-window.addEventListener('popstate', (e) => {
-    e.preventDefault();
-    /*if(window.router.prev_page_html) {
-        u('.page_body').html(window.router.prev_page_html.html)
-        history.replaceState({'from_router': 1}, '', window.router.prev_page_html.url)
-        window.router.prev_page_html = null
-        window.router.__integratePage()
-        return
-    }*/
-
-    window.router.route({
-        url: location.href,
-        push_state: false,
-    })
-})

Web/static/js/utils.js

@@ -173,109 +173,3 @@ function collect_attachments(target) {
 
     return horizontal_array.concat(vertical_array)
 }
-
-function getRemainingTime(fullTime, time) {
-    let timer = fullTime - time
-
-    if(timer < 0) return "-00:00"
-
-    return "-" + fmtTime(timer)
-}
-
-function serializeForm(form, submitter = null) 
-{
-    const u_ = u(form)
-    const inputs = u_.find('input, textarea, button, select')
-    let fd = new FormData()
-    inputs.nodes.forEach(inp => {
-        if(!inp || !inp.name) {
-            return
-        }
-
-        if(inp.type == 'submit') {
-            if(inp !== submitter) {
-                return
-            }
-        }
-
-        switch(inp.type) {
-            case 'hidden':
-            case 'text':
-            case 'textarea':
-            case 'select':
-            case 'select-one':
-            case 'submit':
-            case 'email':
-            case 'phone':
-            case 'search':
-            case 'password':
-            case 'date':
-            case 'datetime-local':
-                fd.append(inp.name, inp.value)
-                break
-            case 'checkbox':
-                if(inp.checked) {
-                    fd.append(inp.name, inp.value)
-                }
-                
-                break
-            case 'file':
-                if(!inp.multiple) {
-                    if(inp.files[0]) {
-                        fd.append(inp.name, inp.files[0])
-                    } else {
-                        const emptyFile = new Blob([], { type: 'application/octet-stream' })
-                        fd.append(inp.name, emptyFile, '')
-                    }
-                }
-                break
-        }
-    })
-
-    return fd
-}
-
-async function copyToClipboard(text) {
-    let fallback = () => {
-        prompt(text);
-    }
-
-    if(typeof navigator.clipboard == "undefined") {
-        fallback()
-    } else {
-        try {
-            await navigator.clipboard.writeText(text)
-        } catch(e) {
-            fallback()
-        }
-    }
-}
-
-function remove_file_format(text) 
-{
-    return text.replace(/\.[^.]*$/, '')
-}
-
-function sleep(time) 
-{
-    return new Promise((resolve) => setTimeout(resolve, time));
-}
-
-function collect_attachments_node(target) 
-{
-    const horizontal_array = []
-    const horizontal_input = target.find(`input[name='horizontal_attachments']`)
-    const horizontal_attachments = target.find(`.post-horizontal > a`)
-    horizontal_attachments.nodes.forEach(_node => {
-        horizontal_array.push(`${_node.dataset.type}${_node.dataset.id}`)
-    })
-    horizontal_input.nodes[0].value = horizontal_array.join(',')
-
-    const vertical_array = []
-    const vertical_input = target.find(`input[name='vertical_attachments']`)
-    const vertical_attachments = target.find(`.post-vertical > .vertical-attachment`)
-    vertical_attachments.nodes.forEach(_node => {
-        vertical_array.push(`${_node.dataset.type}${_node.dataset.id}`)
-    })
-    vertical_input.nodes[0].value = vertical_array.join(',')
-}

locales/en.strings

@@ -882,7 +882,7 @@
 "genre" = "Genre";
 "lyrics" = "Lyrics";
 
-"select_another_file" = "Upload another file";
+"select_another_file" = "Select another file";
 
 "limits" = "Limits";
 "select_audio" = "Select audio from your computer";
@@ -949,11 +949,12 @@
 "add_to_playlist" = "Add to playlist";
 "remove_from_playlist" = "Remove from playlist";
 "delete_playlist" = "Delete playlist";
+"playlist_cover" = "Playlist cover";
 
 "playlists_user" = "User's playlists";
 "playlists_club" = "Group's playlists";
 "change_cover" = "Change cover";
-"playlist_cover" = "Playlist cover";
+"playlist_cover" = "Playlist's cover";
 
 "minutes_count_zero" = "Lasts no minutes";
 "minutes_count_one" = "Lasts one minute";
@@ -994,17 +995,9 @@
 "repeat_tip" = "Repeat";
 "shuffle_tip" = "Shuffle";
 "mute_tip" = "Mute";
-"mute_tip_noun" = "Muted";
 "playlist_hide_from_search" = "Unlisted";
 "confirm_deleting_audio" = "Do you sure want to delete this audio?";
 
-"copy_link_to_audio" = "Copy link to clipboard";
-"copy_link_to_audio_error_not_selected_track" = "Track was not selected";
-"audio_ctx_add_to_group" = "Add to group";
-"audio_ctx_add_to_playlist" = "Add to playlist";
-"audio_ctx_play_next" = "Play next";
-"audio_ctx_clear_context" = "Clear tracks list";
-
 /* Notifications */
 
 "feedback" = "Feedback";
@@ -1603,7 +1596,6 @@
 "error_adding_source_regex" = "Error adding source: incorrect link.";
 "error_adding_source_long" = "Error adding source: link is too long.";
 "error_adding_source_sus" = "Error adding source: suspicious link.";
-"error_playlist_creating_too_small" = "Add at least one audio";
 
 /* Admin actions */
 

locales/ru.strings

@@ -837,7 +837,7 @@
 "genre" = "Жанр";
 "lyrics" = "Текст";
 
-"select_another_file" = "Загрузить ещё";
+"select_another_file" = "Выбрать другой файл";
 
 "limits" = "Ограничения";
 "select_audio" = "Выберите аудиозапись на Вашем компьютере";
@@ -908,7 +908,7 @@
 "playlists_user" = "Плейлисты пользователя";
 "playlists_club" = "Плейлисты группы";
 "change_cover" = "Сменить обложку";
-"add_audio_verb" = "Добавить аудиозаписи";
+"playlist_cover" = "Обложка плейлиста";
 
 "minutes_count_zero" = "длится ноль минут";
 "minutes_count_one" = "длится одну минуту";
@@ -950,17 +950,9 @@
 "repeat_tip" = "Повторение";
 "shuffle_tip" = "Перемешать";
 "mute_tip" = "Заглушить";
-"mute_tip_noun" = "Заглушено";
 "playlist_hide_from_search" = "Не показывать в поиске";
 "confirm_deleting_audio" = "Вы действительно хотите полностью удалить аудиозапись?";
 
-"copy_link_to_audio" = "Копировать ссылку на аудио";
-"copy_link_to_audio_error_not_selected_track" = "Трек не выбран";
-"audio_ctx_add_to_group" = "Добавить в группу";
-"audio_ctx_add_to_playlist" = "Добавить в плейлист";
-"audio_ctx_play_next" = "Воспроизвести следующим";
-"audio_ctx_clear_context" = "Очистить список треков";
-
 /* Notifications */
 
 "feedback" = "Ответы";
@@ -1506,7 +1498,6 @@
 "error_adding_source_regex" = "Ошибка добавления источника: некорректная ссылка.";
 "error_adding_source_long" = "Ошибка добавления источника: слишком длинная ссылка.";
 "error_adding_source_sus" = "Ошибка добавления источника: гиперссылка заблокирована.";
-"error_playlist_creating_too_small" = "Добавь хотя бы одну аудиозапись.";
 
 /* Admin actions */
 

themepacks/midnight/stylesheet.css

@@ -490,7 +490,7 @@ input[type="radio"] {
     border-top: #b9b9b9 1px solid !important;
 }
 
-.bigPlayer .slider,
+.bigPlayer .paddingLayer .slider,
 .audioEmbed .track .slider {
     background: #b9b9b9 !important;
 }
@@ -500,11 +500,11 @@ input[type="radio"] {
     outline: 1px solid #645a86 !important;
 }
 
-.preformer, .trackPerformers a {
+.preformer {
     color: #b7b7b7 !important;
 }
 
-.tip_result {
+.bigPlayer .paddingLayer .trackPanel .track .timeTip {
     background: #b9b9b9 !important;
     color: black !important;
 }
@@ -518,7 +518,7 @@ input[type="radio"] {
 }
 
 .audioEntry .performer a,
-.bigPlayer .trackInfo a {
+.bigPlayer .paddingLayer .trackInfo a {
     color: #a2a1a1 !important;
 }
 
@@ -526,6 +526,10 @@ input[type="radio"] {
     opacity: 49%;
 }
 
+.bigPlayer .paddingLayer .bigPlayerTip {
+    color: black !important;
+}
+
 .verticalGrayTabs a {
     color: #bbb !important;
 }
@@ -543,15 +547,6 @@ input[type="radio"] {
     filter: invert(81%);
 }
 
-.load_bar {
-    background: #2c2839 !important;
-    border-bottom-color: #151418 !important;
-}
-
-#ajax_audio_player, #ajloader {
-    box-shadow: rgb(58 53 73) 0px 0px 2px 3px;
-}
-
 img[src$='/assets/packages/static/openvk/img/camera_200.png'],
 img[src$='/assets/packages/static/openvk/img/song.jpg'] {
     filter: invert(100%);
@@ -628,8 +623,3 @@ ul {
 #backdropFilePicker {
     margin: 15px !important;
 }
-
-#upload_container .upload_container_element {
-    border: 1px solid #383052;
-    background: #1e1b2a;
-}