Refactor audio upload page

Web/Presenters/AudioPresenter.php

@@ -809,7 +809,7 @@ function renderApiGetContext()
             $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();
             }

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;

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;

Web/static/js/al_music.js

@@ -690,15 +690,15 @@ 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)
             }
         })
         $('#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")
+})

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')

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
     }

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));
+}

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";

locales/ru.strings

@@ -837,7 +837,7 @@
 "genre" = "Жанр";
 "lyrics" = "Текст";
 
-"select_another_file" = "Выбрать другой файл";
+"select_another_file" = "Загрузить ещё";
 
 "limits" = "Ограничения";
 "select_audio" = "Выберите аудиозапись на Вашем компьютере";