Fix file-preview on file detail + refresh timing

src/api.ts

@@ -56,6 +56,8 @@ export const onError = async (error: RequestError) => {
 	if (status === 401 && code === 'INVALID_CREDENTIALS') {
 		try {
 			await refresh();
+
+			/** @todo retry failed request */
 		} catch {
 			logout({ reason: LogoutReason.ERROR_SESSION_EXPIRED });
 		}

src/auth.ts

@@ -44,7 +44,7 @@ export async function refresh({ navigate }: LogoutOptions = { navigate: true })
 
 		// Refresh the token 10 seconds before the access token expires. This means the user will stay
 		// logged in without any noticable hickups or delays
-		setTimeout(() => refresh(), response.data.data.expires * 1000 + 10 * 1000);
+		setTimeout(() => refresh(), response.data.data.expires * 1000 - 10 * 1000);
 		appStore.state.authenticated = true;
 	} catch (error) {
 		await logout({ navigate, reason: LogoutReason.ERROR_SESSION_EXPIRED });

src/modules/files/routes/detail/detail.vue

@@ -81,8 +81,8 @@
 
 		<div class="file-detail">
 			<file-preview
-				v-if="isBatch === false && item && item.data"
-				:src="`${item.data.full_url}?cache-buster=${cacheBuster}`"
+				v-if="isBatch === false && item"
+				:src="fileSrc"
 				:mime="item.type"
 				:width="item.width"
 				:height="item.height"
@@ -162,6 +162,7 @@ import marked from 'marked';
 import useFormFields from '@/composables/use-form-fields';
 import FolderPicker from '../../components/folder-picker';
 import api from '@/api';
+import getRootPath from '@/utils/get-root-path';
 
 type Values = {
 	[field: string]: any;
@@ -225,6 +226,12 @@ export default defineComponent({
 		const cacheBuster = ref(nanoid());
 		const editActive = ref(false);
 		const previewActive = ref(false);
+		const fileSrc = computed(() => {
+			return (
+				getRootPath() +
+				`assets/${props.primaryKey}?cache-buster=${cacheBuster.value}&key=directus-large-contain`
+			);
+		});
 
 		// These are the fields that will be prevented from showing up in the form
 		const fieldsBlacklist: string[] = [
@@ -282,6 +289,7 @@ export default defineComponent({
 			moveToFolder,
 			moving,
 			selectedFolder,
+			fileSrc,
 		};
 
 		function changeCacheBuster() {

src/views/private/components/file-lightbox/file-lightbox.vue

@@ -8,7 +8,7 @@
 
 		<file-preview
 			v-else-if="file"
-			:src="`${file.data.full_url}?cache-buster=${cacheBuster}`"
+			:src="fileSrc"
 			:mime="file.type"
 			:width="file.width"
 			:height="file.height"
@@ -30,10 +30,9 @@ import api from '@/api';
 import { nanoid } from 'nanoid';
 import FilePreview from '@/views/private/components/file-preview';
 
+import getRootPath from '@/utils/get-root-path';
+
 type File = {
-	data: {
-		full_url: string;
-	};
 	type: string;
 	width: number | null;
 	height: number | null;
@@ -48,7 +47,7 @@ export default defineComponent({
 	},
 	props: {
 		id: {
-			type: Number,
+			type: String,
 			required: true,
 		},
 		active: {
@@ -74,6 +73,10 @@ export default defineComponent({
 		const file = ref<File | null>(null);
 		const cacheBuster = ref(nanoid());
 
+		const fileSrc = computed(() => {
+			return getRootPath() + `assets/${props.id}?cache-buster=${cacheBuster}`;
+		});
+
 		watch(
 			() => props.id,
 			(newID, oldID) => {
@@ -84,7 +87,7 @@ export default defineComponent({
 			{ immediate: true }
 		);
 
-		return { _active, cacheBuster, loading, error, file };
+		return { _active, cacheBuster, loading, error, file, fileSrc };
 
 		async function fetchFile() {
 			cacheBuster.value = nanoid();
@@ -94,7 +97,7 @@ export default defineComponent({
 			try {
 				const response = await api.get(`/files/${props.id}`, {
 					params: {
-						fields: ['data', 'type', 'width', 'height', 'title'],
+						fields: ['type', 'width', 'height', 'title'],
 					},
 				});
 

src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue

@@ -112,6 +112,7 @@ export default defineComponent({
 				loading.value = true;
 
 				try {
+					/** @todo use endpoint thing where startswith directus_ etc */
 					const response = await api.get(`/items/${collection}/${primaryKey}/revisions`, {
 						params: {
 							fields: [