mirror of
https://github.com/openvk/openvk
synced 2024-12-23 00:51:03 +03:00
Make audio player pizdatey
This commit is contained in:
mrilyew
parent
e4a79a8ffb
commit
f690ff7df7
16 changed files with 1114 additions and 1027 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -250,13 +250,15 @@ class Audios
|
|||
$result = $this->audios->where([
|
||||
"unlisted" => 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) {
|
||||
|
|
|
|||
|
|
@ -779,16 +779,21 @@ final class AudioPresenter extends OpenVKPresenter
|
|||
$audiosArr = [];
|
||||
|
||||
foreach($audios as $audio) {
|
||||
$audiosArr[] = [
|
||||
"id" => $audio->getId(),
|
||||
"name" => $audio->getTitle(),
|
||||
"performer" => $audio->getPerformer(),
|
||||
"keys" => $audio->getKeys(),
|
||||
"url" => $audio->getUrl(),
|
||||
"length" => $audio->getLength(),
|
||||
"available" => $audio->isAvailable(),
|
||||
"withdrawn" => $audio->isWithdrawn(),
|
||||
];
|
||||
$output_array = [];
|
||||
$output_array['id'] = $audio->getId();
|
||||
$output_array['name'] = $audio->getTitle();
|
||||
$output_array['performer'] = $audio->getPerformer();
|
||||
|
||||
if(!$audio->isWithdrawn() && $audio->isAvailable()) {
|
||||
$output_array['keys'] = $audio->getKeys();
|
||||
$output_array['url'] = $audio->getUrl();
|
||||
}
|
||||
|
||||
$output_array['length'] = $audio->getLength();
|
||||
$output_array['available'] = $audio->isAvailable();
|
||||
$output_array['withdrawn'] = $audio->isWithdrawn();
|
||||
|
||||
$audiosArr[] = $output_array;
|
||||
}
|
||||
|
||||
$resultArr = [
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
|
|
|
|||
|
|
@ -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}">
|
||||
<input n:if="$mode == 'new'" type="hidden" name="bigplayer_context" data-type="new_audios" data-entity="0" data-page="1">
|
||||
<input n:if="$mode == 'popular'" type="hidden" name="bigplayer_context" data-type="popular_audios" data-entity="0" data-page="1">
|
||||
<div class="bigPlayerDetector"></div>
|
||||
<script>
|
||||
window.__current_page_audio_context = null
|
||||
{if $mode == 'list'}
|
||||
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 n:if="$audiosCount <= 0" style='height: 50%;'>
|
||||
<div class="audiosContainer audiosSideContainer audiosPaddingContainer" n:if="$mode != 'playlists'">
|
||||
<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 class="scroll_node infObj" n:foreach="$audios as $audio">
|
||||
<div n:if="$audiosCount > 0" class="scroll_container">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -1,56 +1,56 @@
|
|||
<div n:class="bigPlayer, $tidy ? tidy">
|
||||
<audio class="audio" />
|
||||
<div class="paddingLayer">
|
||||
<div class="bigPlayerWrapper">
|
||||
<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"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="backButton musicIcon"></div>
|
||||
</div>
|
||||
<div class="nextButton musicIcon" data-tip='simple' data-title=""></div>
|
||||
<div class="backButton musicIcon" data-tip='simple' data-title=""></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="bigPlayerTip">00:00</div>
|
||||
<div class="track">
|
||||
<div class="selectableTrack">
|
||||
<div id='bigPlayerLengthSliderWrapper'>
|
||||
<div class="slider"></div>
|
||||
</div>
|
||||
<div class='selectableTrackLoadProgress'>
|
||||
<div class="load_bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="volumePanel">
|
||||
<div class="volumePanelTrack">
|
||||
<div class="selectableTrack">
|
||||
<div id='bigPlayerVolumeSliderWrapper'>
|
||||
<div class="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="additionalButtons">
|
||||
<div class="repeatButton musicIcon" title="{_repeat_tip} [R]" ></div>
|
||||
<div class="shuffleButton musicIcon" title="{_shuffle_tip}"></div>
|
||||
<div class="deviceButton musicIcon" title="{_mute_tip} [M]"></div>
|
||||
<div class="repeatButton musicIcon" data-tip='simple' data-title="{_repeat_tip} [R]" ></div>
|
||||
<div class="shuffleButton musicIcon" data-tip='simple' data-title="{_shuffle_tip}"></div>
|
||||
<div class="deviceButton musicIcon" data-tip='simple' data-title="{_mute_tip} [M]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<a href="/search?section=audios&order=listens&only_performers=on&q={$audio->getPerformer()}">{$audio->getPerformer()}</a>
|
||||
<strong class="performer" n:foreach='$performers as $performer'>
|
||||
<a draggable='false' href="/search?section=audios&order=listens&only_performers=on&q={$performer}">{$performer}</a>{if $performer != end($performers)}, {/if}
|
||||
</strong>
|
||||
—
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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="desc">{$audioStatus ? $audioStatus->getName() : tr("audios_count", $fr->getAudiosCollectionSize())}</span>
|
||||
<span class="name noOverflow">{$friend->getCanonicalName()}</span>
|
||||
<span class="desc">{$audioStatus ? $audioStatus->getName() : tr("audios_count", $friend->getAudiosCollectionSize())}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,18 @@
|
|||
<div class="page_wrap">
|
||||
{if $section == 'audios' && $count > 1}
|
||||
{include "../Audio/bigplayer.xml", tidy => true}
|
||||
|
||||
<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}">
|
||||
<script>
|
||||
window.__current_page_audio_context = {
|
||||
'name': 'classic_search_context',
|
||||
'order': {$order},
|
||||
'query': {$query},
|
||||
'genre': {$_REQUEST['genre']},
|
||||
'invert': {$invert ? 1 : 0},
|
||||
'only_performers': {$_REQUEST['only_performers'] ? 1 : 0},
|
||||
'with_lyrics': {$_REQUEST['with_lyrics'] ? 1 : 0},
|
||||
'page': {$page}
|
||||
}
|
||||
</script>
|
||||
{/if}
|
||||
<div class='summaryBar summaryBarFlex padding'>
|
||||
<div class='summary'>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
position: fixed;
|
||||
z-index: 199;
|
||||
width: 627px;
|
||||
margin-top: -76px;
|
||||
.bigPlayer .bigPlayerWrapper {
|
||||
padding: 0px 14px 0px 14px;
|
||||
display: grid;
|
||||
grid-template-columns: 0fr 3fr 1fr 0fr;
|
||||
align-items: center;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer {
|
||||
padding: 0px 0px 0px 14px;
|
||||
/* Play button and arrows */
|
||||
.bigPlayer .playButtons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
width: 62px;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .playButtons {
|
||||
padding: 12px 0px;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .playButtons .playButton {
|
||||
.bigPlayer .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 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position-y: -47px;
|
||||
.bigPlayer .playButtons .nextButton,
|
||||
.bigPlayer .playButtons .backButton {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .playButtons .backButton {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position-y: -47px;
|
||||
background-position-x: -16px;
|
||||
margin-left: 6px;
|
||||
.bigPlayer .playButtons .nextButton {
|
||||
background-position: -3px -51px;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .additionalButtons {
|
||||
float: left;
|
||||
margin-top: -6px;
|
||||
width: 11%;
|
||||
.bigPlayer .playButtons .backButton {
|
||||
background-position: -18px -51px;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .additionalButtons .repeatButton {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
background-position-y: -49px;
|
||||
background-position-x: -31px;
|
||||
margin-left: 7px;
|
||||
float: left;
|
||||
.bigPlayer .playButtons .arrowsButtons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.broadcastButton {
|
||||
|
|
@ -111,54 +110,46 @@
|
|||
float: left;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .additionalButtons .shuffleButton {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
background-position: -50px -50px;
|
||||
margin-left: 7px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .additionalButtons .deviceButton {
|
||||
width: 12px;
|
||||
height: 16px;
|
||||
background-position: -202px -50px;
|
||||
margin-left: 7px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .playButtons .arrowsButtons {
|
||||
float: left;
|
||||
/* Track panel and volume */
|
||||
.bigPlayer .trackPanel {
|
||||
position: relative;
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
padding-left: 4px;
|
||||
padding-top: 1.2px;
|
||||
flex-direction: column;
|
||||
width: 386px;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .trackPanel {
|
||||
float: left;
|
||||
margin-top: -13px;
|
||||
margin-left: 13px;
|
||||
width: 63%;
|
||||
.bigPlayer .trackPanel .track {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
z-index: 999;
|
||||
background: #cecece;
|
||||
padding: 3px;
|
||||
top: -3px;
|
||||
position: absolute;
|
||||
transition: all .1s ease-out;
|
||||
user-select: none;
|
||||
.bigPlayer .volumePanel .volumePanelTrack {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .volumePanel {
|
||||
width: 73px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .slider, .audioEmbed .track .slider {
|
||||
.bigPlayer .slider, .audioEmbed .track .slider {
|
||||
width: 18px;
|
||||
height: 7px;
|
||||
background: #606060;
|
||||
|
|
@ -168,59 +159,97 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .trackInfo .timer {
|
||||
float: right;
|
||||
margin-right: 8px;
|
||||
font-size: 10px;
|
||||
.bigPlayer .trackInfo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 15px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .trackInfo .timer .elapsedTime {
|
||||
cursor: pointer;
|
||||
.bigPlayer .trackPanel .trackInfo,
|
||||
.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%;
|
||||
height: 13px;
|
||||
max-width: 81%;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.bigPlayer .paddingLayer .trackInfo .timer span {
|
||||
font-size: 10px;
|
||||
.bigPlayer .trackInfo .timer span,
|
||||
.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 {
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.audioEntry.nowPlaying .volume .nobold {
|
||||
.audioEntry.nowPlaying .mini_timer .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;
|
||||
width: 80% !important;
|
||||
z-index: 2;
|
||||
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;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 2px;
|
||||
margin-top: 7px;
|
||||
z-index: 9;
|
||||
right: 10px;
|
||||
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;
|
||||
margin-left: 3px;
|
||||
width: 11px;
|
||||
width: 13px;
|
||||
height: 11px;
|
||||
margin-bottom: -2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.explicitMark path {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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>
|
||||
`)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue