diff --git a/classquiz/routers/storage.py b/classquiz/routers/storage.py index c7d6ae5..17e4792 100644 --- a/classquiz/routers/storage.py +++ b/classquiz/routers/storage.py @@ -209,6 +209,7 @@ async def list_images( storage_items = ( await StorageItem.objects.filter(user=user) .filter(StorageItem.uploaded_at > since) + .filter(StorageItem.deleted_at == None) # noqa: E711 .order_by(StorageItem.uploaded_at.desc()) .select_related([StorageItem.quizzes, StorageItem.quiztivities]) .all() diff --git a/frontend/src/lib/editor/uploader.svelte b/frontend/src/lib/editor/uploader.svelte index 2ee82b4..adec973 100644 --- a/frontend/src/lib/editor/uploader.svelte +++ b/frontend/src/lib/editor/uploader.svelte @@ -32,6 +32,7 @@ export let data: EditorData; export let selected_question: number; export let video_upload = false; + export let library_enabled = true; // eslint-disable-next-line no-undef let video_popup: undefined | WindowProxy = undefined; @@ -89,7 +90,6 @@ modalOpen = false; selected_type = null; }); - console.log(edit_id); onMount(() => { window.addEventListener('storage', (e) => { @@ -138,14 +138,15 @@ > {#if selected_type === null}
-

Select the Upload Type

+

{$t('uploader.select_upload_type')}

{ selected_type = AvailableUploadTypes.Image; - }}>Image + }} + >{$t('words.image')} +
{ selected_type = AvailableUploadTypes.Video; }} - >Video - -
-
- { - selected_type = AvailableUploadTypes.Library; - }} - >Library + >{$t('words.video')}
+ {#if library_enabled} +
+ { + selected_type = AvailableUploadTypes.Library; + }} + >{$t('words.library')} + +
+ {/if}
{:else if selected_type === AvailableUploadTypes.Image} @@ -177,13 +180,15 @@ class="m-auto w-1/3 h-auto bg-white dark:bg-gray-700 p-4 rounded" transition:fade|local={{ duration: 100 }} > -

Upload a Video

+

{$t('uploader.upload_a_video')}

{#if video_popup}

- The popup is open; have a look at it for further information + {$t('uploader.upload_video_popup_notice')}

{:else} - Upload video + {$t('uploader.upload_video')} {/if} {:else if selected_type === AvailableUploadTypes.Library} diff --git a/frontend/src/lib/editor/uploader/Library.svelte b/frontend/src/lib/editor/uploader/Library.svelte index 2b703dd..117700f 100644 --- a/frontend/src/lib/editor/uploader/Library.svelte +++ b/frontend/src/lib/editor/uploader/Library.svelte @@ -9,11 +9,14 @@ import Spinner from '$lib/Spinner.svelte'; import type { EditorData } from '$lib/quiz_types'; import BrownButton from '$lib/components/buttons/brown.svelte'; + import { getLocalization } from '$lib/i18n'; export let data: EditorData; export let selected_question: number; export let modalOpen: boolean; + const { t } = getLocalization(); + const fetch_images = async (): Promise => { const response = await fetch('/api/v1/storage/list/last?count=50'); return await response.json(); @@ -53,7 +56,7 @@ { set_image(image.id); - }}>Select{$t('words.select')} {/each} diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json index 1df76c6..31a6277 100644 --- a/frontend/src/lib/i18n/locales/en.json +++ b/frontend/src/lib/i18n/locales/en.json @@ -175,7 +175,12 @@ "quiz": "Quiz", "quiztivity": "Quiztivity", "next": "Next", - "check_choice": "Check Choice" + "check_choice": "Check Choice", + "video": "Video", + "library": "Library", + "progress": "Progress", + "speed": "Speed", + "upload": "Upload" }, "editor": { "time_in_seconds": "Time in seconds", @@ -277,7 +282,11 @@ "unknown_error_text": "That shouldn't happen. It's probably my fault, not yours, but maybe you have a magical power to break stuff..." }, "uploader": { - "add_image": "Add image" + "add_image": "Add image", + "select_upload_type": "Select the Upload Type", + "upload_a_video": "Upload a Video", + "upload_video_popup_notice": "The popup is open; have a look at it for further information", + "upload_video": "Upload Video" }, "avatar_settings": { "skin_color": "Skin color", @@ -388,5 +397,24 @@ "public_user_page": { "joined_on": "Joined on {{date}}", "no_original_quizzes": "This user doesn't have any original quizzes" + }, + "file_dashboard": { + "not_available": "Not available", + "missing": "MISSING!", + "unset": "Unset", + "size": "Size: {{size}} Mib", + "caption": "Caption: {{caption}}", + "filename": "Filename: {{filename}}", + "uploaded": "Uploaded: {{date}}", + "Imported": "Imported: {{yes_or_no}}", + "edit_details": "Edit details", + "delete_image": "Delete image", + "edit_the_image": "Edit the image", + "filename_word": "Filename", + "alt_text": "Alt(ernate) text / Caption" + }, + "video_uploader": { + "time_elapsed": "Time elapsed", + "time_remaining": "Time remaining" } } diff --git a/frontend/src/routes/edit/files/+page.svelte b/frontend/src/routes/edit/files/+page.svelte index d4226ae..f9405c7 100644 --- a/frontend/src/routes/edit/files/+page.svelte +++ b/frontend/src/routes/edit/files/+page.svelte @@ -10,6 +10,9 @@ // import MediaComponent from '$lib/editor/MediaComponent.svelte'; import BrownButton from '$lib/components/buttons/brown.svelte'; import { onMount } from 'svelte'; + import Uploader from './uploader.svelte'; + import { getLocalization } from '$lib/i18n'; + const { t } = getLocalization(); export let data: PageData; let edit_popup = null; @@ -38,9 +41,15 @@ edit_popup = null; window.location.reload(); }; + + const delete_image = async (id: string) => { + await fetch(`/api/v1/storage/meta/${id}`, { method: 'DELETE' }); + window.location.reload(); + };
+
{#each images as image}
-

Size: {(image.size / (1024 * 1024)).toFixed(2)} Mib

-

Caption: {image.alt_text ?? 'MISSING!'}

-

Filename: {image.filename ?? 'Unset'}

-

Uploaded: {new Date(image.uploaded_at).toLocaleString()}

-

Imported: {image.imported ? 'Yes' : 'No'}

- { - edit_popup = image; - }}>Edit Details +

