From d8236ce0f9e4d6c2225c61161e05deb34078f2a7 Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Tue, 17 Nov 2020 23:39:27 +0100 Subject: [PATCH] Update filesystem --- res/static/svelte/filesystem.css | 7 +- res/static/svelte/filesystem.js | 3243 ++++++++++++----- res/template/file_viewer.html | 4 +- res/template/filesystem_svelte.html | 2 +- svelte/src/filesystem/Filesystem.svelte | 189 +- svelte/src/filesystem/FilesystemAPI.svelte | 58 + svelte/src/filesystem/Toolbar.svelte | 99 +- .../filemanager/CreateDirectory.svelte | 33 + .../filesystem/filemanager/FileManager.svelte | 275 ++ .../filemanager/FileUploader.svelte | 210 ++ svelte/src/filesystem/viewers/Audio.svelte | 14 +- .../src/filesystem/viewers/Directory.svelte | 181 - svelte/src/filesystem/viewers/Image.svelte | 7 +- svelte/src/filesystem/viewers/Video.svelte | 39 + 14 files changed, 3233 insertions(+), 1128 deletions(-) create mode 100644 svelte/src/filesystem/FilesystemAPI.svelte create mode 100644 svelte/src/filesystem/filemanager/CreateDirectory.svelte create mode 100644 svelte/src/filesystem/filemanager/FileManager.svelte create mode 100644 svelte/src/filesystem/filemanager/FileUploader.svelte delete mode 100644 svelte/src/filesystem/viewers/Directory.svelte create mode 100644 svelte/src/filesystem/viewers/Video.svelte diff --git a/res/static/svelte/filesystem.css b/res/static/svelte/filesystem.css index 6da4fbd..ad80f5f 100644 --- a/res/static/svelte/filesystem.css +++ b/res/static/svelte/filesystem.css @@ -1,8 +1,11 @@ -.file_viewer.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{position:absolute;display:flex;flex-direction:column;top:0;right:0;bottom:0;left:0;overflow:hidden}.file_viewer.svelte-15t34ei>.file_viewer_headerbar.svelte-15t34ei.svelte-15t34ei{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;text-align:left;z-index:10;box-shadow:none;padding:4px}.file_viewer.svelte-15t34ei>.file_viewer_headerbar.svelte-15t34ei>.svelte-15t34ei{flex-grow:0;flex-shrink:0;margin-left:4px;margin-right:4px;display:inline;align-self:center}.file_viewer.svelte-15t34ei>.file_viewer_headerbar.svelte-15t34ei>.file_viewer_headerbar_title.svelte-15t34ei{flex-grow:1;flex-shrink:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-direction:row}.breadcrumb.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{border-radius:1em;min-width:1em;text-align:center;line-height:1.2em;padding:3px 8px;margin:2px 6px}.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{cursor:pointer;background-color:var(--layer_2_color);transition:0.2s background-color}.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei:hover,.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei:focus,.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei:active{background-color:var(--input_color)}.breadcrumb_last.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{background-color:var(--highlight_color);color:var(--highlight_text_color)}.button_home.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei::after{content:"pixeldrain"}@media(max-width: 600px){.button_home.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei::after{content:"pd"}}.file_viewer.svelte-15t34ei>.list_navigator.svelte-15t34ei.svelte-15t34ei{flex-grow:0;flex-shrink:0;position:relative;display:none;width:100%;background-color:var(--layer_1_color);text-align:center;line-height:1em;overflow-x:auto;overflow-y:hidden;z-index:50;white-space:nowrap}.file_viewer.svelte-15t34ei>.file_viewer_window.svelte-15t34ei.svelte-15t34ei{flex-grow:1;flex-shrink:1;position:relative;display:inline-block;width:auto;height:auto;margin:0;z-index:9}.file_viewer.svelte-15t34ei>.file_viewer_window.svelte-15t34ei>.file_viewer_file_preview.svelte-15t34ei{position:absolute;left:0;right:0;top:0;bottom:0;display:inline-block;min-height:100px;min-width:100px;text-align:center;vertical-align:middle;transition:left 0.5s;overflow:hidden;box-shadow:inset 2px 2px 8px var(--shadow_color)}.toolbar.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{position:absolute;width:8em;z-index:49;overflow:hidden;float:left;background-color:var(--layer_1_color);left:-8em;bottom:0;top:0;padding:0;text-align:left;transition:left 0.5s}.toolbar.toolbar_visible.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{left:0}.file_viewer.svelte-15t34ei>.file_viewer_window.svelte-15t34ei>.file_viewer_file_preview.toolbar_visible.svelte-15t34ei{left:8em}.toolbar.svelte-15t34ei>div.svelte-15t34ei.svelte-15t34ei{position:absolute;left:0;top:0;bottom:0;right:-30px;overflow-y:scroll;overflow-x:hidden}.toolbar.svelte-15t34ei>div.svelte-15t34ei>div.svelte-15t34ei{position:absolute;left:0;top:0;width:8em;height:auto;text-align:center}.toolbar_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{text-align:left}.toolbar_label.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{text-align:left;padding-left:10px;font-size:0.8em;line-height:0.7em;margin-top:0.5em}.toolbar_statistic.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{text-align:center} +.file_viewer.svelte-in5te4.svelte-in5te4.svelte-in5te4{position:absolute;display:flex;flex-direction:column;top:0;right:0;bottom:0;left:0;overflow:hidden}.file_viewer.svelte-in5te4>.file_viewer_headerbar.svelte-in5te4.svelte-in5te4{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;text-align:left;z-index:10;box-shadow:none;padding:4px}.file_viewer.svelte-in5te4>.file_viewer_headerbar.svelte-in5te4>.svelte-in5te4{flex-grow:0;flex-shrink:0;margin-left:4px;margin-right:4px;display:inline;align-self:center}.file_viewer.svelte-in5te4>.file_viewer_headerbar.svelte-in5te4>.file_viewer_headerbar_title.svelte-in5te4{flex-grow:1;flex-shrink:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-direction:row}.breadcrumb.svelte-in5te4.svelte-in5te4.svelte-in5te4{border-radius:1em;min-width:1em;text-align:center;line-height:1.2em;padding:3px 8px;margin:2px 6px;word-break:break-all}.breadcrumb_button.svelte-in5te4.svelte-in5te4.svelte-in5te4{cursor:pointer;background-color:var(--layer_2_color);transition:0.2s background-color, 0.2s color}.breadcrumb_button.svelte-in5te4.svelte-in5te4.svelte-in5te4:hover,.breadcrumb_button.svelte-in5te4.svelte-in5te4.svelte-in5te4:focus,.breadcrumb_button.svelte-in5te4.svelte-in5te4.svelte-in5te4:active{color:var(--input_text_color);background-color:var(--input_color)}.breadcrumb_last.svelte-in5te4.svelte-in5te4.svelte-in5te4{color:var(--highlight_text_color);background-color:var(--highlight_color)}.button_home.svelte-in5te4.svelte-in5te4.svelte-in5te4::after{content:"pixeldrain"}@media(max-width: 600px){.button_home.svelte-in5te4.svelte-in5te4.svelte-in5te4::after{content:"pd"}}.file_viewer.svelte-in5te4>.list_navigator.svelte-in5te4.svelte-in5te4{flex-grow:0;flex-shrink:0;position:relative;display:none;width:100%;background-color:var(--layer_1_color);text-align:center;line-height:1em;overflow-x:auto;overflow-y:hidden;z-index:50;white-space:nowrap}.file_viewer.svelte-in5te4>.file_viewer_window.svelte-in5te4.svelte-in5te4{flex-grow:1;flex-shrink:1;position:relative;display:inline-block;width:auto;height:auto;margin:0;z-index:9}.file_viewer.svelte-in5te4>.file_viewer_window.svelte-in5te4>.file_viewer_file_preview.svelte-in5te4{position:absolute;left:0;right:0;top:0;bottom:0;display:inline-block;min-height:100px;min-width:100px;text-align:center;vertical-align:middle;transition:left 0.5s;overflow:hidden;box-shadow:inset 2px 2px 8px var(--shadow_color)}.toolbar.svelte-in5te4.svelte-in5te4.svelte-in5te4{position:absolute;width:8em;z-index:49;overflow:hidden;float:left;background-color:var(--layer_1_color);left:-8em;bottom:0;top:0;padding:0;text-align:left;transition:left 0.5s}.toolbar.toolbar_visible.svelte-in5te4.svelte-in5te4.svelte-in5te4{left:0}.file_viewer.svelte-in5te4>.file_viewer_window.svelte-in5te4>.file_viewer_file_preview.toolbar_visible.svelte-in5te4{left:8em}.toolbar.svelte-in5te4>div.svelte-in5te4.svelte-in5te4{position:absolute;left:0;top:0;bottom:0;right:-30px;overflow-y:scroll;overflow-x:hidden}.toolbar.svelte-in5te4>div.svelte-in5te4>div.svelte-in5te4{position:absolute;left:0;top:0;width:8em;height:auto;text-align:center}.toolbar_button.svelte-in5te4.svelte-in5te4.svelte-in5te4{text-align:left}.toolbar_label.svelte-in5te4.svelte-in5te4.svelte-in5te4{text-align:left;padding-left:10px;font-size:0.8em;line-height:0.7em;margin-top:0.5em}.toolbar_statistic.svelte-in5te4.svelte-in5te4.svelte-in5te4{text-align:center} .sharebar.svelte-gnq1s2{position:absolute;width:7em;left:-8em;bottom:0;top:0;overflow-y:scroll;overflow-x:hidden;float:left;background-color:var(--layer_1_color);box-shadow:inset 1px 1px var(--layer_1_shadow) var(--shadow_color);text-align:center;z-index:48;overflow:hidden;transition:left 0.5s}.visible.svelte-gnq1s2{left:8em} +.hidden.svelte-1bqdpyt.svelte-1bqdpyt.svelte-1bqdpyt{visibility:hidden}.container.svelte-1bqdpyt.svelte-1bqdpyt.svelte-1bqdpyt{height:100%;width:100%;padding:0;overflow-y:auto;text-align:center}.width_container.svelte-1bqdpyt.svelte-1bqdpyt.svelte-1bqdpyt{position:relative;display:inline-block;max-width:94%;width:1000px;margin:0;padding:0}.toolbar.svelte-1bqdpyt.svelte-1bqdpyt.svelte-1bqdpyt{position:relative;display:inline-flex;flex-direction:row;width:100%;margin:16px 0 0 0;padding:0;box-sizing:border-box;justify-content:center}.toolbar.svelte-1bqdpyt>.svelte-1bqdpyt.svelte-1bqdpyt{flex:0 0 auto}.toolbar_spacer.svelte-1bqdpyt.svelte-1bqdpyt.svelte-1bqdpyt{flex:1 1 auto}@media(max-width: 800px){.toolbar_delete.svelte-1bqdpyt.svelte-1bqdpyt.svelte-1bqdpyt{flex-direction:column}}.directory.svelte-1bqdpyt.svelte-1bqdpyt.svelte-1bqdpyt{display:table;position:relative;overflow-x:auto;overflow-y:hidden;width:100%;margin:16px 0 16px 0;text-align:left;background-color:var(--layer_2_color);box-shadow:1px 1px var(--layer_2_shadow) var(--shadow_color);box-sizing:border-box;border-collapse:collapse}.directory.svelte-1bqdpyt>.svelte-1bqdpyt.svelte-1bqdpyt{display:table-row}.directory.svelte-1bqdpyt>.svelte-1bqdpyt>.svelte-1bqdpyt{display:table-cell}.directory.svelte-1bqdpyt .node{display:table-row;text-decoration:none;color:var(--text-color);padding:6px;box-sizing:border-box}.directory.svelte-1bqdpyt .node:not(:last-child){border-bottom:1px solid var(--layer_3_color)}.directory.svelte-1bqdpyt .node:hover:not(.node_selected){background-color:var(--input_color_dark);color:var(--input_text_color);text-decoration:none}.directory.svelte-1bqdpyt .node.node_selected{background-color:var(--highlight_color) !important;color:var(--highlight_text_color)}.directory.svelte-1bqdpyt .node.node_delete{background-color:var(--danger_color) !important;color:var(--highlight_text_color)}.directory.svelte-1bqdpyt td{padding:4px;vertical-align:middle}.directory.svelte-1bqdpyt .node_icon{height:32px;width:auto;vertical-align:middle}.directory.svelte-1bqdpyt .node_name{width:100%;overflow:hidden;line-height:1.2em;word-break:break-all}.directory.svelte-1bqdpyt .node_size{min-width:50px;white-space:nowrap} +.hidden.svelte-2zhofy{display:none}.file_input.svelte-2zhofy{display:block;visibility:hidden;width:0;height:0}.file_upload.svelte-2zhofy{display:block;text-align:left;width:100%;margin:6px 0 0 0;padding:0;background-color:var(--layer_2_color);box-shadow:1px 1px var(--layer_2_shadow) var(--shadow_color)}.upload_progress_bar.svelte-2zhofy{width:100%;height:2px}.upload_progress.svelte-2zhofy{background-color:var(--highlight_color);height:100%} +.hidden.svelte-1342op5{display:none}.file_upload.svelte-1342op5{display:inline-block;width:100%;background-color:var(--layer_2_color)}.file_upload.file_upload_active.svelte-1342op5{background-color:var(--highlight_color)} .container.svelte-11r8rw7{height:100%;width:100%;margin:50px 0 0 0;padding:0;overflow-y:auto;text-align:center}.player.svelte-11r8rw7{width:90%} -.hidden.svelte-6g6w4.svelte-6g6w4{visibility:hidden}.container.svelte-6g6w4.svelte-6g6w4{height:100%;width:100%;padding:0;overflow-y:auto;text-align:center}.width_container.svelte-6g6w4.svelte-6g6w4{position:relative;display:inline-block;max-width:94%;width:1000px;margin:0;padding:0}.toolbar.svelte-6g6w4.svelte-6g6w4{position:relative;display:inline-flex;flex-direction:row;width:100%;margin:16px 0 0 0;padding:0;box-sizing:border-box}.toolbar.svelte-6g6w4>.svelte-6g6w4{flex:0 0 auto}.toolbar_spacer.svelte-6g6w4.svelte-6g6w4{flex:1 1 auto}.directory.svelte-6g6w4.svelte-6g6w4{position:relative;overflow-x:auto;overflow-y:hidden;width:100%;margin:16px 0 16px 0;text-align:left;background-color:var(--layer_2_color);box-shadow:1px 1px var(--layer_2_shadow) var(--shadow_color);box-sizing:border-box}.node.svelte-6g6w4.svelte-6g6w4{display:table-row;text-decoration:none;color:var(--text-color);padding:6px;box-sizing:border-box}.node.svelte-6g6w4.svelte-6g6w4:not(:last-child){border-bottom:1px solid var(--layer_3_color)}.node.svelte-6g6w4.svelte-6g6w4:hover:not(.node_selected){background-color:var(--input_color_dark);color:var(--input_text_color);text-decoration:none}.node.node_selected.svelte-6g6w4.svelte-6g6w4{background-color:var(--highlight_color);color:var(--highlight_text_color)}td.svelte-6g6w4.svelte-6g6w4{padding:4px;vertical-align:middle}.node_icon.svelte-6g6w4.svelte-6g6w4{height:32px;width:auto;vertical-align:middle}.node_name.svelte-6g6w4.svelte-6g6w4{width:100%;overflow:hidden;line-height:1.2em}.node_size.svelte-6g6w4.svelte-6g6w4{min-width:50px;white-space:nowrap} .container.svelte-xjzx7h{position:relative;display:block;height:100%;width:100%;text-align:center;overflow:hidden}.container.zoom.svelte-xjzx7h{overflow:auto}.image.svelte-xjzx7h{position:relative;display:block;margin:auto;max-width:100%;max-height:100%;top:50%;cursor:pointer;transform:translateY(-50%);box-shadow:1px 1px var(--layer_3_shadow) var(--shadow_color)}.image.zoom.svelte-xjzx7h{max-width:none;max-height:none;top:0;cursor:move;transform:none} +.container.svelte-1iaovvu{position:relative;display:block;height:100%;width:100%;text-align:center;overflow:hidden}.player.svelte-1iaovvu{position:relative;display:block;margin:auto;max-width:100%;max-height:100%;top:50%;transform:translateY(-50%);box-shadow:1px 1px var(--layer_3_shadow) var(--shadow_color)} .background.svelte-tirhyp{position:fixed;text-align:center;top:0;right:0;bottom:0;left:0;background-color:rgba(0, 0, 0, 0.5)}.window.svelte-tirhyp{position:absolute;z-index:inherit;display:flex;flex-direction:column;background-color:var(--layer_2_color);max-height:100%;max-width:100%;margin:0 auto;top:20%;left:50%;transform:translate(-50%, -20%);padding:0;box-sizing:border-box;text-align:left;box-shadow:var(--shadow_color) 0px 0px 50px}.header.svelte-tirhyp{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;padding:1px}.title.svelte-tirhyp{flex-grow:1;flex-shrink:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.button_close.svelte-tirhyp{flex-grow:0;flex-shrink:0}.body.svelte-tirhyp{flex-grow:1;flex-shrink:1;overflow:auto;padding:10px} svg.svelte-1pco739{color:var(--highlight_color);fill:currentColor} diff --git a/res/static/svelte/filesystem.js b/res/static/svelte/filesystem.js index e6e0c40..d42a621 100644 --- a/res/static/svelte/filesystem.js +++ b/res/static/svelte/filesystem.js @@ -166,6 +166,9 @@ var app = (function () { function children(element) { return Array.from(element.childNodes); } + function set_input_value(input, value) { + input.value = value == null ? '' : value; + } function set_style(node, key, value, important) { node.style.setProperty(key, value, important ? 'important' : ''); } @@ -700,6 +703,20 @@ var app = (function () { /* src/util/Formatting.svelte generated by Svelte v3.29.6 */ + const formatNumber = (amt, precision) => { + if (precision < 3) { + precision = 3; + } + + if (amt >= 1000000) { + return (amt / 1000000).toPrecision(precision) + "M"; + } else if (amt >= 1000) { + return (amt / 1000).toPrecision(precision) + "k"; + } + + return amt; + }; + const formatThousands = x => { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); }; @@ -748,6 +765,57 @@ var app = (function () { return dateStr; }; + /* src/filesystem/FilesystemAPI.svelte generated by Svelte v3.29.6 */ + + const fs_create_directory = (bucket, path, dir_name) => { + if (!path.startsWith("/")) { + path = "/" + path; + } + + let form = new FormData(); + form.append("type", "dir"); + + return fetch(window.api_endpoint + "/filesystem/" + bucket + encodeURIComponent(path + "/" + dir_name), { method: "POST", body: form }).then(resp => { + if (resp.status >= 400) { + throw new Error(resp.text()); + } + }); + }; + + const fs_get_node = (bucket, path) => { + if (!path.startsWith("/")) { + path = "/" + path; + } + + return fetch(window.api_endpoint + "/filesystem/" + bucket + encodeURIComponent(path) + "?stat").then(resp => { + if (resp.status >= 400) { + throw new Error(resp.text()); + } + + return resp.json(); + }); + }; + + const fs_get_file_url = (bucket, path) => { + if (!path.startsWith("/")) { + path = "/" + path; + } + + return window.api_endpoint + "/filesystem/" + bucket + encodeURIComponent(path); + }; + + const fs_delete_node = (bucket, path) => { + if (!path.startsWith("/")) { + path = "/" + path; + } + + return fetch(window.api_endpoint + "/filesystem/" + bucket + encodeURIComponent(path), { method: "DELETE" }).then(resp => { + if (resp.status >= 400) { + throw new Error(resp.text()); + } + }); + }; + /* src/filesystem/Sharebar.svelte generated by Svelte v3.29.6 */ const file = "src/filesystem/Sharebar.svelte"; @@ -1417,314 +1485,85 @@ var app = (function () { } } - /* src/filesystem/viewers/Directory.svelte generated by Svelte v3.29.6 */ - const file$3 = "src/filesystem/viewers/Directory.svelte"; + /* src/filesystem/filemanager/CreateDirectory.svelte generated by Svelte v3.29.6 */ + const file$3 = "src/filesystem/filemanager/CreateDirectory.svelte"; - function get_each_context(ctx, list, i) { - const child_ctx = ctx.slice(); - child_ctx[9] = list[i]; - child_ctx[11] = i; - return child_ctx; - } - - // (80:3) {#each children as child, index} - function create_each_block(ctx) { - let a; + function create_fragment$3(ctx) { + let form; let td0; let img; let img_src_value; let t0; let td1; - let t1_value = /*child*/ ctx[9].name + ""; + let input0; let t1; - let t2; let td2; - let t3_value = formatDataVolume(/*child*/ ctx[9].file_size, 3) + ""; - let t3; - let t4; - let a_href_value; + let input1; let mounted; let dispose; - function click_handler() { - return /*click_handler*/ ctx[6](/*child*/ ctx[9], /*index*/ ctx[11]); - } - const block = { c: function create() { - a = element("a"); + form = element("form"); td0 = element("td"); img = element("img"); t0 = space(); td1 = element("td"); - t1 = text(t1_value); - t2 = space(); - td2 = element("td"); - t3 = text(t3_value); - t4 = space(); - if (img.src !== (img_src_value = /*node_icon*/ ctx[5](/*child*/ ctx[9]))) attr_dev(img, "src", img_src_value); - attr_dev(img, "class", "node_icon svelte-6g6w4"); - attr_dev(img, "alt", "icon"); - add_location(img, file$3, 89, 6, 2581); - attr_dev(td0, "class", "svelte-6g6w4"); - add_location(td0, file$3, 88, 5, 2570); - attr_dev(td1, "class", "node_name svelte-6g6w4"); - add_location(td1, file$3, 91, 5, 2656); - attr_dev(td2, "class", "node_size svelte-6g6w4"); - add_location(td2, file$3, 94, 5, 2714); - attr_dev(a, "href", a_href_value = /*path_base*/ ctx[1] + /*child*/ ctx[9].path); - attr_dev(a, "class", "node svelte-6g6w4"); - toggle_class(a, "node_selected", /*child*/ ctx[9].selected); - add_location(a, file$3, 80, 4, 2296); - }, - m: function mount(target, anchor) { - insert_dev(target, a, anchor); - append_dev(a, td0); - append_dev(td0, img); - append_dev(a, t0); - append_dev(a, td1); - append_dev(td1, t1); - append_dev(a, t2); - append_dev(a, td2); - append_dev(td2, t3); - append_dev(a, t4); - - if (!mounted) { - dispose = listen_dev(a, "click", prevent_default(click_handler), false, true, false); - mounted = true; - } - }, - p: function update(new_ctx, dirty) { - ctx = new_ctx; - - if (dirty & /*children*/ 4 && img.src !== (img_src_value = /*node_icon*/ ctx[5](/*child*/ ctx[9]))) { - attr_dev(img, "src", img_src_value); - } - - if (dirty & /*children*/ 4 && t1_value !== (t1_value = /*child*/ ctx[9].name + "")) set_data_dev(t1, t1_value); - if (dirty & /*children*/ 4 && t3_value !== (t3_value = formatDataVolume(/*child*/ ctx[9].file_size, 3) + "")) set_data_dev(t3, t3_value); - - if (dirty & /*path_base, children*/ 6 && a_href_value !== (a_href_value = /*path_base*/ ctx[1] + /*child*/ ctx[9].path)) { - attr_dev(a, "href", a_href_value); - } - - if (dirty & /*children*/ 4) { - toggle_class(a, "node_selected", /*child*/ ctx[9].selected); - } - }, - d: function destroy(detaching) { - if (detaching) detach_dev(a); - mounted = false; - dispose(); - } - }; - - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_each_block.name, - type: "each", - source: "(80:3) {#each children as child, index}", - ctx - }); - - return block; - } - - function create_fragment$3(ctx) { - let div3; - let div2; - let div1; - let button0; - let i0; - let t1; - let div0; - let t2; - let button1; - let i1; - let t4; - let button2; - let i2; - let t6; - let button3; - let i3; - let t8; - let br; - let t9; - let table; - let tr; - let td0; - let t10; - let td1; - let t12; - let td2; - let t14; - let mounted; - let dispose; - let each_value = /*children*/ ctx[2]; - validate_each_argument(each_value); - let each_blocks = []; - - for (let i = 0; i < each_value.length; i += 1) { - each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); - } - - const block = { - c: function create() { - div3 = element("div"); - div2 = element("div"); - div1 = element("div"); - button0 = element("button"); - i0 = element("i"); - i0.textContent = "arrow_back"; + input0 = element("input"); t1 = space(); - div0 = element("div"); - t2 = space(); - button1 = element("button"); - i1 = element("i"); - i1.textContent = "cloud_upload"; - t4 = space(); - button2 = element("button"); - i2 = element("i"); - i2.textContent = "create_new_folder"; - t6 = space(); - button3 = element("button"); - i3 = element("i"); - i3.textContent = "delete"; - t8 = space(); - br = element("br"); - t9 = space(); - table = element("table"); - tr = element("tr"); - td0 = element("td"); - t10 = space(); - td1 = element("td"); - td1.textContent = "name"; - t12 = space(); td2 = element("td"); - td2.textContent = "size"; - t14 = space(); - - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } - - attr_dev(i0, "class", "icon"); - add_location(i0, file$3, 64, 75, 1773); - attr_dev(button0, "class", "svelte-6g6w4"); - toggle_class(button0, "hidden", /*node*/ ctx[0].parents.length === 0); - add_location(button0, file$3, 64, 3, 1701); - attr_dev(div0, "class", "toolbar_spacer svelte-6g6w4"); - add_location(div0, file$3, 66, 3, 1834); - attr_dev(i1, "class", "icon"); - add_location(i1, file$3, 67, 34, 1903); - attr_dev(button1, "class", "svelte-6g6w4"); - add_location(button1, file$3, 67, 3, 1872); - attr_dev(i2, "class", "icon"); - add_location(i2, file$3, 68, 34, 1979); - attr_dev(button2, "class", "svelte-6g6w4"); - add_location(button2, file$3, 68, 3, 1948); - attr_dev(i3, "class", "icon"); - add_location(i3, file$3, 69, 34, 2060); - attr_dev(button3, "class", "svelte-6g6w4"); - add_location(button3, file$3, 69, 3, 2029); - attr_dev(div1, "class", "toolbar svelte-6g6w4"); - add_location(div1, file$3, 62, 2, 1632); - add_location(br, file$3, 71, 2, 2107); - attr_dev(td0, "class", "svelte-6g6w4"); - add_location(td0, file$3, 75, 4, 2201); - attr_dev(td1, "class", "svelte-6g6w4"); - add_location(td1, file$3, 76, 4, 2215); - attr_dev(td2, "class", "svelte-6g6w4"); - add_location(td2, file$3, 77, 4, 2233); - add_location(tr, file$3, 73, 3, 2144); - attr_dev(table, "class", "directory svelte-6g6w4"); - add_location(table, file$3, 72, 2, 2115); - attr_dev(div2, "class", "width_container svelte-6g6w4"); - add_location(div2, file$3, 61, 1, 1600); - attr_dev(div3, "class", "container svelte-6g6w4"); - add_location(div3, file$3, 60, 0, 1575); + input1 = element("input"); + if (img.src !== (img_src_value = "/res/img/mime/folder.png")) attr_dev(img, "src", img_src_value); + attr_dev(img, "class", "node_icon"); + attr_dev(img, "alt", "icon"); + add_location(img, file$3, 29, 5, 674); + add_location(td0, file$3, 29, 1, 670); + attr_dev(input0, "type", "text"); + set_style(input0, "width", "100%"); + add_location(input0, file$3, 30, 5, 751); + add_location(td1, file$3, 30, 1, 747); + attr_dev(input1, "type", "submit"); + input1.value = "create"; + add_location(input1, file$3, 31, 5, 856); + add_location(td2, file$3, 31, 1, 852); + attr_dev(form, "class", "node"); + add_location(form, file$3, 28, 0, 611); }, l: function claim(nodes) { throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); }, m: function mount(target, anchor) { - insert_dev(target, div3, anchor); - append_dev(div3, div2); - append_dev(div2, div1); - append_dev(div1, button0); - append_dev(button0, i0); - append_dev(div1, t1); - append_dev(div1, div0); - append_dev(div1, t2); - append_dev(div1, button1); - append_dev(button1, i1); - append_dev(div1, t4); - append_dev(div1, button2); - append_dev(button2, i2); - append_dev(div1, t6); - append_dev(div1, button3); - append_dev(button3, i3); - append_dev(div2, t8); - append_dev(div2, br); - append_dev(div2, t9); - append_dev(div2, table); - append_dev(table, tr); - append_dev(tr, td0); - append_dev(tr, t10); - append_dev(tr, td1); - append_dev(tr, t12); - append_dev(tr, td2); - append_dev(table, t14); - - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].m(table, null); - } + insert_dev(target, form, anchor); + append_dev(form, td0); + append_dev(td0, img); + append_dev(form, t0); + append_dev(form, td1); + append_dev(td1, input0); + /*input0_binding*/ ctx[4](input0); + set_input_value(input0, /*create_dir_name*/ ctx[1]); + append_dev(form, t1); + append_dev(form, td2); + append_dev(td2, input1); if (!mounted) { dispose = [ - listen_dev(button0, "click", /*navigate_up*/ ctx[4], false, false, false), - listen_dev(button1, "click", /*navigate_up*/ ctx[4], false, false, false), - listen_dev(button2, "click", /*navigate_up*/ ctx[4], false, false, false), - listen_dev(button3, "click", /*navigate_up*/ ctx[4], false, false, false) + listen_dev(input0, "input", /*input0_input_handler*/ ctx[5]), + listen_dev(form, "submit", prevent_default(/*create_dir*/ ctx[2]), false, true, false) ]; mounted = true; } }, p: function update(ctx, [dirty]) { - if (dirty & /*node*/ 1) { - toggle_class(button0, "hidden", /*node*/ ctx[0].parents.length === 0); - } - - if (dirty & /*path_base, children, node_click, formatDataVolume, node_icon*/ 46) { - each_value = /*children*/ ctx[2]; - validate_each_argument(each_value); - let i; - - for (i = 0; i < each_value.length; i += 1) { - const child_ctx = get_each_context(ctx, each_value, i); - - if (each_blocks[i]) { - each_blocks[i].p(child_ctx, dirty); - } else { - each_blocks[i] = create_each_block(child_ctx); - each_blocks[i].c(); - each_blocks[i].m(table, null); - } - } - - for (; i < each_blocks.length; i += 1) { - each_blocks[i].d(1); - } - - each_blocks.length = each_value.length; + if (dirty & /*create_dir_name*/ 2 && input0.value !== /*create_dir_name*/ ctx[1]) { + set_input_value(input0, /*create_dir_name*/ ctx[1]); } }, i: noop, o: noop, d: function destroy(detaching) { - if (detaching) detach_dev(div3); - destroy_each(each_blocks, detaching); + if (detaching) detach_dev(form); + /*input0_binding*/ ctx[4](null); mounted = false; run_all(dispose); } @@ -1743,27 +1582,1294 @@ var app = (function () { function instance$3($$self, $$props, $$invalidate) { let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("Directory", slots, []); + validate_slots("CreateDirectory", slots, []); let dispatch = createEventDispatcher(); - let { node } = $$props; - let { path_base } = $$props; - let mode = "viewing"; + let { state } = $$props; + let name_input; + let create_dir_name = ""; - const node_click = (node, index) => { + let create_dir = () => { + dispatch("loading", true); + let form = new FormData(); + form.append("type", "dir"); + + fs_create_directory(state.bucket.id, state.base.path, create_dir_name).then(resp => { + $$invalidate(1, create_dir_name = ""); // Clear input field + }).catch(err => { + alert("Error: " + err); + }).finally(() => { + dispatch("done"); + }); + }; + + onMount(() => { + name_input.focus(); + }); + + const writable_props = ["state"]; + + Object.keys($$props).forEach(key => { + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + }); + + function input0_binding($$value) { + binding_callbacks[$$value ? "unshift" : "push"](() => { + name_input = $$value; + $$invalidate(0, name_input); + }); + } + + function input0_input_handler() { + create_dir_name = this.value; + $$invalidate(1, create_dir_name); + } + + $$self.$$set = $$props => { + if ("state" in $$props) $$invalidate(3, state = $$props.state); + }; + + $$self.$capture_state = () => ({ + onMount, + createEventDispatcher, + fs_create_directory, + dispatch, + state, + name_input, + create_dir_name, + create_dir + }); + + $$self.$inject_state = $$props => { + if ("dispatch" in $$props) dispatch = $$props.dispatch; + if ("state" in $$props) $$invalidate(3, state = $$props.state); + if ("name_input" in $$props) $$invalidate(0, name_input = $$props.name_input); + if ("create_dir_name" in $$props) $$invalidate(1, create_dir_name = $$props.create_dir_name); + if ("create_dir" in $$props) $$invalidate(2, create_dir = $$props.create_dir); + }; + + if ($$props && "$$inject" in $$props) { + $$self.$inject_state($$props.$$inject); + } + + return [ + name_input, + create_dir_name, + create_dir, + state, + input0_binding, + input0_input_handler + ]; + } + + class CreateDirectory extends SvelteComponentDev { + constructor(options) { + super(options); + init(this, options, instance$3, create_fragment$3, safe_not_equal, { state: 3 }); + + dispatch_dev("SvelteRegisterComponent", { + component: this, + tagName: "CreateDirectory", + options, + id: create_fragment$3.name + }); + + const { ctx } = this.$$; + const props = options.props || {}; + + if (/*state*/ ctx[3] === undefined && !("state" in props)) { + console.warn(" was created without expected prop 'state'"); + } + } + + get state() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set state(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } + } + + /* src/filesystem/filemanager/FileUploader.svelte generated by Svelte v3.29.6 */ + + const { console: console_1 } = globals; + const file$4 = "src/filesystem/filemanager/FileUploader.svelte"; + + function get_each_context(ctx, list, i) { + const child_ctx = ctx.slice(); + child_ctx[18] = list[i]; + return child_ctx; + } + + // (172:1) {#each upload_jobs as c} + function create_each_block(ctx) { + let div2; + let t0; + let t1_value = /*c*/ ctx[18].file.name + ""; + let t1; + let t2; + let br; + let t3; + let div1; + let div0; + let t4; + + const block = { + c: function create() { + div2 = element("div"); + t0 = text(" "); + t1 = text(t1_value); + t2 = text(" "); + br = element("br"); + t3 = space(); + div1 = element("div"); + div0 = element("div"); + t4 = space(); + add_location(br, file$4, 173, 28, 3977); + attr_dev(div0, "class", "upload_progress svelte-2zhofy"); + set_style(div0, "width", /*c*/ ctx[18].progress * 100 + "%"); + add_location(div0, file$4, 175, 4, 4024); + attr_dev(div1, "class", "upload_progress_bar svelte-2zhofy"); + add_location(div1, file$4, 174, 3, 3986); + attr_dev(div2, "class", "file_upload svelte-2zhofy"); + add_location(div2, file$4, 172, 2, 3923); + }, + m: function mount(target, anchor) { + insert_dev(target, div2, anchor); + append_dev(div2, t0); + append_dev(div2, t1); + append_dev(div2, t2); + append_dev(div2, br); + append_dev(div2, t3); + append_dev(div2, div1); + append_dev(div1, div0); + append_dev(div2, t4); + }, + p: function update(ctx, dirty) { + if (dirty & /*upload_jobs*/ 1 && t1_value !== (t1_value = /*c*/ ctx[18].file.name + "")) set_data_dev(t1, t1_value); + + if (dirty & /*upload_jobs*/ 1) { + set_style(div0, "width", /*c*/ ctx[18].progress * 100 + "%"); + } + }, + d: function destroy(detaching) { + if (detaching) detach_dev(div2); + } + }; + + dispatch_dev("SvelteRegisterBlock", { + block, + id: create_each_block.name, + type: "each", + source: "(172:1) {#each upload_jobs as c}", + ctx + }); + + return block; + } + + function create_fragment$4(ctx) { + let t0; + let div1; + let input; + let t1; + let div0; + let t3; + let mounted; + let dispose; + let each_value = /*upload_jobs*/ ctx[0]; + validate_each_argument(each_value); + let each_blocks = []; + + for (let i = 0; i < each_value.length; i += 1) { + each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); + } + + const block = { + c: function create() { + t0 = space(); + div1 = element("div"); + input = element("input"); + t1 = space(); + div0 = element("div"); + div0.textContent = "Drop files here to upload them"; + t3 = space(); + + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].c(); + } + + attr_dev(input, "class", "file_input svelte-2zhofy"); + attr_dev(input, "type", "file"); + input.multiple = "multiple"; + add_location(input, file$4, 166, 1, 3696); + attr_dev(div0, "class", "highlight_green svelte-2zhofy"); + toggle_class(div0, "hidden", /*hidden*/ ctx[2]); + add_location(div0, file$4, 167, 1, 3810); + add_location(div1, file$4, 165, 0, 3689); + }, + l: function claim(nodes) { + throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); + }, + m: function mount(target, anchor) { + insert_dev(target, t0, anchor); + insert_dev(target, div1, anchor); + append_dev(div1, input); + /*input_binding*/ ctx[12](input); + append_dev(div1, t1); + append_dev(div1, div0); + append_dev(div1, t3); + + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].m(div1, null); + } + + if (!mounted) { + dispose = [ + listen_dev(document.body, "dragover", stop_propagation(prevent_default(/*dragover*/ ctx[4])), false, true, true), + listen_dev(document.body, "dragleave", stop_propagation(prevent_default(/*dragleave*/ ctx[5])), false, true, true), + listen_dev(document.body, "drop", stop_propagation(prevent_default(/*drop*/ ctx[6])), false, true, true), + listen_dev(document.body, "paste", /*paste*/ ctx[7], false, false, false), + listen_dev(input, "change", /*file_input_change*/ ctx[3], false, false, false) + ]; + + mounted = true; + } + }, + p: function update(ctx, [dirty]) { + if (dirty & /*hidden*/ 4) { + toggle_class(div0, "hidden", /*hidden*/ ctx[2]); + } + + if (dirty & /*upload_jobs*/ 1) { + each_value = /*upload_jobs*/ ctx[0]; + validate_each_argument(each_value); + let i; + + for (i = 0; i < each_value.length; i += 1) { + const child_ctx = get_each_context(ctx, each_value, i); + + if (each_blocks[i]) { + each_blocks[i].p(child_ctx, dirty); + } else { + each_blocks[i] = create_each_block(child_ctx); + each_blocks[i].c(); + each_blocks[i].m(div1, null); + } + } + + for (; i < each_blocks.length; i += 1) { + each_blocks[i].d(1); + } + + each_blocks.length = each_value.length; + } + }, + i: noop, + o: noop, + d: function destroy(detaching) { + if (detaching) detach_dev(t0); + if (detaching) detach_dev(div1); + /*input_binding*/ ctx[12](null); + destroy_each(each_blocks, detaching); + mounted = false; + run_all(dispose); + } + }; + + dispatch_dev("SvelteRegisterBlock", { + block, + id: create_fragment$4.name, + type: "component", + source: "", + ctx + }); + + return block; + } + + function instance$4($$self, $$props, $$invalidate) { + let { $$slots: slots = {}, $$scope } = $$props; + validate_slots("FileUploader", slots, []); + let dispatch = createEventDispatcher(); + let { bucket_id } = $$props; + let { target_dir } = $$props; + let upload_jobs = []; + let upload_threads = 0; + let max_upload_threads = 4; + + const upload = file_list => { + for (let i = 0; i < file_list.length; i++) { + upload_jobs.push({ + file: file_list[i], + progress: 0, + target_dir: target_dir.valueOf(), + uploading: false, + finished: false, + tries: 0 + }); + } + + // This updates the UI + $$invalidate(0, upload_jobs); + + while (upload_threads <= max_upload_threads) { + upload_threads++; + setTimeout(upload_file, 1); + } + }; + + const uploads_finished = () => { + dispatch("finished"); + }; + + const upload_file = () => { + let job = null; + + for (let i = 0; i < upload_jobs.length; i++) { + // If a file is done we remove it from the array + if (upload_jobs[i].progress >= 1) { + upload_jobs.splice(i, 1); + continue; + } + + if (upload_jobs[i].uploading === false && upload_jobs[i].finished === false) { + job = upload_jobs[i]; + job.uploading = true; + $$invalidate(0, upload_jobs); + break; + } + } + + if (job === null) { + upload_threads--; + + if (upload_threads === 0) { + uploads_finished(); + } + + return; + } + + console.log(job); + let form = new FormData(); + form.append("type", "file"); + form.append("file", job.file); + let xhr = new XMLHttpRequest(); + xhr.open("POST", "/api/filesystem/" + bucket_id + encodeURIComponent(job.target_dir + "/" + job.file.name), true); + xhr.timeout = 21600000; // 6 hours, to account for slow connections + + // Report progress updates back to the caller + xhr.upload.addEventListener("progress", evt => { + if (evt.lengthComputable) { + job.progress = evt.loaded / evt.total; + $$invalidate(0, upload_jobs); + } + }); + + xhr.onreadystatechange = () => { + // readystate 4 means the upload is done + if (xhr.readyState !== 4) { + return; + } + + if (xhr.status >= 100 && xhr.status < 400) { + // Request is a success + // Finish the upload job + job.uploading = false; + + job.finished = true; + upload_file(); + } else if (xhr.status >= 400) { + // Request failed + console.log("Upload error. status: " + xhr.status + " response: " + xhr.response); + + let resp = JSON.parse(xhr.response); + + if (job.tries === 3) { + // Upload failed + return; + } else { + // Try again + job.tries++; + + job.uploading = false; + job.finished = false; + } + + // Sleep the upload thread for 5 seconds + setTimeout(upload_file, 5000); + } else { + // Request did not arrive + if (job.tries === 3) { + // Upload failed + alert("upload failed " + xhr.responseText); + + job.uploading = false; + job.finished = false; + } else { + // Try again + job.tries++; + } + + // Sleep the upload thread for 5 seconds + setTimeout(upload_file, 5000); + } + + $$invalidate(0, upload_jobs); + }; + + xhr.send(form); + }; + + // File input dialog handling + let file_input; + + const picker = () => { + file_input.click(); + }; + + const file_input_change = e => { + upload(e.target.files); + $$invalidate(1, file_input.nodeValue = "", file_input); + }; + + // Drag and drop upload + let hidden = true; + + const dragover = e => { + $$invalidate(2, hidden = false); + }; + + const dragleave = e => { + $$invalidate(2, hidden = true); + }; + + const drop = e => { + $$invalidate(2, hidden = true); + upload(e.dataTransfer.files); + }; + + const paste = e => { + if (e.clipboardData.files[0]) { + e.preventDefault(); + e.stopPropagation(); + console.log(e.clipboardData.files[0].getAsFile()); + } + }; + + const writable_props = ["bucket_id", "target_dir"]; + + Object.keys($$props).forEach(key => { + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console_1.warn(` was created with unknown prop '${key}'`); + }); + + function input_binding($$value) { + binding_callbacks[$$value ? "unshift" : "push"](() => { + file_input = $$value; + $$invalidate(1, file_input); + }); + } + + $$self.$$set = $$props => { + if ("bucket_id" in $$props) $$invalidate(8, bucket_id = $$props.bucket_id); + if ("target_dir" in $$props) $$invalidate(9, target_dir = $$props.target_dir); + }; + + $$self.$capture_state = () => ({ + createEventDispatcher, + dispatch, + bucket_id, + target_dir, + upload_jobs, + upload_threads, + max_upload_threads, + upload, + uploads_finished, + upload_file, + file_input, + picker, + file_input_change, + hidden, + dragover, + dragleave, + drop, + paste + }); + + $$self.$inject_state = $$props => { + if ("dispatch" in $$props) dispatch = $$props.dispatch; + if ("bucket_id" in $$props) $$invalidate(8, bucket_id = $$props.bucket_id); + if ("target_dir" in $$props) $$invalidate(9, target_dir = $$props.target_dir); + if ("upload_jobs" in $$props) $$invalidate(0, upload_jobs = $$props.upload_jobs); + if ("upload_threads" in $$props) upload_threads = $$props.upload_threads; + if ("max_upload_threads" in $$props) max_upload_threads = $$props.max_upload_threads; + if ("file_input" in $$props) $$invalidate(1, file_input = $$props.file_input); + if ("hidden" in $$props) $$invalidate(2, hidden = $$props.hidden); + }; + + if ($$props && "$$inject" in $$props) { + $$self.$inject_state($$props.$$inject); + } + + return [ + upload_jobs, + file_input, + hidden, + file_input_change, + dragover, + dragleave, + drop, + paste, + bucket_id, + target_dir, + upload, + picker, + input_binding + ]; + } + + class FileUploader extends SvelteComponentDev { + constructor(options) { + super(options); + + init(this, options, instance$4, create_fragment$4, safe_not_equal, { + bucket_id: 8, + target_dir: 9, + upload: 10, + picker: 11 + }); + + dispatch_dev("SvelteRegisterComponent", { + component: this, + tagName: "FileUploader", + options, + id: create_fragment$4.name + }); + + const { ctx } = this.$$; + const props = options.props || {}; + + if (/*bucket_id*/ ctx[8] === undefined && !("bucket_id" in props)) { + console_1.warn(" was created without expected prop 'bucket_id'"); + } + + if (/*target_dir*/ ctx[9] === undefined && !("target_dir" in props)) { + console_1.warn(" was created without expected prop 'target_dir'"); + } + } + + get bucket_id() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set bucket_id(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } + + get target_dir() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set target_dir(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } + + get upload() { + return this.$$.ctx[10]; + } + + set upload(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } + + get picker() { + return this.$$.ctx[11]; + } + + set picker(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } + } + + /* src/filesystem/filemanager/FileManager.svelte generated by Svelte v3.29.6 */ + + const { console: console_1$1 } = globals; + const file$5 = "src/filesystem/filemanager/FileManager.svelte"; + + function get_each_context$1(ctx, list, i) { + const child_ctx = ctx.slice(); + child_ctx[16] = list[i]; + child_ctx[18] = i; + return child_ctx; + } + + // (114:3) {#if state.bucket.permissions.update} + function create_if_block_2(ctx) { + let button0; + let i0; + let t1; + let button1; + let i1; + let t3; + let button2; + let i2; + let mounted; + let dispose; + + const block = { + c: function create() { + button0 = element("button"); + i0 = element("i"); + i0.textContent = "cloud_upload"; + t1 = space(); + button1 = element("button"); + i1 = element("i"); + i1.textContent = "create_new_folder"; + t3 = space(); + button2 = element("button"); + i2 = element("i"); + i2.textContent = "delete"; + attr_dev(i0, "class", "icon"); + add_location(i0, file$5, 114, 39, 3192); + attr_dev(button0, "class", "svelte-1bqdpyt"); + add_location(button0, file$5, 114, 4, 3157); + attr_dev(i1, "class", "icon"); + add_location(i1, file$5, 115, 51, 3285); + attr_dev(button1, "class", "svelte-1bqdpyt"); + add_location(button1, file$5, 115, 4, 3238); + attr_dev(i2, "class", "icon"); + add_location(i2, file$5, 120, 5, 3425); + attr_dev(button2, "class", "svelte-1bqdpyt"); + toggle_class(button2, "button_red", /*mode*/ ctx[1] === "deleting"); + add_location(button2, file$5, 117, 4, 3337); + }, + m: function mount(target, anchor) { + insert_dev(target, button0, anchor); + append_dev(button0, i0); + insert_dev(target, t1, anchor); + insert_dev(target, button1, anchor); + append_dev(button1, i1); + insert_dev(target, t3, anchor); + insert_dev(target, button2, anchor); + append_dev(button2, i2); + + if (!mounted) { + dispose = [ + listen_dev( + button0, + "click", + function () { + if (is_function(/*uploader*/ ctx[3].picker)) /*uploader*/ ctx[3].picker.apply(this, arguments); + }, + false, + false, + false + ), + listen_dev(button1, "click", /*click_handler*/ ctx[10], false, false, false), + listen_dev(button2, "click", /*delete_toggle*/ ctx[9], false, false, false) + ]; + + mounted = true; + } + }, + p: function update(new_ctx, dirty) { + ctx = new_ctx; + + if (dirty & /*mode*/ 2) { + toggle_class(button2, "button_red", /*mode*/ ctx[1] === "deleting"); + } + }, + d: function destroy(detaching) { + if (detaching) detach_dev(button0); + if (detaching) detach_dev(t1); + if (detaching) detach_dev(button1); + if (detaching) detach_dev(t3); + if (detaching) detach_dev(button2); + mounted = false; + run_all(dispose); + } + }; + + dispatch_dev("SvelteRegisterBlock", { + block, + id: create_if_block_2.name, + type: "if", + source: "(114:3) {#if state.bucket.permissions.update}", + ctx + }); + + return block; + } + + // (127:2) {#if mode === "deleting"} + function create_if_block_1(ctx) { + let div2; + let div0; + let t1; + let div1; + let button0; + let i0; + let t3; + let t4; + let button1; + let i1; + let t6; + let t7; + let br; + let mounted; + let dispose; + + const block = { + c: function create() { + div2 = element("div"); + div0 = element("div"); + div0.textContent = "Deleting files. Click a file or directory to select it for deletion.\n\t\t\t\t\tClick confirm to delete the files."; + t1 = space(); + div1 = element("div"); + button0 = element("button"); + i0 = element("i"); + i0.textContent = "undo"; + t3 = text("\n\t\t\t\t\t\tCancel"); + t4 = space(); + button1 = element("button"); + i1 = element("i"); + i1.textContent = "delete"; + t6 = text("\n\t\t\t\t\t\tDelete selected"); + t7 = space(); + br = element("br"); + set_style(div0, "flex", "1 1 auto"); + set_style(div0, "justify-self", "center"); + attr_dev(div0, "class", "svelte-1bqdpyt"); + add_location(div0, file$5, 128, 4, 3579); + attr_dev(i0, "class", "icon"); + add_location(i0, file$5, 134, 6, 3880); + add_location(button0, file$5, 133, 5, 3840); + attr_dev(i1, "class", "icon"); + add_location(i1, file$5, 138, 6, 3995); + attr_dev(button1, "class", "button_red"); + add_location(button1, file$5, 137, 5, 3938); + set_style(div1, "display", "flex"); + set_style(div1, "flex-direction", "row"); + set_style(div1, "justify-content", "center"); + attr_dev(div1, "class", "svelte-1bqdpyt"); + add_location(div1, file$5, 132, 4, 3760); + attr_dev(div2, "class", "toolbar toolbar_delete highlight_red svelte-1bqdpyt"); + add_location(div2, file$5, 127, 3, 3524); + add_location(br, file$5, 143, 3, 4083); + }, + m: function mount(target, anchor) { + insert_dev(target, div2, anchor); + append_dev(div2, div0); + append_dev(div2, t1); + append_dev(div2, div1); + append_dev(div1, button0); + append_dev(button0, i0); + append_dev(button0, t3); + append_dev(div1, t4); + append_dev(div1, button1); + append_dev(button1, i1); + append_dev(button1, t6); + insert_dev(target, t7, anchor); + insert_dev(target, br, anchor); + + if (!mounted) { + dispose = [ + listen_dev(button0, "click", /*delete_toggle*/ ctx[9], false, false, false), + listen_dev(button1, "click", /*delete_node*/ ctx[8], false, false, false) + ]; + + mounted = true; + } + }, + p: noop, + d: function destroy(detaching) { + if (detaching) detach_dev(div2); + if (detaching) detach_dev(t7); + if (detaching) detach_dev(br); + mounted = false; + run_all(dispose); + } + }; + + dispatch_dev("SvelteRegisterBlock", { + block, + id: create_if_block_1.name, + type: "if", + source: "(127:2) {#if mode === \\\"deleting\\\"}", + ctx + }); + + return block; + } + + // (156:3) {#if creating_dir} + function create_if_block$1(ctx) { + let createdirectory; + let current; + + createdirectory = new CreateDirectory({ + props: { state: /*state*/ ctx[0] }, + $$inline: true + }); + + createdirectory.$on("done", /*done_handler*/ ctx[12]); + createdirectory.$on("loading", /*loading_handler*/ ctx[13]); + + const block = { + c: function create() { + create_component(createdirectory.$$.fragment); + }, + m: function mount(target, anchor) { + mount_component(createdirectory, target, anchor); + current = true; + }, + p: function update(ctx, dirty) { + const createdirectory_changes = {}; + if (dirty & /*state*/ 1) createdirectory_changes.state = /*state*/ ctx[0]; + createdirectory.$set(createdirectory_changes); + }, + i: function intro(local) { + if (current) return; + transition_in(createdirectory.$$.fragment, local); + current = true; + }, + o: function outro(local) { + transition_out(createdirectory.$$.fragment, local); + current = false; + }, + d: function destroy(detaching) { + destroy_component(createdirectory, detaching); + } + }; + + dispatch_dev("SvelteRegisterBlock", { + block, + id: create_if_block$1.name, + type: "if", + source: "(156:3) {#if creating_dir}", + ctx + }); + + return block; + } + + // (160:3) {#each state.base.children as child, index} + function create_each_block$1(ctx) { + let a; + let td0; + let img; + let img_src_value; + let t0; + let td1; + let t1_value = /*child*/ ctx[16].name + ""; + let t1; + let t2; + let td2; + let t3_value = formatDataVolume(/*child*/ ctx[16].file_size, 3) + ""; + let t3; + let t4; + let a_href_value; + let mounted; + let dispose; + + function click_handler_1() { + return /*click_handler_1*/ ctx[14](/*index*/ ctx[18]); + } + + const block = { + c: function create() { + a = element("a"); + td0 = element("td"); + img = element("img"); + t0 = space(); + td1 = element("td"); + t1 = text(t1_value); + t2 = space(); + td2 = element("td"); + t3 = text(t3_value); + t4 = space(); + if (img.src !== (img_src_value = /*node_icon*/ ctx[7](/*child*/ ctx[16]))) attr_dev(img, "src", img_src_value); + attr_dev(img, "class", "node_icon"); + attr_dev(img, "alt", "icon"); + add_location(img, file$5, 167, 6, 4742); + attr_dev(td0, "class", "svelte-1bqdpyt"); + add_location(td0, file$5, 166, 5, 4731); + attr_dev(td1, "class", "node_name svelte-1bqdpyt"); + add_location(td1, file$5, 169, 5, 4817); + attr_dev(td2, "class", "node_size svelte-1bqdpyt"); + add_location(td2, file$5, 172, 5, 4875); + attr_dev(a, "href", a_href_value = /*state*/ ctx[0].path_root + /*child*/ ctx[16].path); + attr_dev(a, "class", "node svelte-1bqdpyt"); + toggle_class(a, "node_selected", /*child*/ ctx[16].fm_selected); + toggle_class(a, "node_delete", /*child*/ ctx[16].fm_delete); + add_location(a, file$5, 160, 4, 4522); + }, + m: function mount(target, anchor) { + insert_dev(target, a, anchor); + append_dev(a, td0); + append_dev(td0, img); + append_dev(a, t0); + append_dev(a, td1); + append_dev(td1, t1); + append_dev(a, t2); + append_dev(a, td2); + append_dev(td2, t3); + append_dev(a, t4); + + if (!mounted) { + dispose = listen_dev(a, "click", prevent_default(click_handler_1), false, true, false); + mounted = true; + } + }, + p: function update(new_ctx, dirty) { + ctx = new_ctx; + + if (dirty & /*state*/ 1 && img.src !== (img_src_value = /*node_icon*/ ctx[7](/*child*/ ctx[16]))) { + attr_dev(img, "src", img_src_value); + } + + if (dirty & /*state*/ 1 && t1_value !== (t1_value = /*child*/ ctx[16].name + "")) set_data_dev(t1, t1_value); + if (dirty & /*state*/ 1 && t3_value !== (t3_value = formatDataVolume(/*child*/ ctx[16].file_size, 3) + "")) set_data_dev(t3, t3_value); + + if (dirty & /*state*/ 1 && a_href_value !== (a_href_value = /*state*/ ctx[0].path_root + /*child*/ ctx[16].path)) { + attr_dev(a, "href", a_href_value); + } + + if (dirty & /*state*/ 1) { + toggle_class(a, "node_selected", /*child*/ ctx[16].fm_selected); + } + + if (dirty & /*state*/ 1) { + toggle_class(a, "node_delete", /*child*/ ctx[16].fm_delete); + } + }, + d: function destroy(detaching) { + if (detaching) detach_dev(a); + mounted = false; + dispose(); + } + }; + + dispatch_dev("SvelteRegisterBlock", { + block, + id: create_each_block$1.name, + type: "each", + source: "(160:3) {#each state.base.children as child, index}", + ctx + }); + + return block; + } + + function create_fragment$5(ctx) { + let div4; + let div3; + let div1; + let button; + let i; + let t1; + let div0; + let t2; + let t3; + let br; + let t4; + let t5; + let fileuploader; + let t6; + let div2; + let tr; + let td0; + let t7; + let td1; + let t9; + let td2; + let t11; + let t12; + let current; + let mounted; + let dispose; + let if_block0 = /*state*/ ctx[0].bucket.permissions.update && create_if_block_2(ctx); + let if_block1 = /*mode*/ ctx[1] === "deleting" && create_if_block_1(ctx); + + let fileuploader_props = { + bucket_id: /*state*/ ctx[0].bucket.id, + target_dir: /*state*/ ctx[0].base.path + }; + + fileuploader = new FileUploader({ + props: fileuploader_props, + $$inline: true + }); + + /*fileuploader_binding*/ ctx[11](fileuploader); + fileuploader.$on("finished", /*reload*/ ctx[6]); + let if_block2 = /*creating_dir*/ ctx[2] && create_if_block$1(ctx); + let each_value = /*state*/ ctx[0].base.children; + validate_each_argument(each_value); + let each_blocks = []; + + for (let i = 0; i < each_value.length; i += 1) { + each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i)); + } + + const block = { + c: function create() { + div4 = element("div"); + div3 = element("div"); + div1 = element("div"); + button = element("button"); + i = element("i"); + i.textContent = "arrow_back"; + t1 = space(); + div0 = element("div"); + t2 = space(); + if (if_block0) if_block0.c(); + t3 = space(); + br = element("br"); + t4 = space(); + if (if_block1) if_block1.c(); + t5 = space(); + create_component(fileuploader.$$.fragment); + t6 = space(); + div2 = element("div"); + tr = element("tr"); + td0 = element("td"); + t7 = space(); + td1 = element("td"); + td1.textContent = "name"; + t9 = space(); + td2 = element("td"); + td2.textContent = "size"; + t11 = space(); + if (if_block2) if_block2.c(); + t12 = space(); + + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].c(); + } + + attr_dev(i, "class", "icon"); + add_location(i, file$5, 111, 76, 3034); + attr_dev(button, "class", "svelte-1bqdpyt"); + toggle_class(button, "hidden", /*state*/ ctx[0].parents.length === 0); + add_location(button, file$5, 111, 3, 2961); + attr_dev(div0, "class", "toolbar_spacer svelte-1bqdpyt"); + add_location(div0, file$5, 112, 3, 3077); + attr_dev(div1, "class", "toolbar svelte-1bqdpyt"); + add_location(div1, file$5, 110, 2, 2936); + add_location(br, file$5, 124, 2, 3486); + attr_dev(td0, "class", "svelte-1bqdpyt"); + add_location(td0, file$5, 150, 4, 4268); + attr_dev(td1, "class", "svelte-1bqdpyt"); + add_location(td1, file$5, 151, 4, 4282); + attr_dev(td2, "class", "svelte-1bqdpyt"); + add_location(td2, file$5, 152, 4, 4300); + attr_dev(tr, "class", "svelte-1bqdpyt"); + add_location(tr, file$5, 149, 3, 4259); + attr_dev(div2, "class", "directory svelte-1bqdpyt"); + add_location(div2, file$5, 148, 2, 4232); + attr_dev(div3, "class", "width_container svelte-1bqdpyt"); + add_location(div3, file$5, 109, 1, 2904); + attr_dev(div4, "class", "container svelte-1bqdpyt"); + add_location(div4, file$5, 108, 0, 2879); + }, + l: function claim(nodes) { + throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); + }, + m: function mount(target, anchor) { + insert_dev(target, div4, anchor); + append_dev(div4, div3); + append_dev(div3, div1); + append_dev(div1, button); + append_dev(button, i); + append_dev(div1, t1); + append_dev(div1, div0); + append_dev(div1, t2); + if (if_block0) if_block0.m(div1, null); + append_dev(div3, t3); + append_dev(div3, br); + append_dev(div3, t4); + if (if_block1) if_block1.m(div3, null); + append_dev(div3, t5); + mount_component(fileuploader, div3, null); + append_dev(div3, t6); + append_dev(div3, div2); + append_dev(div2, tr); + append_dev(tr, td0); + append_dev(tr, t7); + append_dev(tr, td1); + append_dev(tr, t9); + append_dev(tr, td2); + append_dev(div2, t11); + if (if_block2) if_block2.m(div2, null); + append_dev(div2, t12); + + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].m(div2, null); + } + + current = true; + + if (!mounted) { + dispose = listen_dev(button, "click", /*navigate_up*/ ctx[5], false, false, false); + mounted = true; + } + }, + p: function update(ctx, [dirty]) { + if (dirty & /*state*/ 1) { + toggle_class(button, "hidden", /*state*/ ctx[0].parents.length === 0); + } + + if (/*state*/ ctx[0].bucket.permissions.update) { + if (if_block0) { + if_block0.p(ctx, dirty); + } else { + if_block0 = create_if_block_2(ctx); + if_block0.c(); + if_block0.m(div1, null); + } + } else if (if_block0) { + if_block0.d(1); + if_block0 = null; + } + + if (/*mode*/ ctx[1] === "deleting") { + if (if_block1) { + if_block1.p(ctx, dirty); + } else { + if_block1 = create_if_block_1(ctx); + if_block1.c(); + if_block1.m(div3, t5); + } + } else if (if_block1) { + if_block1.d(1); + if_block1 = null; + } + + const fileuploader_changes = {}; + if (dirty & /*state*/ 1) fileuploader_changes.bucket_id = /*state*/ ctx[0].bucket.id; + if (dirty & /*state*/ 1) fileuploader_changes.target_dir = /*state*/ ctx[0].base.path; + fileuploader.$set(fileuploader_changes); + + if (/*creating_dir*/ ctx[2]) { + if (if_block2) { + if_block2.p(ctx, dirty); + + if (dirty & /*creating_dir*/ 4) { + transition_in(if_block2, 1); + } + } else { + if_block2 = create_if_block$1(ctx); + if_block2.c(); + transition_in(if_block2, 1); + if_block2.m(div2, t12); + } + } else if (if_block2) { + group_outros(); + + transition_out(if_block2, 1, 1, () => { + if_block2 = null; + }); + + check_outros(); + } + + if (dirty & /*state, node_click, formatDataVolume, node_icon*/ 145) { + each_value = /*state*/ ctx[0].base.children; + validate_each_argument(each_value); + let i; + + for (i = 0; i < each_value.length; i += 1) { + const child_ctx = get_each_context$1(ctx, each_value, i); + + if (each_blocks[i]) { + each_blocks[i].p(child_ctx, dirty); + } else { + each_blocks[i] = create_each_block$1(child_ctx); + each_blocks[i].c(); + each_blocks[i].m(div2, null); + } + } + + for (; i < each_blocks.length; i += 1) { + each_blocks[i].d(1); + } + + each_blocks.length = each_value.length; + } + }, + i: function intro(local) { + if (current) return; + transition_in(fileuploader.$$.fragment, local); + transition_in(if_block2); + current = true; + }, + o: function outro(local) { + transition_out(fileuploader.$$.fragment, local); + transition_out(if_block2); + current = false; + }, + d: function destroy(detaching) { + if (detaching) detach_dev(div4); + if (if_block0) if_block0.d(); + if (if_block1) if_block1.d(); + /*fileuploader_binding*/ ctx[11](null); + destroy_component(fileuploader); + if (if_block2) if_block2.d(); + destroy_each(each_blocks, detaching); + mounted = false; + dispose(); + } + }; + + dispatch_dev("SvelteRegisterBlock", { + block, + id: create_fragment$5.name, + type: "component", + source: "", + ctx + }); + + return block; + } + + function instance$5($$self, $$props, $$invalidate) { + let { $$slots: slots = {}, $$scope } = $$props; + validate_slots("FileManager", slots, []); + let dispatch = createEventDispatcher(); + let { state } = $$props; + let mode = "viewing"; + let creating_dir = false; + let uploader; + + const node_click = index => { + $$invalidate(2, creating_dir = false); + + // We prefix our custom state properties with fm_ to not interfere with + // other modules if (mode === "viewing") { - dispatch("navigate", node.path); + dispatch("navigate", state.base.children[index].path); } else if (mode === "selecting") { - $$invalidate(2, children[index].selected = !children[index].selected, children); + $$invalidate(0, state.base.children[index].fm_selected = !state.base.children[index].fm_selected, state); + } else if (mode === "deleting") { + $$invalidate(0, state.base.children[index].fm_delete = !state.base.children[index].fm_delete, state); } }; const navigate_up = () => { + $$invalidate(2, creating_dir = false); + // Go to the path of the last parent - if (node.parents.length !== 0) { - dispatch("navigate", node.parents[node.parents.length - 1].path); + if (state.parents.length !== 0) { + dispatch("navigate", state.parents[state.parents.length - 1].path); } }; + const reload = () => { + dispatch("navigate", state.base.path); + }; + const node_icon = node => { if (node.type === "dir") { return "/res/img/mime/folder.png"; @@ -1778,6 +2884,8 @@ var app = (function () { return "/res/img/mime/image-jpeg.png"; case "application/pdf": return "/res/img/mime/pdf.png"; + case "application/ogg": + return "/res/img/mime/audio.png"; } if (node.file_type.startsWith("audio/")) { @@ -1795,111 +2903,170 @@ var app = (function () { return "/res/img/mime/empty.png"; }; - const writable_props = ["node", "path_base"]; + const delete_node = () => { + if (mode !== "deleting") { + $$invalidate(1, mode = "deleting"); + return; + } + + dispatch("loading", true); + + // Save all promises with deletion requests in an array + let promises = []; + + state.base.children.forEach(child => { + if (!child.fm_delete) { + return; + } + + promises.push(fs_delete_node(state.bucket.id, child.path)); + }); + + // Wait for all the promises to finish + Promise.all(promises).catch(err => { + console.error(err); + }).finally(() => { + $$invalidate(1, mode = "viewing"); + reload(); + }); + }; + + const delete_toggle = () => { + // Turn on deletion mode if it's not already + if (mode !== "deleting") { + $$invalidate(1, mode = "deleting"); + return; + } + + // Return to normal and unmark all the marked files + $$invalidate(1, mode = "viewing"); + + state.base.children.forEach((child, i) => { + if (child.fm_delete) { + $$invalidate(0, state.base.children[i].fm_delete = false, state); + } + }); + }; + + const writable_props = ["state"]; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console_1$1.warn(` was created with unknown prop '${key}'`); }); - const click_handler = (child, index) => { - node_click(child, index); + const click_handler = () => { + $$invalidate(2, creating_dir = true); + }; + + function fileuploader_binding($$value) { + binding_callbacks[$$value ? "unshift" : "push"](() => { + uploader = $$value; + $$invalidate(3, uploader); + }); + } + + const done_handler = () => { + reload(); + $$invalidate(2, creating_dir = false); + }; + + function loading_handler(event) { + bubble($$self, event); + } + + const click_handler_1 = index => { + node_click(index); }; $$self.$$set = $$props => { - if ("node" in $$props) $$invalidate(0, node = $$props.node); - if ("path_base" in $$props) $$invalidate(1, path_base = $$props.path_base); + if ("state" in $$props) $$invalidate(0, state = $$props.state); }; $$self.$capture_state = () => ({ formatDataVolume, + fs_delete_node, createEventDispatcher, + CreateDirectory, + FileUploader, dispatch, - node, - path_base, + state, mode, + creating_dir, + uploader, node_click, navigate_up, + reload, node_icon, - children + delete_node, + delete_toggle }); $$self.$inject_state = $$props => { if ("dispatch" in $$props) dispatch = $$props.dispatch; - if ("node" in $$props) $$invalidate(0, node = $$props.node); - if ("path_base" in $$props) $$invalidate(1, path_base = $$props.path_base); - if ("mode" in $$props) mode = $$props.mode; - if ("children" in $$props) $$invalidate(2, children = $$props.children); + if ("state" in $$props) $$invalidate(0, state = $$props.state); + if ("mode" in $$props) $$invalidate(1, mode = $$props.mode); + if ("creating_dir" in $$props) $$invalidate(2, creating_dir = $$props.creating_dir); + if ("uploader" in $$props) $$invalidate(3, uploader = $$props.uploader); }; - let children; - if ($$props && "$$inject" in $$props) { $$self.$inject_state($$props.$$inject); } - $$self.$$.update = () => { - if ($$self.$$.dirty & /*node*/ 1) { - $$invalidate(2, children = node.base.children.reduce( - (accum, val) => { - val["selected"] = false; - accum.push(val); - return accum; - }, - [] - )); - } - }; - - return [node, path_base, children, node_click, navigate_up, node_icon, click_handler]; + return [ + state, + mode, + creating_dir, + uploader, + node_click, + navigate_up, + reload, + node_icon, + delete_node, + delete_toggle, + click_handler, + fileuploader_binding, + done_handler, + loading_handler, + click_handler_1 + ]; } - class Directory extends SvelteComponentDev { + class FileManager extends SvelteComponentDev { constructor(options) { super(options); - init(this, options, instance$3, create_fragment$3, safe_not_equal, { node: 0, path_base: 1 }); + init(this, options, instance$5, create_fragment$5, safe_not_equal, { state: 0 }); dispatch_dev("SvelteRegisterComponent", { component: this, - tagName: "Directory", + tagName: "FileManager", options, - id: create_fragment$3.name + id: create_fragment$5.name }); const { ctx } = this.$$; const props = options.props || {}; - if (/*node*/ ctx[0] === undefined && !("node" in props)) { - console.warn(" was created without expected prop 'node'"); - } - - if (/*path_base*/ ctx[1] === undefined && !("path_base" in props)) { - console.warn(" was created without expected prop 'path_base'"); + if (/*state*/ ctx[0] === undefined && !("state" in props)) { + console_1$1.warn(" was created without expected prop 'state'"); } } - get node() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + get state() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); } - set node(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - - get path_base() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - - set path_base(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + set state(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); } } /* src/filesystem/viewers/Audio.svelte generated by Svelte v3.29.6 */ - const file$4 = "src/filesystem/viewers/Audio.svelte"; + const file$6 = "src/filesystem/viewers/Audio.svelte"; - function create_fragment$4(ctx) { + function create_fragment$6(ctx) { let div; - let t0_value = /*node*/ ctx[0].base.name + ""; + let t0_value = /*state*/ ctx[0].base.name + ""; let t0; let t1; let br0; @@ -1921,17 +3088,17 @@ var app = (function () { t2 = space(); audio = element("audio"); track = element("track"); - add_location(br0, file$4, 14, 1, 211); - add_location(br1, file$4, 14, 6, 216); + add_location(br0, file$6, 10, 1, 228); + add_location(br1, file$6, 10, 6, 233); attr_dev(track, "kind", "captions"); - add_location(track, file$4, 21, 2, 389); + add_location(track, file$6, 17, 2, 409); attr_dev(audio, "class", "player svelte-11r8rw7"); - if (audio.src !== (audio_src_value = window.apiEndpoint + "/filesystem/" + /*node*/ ctx[0].bucket.id + "/" + /*node*/ ctx[0].base.path)) attr_dev(audio, "src", audio_src_value); + if (audio.src !== (audio_src_value = fs_get_file_url(/*state*/ ctx[0].bucket.id, /*state*/ ctx[0].base.path))) attr_dev(audio, "src", audio_src_value); audio.autoplay = "autoplay"; audio.controls = "controls"; - add_location(audio, file$4, 15, 1, 223); + add_location(audio, file$6, 11, 1, 240); attr_dev(div, "class", "container svelte-11r8rw7"); - add_location(div, file$4, 12, 0, 168); + add_location(div, file$6, 8, 0, 184); }, l: function claim(nodes) { throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); @@ -1947,14 +3114,14 @@ var app = (function () { append_dev(audio, track); if (!mounted) { - dispose = listen_dev(audio, "ended", /*ended*/ ctx[1], false, false, false); + dispose = listen_dev(audio, "ended", /*ended_handler*/ ctx[2], false, false, false); mounted = true; } }, p: function update(ctx, [dirty]) { - if (dirty & /*node*/ 1 && t0_value !== (t0_value = /*node*/ ctx[0].base.name + "")) set_data_dev(t0, t0_value); + if (dirty & /*state*/ 1 && t0_value !== (t0_value = /*state*/ ctx[0].base.name + "")) set_data_dev(t0, t0_value); - if (dirty & /*node*/ 1 && audio.src !== (audio_src_value = window.apiEndpoint + "/filesystem/" + /*node*/ ctx[0].bucket.id + "/" + /*node*/ ctx[0].base.path)) { + if (dirty & /*state*/ 1 && audio.src !== (audio_src_value = fs_get_file_url(/*state*/ ctx[0].bucket.id, /*state*/ ctx[0].base.path))) { attr_dev(audio, "src", audio_src_value); } }, @@ -1969,7 +3136,7 @@ var app = (function () { dispatch_dev("SvelteRegisterBlock", { block, - id: create_fragment$4.name, + id: create_fragment$6.name, type: "component", source: "", ctx @@ -1978,80 +3145,77 @@ var app = (function () { return block; } - function instance$4($$self, $$props, $$invalidate) { + function instance$6($$self, $$props, $$invalidate) { let { $$slots: slots = {}, $$scope } = $$props; validate_slots("Audio", slots, []); let dispatch = createEventDispatcher(); - let { node } = $$props; - - const ended = () => { - dispatch("next"); - }; - - const writable_props = ["node"]; + let { state } = $$props; + const writable_props = ["state"]; Object.keys($$props).forEach(key => { if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`