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>

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;

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(() => {

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>