quasar-ui-danx 0.4.91 → 0.4.93

package/package.json

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

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

@@ -3,169 +3,156 @@
     :model-value="true"
     maximized
     @update:model-value="$emit('close')"
-    @keyup.left="carousel.previous()"
-    @keyup.right="carousel.next()"
   >
-    <div class="absolute top-0 left-0 w-full h-full">
-      <QCarousel
-        ref="carousel"
-        v-model="currentSlide"
-        height="100%"
-        swipeable
-        animated
-        :thumbnails="files.length > 1"
-        infinite
-        :class="cls['carousel']"
-      >
-        <QCarouselSlide
-          v-for="file in files"
-          :key="'file-' + file.id"
-          :name="file.id"
-          :img-src="getThumbUrl(file)"
-          class="bg-black"
-        >
-          <div :class="cls['slide-image']">
-            <template v-if="isVideo(file)">
-              <video
-                class="max-h-full w-full"
-                controls
-              >
-                <source
-                  :src="getPreviewUrl(file) + '#t=0.1'"
-                  :type="file.mime"
-                >
-              </video>
-            </template>
-            <img
-              v-else-if="getPreviewUrl(file)"
-              :alt="file.filename"
-              :src="getPreviewUrl(file)"
-            >
+    <div class="absolute inset-0 bg-black">
+      <!-- Main Content Area -->
+      <div class="w-full h-full flex flex-col">
+        <!-- Header with filename and navigation -->
+        <CarouselHeader
+          v-if="currentFile"
+          :filename="currentFile.filename || currentFile.name"
+          :show-back-button="hasParent"
+          :show-transcodes-button="!!(currentFile.transcodes && currentFile.transcodes.length > 0)"
+          :transcodes-count="currentFile.transcodes?.length || 0"
+          @back="navigateToParent"
+          @transcodes="showTranscodeNav = true"
+        />
+
+        <!-- Carousel -->
+        <div class="flex-grow relative">
+          <div class="absolute inset-0">
             <div
-              v-else-if="isText(file)"
-              class="w-[60vw] min-w-96 bg-slate-800 rounded-lg"
+              v-for="slide in visibleSlides"
+              :key="slide.file.id"
+              :class="[
+                'absolute inset-0 flex items-center justify-center transition-opacity duration-300',
+                slide.isActive ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
+              ]"
             >
-              <div class="whitespace-pre-wrap p-4">
-                {{ fileTexts[file.id] }}
-              </div>
-            </div>
-            <div v-else>
-              <h3 class="text-center mb-4">
-                No Preview Available
-              </h3>
-              <a
-                :href="file.url"
-                target="_blank"
-                class="text-base"
-              >
-                {{ file.url }}
-              </a>
+              <FileRenderer
+                :file="slide.file"
+                :autoplay="slide.isActive"
+              />
             </div>
           </div>
 
-          <div class="text-base text-center py-5 bg-slate-800 opacity-70 text-slate-300 absolute-top hover:opacity-20 transition-all">
-            {{ file.filename || file.name }}
+          <!-- Navigation Arrows -->
+          <div
+            v-if="canNavigatePrevious"
+            class="absolute left-4 top-1/2 -translate-y-1/2 z-20"
+          >
+            <QBtn
+              round
+              size="lg"
+              class="bg-slate-800 text-white opacity-70 hover:opacity-100"
+              @click="navigatePrevious"
+            >
+              <ChevronLeftIcon class="w-8" />
+            </QBtn>
+          </div>
+          <div
+            v-if="canNavigateNext"
+            class="absolute right-4 top-1/2 -translate-y-1/2 z-20"
+          >
+            <QBtn
+              round
+              size="lg"
+              class="bg-slate-800 text-white opacity-70 hover:opacity-100"
+              @click="navigateNext"
+            >
+              <ChevronRightIcon class="w-8" />
+            </QBtn>
           </div>
-        </QCarouselSlide>
-      </QCarousel>
+        </div>
+
+        <!-- Thumbnails -->
+        <ThumbnailStrip
+          :files="relatedFiles"
+          :current-index="currentIndex"
+          @navigate="navigateTo"
+        />
+      </div>
+
+      <!-- Close Button -->
       <a
