quasar-ui-danx 0.4.79 → 0.4.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.79",
+  "version": "0.4.80",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/Form/Fields/MultiFileField.vue

@@ -27,7 +27,8 @@
         :class="filePreviewClass"
         :style="styleSize"
         :file="file"
-        :related-files="file.transcodes || uploadedFiles"
+        :show-transcodes="showTranscodes"
+        :related-files="uploadedFiles"
         downloadable
         :removable="!readonly && !disabled"
         @remove="onRemove(file)"
@@ -92,6 +93,7 @@ const props = withDefaults(defineProps<{
 	addIconClass?: string;
 	filePreviewClass?: string;
 	filePreviewBtnSize?: string;
+	showTranscodes?: boolean;
 }>(), {
 	modelValue: null,
 	field: null,

package/src/components/Utility/Files/FilePreview.vue

@@ -6,7 +6,7 @@
     <template v-if="computedImage">
       <div
         class="grow h-full"
-        @click="showPreview = true"
+        @click="onShowPreview"
       >
         <div
           v-if="isVideo"
@@ -143,8 +143,9 @@
 
 <script setup lang="ts">
 import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
-import { computed, ComputedRef, onMounted, ref } from "vue";
-import { download, FileUpload, uniqueBy } from "../../../helpers";
+import { computed, ComputedRef, ref, shallowRef } from "vue";
+import { danxOptions } from "../../../config";
+import { download, uniqueBy } from "../../../helpers";
 import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
 import { UploadedFile } from "../../../types";
 import { FullScreenCarouselDialog } from "../Dialogs";
@@ -171,6 +172,7 @@ export interface FilePreviewProps {
 	disabled?: boolean;
 	square?: boolean;
 	btnSize?: "xs" | "sm" | "md" | "lg";
+	showTranscodes?: boolean;
 }
 
 const emit = defineEmits(["remove"]);
@@ -207,10 +209,11 @@ const computedImage: ComputedRef<UploadedFile | null> = computed(() => {
 	return null;
 });
 
+const transcodes = shallowRef(props.file?.transcodes || null);
 const isUploading = computed(() => !props.file || props.file?.progress !== undefined);
 const statusMessage = computed(() => isUploading.value ? "Uploading..." : transcodingStatus.value?.message);
 const previewableFiles: ComputedRef<(UploadedFile | null)[] | null> = computed(() => {
-	return props.relatedFiles?.length > 0 ? uniqueBy([computedImage.value, ...props.relatedFiles], filesHaveSameUrl) : [computedImage.value];
+	return props.relatedFiles?.length > 0 ? uniqueBy([computedImage.value, ...(props.showTranscodes ? (transcodes.value || []) : props.relatedFiles)], filesHaveSameUrl) : [computedImage.value];
 });
 
 function filesHaveSameUrl(a: UploadedFile, b: UploadedFile) {
@@ -253,13 +256,6 @@ const transcodingStatus = computed(() => {
 	return status;
 });
 
-// Check for an active transcode and make sure the file is being polled for updates
-onMounted(() => {
-	if (transcodingStatus.value) {
-		(new FileUpload([])).waitForTranscode(props.file);
-	}
-});
-
 const isConfirmingRemove = ref(false);
 function onRemove() {
 	if (!isConfirmingRemove.value) {
@@ -271,6 +267,15 @@ function onRemove() {
 		emit("remove");
 	}
 }
+
+async function onShowPreview() {
+	showPreview.value = true;
+
+	if (props.showTranscodes && props.file && !transcodes.value) {
+		const file = await danxOptions.value.fileUpload.refreshFile(props.file.id) as UploadedFile;
+		transcodes.value = file.transcodes || [];
+	}
+}
 </script>
 
 <style module="cls" lang="scss">

package/src/helpers/FileUpload.ts

@@ -13,7 +13,6 @@ import {
 import { resolveFileLocation } from "./files";
 import { FlashMessages } from "./FlashMessages";
 import { storeObject } from "./objectStore";
-import { sleep } from "./utils";
 
 
 export class FileUpload {
@@ -231,7 +230,6 @@ export class FileUpload {
 							// Fire the file complete callbacks
 							this.fireCompleteCallback(fileUpload, storedFile);
 							this.checkAllComplete();
-							await this.waitForTranscode(storedFile);
 						} catch (error: any) {
 							this.errorHandler(e, fileUpload.file, error);
 						}
@@ -293,20 +291,6 @@ export class FileUpload {
 		return false;
 	}
 
-	/**
-	 * Keeps refreshing the file while there is transcoding in progress
-	 */
-	async waitForTranscode(file: UploadedFile) {
-		// Only allow waiting for transcode 1 time per file
-		if (!file.meta || file.meta.is_waiting_transcode) return;
-		file.meta.is_waiting_transcode = true;
-		let currentFile: UploadedFile | null = file;
-		while (currentFile && this.isTranscoding(currentFile)) {
-			await sleep(1000);
-			currentFile = await this.refreshFile(currentFile);
-		}
-	}
-
 	/**
 	 * Start uploading all files
 	 */