Fully migrate to the new Virtual Grid

Signed-off-by: Corentin Mors <corentin.mors@dashlane.com>

1 files changed, 24 insertions, 38 deletions

diff --git a/src/components/File.vue b/src/components/File.vue
index 0b301ec3..591a78b9 100644
--- a/src/components/File.vue
+++ b/src/components/File.vue
@@ -1,10 +1,10 @@
 <!--
- - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @author John Molakvoæ <skjnldsv@protonmail.com>
+ - @copyright Copyright (c) 2020 Corentin Mors
  -
  - @license GNU AGPL version 3 or any later version
  -
+ - @author Corentin Mors <medias@pixelswap.fr>
+ -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
@@ -26,13 +26,13 @@
 		:href="davPath"
 		:aria-label="ariaLabel"
 		@click.prevent="openViewer">
-		<div v-if="mime.includes('video') && hasPreview" class="icon-video-white" />
+		<div v-if="item.injected.mime.includes('video') && hasPreview" class="icon-video-white" />
 		<!-- image and loading placeholder -->
 		<transition name="fade">
 			<img v-show="loaded"
 				ref="img"
 				:src="src"
-				:alt="basename"
+				:alt="item.injected.basename"
 				:aria-describedby="ariaUuid"
 				@load="onLoad">
 		</transition>
@@ -45,7 +45,7 @@
 		</svg>
 
 		<!-- image name and cover -->
-		<p :id="ariaUuid" class="hidden-visually">{{ basename }}</p>
+		<p :id="ariaUuid" class="hidden-visually">{{ item.injected.basename }}</p>
 		<div class="cover" role="none" />
 	</a>
 </template>
@@ -59,34 +59,10 @@ export default {
 	inheritAttrs: false,
 
 	props: {
-		basename: {
-			type: String,
-			required: true,
-		},
-		filename: {
-			type: String,
-			required: true,
-		},
-		etag: {
-			type: String,
-			required: true,
-		},
-		fileid: {
-			type: Number,
+		item: {
+			type: Object,
 			required: true,
 		},
-		mime: {
-			type: String,
-			required: true,
-		},
-		list: {
-			type: Array,
-			required: true,
-		},
-		loadMore: {
-			type: Function,
-			default: () => ([]),
-		},
 	},
 
 	data() {
@@ -97,19 +73,19 @@ export default {
 
 	computed: {
 		davPath() {
-			return generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + this.filename
+			return generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + this.item.injected.filename
 		},
 		ariaUuid() {
-			return `image-${this.fileid}`
+			return `image-${this.item.injected.fileid}`
 		},
 		ariaLabel() {
-			return t('photos', 'Open the full size "{name}" image', { name: this.basename })
+			return t('photos', 'Open the full size "{name}" image', { name: this.item.injected.basename })
 		},
 		isImage() {
-			return this.mime.startsWith('image')
+			return this.item.injected.mime.startsWith('image')
 		},
 		src() {
-			return generateUrl(`/core/preview?fileId=${this.fileid}&x=${256}&y=${256}&a=false&v=${this.etag}`)
+			return generateUrl(`/core/preview?fileId=${this.item.injected.fileid}&x=${256}&y=${256}&a=false&v=${this.item.injected.etag}`)
 		},
 	},
 
@@ -120,8 +96,14 @@ export default {
 
 	methods: {
 		openViewer() {
-			OCA.Viewer.open({ path: this.filename, list: this.list, loadMore: this.loadMore })
+			OCA.Viewer.open({
+				path: this.item.injected.filename,
+				list: this.item.injected.list,
+				loadMore: async() => await this.item.injected.loadMore(true),
+			})
 		},
+
+		/** When the image is fully loaded by browser we remove the placeholder */
 		onLoad() {
 			this.loaded = true
 		},
@@ -153,4 +135,8 @@ svg {
 	width: 70%;
 	height: 70%;
 }
+
+.file--clear {
+	background: var(--color-background-hover);
+}
 </style>