quasar-ui-danx 0.4.92 → 0.4.94

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>

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

@@ -0,0 +1,64 @@
+<template>
+  <div
+    v-if="files.length > 1"
+    class="bg-slate-900 bg-opacity-90 p-3 flex-shrink-0"
+  >
+    <div
+      ref="containerRef"
+      class="flex items-center justify-start gap-2 overflow-x-auto overflow-y-hidden px-4"
+    >
+      <div
+        v-for="(file, index) in files"
+        :key="file.id"
+        :class="[
+          'thumbnail cursor-pointer rounded border-2 transition-all flex-shrink-0 relative',
+          index === currentIndex ? 'border-blue-500 scale-110' : 'border-transparent opacity-60 hover:opacity-100'
+        ]"
+        @click="onThumbnailClick(index)"
+      >
+        <img
+          :src="getThumbUrl(file)"
+          :alt="file.filename || file.name"
+          class="w-16 h-16 object-cover rounded"
+        >
+        <div class="absolute bottom-0 left-0 bg-slate-900 bg-opacity-80 text-slate-200 text-xs px-1.5 py-0.5 rounded-br rounded-tl font-semibold">
+          {{ index + 1 }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRef } from "vue";
+import { useThumbnailScroll } from "../../../composables/useThumbnailScroll";
+import { getThumbUrl } from "../../../helpers/filePreviewHelpers";
+import { UploadedFile } from "../../../types";
+
+const emit = defineEmits<{
+	'navigate': [index: number];
+}>();
+
+const props = defineProps<{
+	files: UploadedFile[];
+	currentIndex: number;
+}>();
+
+const containerRef = ref<HTMLElement | null>(null);
+
+// Auto-scroll active thumbnail into view
+useThumbnailScroll({
+	containerRef,
+	currentIndex: toRef(props, "currentIndex")
+});
+
+function onThumbnailClick(index: number) {
+	emit("navigate", index);
+}
+</script>
+
+<style scoped lang="scss">
+.thumbnail {
+	transition: all 0.2s ease;
+}
+</style>

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

