quasar-ui-danx 0.4.79 → 0.4.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.79",
+  "version": "0.4.81",
   "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/Buttons/ActionButton.vue

@@ -1,64 +1,66 @@
 <template>
-	<QBtn
-		:loading="isSaving"
-		class="shadow-none py-0"
-		:class="buttonClass"
-		:disable="disabled"
-		@click="()=> onAction()"
-	>
-		<div class="flex items-center flex-nowrap">
-			<component
-				:is="icon || typeOptions.icon"
-				class="transition-all"
-				:class="resolvedIconClass"
-			/>
-			<div
-				v-if="label || label === 0"
-				class="ml-2"
-				:class="labelClass"
-			>
-				{{ label }}
-			</div>
-			<slot />
-		</div>
-		<QTooltip
-			v-if="tooltip"
-			class="whitespace-nowrap"
-			:class="tooltipClass"
-		>
-			<slot name="tooltip">
-				{{ tooltip }}
-			</slot>
-		</QTooltip>
-		<QMenu
-			v-if="isConfirming"
-			:model-value="true"
-		>
-			<div class="p-4 bg-slate-600">
-				<div>{{ confirmText }}</div>
-				<div class="flex items-center flex-nowrap mt-2">
-					<div class="flex-grow">
-						<ActionButton
-							type="cancel"
-							color="gray"
-							@click="isConfirming = false"
-						/>
-					</div>
-					<ActionButton
-						type="confirm"
-						color="green"
-						@click="()=> onAction(true)"
-					/>
-				</div>
-			</div>
-		</QMenu>
-	</QBtn>
+  <QBtn
+    :loading="isSaving"
+    class="shadow-none py-0"
+    :class="buttonClass"
+    :disable="disabled"
+    @click="()=> onAction()"
+  >
+    <div class="flex items-center flex-nowrap">
+      <component
+        :is="icon || typeOptions.icon"
+        class="transition-all"
+        :class="resolvedIconClass"
+      />
+      <div
+        v-if="label || label === 0"
+        class="ml-2"
+        :class="labelClass"
+      >
+        {{ label }}
+      </div>
+      <slot />
+    </div>
+    <QTooltip
+      v-if="tooltip"
+      class="whitespace-nowrap"
+      :class="tooltipClass"
+    >
+      <slot name="tooltip">
+        {{ tooltip }}
+      </slot>
+    </QTooltip>
+    <QMenu
+      v-if="isConfirming"
+      :model-value="true"
+    >
+      <div class="p-4 bg-slate-600">
+        <div>{{ confirmText }}</div>
+        <div class="flex items-center flex-nowrap mt-2">
+          <div class="flex-grow">
+            <ActionButton
+              type="cancel"
+              color="gray"
+              @click="isConfirming = false"
+            />
+          </div>
+          <ActionButton
+            type="confirm"
+            color="green"
+            @click="()=> onAction(true)"
+          />
+        </div>
+      </div>
+    </QMenu>
+  </QBtn>
 </template>
 <script setup lang="ts">
 import {
+	FaSolidArrowRotateRight as RestartIcon,
 	FaSolidArrowsRotate as RefreshIcon,
 	FaSolidCircleCheck as ConfirmIcon,
 	FaSolidCircleXmark as CancelIcon,
+	FaSolidCodeMerge as MergeIcon,
 	FaSolidCopy as CopyIcon,
 	FaSolidFileExport as ExportIcon,
 	FaSolidFileImport as ImportIcon,
@@ -75,8 +77,8 @@ import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-	type?: "trash" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel" | "export" | "import" | "minus";
-	color?: "red" | "blue" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "yellow" | "orange";
+	type?: "trash" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge";
+	color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "yellow" | "orange";
 	size?: "xxs" | "xs" | "sm" | "md" | "lg";
 	icon?: object | string;
 	iconClass?: string;
@@ -154,6 +156,8 @@ const colorClass = computed(() => {
 			return "text-green-300 bg-green-900 hover:bg-green-800";
 		case "blue":
 			return "text-blue-900 bg-blue-300 hover:bg-blue-400";
+		case "blue-invert":
+			return "text-blue-300 bg-blue-900 hover:bg-blue-800";
 		case "sky":
 			return "text-sky-900 bg-sky-300 hover:bg-sky-400";
 		case "sky-invert":
@@ -199,10 +203,14 @@ const typeOptions = computed(() => {
 			return { icon: StopIcon };
 		case "pause":
 			return { icon: PauseIcon };
+		case "restart":
+			return { icon: RestartIcon };
 		case "refresh":
 			return { icon: RefreshIcon };
 		case "minus":
 			return { icon: MinusIcon };
+		case "merge":
+			return { icon: MergeIcon };
 		default:
 			return { icon: EditIcon };
 	}

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
 	 */