+ {$t('file_dashboard.size', { + size: (image.size / (1024 * 1024)).toFixed(2) + })} +

+

+ {$t('file_dashboard.caption', { + caption: image.alt_text ?? $t('file_dashboard.missing') + })} +

+

+ {$t('file_dashboard.filename', { + filename: image.filename ?? $t('file_dashboard.missing') + })} +

+

+ {$t('file_dashboard.uploaded', { + date: new Date(image.uploaded_at).toLocaleString() + })} +

+

+ {$t('file_dashboard.imported', { + yes_or_no: image.imported ? $t('words.yes') : $t('words.no') + })} +

+
+ { + edit_popup = image; + }} + >{$t('file_dashboard.edit_details')} + + {#if image.quiztivities.length === 0 && image.quizzes.length === 0} + { + delete_image(image.id); + }}>{$t('file_dashboard.delete_image')} + {/if} +
{/each} @@ -77,12 +116,13 @@ on:click={close_popup_handler} >
-

Edit the image

+

{$t('file_dashboard.edit_the_image')}

- - + +
- Save + {$t('words.save')}
diff --git a/frontend/src/routes/edit/files/uploader.svelte b/frontend/src/routes/edit/files/uploader.svelte new file mode 100644 index 0000000..db9cbcd --- /dev/null +++ b/frontend/src/routes/edit/files/uploader.svelte @@ -0,0 +1,33 @@ + + + +{#await import('$lib/editor/uploader.svelte')} + +{:then c} + +{/await} diff --git a/frontend/src/routes/edit/videos/+page.svelte b/frontend/src/routes/edit/videos/+page.svelte index 43ba7f8..3ee353d 100644 --- a/frontend/src/routes/edit/videos/+page.svelte +++ b/frontend/src/routes/edit/videos/+page.svelte @@ -13,6 +13,8 @@ import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; import BrownButton from '$lib/components/buttons/brown.svelte'; import { navbarVisible } from '$lib/stores'; + import { getLocalization } from '$lib/i18n'; + const { t } = getLocalization(); let file_input: HTMLInputElement; navbarVisible.set(false); @@ -153,10 +155,10 @@ {#if status === Status.Compressing || status === Status.CompressDone} - - - - + + + + @@ -172,9 +174,9 @@ {:else if status === Status.Uploading}
SpeedProgressTime elapsedTime remaining{$t('words.speed')}{$t('words.progress')}{$t('video_uploader.time_elapsed')}{$t('video_uploader.time_remaining')}
{stats.speed}
- - - + + + @@ -188,7 +190,8 @@
- Upload {file_size_in_mi ? `${file_size_in_mi.toFixed(2)}Mi` : ''}
- Submit{$t('words.submit')}
ProgressTime elapsedTime remaining{$t('words.progress')}{$t('video_uploader.time_elapsed')}{$t('video_uploader.time_remaining')}
{Math.round(upload_stats.progress * 100)}%