quasar-ui-danx 0.4.95 → 0.4.99

package/src/components/Utility/Code/MarkdownContent.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="dx-markdown-content">
+    <template v-for="(token, index) in tokens" :key="index">
+      <!-- Headings -->
+      <component
+        v-if="token.type === 'heading'"
+        :is="'h' + token.level"
+        v-html="parseInlineContent(token.content)"
+      />
+
+      <!-- Code blocks with syntax highlighting -->
+      <div
+        v-else-if="token.type === 'code_block'"
+        class="dx-markdown-code-block"
+      >
+        <!-- Language toggle badge (only for json/yaml) -->
+        <LanguageBadge
+          v-if="isToggleableLanguage(token.language)"
+          :format="getCodeBlockFormat(index, token.language)"
+          :available-formats="['json', 'yaml']"
+          :toggleable="true"
+          @change="(fmt) => setCodeBlockFormat(index, fmt)"
+        />
+        <LanguageBadge
+          v-else-if="token.language"
+          :format="token.language"
+          :available-formats="[]"
+          :toggleable="false"
+        />
+        <pre><code
+          :class="'language-' + getCodeBlockFormat(index, token.language)"
+          v-html="highlightCodeBlock(index, token.content, token.language)"
+        ></code></pre>
+      </div>
+
+      <!-- Blockquotes (recursive) -->
+      <blockquote
+        v-else-if="token.type === 'blockquote'"
+        v-html="renderBlockquote(token.content)"
+      />
+
+      <!-- Unordered lists -->
+      <ul v-else-if="token.type === 'ul'">
+        <li
+          v-for="(item, itemIndex) in token.items"
+          :key="itemIndex"
+          v-html="parseInlineContent(item)"
+        />
+      </ul>
+
+      <!-- Ordered lists -->
+      <ol
+        v-else-if="token.type === 'ol'"
+        :start="token.start"
+      >
+        <li
+          v-for="(item, itemIndex) in token.items"
+          :key="itemIndex"
+          v-html="parseInlineContent(item)"
+        />
+      </ol>
+
+      <!-- Horizontal rules -->
+      <hr v-else-if="token.type === 'hr'" />
+
+      <!-- Paragraphs -->
+      <p
+        v-else-if="token.type === 'paragraph'"
+        v-html="parseInlineContent(token.content).replace(/\n/g, '<br />')"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from "vue";
+import { parse as parseYAML, stringify as stringifyYAML } from "yaml";
+import { tokenizeBlocks, parseInline, renderMarkdown, BlockToken } from "../../../helpers/formats/renderMarkdown";
+import { highlightJSON, highlightYAML } from "../../../helpers/formats/highlightSyntax";
+import LanguageBadge from "./LanguageBadge.vue";
+
+export interface MarkdownContentProps {
+  content: string;
+  defaultCodeFormat?: "json" | "yaml";
+}
+
+const props = withDefaults(defineProps<MarkdownContentProps>(), {
+  content: ""
+});
+
+// Track format overrides for each code block (for toggling json<->yaml)
+const codeBlockFormats = reactive<Record<number, string>>({});
+// Cache converted content for each code block
+const convertedContent = reactive<Record<number, string>>({});
+
+// Tokenize the markdown content
+const tokens = computed<BlockToken[]>(() => {
+  if (!props.content) return [];
+  return tokenizeBlocks(props.content);
+});
+
+// Check if a language is toggleable (json or yaml)
+function isToggleableLanguage(language: string): boolean {
+  if (!language) return false;
+  const lang = language.toLowerCase();
+  return lang === "json" || lang === "yaml";
+}
+
+// Get the current format for a code block (respecting user toggle, then default override, then original)
+function getCodeBlockFormat(index: number, originalLanguage: string): string {
+  // If user has toggled this block, use their choice
+  if (codeBlockFormats[index]) {
+    return codeBlockFormats[index];
+  }
+
+  // If a default is set and this is a toggleable language, use the default
+  const lang = originalLanguage?.toLowerCase();
+  if (props.defaultCodeFormat && (lang === "json" || lang === "yaml")) {
+    return props.defaultCodeFormat;
+  }
+
+  // Otherwise use the original language
+  return lang || "text";
+}
+
+// Get converted content for a code block (handles initial conversion for defaultCodeFormat)
+function getConvertedContent(index: number, originalContent: string, originalLang: string): string {
+  const format = getCodeBlockFormat(index, originalLang);
+
+  // If format matches original, no conversion needed
+  if (format === originalLang || !isToggleableLanguage(originalLang)) {
+    return originalContent;
+  }
+
+  // Convert from original to target format
+  try {
+    let parsed: unknown;
+
+    if (originalLang === "json") {
+      parsed = JSON.parse(originalContent);
+    } else if (originalLang === "yaml") {
+      parsed = parseYAML(originalContent);
+    }
+
+    if (parsed !== undefined) {
+      if (format === "json") {
+        return JSON.stringify(parsed, null, 2);
+      } else if (format === "yaml") {
+        return stringifyYAML(parsed as object);
+      }
+    }
+  } catch {
+    // Conversion failed, return original
+  }
+
+  return originalContent;
+}
+
+// Set format for a code block (converts content to the new format)
+function setCodeBlockFormat(index: number, newFormat: string) {
+  const token = tokens.value[index];
+  if (token?.type !== "code_block") return;
+
+  const originalLang = token.language?.toLowerCase() || "json";
+  const current = getCodeBlockFormat(index, originalLang);
+
+  // No change needed if already in target format
+  if (current === newFormat) return;
+
+  // Convert the content
+  try {
+    // Use the currently displayed content (which may already be converted due to defaultCodeFormat)
+    const sourceContent = convertedContent[index] || getConvertedContent(index, token.content, originalLang);
+    let parsed: unknown;
+
+    // Parse from current format
+    if (current === "json") {
+      parsed = JSON.parse(sourceContent);
+    } else {
+      parsed = parseYAML(sourceContent);
+    }
+
+    // Convert to new format
+    if (newFormat === "json") {
+      convertedContent[index] = JSON.stringify(parsed, null, 2);
+    } else {
+      convertedContent[index] = stringifyYAML(parsed as object);
+    }
+
+    codeBlockFormats[index] = newFormat;
+  } catch {
+    // If conversion fails, just set the format without converting
+    codeBlockFormats[index] = newFormat;
+  }
+}
+
+// Highlight code block content based on format
+function highlightCodeBlock(index: number, originalContent: string, originalLanguage: string): string {
+  const format = getCodeBlockFormat(index, originalLanguage);
+  const originalLang = originalLanguage?.toLowerCase() || "text";
+
+  // Get the content (converted if needed, or from cache if user toggled)
+  const content = convertedContent[index] || getConvertedContent(index, originalContent, originalLang);
+
+  // Apply syntax highlighting
+  switch (format) {
+    case "json":
+      return highlightJSON(content);
+    case "yaml":
+      return highlightYAML(content);
+    default:
+      // For other languages, just escape HTML
+      return content
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+  }
+}
+
+// Parse inline markdown (bold, italic, links, etc.)
+function parseInlineContent(text: string): string {
+  return parseInline(text, true);
+}
+
+// Render blockquote content (can contain nested markdown)
+function renderBlockquote(content: string): string {
+  return renderMarkdown(content);
+}
+</script>
+
+<style lang="scss">
+.dx-markdown-code-block {
+  position: relative;
+  margin: 1em 0;
+
+  pre {
+    margin: 0;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 1em;
+    border-radius: 6px;
+    overflow-x: auto;
+
+    code {
+      background: transparent;
+      padding: 0;
+      font-size: 0.875em;
+      font-family: 'Fira Code', 'Monaco', monospace;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,5 @@
+export { default as CodeViewer } from "./CodeViewer.vue";
+export { default as CodeViewerCollapsed } from "./CodeViewerCollapsed.vue";
+export { default as CodeViewerFooter } from "./CodeViewerFooter.vue";
+export { default as LanguageBadge } from "./LanguageBadge.vue";
+export { default as MarkdownContent } from "./MarkdownContent.vue";

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

@@ -10,58 +10,105 @@
         <!-- Header with filename and navigation -->
         <CarouselHeader
           v-if="currentFile"
-          :filename="currentFile.filename || currentFile.name"
+          :filename="filename"
           :show-back-button="hasParent"
+          :show-metadata-button="hasMetadata"
+          :metadata-count="metadataKeyCount"
           :show-transcodes-button="!!(currentFile.transcodes && currentFile.transcodes.length > 0)"
           :transcodes-count="currentFile.transcodes?.length || 0"
           @back="navigateToParent"
+          @metadata="onMetadataClick"
           @transcodes="showTranscodeNav = true"
         />
 
-        <!-- Carousel -->
-        <div class="flex-grow relative">
-          <div class="absolute inset-0">
+        <!-- Content Area with optional split panel -->
+        <div class="flex-grow flex relative min-h-0">
+          <!-- Carousel Section -->
+          <div class="flex-grow relative">
+            <div class="absolute inset-0">
+              <div
+                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'
+                ]"
+              >
+                <FileRenderer
+                  :file="slide.file"
+                  :autoplay="slide.isActive"
+                />
+              </div>
+            </div>
+
+            <!-- Navigation Arrows -->
             <div
-              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'
-              ]"
+              v-if="canNavigatePrevious"
+              class="absolute left-4 top-1/2 -translate-y-1/2 z-20"
             >
-              <FileRenderer
-                :file="slide.file"
-                :autoplay="slide.isActive"
-              />
+              <QBtn
+                round
+                size="lg"
+                class="bg-slate-800 text-white opacity-70 hover:opacity-100"
+                @click="navigatePrevious"
+              >
+                <ChevronLeftIcon class="w-8" />
+              </QBtn>
             </div>
-          </div>
-
-          <!-- 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"
+            <div
+              v-if="canNavigateNext"
+              class="absolute right-4 top-1/2 -translate-y-1/2 z-20"
             >
-              <ChevronLeftIcon class="w-8" />
-            </QBtn>
+              <QBtn
+                round
+                size="lg"
+                class="bg-slate-800 text-white opacity-70 hover:opacity-100"
+                @click="navigateNext"
+              >
+                <ChevronRightIcon class="w-8" />
+              </QBtn>
+            </div>
           </div>
+
+          <!-- Split Metadata Panel -->
           <div
-            v-if="canNavigateNext"
-            class="absolute right-4 top-1/2 -translate-y-1/2 z-20"
+            v-if="metadataSplitMode && showMetadataDialog && hasMetadata"
+            class="w-[40%] max-w-[600px] min-w-[300px] bg-slate-900 border-l border-slate-700 flex flex-col"
           >
-            <QBtn
-              round
-              size="lg"
-              class="bg-slate-800 text-white opacity-70 hover:opacity-100"
-              @click="navigateNext"
-            >
-              <ChevronRightIcon class="w-8" />
-            </QBtn>
+            <div class="px-4 py-3 bg-slate-800 border-b border-slate-700 flex items-center justify-between flex-shrink-0">
+              <h3 class="text-slate-200 font-medium">Metadata</h3>
+              <div class="flex items-center gap-1">
+                <QBtn
+                  flat
+                  dense
+                  round
+                  size="sm"
+                  class="text-slate-400 hover:text-white hover:bg-slate-700"
+                  @click="undockToModal"
+                >
+                  <UndockIcon class="w-4 h-4" />
+                  <QTooltip>Undock to modal</QTooltip>
+                </QBtn>
+                <QBtn
+                  flat
+                  dense
+                  round
+                  size="sm"
+                  class="text-slate-400 hover:text-white hover:bg-slate-700"
+                  @click="showMetadataDialog = false"
+                >
+                  <CloseIcon class="w-4 h-4" />
+                  <QTooltip>Close</QTooltip>
+                </QBtn>
+              </div>
+            </div>
+            <div class="flex-1 min-h-0 p-4">
+              <CodeViewer
+                :model-value="filteredMetadata"
+                :readonly="true"
+                format="yaml"
+              />
+            </div>
           </div>
         </div>
 
@@ -88,19 +135,35 @@
         :transcodes="currentFile.transcodes"
         @select="onSelectTranscode"
       />
+
+      <!-- Metadata Dialog (only in modal mode) -->
+      <FileMetadataDialog
+        v-if="showMetadataDialog && !metadataSplitMode"
+        :filename="filename"
+        :mime-type="mimeType"
+        :metadata="filteredMetadata"
+        :show-dock-button="true"
+        @close="showMetadataDialog = false"
+        @dock="dockToSplit"
+      />
     </div>
   </QDialog>
 </template>
 
 <script setup lang="ts">
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/outline";
+import { FaSolidWindowMaximize as UndockIcon } from "danx-icon";
 import { ref } from "vue";
 import { useFileNavigation } from "../../../composables/useFileNavigation";
+import { useFilePreview } from "../../../composables/useFilePreview";
 import { useKeyboardNavigation } from "../../../composables/useKeyboardNavigation";
 import { useVirtualCarousel } from "../../../composables/useVirtualCarousel";
+import { getItem, setItem } from "../../../helpers";
 import { XIcon as CloseIcon } from "../../../svg";
 import { UploadedFile } from "../../../types";
+import { CodeViewer } from "../Code";
 import CarouselHeader from "../Files/CarouselHeader.vue";
+import FileMetadataDialog from "../Files/FileMetadataDialog.vue";
 import FileRenderer from "../Files/FileRenderer.vue";
 import ThumbnailStrip from "../Files/ThumbnailStrip.vue";
 import TranscodeNavigator from "../Files/TranscodeNavigator.vue";
@@ -155,4 +218,37 @@ function onSelectTranscode(transcode: UploadedFile, index: number) {
 		diveInto(transcode, currentFile.value.transcodes);
 	}
 }
