Merge 22d3e5e494 into 2aedc3e861

Web/Models/Entities/Audio.php

@@ -147,6 +147,11 @@ 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,15 +248,17 @@ class Audios
     {
         $query = "%$query%";
         $result = $this->audios->where([
-            "unlisted" => 0,
+            "unlisted"  => 0,
-            "deleted"  => 0,
+            "deleted"   => 0,
+            /*"withdrawn" => 0,
+            "processed" => 1,*/
         ]);
         $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("name LIKE ? OR performer LIKE ?", $query, $query);
+            $result->where("CONCAT_WS(' ', performer, name) LIKE ?", $query);
         }
 
         foreach($params as $paramName => $paramValue) {

Web/Presenters/AudioPresenter.php

@@ -97,9 +97,12 @@ 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 {
+        } else if ($mode === 'alone_audio') {
-            $audios = $this->audios->getPopular();
+            $audios = [$this->template->alone_audio];
-            $audiosCount = $audios->size();
+            $audiosCount = 1;
+
+            $this->template->owner   = $this->user->identity;
+            $this->template->ownerId = $this->user->id;
         }
 
         // $this->renderApp("owner=$owner");
@@ -271,6 +274,19 @@ 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") {
@@ -327,17 +343,15 @@ 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 = !empty($this->postParam("audios")) ? array_slice(explode(",", $this->postParam("audios")), 0, 1000) : [];
+            $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"));
+                $this->flashFail("err", tr("error"), tr("set_playlist_name"), NULL, $is_ajax);
 
             $playlist = new Playlist;
             $playlist->setOwner($owner);
@@ -348,12 +362,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"));
+                    $this->flashFail("err", tr("error"), tr("not_a_photo"), NULL, $is_ajax);
 
                 try {
                     $playlist->fastMakeCover($this->user->id, $_FILES["cover"]);
                 } catch(\Throwable $e) {
-                    $this->flashFail("err", tr("error"), tr("invalid_cover_photo"));
+                    $this->flashFail("err", tr("error"), tr("invalid_cover_photo"), NULL, $is_ajax);
                 }
             }
 
@@ -361,25 +375,22 @@ 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 {
-            if(isset($club)) {
+            $this->template->owner = $owner;
-                $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);
         }
     }
 
@@ -435,28 +446,20 @@ 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, 10);
+        $this->template->audios = array_slice($audios, 0, 1000);
-        $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');
@@ -471,12 +474,12 @@ final class AudioPresenter extends OpenVKPresenter
         $playlist->resetLength();
         $playlist->setUnlisted((bool)$is_unlisted);
 
-        if($_FILES["new_cover"]["error"] === UPLOAD_ERR_OK) {
+        if($_FILES["cover"]["error"] === UPLOAD_ERR_OK) {
-            if(!str_starts_with($_FILES["new_cover"]["type"], "image"))
+            if(!str_starts_with($_FILES["cover"]["type"], "image"))
                 $this->flashFail("err", tr("error"), tr("not_a_photo"));
             
             try {
-                $playlist->fastMakeCover($this->user->id, $_FILES["new_cover"]);
+                $playlist->fastMakeCover($this->user->id, $_FILES["cover"]);
             } catch(\Throwable $e) {
                 $this->flashFail("err", tr("error"), tr("invalid_cover_photo"));
             }
@@ -490,13 +493,18 @@ 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());
     }
 
@@ -762,6 +770,15 @@ 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);
@@ -779,16 +796,21 @@ final class AudioPresenter extends OpenVKPresenter
         $audiosArr = [];
 
         foreach($audios as $audio) {
-            $audiosArr[] = [
+            $output_array = [];
-                "id" => $audio->getId(),
+            $output_array['id'] = $audio->getId();
-                "name" => $audio->getTitle(),
+            $output_array['name'] = $audio->getTitle();
-                "performer" => $audio->getPerformer(),
+            $output_array['performer'] = $audio->getPerformer();
-                "keys" => $audio->getKeys(),
+
-                "url" => $audio->getUrl(),
+            if(!$audio->isWithdrawn()) {
-                "length" => $audio->getLength(),
+                $output_array['keys'] = $audio->getKeys();
-                "available" => $audio->isAvailable(),
+                $output_array['url'] = $audio->getUrl();
-                "withdrawn" => $audio->isWithdrawn(),
+            }
-            ];
+
+            $output_array['length'] = $audio->getLength();
+            $output_array['available'] = $audio->isAvailable();
+            $output_array['withdrawn'] = $audio->isWithdrawn();
+
+            $audiosArr[] = $output_array;
         }
 
         $resultArr = [

Web/Presenters/AuthPresenter.php

@@ -228,6 +228,7 @@ 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,6 +63,7 @@ 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,6 +38,7 @@ 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());
@@ -67,6 +68,7 @@ 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($this->queryParam('al') == '1') {
+        if($_SERVER['HTTP_X_OPENVK_AJAX_QUERY'] == '1' && $this->user->identity) {
-            $this->assertNoCSRF();
+            error_reporting(0);
             header('Content-Type: text/plain; charset=UTF-8');
-        }*/
+        }
 
         parent::onStartup();
     }

Web/Presenters/ReportPresenter.php

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

Web/Presenters/templates/@layout.xml

