Merge pull request #85 from xconnio/open-images-window

open images & videos in separate window

Author: Mahad-10

src/components/DesktopSessionHost.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch, nextTick, type Component } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch, nextTick, markRaw, type Component } from 'vue'
 import { useRouter } from 'vue-router'
+import { type Session } from 'xconn'
 
 import { useMachinesStore } from '@/stores/machines'
 import { useSettingsStore } from '@/stores/settings'
@@ -11,9 +12,11 @@ import EmbeddedIndexedFiles from '@/components/EmbeddedIndexedFiles.vue'
 import TerminalPanel from '@/components/TerminalPanel.vue'
 import ResourceMonitor from '@/components/ResourceMonitor.vue'
 import DesktopSettingsPanel from '@/components/DesktopSettingsPanel.vue'
+import FilePreviewModal from '@/components/FilePreviewModal.vue'
 import FloatingWindow from '@/components/FloatingWindow.vue'
 import AppDock from '@/components/AppDock.vue'
 import { loadCachedWallpaper, storeWallpaper } from '@/composables/useWallpaperCache'
+import { getFilePreviewType, type FilePreviewType } from '@/utils/fileTypes'
 
 const props = defineProps<{ realm: string; active: boolean }>()
 
@@ -37,6 +40,7 @@ const {
   restoreWindow,
   toggleMaximize,
   updateBounds,
+  updateTitle,
   syncMaximizedBounds,
 } = desktopSessionsStore.getOrCreate(props.realm)
 
