[MS] Open files in history with viewers

client/src/locales/en-US.json

@@ -1758,6 +1758,8 @@
         "details": "Details",
         "openingFile": "Opening file...",
         "fileTooBig": "File is too big to be opened using a viewer.",
+        "unknownFileType": "Cannot preview this file type.",
+        "noFolderPreview": "Cannot preview folders.",
         "genericError": "Failed to open the file.",
         "controls": {
             "zoom": {

client/src/locales/fr-FR.json

@@ -1758,6 +1758,8 @@
         "details": "Détails",
         "openingFile": "Ouverture du fichier...",
         "fileTooBig": "Le fichier est trop large pour être ouvert avec un visualiseur.",
+        "unknownFileType": "Impossible de prévisualiser ce type de fichier.",
+        "noFolderPreview": "Impossible de prévisualiser les dossiers.",
         "genericError": "Impossible d'ouvrir le fichier.",
         "controls": {
             "zoom": {

client/src/services/fileOpener.ts

@@ -10,6 +10,7 @@ import { Base64, openSpinnerModal } from 'megashark-lib';
 
 interface OpenPathOptions {
   skipViewers?: boolean;
+  onlyViewers?: boolean;
   atTime?: DateTime;
 }
 
@@ -97,11 +98,31 @@ async function openPath(
   const entry = statsResult.value;
 
   if (!entry.isFile()) {
-    await openWithSystem(workspaceHandle, entry, informationManager);
+    if (!options.onlyViewers) {
+      await openWithSystem(workspaceHandle, entry, informationManager);
+    } else {
+      await informationManager.present(
+        new Information({
+          message: 'FoldersPage.open.noFolderPreview',
+          level: InformationLevel.Error,
+        }),
+        PresentationMode.Modal,
+      );
+    }
     return;
   }
   if (isDesktop() && options.skipViewers) {
-    await openWithSystem(workspaceHandle, entry, informationManager);
+    if (!options.onlyViewers) {
+      await openWithSystem(workspaceHandle, entry, informationManager);
+    } else {
+      await informationManager.present(
+        new Information({
+          message: 'FoldersPage.open.unknownFileType',
+          level: InformationLevel.Error,
+        }),
+        PresentationMode.Modal,
+      );
+    }
     return;
   }
 
@@ -114,7 +135,9 @@ async function openPath(
 
   try {
     if (!contentType || contentType.type === FileContentType.Unknown || (isDesktop() && !ENABLED_FILE_VIEWERS.includes(contentType.type))) {
-      await openWithSystem(workspaceHandle, entry, informationManager);
+      if (!options.onlyViewers) {
+        await openWithSystem(workspaceHandle, entry, informationManager);
+      }
     } else {
       if ((entry as any).size > OPEN_FILE_SIZE_LIMIT) {
         informationManager.present(
@@ -124,20 +147,36 @@ async function openPath(
           }),
           PresentationMode.Toast,
         );
-        await openWithSystem(workspaceHandle, entry, informationManager);
+        if (!options.onlyViewers) {
+          await openWithSystem(workspaceHandle, entry, informationManager);
+        } else {
+          await informationManager.present(
+            new Information({
+              message: 'FoldersPage.open.unknownType',
+              level: InformationLevel.Error,
+            }),
+            PresentationMode.Modal,
+          );
+        }
         return;
       }
-
-      recentDocumentManager.addFile({
-        entryId: entry.id,
-        path: entry.path,
-        workspaceHandle: workspaceHandle,
-        name: entry.name,
-        contentType: contentType,
-      });
+      if (!options.atTime) {
+        recentDocumentManager.addFile({
+          entryId: entry.id,
+          path: entry.path,
+          workspaceHandle: workspaceHandle,
+          name: entry.name,
+          contentType: contentType,
+        });
+      }
 
       await navigateTo(Routes.Viewer, {
-        query: { workspaceHandle: workspaceHandle, documentPath: entry.path, fileTypeInfo: Base64.fromObject(contentType) },
+        query: {
+          workspaceHandle: workspaceHandle,
+          documentPath: entry.path,
+          timestamp: options.atTime?.toMillis().toString(),
+          fileTypeInfo: Base64.fromObject(contentType),
+        },
       });
     }
   } finally {

client/src/views/viewers/FileViewer.vue

@@ -16,9 +16,17 @@
               :image="getFileIcon(contentInfo.fileName)"
               class="file-icon"
             />
-            <ion-text class="title-h3">
-              {{ contentInfo.fileName }}
-            </ion-text>
+            <div class="file-viewer-topbar__title">
+              <ion-text class="title-h3">
+                {{ contentInfo.fileName }}
+              </ion-text>
+              <ion-text
+                class="subtitles-sm"
+                v-if="atDateTime"
+              >
+                {{ $msTranslate(I18n.formatDate(atDateTime)) }}
+              </ion-text>
+            </div>
             <!-- Here we could put the file action buttons -->
             <ion-buttons class="file-viewer-topbar-buttons">
               <ion-button
@@ -69,7 +77,7 @@ import {
 } from '@/parsec';
 import { IonPage, IonContent, IonButton, IonText, IonIcon, IonButtons, modalController } from '@ionic/vue';
 import { informationCircle, open } from 'ionicons/icons';
-import { Base64, MsSpinner, MsImage } from 'megashark-lib';
+import { Base64, MsSpinner, MsImage, I18n } from 'megashark-lib';
 import { ref, Ref, type Component, inject, onMounted, shallowRef, onUnmounted } from 'vue';
 import { ImageViewer, VideoViewer, SpreadsheetViewer, DocumentViewer, AudioViewer, TextViewer, PdfViewer } from '@/views/viewers';
 import { Information, InformationLevel, InformationManager, InformationManagerKey, PresentationMode } from '@/services/informationManager';
@@ -86,15 +94,18 @@ const viewerComponent: Ref<Component | null> = shallowRef(null);
 const contentInfo: Ref<FileContentInfo | null> = ref(null);
 const detectedFileType = ref<DetectedFileType | null>(null);
 const loaded = ref(false);
-const atDateTime: Ref<DateTime | null> = ref(null);
+const atDateTime: Ref<DateTime | undefined> = ref(undefined);
 
 const cancelRouteWatch = watchRoute(async () => {
   if (!currentRouteIs(Routes.Viewer)) {
     return;
   }
 
+  const query = getCurrentRouteQuery();
+  const timestamp = Number.isNaN(Number(query.timestamp)) ? undefined : Number(query.timestamp);
+
   // Same file, no need to reload
-  if (contentInfo.value && contentInfo.value.path === getDocumentPath()) {
+  if (contentInfo.value && contentInfo.value.path === getDocumentPath() && atDateTime.value?.toMillis() === timestamp) {
     return;
   }
   await loadFile();
@@ -104,7 +115,7 @@ async function loadFile(): Promise<void> {
   loaded.value = false;
   contentInfo.value = null;
   detectedFileType.value = null;
-  atDateTime.value = null;
+  atDateTime.value = undefined;
   viewerComponent.value = null;
   const workspaceHandle = getWorkspaceHandle();
   if (!workspaceHandle) {
@@ -121,7 +132,7 @@ async function loadFile(): Promise<void> {
   }
 
   const timestamp = Number(getCurrentRouteQuery().timestamp);
-  if (timestamp) {
+  if (!Number.isNaN(timestamp)) {
     atDateTime.value = DateTime.fromMillis(timestamp);
   }
 
@@ -339,6 +350,16 @@ async function onClick(event: MouseEvent): Promise<void> {
         height: 1.5rem;
       }
 
+      &__title {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+
+        .subtitles-sm {
+          color: var(--parsec-color-light-secondary-grey);
+        }
+      }
+
       .title-h3 {
         color: var(--parsec-color-light-primary-700);
       }

client/src/views/workspaces/WorkspaceHistoryPage.vue

@@ -147,7 +147,6 @@ import { computed, onBeforeUnmount, onMounted, ref, Ref, inject } from 'vue';
 import { FsPath, Path, getWorkspaceInfo, StartedWorkspaceInfo, statFolderChildrenAt, entryStatAt, EntryName } from '@/parsec';
 import { MsCheckbox, MsSpinner, MsSearchInput, askQuestion, Answer, MsDatetimePicker, I18n } from 'megashark-lib';
 import { DateTime } from 'luxon';
-import { StorageManager, StorageManagerKey } from '@/services/storageManager';
 import { RouterPathNode } from '@/components/header/HeaderBreadcrumbs.vue';
 import HeaderBreadcrumbs from '@/components/header/HeaderBreadcrumbs.vue';
 import { WorkspaceHistoryEntryCollection, WorkspaceHistoryEntryModel, HistoryFileListItem } from '@/components/files';
@@ -159,7 +158,6 @@ import { InformationManager, InformationManagerKey } from '@/services/informatio
 import { openPath } from '@/services/fileOpener';
 
 const fileOperationManager: FileOperationManager = inject(FileOperationManagerKey)!;
-const storageManager: StorageManager = inject(StorageManagerKey)!;
 const informationManager: InformationManager = inject(InformationManagerKey)!;
 const workspaceInfo: Ref<StartedWorkspaceInfo | null> = ref(null);
 // Default it to 5 seconds ago to not interfere with the `max` value
@@ -324,18 +322,8 @@ async function onEntryClicked(entry: WorkspaceHistoryEntryModel): Promise<void>
       return;
     }
 
-    // Cannot open files for now
-
-    // Doing it this way to trick the linter
-    const a = 0;
-    if (a === 0) {
-      return;
-    }
-
-    const config = await storageManager.retrieveConfig();
-
     await openPath(workspaceInfo.value.handle, entry.path, informationManager, {
-      skipViewers: config.skipViewers,
+      onlyViewers: true,
       atTime: DateTime.fromJSDate(selectedDateTime.value),
     });
   } else {

newsfragments/9482.feature.rst

@@ -0,0 +1 @@
+Preview some file types when exploring a workspace history