From 820457690fa609b0e245d50fe9297f151fb33131 Mon Sep 17 00:00:00 2001
From: Jay Cammarano <67079013+jaycammarano@users.noreply.github.com>
Date: Wed, 20 Jul 2022 15:52:38 -0400
Subject: [PATCH] Optimize media loading across app (#10592)

* v-image and "lazy load" working

* fixed vars

* all the other img uses

* No longer require access token in url for files

* Add lazy loading and size limits

* Rename map-component source prop

* Fix lint warning

* Update app/src/views/public/public-view.vue

Co-authored-by: ian <licitdev@gmail.com>

* Fix lint

* Fix missing file type icon

* Fix null imageInfo error

* Use video.js for media playback

* Fix .js file display

* Update package-lock.json

* Update package-lock.json

* update package.json

* Update pnpm-lock.yaml

* Remove unrelated addition on VDatePicker

* Remove folder abstraction

* Use image data based aspect ratio on preview

* Base app rate throttle on API rate limit config

* Configure app rate limit throttle based on api config

* Convert v-image to script[setup]

* Convert v-media to script[setup]

* Cleanup v-media

* Remove unneeded addTokenToUrl usages

* Remove video.js

It doesn't do authorization headers for mp4/mp3, so it's pointless

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
Co-authored-by: ian <licitdev@gmail.com>
---
 api/src/services/server.ts                    | 13 +++
 app/src/api.ts                                |  9 +-
 app/src/components/register.ts                |  2 +
 app/src/components/v-image.vue                | 87 +++++++++++++++++++
 app/src/displays/file/file.vue                |  7 +-
 app/src/displays/image/image.vue              | 10 +--
 app/src/displays/user/user.vue                | 10 +--
 app/src/interfaces/file-image/file-image.vue  |  7 +-
 app/src/interfaces/file/file.vue              |  5 +-
 app/src/interfaces/files/files.vue            |  6 ++
 app/src/layouts/cards/components/card.vue     | 46 +++++-----
 app/src/layouts/map/map.vue                   | 13 +--
 app/src/modules/files/routes/item.vue         |  6 +-
 app/src/modules/users/routes/item.vue         | 43 +++++----
 app/src/stores/server.ts                      | 19 +++-
 app/src/utils/readable-mime-type/types.json   |  1 +
 .../comments-sidebar-detail/comment-input.vue | 27 +++---
 .../comment-item-header.vue                   | 14 +--
 .../components/drawer-item/drawer-item.vue    | 16 ++--
 .../file-lightbox/file-lightbox.vue           |  8 +-
 .../components/file-preview/file-preview.vue  |  9 +-
 .../components/image-editor/image-editor.vue  | 17 ++--
 .../module-bar-avatar/module-bar-avatar.vue   | 11 ++-
 .../module-bar-logo/module-bar-logo.vue       | 11 ++-
 .../components/user-popover/user-popover.vue  | 11 ++-
 app/src/views/public/public-view.vue          |  4 +-
 pnpm-lock.yaml                                |  2 +-
 27 files changed, 259 insertions(+), 155 deletions(-)
 create mode 100644 app/src/components/v-image.vue

diff --git a/api/src/services/server.ts b/api/src/services/server.ts
index 5da4c87dcc..7afbeadb65 100644
--- a/api/src/services/server.ts
+++ b/api/src/services/server.ts
@@ -50,6 +50,17 @@ export class ServerService {
 
 		info.project = projectInfo;
 
+		if (this.accountability?.user) {
+			if (env.RATE_LIMITER_ENABLED) {
+				info.rateLimit = {
+					points: env.RATE_LIMITER_POINTS,
+					duration: env.RATE_LIMITER_DURATION,
+				};
+			} else {
+				info.rateLimit = false;
+			}
+		}
+
 		if (this.accountability?.admin === true) {
 			const osType = os.type() === 'Darwin' ? 'macOS' : os.type();
 
@@ -58,10 +69,12 @@ export class ServerService {
 			info.directus = {
 				version,
 			};
+
 			info.node = {
 				version: process.versions.node,
 				uptime: Math.round(process.uptime()),
 			};
+
 			info.os = {
 				type: osType,
 				version: osVersion,
diff --git a/app/src/api.ts b/app/src/api.ts
index 7114e434c1..174e75ca1c 100644
--- a/app/src/api.ts
+++ b/app/src/api.ts
@@ -3,7 +3,7 @@ import { useRequestsStore } from '@/stores/';
 import { getRootPath } from '@/utils/get-root-path';
 import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { addQueryToPath } from './utils/add-query-to-path';
-import PQueue from 'p-queue';
+import PQueue, { Options, DefaultAddOptions } from 'p-queue';
 
 const api = axios.create({
 	baseURL: getRootPath(),
@@ -13,7 +13,7 @@ const api = axios.create({
 	},
 });
 
-const queue = new PQueue({ concurrency: 5, intervalCap: 5, interval: 500, carryoverConcurrencyCount: true });
+let queue = new PQueue({ concurrency: 5, intervalCap: 5, interval: 500, carryoverConcurrencyCount: true });
 
 interface RequestConfig extends AxiosRequestConfig {
 	id: string;
@@ -113,3 +113,8 @@ export function addTokenToURL(url: string, token?: string): string {
 
 	return addQueryToPath(url, { access_token: accessToken });
 }
+
+export async function replaceQueue(options?: Options<any, DefaultAddOptions>) {
+	await queue.onIdle();
+	queue = new PQueue(options);
+}
diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index f3ee2875b2..472436dfde 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -29,6 +29,7 @@ import VForm from './v-form';
 import VHover from './v-hover/';
 import VHighlight from './v-highlight.vue';
 import VIcon from './v-icon/';
+import VImage from './v-image.vue';
 import VIconFile from './v-icon-file.vue';
 import VInfo from './v-info/';
 import VInput from './v-input/';
@@ -81,6 +82,7 @@ export function registerComponents(app: App): void {
 	app.component('VHover', VHover);
 	app.component('VHighlight', VHighlight);
 	app.component('VIcon', VIcon);
+	app.component('VImage', VImage);
 	app.component('VIconFile', VIconFile);
 	app.component('VInfo', VInfo);
 	app.component('VInput', VInput);
diff --git a/app/src/components/v-image.vue b/app/src/components/v-image.vue
new file mode 100644
index 0000000000..9ddda3ec82
--- /dev/null
+++ b/app/src/components/v-image.vue
@@ -0,0 +1,87 @@
+<template>
+	<img ref="imageElement" :src="inView ? srcData : emptyPixel" v-bind="attrsWithoutSrc" />
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted, useAttrs } from 'vue';
+import { omit } from 'lodash';
+import api from '@/api';
+
+interface Props {
+	src: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['error']);
+const attrs = useAttrs();
+
+const imageElement = ref<HTMLImageElement>();
+
+const inView = ref(false);
+
+const emptyPixel =
+	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+const srcData = ref<string>(emptyPixel);
+
+let loaded = false;
+
+const observer = new IntersectionObserver(async (entries) => {
+	if (entries.length === 0) return;
+	inView.value = entries[0].isIntersecting;
+
+	if (entries[0].isIntersecting && !loaded && props.src) {
+		try {
+			const res = await api.get(props.src, {
+				responseType: 'arraybuffer',
+				params: {
+					download: true,
+				},
+			});
+
+			if (res.headers['content-type'].startsWith('image') === false) return;
+
+			const contentType = res.headers['content-type'];
+
+			const data = new Uint8Array(res.data);
+
+			// 5mb
+			if (data.length > 1048576 * 5) {
+				emit('error', new Error('Image too big to render'));
+				return;
+			}
+
+			let raw = '';
+
+			data.forEach((byte) => {
+				raw += String.fromCharCode(byte);
+			});
+
+			const base64 = btoa(raw);
+			srcData.value = `data:${contentType};base64,${base64}`;
+		} catch (err) {
+			emit('error', err);
+		} finally {
+			loaded = true;
+		}
+	}
+});
+
+onMounted(() => {
+	if (!imageElement.value) return;
+	observer.observe(imageElement.value);
+});
+
+onUnmounted(() => {
+	observer.disconnect();
+});
+
+const attrsWithoutSrc = computed(() => omit(attrs, ['src']));
+</script>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	inheritAttrs: false,
+});
+</script>
diff --git a/app/src/displays/file/file.vue b/app/src/displays/file/file.vue
index 54c8b3fa95..4a5dee0617 100644
--- a/app/src/displays/file/file.vue
+++ b/app/src/displays/file/file.vue
@@ -1,5 +1,5 @@
 <template>
-	<img
+	<v-image
 		v-if="imageThumbnail && !imgError"
 		:src="imageThumbnail"
 		:class="{ 'is-svg': value && value.type?.includes('svg') }"
@@ -20,7 +20,6 @@ import { defineComponent, PropType, computed, ref } from 'vue';
 import readableMimeType from '@/utils/readable-mime-type';
 import useElementSize from '@/composables/use-element-size';
 import { getRootPath } from '@/utils/get-root-path';
-import { addTokenToURL } from '@/api';
 
 type File = {
 	id: string;
@@ -46,9 +45,9 @@ export default defineComponent({
 
 		const imageThumbnail = computed(() => {
 			if (!props.value) return null;
-			if (props.value.type?.includes('svg')) return addTokenToURL(getRootPath() + `assets/${props.value.id}`);
+			if (props.value.type?.includes('svg')) return getRootPath() + `assets/${props.value.id}`;
 			if (props.value.type?.includes('image') === false) return null;
-			return addTokenToURL(getRootPath() + `assets/${props.value.id}?key=system-small-cover`);
+			return getRootPath() + `assets/${props.value.id}?key=system-small-cover`;
 		});
 
 		const { height } = useElementSize(previewEl);
diff --git a/app/src/displays/image/image.vue b/app/src/displays/image/image.vue
index 9b53652dea..bac953ff5d 100644
--- a/app/src/displays/image/image.vue
+++ b/app/src/displays/image/image.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-icon v-if="imageError" name="image" />
-	<img
+	<v-image
 		v-else-if="src"
 		:src="src"
 		role="presentation"
@@ -12,10 +12,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, ref } from 'vue';
-import ValueNull from '@/views/private/components/value-null';
 import { getRootPath } from '@/utils/get-root-path';
-import { addTokenToURL } from '@/api';
+import ValueNull from '@/views/private/components/value-null';
+import { computed, defineComponent, PropType, ref } from 'vue';
 
 type Image = {
 	id: string;
@@ -40,8 +39,7 @@ export default defineComponent({
 
 		const src = computed(() => {
 			if (props.value?.id === null || props.value?.id === undefined) return null;
-			const url = getRootPath() + `assets/${props.value.id}?key=system-small-cover`;
-			return addTokenToURL(url);
+			return getRootPath() + `assets/${props.value.id}?key=system-small-cover`;
 		});
 
 		return { src, imageError };
diff --git a/app/src/displays/user/user.vue b/app/src/displays/user/user.vue
index 8daf76c162..b79fccded1 100644
--- a/app/src/displays/user/user.vue
+++ b/app/src/displays/user/user.vue
@@ -1,14 +1,14 @@
 <template>
 	<user-popover v-if="value" :user="value.id">
 		<div class="user" :class="display">
-			<img
+			<v-image
 				v-if="(display === 'avatar' || display === 'both') && src"
 				:src="src"
 				role="presentation"
 				:alt="value && userName(value)"
 				:class="{ circle }"
 			/>
-			<img
+			<v-image
 				v-else-if="(display === 'avatar' || display === 'both') && src === null"
 				src="../../assets/avatar-placeholder.svg"
 				role="presentation"
@@ -21,10 +21,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed } from 'vue';
 import { getRootPath } from '@/utils/get-root-path';
 import { userName } from '@/utils/user-name';
-import { addTokenToURL } from '@/api';
+import { computed, defineComponent, PropType } from 'vue';
 
 type User = {
 	id: number;
@@ -56,8 +55,7 @@ export default defineComponent({
 			if (props.value === null) return null;
 
 			if (props.value.avatar?.id) {
-				const url = `${getRootPath()}assets/${props.value.avatar.id}?key=system-small-cover`;
-				return addTokenToURL(url);
+				return `${getRootPath()}assets/${props.value.avatar.id}?key=system-small-cover`;
 			}
 
 			return null;
diff --git a/app/src/interfaces/file-image/file-image.vue b/app/src/interfaces/file-image/file-image.vue
index 7da53a02e1..7145b9d4c2 100644
--- a/app/src/interfaces/file-image/file-image.vue
+++ b/app/src/interfaces/file-image/file-image.vue
@@ -15,7 +15,7 @@
 				</span>
 			</div>
 
-			<img
+			<v-image
 				v-else-if="image.type.startsWith('image')"
 				:src="src"
 				:width="image.width"
@@ -131,12 +131,11 @@ const src = computed(() => {
 	if (!image.value) return null;
 
 	if (image.value.type.includes('svg')) {
-		return addTokenToURL(getRootPath() + `assets/${image.value.id}`);
+		return getRootPath() + `assets/${image.value.id}`;
 	}
 	if (image.value.type.includes('image')) {
 		const fit = props.crop ? 'cover' : 'contain';
-		const url = getRootPath() + `assets/${image.value.id}?key=system-large-${fit}&cache-buster=${cacheBuster.value}`;
-		return addTokenToURL(url);
+		return getRootPath() + `assets/${image.value.id}?key=system-large-${fit}&cache-buster=${cacheBuster.value}`;
 	}
 
 	return null;
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index 165d8d4be7..360e5ab633 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -21,7 +21,7 @@
 									'is-svg': file?.type?.includes('svg'),
 								}"
 							>
-								<img
+								<v-image
 									v-if="imageThumbnail && !imageThumbnailError"
 									:src="imageThumbnail"
 									:alt="file?.title"
@@ -144,7 +144,6 @@ import api from '@/api';
 import readableMimeType from '@/utils/readable-mime-type';
 import { getRootPath } from '@/utils/get-root-path';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { addTokenToURL } from '@/api';
 import DrawerItem from '@/views/private/components/drawer-item';
 import { addQueryToPath } from '@/utils/add-query-to-path';
 import { useRelationM2O, useRelationSingle, RelationQuerySingle } from '@/composables/use-relation';
@@ -198,7 +197,7 @@ const fileExtension = computed(() => {
 
 const assetURL = computed(() => {
 	const id = typeof props.value === 'string' ? props.value : props.value?.id;
-	return addTokenToURL(getRootPath() + `assets/${id}`);
+	return getRootPath() + `assets/${id}`;
 });
 
 const imageThumbnail = computed(() => {
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index d746badd79..ce98fc662e 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -320,9 +320,11 @@ function getUrl(junctionRow: Record<string, any>, addDownload?: boolean) {
 
 	const key = junctionRow[junctionField]?.id ?? junctionRow[junctionField] ?? null;
 	if (!key) return null;
+
 	if (addDownload) {
 		return addTokenToURL(getRootPath() + `assets/${key}?download`);
 	}
+
 	return addTokenToURL(getRootPath() + `assets/${key}`);
 }
 
@@ -429,4 +431,8 @@ const selectAllowed = computed(() => {
 		--v-icon-color: var(--danger);
 	}
 }
+
+.render-template {
+	height: 100%;
+}
 </style>
diff --git a/app/src/layouts/cards/components/card.vue b/app/src/layouts/cards/components/card.vue
index d0e74843a4..2d5319ee78 100644
--- a/app/src/layouts/cards/components/card.vue
+++ b/app/src/layouts/cards/components/card.vue
@@ -11,16 +11,13 @@
 			<template v-else>
 				<v-icon-file v-if="type || imgError" :ext="type" />
 				<template v-else>
-					<img
-						v-if="imageSource"
-						class="image"
-						loading="lazy"
-						:src="imageSource"
-						alt=""
+					<v-image
+						v-if="showThumbnail"
+						:class="imageInfo.fileType"
+						:src="imageInfo.source"
+						:alt="item.title"
 						role="presentation"
-						@error="imgError = true"
 					/>
-					<img v-else-if="svgSource" class="svg" :src="svgSource" alt="" role="presentation" @error="imgError = true" />
 					<v-icon v-else large :name="icon" />
 				</template>
 			</template>
@@ -34,11 +31,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
 import { getRootPath } from '@/utils/get-root-path';
-import { addTokenToURL } from '@/api';
 import { readableMimeType } from '@/utils/readable-mime-type';
+import { computed, defineComponent, PropType, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 type File = {
 	[key: string]: any;
@@ -102,10 +98,14 @@ export default defineComponent({
 			return readableMimeType(props.file.type, true);
 		});
 
-		const imageSource = computed(() => {
+		const imageInfo = computed(() => {
+			let fileType = undefined;
 			if (!props.file || !props.file.type) return null;
-			if (props.file.type.startsWith('image') === false) return null;
-			if (props.file.type.includes('svg')) return null;
+			if (props.file.type.startsWith('image') === true) fileType = 'image';
+			if (props.file.type.includes('svg')) fileType = 'svg';
+
+			// Show icon instead of thumbnail
+			if (!fileType) return { source: undefined, fileType };
 
 			let key = 'system-medium-cover';
 
@@ -113,26 +113,20 @@ export default defineComponent({
 				key = 'system-medium-contain';
 			}
 
-			const url = getRootPath() + `assets/${props.file.id}?key=${key}&modified=${props.file.modified_on}`;
-			return addTokenToURL(url);
+			const source = getRootPath() + `assets/${props.file.id}?key=${key}&modified=${props.file.modified_on}`;
+
+			return { source, fileType };
 		});
-
-		const svgSource = computed(() => {
-			if (!props.file || !props.file.type) return null;
-			if (props.file.type.startsWith('image') === false) return null;
-			if (props.file.type.includes('svg') === false) return null;
-
-			const url = getRootPath() + `assets/${props.file.id}?modified=${props.file.modified_on}`;
-			return addTokenToURL(url);
+		const showThumbnail = computed(() => {
+			return imageInfo.value && imageInfo.value.fileType;
 		});
-
 		const selectionIcon = computed(() => {
 			if (!props.item) return 'radio_button_unchecked';
 
 			return props.modelValue.includes(props.item[props.itemKey]) ? 'check_circle' : 'radio_button_unchecked';
 		});
 
-		return { imageSource, svgSource, type, selectionIcon, toggleSelection, handleClick, imgError };
+		return { imageInfo, type, showThumbnail, selectionIcon, toggleSelection, handleClick, imgError };
 
 		function toggleSelection() {
 			if (!props.item) return null;
diff --git a/app/src/layouts/map/map.vue b/app/src/layouts/map/map.vue
index d72cce745f..bfb744a716 100644
--- a/app/src/layouts/map/map.vue
+++ b/app/src/layouts/map/map.vue
@@ -335,6 +335,10 @@ export default defineComponent({
 
 		display: inline-block;
 		margin-right: 10px;
+
+		button {
+			box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
+		}
 	}
 }
 
@@ -348,12 +352,3 @@ export default defineComponent({
 	opacity: 0;
 }
 </style>
-<style lang="scss">
-.footer {
-	.pagination {
-		button {
-			box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
-		}
-	}
-}
-</style>
diff --git a/app/src/modules/files/routes/item.vue b/app/src/modules/files/routes/item.vue
index 6553fe226e..b116f4a92e 100644
--- a/app/src/modules/files/routes/item.vue
+++ b/app/src/modules/files/routes/item.vue
@@ -240,12 +240,10 @@ const confirmDelete = ref(false);
 const editActive = ref(false);
 const fileSrc = computed(() => {
 	if (item.value && item.value.modified_on) {
-		return addTokenToURL(
-			getRootPath() + `assets/${props.primaryKey}?cache-buster=${item.value.modified_on}&key=system-large-contain`
-		);
+		return getRootPath() + `assets/${props.primaryKey}?cache-buster=${item.value.modified_on}&key=system-large-contain`;
 	}
 
-	return addTokenToURL(getRootPath() + `assets/${props.primaryKey}?key=system-large-contain`);
+	return getRootPath() + `assets/${props.primaryKey}?key=system-large-contain`;
 });
 
 // These are the fields that will be prevented from showing up in the form because they'll be shown in the sidebar
diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
index 445f6e6c4e..0fa6663b0b 100644
--- a/app/src/modules/users/routes/item.vue
+++ b/app/src/modules/users/routes/item.vue
@@ -105,7 +105,7 @@
 			<div v-if="isNew === false" class="user-box">
 				<div class="avatar">
 					<v-skeleton-loader v-if="loading || previewLoading" />
-					<img
+					<v-image
 						v-else-if="avatarSrc && !avatarError"
 						:src="avatarSrc"
 						:alt="t('avatar')"
@@ -182,30 +182,29 @@
 </template>
 
 <script lang="ts">
+import { ComponentPublicInstance, computed, defineComponent, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, toRefs, ref, watch, ComponentPublicInstance } from 'vue';
 
-import UsersNavigation from '../components/navigation.vue';
-import { setLanguage } from '@/lang/set-language';
-import { useRouter } from 'vue-router';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
-import useItem from '@/composables/use-item';
-import SaveOptions from '@/views/private/components/save-options';
 import api from '@/api';
-import { useFieldsStore, useCollectionsStore, useServerStore } from '@/stores/';
-import useFormFields from '@/composables/use-form-fields';
-import { Field } from '@directus/shared/types';
-import UserInfoSidebarDetail from '../components/user-info-sidebar-detail.vue';
-import { getRootPath } from '@/utils/get-root-path';
-import useShortcut from '@/composables/use-shortcut';
-import { useCollection } from '@directus/shared/composables';
-import { userName } from '@/utils/user-name';
-import { usePermissions } from '@/composables/use-permissions';
-import { unexpectedError } from '@/utils/unexpected-error';
-import { addTokenToURL } from '@/api';
-import { useUserStore } from '@/stores';
 import useEditsGuard from '@/composables/use-edits-guard';
+import useFormFields from '@/composables/use-form-fields';
+import useItem from '@/composables/use-item';
+import { usePermissions } from '@/composables/use-permissions';
+import useShortcut from '@/composables/use-shortcut';
+import { setLanguage } from '@/lang/set-language';
+import { useUserStore } from '@/stores';
+import { useCollectionsStore, useFieldsStore, useServerStore } from '@/stores/';
+import { getRootPath } from '@/utils/get-root-path';
+import { unexpectedError } from '@/utils/unexpected-error';
+import { userName } from '@/utils/user-name';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
+import SaveOptions from '@/views/private/components/save-options';
+import { useCollection } from '@directus/shared/composables';
+import { Field } from '@directus/shared/types';
+import { useRouter } from 'vue-router';
+import UsersNavigation from '../components/navigation.vue';
+import UserInfoSidebarDetail from '../components/user-info-sidebar-detail.vue';
 
 export default defineComponent({
 	name: 'UsersItem',
@@ -477,7 +476,7 @@ export default defineComponent({
 					});
 
 					avatarSrc.value = response.data.data.avatar?.id
-						? addTokenToURL(getRootPath() + `assets/${response.data.data.avatar.id}?key=system-medium-cover`)
+						? getRootPath() + `assets/${response.data.data.avatar.id}?key=system-medium-cover`
 						: null;
 
 					roleName.value = response.data.data?.role?.name;
diff --git a/app/src/stores/server.ts b/app/src/stores/server.ts
index 476d9ded4d..cdb390021c 100644
--- a/app/src/stores/server.ts
+++ b/app/src/stores/server.ts
@@ -1,10 +1,10 @@
-import api from '@/api';
+import api, { replaceQueue } from '@/api';
 import { AUTH_SSO_DRIVERS, DEFAULT_AUTH_PROVIDER } from '@/constants';
+import { i18n } from '@/lang';
 import { setLanguage } from '@/lang/set-language';
 import formatTitle from '@directus/format-title';
 import { acceptHMRUpdate, defineStore } from 'pinia';
-import { computed, reactive, ref, unref } from 'vue';
-import { i18n } from '@/lang';
+import { computed, reactive, unref } from 'vue';
 
 type Info = {
 	project: null | {
@@ -31,6 +31,12 @@ type Info = {
 		uptime: number;
 		totalmem: number;
 	};
+	rateLimiter?:
+		| false
+		| {
+				points: number;
+				duration: number;
+		  };
 };
 
 type Auth = {
@@ -78,6 +84,13 @@ export const useServerStore = defineStore('serverStore', () => {
 		auth.disableDefault = authResponse.data.disableDefault;
 
 		await setLanguage(unref(info)?.project?.default_language ?? 'en-US');
+
+		if (serverInfoResponse.data.data?.rateLimit === false) {
+			await replaceQueue();
+		} else {
+			const { duration, points } = serverInfoResponse.data.data.rateLimit;
+			await replaceQueue({ intervalCap: points - 10, interval: duration * 1000, carryoverConcurrencyCount: true });
+		}
 	};
 
 	const dehydrate = () => {
diff --git a/app/src/utils/readable-mime-type/types.json b/app/src/utils/readable-mime-type/types.json
index b411ba4f56..e42d01d4e5 100644
--- a/app/src/utils/readable-mime-type/types.json
+++ b/app/src/utils/readable-mime-type/types.json
@@ -264,6 +264,7 @@
 	"application/java-serialized-object": "Java Serialized Object",
 	"text/x-java-source,java": "Java Source File",
 	"application/javascript": "JavaScript",
+	"text/javascript": "JavaScript",
 	"application/json": "JSON",
 	"application/vnd.joost.joda-archive": "Joda Archive",
 	"video/jpm": "JPG",
diff --git a/app/src/views/private/components/comments-sidebar-detail/comment-input.vue b/app/src/views/private/components/comments-sidebar-detail/comment-input.vue
index 19b6278e1f..376b5a1304 100644
--- a/app/src/views/private/components/comments-sidebar-detail/comment-input.vue
+++ b/app/src/views/private/components/comments-sidebar-detail/comment-input.vue
@@ -30,7 +30,7 @@
 				>
 					<v-list-item-icon>
 						<v-avatar x-small>
-							<img v-if="user.avatar" :src="avatarSource(user.avatar)" />
+							<v-image v-if="user.avatar" :src="avatarSource(user.avatar)" />
 							<v-icon v-else name="person_outline" />
 						</v-avatar>
 					</v-list-item-icon>
@@ -66,19 +66,18 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { ref, watch, ComponentPublicInstance, computed } from 'vue';
-import api, { addTokenToURL } from '@/api';
-import useShortcut from '@/composables/use-shortcut';
-import { notify } from '@/utils/notify';
-import { userName } from '@/utils/user-name';
-import { unexpectedError } from '@/utils/unexpected-error';
-import { throttle } from 'lodash';
-import axios, { CancelTokenSource } from 'axios';
-import { User } from '@directus/shared/types';
-import { getRootPath } from '@/utils/get-root-path';
+import api from '@/api';
 import vTemplateInput from '@/components/v-template-input.vue';
-import { cloneDeep } from 'lodash';
+import useShortcut from '@/composables/use-shortcut';
+import { getRootPath } from '@/utils/get-root-path';
+import { notify } from '@/utils/notify';
+import { unexpectedError } from '@/utils/unexpected-error';
+import { userName } from '@/utils/user-name';
+import { User } from '@directus/shared/types';
+import axios, { CancelTokenSource } from 'axios';
+import { cloneDeep, throttle } from 'lodash';
+import { ComponentPublicInstance, computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { Activity } from './types';
 
 const props = withDefaults(
@@ -287,7 +286,7 @@ function triggerSearch({ searchQuery, caretPosition }: { searchQuery: string; ca
 
 function avatarSource(url: string) {
 	if (url === null) return '';
-	return addTokenToURL(getRootPath() + `assets/${url}?key=system-small-cover`);
+	return getRootPath() + `assets/${url}?key=system-small-cover`;
 }
 
 async function postComment() {
diff --git a/app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue b/app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue
index 66b5c0932d..8956a2e502 100644
--- a/app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue
+++ b/app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="comment-header">
 		<v-avatar x-small>
-			<img v-if="avatarSource" :src="avatarSource" :alt="userName(activity.user)" />
+			<v-image v-if="avatarSource" :src="avatarSource" :alt="userName(activity.user)" />
 			<v-icon v-else name="person_outline" />
 		</v-avatar>
 
@@ -60,14 +60,14 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
-import { Activity } from './types';
-import format from 'date-fns/format';
 import { getRootPath } from '@/utils/get-root-path';
 import { userName } from '@/utils/user-name';
+import format from 'date-fns/format';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Activity } from './types';
 
-import api, { addTokenToURL } from '@/api';
+import api from '@/api';
 import { unexpectedError } from '@/utils/unexpected-error';
 
 const props = defineProps<{
@@ -91,7 +91,7 @@ const formattedTime = computed(() => {
 const avatarSource = computed(() => {
 	if (!props.activity.user?.avatar) return null;
 
-	return addTokenToURL(getRootPath() + `assets/${props.activity.user.avatar.id}?key=system-small-cover`);
+	return getRootPath() + `assets/${props.activity.user.avatar.id}?key=system-small-cover`;
 });
 
 const { confirmDelete, deleting, remove } = useDelete();
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index e897ba7cce..c6d4324f6f 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -60,19 +60,19 @@
 </template>
 
 <script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, computed, PropType, watch, toRefs } from 'vue';
-import api, { addTokenToURL } from '@/api';
+import api from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
 import FilePreview from '@/views/private/components/file-preview';
+import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import { useCollection } from '@directus/shared/composables';
-import { useFieldsStore, useRelationsStore } from '@/stores';
-import { Field, Relation } from '@directus/shared/types';
-import { unexpectedError } from '@/utils/unexpected-error';
 import { usePermissions } from '@/composables/use-permissions';
 import useTemplateData from '@/composables/use-template-data';
+import { useFieldsStore, useRelationsStore } from '@/stores';
+import { unexpectedError } from '@/utils/unexpected-error';
 import { validateItem } from '@/utils/validate-item';
+import { useCollection } from '@directus/shared/composables';
+import { Field, Relation } from '@directus/shared/types';
 
 export default defineComponent({
 	components: { FilePreview },
@@ -236,7 +236,7 @@ export default defineComponent({
 				const fileData = item.value?.[props.junctionField];
 				if (!fileData) return null;
 
-				const src = addTokenToURL(getRootPath() + `assets/${fileData.id}?key=system-large-contain`);
+				const src = getRootPath() + `assets/${fileData.id}?key=system-large-contain`;
 				return { ...fileData, src };
 			});
 
diff --git a/app/src/views/private/components/file-lightbox/file-lightbox.vue b/app/src/views/private/components/file-lightbox/file-lightbox.vue
index b7f9cf1448..d0c4b92892 100644
--- a/app/src/views/private/components/file-lightbox/file-lightbox.vue
+++ b/app/src/views/private/components/file-lightbox/file-lightbox.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch, computed } from 'vue';
-import api, { addTokenToURL } from '@/api';
+import api from '@/api';
+import { computed, defineComponent, ref, watch } from 'vue';
 
-import { nanoid } from 'nanoid';
 import FilePreview from '@/views/private/components/file-preview';
+import { nanoid } from 'nanoid';
 
 import { getRootPath } from '@/utils/get-root-path';
 import { unexpectedError } from '@/utils/unexpected-error';
@@ -71,7 +71,7 @@ export default defineComponent({
 		const cacheBuster = ref(nanoid());
 
 		const fileSrc = computed(() => {
-			return addTokenToURL(getRootPath() + `assets/${props.id}?cache-buster=${cacheBuster.value}`);
+			return getRootPath() + `assets/${props.id}?cache-buster=${cacheBuster.value}`;
 		});
 
 		watch(
diff --git a/app/src/views/private/components/file-preview/file-preview.vue b/app/src/views/private/components/file-preview/file-preview.vue
index b7c37a80ed..4accf96d94 100644
--- a/app/src/views/private/components/file-preview/file-preview.vue
+++ b/app/src/views/private/components/file-preview/file-preview.vue
@@ -1,12 +1,12 @@
 <template>
 	<div v-if="type && !imgError" class="file-preview" :class="{ modal: inModal, small: isSmall, svg: isSVG }">
 		<div v-if="type === 'image'" class="image" @click="$emit('click')">
-			<img :src="src" :width="width" :height="height" :alt="title" @error="imgError = true" />
+			<v-image :src="src" :width="width" :height="height" :alt="title" @error="imgError = true" />
 		</div>
 
-		<video v-else-if="type === 'video'" controls :src="src" />
+		<video v-else-if="type === 'video'" controls :src="authenticatedSrc" />
 
-		<audio v-else-if="type === 'audio'" controls :src="src" />
+		<audio v-else-if="type === 'audio'" controls :src="authenticatedSrc" />
 
 		<div v-else class="fallback">
 			<v-icon-file :ext="type" />
@@ -17,6 +17,7 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import { readableMimeType } from '@/utils/readable-mime-type';
+import { addTokenToURL } from '@/api';
 
 interface Props {
 	mime: string;
@@ -55,6 +56,8 @@ const isSVG = computed(() => props.mime.includes('svg'));
 
 const maxHeight = computed(() => Math.min(props.height ?? 528, 528) + 'px');
 const isSmall = computed(() => props.height < 528);
+
+const authenticatedSrc = computed(() => addTokenToURL(props.src));
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index 338dde344d..21996b14ca 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -22,7 +22,7 @@
 
 		<div v-show="imageData && !loading && !error" class="editor-container">
 			<div class="editor">
-				<img ref="imageElement" :src="imageURL" role="presentation" alt="" @load="onImageLoad" />
+				<v-image ref="imageElement" :src="imageURL" role="presentation" alt="" @load="onImageLoad" />
 			</div>
 
 			<div class="toolbar">
@@ -115,16 +115,15 @@
 </template>
 
 <script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, watch, computed, reactive, nextTick } from 'vue';
 import api from '@/api';
+import { computed, defineComponent, nextTick, reactive, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import Cropper from 'cropperjs';
-import { nanoid } from 'nanoid';
-import throttle from 'lodash/throttle';
-import { unexpectedError } from '@/utils/unexpected-error';
-import { addTokenToURL } from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
+import { unexpectedError } from '@/utils/unexpected-error';
+import Cropper from 'cropperjs';
+import throttle from 'lodash/throttle';
+import { nanoid } from 'nanoid';
 
 type Image = {
 	type: string;
@@ -191,7 +190,7 @@ export default defineComponent({
 		});
 
 		const imageURL = computed(() => {
-			return addTokenToURL(`${getRootPath()}assets/${props.id}?${nanoid()}`);
+			return `${getRootPath()}assets/${props.id}?${nanoid()}`;
 		});
 
 		return {
diff --git a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
index f8e2cc0342..8c12e24ee5 100644
--- a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
@@ -36,7 +36,7 @@
 
 			<router-link :to="userProfileLink">
 				<v-avatar v-tooltip.right="userFullName" tile large :class="{ 'no-avatar': !avatarURL }">
-					<img
+					<v-image
 						v-if="avatarURL && !avatarError"
 						:src="avatarURL"
 						:alt="userFullName"
@@ -51,12 +51,11 @@
 </template>
 
 <script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, ref } from 'vue';
-import { useUserStore, useAppStore, useNotificationsStore } from '@/stores/';
+import { useAppStore, useNotificationsStore, useUserStore } from '@/stores/';
 import { getRootPath } from '@/utils/get-root-path';
-import { addTokenToURL } from '@/api';
 import { storeToRefs } from 'pinia';
+import { computed, defineComponent, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
 	setup() {
@@ -74,7 +73,7 @@ export default defineComponent({
 
 		const avatarURL = computed<string | null>(() => {
 			if (!userStore.currentUser || !('avatar' in userStore.currentUser) || !userStore.currentUser?.avatar) return null;
-			return addTokenToURL(getRootPath() + `assets/${userStore.currentUser.avatar.id}?key=system-medium-cover`);
+			return getRootPath() + `assets/${userStore.currentUser.avatar.id}?key=system-medium-cover`;
 		});
 
 		const avatarError = ref(null);
diff --git a/app/src/views/private/components/module-bar-logo/module-bar-logo.vue b/app/src/views/private/components/module-bar-logo/module-bar-logo.vue
index e3586763ae..2525396756 100644
--- a/app/src/views/private/components/module-bar-logo/module-bar-logo.vue
+++ b/app/src/views/private/components/module-bar-logo/module-bar-logo.vue
@@ -12,18 +12,17 @@
 			<transition name="fade">
 				<v-progress-linear v-if="showLoader" indeterminate rounded @animationiteration="stopSpinnerIfQueueIsEmpty" />
 			</transition>
-			<img class="custom-logo" :src="customLogoPath" alt="Project Logo" />
+			<v-image class="custom-logo" :src="customLogoPath" alt="Project Logo" />
 		</template>
 		<div v-else class="logo" :class="{ running: showLoader }" @animationiteration="stopSpinnerIfQueueIsEmpty" />
 	</component>
 </template>
 
 <script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, computed, watch, toRefs } from 'vue';
-import { useSettingsStore, useRequestsStore } from '@/stores/';
+import { useRequestsStore, useSettingsStore } from '@/stores/';
 import { getRootPath } from '@/utils/get-root-path';
-import { addTokenToURL } from '@/api';
+import { computed, defineComponent, ref, toRefs, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
 	setup() {
@@ -35,7 +34,7 @@ export default defineComponent({
 		const customLogoPath = computed<string | null>(() => {
 			if (settingsStore.settings === null) return null;
 			if (!settingsStore.settings?.project_logo) return null;
-			return addTokenToURL(getRootPath() + `assets/${settingsStore.settings.project_logo}`);
+			return getRootPath() + `assets/${settingsStore.settings.project_logo}`;
 		});
 
 		const showLoader = ref(false);
diff --git a/app/src/views/private/components/user-popover/user-popover.vue b/app/src/views/private/components/user-popover/user-popover.vue
index da04067b47..15a0ddc816 100644
--- a/app/src/views/private/components/user-popover/user-popover.vue
+++ b/app/src/views/private/components/user-popover/user-popover.vue
@@ -17,7 +17,7 @@
 
 		<div v-else-if="data" class="user-box" @click.stop="navigateToUser">
 			<v-avatar x-large class="avatar">
-				<img v-if="avatarSrc" :src="avatarSrc" :alt="data.first_name" />
+				<v-image v-if="avatarSrc" :src="avatarSrc" :alt="data.first_name" />
 				<v-icon v-else name="person" />
 			</v-avatar>
 			<div class="data">
@@ -30,14 +30,13 @@
 </template>
 
 <script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, watch, onUnmounted, computed } from 'vue';
 import api from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
 import { userName } from '@/utils/user-name';
-import { addTokenToURL } from '@/api';
-import { useRouter } from 'vue-router';
 import { User } from '@directus/shared/types';
+import { computed, defineComponent, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
 	props: {
@@ -59,7 +58,7 @@ export default defineComponent({
 			if (data.value === null) return null;
 
 			if (data.value.avatar?.id) {
-				return addTokenToURL(`${getRootPath()}assets/${data.value.avatar.id}?key=system-medium-cover`);
+				return `${getRootPath()}assets/${data.value.avatar.id}?key=system-medium-cover`;
 			}
 			return null;
 		});
diff --git a/app/src/views/public/public-view.vue b/app/src/views/public/public-view.vue
index 5c21d3e461..a28b8a94e9 100644
--- a/app/src/views/public/public-view.vue
+++ b/app/src/views/public/public-view.vue
@@ -3,7 +3,7 @@
 		<div class="container" :class="{ wide }">
 			<div class="title-box">
 				<div v-if="info?.project?.project_logo" class="logo" :style="{ backgroundColor: info?.project.project_color }">
-					<img :src="logoURL" :alt="info?.project.project_name || 'Logo'" />
+					<v-image :src="logoURL" :alt="info?.project.project_name || 'Logo'" />
 				</div>
 				<div v-else class="logo" :style="{ backgroundColor: info?.project?.project_color }">
 					<img src="./logo-light.svg" alt="Directus" class="directus-logo" />
@@ -47,7 +47,7 @@
 			</svg>
 
 			<transition name="scale">
-				<img v-if="foregroundURL" class="foreground" :src="foregroundURL" :alt="info?.project?.project_name" />
+				<v-image v-if="foregroundURL" class="foreground" :src="foregroundURL" :alt="info?.project?.project_name" />
 			</transition>
 			<div class="note-container">
 				<div v-if="info?.project?.public_note" v-md="info?.project.public_note" class="note" />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f547239e1a..9ffac50eee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14770,7 +14770,7 @@ packages:
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
-      jest: 28.1.2_dyhfsldgbafx4up6nvciefunqu
+      jest: 28.1.2
       jest-util: 28.1.3
       json5: 2.2.1
       lodash.memoize: 4.1.2