mirror of
https://github.com/openvk/openvk
synced 2024-12-24 17:41:07 +03:00
254 lines
12 KiB
XML
254 lines
12 KiB
XML
{extends "../@layout.xml"}
|
|
|
|
{block title}
|
|
{_upload_audio}
|
|
{/block}
|
|
|
|
{block header}
|
|
{if !$playlist}
|
|
{if !is_null($group)}
|
|
<a href="{$group->getURL()}">{$group->getCanonicalName()}</a>
|
|
»
|
|
<a href="/audios-{$group->getId()}">{_audios}</a>
|
|
{else}
|
|
<a href="{$thisUser->getURL()}">{$thisUser->getCanonicalName()}</a>
|
|
»
|
|
<a href="/audios{$thisUser->getId()}">{_audios}</a>
|
|
{/if}
|
|
{else}
|
|
<a href="{$owner->getURL()}">{$owner->getCanonicalName()}</a>
|
|
»
|
|
<a href="/playlists{$owner->getRealId()}">{_playlists}</a>
|
|
»
|
|
<a href="/playlist{$playlist->getPrettyId()}">{_playlist}</a>
|
|
{/if}
|
|
|
|
»
|
|
{_upload_audio}
|
|
{/block}
|
|
|
|
{block content}
|
|
<div class="container_gray" style="border: 0;margin-top: -10px;">
|
|
<div id="upload_container">
|
|
<div id="firstStep">
|
|
<h4>{_select_audio}</h4><br/>
|
|
<b><a href="javascript:void(0)">{_limits}</a></b>
|
|
<ul>
|
|
<li>{tr("audio_requirements", 1, 30, 25)}</li>
|
|
<li>{tr("audio_requirements_2")}</li>
|
|
</ul>
|
|
<div id="audio_upload">
|
|
<form enctype="multipart/form-data" method="POST">
|
|
<input type="hidden" name="name" />
|
|
<input type="hidden" name="performer" />
|
|
<input type="hidden" name="lyrics" />
|
|
<input type="hidden" name="genre" />
|
|
<input type="hidden" name="explicit" />
|
|
<input type="hidden" name="unlisted" />
|
|
|
|
<input type="hidden" name="hash" value="{$csrfToken}" />
|
|
<input id="audio_input" type="file" name="blob" accept="audio/*" style="display:none" />
|
|
<input value="{_upload_button}" class="button" type="button" onclick="document.querySelector('#audio_input').click()">
|
|
</form>
|
|
</div><br/>
|
|
|
|
<span>{_you_can_also_add_audio_using} <b><a href="/search?section=audios">{_search_audio_inst}</a></b>.<span>
|
|
</div>
|
|
|
|
<div id="lastStep" style="display:none;">
|
|
<table cellspacing="7" cellpadding="0" border="0" align="center">
|
|
<tbody>
|
|
<tr>
|
|
<td width="120" valign="top"><span class="nobold">{_performer}:</span></td>
|
|
<td><input name="performer" type="text" autocomplete="off" maxlength="80" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td width="120" valign="top"><span class="nobold">{_audio_name}:</span></td>
|
|
<td><input type="text" name="name" autocomplete="off" maxlength="80" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td width="120" valign="top"><span class="nobold">{_genre}:</span></td>
|
|
<td>
|
|
<select name="genre">
|
|
<option n:foreach='\openvk\Web\Models\Entities\Audio::genres as $genre' n:attr="selected: $genre == 'Other'" value="{$genre}">
|
|
{$genre}
|
|
</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="120" valign="top"><span class="nobold">{_lyrics}:</span></td>
|
|
<td><textarea name="lyrics" style="resize: vertical;max-height: 300px;"></textarea></td>
|
|
</tr>
|
|
<tr>
|
|
<td width="120" valign="top"></td>
|
|
<td>
|
|
<label style='display:block'><input type="checkbox" name="explicit">{_audios_explicit}</label>
|
|
<label><input type="checkbox" name="unlisted">{_audios_unlisted}</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="120" valign="top"></td>
|
|
<td>
|
|
<input class="button" type="button" id="uploadMuziko" value="{_upload_button}">
|
|
<input class="button" type="button" id="backToUpload" value="{_select_another_file}">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import * as id3 from "/assets/packages/static/openvk/js/node_modules/id3js/lib/id3.js";
|
|
|
|
u("#audio_input").on("change", async function(e) {
|
|
let files = e.currentTarget.files
|
|
if(files.length <= 0)
|
|
return;
|
|
|
|
document.querySelector("#firstStep").style.display = "none"
|
|
document.querySelector("#lastStep").style.display = "block"
|
|
|
|
function fallback() {
|
|
console.info('Tags not found, setting default values.')
|
|
|
|
document.querySelector("#lastStep input[name=name]").value = files[0].name
|
|
document.querySelector("#lastStep select[name=genre]").value = "Other"
|
|
document.querySelector("#lastStep input[name=performer]").value = tr("track_unknown");
|
|
}
|
|
|
|
let tags = null
|
|
|
|
try {
|
|
tags = await id3.fromFile(files[0]);
|
|
} catch(e) {
|
|
console.error(e)
|
|
}
|
|
|
|
console.log(tags)
|
|
if(tags != null) {
|
|
console.log("ID" + tags.kind + " detected, setting values...");
|
|
|
|
if(tags.title != null)
|
|
document.querySelector("#lastStep input[name=name]").value = tags.title;
|
|
else
|
|
document.querySelector("#lastStep input[name=name]").value = files[0].name
|
|
|
|
if(tags.artist != null)
|
|
document.querySelector("#lastStep input[name=performer]").value = tags.artist;
|
|
else
|
|
document.querySelector("#lastStep input[name=performer]").value = tr("track_unknown");
|
|
|
|
if(tags.genre != null) {
|
|
// if there are more than one genre
|
|
if(tags.genre.split(', ').length > 1) {
|
|
const genres = tags.genre.split(', ')
|
|
|
|
genres.forEach(genre => {
|
|
if(document.querySelector("#lastStep select[name=genre] > option[value='" + genre + "']") != null) {
|
|
document.querySelector("#lastStep select[name=genre]").value = genre;
|
|
}
|
|
})
|
|
} else {
|
|
if(document.querySelector("#lastStep select[name=genre] > option[value='" + tags.genre + "']") != null) {
|
|
document.querySelector("#lastStep select[name=genre]").value = tags.genre;
|
|
} else {
|
|
console.warn("Unknown genre: " + tags.genre);
|
|
document.querySelector("#lastStep select[name=genre]").value = "Other"
|
|
}
|
|
}
|
|
} else {
|
|
document.querySelector("#lastStep select[name=genre]").value = "Other"
|
|
}
|
|
|
|
if(tags.comments != null)
|
|
document.querySelector("#lastStep textarea[name=lyrics]").value = tags.comments
|
|
} else {
|
|
fallback()
|
|
}
|
|
});
|
|
|
|
u("#backToUpload").on("click", (e) => {
|
|
document.querySelector("#firstStep").style.display = "block"
|
|
document.querySelector("#lastStep").style.display = "none"
|
|
|
|
document.querySelector("#lastStep input[name=name]").value = ""
|
|
document.querySelector("#lastStep input[name=performer]").value = ""
|
|
document.querySelector("#lastStep select[name=genre]").value = ""
|
|
document.querySelector("#lastStep textarea[name=lyrics]").value = ""
|
|
document.querySelector("#audio_input").value = ""
|
|
})
|
|
|
|
u("#uploadMuziko").on("click", (e) => {
|
|
var name_ = document.querySelector("#audio_upload input[name=name]");
|
|
var perf_ = document.querySelector("#audio_upload input[name=performer]");
|
|
var genre_ = document.querySelector("#audio_upload input[name=genre]");
|
|
var lyrics_ = document.querySelector("#audio_upload input[name=lyrics]");
|
|
var explicit_ = document.querySelector("#audio_upload input[name=explicit]");
|
|
var unlisted_ = document.querySelector("#audio_upload input[name=unlisted]");
|
|
|
|
name_.value = document.querySelector("#lastStep input[name=name]").value
|
|
perf_.value = document.querySelector("#lastStep input[name=performer]").value
|
|
genre_.value = document.querySelector("#lastStep select[name=genre]").value
|
|
lyrics_.value = document.querySelector("#lastStep textarea[name=lyrics]").value
|
|
explicit_.value = document.querySelector("#lastStep input[name=explicit]").checked ? "on" : "off"
|
|
unlisted_.value = document.querySelector("#lastStep input[name=unlisted]").checked ? "on" : "off"
|
|
|
|
$("#audio_upload > form").trigger("submit");
|
|
})
|
|
|
|
$(document).on("dragover drop", (e) => {
|
|
e.preventDefault()
|
|
|
|
return false;
|
|
})
|
|
|
|
$(".container_gray").on("drop", (e) => {
|
|
e.originalEvent.dataTransfer.dropEffect = 'move';
|
|
e.preventDefault()
|
|
|
|
let file = e.originalEvent.dataTransfer.files[0]
|
|
|
|
if(!file.type.startsWith('audio/')) {
|
|
MessageBox(tr("error"), tr("only_audios_accepted", escapeHtml(file.name)), [tr("ok")], [() => Function.noop])
|
|
return;
|
|
}
|
|
|
|
document.getElementById("audio_input").files = e.originalEvent.dataTransfer.files
|
|
u("#audio_input").trigger("change")
|
|
})
|
|
|
|
$("#audio_upload").on("submit", "form", (e) => {
|
|
e.preventDefault()
|
|
|
|
let fd = new FormData(e.currentTarget)
|
|
fd.append("ajax", 1)
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: location.href,
|
|
contentType: false,
|
|
processData: false,
|
|
data: fd,
|
|
beforeSend: function() {
|
|
document.querySelector("#lastStep").classList.add("lagged")
|
|
document.querySelector("#upload_container").classList.add("uploading")
|
|
},
|
|
success: (response) => {
|
|
document.querySelector("#lastStep").classList.remove("lagged")
|
|
document.querySelector("#upload_container").classList.remove("uploading")
|
|
if(response.success) {
|
|
u("#backToUpload").trigger("click")
|
|
NewNotification(tr("success"), tr("audio_successfully_uploaded"), null, () => {
|
|
window.router.route(response.redirect_link)
|
|
})
|
|
} else {
|
|
fastError(response.flash.message)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
{/block}
|