quasar-ui-danx 0.4.91 → 0.4.93

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";

package/src/composables/useFileNavigation.ts

@@ -0,0 +1,129 @@
+import { computed, ref, Ref } from "vue";
+import { FileNavigationParent, FileNavigationState, UploadedFile } from "../types";
+
+/**
+ * Composable for managing file navigation state with parent stack support
+ * Enables diving into related files (like transcodes) and navigating back to parent
+ */
+export function useFileNavigation(initialFile: Ref<UploadedFile | null>, initialRelatedFiles: Ref<UploadedFile[]> = ref([])) {
+	// Current navigation state
+	const currentFile = ref<UploadedFile | null>(initialFile.value);
+	const relatedFiles = ref<UploadedFile[]>(initialRelatedFiles.value);
+	const parentStack = ref<FileNavigationParent[]>([]);
+	const currentIndex = ref(0);
+
+	// Computed properties
+	const hasParent = computed(() => parentStack.value.length > 0);
+	const canNavigatePrevious = computed(() => currentIndex.value > 0);
+	const canNavigateNext = computed(() => currentIndex.value < relatedFiles.value.length - 1);
+	const totalFiles = computed(() => relatedFiles.value.length);
+
+	/**
+	 * Navigate to a specific file by index
+	 */
+	function navigateTo(index: number) {
+		if (index >= 0 && index < relatedFiles.value.length) {
+			currentIndex.value = index;
+			currentFile.value = relatedFiles.value[index];
+		}
+	}
+
+	/**
+	 * Navigate to the next file
+	 */
+	function navigateNext() {
+		if (canNavigateNext.value) {
+			navigateTo(currentIndex.value + 1);
+		}
+	}
+
+	/**
+	 * Navigate to the previous file
+	 */
+	function navigatePrevious() {
+		if (canNavigatePrevious.value) {
+			navigateTo(currentIndex.value - 1);
+		}
+	}
+
+	/**
+	 * Dive into a related file (e.g., transcodes)
+	 * Pushes current state onto parent stack
+	 */
+	function diveInto(file: UploadedFile, newRelatedFiles: UploadedFile[]) {
+		// Push current state onto parent stack
+		parentStack.value.push({
+			file: currentFile.value!,
+			relatedFiles: relatedFiles.value,
+			index: currentIndex.value
+		});
+
+		// Update to new state
+		currentFile.value = file;
+		relatedFiles.value = newRelatedFiles;
+		currentIndex.value = newRelatedFiles.findIndex(f => f.id === file.id);
+
+		// Fallback to 0 if not found
+		if (currentIndex.value === -1) {
+			currentIndex.value = 0;
+		}
+	}
+
+	/**
+	 * Navigate back to parent file
+	 * Pops state from parent stack
+	 */
+	function navigateToParent() {
+		if (hasParent.value) {
+			const parent = parentStack.value.pop()!;
+			currentFile.value = parent.file;
+			relatedFiles.value = parent.relatedFiles;
+			currentIndex.value = parent.index;
+		}
+	}
+
+	/**
+	 * Reset navigation state
+	 */
+	function reset(file: UploadedFile | null = null, files: UploadedFile[] = []) {
+		currentFile.value = file;
+		relatedFiles.value = files;
+		parentStack.value = [];
+		currentIndex.value = 0;
+	}
+
+	/**
+	 * Get navigation state snapshot
+	 */
+	function getState(): FileNavigationState {
+		return {
+			currentFile: currentFile.value,
+			relatedFiles: relatedFiles.value,
+			parentStack: [...parentStack.value],
+			currentIndex: currentIndex.value
+		};
+	}
+
+	return {
+		// State
+		currentFile,
+		relatedFiles,
+		parentStack,
+		currentIndex,
+
+		// Computed
+		hasParent,
+		canNavigatePrevious,
+		canNavigateNext,
+		totalFiles,
+
+		// Methods
+		navigateTo,
+		navigateNext,
+		navigatePrevious,
+		diveInto,
+		navigateToParent,
+		reset,
+		getState
+	};
+}

package/src/composables/useKeyboardNavigation.ts

@@ -0,0 +1,58 @@
+import { onMounted, onUnmounted } from "vue";
+
+export interface KeyboardNavigationCallbacks {
+	onPrevious: () => void;
+	onNext: () => void;
+	onEscape?: () => void;
+}
+
+export interface UseKeyboardNavigationOptions {
+	enabled?: boolean;
+}
+
+/**
+ * Composable for keyboard navigation (arrow keys + escape)
+ * Handles left/right arrow keys for navigation and optional escape key
+ */
+export function useKeyboardNavigation(
+	callbacks: KeyboardNavigationCallbacks,
+	options: UseKeyboardNavigationOptions = {}
+) {
+	const { enabled = true } = options;
+
+	function onKeydown(e: KeyboardEvent) {
+		if (!enabled) return;
+
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault();
+				callbacks.onPrevious();
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				callbacks.onNext();
+				break;
+			case "Escape":
+				if (callbacks.onEscape) {
+					callbacks.onEscape();
+				}
+				break;
+		}
+	}
+
+	onMounted(() => {
+		if (enabled) {
+			window.addEventListener("keydown", onKeydown);
+		}
+	});
+
+	onUnmounted(() => {
+		if (enabled) {
+			window.removeEventListener("keydown", onKeydown);
+		}
+	});
+
+	return {
+		onKeydown
+	};
+}