+
+// Metadata navigation
+const showMetadataDialog = ref(false);
+const METADATA_MODE_KEY = "danx-file-preview-metadata-mode";
+const metadataSplitMode = ref(getItem(METADATA_MODE_KEY, false));
+
+function onMetadataClick() {
+	// Toggle metadata visibility - mode determines whether it shows as split or modal
+	showMetadataDialog.value = !showMetadataDialog.value;
+}
+
+function dockToSplit() {
+	// Switch from modal to split view
+	metadataSplitMode.value = true;
+	setItem(METADATA_MODE_KEY, true);
+	// Keep showMetadataDialog true so it shows in split mode
+}
+
+function undockToModal() {
+	// Switch from split to modal view
+	metadataSplitMode.value = false;
+	setItem(METADATA_MODE_KEY, false);
+	// Keep showMetadataDialog true so it shows as modal
+}
+
+// Use file preview composable for metadata
+const {
+	filename,
+	mimeType,
+	hasMetadata,
+	metadataKeyCount,
+	filteredMetadata
+} = useFilePreview({ file: currentFile });
 </script>

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

@@ -22,6 +22,24 @@
         {{ filename }}
       </div>
 
+      <!-- Metadata Button -->
+      <QBtn
+        v-if="showMetadataButton"
+        flat
+        dense
+        class="bg-purple-700 text-purple-200 hover:bg-purple-600"
+        @click="$emit('metadata')"
+      >
+        <div class="flex items-center flex-nowrap gap-1">
+          <MetaIcon class="w-4" />
+          <QBadge
+            class="bg-purple-900 text-purple-200"
+            :label="metadataCount"
+          />
+          <span class="text-sm ml-1">Metadata</span>
+        </div>
+      </QBtn>
+
       <!-- Transcodes Button -->
       <QBtn
         v-if="showTranscodesButton"
