web: rename DownloadManager to ProcessingQueue

also replaced the download icon with a blender (to be updated, maybe)
2024-12-17 16:50:13 +06:00
parent 13c4438a57
commit 11e3d7a8f4
4 changed files with 48 additions and 47 deletions
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -0,0 +1,201 @@
+<script lang="ts">
+    import { onNavigate } from "$app/navigation";
+    import type { SvelteComponent } from "svelte";
+    import type { QueueItem } from "$lib/types/queue";
+
+    import Meowbalt from "$components/misc/Meowbalt.svelte";
+    import PopoverContainer from "$components/misc/PopoverContainer.svelte";
+    import ProcessingStatus from "$components/queue/ProcessingStatus.svelte";
+    import ProcessingQueueItem from "$components/queue/ProcessingQueueItem.svelte";
+
+    import IconX from "@tabler/icons-svelte/IconX.svelte";
+
+    import IconGif from "@tabler/icons-svelte/IconGif.svelte";
+    import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
+    import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
+    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
+    import IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
+
+    let popover: SvelteComponent;
+    $: expanded = false;
+
+    $: progress = 0;
+    $: indeterminate = false;
+
+    const itemIcons = {
+        video: IconMovie,
+        audio: IconMusic,
+        mute: IconVolume3,
+        image: IconPhoto,
+        gif: IconGif,
+    };
+
+    // dummy data for testing ui rn
+    const processingQueue: QueueItem[] = [
+        {
+            id: "fake id",
+            type: "video",
+            filename: "placeholder.mp4",
+            status: "processing: 69%",
+            progress: 69,
+        },
+        {
+            id: "fake id",
+            type: "audio",
+            filename: "placeholder.mp3",
+            status: "processing: 3%",
+            progress: 3,
+        },
+        {
+            id: "fake id",
+            type: "mute",
+            filename: "placeholder.mp4",
+            status: "processing: 55%",
+            progress: 55,
+        },
+        {
+            id: "fake id",
+            type: "image",
+            filename: "placeholder.jpg",
+            status: "processing: 21%",
+            progress: 22,
+        },
+        {
+            id: "fake id",
+            type: "gif",
+            filename: "placeholder.gif",
+            status: "processing: 82%",
+            progress: 82,
+        },
+    ];
+
+    const popoverAction = async () => {
+        expanded = !expanded;
+        if (expanded) {
+            popover.focus();
+        }
+    };
+
+    onNavigate(() => {
+        expanded = false;
+    });
+</script>
+
+<div id="processing-manager">
+    <ProcessingStatus
+        {indeterminate}
+        {progress}
+        expandAction={popover?.showPopover}
+    />
+
+    <PopoverContainer
+        bind:this={popover}
+        id="processing-popover"
+        {expanded}
+        {popoverAction}
+        expandStart="right"
+    >
+        <div id="processing-header">
+            <div class="header-title">processing queue</div>
+            {#if processingQueue.length > 0}
+                <button class="clear-button">
+                    <IconX />
+                    clear
+                </button>
+            {/if}
+        </div>
+        <div id="processing-list">
+            {#each processingQueue as item}
+                <ProcessingQueueItem
+                    filename={item.filename}
+                    status={item.status}
+                    progress={item.progress}
+                    icon={itemIcons[item.type]}
+                />
+            {/each}
+            {#if processingQueue.length === 0}
+                <div class="list-stub">
+                    <Meowbalt emotion="think" />
+                    <span>downloads will appear here!</span>
+                </div>
+            {/if}
+        </div>
+    </PopoverContainer>
+</div>
+
+<style>
+    #processing-manager {
+        position: absolute;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: end;
+        z-index: 9;
+        pointer-events: none;
+        padding: 16px;
+    }
+
+    #processing-manager :global(#processing-popover) {
+        padding: 16px;
+        max-width: 425px;
+        gap: 12px;
+    }
+
+    #processing-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .header-title {
+        font-size: 15px;
+        font-weight: 500;
+    }
+
+    .clear-button {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--red);
+
+        padding: 0;
+        background: none;
+        box-shadow: none;
+    }
+
+    .clear-button :global(svg) {
+        height: 16px;
+        width: 16px;
+    }
+
+    #processing-list {
+        display: flex;
+        flex-direction: column;
+
+        max-height: 60vh;
+        overflow: scroll;
+    }
+
+    .list-stub {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--gray);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 25px;
+        text-align: center;
+        gap: var(--padding);
+    }
+
+    .list-stub :global(.meowbalt) {
+        height: 120px;
+    }
+
+    @media screen and (max-width: 535px) {
+        #processing-manager {
+            top: calc(env(safe-area-inset-top) - var(--padding) + 4px);
+        }
+    }
+</style>