@@ -20,7 +20,6 @@
         {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"}
@@ -31,6 +30,10 @@
         {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"}
@@ -199,18 +202,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">{_admin}</a>
+                            <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">{_helpdesk}
+                            <a href="/support/tickets" class="link" n:if="$canAccessHelpdesk" rel="nofollow">{_helpdesk}
                                 {if $helpdeskTicketNotAnsweredCount > 0}
                                     (<b>{$helpdeskTicketNotAnsweredCount}</b>)
                                 {/if}
                             </a>
-                            <a n:if="$canAccessHelpdesk" href="/scumfeed" class="link">{tr("reports")}
+                            <a n:if="$canAccessHelpdesk" href="/scumfeed" class="link" rel="nofollow">{tr("reports")}
                                 {if $reportNotAnsweredCount > 0}
                                     (<b>{$reportNotAnsweredCount}</b>)
                                 {/if}
                             </a>
-                            <a n:if="$canAccessHelpdesk" href="/noSpam" class="link">
+                            <a n:if="$canAccessHelpdesk" href="/noSpam" class="link" rel="nofollow">
                                 noSpam
                             </a>
                         <a
@@ -392,6 +395,9 @@
         {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"}
@@ -433,19 +439,21 @@
             //]]>
         </script>
 
-        <script>
+        <script id='_js_ep_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,12 +101,6 @@
     </div>
 
     <script>
-        async function withdraw(id) {
+        window.coins = {$coins}
-            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()" n:if="$canReport ?? false">{_report}</a>
+    <a style="float: right;" onClick="reportApp({$id})" n:if="$canReport ?? false">{_report}</a>
 {/block}
 
 {block content}
@@ -36,29 +36,5 @@
         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,90 +13,44 @@
 {/block}
 
 {block content}
-    <div class="playlistBlock" style="display: flex;margin-top: 0px;">
+    <div class='PE_wrapper'>
-        <div class="playlistCover">
+        <div class='PE_playlistEditPage'>
-            <a>
+            <div class="playlistCover">
-                <img src="{$playlist->getCoverURL('normal')}" alt="{_playlist_cover}">
+                <a onclick="document.querySelector(`input[name='cover']`).click()">
-            </a>
+                    <input type='file' name='cover' style='display:none;' accept=".jpg,.png">
-
+                    <img src="{$playlist->getCoverURL('normal')}" alt="{_playlist_cover}">
-            <div class="profile_links" style="width: 139px;">
+                </a>
-                <a class="profile_link" style="width: 98%;" id="_deletePlaylist" data-id="{$playlist->getId()}">{_delete_playlist}</a>
+                <div class="profile_links" style="width: 139px;">
-            </div>
+                    <a class="profile_link" style="width: 98%;" id="_deletePlaylist" data-id="{$playlist->getId()}">{_delete_playlist}</a>
-        </div>
-
-        <div style="padding-left: 13px;width:75%">
-            <div class="playlistInfo">
-                <input value="{$playlist->getName()}" type="text" name="title" maxlength="125">
-            </div>
-
-            <div class="moreInfo">
-                <textarea placeholder="{_description}" name="description" maxlength="2045" style="margin-top: 11px;">{$playlist->getDescription()}</textarea>
-            </div>
-
-            <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()}">
+            </div>
-                    <span>{_remove_from_playlist}</span>
+
+            <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>
+        </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'>
-        <div class="showMoreAudiosPlaylist" data-page="2" data-playlist="{$playlist->getId()}" n:if="$pagesCount > 1">
+            <input class="button" type="button" id='playlist_edit' value="{_save}">
-            {_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,6 +11,8 @@
         {_audio_new}
     {elseif $mode == 'popular'}
         {_audio_popular}
+    {elseif $mode == 'alone_audio'}
+        {$alone_audio->getName()}
     {else}
         {if $ownerId > 0}
             {_playlists} {$owner->getMorphedName("genitive", false)}
@@ -47,6 +49,10 @@
         »
         {if $isMy}{_my_playlists}{else}{_playlists}{/if}
     </div>
+
+    <div n:if="$mode == 'alone_audio'">
+        {_my_audios_small}
+    </div>
 {/block}
 
 {block content}
@@ -54,18 +60,30 @@
     
     {include "bigplayer.xml"}
 
-    <input n:if="$mode == 'list'" type="hidden" name="bigplayer_context" data-type="entity_audios" data-entity="{$ownerId}" data-page="{$page}">
+    <script>
-    <input n:if="$mode == 'new'" type="hidden" name="bigplayer_context" data-type="new_audios" data-entity="0" data-page="1">
+        window.__current_page_audio_context = null
-    <input n:if="$mode == 'popular'" type="hidden" name="bigplayer_context" data-type="popular_audios" data-entity="0" data-page="1">
+        {if $mode == 'list'}
-    <div class="bigPlayerDetector"></div>
+            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>
 
     <div class="audiosDiv">
-        <div style="width: 74%;" class="audiosContainer audiosPaddingContainer" n:if="$mode != 'playlists'">
+        <div class="audiosContainer audiosSideContainer audiosPaddingContainer" n:if="$mode != 'playlists'">
-            <div n:if="$audiosCount <= 0" style='height: 50%;'>
+            <div n:if="$audiosCount <= 0" style='height: 100%;'>
                 {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 infContainer">
+            <div n:if="$audiosCount > 0" class="scroll_container">
-                <div class="scroll_node infObj" n:foreach="$audios as $audio">
+                <div class="scroll_node" n:foreach="$audios as $audio">
                     {include "player.xml", audio => $audio, club => $club}
                 </div>
             </div>
@@ -81,12 +99,12 @@
             </div>
         </div>
         
-        <div style="width: 71.8%;" class="audiosPaddingContainer audiosPaddingContainer" n:if="$mode == 'playlists'">
+        <div class="audiosPaddingContainer audiosSideContainer 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 infContainer playlistContainer" n:if="$playlistsCount > 0">
+            <div class="scroll_container 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,97 +19,32 @@
 {/block}
 
 {block content}
-    <style>
+    <div class='PE_wrapper'>
-        textarea[name='description'] {
+        <div class='PE_playlistEditPage'>
-            padding: 4px;
+            <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>
 
-        .playlistInfo {
+            <div class="PE_playlistInfo">
-            width: 76%;
+                <div>
-            margin-left: 8px;
+                    <input type="text" name="title" placeholder="{_title}" maxlength="125" />
-        }
+                </div>
-    </style>
+                <div class="moreInfo">
-
+                    <textarea placeholder="{_description}" name="description" maxlength="2045" />
-    <div style="display:flex;">
+                </div>
-        <div class="playlistCover" onclick="document.querySelector(`#newPlaylistForm input[name='cover']`).click()">
+                <label>
-            <a>
+                    <input type='checkbox' name='is_unlisted' value='1'>
-                <img src="/assets/packages/static/openvk/img/song.jpg" alt="{_playlist_cover}">
+                    {_playlist_hide_from_search}
-            </a>
+                </label>
+                <a id='_playlistAppendTracks'>{_add_audio_verb}</a>
+            </div>
         </div>
-
+        <div class='PE_audios generic_audio_list'></div>
-        <div style="padding-left: 17px;width: 75%;" class="plinfo">
+        <div class='PE_end'>
-            <div>
+            <input class="button" type="button" id='playlist_create' value="{_create}">
-                <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,8 +32,14 @@
 
 {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,217 +38,196 @@
                     <li>{tr("audio_requirements_2")}</li>
                 </ul>
                 <div id="audio_upload">
-                    <form enctype="multipart/form-data" method="POST">
+                    <input id="audio_input" multiple type="file" name="blob" accept="audio/*" style="display:none" />
-                        <input type="hidden" name="name" />
+                    <input value="{_upload_button}" class="button" type="button" onclick="document.querySelector('#audio_input').click()">
-                        <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;">
-                <table cellspacing="7" cellpadding="0" border="0" align="center">
+                <div id="lastStepContainers"></div>
-                    <tbody>
+                <div id="lastStepButtons" style="text-align: center;margin-top: 10px;">
-                        <tr>
+                    <input class="button" type="button" id="uploadMusic" value="{_upload_button}">
-                            <td width="120" valign="top"><span class="nobold">{_performer}:</span></td>
+                    <input class="button" type="button" id="backToUpload" onclick="document.querySelector('#audio_input').click()" value="{_select_another_file}">
-                            <td><input name="performer" type="text" autocomplete="off" maxlength="80" /></td>
+                </div>
-                        </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">
+    <script type="module" n:syntax='off'>
         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"
 
-            function fallback() {
+        window.__audio_upload_page = new class {
-                console.info('Tags not found, setting default values.')
+            files_list = []
 
-                document.querySelector("#lastStep input[name=name]").value = files[0].name
+            hideFirstPage() {
-                document.querySelector("#lastStep select[name=genre]").value = "Other"
+                u('#firstStep').attr('style', 'display:none')
-                document.querySelector("#lastStep input[name=performer]").value = tr("track_unknown");
+                u('#lastStep').attr('style', 'display:block')
             }
-            
-            let tags = null
 
-            try {
+            showFirstPage() {
-                tags = await id3.fromFile(files[0]);
+                u('#firstStep').attr('style', 'display:block')
-            } catch(e) {
+                u('#lastStep').attr('style', 'display:none')
-                console.error(e)
             }
-            
-            console.log(tags)
-            if(tags != null) {
-                console.log("ID" + tags.kind + " detected, setting values...");
-                
-                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(', ')
 
-                        genres.forEach(genre => {
+            async detectTags(blob) {
-                            if(document.querySelector("#lastStep select[name=genre] > option[value='" + genre + "']") != null) {
+                const return_params = {
-                                document.querySelector("#lastStep select[name=genre]").value = genre;
+                    performer: '',
-                            }
+                    name: '',
-                        })
+                    genre: '',
-                    } else {
+                    lyrics: '',
-                        if(document.querySelector("#lastStep select[name=genre] > option[value='" + tags.genre + "']") != null) {
+                    explicit: 0,
-                            document.querySelector("#lastStep select[name=genre]").value = tags.genre;
+                    unlisted: 0,
-                        } 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(tags.comments != null)
+                function fallback() {
-                    document.querySelector("#lastStep textarea[name=lyrics]").value = tags.comments
+                    console.info('Tags not found, setting default values.')
-            } else {
+                    return_params.name = remove_file_format(blob.name)
-                fallback()
+                    return_params.genre = 'Other'
-            }
+                    return_params.performer = tr('track_unknown')
-        });
+                }
 
-        u("#backToUpload").on("click", (e) => {
+                let tags = null
-            document.querySelector("#firstStep").style.display = "block"
+                try {
-            document.querySelector("#lastStep").style.display = "none"
+                    tags = await id3.fromFile(blob)
+                } catch(e) {
+                    console.error(e)
+                }
 
-            document.querySelector("#lastStep input[name=name]").value = ""
+                console.log(tags)
-            document.querySelector("#lastStep input[name=performer]").value = ""
+                if(tags != null) {
-            document.querySelector("#lastStep select[name=genre]").value = ""
+                    console.log("ID" + tags.kind + " detected, setting values...")
-            document.querySelector("#lastStep textarea[name=lyrics]").value = ""
+                    if(tags.title) {
-            document.querySelector("#audio_input").value = ""
+                        return_params.name = tags.title
-        })
-
-        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)
+                        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
+                
+                }
+                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)
+            }
+        }
+
+        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
+                    }
+                })
+
+                if(!has_duplicates) {
+                    window.__audio_upload_page.appendFile(appender)
                 }
             })
+            window.__audio_upload_page.hideFirstPage()
         })
     </script>
 {/block}