@@ -0,0 +1,175 @@
+<template>
+  <div class="transcode-navigator">
+    <!-- Desktop: Popover Menu -->
+    <QMenu
+      v-if="!isMobile"
+      v-model="isOpen"
+      anchor="top right"
+      self="bottom right"
+      :offset="[0, 8]"
+    >
+      <div class="bg-slate-800 rounded-lg shadow-xl p-3 min-w-[300px] max-w-[400px]">
+        <div class="text-slate-200 font-semibold mb-2 px-2">
+          Transcodes ({{ transcodes.length }})
+        </div>
+        <div class="flex flex-wrap gap-2">
+          <div
+            v-for="(transcode, index) in transcodes"
+            :key="transcode.id"
+            class="transcode-thumb cursor-pointer rounded border-2 transition-all hover:scale-105"
+            :class="index === selectedIndex ? 'border-purple-500' : 'border-transparent opacity-70 hover:opacity-100'"
+            @click="onSelectTranscode(transcode, index)"
+          >
+            <div class="relative">
+              <img
+                :src="getThumbUrl(transcode)"
+                :alt="transcode.filename || transcode.name"
+                class="w-20 h-20 object-cover rounded"
+              >
+              <div
+                v-if="isTranscoding(transcode)"
+                class="absolute inset-0 bg-slate-900 bg-opacity-70 flex items-center justify-center rounded"
+              >
+                <QSpinnerPie
+                  class="text-purple-400"
+                  size="24px"
+                />
+              </div>
+            </div>
+            <div class="text-xs text-slate-400 text-center mt-1 truncate w-20">
+              {{ transcode.filename || transcode.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </QMenu>
+
+    <!-- Mobile: Full Dialog -->
+    <QDialog
+      v-else
+      v-model="isOpen"
+      position="bottom"
+    >
+      <div class="bg-slate-800 rounded-t-2xl p-4">
+        <div class="flex items-center justify-between mb-4">
+          <div class="text-slate-200 font-semibold text-lg">
+            Transcodes ({{ transcodes.length }})
+          </div>
+          <QBtn
+            flat
+            round
+            dense
+            @click="isOpen = false"
+          >
+            <CloseIcon class="w-5 text-slate-400" />
+          </QBtn>
+        </div>
+        <div class="grid grid-cols-3 gap-3">
+          <div
+            v-for="(transcode, index) in transcodes"
+            :key="transcode.id"
+            class="transcode-thumb cursor-pointer rounded border-2 transition-all"
+            :class="index === selectedIndex ? 'border-purple-500' : 'border-transparent'"
+            @click="onSelectTranscode(transcode, index)"
+          >
+            <div class="relative">
+              <img
+                :src="getThumbUrl(transcode)"
+                :alt="transcode.filename || transcode.name"
+                class="w-full aspect-square object-cover rounded"
+              >
+              <div
+                v-if="isTranscoding(transcode)"
+                class="absolute inset-0 bg-slate-900 bg-opacity-70 flex items-center justify-center rounded"
+              >
+                <QSpinnerPie
+                  class="text-purple-400"
+                  size="32px"
+                />
+              </div>
+            </div>
+            <div class="text-xs text-slate-400 text-center mt-1 truncate">
+              {{ transcode.filename || transcode.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </QDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { XIcon as CloseIcon } from "@heroicons/vue/outline";
+import { QSpinnerPie } from "quasar";
+import { computed, ref } from "vue";
+import { UploadedFile } from "../../../types";
+
+interface TranscodeNavigatorProps {
+	transcodes: UploadedFile[];
+	modelValue?: boolean;
+	selectedIndex?: number;
+}
+
+const emit = defineEmits<{
+	'update:modelValue': [value: boolean];
+	'select': [transcode: UploadedFile, index: number];
+}>();
+
+const props = withDefaults(defineProps<TranscodeNavigatorProps>(), {
+	modelValue: false,
+	selectedIndex: -1
+});
+
+const isOpen = computed({
+	get: () => props.modelValue,
+	set: (value) => emit('update:modelValue', value)
+});
+
+// Detect mobile (simple breakpoint check)
+const isMobile = computed(() => {
+	if (typeof window === 'undefined') return false;
+	return window.innerWidth < 768;
+});
+
+function onSelectTranscode(transcode: UploadedFile, index: number) {
+	emit('select', transcode, index);
+	isOpen.value = false;
+}
+
+function getThumbUrl(file: UploadedFile): string {
+	if (file.thumb?.url) {
+		return file.thumb.url;
+	}
+	if (isVideo(file)) {
+		// Placeholder for video
+		return `data:image/svg+xml;base64,${btoa(
+			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>'
+		)}`;
+	}
+	return file.optimized?.url || file.blobUrl || file.url || 'https://placehold.co/80x80?text=?';
+}
+
+function isVideo(file: UploadedFile): boolean {
+	return !!file.mime?.startsWith('video') || !!file.type?.startsWith('video');
+}
+
+function isTranscoding(file: UploadedFile): boolean {
+	// Check if file is still being transcoded based on meta
+	const metaTranscodes = file.meta?.transcodes || {};
+	for (const transcodeName of Object.keys(metaTranscodes)) {
+		const transcode = metaTranscodes[transcodeName];
+		if (transcode?.status && !['Complete', 'Timeout'].includes(transcode.status)) {
+			return true;
+		}
+	}
+	return false;
+}
+</script>
+
+<style scoped lang="scss">
+.transcode-navigator {
+	.transcode-thumb {
+		transition: all 0.2s ease;
+	}
+}
+</style>

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

@@ -0,0 +1,237 @@
+<template>
+  <div class="virtual-carousel relative w-full h-full">
+    <!-- Carousel Container -->
+    <div
+      ref="carouselContainer"
+      class="carousel-slides-container w-full h-full flex items-center justify-center relative overflow-hidden"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+    >
+      <!-- Render only visible slides -->
+      <transition-group
+        name="slide"
+        tag="div"
+        class="w-full h-full relative"
+      >
+        <div
+          v-for="slide in visibleSlides"
+          :key="slide.file.id"
+          :class="[
+            'carousel-slide absolute inset-0 flex items-center justify-center',
+            { 'active': slide.isActive, 'inactive': !slide.isActive }
+          ]"
+        >
+          <slot
+            name="slide"
+            :file="slide.file"
+            :index="slide.index"
+            :is-active="slide.isActive"
+          >
+            <!-- Default slide content -->
+            <FileRenderer :file="slide.file" />
+          </slot>
+        </div>
+      </transition-group>
+    </div>
+
+    <!-- Navigation Arrows -->
+    <div
+      v-if="canNavigatePrevious"
+      class="absolute left-2 top-1/2 -translate-y-1/2 z-10"
+    >
+      <QBtn
+        round
+        size="lg"
+        class="bg-slate-800 text-white opacity-70 hover:opacity-100"
+        @click="onPrevious"
+      >
+        <ChevronLeftIcon class="w-6" />
+      </QBtn>
+    </div>
+    <div
+      v-if="canNavigateNext"
+      class="absolute right-2 top-1/2 -translate-y-1/2 z-10"
+    >
+      <QBtn
+        round
+        size="lg"
+        class="bg-slate-800 text-white opacity-70 hover:opacity-100"
+        @click="onNext"
+      >
+        <ChevronRightIcon class="w-6" />
+      </QBtn>
+    </div>
+
+    <!-- Thumbnail Navigation (using ThumbnailStrip component) -->
+    <div
+      v-if="showThumbnails && files.length > 1"
+      class="absolute bottom-0 left-0 right-0"
+    >
+      <ThumbnailStrip
+        :files="files"
+        :current-index="currentIndex"
+        @navigate="navigateTo"
+      />
+    </div>
+
+    <!-- Slide Counter -->
+    <div
+      v-if="showCounter && files.length > 1"
+      class="absolute top-2 right-2 bg-slate-900 bg-opacity-70 text-slate-200 px-3 py-1 rounded-full text-sm"
+    >
+      {{ currentIndex + 1 }} / {{ files.length }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/outline";
+import { computed, ref, toRef, watch } from "vue";
+import { useKeyboardNavigation } from "../../../composables/useKeyboardNavigation";
+import { useVirtualCarousel } from "../../../composables/useVirtualCarousel";
+import { UploadedFile } from "../../../types";
+import FileRenderer from "./FileRenderer.vue";
+import ThumbnailStrip from "./ThumbnailStrip.vue";
+
+interface VirtualCarouselProps {
+	files: UploadedFile[];
+	modelValue?: number;
+	showThumbnails?: boolean;
+	showCounter?: boolean;
+	enableKeyboard?: boolean;
+	enableSwipe?: boolean;
+}
+
+const emit = defineEmits<{
+	'update:modelValue': [index: number];
+	'change': [file: UploadedFile, index: number];
+}>();
+
+const props = withDefaults(defineProps<VirtualCarouselProps>(), {
+	modelValue: 0,
+	showThumbnails: true,
+	showCounter: true,
+	enableKeyboard: true,
+	enableSwipe: true
+});
+
+const carouselContainer = ref<HTMLElement | null>(null);
+const currentIndex = ref(props.modelValue);
+const files = computed(() => props.files);
+
+// Use virtual carousel composable
+const { visibleSlides } = useVirtualCarousel(files, currentIndex);
+
+// Navigation
+const canNavigatePrevious = computed(() => currentIndex.value > 0);
+const canNavigateNext = computed(() => currentIndex.value < props.files.length - 1);
+
+function navigateTo(index: number) {
+	if (index >= 0 && index < props.files.length) {
+		currentIndex.value = index;
+		emit('update:modelValue', index);
+		emit('change', props.files[index], index);
+	}
+}
+
+function onPrevious() {
+	if (canNavigatePrevious.value) {
+		navigateTo(currentIndex.value - 1);
+	}
+}
+
+function onNext() {
+	if (canNavigateNext.value) {
+		navigateTo(currentIndex.value + 1);
+	}
+}
+
+// Keyboard navigation
+useKeyboardNavigation({
+	onPrevious,
+	onNext
+}, {
+	enabled: toRef(props, 'enableKeyboard')
+});
+
+// Touch/swipe support
+const touchStart = ref<{ x: number; y: number } | null>(null);
+const SWIPE_THRESHOLD = 50;
+
+function onTouchStart(e: TouchEvent) {
+	if (!props.enableSwipe) return;
+	touchStart.value = {
+		x: e.touches[0].clientX,
+		y: e.touches[0].clientY
+	};
+}
+
+function onTouchMove(e: TouchEvent) {
+	if (!props.enableSwipe || !touchStart.value) return;
+
+	const deltaX = Math.abs(e.touches[0].clientX - touchStart.value.x);
+	const deltaY = Math.abs(e.touches[0].clientY - touchStart.value.y);
+
+	// Prevent vertical scroll if horizontal swipe detected
+	if (deltaX > deltaY) {
+		e.preventDefault();
+	}
+}
+
+function onTouchEnd(e: TouchEvent) {
+	if (!props.enableSwipe || !touchStart.value) return;
+
+	const deltaX = e.changedTouches[0].clientX - touchStart.value.x;
+
+	if (Math.abs(deltaX) > SWIPE_THRESHOLD) {
+		if (deltaX > 0) {
+			onPrevious();
+		} else {
+			onNext();
+		}
+	}
+
+	touchStart.value = null;
+}
+
+// Watch for external changes to modelValue
+watch(() => props.modelValue, (newIndex) => {
+	if (newIndex !== currentIndex.value) {
+		currentIndex.value = newIndex;
+	}
+});
+</script>
+
+<style scoped lang="scss">
+.virtual-carousel {
+	.carousel-slide {
+		transition: opacity 0.3s ease;
+
+		&.inactive {
+			opacity: 0;
+			pointer-events: none;
+		}
+
+		&.active {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+
+	.thumbnail {
+		flex-shrink: 0;
+	}
+}
+
+// Slide transitions
+.slide-enter-active,
+.slide-leave-active {
+	transition: opacity 0.3s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+	opacity: 0;
+}
+</style>

package/src/components/Utility/Files/index.ts

@@ -1,2 +1,7 @@
+export { default as CarouselHeader } from "./CarouselHeader.vue";
 export { default as FilePreview } from "./FilePreview.vue";
+export { default as FileRenderer } from "./FileRenderer.vue";
 export { default as SvgImg } from "./SvgImg.vue";
+export { default as ThumbnailStrip } from "./ThumbnailStrip.vue";
+export { default as TranscodeNavigator } from "./TranscodeNavigator.vue";
+export { default as VirtualCarousel } from "./VirtualCarousel.vue";

package/src/components/Utility/Widgets/LabelPillWidget.vue

@@ -20,9 +20,19 @@ const colorClasses = {
 	amber: "bg-amber-950 text-amber-400",
 	yellow: "bg-yellow-950 text-yellow-400",
 	blue: "bg-blue-950 text-blue-400",
+	purple: "bg-purple-950 text-purple-400",
 	slate: "bg-slate-950 text-slate-400",
 	"slate-mid": "bg-slate-800 text-slate-400",
 	gray: "bg-slate-700 text-gray-300",
+	emerald: "bg-emerald-950 text-emerald-400",
+	orange: "bg-orange-950 text-orange-400",
+	lime: "bg-lime-950 text-lime-400",
+	teal: "bg-teal-950 text-teal-400",
+	cyan: "bg-cyan-950 text-cyan-400",
+	rose: "bg-rose-950 text-rose-400",
+	indigo: "bg-indigo-950 text-indigo-400",
+	violet: "bg-violet-950 text-violet-400",
+	fuchsia: "bg-fuchsia-950 text-fuchsia-400",
 	none: ""
 };
 

package/src/composables/index.ts

@@ -0,0 +1,4 @@
+export * from "./useFileNavigation";
+export * from "./useKeyboardNavigation";
+export * from "./useThumbnailScroll";
+export * from "./useVirtualCarousel";