mirror of
https://github.com/openvk/openvk
synced 2025-04-24 00:53:00 +03:00
9095caae73
- У плейлистов теперь есть прослушивания в общем. - Прослушивания у большого плеера теперь засчитываются, если трек был дослушан до конца - В объекте плейлистов теперь возвращается listens и cover_url - Получение плееров через /audios/context переписано, повторяющийся код удалён, правда сильно количество строк сократить не получилось - Теперь цвета плеера темнее, а иконка проигрывания изменена - Теперь, если очередь из треков кончилась, то плеер перенаправляет вас в начало очереди.
1357 lines
50 KiB
JavaScript
1357 lines
50 KiB
JavaScript
function fmtTime(time) {
|
|
const mins = String(Math.floor(time / 60)).padStart(2, '0');
|
|
const secs = String(Math.floor(time % 60)).padStart(2, '0');
|
|
return `${ mins}:${ secs}`;
|
|
}
|
|
|
|
function fastError(message) {
|
|
MessageBox(tr("error"), message, [tr("ok")], [Function.noop])
|
|
}
|
|
|
|
function getElapsedTime(fullTime, time) {
|
|
let timer = fullTime - time
|
|
|
|
return "-" + fmtTime(timer)
|
|
}
|
|
|
|
window.savedAudiosPages = {}
|
|
|
|
class playersSearcher {
|
|
constructor(context_type, context_id) {
|
|
this.context_type = context_type
|
|
this.context_id = context_id
|
|
this.searchType = "by_name"
|
|
this.query = ""
|
|
this.page = 1
|
|
this.successCallback = () => {}
|
|
this.errorCallback = () => {}
|
|
this.beforesendCallback = () => {}
|
|
this.clearContainer = () => {}
|
|
}
|
|
|
|
execute() {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/audios/context",
|
|
data: {
|
|
context: this.context_type,
|
|
hash: u("meta[name=csrf]").attr("value"),
|
|
page: this.page,
|
|
query: this.query,
|
|
context_entity: this.context_id,
|
|
type: this.searchType,
|
|
returnPlayers: 1,
|
|
},
|
|
beforeSend: () => {
|
|
this.beforesendCallback()
|
|
},
|
|
error: () => {
|
|
this.errorCallback()
|
|
},
|
|
success: (response) => {
|
|
this.successCallback(response, this)
|
|
}
|
|
})
|
|
}
|
|
|
|
movePage(page) {
|
|
this.page = page
|
|
this.execute()
|
|
}
|
|
}
|
|
|
|
class bigPlayer {
|
|
tracks = {
|
|
currentTrack: null,
|
|
nextTrack: null,
|
|
previousTrack: null,
|
|
tracks: []
|
|
}
|
|
|
|
context = {
|
|
context_type: null,
|
|
context_id: 0,
|
|
pagesCount: 0,
|
|
playedPages: [],
|
|
object: [],
|
|
}
|
|
|
|
nodes = {
|
|
dashPlayer: null,
|
|
audioPlayer: null,
|
|
thisPlayer: null,
|
|
playButtons: null,
|
|
}
|
|
|
|
timeType = 0
|
|
|
|
findTrack(id) {
|
|
return this.tracks["tracks"].find(item => item.id == id)
|
|
}
|
|
|
|
constructor(context, context_id, page = 1) {
|
|
this.context["context_type"] = context
|
|
this.context["context_id"] = context_id
|
|
this.context["playedPages"].push(String(page))
|
|
|
|
this.nodes["thisPlayer"] = document.querySelector(".bigPlayer")
|
|
this.nodes["thisPlayer"].classList.add("lagged")
|
|
|
|
this.player = () => { return this.nodes["thisPlayer"].querySelector("audio.audio") }
|
|
this.nodes["playButtons"] = this.nodes["thisPlayer"].querySelector(".playButtons")
|
|
this.nodes["dashPlayer"] = dashjs.MediaPlayer().create()
|
|
|
|
let formdata = new FormData()
|
|
formdata.append("context", context)
|
|
formdata.append("context_entity", context_id)
|
|
formdata.append("query", context_id)
|
|
formdata.append("hash", u("meta[name=csrf]").attr("value"))
|
|
formdata.append("page", page)
|
|
|
|
ky.post("/audios/context", {
|
|
hooks: {
|
|
afterResponse: [
|
|
async (_request, _options, response) => {
|
|
if(response.status !== 200) {
|
|
fastError(tr("unable_to_load_queue"))
|
|
return
|
|
}
|
|
|
|
let contextObject = await response.json()
|
|
|
|
if(!contextObject.success) {
|
|
fastError(tr("unable_to_load_queue"))
|
|
return
|
|
}
|
|
|
|
this.nodes["thisPlayer"].classList.remove("lagged")
|
|
this.tracks["tracks"] = contextObject["items"]
|
|
this.context["pagesCount"] = contextObject["pagesCount"]
|
|
|
|
if(localStorage.lastPlayedTrack != null && this.tracks["tracks"].find(item => item.id == localStorage.lastPlayedTrack) != null) {
|
|
this.setTrack(localStorage.lastPlayedTrack)
|
|
this.pause()
|
|
}
|
|
|
|
console.info("Context is successfully loaded")
|
|
}
|
|
]
|
|
},
|
|
body: formdata
|
|
})
|
|
|
|
u(this.nodes["playButtons"].querySelector(".playButton")).on("click", (e) => {
|
|
if(this.player().paused)
|
|
this.play()
|
|
else
|
|
this.pause()
|
|
})
|
|
|
|
u(this.player()).on("timeupdate", (e) => {
|
|
const time = this.player().currentTime;
|
|
const ps = Math.ceil((time * 100) / this.tracks["currentTrack"].length);
|
|
this.nodes["thisPlayer"].querySelector(".time").innerHTML = fmtTime(time)
|
|
this.timeType == 0 ? this.nodes["thisPlayer"].querySelector(".elapsedTime").innerHTML = getElapsedTime(this.tracks["currentTrack"].length, time)
|
|
: null
|
|
|
|
if (ps <= 100)
|
|
this.nodes["thisPlayer"].querySelector(".selectableTrack .slider").style.left = `${ ps}%`;
|
|
|
|
})
|
|
|
|
u(this.player()).on("volumechange", (e) => {
|
|
const volume = this.player().volume;
|
|
const ps = Math.ceil((volume * 100) / 1);
|
|
|
|
if (ps <= 100)
|
|
this.nodes["thisPlayer"].querySelector(".volumePanel .selectableTrack .slider").style.left = `${ ps}%`;
|
|
|
|
localStorage.volume = volume
|
|
})
|
|
|
|
u(".bigPlayer .track > div").on("click mouseup", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
let rect = this.nodes["thisPlayer"].querySelector(".selectableTrack").getBoundingClientRect();
|
|
|
|
const width = e.clientX - rect.left;
|
|
const time = Math.ceil((width * this.tracks["currentTrack"].length) / (rect.right - rect.left));
|
|
|
|
this.player().currentTime = time;
|
|
})
|
|
|
|
u(".bigPlayer .trackPanel .track").on("mousemove", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
let rect = this.nodes["thisPlayer"].querySelector(".selectableTrack").getBoundingClientRect();
|
|
|
|
const width = e.clientX - rect.left;
|
|
const time = Math.ceil((width * this.tracks["currentTrack"].length) / (rect.right - rect.left));
|
|
|
|
document.querySelector(".bigPlayer .track .bigPlayerTip").style.display = "block"
|
|
document.querySelector(".bigPlayer .track .bigPlayerTip").innerHTML = fmtTime(time)
|
|
document.querySelector(".bigPlayer .track .bigPlayerTip").style.left = `min(${width - 15}px, 315.5px)`
|
|
})
|
|
|
|
u(".bigPlayer .nextButton").on("mouseover mouseleave", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
if(e.type == "mouseleave") {
|
|
$(".nextTrackTip").remove()
|
|
return
|
|
}
|
|
|
|
e.currentTarget.parentNode.insertAdjacentHTML("afterbegin", `
|
|
<div class="bigPlayerTip nextTrackTip" style="left: 5%;">
|
|
${ovk_proc_strtr(escapeHtml(this.findTrack(this.tracks["previousTrack"]).name), 20) ?? ""}
|
|
</div>
|
|
`)
|
|
|
|
document.querySelector(".nextTrackTip").style.display = "block"
|
|
})
|
|
|
|
u(".bigPlayer .backButton").on("mouseover mouseleave", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
if(e.type == "mouseleave") {
|
|
$(".previousTrackTip").remove()
|
|
return
|
|
}
|
|
|
|
e.currentTarget.parentNode.insertAdjacentHTML("afterbegin", `
|
|
<div class="bigPlayerTip previousTrackTip" style="left: 8%;">
|
|
${ovk_proc_strtr(escapeHtml(this.findTrack(this.tracks["nextTrack"]).name), 20) ?? ""}
|
|
</div>
|
|
`)
|
|
|
|
document.querySelector(".previousTrackTip").style.display = "block"
|
|
})
|
|
|
|
u(".bigPlayer .trackPanel .track").on("mouseleave", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
document.querySelector(".bigPlayer .track .bigPlayerTip").style.display = "none"
|
|
})
|
|
|
|
u(".bigPlayer .volumePanel > div").on("click mouseup mousemove", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
if(e.type == "mousemove") {
|
|
let buttonsPresseed = _bsdnUnwrapBitMask(e.buttons)
|
|
if(!buttonsPresseed[0])
|
|
return;
|
|
}
|
|
|
|
let rect = this.nodes["thisPlayer"].querySelector(".volumePanel .selectableTrack").getBoundingClientRect();
|
|
|
|
const width = e.clientX - rect.left;
|
|
const volume = (width * 1) / (rect.right - rect.left);
|
|
|
|
this.player().volume = volume;
|
|
})
|
|
|
|
u(".bigPlayer .elapsedTime").on("click", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
this.timeType == 0 ? (this.timeType = 1) : (this.timeType = 0)
|
|
|
|
localStorage.playerTimeType = this.timeType
|
|
|
|
this.nodes["thisPlayer"].querySelector(".elapsedTime").innerHTML = this.timeType == 1 ?
|
|
fmtTime(this.tracks["currentTrack"].length)
|
|
: getElapsedTime(this.tracks["currentTrack"].length, this.player().currentTime)
|
|
})
|
|
|
|
u(".bigPlayer .additionalButtons .repeatButton").on("click", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
e.currentTarget.classList.toggle("pressed")
|
|
|
|
if(e.currentTarget.classList.contains("pressed"))
|
|
this.player().loop = true
|
|
else
|
|
this.player().loop = false
|
|
})
|
|
|
|
u(".bigPlayer .additionalButtons .shuffleButton").on("click", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
this.tracks["tracks"].sort(() => Math.random() - 0.59)
|
|
this.setTrack(this.tracks["tracks"].at(0).id)
|
|
})
|
|
|
|
// хз что она делала в самом вк, но тут сделаем вид что это просто мут музыки
|
|
u(".bigPlayer .additionalButtons .deviceButton").on("click", (e) => {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
e.currentTarget.classList.toggle("pressed")
|
|
|
|
this.player().muted = e.currentTarget.classList.contains("pressed")
|
|
})
|
|
|
|
u(".bigPlayer .arrowsButtons .nextButton").on("click", (e) => {
|
|
this.showPreviousTrack()
|
|
})
|
|
|
|
u(".bigPlayer .arrowsButtons .backButton").on("click", (e) => {
|
|
this.showNextTrack()
|
|
})
|
|
|
|
u(".bigPlayer .trackInfo b").on("click", (e) => {
|
|
window.location.assign(`/search?query=${e.currentTarget.innerHTML}&type=audios&only_performers=on`)
|
|
})
|
|
|
|
u(document).on("keydown", (e) => {
|
|
if(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(e.key)) {
|
|
e.preventDefault()
|
|
|
|
if(document.querySelector(".ovk-diag-cont") != null)
|
|
return
|
|
}
|
|
|
|
switch(e.key) {
|
|
case "ArrowUp":
|
|
this.player().volume = Math.min(0.99, this.player().volume + 0.1)
|
|
break
|
|
case "ArrowDown":
|
|
this.player().volume = Math.max(0, this.player().volume - 0.1)
|
|
break
|
|
case "ArrowLeft":
|
|
this.player().currentTime = this.player().currentTime - 3
|
|
break
|
|
case "ArrowRight":
|
|
this.player().currentTime = this.player().currentTime + 3
|
|
break
|
|
// буквально
|
|
case " ":
|
|
if(this.player().paused)
|
|
this.play()
|
|
else
|
|
this.pause()
|
|
|
|
break;
|
|
}
|
|
})
|
|
|
|
u(document).on("keyup", (e) => {
|
|
if([87, 65, 83, 68].includes(e.keyCode)) {
|
|
e.preventDefault()
|
|
|
|
if(document.querySelector(".ovk-diag-cont") != null)
|
|
return
|
|
}
|
|
|
|
switch(e.keyCode) {
|
|
case 87:
|
|
case 65:
|
|
this.showPreviousTrack()
|
|
break
|
|
case 83:
|
|
case 68:
|
|
this.showNextTrack()
|
|
break
|
|
}
|
|
})
|
|
|
|
u(this.player()).on("ended", (e) => {
|
|
e.preventDefault()
|
|
|
|
let playlist = this.context.context_type == "playlist_context" ? this.context.context_id : null
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: `/audio${this.tracks["currentTrack"].id}/listen`,
|
|
data: {
|
|
hash: u("meta[name=csrf]").attr("value"),
|
|
playlist: playlist
|
|
},
|
|
success: (response) => {
|
|
if(response.success) {
|
|
console.info("Listen is counted.")
|
|
|
|
if(response.new_playlists_listens)
|
|
document.querySelector("#listensCount").innerHTML = tr("listens_count", response.new_playlists_listens)
|
|
} else
|
|
console.info("Listen is not counted.")
|
|
}
|
|
})
|
|
|
|
if(!this.tracks.nextTrack) {
|
|
this.setTrack(this.tracks.tracks[0].id)
|
|
return
|
|
}
|
|
|
|
this.showNextTrack()
|
|
})
|
|
|
|
if(localStorage.volume != null && localStorage.volume < 1 && localStorage.volume > 0)
|
|
this.player().volume = localStorage.volume
|
|
else
|
|
this.player().volume = 0.75
|
|
|
|
if(localStorage.playerTimeType == 'null' || localStorage.playerTimeType == null)
|
|
this.timeType = 0
|
|
else
|
|
this.timeType = localStorage.playerTimeType
|
|
|
|
navigator.mediaSession.setActionHandler('play', () => { this.play() });
|
|
navigator.mediaSession.setActionHandler('pause', () => { this.pause() });
|
|
navigator.mediaSession.setActionHandler('previoustrack', () => { this.showPreviousTrack() });
|
|
navigator.mediaSession.setActionHandler('nexttrack', () => { this.showNextTrack() });
|
|
navigator.mediaSession.setActionHandler("seekto", (details) => {
|
|
this.player().currentTime = details.seekTime;
|
|
});
|
|
}
|
|
|
|
play() {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
document.querySelectorAll('audio').forEach(el => el.pause());
|
|
document.querySelector(`.audioEmbed[data-realid='${this.tracks["currentTrack"].id}'] .audioEntry .playerButton .playIcon`) != null ? document.querySelector(`.audioEmbed[data-realid='${this.tracks["currentTrack"].id}'] .audioEntry .playerButton .playIcon`).classList.add("paused") : void(0)
|
|
this.player().play()
|
|
this.nodes["playButtons"].querySelector(".playButton").classList.add("pause")
|
|
document.querySelector('link[rel="icon"], link[rel="shortcut icon"]').setAttribute("href", "/assets/packages/static/openvk/img/favicons/favicon24_paused.png")
|
|
|
|
navigator.mediaSession.playbackState = "playing"
|
|
}
|
|
|
|
pause() {
|
|
if(this.tracks["currentTrack"] == null)
|
|
return
|
|
|
|
document.querySelector(`.audioEmbed[data-realid='${this.tracks["currentTrack"].id}'] .audioEntry .playerButton .playIcon`) != null ? document.querySelector(`.audioEmbed[data-realid='${this.tracks["currentTrack"].id}'] .audioEntry .playerButton .playIcon`).classList.remove("paused") : void(0)
|
|
this.player().pause()
|
|
this.nodes["playButtons"].querySelector(".playButton").classList.remove("pause")
|
|
document.querySelector('link[rel="icon"], link[rel="shortcut icon"]').setAttribute("href", "/assets/packages/static/openvk/img/favicons/favicon24_playing.png")
|
|
|
|
navigator.mediaSession.playbackState = "paused"
|
|
}
|
|
|
|
showPreviousTrack() {
|
|
if(this.tracks["currentTrack"] == null || this.tracks["previousTrack"] == null)
|
|
return
|
|
|
|
this.setTrack(this.tracks["previousTrack"])
|
|
}
|
|
|
|
showNextTrack() {
|
|
if(this.tracks["currentTrack"] == null || this.tracks["nextTrack"] == null)
|
|
return
|
|
|
|
this.setTrack(this.tracks["nextTrack"])
|
|
}
|
|
|
|
updateButtons() {
|
|
// перепутал некст и бек.
|
|
let prevButton = this.nodes["thisPlayer"].querySelector(".nextButton")
|
|
let nextButton = this.nodes["thisPlayer"].querySelector(".backButton")
|
|
|
|
if(this.tracks["previousTrack"] == null)
|
|
prevButton.classList.add("lagged")
|
|
else
|
|
prevButton.classList.remove("lagged")
|
|
|
|
if(this.tracks["nextTrack"] == null)
|
|
nextButton.classList.add("lagged")
|
|
else
|
|
nextButton.classList.remove("lagged")
|
|
|
|
if(document.querySelector(".nextTrackTip") != null) {
|
|
let track = this.findTrack(this.tracks["previousTrack"])
|
|
document.querySelector(".nextTrackTip").innerHTML = `
|
|
${track != null ? ovk_proc_strtr(escapeHtml(track.name), 20) : ""}
|
|
`
|
|
}
|
|
|
|
if(document.querySelector(".previousTrackTip") != null) {
|
|
let track = this.findTrack(this.tracks["nextTrack"])
|
|
document.querySelector(".previousTrackTip").innerHTML = `
|
|
${track != null ? ovk_proc_strtr(escapeHtml(track.name ?? ""), 20) : ""}
|
|
`
|
|
}
|
|
}
|
|
|
|
setTrack(id) {
|
|
if(this.tracks["tracks"] == null) {
|
|
console.info("Context is not loaded yet. Wait please")
|
|
return 0;
|
|
}
|
|
|
|
document.querySelectorAll(".audioEntry.nowPlaying").forEach(el => el.classList.remove("nowPlaying"))
|
|
let obj = this.tracks["tracks"].find(item => item.id == id)
|
|
|
|
if(obj == null) {
|
|
fastError("No audio in context")
|
|
return
|
|
}
|
|
|
|
this.nodes["thisPlayer"].querySelector(".trackInfo span").innerHTML = escapeHtml(obj.name)
|
|
this.nodes["thisPlayer"].querySelector(".trackInfo b").innerHTML = escapeHtml(obj.performer)
|
|
this.nodes["thisPlayer"].querySelector(".trackInfo .time").innerHTML = fmtTime(obj.length)
|
|
this.tracks["currentTrack"] = obj
|
|
|
|
let indexOfCurrentTrack = this.tracks["tracks"].indexOf(obj) ?? 0
|
|
this.tracks["nextTrack"] = this.tracks["tracks"].at(indexOfCurrentTrack + 1) != null ? this.tracks["tracks"].at(indexOfCurrentTrack + 1).id : null
|
|
|
|
if(indexOfCurrentTrack - 1 >= 0)
|
|
this.tracks["previousTrack"] = this.tracks["tracks"].at(indexOfCurrentTrack - 1).id
|
|
else
|
|
this.tracks["previousTrack"] = null
|
|
|
|
if(this.tracks["nextTrack"] == null && Math.max(...this.context["playedPages"]) < this.context["pagesCount"]
|
|
|| this.tracks["previousTrack"] == null && (Math.min(...this.context["playedPages"]) > 1)) {
|
|
|
|
// idk how it works
|
|
let lesser = this.tracks["previousTrack"] == null ? (Math.min(...this.context["playedPages"]) > 1)
|
|
: Math.max(...this.context["playedPages"]) > this.context["pagesCount"]
|
|
|
|
let formdata = new FormData()
|
|
formdata.append("context", this.context["context_type"])
|
|
formdata.append("context_entity", this.context["context_id"])
|
|
formdata.append("hash", u("meta[name=csrf]").attr("value"))
|
|
|
|
if(lesser)
|
|
formdata.append("page", Math.min(...this.context["playedPages"]) - 1)
|
|
else
|
|
formdata.append("page", Number(Math.max(...this.context["playedPages"])) + 1)
|
|
|
|
ky.post("/audios/context", {
|
|
hooks: {
|
|
afterResponse: [
|
|
async (_request, _options, response) => {
|
|
let newArr = await response.json()
|
|
|
|
if(lesser)
|
|
this.tracks["tracks"] = newArr["items"].concat(this.tracks["tracks"])
|
|
else
|
|
this.tracks["tracks"] = this.tracks["tracks"].concat(newArr["items"])
|
|
|
|
this.context["playedPages"].push(Number(newArr["page"]))
|
|
|
|
if(lesser)
|
|
this.tracks["previousTrack"] = this.tracks["tracks"].at(this.tracks["tracks"].indexOf(obj) - 1).id
|
|
else
|
|
this.tracks["nextTrack"] = this.tracks["tracks"].at(indexOfCurrentTrack + 1) != null ? this.tracks["tracks"].at(indexOfCurrentTrack + 1).id : null
|
|
|
|
this.updateButtons()
|
|
console.info("Context is successfully loaded")
|
|
}
|
|
]
|
|
},
|
|
body: formdata
|
|
})
|
|
}
|
|
|
|
if(this.tracks["currentTrack"].available == false || this.tracks["currentTrack"].withdrawn)
|
|
this.showNextTrack()
|
|
|
|
this.updateButtons()
|
|
|
|
const protData = {
|
|
"org.w3.clearkey": {
|
|
"clearkeys": obj.keys
|
|
}
|
|
};
|
|
|
|
this.nodes["dashPlayer"].initialize(this.player(), obj.url, false);
|
|
this.nodes["dashPlayer"].setProtectionData(protData);
|
|
|
|
this.play()
|
|
|
|
let playerAtPage = document.querySelector(`.audioEmbed[data-realid='${this.tracks["currentTrack"].id}'] .audioEntry`)
|
|
if(playerAtPage != null)
|
|
playerAtPage.classList.add("nowPlaying")
|
|
|
|
document.querySelectorAll(`.audioEntry .playerButton .playIcon.paused`).forEach(el => el.classList.remove("paused"))
|
|
|
|
localStorage.lastPlayedTrack = this.tracks["currentTrack"].id
|
|
|
|
if(this.timeType == 1)
|
|
this.nodes["thisPlayer"].querySelector(".elapsedTime").innerHTML = fmtTime(this.tracks["currentTrack"].length)
|
|
|
|
let album = document.querySelector(".playlistBlock")
|
|
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|
title: obj.name,
|
|
artist: obj.performer,
|
|
album: album == null ? "OpenVK Audios" : album.querySelector(".playlistInfo h4").innerHTML,
|
|
artwork: [{ src: album == null ? "/assets/packages/static/openvk/img/song.jpg" : album.querySelector(".playlistCover img").src }],
|
|
});
|
|
|
|
navigator.mediaSession.setPositionState({
|
|
duration: this.tracks["currentTrack"].length
|
|
})
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
if(document.querySelector(".bigPlayer") != null) {
|
|
let context = document.querySelector("input[name='bigplayer_context']")
|
|
|
|
if(!context)
|
|
return
|
|
|
|
let type = context.dataset.type
|
|
let entity = context.dataset.entity
|
|
window.player = new bigPlayer(type, entity, context.dataset.page)
|
|
|
|
let bigplayer = document.querySelector('.bigPlayerDetector')
|
|
|
|
let bigPlayerObserver = new IntersectionObserver(entries => {
|
|
entries.forEach(x => {
|
|
if(x.isIntersecting) {
|
|
document.querySelector('.bigPlayer').classList.remove("floating")
|
|
document.querySelector('.searchOptions .searchList').classList.remove("floating")
|
|
document.querySelector('.bigPlayerDetector').style.marginTop = "0px"
|
|
} else {
|
|
document.querySelector('.searchOptions .searchList').classList.add("floating")
|
|
document.querySelector('.bigPlayer').classList.add("floating")
|
|
document.querySelector('.bigPlayerDetector').style.marginTop = "46px"
|
|
}
|
|
});
|
|
}, {
|
|
root: null,
|
|
rootMargin: "0px",
|
|
threshold: 0
|
|
});
|
|
|
|
if(bigplayer != null)
|
|
bigPlayerObserver.observe(bigplayer);
|
|
}})
|
|
|
|
$(document).on("click", ".audioEmbed > *", (e) => {
|
|
const player = e.currentTarget.closest(".audioEmbed")
|
|
|
|
if(player.classList.contains("inited")) return
|
|
|
|
initPlayer(player.id.replace("audioEmbed-", ""),
|
|
JSON.parse(player.dataset.keys),
|
|
player.dataset.url,
|
|
player.dataset.length)
|
|
|
|
if(e.target.classList.contains("playIcon"))
|
|
e.target.click()
|
|
})
|
|
|
|
function initPlayer(id, keys, url, length) {
|
|
document.querySelector(`#audioEmbed-${ id}`).classList.add("inited")
|
|
const audio = document.querySelector(`#audioEmbed-${ id} .audio`);
|
|
const playButton = u(`#audioEmbed-${ id} .playerButton > .playIcon`);
|
|
const trackDiv = u(`#audioEmbed-${ id} .track > div > div`);
|
|
const volumeSpan = u(`#audioEmbed-${ id} .volume span`);
|
|
const rect = document.querySelector(`#audioEmbed-${ id} .selectableTrack`).getBoundingClientRect();
|
|
|
|
const playerObject = document.querySelector(`#audioEmbed-${ id}`)
|
|
|
|
if(document.querySelector(".bigPlayer") != null) {
|
|
playButton.on("click", () => {
|
|
if(window.player.tracks["tracks"] == null)
|
|
return
|
|
|
|
if(window.player.tracks["currentTrack"] == null || window.player.tracks["currentTrack"].id != playerObject.dataset.realid)
|
|
window.player.setTrack(playerObject.dataset.realid)
|
|
else
|
|
document.querySelector(".bigPlayer .playButton").click()
|
|
})
|
|
|
|
return
|
|
}
|
|
|
|
const protData = {
|
|
"org.w3.clearkey": {
|
|
"clearkeys": keys
|
|
}
|
|
};
|
|
|
|
const player = dashjs.MediaPlayer().create();
|
|
player.initialize(audio, url, false);
|
|
player.setProtectionData(protData);
|
|
|
|
playButton.on("click", () => {
|
|
if (audio.paused) {
|
|
document.querySelectorAll('audio').forEach(el => el.pause());
|
|
audio.play();
|
|
} else {
|
|
audio.pause();
|
|
}
|
|
});
|
|
|
|
u(audio).on("timeupdate", () => {
|
|
const time = audio.currentTime;
|
|
const ps = Math.ceil((time * 100) / length);
|
|
volumeSpan.html(fmtTime(Math.floor(time)));
|
|
|
|
if (ps <= 100)
|
|
playerObject.querySelector(".lengthTrack .slider").style.left = `${ ps}%`;
|
|
});
|
|
|
|
u(audio).on("volumechange", (e) => {
|
|
const volume = audio.volume;
|
|
const ps = Math.ceil((volume * 100) / 1);
|
|
|
|
if (ps <= 100)
|
|
playerObject.querySelector(".volumeTrack .slider").style.left = `${ ps}%`;
|
|
})
|
|
|
|
const playButtonImageUpdate = () => {
|
|
if (!audio.paused) {
|
|
playButton.addClass("paused")
|
|
document.querySelector('link[rel="icon"], link[rel="shortcut icon"]').setAttribute("href", "/assets/packages/static/openvk/img/favicons/favicon24_paused.png")
|
|
} else {
|
|
playButton.removeClass("paused")
|
|
document.querySelector('link[rel="icon"], link[rel="shortcut icon"]').setAttribute("href", "/assets/packages/static/openvk/img/favicons/favicon24_playing.png")
|
|
}
|
|
|
|
if(!$(`#audioEmbed-${ id}`).hasClass("havePlayed")) {
|
|
$(`#audioEmbed-${ id}`).addClass("havePlayed")
|
|
|
|
$(`#audioEmbed-${ id} .track`).toggle()
|
|
|
|
$.post(`/audio${playerObject.dataset.realid}/listen`, {
|
|
hash: u("meta[name=csrf]").attr("value")
|
|
});
|
|
}
|
|
};
|
|
|
|
const hideTracks = () => {
|
|
$(`#audioEmbed-${ id} .track`).toggle()
|
|
$(`#audioEmbed-${ id}`).removeClass("havePlayed")
|
|
}
|
|
|
|
u(audio).on("play", playButtonImageUpdate);
|
|
u(audio).on(["pause", "suspended"], playButtonImageUpdate);
|
|
u(audio).on("ended", (e) => {
|
|
let thisPlayer = e.target.closest(".audioEmbed")
|
|
let nextPlayer = null
|
|
if(thisPlayer.closest(".attachment") != null) {
|
|
try {
|
|
nextPlayer = thisPlayer.closest(".attachment").nextElementSibling.querySelector(".audioEmbed")
|
|
} catch(e) {return}
|
|
} else if(thisPlayer.closest(".audio") != null) {
|
|
try {
|
|
nextPlayer = thisPlayer.closest(".audio").nextElementSibling.querySelector(".audioEmbed")
|
|
} catch(e) {return}
|
|
} else {
|
|
nextPlayer = thisPlayer.nextElementSibling
|
|
}
|
|
|
|
playButtonImageUpdate()
|
|
|
|
if(!nextPlayer) return
|
|
|
|
initPlayer(nextPlayer.id.replace("audioEmbed-", ""),
|
|
JSON.parse(nextPlayer.dataset.keys),
|
|
nextPlayer.dataset.url,
|
|
nextPlayer.dataset.length)
|
|
|
|
nextPlayer.querySelector(".playIcon").click()
|
|
hideTracks()
|
|
})
|
|
|
|
u(`#audioEmbed-${ id} .lengthTrack > div`).on("click", (e) => {
|
|
let rect = document.querySelector("#audioEmbed-" + id + " .selectableTrack").getBoundingClientRect();
|
|
const width = e.clientX - rect.left;
|
|
const time = Math.ceil((width * length) / (rect.right - rect.left));
|
|
|
|
audio.currentTime = time;
|
|
});
|
|
|
|
u(`#audioEmbed-${ id} .volumeTrack > div`).on("click mouseup mousemove", (e) => {
|
|
if(e.type == "mousemove") {
|
|
let buttonsPresseed = _bsdnUnwrapBitMask(e.buttons)
|
|
if(!buttonsPresseed[0])
|
|
return;
|
|
}
|
|
|
|
let rect = document.querySelector("#audioEmbed-" + id + " .volumeTrack").getBoundingClientRect();
|
|
|
|
const width = e.clientX - rect.left;
|
|
const volume = (width * 1) / (rect.right - rect.left);
|
|
|
|
audio.volume = volume;
|
|
});
|
|
|
|
u(audio).trigger("volumechange")
|
|
}
|
|
|
|
$(document).on("click", ".musicIcon.edit-icon", (e) => {
|
|
let player = e.currentTarget.closest(".audioEmbed")
|
|
let id = Number(player.dataset.realid)
|
|
let performer = e.currentTarget.dataset.performer
|
|
let name = e.currentTarget.dataset.title
|
|
let genre = player.dataset.genre
|
|
let lyrics = e.currentTarget.dataset.lyrics
|
|
|
|
MessageBox(tr("edit"), `
|
|
<div>
|
|
${tr("performer")}
|
|
<input name="performer" maxlength="40" type="text" value="${performer}">
|
|
</div>
|
|
|
|
<div style="margin-top: 11px">
|
|
${tr("audio_name")}
|
|
<input name="name" maxlength="40" type="text" value="${name}">
|
|
</div>
|
|
|
|
<div style="margin-top: 11px">
|
|
${tr("genre")}
|
|
<select name="genre"></select>
|
|
</div>
|
|
|
|
<div style="margin-top: 11px">
|
|
${tr("lyrics")}
|
|
<textarea name="lyrics" maxlength="5000" style="max-height: 200px;">${lyrics ?? ""}</textarea>
|
|
</div>
|
|
|
|
<div style="margin-top: 11px">
|
|
<label><input type="checkbox" name="explicit" ${e.currentTarget.dataset.explicit == 1 ? "checked" : ""}>${tr("audios_explicit")}</label><br>
|
|
<label><input type="checkbox" name="searchable" ${e.currentTarget.dataset.searchable == 1 ? "checked" : ""}>${tr("searchable")}</label>
|
|
<hr>
|
|
<a id="_fullyDeleteAudio">${tr("fully_delete_audio")}</a>
|
|
</div>
|
|
`, [tr("ok"), tr("cancel")], [
|
|
function() {
|
|
let t_name = $(".ovk-diag-body input[name=name]").val();
|
|
let t_perf = $(".ovk-diag-body input[name=performer]").val();
|
|
let t_genre = $(".ovk-diag-body select[name=genre]").val();
|
|
let t_lyrics = $(".ovk-diag-body textarea[name=lyrics]").val();
|
|
let t_explicit = document.querySelector(".ovk-diag-body input[name=explicit]").checked;
|
|
let t_unlisted = document.querySelector(".ovk-diag-body input[name=searchable]").checked;
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: `/audio${id}/action?act=edit`,
|
|
data: {
|
|
name: t_name,
|
|
performer: t_perf,
|
|
genre: t_genre,
|
|
lyrics: t_lyrics,
|
|
unlisted: Number(t_unlisted),
|
|
explicit: Number(t_explicit),
|
|
hash: u("meta[name=csrf]").attr("value")
|
|
},
|
|
success: (response) => {
|
|
if(response.success) {
|
|
let perf = player.querySelector(".performer a")
|
|
perf.innerHTML = escapeHtml(response.new_info.performer)
|
|
perf.setAttribute("href", "/search?query=&type=audios&sort=id&only_performers=on&query="+response.new_info.performer)
|
|
|
|
e.currentTarget.setAttribute("data-performer", escapeHtml(response.new_info.performer))
|
|
|
|
let name = player.querySelector(".title")
|
|
name.innerHTML = escapeHtml(response.new_info.name)
|
|
|
|
e.currentTarget.setAttribute("data-title", escapeHtml(response.new_info.name))
|
|
|
|
if(player.querySelector(".lyrics") != null) {
|
|
player.querySelector(".lyrics").innerHTML = response.new_info.lyrics
|
|
player.querySelector(".title").classList.ad
|
|
} else {
|
|
player.insertAdjacentHTML("beforeend", `
|
|
<div class="lyrics" n:if="!empty($audio->getLyrics())">
|
|
${response.new_info.lyrics}
|
|
</div>
|
|
`)
|
|
}
|
|
|
|
e.currentTarget.setAttribute("data-lyrics", response.new_info.lyrics_unformatted)
|
|
e.currentTarget.setAttribute("data-explicit", Number(response.new_info.explicit))
|
|
e.currentTarget.setAttribute("data-searchable", Number(!response.new_info.unlisted))
|
|
player.setAttribute("data-genre", response.new_info.genre)
|
|
|
|
let url = new URL(location.href)
|
|
let page = "1"
|
|
|
|
if(url.searchParams.p != null)
|
|
page = String(url.searchParams.p)
|
|
|
|
window.savedAudiosPages[page] = null
|
|
} else
|
|
fastError(response.flash.message)
|
|
}
|
|
});
|
|
},
|
|
|
|
Function.noop
|
|
]);
|
|
|
|
window.openvk.audio_genres.forEach(elGenre => {
|
|
document.querySelector(".ovk-diag-body select[name=genre]").insertAdjacentHTML("beforeend", `
|
|
<option value="${elGenre}" ${elGenre == genre ? "selected" : ""}>${elGenre}</option>
|
|
`)
|
|
})
|
|
|
|
u(".ovk-diag-body #_fullyDeleteAudio").on("click", (e) => {
|
|
u("body").removeClass("dimmed");
|
|
document.querySelector("html").style.overflowY = "scroll"
|
|
|
|
u(".ovk-diag-cont").remove();
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: `/audio${id}/action?act=delete`,
|
|
data: {
|
|
hash: u("meta[name=csrf]").attr("value")
|
|
},
|
|
success: (response) => {
|
|
if(response.success)
|
|
u(player).remove()
|
|
else
|
|
fastError(response.flash.message)
|
|
}
|
|
});
|
|
})
|
|
})
|
|
|
|
$(document).on("click", ".title.withLyrics", (e) => {
|
|
let parent = e.currentTarget.closest(".audioEmbed")
|
|
|
|
parent.querySelector(".lyrics").classList.toggle("showed")
|
|
})
|
|
|
|
$(document).on("click", ".musicIcon.remove-icon", (e) => {
|
|
let id = e.currentTarget.dataset.id
|
|
|
|
let formdata = new FormData()
|
|
formdata.append("hash", u("meta[name=csrf]").attr("value"))
|
|
|
|
ky.post(`/audio${id}/action?act=remove`, {
|
|
hooks: {
|
|
beforeRequest: [
|
|
(_request) => {
|
|
e.target.classList.add("lagged")
|
|
}
|
|
],
|
|
afterResponse: [
|
|
async (_request, _options, response) => {
|
|
let json = await response.json()
|
|
|
|
if(json.success) {
|
|
e.target.classList.remove("remove-icon")
|
|
e.target.classList.add("add-icon")
|
|
e.target.classList.remove("lagged")
|
|
|
|
let withd = e.target.closest(".audioEmbed.withdrawn")
|
|
|
|
if(withd != null)
|
|
u(withd).remove()
|
|
} else
|
|
fastError(json.flash.message)
|
|
}
|
|
]
|
|
}, body: formdata
|
|
})
|
|
})
|
|
|
|
$(document).on("click", ".musicIcon.remove-icon-group", (e) => {
|
|
let id = e.currentTarget.dataset.id
|
|
|
|
let formdata = new FormData()
|
|
formdata.append("hash", u("meta[name=csrf]").attr("value"))
|
|
formdata.append("club", e.currentTarget.dataset.club)
|
|
|
|
ky.post(`/audio${id}/action?act=remove_club`, {
|
|
hooks: {
|
|
beforeRequest: [
|
|
(_request) => {
|
|
e.currentTarget.classList.add("lagged")
|
|
}
|
|
],
|
|
afterResponse: [
|
|
async (_request, _options, response) => {
|
|
let json = await response.json()
|
|
|
|
if(json.success)
|
|
$(e.currentTarget.closest(".audioEmbed")).remove()
|
|
else
|
|
fastError(json.flash.message)
|
|
}
|
|
]
|
|
}, body: formdata
|
|
})
|
|
})
|
|
|
|
$(document).on("click", ".musicIcon.add-icon-group", async (ev) => {
|
|
let body = `
|
|
${tr("what_club_add")}
|
|
<div style="margin-top: 4px;">
|
|
<select id="addIconsWindow" style="width: 36%;"></select>
|
|
<input name="addButton" type="button" class="button" value="${tr("add")}">
|
|
</div>
|
|
<span class="errorPlace"></span>
|
|
`
|
|
MessageBox(tr("add_audio_to_club"), body, [tr("close")], [Function.noop])
|
|
|
|
document.querySelector(".ovk-diag-body").style.padding = "11px"
|
|
|
|
if(window.openvk.writeableClubs == null) {
|
|
try {
|
|
window.openvk.writeableClubs = await API.Groups.getWriteableClubs()
|
|
} catch (e) {
|
|
document.querySelector(".errorPlace").innerHTML = tr("no_access_clubs")
|
|
document.querySelector(".ovk-diag-body input[name='addButton']").classList.add("lagged")
|
|
|
|
return
|
|
}
|
|
}
|
|
|
|
window.openvk.writeableClubs.forEach(el => {
|
|
document.querySelector("#addIconsWindow").insertAdjacentHTML("beforeend", `
|
|
<option value="${el.id}">${ovk_proc_strtr(el.name, 20)}</option>
|
|
`)
|
|
})
|
|
|
|
$(".ovk-diag-body").on("click", "input[name='addButton']", (e) => {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: `/audio${ev.target.dataset.id}/action?act=add_to_club`,
|
|
data: {
|
|
hash: u("meta[name=csrf]").attr("value"),
|
|
club: document.querySelector("#addIconsWindow").value
|
|
},
|
|
beforeSend: () => {
|
|
e.target.classList.add("lagged")
|
|
document.querySelector(".errorPlace").innerHTML = ""
|
|
},
|
|
success: (response) => {
|
|
if(!response.success)
|
|
document.querySelector(".errorPlace").innerHTML = response.flash.message
|
|
|
|
e.currentTarget.classList.remove("lagged")
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
$(document).on("click", ".musicIcon.add-icon", (e) => {
|
|
let id = e.currentTarget.dataset.id
|
|
|
|
let formdata = new FormData()
|
|
formdata.append("hash", u("meta[name=csrf]").attr("value"))
|
|
|
|
ky.post(`/audio${id}/action?act=add`, {
|
|
hooks: {
|
|
beforeRequest: [
|
|
(_request) => {
|
|
e.target.classList.add("lagged")
|
|
}
|
|
],
|
|
afterResponse: [
|
|
async (_request, _options, response) => {
|
|
let json = await response.json()
|
|
|
|
if(json.success) {
|
|
e.target.classList.remove("add-icon")
|
|
e.target.classList.add("remove-icon")
|
|
e.target.classList.remove("lagged")
|
|
} else
|
|
fastError(json.flash.message)
|
|
}
|
|
]
|
|
}, body: formdata
|
|
})
|
|
})
|
|
|
|
$(document).on("click", "#_deletePlaylist", (e) => {
|
|
let id = e.currentTarget.dataset.id
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: `/playlist${id}/action?act=delete`,
|
|
data: {
|
|
hash: u("meta[name=csrf]").attr("value"),
|
|
},
|
|
beforeSend: () => {
|
|
e.currentTarget.classList.add("lagged")
|
|
},
|
|
success: (response) => {
|
|
if(response.success) {
|
|
window.location.assign("/playlists" + response.id)
|
|
} else {
|
|
fastError(response.flash.message)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
$(document).on("click", "#_audioAttachment", (e) => {
|
|
let form = e.currentTarget.closest("form")
|
|
let body = `
|
|
<div class="searchBox">
|
|
<input name="query" type="text" maxlength="50" placeholder="${tr("header_search")}">
|
|
<select name="perf">
|
|
<option value="by_name">${tr("by_name")}</option>
|
|
<option value="by_performer">${tr("by_performer")}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="audiosInsert"></div>
|
|
`
|
|
MessageBox(tr("select_audio"), body, [tr("ok")], [Function.noop])
|
|
|
|
document.querySelector(".ovk-diag-body").style.padding = "0"
|
|
document.querySelector(".ovk-diag-cont").style.width = "580px"
|
|
document.querySelector(".ovk-diag-body").style.height = "335px"
|
|
|
|
let searcher = new playersSearcher("entity_audios", 0)
|
|
searcher.successCallback = (response, page) => {
|
|
let domparser = new DOMParser()
|
|
let result = domparser.parseFromString(response, "text/html")
|
|
|
|
let pagesCount = result.querySelector("input[name='pagesCount']").value
|
|
let count = Number(result.querySelector("input[name='count']").value)
|
|
|
|
if(count < 1) {
|
|
document.querySelector(".audiosInsert").innerHTML = tr("no_results")
|
|
return
|
|
}
|
|
|
|
result.querySelectorAll(".audioEmbed").forEach(el => {
|
|
let id = el.dataset.prettyid
|
|
let name = el.dataset.name
|
|
let isAttached = (form.querySelector("input[name='audios']").value.includes(`${id},`))
|
|
document.querySelector(".audiosInsert").insertAdjacentHTML("beforeend", `
|
|
<div style="display: table;width: 100%;clear: both;">
|
|
<div style="width: 72%;float: left;">${el.outerHTML}</div>
|
|
<div class="attachAudio" data-attachmentdata="${id}" data-name="${name}">
|
|
<span>${isAttached ? tr("detach_audio") : tr("attach_audio")}</span>
|
|
</div>
|
|
</div>
|
|
`)
|
|
})
|
|
|
|
u("#loader").remove()
|
|
|
|
if(this.page < pagesCount) {
|
|
document.querySelector(".audiosInsert").insertAdjacentHTML("beforeend", `
|
|
<div id="showMoreAudios" data-pagesCount="${pagesCount}" data-page="${this.page + 1}" style="width: 100%;text-align: center;background: #d5d5d5;height: 22px;padding-top: 9px;cursor:pointer;">
|
|
<span>more...</span>
|
|
</div>`)
|
|
}
|
|
}
|
|
|
|
searcher.errorCallback = () => {
|
|
fastError("Error when loading players.")
|
|
}
|
|
|
|
searcher.beforesendCallback = () => {
|
|
document.querySelector(".audiosInsert").insertAdjacentHTML("beforeend", `<img id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">`)
|
|
}
|
|
|
|
searcher.clearContainer = () => {
|
|
document.querySelector(".audiosInsert").innerHTML = ""
|
|
}
|
|
|
|
searcher.movePage(1)
|
|
|
|
$(".audiosInsert").on("click", "#showMoreAudios", (e) => {
|
|
u(e.currentTarget).remove()
|
|
searcher.movePage(Number(e.currentTarget.dataset.page))
|
|
})
|
|
|
|
$(".searchBox input").on("change", async (e) => {
|
|
await new Promise(r => setTimeout(r, 500));
|
|
|
|
if(e.currentTarget.value === document.querySelector(".searchBox input").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;
|
|
}
|
|
})
|
|
|
|
$(".searchBox select").on("change", async (e) => {
|
|
searcher.clearContainer()
|
|
searcher.searchType = e.currentTarget.value
|
|
|
|
$(".searchBox input").trigger("change")
|
|
return;
|
|
})
|
|
|
|
function insertAttachment(id) {
|
|
let audios = form.querySelector("input[name='audios']")
|
|
|
|
if(!audios.value.includes(id + ",")) {
|
|
if(audios.value.split(",").length > 10) {
|
|
NewNotification(tr("error"), tr("max_attached_audios"))
|
|
return false
|
|
}
|
|
|
|
form.querySelector("input[name='audios']").value += (id + ",")
|
|
|
|
return true
|
|
} else {
|
|
form.querySelector("input[name='audios']").value = form.querySelector("input[name='audios']").value.replace(id + ",", "")
|
|
|
|
return false
|
|
}
|
|
}
|
|
|
|
$(".audiosInsert").on("click", ".attachAudio", (ev) => {
|
|
if(!insertAttachment(ev.currentTarget.dataset.attachmentdata)) {
|
|
u(`.post-has-audios .post-has-audio[data-id='${ev.currentTarget.dataset.attachmentdata}']`).remove()
|
|
ev.currentTarget.querySelector("span").innerHTML = tr("attach_audio")
|
|
} else {
|
|
ev.currentTarget.querySelector("span").innerHTML = tr("detach_audio")
|
|
|
|
form.querySelector(".post-has-audios").insertAdjacentHTML("beforeend", `
|
|
<div class="post-has-audio" id="unattachAudio" data-id="${ev.currentTarget.dataset.attachmentdata}">
|
|
<span>${ovk_proc_strtr(escapeHtml(ev.currentTarget.dataset.name), 40)}</span>
|
|
</div>
|
|
`)
|
|
|
|
u(`#unattachAudio[data-id='${ev.currentTarget.dataset.attachmentdata}']`).on("click", (e) => {
|
|
let id = ev.currentTarget.dataset.attachmentdata
|
|
form.querySelector("input[name='audios']").value = form.querySelector("input[name='audios']").value.replace(id + ",", "")
|
|
|
|
u(e.currentTarget).remove()
|
|
})
|
|
}
|
|
})
|
|
})
|
|
|
|
$(document).on("click", ".audioEmbed.processed", (e) => {
|
|
MessageBox(tr("error"), tr("audio_embed_processing"), [tr("ok")], [Function.noop])
|
|
})
|
|
|
|
$(document).on("click", ".audioEmbed.withdrawn", (e) => {
|
|
MessageBox(tr("error"), tr("audio_embed_withdrawn"), [tr("ok")], [Function.noop])
|
|
})
|
|
|
|
$(document).on("click", ".musicIcon.report-icon", (e) => {
|
|
MessageBox(tr("report_question"), `
|
|
${tr("going_to_report_audio")}
|
|
<br/>${tr("report_question_text")}
|
|
<br/><br/><b> ${tr("report_reason")}</b>: <input type='text' id='uReportMsgInput' placeholder='${tr("reason")}' />`, [tr("confirm_m"), tr("cancel")], [(function() {
|
|
|
|
res = document.querySelector("#uReportMsgInput").value;
|
|
xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/report/" + e.currentTarget.dataset.id + "?reason=" + res + "&type=audio", 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", ".audiosContainer .paginator a", (e) => {
|
|
e.preventDefault()
|
|
let url = new URL(e.currentTarget.href)
|
|
let page = url.searchParams.get("p")
|
|
|
|
function searchNode(id) {
|
|
let node = document.querySelector(`.audioEmbed[data-realid='${id}'] .audioEntry`)
|
|
|
|
if(node != null) {
|
|
node.classList.add("nowPlaying")
|
|
}
|
|
}
|
|
|
|
if(window.savedAudiosPages[page] != null) {
|
|
history.pushState({}, "", e.currentTarget.href)
|
|
document.querySelector(".audiosContainer").innerHTML = window.savedAudiosPages[page].innerHTML
|
|
searchNode(window.player["tracks"].currentTrack != null ? window.player["tracks"].currentTrack.id : 0)
|
|
|
|
return
|
|
}
|
|
|
|
e.currentTarget.parentNode.classList.add("lagged")
|
|
$.ajax({
|
|
type: "GET",
|
|
url: e.currentTarget.href,
|
|
success: (response) => {
|
|
let domparser = new DOMParser()
|
|
let result = domparser.parseFromString(response, "text/html")
|
|
|
|
document.querySelector(".audiosContainer").innerHTML = result.querySelector(".audiosContainer").innerHTML
|
|
history.pushState({}, "", e.currentTarget.href)
|
|
window.savedAudiosPages[page] = result.querySelector(".audiosContainer")
|
|
searchNode(window.player["tracks"].currentTrack != null ? window.player["tracks"].currentTrack.id : 0)
|
|
|
|
if(!window.player.context["playedPages"].includes(page)) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/audios/context",
|
|
data: {
|
|
context: window.player["context"].context_type,
|
|
context_entity: window.player["context"].context_id,
|
|
hash: u("meta[name=csrf]").attr("value"),
|
|
page: page
|
|
},
|
|
success: (response_2) => {
|
|
window.player.tracks["tracks"] = window.player.tracks["tracks"].concat(response_2["items"])
|
|
window.player.context["playedPages"].push(page)
|
|
console.info("Page is switched")
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
$(document).on("click", ".addToPlaylist", (e) => {
|
|
let audios = document.querySelector("input[name='audios']")
|
|
let id = e.currentTarget.dataset.id
|
|
|
|
if(!audios.value.includes(id + ",")) {
|
|
document.querySelector("input[name='audios']").value += (id + ",")
|
|
e.currentTarget.querySelector("span").innerHTML = tr("remove_from_playlist")
|
|
} else {
|
|
document.querySelector("input[name='audios']").value = document.querySelector("input[name='audios']").value.replace(id + ",", "")
|
|
e.currentTarget.querySelector("span").innerHTML = tr("add_to_playlist")
|
|
}
|
|
})
|
|
|
|
$(document).on("click", "#bookmarkPlaylist, #unbookmarkPlaylist", (e) => {
|
|
let target = e.currentTarget
|
|
let id = target.id
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: `/playlist${e.currentTarget.dataset.id}/action?act=${id == "unbookmarkPlaylist" ? "unbookmark" : "bookmark"}`,
|
|
data: {
|
|
hash: u("meta[name=csrf]").attr("value"),
|
|
},
|
|
beforeSend: () => {
|
|
e.currentTarget.classList.add("lagged")
|
|
},
|
|
success: (response) => {
|
|
if(response.success) {
|
|
e.currentTarget.setAttribute("id", id == "unbookmarkPlaylist" ? "bookmarkPlaylist" : "unbookmarkPlaylist")
|
|
e.currentTarget.innerHTML = id == "unbookmarkPlaylist" ? tr("bookmark") : tr("unbookmark")
|
|
e.currentTarget.classList.remove("lagged")
|
|
} else
|
|
fastError(response.flash.message)
|
|
}
|
|
})
|
|
})
|