Web/Presenters/templates/Audio/bigplayer.xml

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

Web/Presenters/templates/Audio/player.xml

@@ -1,24 +1,25 @@
 {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()}" 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()}">
+<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()}">
     <audio class="audio" />
 
     <div id="miniplayer" class="audioEntry">
-        <div class='audioEntryWrapper' style="display: flex;" draggable='true'>
+        <div class='audioEntryWrapper' draggable='true'>
             <div class="playerButton">
                 <div class="playIcon"></div>
             </div>
 
-            <div class="status" draggable='false'>
+            <div class="status">
                 <div class="mediaInfo noOverflow">
                     <div class="info">
-                        <strong class="performer">
+                        <strong class="performer" n:foreach='$performers as $performer'>
-                            <a href="/search?section=audios&order=listens&only_performers=on&q={$audio->getPerformer()}">{$audio->getPerformer()}</a>
+                            <a draggable='false' href="/search?section=audios&order=listens&only_performers=on&q={$performer}">{$performer}</a>{if $performer != end($performers)}, {/if}
                         </strong>
                         —
-                        <span class="title {if !empty($audio->getLyrics())}withLyrics{/if}">{$audio->getTitle()}</span>
+                        <span draggable='false' 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">
@@ -27,7 +28,7 @@
                 </div>
             </div>
 
-            <div class="volume">
+            <div class="mini_timer">
                 <span class="nobold {if !$hideButtons}hideOnHover{/if}" data-unformatted="{$audio->getLength()}">{$audio->getFormattedLength()}</span>
                 <div class="buttons">
                     {php $hasAudio = isset($thisUser) && $audio->isInLibraryOf($thisUser)}
@@ -44,10 +45,13 @@
                 </div>
             </div>
         </div>
-        <div class="subTracks" draggable='false'>
+        <div class="subTracks" draggable='false' n:if="!$isWithdrawn">
             <div class="lengthTrackWrapper">
                 <div class="track lengthTrack">