-        class="absolute top-0 right-0 text-white flex items-center justify-center w-16 h-16 hover:bg-slate-600 transition-all"
+        class="absolute top-0 right-0 text-white flex items-center justify-center w-16 h-16 hover:bg-slate-600 transition-all cursor-pointer z-30"
         @click="$emit('close')"
       >
-        <CloseIcon
-          class="w-8 h-8"
-        />
+        <CloseIcon class="w-8 h-8" />
       </a>
+
+      <!-- Transcode Navigator -->
+      <TranscodeNavigator
+        v-if="currentFile?.transcodes"
+        v-model="showTranscodeNav"
+        :transcodes="currentFile.transcodes"
+        @select="onSelectTranscode"
+      />
     </div>
   </QDialog>
 </template>
+
 <script setup lang="ts">
-import { QCarousel } from "quasar";
-import { onMounted, ref, shallowRef } from "vue";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/outline";
+import { ref } from "vue";
+import { useFileNavigation } from "../../../composables/useFileNavigation";
+import { useKeyboardNavigation } from "../../../composables/useKeyboardNavigation";
+import { useVirtualCarousel } from "../../../composables/useVirtualCarousel";
 import { XIcon as CloseIcon } from "../../../svg";
+import { UploadedFile } from "../../../types";
+import CarouselHeader from "../Files/CarouselHeader.vue";
+import FileRenderer from "../Files/FileRenderer.vue";
+import ThumbnailStrip from "../Files/ThumbnailStrip.vue";
+import TranscodeNavigator from "../Files/TranscodeNavigator.vue";
 
 defineEmits(["close"]);
-const props = defineProps({
-	files: {
-		type: Array,
-		default: () => []
-	},
-	defaultSlide: {
-		type: String,
-		default: ""
-	}
-});
 
-const carousel = ref(null);
-const currentSlide = ref(props.defaultSlide);
-function isVideo(file) {
-	return file.mime?.startsWith("video");
-}
+const props = defineProps<{
+	files: UploadedFile[];
+	defaultSlide?: string;
+}>();
 
-function isImage(file) {
-	return file.mime?.startsWith("image");
-}
+// Initialize with first file or file matching defaultSlide
+const initialIndex = props.defaultSlide
+	? props.files.findIndex(f => f.id === props.defaultSlide)
+	: 0;
+const initialFile = props.files[initialIndex >= 0 ? initialIndex : 0];
 
-function isText(file) {
-	return file.mime?.startsWith("text");
-}
+// Use navigation composable
+const navigation = useFileNavigation(
+	ref(initialFile),
+	ref(props.files)
+);
 
-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);
-}
+const {
+	currentFile,
+	relatedFiles,
+	currentIndex,
+	hasParent,
+	canNavigatePrevious,
+	canNavigateNext,
+	navigateTo,
+	navigateNext,
+	navigatePrevious,
+	diveInto,
+	navigateToParent
+} = navigation;
 
-function getThumbUrl(file) {
-	if (file.thumb) {
-		return file.thumb.url;
-	} else if (isVideo(file)) {
-		// Base64 encode a PlayIcon for the placeholder image
-		return `data:image/svg+xml;base64,${btoa(
-			`<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) || "https://placehold.co/40x50?text=T";
-	}
-}
+// Use virtual carousel composable
+const { visibleSlides } = useVirtualCarousel(relatedFiles, currentIndex);
 
