{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.location.assign(response.redirect_link) }) } else { fastError(response.flash.message) } } }) }) </script> {/block}