-                    <div class="selectableTrack" n:attr="style => $isWithdrawn ? 'display: none;' : ''">
+                    <div class="selectableTrack">
+                        <div class='selectableTrackLoadProgress'>
+                            <div class="load_bar"></div>
+                        </div>
                         <div class="selectableTrackSlider">
                             <div class="slider"></div>
                         </div>

Web/Presenters/templates/Audio/tabs.xml

@@ -2,6 +2,7 @@
     <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>
@@ -12,7 +13,7 @@
 
             <a n:if="isset($thisUser)" href="/audios/newPlaylist">{_new_playlist}</a>
 
-            {if !$isMy && $mode !== 'popular' && $mode !== 'new'}
+            {if !$isMy && $mode !== 'popular' && $mode !== 'new' && $mode != 'alone_audio'}
                 <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>
@@ -24,13 +25,13 @@
 
         {if $friendsAudios}
             <div class="friendsAudiosList">
-                <a href="/audios{$fr->getRealId()}" n:foreach="$friendsAudios as $fr">
+                <a href="/audios{$friend->getRealId()}" n:foreach="$friendsAudios as $friend">
                     <div class="elem">
-                        <img src="{$fr->getAvatarURL()}" />
+                        <img src="{$friend->getAvatarURL()}" />
 
                         <div class="additionalInfo">
-                            <span class="name noOverflow">{$fr->getCanonicalName()}</span>
+                            <span class="name noOverflow">{$friend->getCanonicalName()}</span>
-                            <span class="desc">{$audioStatus ? $audioStatus->getName() : tr("audios_count", $fr->getAudiosCollectionSize())}</span>
+                            <span class="desc">{$audioStatus ? $audioStatus->getName() : tr("audios_count", $friend->getAudiosCollectionSize())}</span>
                         </div>
                     </div>
                 </a>

Web/Presenters/templates/Gifts/Pick.xml

@@ -13,7 +13,7 @@
 
 {block content}
     <div class="gift_grid scroll_container">
-        <div n:foreach="$gifts as $gift" n:class="scroll_node, gift_sel, !$gift->canUse($thisUser) ? disabled" data-gift="{$gift->getId()}">
+        <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()}">
             <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>
-        </div>
+        </a>
     </div>
 
     <div style="padding: 8px;">
@@ -41,18 +41,3 @@
         ]}
     </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,27 +80,6 @@
             
         </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}
