quasar-ui-danx 0.4.52 → 0.4.53

package/package.json

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

package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue

@@ -41,6 +41,14 @@
               :alt="file.filename"
               :src="getPreviewUrl(file)"
             >
+            <div
+              v-else-if="isText(file)"
+              class="w-[60vw] min-w-96 bg-slate-800 rounded-lg"
+            >
+              <div class="whitespace-pre-wrap p-4">
+                {{ fileTexts[file.id] }}
+              </div>
+            </div>
             <div v-else>
               <h3 class="text-center mb-4">
                 No Preview Available
@@ -71,8 +79,9 @@
     </div>
   </QDialog>
 </template>
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
+import { QCarousel } from "quasar";
+import { onMounted, ref, shallowRef } from "vue";
 import { XIcon as CloseIcon } from "../../../svg";
 
 defineEmits(["close"]);
@@ -97,6 +106,10 @@ function isImage(file) {
 	return file.mime?.startsWith("image");
 }
 
+function isText(file) {
+	return file.mime?.startsWith("text");
+}
+
 function getPreviewUrl(file) {
 	// Use the optimized URL first if available. If not, use the URL directly if its an image, otherwise use the thumb URL
 	return file.optimized?.url || (isImage(file) ? (file.blobUrl || file.url) : file.thumb?.url);
@@ -111,8 +124,26 @@ function getThumbUrl(file) {
 			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>`
 		)}`;
 	} else {
-		return getPreviewUrl(file);
+		return getPreviewUrl(file) || "https://placehold.co/40x50?text=T";
+	}
+}
+
+onMounted(() => {
+	for (let file of props.files) {
+		if (isText(file)) {
+			loadFileText(file);
+		}
+	}
+});
+
+const fileTexts = shallowRef<{ [key: string]: string }>({});
+
+async function loadFileText(file) {
+	if (fileTexts.value[file.id]) {
+		return fileTexts.value[file.id];
 	}
+
+	fileTexts.value[file.id] = await fetch(file.url).then((res) => res.text());
 }
 </script>
 <style module="cls" lang="scss">

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

@@ -69,7 +69,7 @@
         class="absolute-bottom w-full bg-slate-800"
       >
         <QLinearProgress
-          :value="isUploading ? file.progress : (transcodingStatus.progress / 100)"
+          :value="isUploading ? file.progress : ((transcodingStatus?.progress || 0) / 100)"
           size="36px"
           :color="isUploading ? 'green-800' : 'blue-800'"
           :animation-speed="transcodingStatus?.estimate_ms || 3000"
@@ -77,12 +77,18 @@
         >
           <div class="absolute-full flex items-center flex-nowrap text-[.7rem] text-slate-200 justify-start px-1">
             <QSpinnerPie
-              class="mr-2 text-slate-50 ml-1"
-              size="20"
+              class="mr-2 text-slate-50 ml-1 flex-shrink-0"
+              :size="btnSize === 'xs' ? 10 : 20"
             />
-            <div>
-              {{ isUploading ? "Uploading..." : transcodingStatus.message }}
+            <div class="whitespace-nowrap overflow-hidden ellipsis">
+              {{ isUploading ? "Uploading..." : transcodingStatus?.message }}
             </div>
+            <QTooltip
+              v-if="transcodingStatus?.message"
+              class="text-sm"
+            >
+              {{ transcodingStatus?.message }}
+            </QTooltip>
           </div>
         </QLinearProgress>
       </div>