-onMounted(() => {
-	for (let file of props.files) {
-		if (isText(file)) {
-			loadFileText(file);
-		}
-	}
+// Keyboard navigation
+useKeyboardNavigation({
+	onPrevious: navigatePrevious,
+	onNext: navigateNext
 });
 
-const fileTexts = shallowRef<{ [key: string]: string }>({});
+// Transcode navigation
+const showTranscodeNav = ref(false);
 
-async function loadFileText(file) {
-	if (fileTexts.value[file.id]) {
-		return fileTexts.value[file.id];
+function onSelectTranscode(transcode: UploadedFile, index: number) {
+	if (currentFile.value && currentFile.value.transcodes) {
+		diveInto(transcode, currentFile.value.transcodes);
 	}
-
-	fileTexts.value[file.id] = await fetch(file.url).then((res) => res.text());
 }
 </script>
-<style module="cls" lang="scss">
-.slide-image {
-	width: 100%;
-	height: 100%;
-	background: black;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	img {
-		max-height: 100%;
-		max-width: 100%;
-		object-fit: contain;
-	}
-}
-
-.carousel {
-	:deep(.q-carousel__navigation--bottom) {
-		position: relative;
-		bottom: 8em;
-	}
-}
-</style>

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

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="text-base text-center py-3 px-16 bg-slate-800 opacity-90 text-slate-300 hover:opacity-100 transition-all flex-shrink-0"
+  >
+    <div class="flex items-center justify-center gap-3">
+      <!-- Back to Parent Button -->
+      <QBtn
+        v-if="showBackButton"
+        flat
+        dense
+        class="bg-slate-700 text-slate-300 hover:bg-slate-600"
+        @click="$emit('back')"
+      >
+        <div class="flex items-center flex-nowrap gap-1">
+          <ArrowLeftIcon class="w-4" />
+          <span class="text-sm">Back to Parent</span>
+        </div>
+      </QBtn>
+
+      <!-- Filename -->
+      <div class="flex-grow">
+        {{ filename }}
+      </div>
+
+      <!-- Transcodes Button -->
+      <QBtn
+        v-if="showTranscodesButton"
+        flat
+        dense
+        class="bg-purple-700 text-purple-200 hover:bg-purple-600"
+        @click="$emit('transcodes')"
+      >
+        <div class="flex items-center flex-nowrap gap-1">
+          <FilmIcon class="w-4" />
+          <QBadge
+            class="bg-purple-900 text-purple-200"
+            :label="transcodesCount"
+          />
+          <span class="text-sm ml-1">Transcodes</span>
+        </div>
+      </QBtn>
+
+      <!-- Close Button (optional) -->
+      <QBtn
+        v-if="showCloseButton"
+        flat
+        dense
+        icon
+        class="text-slate-300 hover:text-white"
+        @click="$emit('close')"
+      >
+        <CloseIcon class="w-5" />
+      </QBtn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArrowLeftIcon, FilmIcon } from "@heroicons/vue/outline";
+import { XIcon as CloseIcon } from "../../../svg";
+
+withDefaults(defineProps<{
+	filename: string;
+	showBackButton?: boolean;
+	showTranscodesButton?: boolean;
+	transcodesCount?: number;
+	showCloseButton?: boolean;
+}>(), {
+	showBackButton: false,
+	showTranscodesButton: false,
+	transcodesCount: 0,
+	showCloseButton: false
+});
+
+defineEmits<{
+	'back': [];
+	'transcodes': [];
+	'close': [];
+}>();
+</script>

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

@@ -103,6 +103,22 @@
     </template>
 
     <div class="absolute top-1 right-1 flex items-center flex-nowrap justify-between space-x-1 transition-all opacity-0 group-hover:opacity-100">
+      <QBtn
+        v-if="hasTranscodes"
+        :size="btnSize"
+        class="dx-file-preview-transcodes bg-purple-700 text-white opacity-70 hover:opacity-100 py-1 px-2 relative"
+        @click.stop="showPreview = true"
+      >
+        <div class="flex items-center flex-nowrap gap-1">
+          <FilmIcon class="w-4 h-5" />
+          <QBadge
+            class="bg-purple-900 text-purple-200"
+            :label="file?.transcodes?.length || 0"
+          />
+        </div>
+        <QTooltip>View Transcodes</QTooltip>
+      </QBtn>
+
       <QBtn
         v-if="downloadable && computedImage?.url"
         :size="btnSize"
@@ -142,10 +158,12 @@
 </template>
 
 <script setup lang="ts">
-import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
-import { computed, ComputedRef, ref, shallowRef } from "vue";
+import { DocumentTextIcon as TextFileIcon, DownloadIcon, FilmIcon, PlayIcon } from "@heroicons/vue/outline";
+import { computed, ComputedRef, onMounted, ref, watch } from "vue";
 import { danxOptions } from "../../../config";
 import { download, uniqueBy } from "../../../helpers";
+import * as fileHelpers from "../../../helpers/filePreviewHelpers";
+import { getMimeType, getOptimizedUrl } from "../../../helpers/filePreviewHelpers";
 import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
 import { UploadedFile } from "../../../types";
 import { FullScreenCarouselDialog } from "../Dialogs";
@@ -172,7 +190,6 @@ export interface FilePreviewProps {
 	disabled?: boolean;
 	square?: boolean;
 	btnSize?: "xs" | "sm" | "md" | "lg";
-	showTranscodes?: boolean;
 }
 
 const emit = defineEmits(["remove"]);
@@ -193,6 +210,7 @@ const props = withDefaults(defineProps<FilePreviewProps>(), {
 
 
 const showPreview = ref(false);
+const isLoadingTranscodes = ref(false);
 const computedImage: ComputedRef<UploadedFile | null> = computed(() => {
 	if (props.file) {
 		return props.file;
@@ -209,11 +227,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 hasTranscodes = computed(() => (props.file?.transcodes?.length || 0) > 0);
 const previewableFiles: ComputedRef<(UploadedFile | null)[] | null> = computed(() => {
-	return props.relatedFiles?.length > 0 ? uniqueBy([computedImage.value, ...(props.showTranscodes ? (transcodes.value || []) : props.relatedFiles)], filesHaveSameUrl) : [computedImage.value];
+	return props.relatedFiles?.length > 0 ? uniqueBy([computedImage.value, ...props.relatedFiles], filesHaveSameUrl) : [computedImage.value];
 });
 
 function filesHaveSameUrl(a: UploadedFile, b: UploadedFile) {
@@ -223,18 +241,12 @@ function filesHaveSameUrl(a: UploadedFile, b: UploadedFile) {
 }
 
 const filename = computed(() => computedImage.value?.name || computedImage.value?.filename || "");
-const mimeType = computed(
-	() => computedImage.value?.type || computedImage.value?.mime || ""
-);
-const isImage = computed(() => !!mimeType.value.match(/^image\//));
-const isVideo = computed(() => !!mimeType.value.match(/^video\//));
-const isPdf = computed(() => !!mimeType.value.match(/^application\/pdf/));
-const previewUrl = computed(
-	() => computedImage.value?.optimized?.url || computedImage.value?.blobUrl || computedImage.value?.url
-);
-const thumbUrl = computed(() => {
-	return computedImage.value?.thumb?.url;
-});
+const mimeType = computed(() => computedImage.value ? getMimeType(computedImage.value) : "");
+const isImage = computed(() => computedImage.value ? fileHelpers.isImage(computedImage.value) : false);
+const isVideo = computed(() => computedImage.value ? fileHelpers.isVideo(computedImage.value) : false);
+const isPdf = computed(() => computedImage.value ? fileHelpers.isPdf(computedImage.value) : false);
+const previewUrl = computed(() => computedImage.value ? getOptimizedUrl(computedImage.value) : "");
+const thumbUrl = computed(() => computedImage.value?.thumb?.url || "");
 const isPreviewable = computed(() => {
 	return !!thumbUrl.value || isVideo.value || isImage.value;
 });
@@ -268,14 +280,57 @@ function onRemove() {
 	}
 }
 
-async function onShowPreview() {
+function onShowPreview() {
 	showPreview.value = true;
+}
+
+/**
+ * Check if transcodes need to be loaded for the current file
+ */
+function shouldLoadTranscodes(): boolean {
+	if (!props.file?.id) return false;
+	if (isLoadingTranscodes.value) return false;
+	if (!danxOptions.value.fileUpload?.refreshFile) return false;
 
-	if (props.showTranscodes && props.file && !transcodes.value) {
-		const file = await danxOptions.value.fileUpload.refreshFile(props.file.id) as UploadedFile;
-		transcodes.value = file.transcodes || [];
+	// Only load if transcodes is explicitly null, undefined, or an empty array
+	const transcodes = props.file.transcodes;
+	return transcodes === null || transcodes === undefined || (Array.isArray(transcodes) && transcodes.length === 0);
+}
+
+/**
+ * Load transcodes for the current file
+ */
+async function loadTranscodes() {
+	if (!shouldLoadTranscodes()) return;
+
+	isLoadingTranscodes.value = true;
+
+	try {
+		const refreshFile = danxOptions.value.fileUpload.refreshFile;
+		if (refreshFile && props.file?.id) {
+			const refreshedFile = await refreshFile(props.file.id);
+
+			// Update the file object with the loaded transcodes
+			if (refreshedFile.transcodes && props.file) {
+				props.file.transcodes = refreshedFile.transcodes;
+			}
+		}
+	} catch (error) {
+		console.error("Failed to load transcodes:", error);
+	} finally {
+		isLoadingTranscodes.value = false;
 	}
 }
+
+// Load transcodes when component mounts
+onMounted(() => {
+	loadTranscodes();
+});
+
+// Watch for file changes and reload transcodes if needed
+watch(() => props.file?.id, () => {
+	loadTranscodes();
+});
 </script>
 
 <style module="cls" lang="scss">

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="file-renderer flex items-center justify-center w-full h-full">
+    <!-- Video -->
+    <template v-if="isVideo(file)">
+      <video
+        class="max-h-full w-full"
+        controls
+        :autoplay="autoplay"
+      >
+        <source
+          :src="getPreviewUrl(file) + '#t=0.1'"
+          :type="file.mime"
+        >
+      </video>
+    </template>
+
+    <!-- Image -->
+    <img
+      v-else-if="getPreviewUrl(file)"
+      :alt="file.filename || file.name"
+      :src="getPreviewUrl(file)"
+      class="max-h-full max-w-full object-contain"
+    >
+
+    <!-- Text File (lazy loaded) -->
+    <div
+      v-else-if="isText(file)"
+      class="w-[60vw] min-w-96 max-h-[80vh] bg-slate-800 rounded-lg overflow-auto"
+    >
+      <div class="whitespace-pre-wrap p-4 text-slate-200">
+        <template v-if="textContent">
+          {{ textContent }}
+        </template>
+        <div
+          v-else
+          class="flex items-center justify-center py-8"
+        >
+          <QSpinnerPie
+            class="text-slate-400"
+            size="48px"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- No Preview -->
+    <div
+      v-else
+      class="text-center"
+    >
+      <h3 class="text-slate-300 mb-4">
+        No Preview Available
+      </h3>
+      <a
+        :href="file.url"
+        target="_blank"
+        class="text-blue-400 hover:text-blue-300"
+      >
+        {{ file.url }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { QSpinnerPie } from "quasar";
+import { onMounted, ref, watch } from "vue";
+import { getPreviewUrl, isText, isVideo } from "../../../helpers/filePreviewHelpers";
+import { UploadedFile } from "../../../types";
+
+const props = withDefaults(defineProps<{
+	file: UploadedFile;
+	autoplay?: boolean;
+	loadText?: boolean;
+}>(), {
+	autoplay: false,
+	loadText: true
+});
+
+const textContent = ref<string>("");
+
+/**
+ * Load text file content from URL
+ */
+async function loadFileText() {
+	if (!isText(props.file) || !props.loadText) {
+		return;
+	}
+
+	if (textContent.value) {
+		return; // Already loaded
+	}
+
+	try {
+		const text = await fetch(props.file.url || "").then((res) => res.text());
+		textContent.value = text;
+	} catch (e) {
+		textContent.value = "Error loading file content";
+	}
+}
+
+// Load text content on mount and when file changes
+onMounted(() => {
+	loadFileText();
+});
+
+watch(() => props.file.id, () => {
+	textContent.value = ""; // Reset
+	loadFileText();
+});
+</script>