@@ -115,7 +94,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()})">
+            <a class="profile_link" href="javascript:changeOwner({$club->getId()}, {$user->getId()}, '{$user->getCanonicalName()}')">
                 {_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" id="profile_link">{_statistics}</a>
+            <a href="/club{$club->getId()}/stats" rel="nofollow" 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,31 +168,7 @@
         {/if}
         {var $canReport = $thisUser->getId() != $club->getOwner()->getId()}
         {if $canReport}
-        <a class="profile_link" style="display:block;" href="javascript:reportClub()">{_report}</a>
+        <a class="profile_link" style="display:block;" href="javascript:reportClub({$club->getId()})">{_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}
@@ -318,7 +294,3 @@
 </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">{_create_note}</a>
+                    <a href="/notes/create" rel='nofollow'>{_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">{_edit}</a>
+                            <a href="/note{$dat->getOwner()->getId()}_{$dat->getVirtualId()}/edit" rel='nofollow'>{_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">{_edit}</a>
+                <a href="/note{$note->getOwner()->getId()}_{$note->getVirtualId()}/edit" rel='nofollow'>{_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" id="uploadButton" style="display:none">
+    <input type="file" accept=".jpg,.png,.gif" name="files[]" multiple class="button photo_ajax_upload_button" id="uploadButton" style="display:none">
 
-    <div class="container_gray" style="min-height: 344px;">
+    <div class="container_gray photo_upload_container" style="min-height: 344px;">
         <div class="insertThere"></div>
         <div class="whiteBox" style="display: block;">
             <div class="boxContent">
@@ -62,7 +62,3 @@
         uploadButton.value = ''
     </script>
 {/block}
-
-{block bodyScripts}
-    {script "js/al_photos.js"}
-{/block}

Web/Presenters/templates/Search/Index.xml

@@ -17,8 +17,18 @@
             <div class="page_wrap">
                 {if $section == 'audios' && $count > 1}
                     {include "../Audio/bigplayer.xml", tidy => true}
-
+                    <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}">
+                        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>
                 {/if}
                 <div class='summaryBar summaryBarFlex padding'>
                     <div class='summary'>

Web/Presenters/templates/Topics/Create.xml

@@ -86,11 +86,4 @@
             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,17 +179,6 @@
                     </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,30 +492,6 @@
             <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">
+                    <a href="/admin/user{$user->getId()}/bans" class="profile_link" rel="nofollow">
                         {_blocks}
                     </a>
-                    <a href="/admin/logs?uid={$user->getId()}" class="profile_link" style="width: 194px;">
+                    <a href="/admin/logs?uid={$user->getId()}" class="profile_link" style="width: 194px;" rel="nofollow">
                         {_last_actions}
                     </a>
                 {/if}
@@ -165,33 +165,10 @@
                     </form>
                 {/if}
 
-                <a class="profile_link" style="display:block;width:96%;" href="javascript:reportUser()">{_report}</a>
+                <a class="profile_link" style="display:block;width:96%;" href="javascript:reportUser({$user->getId()})">{_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>
@@ -760,51 +737,6 @@
                 }
             {/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}
@@ -813,7 +745,3 @@
         {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">{_send_message}</a>
+            <a style="width: 194px;" n:if="$user->getPrivacyPermission('messages.write', $thisUser)" href="/im?sel={$user->getId()}" class="profile_link" rel='nofollow'>{_send_message}</a>
             {var $subStatus = $user->getSubscriptionStatus($thisUser)}
             {if $subStatus === 0}
                 <form action="/setSub/user" method="post" class="profile_link_form" id="addToFriends">
@@ -41,30 +41,7 @@
                     <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()">{_report}</a>
+            <a class="profile_link" style="display:block;width:96%;" href="javascript:reportUser({$user->getId()})">{_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()">{_report}</a>
+                                <a href="javascript:reportComment({$comment->getId()})">{_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,26 +82,3 @@
         </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="" />
+            <input type="hidden" name="horizontal_attachments" value="" autocomplete="off" />
-            <input type="hidden" name="vertical_attachments" value="" />
+            <input type="hidden" name="vertical_attachments" value="" autocomplete="off" />
-            <input type="hidden" name="poll" value="none" />
+            <input type="hidden" name="poll" value="none" autocomplete="off" />
-            <input type="hidden" id="source" name="source" value="none" />
+            <input type="hidden" id="source" name="source" value="none" autocomplete="off" />
-            <input type="hidden" name="type" value="1" />
+            <input type="hidden" name="type" value="1" autocomplete="off" />
             <input type="hidden" name="hash" value="{$csrfToken}" />
             <br/>
             <input type="submit" value="{_write}" class="button" />
@@ -104,15 +104,3 @@
         </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,14 +201,10 @@ 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,8 +8,12 @@
     padding: 8px;
 }
 
+.audiosSideContainer {
+    width: 74%;
+}
+
 .musicIcon {
-    background-image: url('/assets/packages/static/openvk/img/audios_controls.png?v=2');
+    background-image: url('/assets/packages/static/openvk/img/audios_controls.png?v=6');
     background-repeat: no-repeat;
     cursor: pointer;
 }
@@ -18,6 +22,8 @@
     filter: brightness(150%);
 }
 
+/* Main music player */
+
 .bigPlayer {
     background-color: rgb(240, 241, 242);
     margin-left: -10px;
@@ -28,68 +34,61 @@
     box-shadow: 1px 0px 8px 0px rgba(34, 60, 80, 0.2);
     position: sticky;
     top: 0px;
-    z-index: 1;
+    z-index: 10;
 }
 
+/* for search */
 .bigPlayer.tidy {
     width: 100%;
     margin-left: unset;
     margin-top: unset;
 }
 
-.bigPlayer.floating {
+.bigPlayer .bigPlayerWrapper {
-    position: fixed;
+    padding: 0px 14px 0px 14px;
-    z-index: 199;
+    display: grid;
-    width: 627px;
+    grid-template-columns: 0fr 3fr 1fr 0fr;
-    margin-top: -76px;
+    align-items: center;
+    height: 46px;
 }
 
-.bigPlayer .paddingLayer {
+/* Play button and arrows */
-    padding: 0px 0px 0px 14px;
+.bigPlayer .playButtons {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    width: 62px;
 }
 
-.bigPlayer .paddingLayer .playButtons {
+.bigPlayer .playButtons .playButton {
-    padding: 12px 0px;
-}
-
-.bigPlayer .paddingLayer .playButtons .playButton {
     width: 22px;
     height: 22px;
-    float: left;
     background-position-x: -72px;
 }
 
-.bigPlayer .paddingLayer .playButtons .playButton.pause {
+.bigPlayer .playButtons .playButton.pause {
     background-position-x: -168px;
 }
 
-.bigPlayer .paddingLayer .playButtons .nextButton {
+.bigPlayer .playButtons .nextButton,
-    width: 16px;
+.bigPlayer .playButtons .backButton {
-    height: 16px;
+    width: 12px;
-    background-position-y: -47px;
+    height: 12px;
 }
 
-.bigPlayer .paddingLayer .playButtons .backButton {
+.bigPlayer .playButtons .nextButton {
-    width: 16px;
+    background-position: -3px -51px;
-    height: 16px;
-    background-position-y: -47px;
-    background-position-x: -16px;
-    margin-left: 6px;
 }
 
-.bigPlayer .paddingLayer .additionalButtons {
+.bigPlayer .playButtons .backButton {
-    float: left;
+    background-position: -18px -51px;
-    margin-top: -6px;
-    width: 11%;
 }
 
-.bigPlayer .paddingLayer .additionalButtons .repeatButton {
+.bigPlayer .playButtons .arrowsButtons {
-    width: 14px;
+    display: flex;
-    height: 16px;
+    align-items: center;
-    background-position-y: -49px;
+    gap: 9px;
-    background-position-x: -31px;
+    height: 11px;
-    margin-left: 7px;
-    float: left;
 }
 
 .broadcastButton {
@@ -111,55 +110,47 @@
     float: left;
 }
 
-.bigPlayer .paddingLayer .additionalButtons .shuffleButton {
+/* Track panel and volume */
-    width: 14px;
+.bigPlayer .trackPanel {
-    height: 16px;
+    position: relative;
-    background-position: -50px -50px;
+    margin-left: 15px;
-    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;
-    padding-left: 4px;
+    flex-direction: column;
-    padding-top: 1.2px;
+    width: 386px;
 }
 
-.bigPlayer .paddingLayer .trackPanel {
+.bigPlayer .trackPanel .track {
-    float: left;
+    margin-top: -3px;
-    margin-top: -13px;
+}
-    margin-left: 13px;
+
-    width: 63%;
+.tip_result {
+    width: max-content;
+    height: 11px;
+    padding: 4px;
+    top: -6px;
+    background: #f7f7f7;
+    border: 1px solid #d8d8d8;
+    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;
+    width: 73px;
     position: relative;
 }
 
-.bigPlayer .paddingLayer .bigPlayerTip {
+.bigPlayer .volumePanel .volumePanelTrack {
-    display: none;
+    width: 100%;
-    z-index: 999;
-    background: #cecece;
-    padding: 3px;
-    top: -3px;
-    position: absolute;
-    transition: all .1s ease-out;
-    user-select: none;
 }
 
-.bigPlayer .paddingLayer .volumePanel {
+.bigPlayer .slider, .audioEmbed .track .slider {
-    width: 73px;
+    width: 15px;
-    float: left;
-}
-
-.bigPlayer .paddingLayer .slider, .audioEmbed .track .slider {
-    width: 18px;
     height: 7px;
     background: #606060;
     position: absolute;
@@ -168,59 +159,97 @@
     pointer-events: none;
 }
 
-.bigPlayer .paddingLayer .trackInfo .timer {
+.bigPlayer .trackInfo {
-    float: right;
+    display: flex;
-    margin-right: 8px;
+    flex-direction: row;
-    font-size: 10px;
+    height: 15px;
+    justify-content: space-between;
 }
 
-.bigPlayer .paddingLayer .trackInfo .timer .elapsedTime {
+.bigPlayer .trackPanel .trackInfo, 
-    cursor: pointer;
+.bigPlayer .trackPanel .track,
+.bigPlayer .volumePanel .volumePanelTrack {
+    padding-right: 8px;
 }
 
-.bigPlayer .paddingLayer .trackInfo .trackName {
+.bigPlayer .trackInfo .trackName {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    width: 81%;
+    max-width: 81%;
-    height: 13px;
+    height: 16px;
     display: inline-block;
     line-height: 14px;
 }
 
-.bigPlayer .paddingLayer .trackInfo .timer span {
+.bigPlayer .trackInfo .timer span,
-    font-size: 10px;
+.bigPlayer .trackInfo .timer {
+    font-size: 9px;
 }
 
-.bigPlayer .paddingLayer .trackInfo a {
+.bigPlayer .trackInfo a {
     font-weight: bold;
     color: black;
 }
 
-.bigPlayer .paddingLayer .trackInfo a:hover {
+.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 {
     text-decoration: underline;
     cursor: pointer;
 }
 
-.bigPlayer .paddingLayer .trackPanel .track .selectableTrack > div {
+.bigPlayer .trackPanel .track .selectableTrack > div {
-    width: 95%;
+    width: 96%;
     position: relative;
 }
 
-.bigPlayer .paddingLayer .volumePanel .selectableTrack > div {
+.bigPlayer .volumePanel .selectableTrack > div {
     position: relative;
-    width:72%
+    width: 77%;
 }
 
 .audioEmbed .track > .selectableTrack, .bigPlayer .selectableTrack {
     margin-top: 3px;
-    width: calc(100% - 8px);
+    width: 100%;
     border-top: #606060 1px solid;
     height: 6px;
     position: relative;
     user-select: none;
 }
 
+/* Audio miniplayer */
 #audioEmbed {
     cursor: pointer;
     user-select: none;
@@ -236,6 +265,26 @@
     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;
@@ -255,6 +304,30 @@
     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;
 }
@@ -267,18 +340,12 @@
     color: white;
 }
 
-.audioEntry .volume {
+.audioEntry .mini_timer {
     display: flex; 
     flex-direction: column;
-    width: 14%;
 }
 
-.audioEntry .nobold {
+.audioEntry.nowPlaying .mini_timer .nobold {
-    text-align: center;
-    margin-top: 12px;
-}
-
-.audioEntry.nowPlaying .volume .nobold {
     color: white !important;
 }
 
@@ -286,6 +353,7 @@
     fill: #ffffff;
 }
 
+/* Audio icons */
 .audioEntry.nowPlaying .buttons .musicIcon.edit-icon {
     background-position: -152px -51px;
 }
@@ -310,25 +378,12 @@
     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 {
@@ -348,25 +403,37 @@
 }
 
 .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%;
 }
 
-.overflowedName {
+.audioEntry .status .mediaInfo .info {
+    display: inline;
+}
+
+@keyframes marquee {
+    from { left: -100%; }
+    to { left: 100%; }
+}
+
+.audioEntry .status:hover .mediaInfo {
     position: absolute;
-    z-index: 99;
+    z-index: 2;
-    width: 80% !important;
+    overflow: visible;
+    white-space: wrap;
+    text-overflow: unset;
+    width: 83%;
+}
+
+.audioEntry .status:hover .mediaInfo .info {
+    width: 100%;
 }
 
 .audioEntry .status strong {
@@ -381,13 +448,41 @@
     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 .lengthTrackWrapper,
+.audioEmbed .subTracks .volumeTrackWrapper {
     width: 100%;
+    position: relative;
+}
+
+.audioEmbed .subTracks .lengthTrackWrapper .tip_result,
+.audioEmbed .subTracks .volumeTrackWrapper .tip_result {
+    top: -20px;
 }
 
 .audioEmbed .subTracks .volumeTrackWrapper {
@@ -408,86 +503,71 @@
     display: flex;
 }
 
-.audioEntry:hover .volume .hideOnHover {
+.audioEntry:hover .mini_timer .hideOnHover {
     display: none;
 }
 
 .audioEntry .buttons {
     display: none;
     flex-direction: row-reverse;
-    gap: 5px;
-    align-items: center;
     justify-content: flex-start;
-    width: 62px;
+    align-items: center;
-    height: 20px;
+    gap: 5px;
     position: absolute;
-    right: 3%;
+    z-index: 9;
-    top: 2px;
+    right: 10px;
-    margin-top: 7px;
+    top: 0;
     /* чтоб избежать заедания во время ховера кнопки добавления */
     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 {
-    width: 12px;
+    background-position: -51px -67px;
-    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;
@@ -506,14 +586,6 @@
     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;
@@ -533,6 +605,28 @@
     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 {
@@ -617,10 +711,10 @@
 }
 
 .explicitMark {
-    margin-top: 2px;
+    width: 13px;
-    margin-left: 3px;
-    width: 11px;
     height: 11px;
+    margin-bottom: -2px;
+    display: inline-block;
 }
 
 .explicitMark path {
@@ -809,3 +903,145 @@
     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;
+}
+
+#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: absolute;
+    position: fixed;
     background: rgba(54, 54, 54, 0.95);
     border-radius: 3px;
     min-width: 299px;

Web/static/css/main.css

@@ -2261,6 +2261,25 @@ 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;
@@ -2554,57 +2573,55 @@ a.poll-retract-vote {
     border-radius: 3px;
 }
 
-.post-vertical .vertical-attachment {
+.vertical-attachment {
     display: grid;
     grid-template-columns: 1fr 0fr;
 }
 
-.post-vertical .vertical-attachment:first-of-type {
+.vertical-attachment:first-of-type {
     margin-top: 7px;
 }
 
-.post-vertical .vertical-attachment .audioEntry {
+.vertical-attachment .audioEntry {
     max-height: 28px;
     min-height: 18px;
 }
 
-.post-vertical .vertical-attachment .audioEntry:hover {
+.vertical-attachment .audioEntry:hover {
     background: unset !important;
 }
 
-.post-vertical .vertical-attachment .audioEntry .playerButton {
+.vertical-attachment .audioEntry .buttons {
-    padding: 0px 3px 0px 0px;
-}
-
-.post-vertical .vertical-attachment .audioEntry .buttons {
     display: none;
 }
 
-.post-vertical .vertical-attachment .audioEntry .status {
+.vertical-attachment .audioEntry .status {
     margin-top: 1px;
     margin-left: 2px;
     height: 15px;
 }
 
-.post-vertical .vertical-attachment .audioEntry .nobold {
+.vertical-attachment .audioEntry .nobold {
     margin-top: 1px;
 }
 
-.post-vertical .vertical-attachment .audioEntry .subTracks {
+.vertical-attachment .audioEntry .subTracks {
-    padding-bottom: 2px;
+    padding-left: 0px;
-    padding-left: 3px;
     padding-right: 0px;
+    margin-top: 2px;
 }
 
-.post-vertical .vertical-attachment .audioEntry .audioEntryWrapper {
+.vertical-attachment .audioEntry .audioEntryWrapper {
-    height: 18px;
+    height: 14px;
+    padding: 0px 4px 0px 0px;
+    gap: 2px;
 }
 
-.post-vertical .vertical-attachment .vertical-attachment-content { 
+.vertical-attachment .vertical-attachment-content { 
     max-height: 27px;
 }
 
-.post-vertical .vertical-attachment .vertical-attachment-content .overflowedName {
+.vertical-attachment .vertical-attachment-content .overflowedName {
     position: initial;
     width: 100% !important;
 }
@@ -2833,6 +2850,10 @@ 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;
 }
@@ -3559,7 +3580,7 @@ hr {
     cursor: pointer;
 }
 
-#upload_container.uploading {
+#upload_container .upload_container_element .upload_container_name.uploading {
     background: white url('/assets/packages/static/openvk/img/progressbar.gif') !important;
     background-position-x: 0% !important;
     background-position-y: 0% !important;
@@ -3857,3 +3878,36 @@ 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,4 +1,3 @@
-const contentPage = document.querySelector(".page_content");
 const rootElement = document.documentElement;
 
 // охуенное название файла, КТО ЭТО ПРИДУМАЛ КРАСАВА Я ИЗ КОМНАТЫ С ЭТОГО УЛЕТЕЛ НАХУЙ
@@ -8,11 +7,11 @@ let scrolledAndHidden = false;
 let smallBlockObserver = new IntersectionObserver(entries => {
     entries.forEach(x => {
         window.requestAnimationFrame(() => {
-            let pastHeight = contentPage.getBoundingClientRect().height;
+            let pastHeight = u('.page_content').nodes[0].getBoundingClientRect().height;
             if(x.isIntersecting)
-                contentPage.classList.remove("overscrolled");
+                u('.page_content').nodes[0].classList.remove("overscrolled");
             else
-                contentPage.classList.add("overscrolled");
+            u('.page_content').nodes[0].classList.add("overscrolled");
 
             // let currentHeight = contentPage.getBoundingClientRect().height;
             // let ratio         = currentHeight / pastHeight;
@@ -22,7 +21,7 @@ let smallBlockObserver = new IntersectionObserver(entries => {
             // То что я задокументировал - работает мегакриво.
             // Пусть юзер и проскролливает какую-то часть контента, зато не получит
             // эпилепсии при использовании :)
-        }, contentPage);
+        }, u('.page_content').nodes[0]);
     });
 }, {
     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.location.assign(FINAL_URL.href)
+                    window.router.route(FINAL_URL.href)
                 })
                 
                 COUNT.forEach(item => {

Web/static/js/al_photos.js

@@ -1,4 +1,4 @@
-$(document).on("change", "#uploadButton", (e) => {
+$(document).on("change", ".photo_ajax_upload_button", (e) => {
     let iterator = 0
 
     if(e.currentTarget.files.length > 10) {
@@ -56,7 +56,7 @@ $(document).on("change", "#uploadButton", (e) => {
                         <textarea style="margin-left: 62px; resize: none;" maxlength="255"></textarea>
                     </div>
                     <div class="uploadedImage">
-                        <a href="${photo.link}" target="_blank"><img width="125" src="${photo.url}"></a>
+                        <a onclick="OpenMiniature(event, '${photo.link}', null, '${photo.pretty_id}', null)"><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", "#uploadButton", (e) => {
     xhr.send(photos)
 })
 
-$(document).on("click", "#endUploading", (e) => {
+$(document).on("click", ".photo_upload_container #endUploading", (e) => {
     let table = document.querySelector("#photos")
     let data  = new FormData()
     let arr   = new Map();
@@ -108,7 +108,7 @@ $(document).on("click", "#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.location.assign(`/album${result.owner}_${result.album}`)})
+            NewNotification(tr("photos_successfully_uploaded"), tr("click_to_go_to_album"), null, () => {window.router.route({url:`/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", "#endUploading", (e) => {
     xhr.send(data)
 })
 
-$(document).on("click", "#deletePhoto", (e) => {
+$(document).on("click", ".photo_upload_container #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;
 })
 
-$(".container_gray").on("dragover", (e) => {
+$(document).on("dragover", ".photo_upload_container", (e) => {
     e.preventDefault()
     document.querySelector("#fakeButton").classList.add("dragged")
     document.querySelector("#fakeButton").value = tr("drag_files_here")
 })
 
-$(".container_gray").on("dragleave", (e) => {
+$(document).on("dragleave", ".photo_upload_container", (e) => {
     e.preventDefault()
     document.querySelector("#fakeButton").classList.remove("dragged")
     document.querySelector("#fakeButton").value = tr("upload_picts")
 })
 
-$(".container_gray").on("drop", (e) => {
+$(document).on("drop", ".photo_upload_container", (e) => {
     e.originalEvent.dataTransfer.dropEffect = 'move';
     e.preventDefault()
 
@@ -190,7 +190,7 @@ $(".container_gray").on("drop", (e) => {
     u("#uploadButton").trigger("change")
 })
 
-u(".container_gray").on("paste", (e) => {
+u(document).on("paste", ".photo_upload_container", (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

@@ -1,113 +0,0 @@
-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,6 +161,7 @@ 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,8 +53,9 @@ u(document).on('click', '.menu_toggler', (e) => {
     }
 })
 
-$(document).on("click", ".post-like-button", function(e) {
+u(document).on("click", ".post-like-button", function(e) {
     e.preventDefault();
+    e.stopPropagation()
     
     var thisBtn = u(this).first();
     var link    = u(this).attr("href");
@@ -90,6 +91,7 @@ async function OpenMiniature(e, photo, post, photo_id, type = "post") {
     костыли но смешные однако
     */
     e.preventDefault();
+    e.stopPropagation()
 
     // Значения для переключения фоток
 
@@ -422,7 +424,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:${scrollY}px;`)
+        miniplayer.attr('style', `left:100px;top:0px;`)
         miniplayer.find('#__miniplayer_return').on('click', (e) => {
             msgbox.reveal()
             msgbox.getNode().find('.center-part').nodes[0].append(miniplayer.find('.miniplayer-body > *').nodes[0])
@@ -434,7 +436,7 @@ async function OpenVideo(video_arr = [], init_player = true)
             u('.miniplayer').remove()
         })
 
-        $('.miniplayer').draggable({cursor: 'grabbing', containment: 'body', cancel: '.miniplayer-body'})
+        $('.miniplayer').draggable({cursor: 'grabbing', containment: 'window', cancel: '.miniplayer-body'})
         $('.miniplayer').resizable({
             maxHeight: 2000,
             maxWidth: 3000,
@@ -448,6 +450,7 @@ 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')
@@ -470,6 +473,7 @@ 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");
@@ -514,6 +518,280 @@ 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>
@@ -949,14 +1227,14 @@ u(document).on('paste', '#write .small-textarea', (e) => {
     }
 })
 
-u(document).on('dragstart', '#write .post-horizontal .upload-item, .post-vertical .upload-item', (e) => {
+u(document).on('dragstart', '#write .post-horizontal .upload-item, .post-vertical .upload-item, .PE_audios .vertical-attachment', (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', (e) => {
+u(document).on('dragover', '#write .post-horizontal .upload-item, .post-vertical .upload-item, .PE_audios .vertical-attachment', (e) => {
     e.preventDefault()
 
     const target = u(e.target).closest('.upload-item')
@@ -973,7 +1251,12 @@ u(document).on('dragover', '#write .post-horizontal .upload-item, .post-vertical
     return
 })
 
-u(document).on('#write dragleave dragend', '.post-horizontal .upload-item, .post-vertical .upload-item', (e) => {
+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) => {
     //console.log(e)
     u(e.target).closest('.upload-item').removeClass('dragged')
     return
@@ -1635,7 +1918,7 @@ u(document).on('click', `.post-horizontal .upload-item .upload-delete`, (e) => {
     u(e.target).closest('.upload-item').remove()
 })
 
-u(document).on('click', `.post-vertical .vertical-attachment #small_remove_button`, (e) => {
+u(document).on('click', `.vertical-attachment #small_remove_button`, (e) => {
     e.preventDefault()
     u(e.target).closest('.vertical-attachment').remove()
 })
@@ -1935,7 +2218,6 @@ $(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();
@@ -2078,10 +2360,18 @@ async function __processPaginatorNextPage(page)
         container.nodes[0].append(u(`.paginator:not(.paginator-at-top)`).nodes[0].parentNode)
     }
     
-    if(window.player) {
+    if(window.player && window.player.isAtAudiosPage() && window.player.isAtCurrentContextPage()) {
-        window.player.loadContextPage(page)
+        window.player.loadContext(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)
     }
@@ -2221,3 +2511,76 @@ 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').length < 1) {
+        if(u('.ovk-msg-all:not(.msgbox-hidden)').length < 1) {
             u('body').removeClass('dimmed')
             u('html').attr('style', 'overflow-y:scroll')
         }
@@ -101,13 +101,15 @@ class CMessageBox {
     hide() {
         u('body').removeClass('dimmed')
         u('html').attr('style', 'overflow-y:scroll')
-        this.getNode().attr('style', 'display: none;')
+        this.getNode().attr('style', 'display: none;').addClass('msgbox-hidden')
+        this.hidden = true
     }
 
     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,126 +39,6 @@ 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

@@ -0,0 +1,370 @@
+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 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())
+        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(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.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 == '') {
+            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
+    }
+
+    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)
+    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,3 +173,90 @@ 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));
+}

locales/en.strings

@@ -882,7 +882,7 @@
 "genre" = "Genre";
 "lyrics" = "Lyrics";
 
-"select_another_file" = "Select another file";
+"select_another_file" = "Upload another file";
 
 "limits" = "Limits";
 "select_audio" = "Select audio from your computer";
@@ -949,12 +949,11 @@
 "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's cover";
+"playlist_cover" = "Playlist cover";
 
 "minutes_count_zero" = "Lasts no minutes";
 "minutes_count_one" = "Lasts one minute";
@@ -995,9 +994,17 @@
 "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";
@@ -1596,6 +1603,7 @@
 "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" = "Сменить обложку";
-"playlist_cover" = "Обложка плейлиста";
+"add_audio_verb" = "Добавить аудиозаписи";
 
 "minutes_count_zero" = "длится ноль минут";
 "minutes_count_one" = "длится одну минуту";
@@ -950,9 +950,17 @@
 "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" = "Ответы";
@@ -1498,6 +1506,7 @@
 "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 .paddingLayer .slider,
+.bigPlayer .slider,
 .audioEmbed .track .slider {
     background: #b9b9b9 !important;
 }
@@ -500,11 +500,11 @@ input[type="radio"] {
     outline: 1px solid #645a86 !important;
 }
 
-.preformer {
+.preformer, .trackPerformers a {
     color: #b7b7b7 !important;
 }
 
-.bigPlayer .paddingLayer .trackPanel .track .timeTip {
+.tip_result {
     background: #b9b9b9 !important;
     color: black !important;
 }
@@ -518,7 +518,7 @@ input[type="radio"] {
 }
 
 .audioEntry .performer a,
-.bigPlayer .paddingLayer .trackInfo a {
+.bigPlayer .trackInfo a {
     color: #a2a1a1 !important;
 }
 
@@ -526,10 +526,6 @@ input[type="radio"] {
     opacity: 49%;
 }
 
-.bigPlayer .paddingLayer .bigPlayerTip {
-    color: black !important;
-}
-
 .verticalGrayTabs a {
     color: #bbb !important;
 }
@@ -547,6 +543,15 @@ input[type="radio"] {
     filter: invert(81%);
 }
 
+.load_bar {
+    background: #2c2839 !important;
+    border-bottom-color: #151418 !important;
+}
+
+#ajax_audio_player {
+    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%);