web: rename DownloadManager to ProcessingQueue
also replaced the download icon with a blender (to be updated, maybe)
This commit is contained in:
wukko
201
web/src/components/queue/ProcessingQueue.svelte
Normal file
201
web/src/components/queue/ProcessingQueue.svelte
Normal file
@@ -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>
|
||||
151
web/src/components/queue/ProcessingQueueItem.svelte
Normal file
151
web/src/components/queue/ProcessingQueueItem.svelte
Normal file
@@ -0,0 +1,151 @@
|
||||
<script lang="ts">
|
||||
import IconX from "@tabler/icons-svelte/IconX.svelte";
|
||||
import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
|
||||
|
||||
export let filename: string;
|
||||
export let status: string;
|
||||
export let progress: number = 0;
|
||||
export let icon: ConstructorOfATypedSvelteComponent;
|
||||
</script>
|
||||
|
||||
<div class="processing-item">
|
||||
<div class="processing-info">
|
||||
<div class="file-title">
|
||||
<div class="processing-type">
|
||||
<svelte:component this={icon} />
|
||||
</div>
|
||||
<span>
|
||||
{filename}
|
||||
</span>
|
||||
</div>
|
||||
<div class="file-progress">
|
||||
<div
|
||||
class="progress"
|
||||
style="width: {Math.min(100, progress)}%"
|
||||
></div>
|
||||
</div>
|
||||
<div class="file-status">{status}</div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<button class="action-button">
|
||||
<IconDownload />
|
||||
</button>
|
||||
<button class="action-button">
|
||||
<IconX />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.processing-item,
|
||||
.file-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.processing-item {
|
||||
width: 425px;
|
||||
padding: 8px 0;
|
||||
gap: 8px;
|
||||
border-bottom: 1.5px var(--button-elevated) solid;
|
||||
}
|
||||
|
||||
.processing-type {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.processing-type :global(svg) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.processing-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
gap: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-progress {
|
||||
width: 100%;
|
||||
background-color: var(--button-elevated);
|
||||
}
|
||||
|
||||
.file-progress,
|
||||
.file-progress .progress {
|
||||
height: 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.file-progress .progress {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.file-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.file-status {
|
||||
font-size: 12px;
|
||||
color: var(--gray);
|
||||
line-break: anywhere;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.file-actions {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: var(--button);
|
||||
height: 90%;
|
||||
padding-left: 18px;
|
||||
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
mask-image: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(0, 0, 0, 1) 20%
|
||||
);
|
||||
}
|
||||
|
||||
.processing-item:hover .file-actions {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 8px;
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.action-button :global(svg) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.processing-item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.processing-item:last-child {
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
132
web/src/components/queue/ProcessingStatus.svelte
Normal file
132
web/src/components/queue/ProcessingStatus.svelte
Normal file
@@ -0,0 +1,132 @@
|
||||
<script lang="ts">
|
||||
import IconBlender from "@tabler/icons-svelte/IconBlender.svelte";
|
||||
|
||||
export let indeterminate = false;
|
||||
export let progress: number = 0;
|
||||
export let expandAction: () => void;
|
||||
|
||||
$: progressStroke = `${progress}, 100`;
|
||||
const indeterminateStroke = "15, 5";
|
||||
</script>
|
||||
|
||||
<button
|
||||
id="processing-status"
|
||||
on:click={expandAction}
|
||||
class:completed={progress >= 100}
|
||||
>
|
||||
<svg
|
||||
id="progress-ring"
|
||||
class:indeterminate
|
||||
class:progressive={progress > 0 && !indeterminate}
|
||||
>
|
||||
<circle
|
||||
cx="19"
|
||||
cy="19"
|
||||
r="16"
|
||||
fill="none"
|
||||
stroke-dasharray={indeterminate
|
||||
? indeterminateStroke
|
||||
: progressStroke}
|
||||
/>
|
||||
</svg>
|
||||
<div class="icon-holder">
|
||||
<IconBlender />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
#processing-status {
|
||||
--processing-status-glow: 0 0 8px 0px var(--button-elevated-hover);
|
||||
|
||||
pointer-events: all;
|
||||
padding: 7px;
|
||||
border-radius: 30px;
|
||||
box-shadow:
|
||||
var(--button-box-shadow),
|
||||
var(--processing-status-glow);
|
||||
|
||||
transition: box-shadow 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
#processing-status.completed {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--blue) inset,
|
||||
var(--processing-status-glow);
|
||||
}
|
||||
|
||||
:global([data-theme="light"]) #processing-status.completed {
|
||||
background-color: #e0eeff;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"]) #processing-status.completed {
|
||||
background-color: #1f3249;
|
||||
}
|
||||
|
||||
.icon-holder {
|
||||
display: flex;
|
||||
background-color: var(--button-elevated-hover);
|
||||
padding: 2px;
|
||||
border-radius: 20px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.icon-holder :global(svg) {
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
stroke: var(--secondary);
|
||||
transition: stroke 0.2s;
|
||||
}
|
||||
|
||||
.completed .icon-holder {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.completed .icon-holder :global(svg) {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
#progress-ring {
|
||||
position: absolute;
|
||||
transform: rotate(-90deg);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
#progress-ring circle {
|
||||
stroke: var(--blue);
|
||||
stroke-width: 4;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
#progress-ring.progressive circle {
|
||||
transition: stroke-dasharray 0.2s;
|
||||
}
|
||||
|
||||
#progress-ring.progressive,
|
||||
#progress-ring.indeterminate {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#progress-ring.indeterminate {
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
#progress-ring.indeterminate circle {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.completed #progress-ring {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user