refactor: Replace UIWindowCopyProgress with UIWindowProgress

src/UI/UIWindowCopyProgress.js

@@ -1,81 +0,0 @@
-/**
- * Copyright (C) 2024 Puter Technologies Inc.
- *
- * This file is part of Puter.
- *
- * Puter is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published
- * by the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- * 
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- * 
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import UIWindow from './UIWindow.js'
-
-// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
-async function UIWindowCopyProgress(options){
-    let h = '';
-    h += `<div data-copy-operation-id="${options.operation_id}">`;
-        h += `<div>`;
-            // spinner
-            h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
-            // Progress report
-            h +=`<div style="margin-bottom:20px; float:left; padding-top:3px; font-size:15px; overflow: hidden; width: calc(100% - 40px); text-overflow: ellipsis; white-space: nowrap;">`;
-                // msg
-                h += `<span class="copy-progress-msg">${i18n('copying')} </span>`;
-                h += `<span class="copy-from" style="font-weight:strong;"></span>`;
-            h += `</div>`;
-            // progress
-            h += `<div class="copy-progress-bar-container" style="clear:both; margin-top:20px; border-radius:3px;">`;
-                h += `<div class="copy-progress-bar"></div>`;
-            h += `</div>`;
-            // cancel
-            // h += `<button style="float:right; margin-top: 15px; margin-right: -2px;" class="button button-small copy-cancel-btn">Cancel</button>`;
-        h +=`</div>`;
-    h += `</div>`;
-
-    const el_window = await UIWindow({
-        title: i18n('copying'),
-        icon: window.icons[`app-icon-copying.svg`],
-        uid: null,
-        is_dir: false,
-        body_content: h,
-        has_head: false,
-        selectable_body: false,
-        draggable_body: true,
-        allow_context_menu: false,
-        is_resizable: false,
-        is_droppable: false,
-        init_center: true,
-        allow_native_ctxmenu: false,
-        allow_user_select: false,
-        window_class: 'window-copy-progress',
-        width: 450,
-        dominant: true,
-        window_css:{
-            height: 'initial',
-        },
-        body_css: {
-            padding: '22px',
-            width: 'initial',
-            'background-color': 'rgba(231, 238, 245, .95)',
-            'backdrop-filter': 'blur(3px)',
-        }    
-    });
-
-    $(el_window).find('.copy-cancel-btn').on('click', function(e){
-        window.operation_cancelled[options.operation_id] = true;
-        $(el_window).close();
-    })
-
-    return el_window;
-}
-
-export default UIWindowCopyProgress

src/helpers.js

@@ -24,7 +24,6 @@ import UIItem from './UI/UIItem.js'
 import UIWindow from './UI/UIWindow.js'
 import UIWindowLogin from './UI/UIWindowLogin.js';
 import UIWindowSaveAccount from './UI/UIWindowSaveAccount.js';
-import UIWindowCopyProgress from './UI/UIWindowCopyProgress.js';
 import update_username_in_gui from './helpers/update_username_in_gui.js';
 import update_title_based_on_uploads from './helpers/update_title_based_on_uploads.js';
 import content_type_to_icon from './helpers/content_type_to_icon.js';
@@ -1273,8 +1272,13 @@ window.copy_clipboard_items = async function(dest_path, dest_container_element){
         // only show progress window if it takes longer than 2s to copy
         let progwin;
         let progwin_timeout = setTimeout(async () => {
-            progwin = await UIWindowCopyProgress({operation_id: copy_op_id});
+            progwin = await UIWindowProgress({
-        }, 2000);
+                operation_id: copy_op_id,
+                on_cancel: () => {
+                    window.operation_cancelled[copy_op_id] = true;
+                },
+            });
+        }, 0);
 
         const copied_item_paths = []
 
@@ -1282,7 +1286,8 @@ window.copy_clipboard_items = async function(dest_path, dest_container_element){
             let copy_path = window.clipboard[i].path;
             let item_with_same_name_already_exists = true;
             let overwrite = overwrite_all;
-            $(progwin).find('.copy-from').html(html_encode(copy_path));
+            progwin?.set_status(i18n('copying_file', copy_path));
+
             do{
                 if(overwrite)
                     item_with_same_name_already_exists = false;
@@ -1350,14 +1355,16 @@ window.copy_clipboard_items = async function(dest_path, dest_container_element){
         clearTimeout(progwin_timeout);
 
         let copy_duration = (Date.now() - copy_progress_window_init_ts);
-        if(progwin && copy_duration >= window.copy_progress_hide_delay){
+        if (progwin) {
-            $(progwin).close();   
+            if (copy_duration >= window.copy_progress_hide_delay) {
-        }else if(progwin){
+                progwin.close();
-            setTimeout(() => {
+            } else {
                 setTimeout(() => {
-                    $(progwin).close();   
+                    setTimeout(() => {
-                }, Math.abs(window.copy_progress_hide_delay - copy_duration));
+                        progwin.close();
-            })
+                    }, Math.abs(window.copy_progress_hide_delay - copy_duration));
+                });
+            }
         }
     })();
 }
@@ -1377,7 +1384,12 @@ window.copy_items = function(el_items, dest_path){
         // only show progress window if it takes longer than 2s to copy
         let progwin;
         let progwin_timeout = setTimeout(async () => {
-            progwin = await UIWindowCopyProgress({operation_id: copy_op_id});
+            progwin = await UIWindowProgress({
+                operation_id: copy_op_id,
+                on_cancel: () => {
+                    window.operation_cancelled[copy_op_id] = true;
+                },
+            });
         }, 2000);
 
         const copied_item_paths = []
@@ -1386,7 +1398,7 @@ window.copy_items = function(el_items, dest_path){
             let copy_path = $(el_items[i]).attr('data-path');
             let item_with_same_name_already_exists = true;
             let overwrite = overwrite_all;
-            $(progwin).find('.copy-from').html(html_encode(copy_path));
+            progwin?.set_status(i18n('copying_file', copy_path));
 
             do{
                 if(overwrite)
@@ -1455,14 +1467,16 @@ window.copy_items = function(el_items, dest_path){
         clearTimeout(progwin_timeout);
 
         let copy_duration = (Date.now() - copy_progress_window_init_ts);
-        if(progwin && copy_duration >= window.copy_progress_hide_delay){
+        if (progwin) {
-            $(progwin).close();   
+            if (copy_duration >= window.copy_progress_hide_delay) {
-        }else if(progwin){
+                progwin.close();
-            setTimeout(() => {
+            } else {
                 setTimeout(() => {
-                    $(progwin).close();   
+                    setTimeout(() => {
-                }, Math.abs(window.copy_progress_hide_delay - copy_duration));
+                        progwin.close();
-            })
+                    }, Math.abs(window.copy_progress_hide_delay - copy_duration));
+                });
+            }
         }
     })()
 }

src/i18n/translations/en.js

@@ -70,6 +70,7 @@ const en = {
         copy: 'Copy',
         copy_link: "Copy Link",
         copying: "Copying",
+        copying_file: "Copying %%",
         cover: 'Cover',
         create_account: "Create Account",
         create_free_account: "Create Free Account",