-
-
-
-
-
-
- {script "js/al_playlists.js"}
{/block}
diff --git a/Web/Presenters/templates/Gifts/Pick.xml b/Web/Presenters/templates/Gifts/Pick.xml
index 22345389..53538b78 100644
--- a/Web/Presenters/templates/Gifts/Pick.xml
+++ b/Web/Presenters/templates/Gifts/Pick.xml
@@ -13,7 +13,7 @@
{block content}
-
-
-
-
-
- {include "player.xml", audio => $audio, hideButtons => true}
-
-
- {_add_to_playlist}
-
-
- {_show_more_audios}
-
-
@@ -41,18 +41,3 @@
]}
{/block}
-
-{block bodyScripts}
-
-{/block}
\ No newline at end of file
diff --git a/Web/Presenters/templates/Group/Followers.xml b/Web/Presenters/templates/Group/Followers.xml
index 7a1654d2..6ddece4f 100644
--- a/Web/Presenters/templates/Group/Followers.xml
+++ b/Web/Presenters/templates/Group/Followers.xml
@@ -82,23 +82,25 @@
{/block}
diff --git a/Web/Presenters/templates/Group/View.xml b/Web/Presenters/templates/Group/View.xml
index f1eb8fe8..327dd2f5 100644
--- a/Web/Presenters/templates/Group/View.xml
+++ b/Web/Presenters/templates/Group/View.xml
@@ -318,7 +318,3 @@
{/block}
-
-{block bodyScripts}
- {script "js/al_despacito_wall.js"}
-{/block}
\ No newline at end of file
diff --git a/Web/Presenters/templates/User/View.xml b/Web/Presenters/templates/User/View.xml
index b3e34d56..44c7a6ce 100644
--- a/Web/Presenters/templates/User/View.xml
+++ b/Web/Presenters/templates/User/View.xml
@@ -745,7 +745,3 @@
{include "banned.xml"}
{/if}
{/block}
-
-{block bodyScripts}
- {script "js/al_despacito_wall.js"}
-{/block}
diff --git a/Web/static/css/audios.css b/Web/static/css/audios.css
index bd60d046..bbb29989 100644
--- a/Web/static/css/audios.css
+++ b/Web/static/css/audios.css
@@ -13,7 +13,7 @@
}
.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;
}
@@ -150,7 +150,7 @@
}
.bigPlayer .slider, .audioEmbed .track .slider {
- width: 18px;
+ width: 15px;
height: 7px;
background: #606060;
position: absolute;
@@ -231,13 +231,13 @@
}
.bigPlayer .trackPanel .track .selectableTrack > div {
- width: 95%;
+ width: 96%;
position: relative;
}
.bigPlayer .volumePanel .selectableTrack > div {
position: relative;
- width: 72%
+ width: 77%;
}
.audioEmbed .track > .selectableTrack, .bigPlayer .selectableTrack {
@@ -881,3 +881,137 @@
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: 99;
+ 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 .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;
+}
diff --git a/Web/static/img/audios_controls.png b/Web/static/img/audios_controls.png
index 47f39673..2b02c7c0 100644
Binary files a/Web/static/img/audios_controls.png and b/Web/static/img/audios_controls.png differ
diff --git a/Web/static/js/al_despacito_wall.js b/Web/static/js/al_despacito_wall.js
index 0e198e55..be87b53b 100644
--- a/Web/static/js/al_despacito_wall.js
+++ b/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
diff --git a/Web/static/js/al_music.js b/Web/static/js/al_music.js
index 1472549a..e8918a3b 100644
--- a/Web/static/js/al_music.js
+++ b/Web/static/js/al_music.js
@@ -1,5 +1,3 @@
-window.savedAudiosPages = {}
-
class playersSearcher {
constructor(context_type, context_id) {
this.context_type = context_type
@@ -68,6 +66,18 @@ window.player = new class {
return this.__realAudioPlayer
}
+ get linkedInlinePlayer() {
+ if(!this.__linked_player_id) {
+ return null;
+ }
+
+ return u('#' + this.__linked_player_id)
+ }
+
+ get ajaxPlayer() {
+ return u('#ajax_audio_player')
+ }
+
get uiPlayer() {
return u('.bigPlayer')
}
@@ -86,17 +96,9 @@ window.player = new class {
return this.__findByIndex(current + 1)
}
- get linkedInlinePlayer() {
- if(!this.__linked_player_id) {
- return null;
- }
-
- return u('#' + this.__linked_player_id)
- }
-
async init(input_context) {
let context = Object.assign({
- url: location.pathname
+ url: location.pathname + location.search
}, input_context)
this.context.object = !input_context ? null : context
this.__realAudioPlayer = document.createElement("audio")
@@ -109,8 +111,13 @@ window.player = new class {
initEvents() {
this.audioPlayer.ontimeupdate = () => {
- const time = this.audioPlayer.currentTime;
- const ps = ((time * 100) / this.currentTrack.length).toFixed(3)
+ const current_track = this.currentTrack
+ if(!current_track) {
+ return
+ }
+
+ const time = this.audioPlayer.currentTime
+ const ps = ((time * 100) / current_track.length).toFixed(3)
this.uiPlayer.find(".time").html(fmtTime(time))
this.__updateTime(time)
@@ -121,6 +128,11 @@ window.player = new class {
this.linkedInlinePlayer.find(".subTracks .lengthTrackWrapper .slider").attr('style', `left:${ ps}%`)
this.linkedInlinePlayer.find('.mini_timer .nobold').html(fmtTime(time))
}
+
+ if(this.ajaxPlayer) {
+ this.ajaxPlayer.find('#aj_player_track_length .slider').attr('style', `left:${ ps}%`)
+ this.ajaxPlayer.find('#aj_player_track_name #aj_time').html(fmtTime(time))
+ }
}
}
@@ -134,6 +146,10 @@ window.player = new class {
if(this.linkedInlinePlayer) {
this.linkedInlinePlayer.find(".subTracks .volumeTrackWrapper .slider").attr('style', `left:${ ps}%`)
}
+
+ if(this.ajaxPlayer) {
+ this.ajaxPlayer.find('#aj_player_volume .slider').attr('style', `left:${ ps}%`)
+ }
}
localStorage.setItem('audio.volume', volume)
@@ -162,12 +178,12 @@ window.player = new class {
}
}
- this.audioPlayer.onended = (e) => {
+ this.audioPlayer.onended = async (e) => {
e.preventDefault()
if(!this.nextTrack && window.player.context.playedPages.indexOf(1) == -1) {
this.loadContext(1, false)
- this.setTrack(this.__findByIndex(0).id)
+ await this.setTrack(this.__findByIndex(0).id)
} else {
this.playNextTrack()
}
@@ -243,10 +259,28 @@ window.player = new class {
return
}
+ if(window.__current_page_audio_context && (!this.context.object || this.context.object.url != location.pathname + location.search)) {
+ console.log('Audio | Resetting context because of ajax :3')
+
+ this.__renewContext()
+ await this.loadContext(window.__current_page_audio_context.page ?? 1)
+ if(!isNaN(parseInt(location.hash.replace('#', '')))) {
+ const adp = parseInt(location.hash.replace('#', ''))
+ await this.loadContext(adp)
+ } else if((new URL(location.href)).searchParams.p) {
+ const adp = (new URL(location.href)).searchParams.p
+ await this.loadContext(adp)
+ }
+
+ this.__updateFace()
+ }
+
this.listen_coef = 0.0
+ const old_id = this.current_track_id
this.current_track_id = id
const c_track = this.currentTrack
if(!c_track) {
+ this.current_track_id = old_id
makeError('Error playing audio: track not found')
return
}
@@ -258,9 +292,7 @@ window.player = new class {
};
u('.nowPlaying').removeClass('nowPlaying')
- if(this.isAtAudiosPage()) {
- u(`.audioEmbed[data-realid='${id}'] .audioEntry`).addClass('nowPlaying')
- }
+ this.__highlightActiveTrack()
navigator.mediaSession.setPositionState({
duration: this.currentTrack.length
@@ -277,6 +309,7 @@ window.player = new class {
await this.loadContext(Math.min(...this.context["playedPages"]) - 1, false)
}
+ this.is_closed = false
this.__updateFace()
u(this.audioPlayer).trigger('volumechange')
}
@@ -324,12 +357,12 @@ window.player = new class {
navigator.mediaSession.playbackState = "paused"
}
- playPreviousTrack() {
+ async playPreviousTrack() {
if(!this.currentTrack || !this.previousTrack) {
return
}
- this.setTrack(this.previousTrack.id)
+ await this.setTrack(this.previousTrack.id)
if(!this.currentTrack.available || this.currentTrack.withdrawn) {
if(!this.previousTrack) {
return
@@ -341,12 +374,12 @@ window.player = new class {
this.play()
}
- playNextTrack() {
+ async playNextTrack() {
if(!this.currentTrack || !this.nextTrack) {
return
}
- this.setTrack(this.nextTrack.id)
+ await this.setTrack(this.nextTrack.id)
if(!this.currentTrack.available || this.currentTrack.withdrawn) {
if(!this.nextTrack) {
return
@@ -359,15 +392,78 @@ window.player = new class {
}
// fake shuffle
- shuffle() {
+ async shuffle() {
this.tracks.sort(() => Math.random() - 0.59)
- this.setTrack(this.tracks.at(0).id)
+ await this.setTrack(this.tracks.at(0).id)
}
isAtAudiosPage() {
return u('.bigPlayer').length > 0
}
+ // Добавляем ощущение продуманности.
+ __highlightActiveTrack() {
+ u(`.audiosContainer .audioEmbed[data-realid='${this.current_track_id}'] .audioEntry, .audios_padding .audioEmbed[data-realid='${this.current_track_id}'] .audioEntry`).addClass('nowPlaying')
+ }
+
+ __renewContext() {
+ let context = Object.assign({
+ url: location.pathname + location.search
+ }, window.__current_page_audio_context)
+ this.pause()
+ this.__resetContext()
+ this.context.object = context
+ }
+
+ __resetContext() {
+ this.context = {
+ object: {},
+ pagesCount: 0,
+ count: 0,
+ playedPages: [],
+ }
+ this.tracks = []
+ //this.__realAudioPlayer = document.createElement("audio")
+ this.listen_coef = 0
+ }
+
+ async _handlePageTransition() {
+ console.log('Audio | Switched page :3')
+ const state = this.isAtAudiosPage()
+ if(!state) {
+ // AJAX audio player
+ if(this.is_closed) {
+ return
+ }
+
+ this.ajaxPlayer.removeClass('hidden')
+ if(this.ajaxPlayer.length > 0) {
+ return
+ } else {
+ if(this.audioPlayer.paused) {
+ return
+ }
+ this.ajCreate()
+ this.__updateFace()
+ }
+ } else {
+ this.ajClose()
+ this.is_closed = false
+ if(this.tracks.length < 1) {
+ if(window.__current_page_audio_context) {
+ await this.init(window.__current_page_audio_context)
+ }
+ }
+ }
+
+ this.__linked_player_id = null
+ if(this.currentTrack) {
+ this.__updateFace()
+ }
+ this.__highlightActiveTrack()
+ u(this.audioPlayer).trigger('volumechange')
+ }
+
__setFavicon(state = 'playing') {
if(state == 'playing') {
document.querySelector('link[rel="icon"], link[rel="shortcut icon"]').setAttribute("href", "/assets/packages/static/openvk/img/favicons/favicon24_paused.png")
@@ -418,16 +514,28 @@ window.player = new class {
if(!this.previousTrack) {
prev_button.addClass('lagged')
+ if(this.ajaxPlayer.length > 0) {
+ this.ajaxPlayer.find('#aj_player_previous').addClass('lagged')
+ }
} else {
prev_button.removeClass('lagged')
prev_button.attr('data-title', ovk_proc_strtr(escapeHtml(this.previousTrack.name), 50))
+ if(this.ajaxPlayer.length > 0) {
+ this.ajaxPlayer.find('#aj_player_previous').removeClass('lagged')
+ }
}
if(!this.nextTrack) {
next_button.addClass('lagged')
+ if(this.ajaxPlayer.length > 0) {
+ this.ajaxPlayer.find('#aj_player_next').addClass('lagged')
+ }
} else {
next_button.removeClass('lagged')
next_button.attr('data-title', ovk_proc_strtr(escapeHtml(this.nextTrack.name), 50))
+ if(this.ajaxPlayer.length > 0) {
+ this.ajaxPlayer.find('#aj_player_next').removeClass('lagged')
+ }
}
if(!this.audioPlayer.paused) {
@@ -435,11 +543,17 @@ window.player = new class {
if(this.linkedInlinePlayer) {
this.linkedInlinePlayer.find('.playerButton .playIcon').addClass('paused')
}
+ if(this.ajaxPlayer.length > 0) {
+ this.ajaxPlayer.find('#aj_player_play_btn').addClass('paused')
+ }
} else {
this.uiPlayer.find('.playButton').removeClass('pause')
if(this.linkedInlinePlayer) {
this.linkedInlinePlayer.find('.playerButton .playIcon').removeClass('paused')
}
+ if(this.ajaxPlayer.length > 0) {
+ this.ajaxPlayer.find('#aj_player_play_btn').removeClass('paused')
+ }
}
this.uiPlayer.find('.trackInfo .trackName span').html(escapeHtml(_c.name))
@@ -450,6 +564,12 @@ window.player = new class {
this.uiPlayer.find('.trackInfo .trackPerformers').append(
`