Make audio player pizdatey

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

@@ -779,16 +779,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() && $audio->isAvailable()) {
-                "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/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"}
@@ -392,6 +391,7 @@
         {script "js/al_suggestions.js"}
         {script "js/al_navigation.js"}
         {script "js/al_comments.js"}
+        {script "js/al_music.js"}
 
         {ifset $thisUser}
             {script "js/al_notifs.js"}

Web/Presenters/templates/Audio/List.xml

@@ -54,18 +54,24 @@
     
     {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}
+            }
+        {/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 +87,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/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/bigplayer.xml

@@ -1,56 +1,56 @@
 <div n:class="bigPlayer, $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, !$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>
@@ -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/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/routes.yml

@@ -201,12 +201,6 @@ 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: "/audios/search"

Web/static/css/audios.css

@@ -8,6 +8,10 @@
     padding: 8px;
 }
 
+.audiosSideContainer {
+    width: 74%;
+}
+
 .musicIcon {
     background-image: url('/assets/packages/static/openvk/img/audios_controls.png?v=2');
     background-repeat: no-repeat;
@@ -18,6 +22,8 @@
     filter: brightness(150%);
 }
 
+/* Main music player */
+
 .bigPlayer {
     background-color: rgb(240, 241, 242);
     margin-left: -10px;
@@ -31,65 +37,58 @@
     z-index: 1;
 }
 
+/* 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,54 +110,46 @@
     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;
-    float: left;
-}
-
-.bigPlayer .paddingLayer .slider, .audioEmbed .track .slider {
     width: 18px;
     height: 7px;
     background: #606060;
@@ -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%;
     position: relative;
 }
 
-.bigPlayer .paddingLayer .volumePanel .selectableTrack > div {
+.bigPlayer .volumePanel .selectableTrack > div {
     position: relative;
-    width:72%
+    width: 72%
 }
 
 .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;
-    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;
@@ -617,10 +689,10 @@
 }
 
 .explicitMark {
-    margin-top: 2px;
+    width: 13px;
-    margin-left: 3px;
-    width: 11px;
     height: 11px;
+    margin-bottom: -2px;
+    display: inline-block;
 }
 
 .explicitMark path {

Web/static/css/main.css

@@ -2572,10 +2572,6 @@ a.poll-retract-vote {
     background: unset !important;
 }
 
-.post-vertical .vertical-attachment .audioEntry .playerButton {
-    padding: 0px 3px 0px 0px;
-}
-
 .post-vertical .vertical-attachment .audioEntry .buttons {
     display: none;
 }
@@ -2597,7 +2593,9 @@ a.poll-retract-vote {
 }
 
 .post-vertical .vertical-attachment .audioEntry .audioEntryWrapper {
-    height: 18px;
+    height: 14px;
+    padding: 0px 4px 0px 0px;
+    gap: 2px;
 }
 
 .post-vertical .vertical-attachment .vertical-attachment-content { 

Web/static/js/al_wall.js

@@ -973,7 +973,7 @@ 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('dragleave dragend', '#write .post-horizontal .upload-item, .post-vertical .upload-item', (e) => {
     //console.log(e)
     u(e.target).closest('.upload-item').removeClass('dragged')
     return
@@ -2079,9 +2079,11 @@ async function __processPaginatorNextPage(page)
     }
     
     if(window.player) {
-        window.player.loadContextPage(page)
+        window.player.loadContext(page)
     }
 
+    location.hash = 'pages/'+page
+
     if(typeof __scrollHook != 'undefined') {
         __scrollHook(page)
     }
@@ -2221,3 +2223,26 @@ 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>    
+    `)
+})

Web/static/js/utils.js

@@ -173,3 +173,11 @@ 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)
+}