From 5bc306ebf91eaf5249da3ada720044589bf82bda Mon Sep 17 00:00:00 2001 From: mrilyew <99399973+mrilyew@users.noreply.github.com> Date: Sat, 30 Nov 2024 19:41:08 +0300 Subject: [PATCH] Refactor audio upload page --- Web/Presenters/AudioPresenter.php | 2 +- Web/Presenters/templates/Audio/Upload.xml | 353 ++++++++++------------ Web/static/css/audios.css | 8 + Web/static/css/main.css | 21 +- Web/static/js/al_music.js | 75 ++++- Web/static/js/al_wall.js | 5 + Web/static/js/router.js | 2 +- Web/static/js/utils.js | 10 + locales/en.strings | 2 +- locales/ru.strings | 2 +- 10 files changed, 286 insertions(+), 194 deletions(-) diff --git a/Web/Presenters/AudioPresenter.php b/Web/Presenters/AudioPresenter.php index ab020563..9a678b76 100644 --- a/Web/Presenters/AudioPresenter.php +++ b/Web/Presenters/AudioPresenter.php @@ -809,7 +809,7 @@ final class AudioPresenter extends OpenVKPresenter $output_array['name'] = $audio->getTitle(); $output_array['performer'] = $audio->getPerformer(); - if(!$audio->isWithdrawn() && $audio->isAvailable()) { + if(!$audio->isWithdrawn()) { $output_array['keys'] = $audio->getKeys(); $output_array['url'] = $audio->getUrl(); } diff --git a/Web/Presenters/templates/Audio/Upload.xml b/Web/Presenters/templates/Audio/Upload.xml index 61d5904b..8433ea6e 100644 --- a/Web/Presenters/templates/Audio/Upload.xml +++ b/Web/Presenters/templates/Audio/Upload.xml @@ -38,217 +38,196 @@
  • {tr("audio_requirements_2")}
    • -
    - - - - - - - - - - -
    + +

    {_you_can_also_add_audio_using} {_search_audio_inst}. - - {/block} diff --git a/Web/static/css/audios.css b/Web/static/css/audios.css index 23e5912a..15ecbcdb 100644 --- a/Web/static/css/audios.css +++ b/Web/static/css/audios.css @@ -966,6 +966,14 @@ color: white; } +#ajax_audio_player #aj_time { + cursor: pointer; +} + +#ajax_audio_player #aj_time:hover { + text-decoration: underline; +} + #ajax_audio_player .selectableTrack { width: 100%; position: relative; diff --git a/Web/static/css/main.css b/Web/static/css/main.css index 06fb0686..575b95a6 100644 --- a/Web/static/css/main.css +++ b/Web/static/css/main.css @@ -2261,6 +2261,25 @@ table td[width="120"] { margin: 0; } +#upload_container #lastStepContainers { + display: flex; + flex-direction: column; + gap: 10px; +} + +#upload_container .upload_container_element { + border: 1px solid #d6d6d6; + background: #f6f6f6; +} + +#upload_container .upload_container_element .upload_container_name { + padding: 5px 5px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + #audio_upload { width: 350px; margin: 20px auto; @@ -3561,7 +3580,7 @@ hr { cursor: pointer; } -#upload_container.uploading { +#upload_container .upload_container_element .upload_container_name.uploading { background: white url('/assets/packages/static/openvk/img/progressbar.gif') !important; background-position-x: 0% !important; background-position-y: 0% !important; diff --git a/Web/static/js/al_music.js b/Web/static/js/al_music.js index 36737acf..6cfa1166 100644 --- a/Web/static/js/al_music.js +++ b/Web/static/js/al_music.js @@ -690,7 +690,7 @@ window.player = new class { miniplayer_template.find('#aj_player_close_btn').on('click', (e) => { this.ajClose() }) - miniplayer_template.find('#aj_player_track_title').on('click', (e) => { + miniplayer_template.find('#aj_time').on('click', (e) => { if(window.player && window.player.context && window.player.context.object) { window.router.route(window.player.context.object.url) } @@ -698,7 +698,7 @@ window.player = new class { $('#ajax_audio_player').draggable({ cursor: 'grabbing', containment: 'window', - cancel: '#aj_player_track, #aj_player_volume, #aj_player_buttons', + cancel: '#aj_player_track .selectableTrack, #aj_player_volume .selectableTrack, #aj_player_buttons', stop: function(e) { if(window.player.ajaxPlayer.length > 0) { const left = parseInt(window.player.ajaxPlayer.nodes[0].style.left) @@ -906,6 +906,10 @@ u(document).on("mousemove click mouseup", ".bigPlayer .trackPanel .selectableTra if(window.player.isAtAudiosPage() && window.player.current_track_id == 0) return + if(u('.ui-draggable-dragging').length > 0) { + return + } + function __defaultAction(i_time) { window.player.listen_coef -= 0.5 window.player.audioPlayer.currentTime = i_time @@ -944,6 +948,10 @@ u(document).on("mousemove click mouseup", ".bigPlayer .volumePanelTrack .selecta if(window.player.isAtAudiosPage() && window.player.current_track_id == 0) return + if(u('.ui-draggable-dragging').length > 0) { + return + } + function __defaultAction(i_volume) { window.player.audioPlayer.volume = i_volume } @@ -1849,3 +1857,66 @@ $(document).on("click", "#bookmarkPlaylist, #unbookmarkPlaylist", (e) => { } }) }) + +u(document).on('click', '.upload_container_element #small_remove_button', (e) => { + if(u('.uploading').length > 0) { + return + } + + const element = u(e.target).closest('.upload_container_element') + const element_index = Number(element.attr('data-index')) + + element.remove() + window.__audio_upload_page.files_list[element_index] = null + + if(u('#lastStep .upload_container_element').length < 1) { + window.__audio_upload_page.showFirstPage() + } +}) + +u(document).on('click', `#upload_container #uploadMusic`, async (e) => { + const current_upload_page = location.href + let end_redir = '' + u('#lastStepButtons').addClass('lagged') + for(const elem of u('#lastStepContainers .upload_container_element').nodes) { + if(!elem) { + return + } + const elem_u = u(elem) + const index = elem.dataset.index + const file = window.__audio_upload_page.files_list[index] + if(!file || !index) { + return + } + + elem_u.addClass('lagged').find('.upload_container_name').addClass('uploading') + // Upload process + const fd = serializeForm(elem) + fd.append('blob', file.file) + fd.append('ajax', 1) + fd.append('hash', window.router.csrf) + + const result = await fetch(current_upload_page, { + method: 'POST', + body: fd, + }) + const result_text = await result.json() + if(result_text.success && result_text.redirect_link) { + end_redir = result_text.redirect_link + } + await sleep(6000) + elem_u.remove() + } + + if(current_upload_page == location.href) { + window.router.route(end_redir) + } +}) + +u(document).on("drop", "#upload_container", function (e) { + e.preventDefault() + e.dataTransfer.dropEffect = 'move'; + + document.getElementById("audio_input").files = e.dataTransfer.files + u("#audio_input").trigger("change") +}) diff --git a/Web/static/js/al_wall.js b/Web/static/js/al_wall.js index 9bb74e92..d0dcf441 100644 --- a/Web/static/js/al_wall.js +++ b/Web/static/js/al_wall.js @@ -1125,6 +1125,11 @@ u(document).on('dragover', '#write .post-horizontal .upload-item, .post-vertical return }) +u(document).on("dragover drop", async (e) => { + e.preventDefault() + return false; +}) + 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') diff --git a/Web/static/js/router.js b/Web/static/js/router.js index 1e327b31..c2e10d1b 100644 --- a/Web/static/js/router.js +++ b/Web/static/js/router.js @@ -224,7 +224,7 @@ u(document).on('click', 'a', async (e) => { return } - if(target.download != null) { + if(target.nodes[0].hasAttribute('download')) { console.log('AJAX | Skipped because its download') return } diff --git a/Web/static/js/utils.js b/Web/static/js/utils.js index 84d3325e..70a4d0c1 100644 --- a/Web/static/js/utils.js +++ b/Web/static/js/utils.js @@ -238,3 +238,13 @@ async function copyToClipboard(text) { } } } + +function remove_file_format(text) +{ + return text.replace(/\.[^.]*$/, '') +} + +function sleep(time) +{ + return new Promise((resolve) => setTimeout(resolve, time)); +} diff --git a/locales/en.strings b/locales/en.strings index b164a4c8..bd46ccc6 100644 --- a/locales/en.strings +++ b/locales/en.strings @@ -882,7 +882,7 @@ "genre" = "Genre"; "lyrics" = "Lyrics"; -"select_another_file" = "Select another file"; +"select_another_file" = "Upload another file"; "limits" = "Limits"; "select_audio" = "Select audio from your computer"; diff --git a/locales/ru.strings b/locales/ru.strings index 4d49fd2e..dcd9b216 100644 --- a/locales/ru.strings +++ b/locales/ru.strings @@ -837,7 +837,7 @@ "genre" = "Жанр"; "lyrics" = "Текст"; -"select_another_file" = "Выбрать другой файл"; +"select_another_file" = "Загрузить ещё"; "limits" = "Ограничения"; "select_audio" = "Выберите аудиозапись на Вашем компьютере";