@@ -57,16 +75,21 @@
 
 <script setup lang="ts">
 import { ArrowLeftIcon, FilmIcon } from "@heroicons/vue/outline";
+import { FaSolidBarcode as MetaIcon } from "danx-icon";
 import { XIcon as CloseIcon } from "../../../svg";
 
 withDefaults(defineProps<{
 	filename: string;
 	showBackButton?: boolean;
+	showMetadataButton?: boolean;
+	metadataCount?: number;
 	showTranscodesButton?: boolean;
 	transcodesCount?: number;
 	showCloseButton?: boolean;
 }>(), {
 	showBackButton: false,
+	showMetadataButton: false,
+	metadataCount: 0,
 	showTranscodesButton: false,
 	transcodesCount: 0,
 	showCloseButton: false
@@ -74,6 +97,7 @@ withDefaults(defineProps<{
 
 defineEmits<{
 	'back': [];
+	'metadata': [];
 	'transcodes': [];
 	'close': [];
 }>();

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

@@ -0,0 +1,69 @@
+<template>
+  <InfoDialog
+    title="File Metadata"
+    :hide-done="true"
+    done-text="Close"
+    content-class="w-[80vw] h-[80vh] max-w-none"
+    @close="$emit('close')"
+  >
+    <div class="file-metadata-container h-full flex flex-col">
+      <!-- File info header -->
+      <div class="bg-sky-50 rounded-lg p-4 mb-4 flex-shrink-0">
+        <h4 class="text-lg font-semibold text-gray-900 mb-2">
+          {{ filename || 'Unnamed File' }}
+        </h4>
+        <div v-if="mimeType" class="text-sm text-gray-600">
+          Type: {{ mimeType }}
+        </div>
+      </div>
+
+      <!-- Metadata section -->
+      <div class="bg-white rounded-lg border border-gray-200 overflow-hidden flex-1 flex flex-col min-h-0">
+        <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex-shrink-0 flex items-center justify-between">
+          <h4 class="text-base font-medium text-gray-900">
+            Metadata
+          </h4>
+          <QBtn
+            v-if="showDockButton"
+            flat
+            dense
+            round
+            size="sm"
+            class="text-gray-500 hover:text-gray-700 hover:bg-gray-200"
+            @click="$emit('dock')"
+          >
+            <DockSideIcon class="w-4 h-4" />
+            <QTooltip>Dock to side</QTooltip>
+          </QBtn>
+        </div>
+        <div class="p-4 flex-1 min-h-0 flex flex-col">
+          <CodeViewer
+            :model-value="metadata"
+            :readonly="true"
+            format="yaml"
+          />
+        </div>
+      </div>
+    </div>
+  </InfoDialog>
+</template>
+
+<script setup lang="ts">
+import { FaSolidTableColumns as DockSideIcon } from "danx-icon";
+import { CodeViewer } from "../Code";
+import { InfoDialog } from "../Dialogs";
+
+withDefaults(defineProps<{
+	filename: string;
+	mimeType?: string;
+	metadata: Record<string, unknown>;
+	showDockButton?: boolean;
+}>(), {
+	showDockButton: false
+});
+
+defineEmits<{
+	close: [];
+	dock: [];
+}>();
+</script>