@@ -207,6 +211,7 @@ const appComponents: Record<string, Component> = {
   documents: EmbeddedIndexedFiles,
   'resource-monitor': ResourceMonitor,
   settings: DesktopSettingsPanel,
+  preview: FilePreviewModal,
 }
 
 function windowProps(win: { id: string; appId: string; props: Record<string, unknown> }) {
@@ -237,6 +242,13 @@ function windowProps(win: { id: string; appId: string; props: Record<string, unk
         realm: props.realm,
         focused,
       }
+    case 'preview':
+      return {
+        session: win.props.session as Session,
+        entry: win.props.entry as PreviewEntry,
+        entries: win.props.entries as PreviewEntry[],
+        focused,
+      }
     default:
       return {
         realm: props.realm,
@@ -247,6 +259,30 @@ function windowProps(win: { id: string; appId: string; props: Record<string, unk
   }
 }
 
+type PreviewEntry = { path: string; name: string; size: number }
+
+const PREVIEW_ICONS: Record<FilePreviewType, string> = {
+  image: 'bi-image-fill',
+  video: 'bi-file-earmark-play-fill',
+  audio: 'bi-file-earmark-music-fill',
+  pdf: 'bi-file-earmark-pdf-fill',
+  text: 'bi-file-earmark-text-fill',
+  none: 'bi-file-earmark-fill',
+}
+
+function onPreviewFile(session: Session, entry: PreviewEntry, entries: PreviewEntry[]) {
+  openWindow({
+    appId: 'preview',
+    title: entry.name,
+    icon: PREVIEW_ICONS[getFilePreviewType(entry.name)],
+    iconColor: '#334155',
+    iconBg: '#e2e8f0',
+    width: 760,
+    height: 560,
+    props: { session: markRaw(session), entry, entries },
+  }, maximizedContainerSize())
+}
+
 function onOpenFiles(path: string) {
   const filesApp = apps.find((a) => a.id === 'files')!
   launchApp(filesApp, path)
@@ -382,6 +418,8 @@ onUnmounted(() => {
             v-bind="windowProps(win)"
             @close="closeWindow(win.id)"
             @open-files="onOpenFiles"
+            @preview-file="onPreviewFile"
+            @update-title="updateTitle(win.id, $event)"
           />
         </FloatingWindow>
       </div>

src/components/EmbeddedDesktopFiles.vue

@@ -6,7 +6,6 @@ import { useSessionCacheStore } from '@/stores/sessionCache'
 import { useSettingsStore } from '@/stores/settings'
 import { useEntryNavigation } from '@/composables/useEntryNavigation'
 import { floatingWindowToolbarKey } from '@/composables/floatingWindowToolbar'
-import FilePreviewModal from '@/components/FilePreviewModal.vue'
 import type { FileBrowseResult, FileEntry } from '@/types'
 import {
   createX25519KeyPair,
@@ -37,6 +36,10 @@ const props = defineProps<{
   focused?: boolean
 }>()
 
+const emit = defineEmits<{
+  'preview-file': [session: Session, entry: FileEntry, entries: FileEntry[]]
+}>()
+
 const sessionCacheStore = useSessionCacheStore()
 const settingsStore = useSettingsStore()
 
@@ -72,7 +75,6 @@ const supportedFileProcedures = ref({
   copy: false,
 })
 
-const previewEntry = ref<FileEntry | null>(null)
 const navHistory = ref<string[]>([])
 const navHistoryIndex = ref(-1)
 
@@ -385,7 +387,6 @@ function resetExplorerState() {
   }
   clipboard.value = null
   closeActionSheet()
-  previewEntry.value = null
   searchGeneration++
   fileSearchActive.value = false
   fileSearchQuery.value = ''
@@ -690,12 +691,14 @@ function closeActionSheet() {
   operationError.value = ''
 }
 
-// Opens a file in the shared FilePreviewModal (handles type detection, streaming
-// audio/video over WebRTC, and buffered preview for images/pdf/text internally).
+// Opens a file in its own preview window (see FilePreviewModal.vue — handles type
+// detection, streaming audio/video over WebRTC, and buffered preview for
+// images/pdf/text internally).
 function openPreview(entry: FileEntry) {
   if (entry.is_dir) return
   selectEntry(entry)
-  previewEntry.value = entry
+  if (!session.value) return
+  emit('preview-file', session.value, entry, visibleEntries.value)
 }
 
 // Low-level stream: calls onChunk for each decrypted data chunk as it arrives.
@@ -1480,7 +1483,7 @@ function handleGlobalKeydown(e: KeyboardEvent) {
   const target = e.target as HTMLElement
 
   if (e.key === 'Escape') {
-    if (document.fullscreenElement) return // FilePreviewModal handles its own fullscreen exit
+    if (document.fullscreenElement) return // let the browser exit fullscreen first
     if (fileSearchActive.value) { exitFileSearch(); return }
     if (searchMode.value) { exitSearchMode(); return }
     if (propertiesModalVisible.value) { closePropertiesModal(); return }
@@ -1529,10 +1532,6 @@ watch(
   },
 )
 
-watch(previewEntry, (entry) => {
-  document.body.style.overflow = entry ? 'hidden' : ''
-})
-
 function applyThumbnails(entries: FileEntry[]) {
   for (const entry of entries) {
     if (entry.thumbnail && !thumbnailUrls[entry.path]) {
@@ -1562,7 +1561,6 @@ onUnmounted(() => {
   window.removeEventListener('resize', updateViewMode)
   document.removeEventListener('keydown', handleGlobalKeydown)
   disconnectDesktopSession()
-  previewEntry.value = null
   for (const url of Object.values(thumbnailUrls)) URL.revokeObjectURL(url)
 })
 
@@ -2038,13 +2036,6 @@ onUnmounted(() => {
     </div>
   </div>
 
-  <FilePreviewModal
-    v-if="previewEntry && session"
-    :session="session"
-    :entry="previewEntry"
-    @close="previewEntry = null"
-  />
-
   <Transition name="dl-toast">
     <div v-if="downloadProgress" class="dl-toast">
       <div class="dl-toast-header">

src/components/EmbeddedIndexedFiles.vue

@@ -4,7 +4,6 @@ import { type Session } from 'xconn'
 
 import { useSessionCacheStore } from '@/stores/sessionCache'
 import { useSettingsStore } from '@/stores/settings'
-import FilePreviewModal from '@/components/FilePreviewModal.vue'
 import { useEntryNavigation } from '@/composables/useEntryNavigation'
 import {
   createX25519KeyPair,
@@ -47,6 +46,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   'open-files': [path: string]
+  'preview-file': [session: Session, entry: IndexEntry, entries: IndexEntry[]]
 }>()
 
 const sessionCacheStore = useSessionCacheStore()
@@ -70,7 +70,6 @@ const activeSession = shallowRef<Session | null>(null)
 let activeKeys: EncryptionKeys | null = null
 let activeCategories: string[] = []
 
-const previewEntry = ref<IndexEntry | null>(null)
 const previewSession = shallowRef<Session | null>(null)
 
 const contextMenu = ref<{ x: number; y: number; entry: IndexEntry } | null>(null)
@@ -94,12 +93,6 @@ function handleContextMenuKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape') closeContextMenu()
 }
 
-const previewModalProps = computed(() =>
-  previewEntry.value && previewSession.value
-    ? { session: previewSession.value, entry: previewEntry.value }
-    : null
-)
-
 function updateViewMode() { isGridView.value = window.innerWidth >= 768 }
 
 const viewConfig = computed(() => {
@@ -143,7 +136,7 @@ const displayEntries = computed(() =>
 
 function openEntry(entry: IndexEntry) {
   if (!previewSession.value) return
-  previewEntry.value = entry
+  emit('preview-file', previewSession.value, entry, displayEntries.value)
 }
 
 const { handleNavKey } = useEntryNavigation({
@@ -156,7 +149,6 @@ const { handleNavKey } = useEntryNavigation({
 
 function handleKeydown(e: KeyboardEvent) {
   if (!props.focused) return
-  if (previewEntry.value) return
   const target = e.target as HTMLElement
   if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return
   handleNavKey(e)
@@ -359,13 +351,6 @@ onUnmounted(() => {
       </div>
     </Teleport>
 
-    <FilePreviewModal
-      v-if="previewModalProps"
-      :session="previewModalProps.session"
-      :entry="previewModalProps.entry"
-      @close="previewEntry = null"
-    />
-
     <div v-if="isConnecting || isLoading" class="state-center">
       <div class="pulse-ring" :style="{ background: viewConfig.bg }">
         <i class="bi" :class="viewConfig.icon" :style="{ color: viewConfig.color }"></i>