From 9a107f915e613cd6281017b18ddc2b9bf96e6659 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 9 Jul 2020 18:22:23 -0400
Subject: [PATCH] Fix file-preview on file detail + refresh timing

---
 src/api.ts                                      |  2 ++
 src/auth.ts                                     |  2 +-
 src/modules/files/routes/detail/detail.vue      | 12 ++++++++++--
 .../components/file-lightbox/file-lightbox.vue  | 17 ++++++++++-------
 .../revisions-drawer-detail.vue                 |  1 +
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index 45fe58253e..7cf652f640 100644
--- a/src/api.ts
+++ b/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 });
 		}
diff --git a/src/auth.ts b/src/auth.ts
index d86da813da..9daa33a614 100644
--- a/src/auth.ts
+++ b/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 });
diff --git a/src/modules/files/routes/detail/detail.vue b/src/modules/files/routes/detail/detail.vue
index fef10e33b5..a761fa79a6 100644
--- a/src/modules/files/routes/detail/detail.vue
+++ b/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() {
diff --git a/src/views/private/components/file-lightbox/file-lightbox.vue b/src/views/private/components/file-lightbox/file-lightbox.vue
index 6942647228..90f7b49e15 100644
--- a/src/views/private/components/file-lightbox/file-lightbox.vue
+++ b/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'],
 					},
 				});
 
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue b/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
index 87fd0d32ac..64c1157e8e 100644
--- a/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
+++ b/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: [