From 24e4998f2d47fbefd0a0abb99b69cbcfef65163b Mon Sep 17 00:00:00 2001
From: NicoTuxx <nicotuxxdev@gmail.com>
Date: Tue, 19 Nov 2024 04:41:55 +0100
Subject: [PATCH 1/2] Improve FileViewer components structure & code
 reusability - Create a FileViewerWrapper component to wrap the FileViewer and
 its action bar - Isolate the FileViewerActionBar as a common component -
 Update all the viewers component to use the new structure - Improve all
 viewers UI/UX - Add translation for 'opening file'

---
 .../viewers/FileViewerActionBar.vue           |  39 +++++++
 client/src/components/viewers/index.ts        |   5 +
 client/src/locales/en-US.json                 |   3 +-
 client/src/locales/fr-FR.json                 |   3 +-
 client/src/theme/global.scss                  |  30 +++--
 client/src/views/files/FoldersPage.vue        |   2 +-
 client/src/views/viewers/AudioViewer.vue      |  64 ++++++++++-
 client/src/views/viewers/DocumentViewer.vue   |  17 ++-
 client/src/views/viewers/FileViewer.vue       |  84 ++------------
 .../src/views/viewers/FileViewerWrapper.vue   |  35 ++++++
 client/src/views/viewers/ImageViewer.vue      |  45 ++++++--
 client/src/views/viewers/PdfViewer.vue        | 103 +++++++++---------
 .../src/views/viewers/SpreadsheetViewer.vue   |  43 ++++----
 client/src/views/viewers/TextViewer.vue       |   2 +-
 client/src/views/viewers/VideoViewer.vue      |  81 ++++++++++++--
 client/src/views/viewers/index.ts             |   3 +-
 .../views/workspaces/WorkspaceHistoryPage.vue |   2 +-
 17 files changed, 359 insertions(+), 202 deletions(-)
 create mode 100644 client/src/components/viewers/FileViewerActionBar.vue
 create mode 100644 client/src/components/viewers/index.ts
 create mode 100644 client/src/views/viewers/FileViewerWrapper.vue

diff --git a/client/src/components/viewers/FileViewerActionBar.vue b/client/src/components/viewers/FileViewerActionBar.vue
new file mode 100644
index 00000000000..2518d386f02
--- /dev/null
+++ b/client/src/components/viewers/FileViewerActionBar.vue
@@ -0,0 +1,39 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <ms-action-bar class="file-viewer-action-bar">
+    <ms-action-bar-button
+      v-for="(action, key) in actions"
+      :key="key"
+      :icon="action.icon"
+      @click="action.handler"
+      :button-label="action.text"
+    />
+  </ms-action-bar>
+</template>
+
+<script setup lang="ts">
+import { MsActionBar, MsActionBarButton, Translatable } from 'megashark-lib';
+
+// TODO: add a disabled state to the button (ex: max zoom level).
+// TODO: extract this interface to a separate file.
+interface FileViewerAction {
+  icon?: string;
+  text?: Translatable;
+  handler: () => void;
+}
+
+defineProps<{
+  actions: Array<FileViewerAction>;
+}>();
+</script>
+
+<style scoped>
+.file-viewer-action-bar {
+  padding: 0.5rem 1rem;
+  width: fit-content;
+  background: var(--parsec-color-light-primary-100);
+  border-radius: 5em;
+  box-shadow: var(--parsec-shadow-light);
+}
+</style>
diff --git a/client/src/components/viewers/index.ts b/client/src/components/viewers/index.ts
new file mode 100644
index 00000000000..abfac964274
--- /dev/null
+++ b/client/src/components/viewers/index.ts
@@ -0,0 +1,5 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+
+import FileViewerActionBar from '@/components/viewers/FileViewerActionBar.vue';
+
+export { FileViewerActionBar };
diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
index c94d97cc90c..62461a82d80 100644
--- a/client/src/locales/en-US.json
+++ b/client/src/locales/en-US.json
@@ -1694,6 +1694,7 @@
         "date": "Preview date:"
     },
     "fileViewers": {
-        "openWithDefault": "Open with default application"
+        "openWithDefault": "Open with default application",
+        "openingFile": "Opening file..."
     }
 }
diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
index 2be683e84d0..c97199fabd9 100644
--- a/client/src/locales/fr-FR.json
+++ b/client/src/locales/fr-FR.json
@@ -1694,6 +1694,7 @@
         "date": "Date de prévisualisation :"
     },
     "fileViewers": {
-        "openWithDefault": "Ouvrir avec l'application par défaut"
+        "openWithDefault": "Ouvrir avec l'application par défaut",
+        "openingFile": "Ouverture du fichier..."
     }
 }
diff --git a/client/src/theme/global.scss b/client/src/theme/global.scss
index 80e52c700d3..69d7930881f 100644
--- a/client/src/theme/global.scss
+++ b/client/src/theme/global.scss
@@ -135,23 +135,19 @@ ion-title {
 }
 
 // specific style for the file viewers
-.file-viewer {
-  &-bottombar {
-    .action-bar {
-      .ms-action-bar-button {
-        height: 3em;
-        width: 3em;
-        border-radius: 100%;
-        color: var(--parsec-color-light-primary-600);
-        opacity: 0.6;
-        scale: 1;
-        transition: all 0.2s ease-in-out;
-
-        &:hover {
-          scale: 1.1;
-          opacity: 1;
-        }
-      }
+.file-viewer-action-bar {
+  .ms-action-bar-button {
+    height: 3em;
+    width: fit-content;
+    border-radius: 100%;
+    color: var(--parsec-color-light-primary-600);
+    opacity: 0.6;
+    scale: 1;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      scale: 1.1;
+      opacity: 1;
     }
   }
 }
diff --git a/client/src/views/files/FoldersPage.vue b/client/src/views/files/FoldersPage.vue
index d00a8d971d8..7b37a656bdb 100644
--- a/client/src/views/files/FoldersPage.vue
+++ b/client/src/views/files/FoldersPage.vue
@@ -1211,7 +1211,7 @@ async function openEntries(entries: EntryModel[]): Promise<void> {
     return;
   }
 
-  const modal = await openSpinnerModal('OPENING FILE');
+  const modal = await openSpinnerModal('fileViewers.openingFile');
   const contentType = await detectFileContentType(workspaceHandle, entry.path);
 
   try {
diff --git a/client/src/views/viewers/AudioViewer.vue b/client/src/views/viewers/AudioViewer.vue
index cd5d922fc51..d05934663ed 100644
--- a/client/src/views/viewers/AudioViewer.vue
+++ b/client/src/views/viewers/AudioViewer.vue
@@ -1,26 +1,80 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <audio
-    controls
-    v-if="src.length"
-    :src="src"
-  />
+  <file-viewer-wrapper>
+    <template #viewer>
+      <audio
+        controls
+        v-if="src.length"
+        ref="audioElement"
+        @play="updateMediaData"
+        @playing="updateMediaData"
+        @canplay="updateMediaData"
+        @pause="updateMediaData"
+        @volumechange="updateMediaData"
+        :src="src"
+      />
+    </template>
+    <!-- Disabled till we add an illustration in the viewer -->
+    <!-- <template #controls>
+      <file-viewer-action-bar
+        :actions="[
+          { icon: paused ? play : pause, handler: togglePlayback },
+          { icon: getVolumeIcon(), handler: toggleVolume },
+        ]"
+      />
+    </template> -->
+  </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
+// import { play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute } from 'ionicons/icons';
 import { onMounted, ref } from 'vue';
+import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
 
 const props = defineProps<{
   contentInfo: FileContentInfo;
 }>();
 
+// const VOLUME_LEVELS = [0, 0.25, 0.5, 1];
+
 const src = ref('');
+const audioElement = ref();
+const paused = ref(true);
+const volume = ref(1);
 
 onMounted(async () => {
   src.value = URL.createObjectURL(new Blob([props.contentInfo.data], { type: props.contentInfo.mimeType }));
 });
+
+// function togglePlayback(): void {
+//   audioElement.value.paused ? audioElement.value.play() : audioElement.value.pause();
+// }
+
+// function toggleVolume(): void {
+//   audioElement.value.volume = VOLUME_LEVELS[(VOLUME_LEVELS.indexOf(audioElement.value.volume) + 1) % VOLUME_LEVELS.length];
+// }
+
+function updateMediaData(event: Event): void {
+  volume.value = (event.target as HTMLAudioElement).volume;
+  paused.value = (event.target as HTMLAudioElement).paused;
+}
+
+// function getVolumeIcon(): string {
+//   switch (volume.value) {
+//     case 0:
+//       return volumeMute;
+//     case 0.25:
+//       return volumeLow;
+//     case 0.5:
+//       return volumeMedium;
+//     case 1:
+//       return volumeHigh;
+//     default:
+//       return volumeMute;
+//   }
+// }
 </script>
 
 <style scoped lang="scss"></style>
diff --git a/client/src/views/viewers/DocumentViewer.vue b/client/src/views/viewers/DocumentViewer.vue
index 1be087360b2..894dadc390a 100644
--- a/client/src/views/viewers/DocumentViewer.vue
+++ b/client/src/views/viewers/DocumentViewer.vue
@@ -1,16 +1,21 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <ms-spinner v-show="loading" />
-  <div
-    v-show="!loading"
-    class="document-content"
-    v-html="htmlContent"
-  />
+  <file-viewer-wrapper>
+    <template #viewer>
+      <ms-spinner v-show="loading" />
+      <div
+        v-show="!loading"
+        class="document-content"
+        v-html="htmlContent"
+      />
+    </template>
+  </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
 import mammoth from 'mammoth';
 import { MsSpinner } from 'megashark-lib';
diff --git a/client/src/views/viewers/FileViewer.vue b/client/src/views/viewers/FileViewer.vue
index db07e33e170..b5f20f57ee6 100644
--- a/client/src/views/viewers/FileViewer.vue
+++ b/client/src/views/viewers/FileViewer.vue
@@ -32,42 +32,11 @@
             </ion-buttons>
           </div>
 
-          <!-- file-viewer wrapper -->
-          <div class="file-viewer-wrapper">
-            <component
-              :is="viewerComponent"
-              :content-info="contentInfo"
-              :config="viewerConfig"
-            />
-          </div>
-
-          <!-- file-viewer bottombar -->
-          <div class="file-viewer-bottombar">
-            <!-- Here the idea is to put the specific file viewer bottom bar actions -->
-            <ms-action-bar
-              v-if="detectedFileType?.type === FileContentType.Image"
-              class="action-bar"
-            >
-              <ms-action-bar-button
-                id="button-image-zoom-out"
-                v-show="detectedFileType?.type === FileContentType.Image"
-                :icon="remove"
-                @click="zoomOut"
-              />
-              <ms-action-bar-button
-                id="button-image-zoom-reset"
-                v-show="detectedFileType?.type === FileContentType.Image"
-                :icon="resize"
-                @click="resetZoom"
-              />
-              <ms-action-bar-button
-                id="button-image-zoom-in"
-                v-show="detectedFileType?.type === FileContentType.Image"
-                :icon="add"
-                @click="zoomIn"
-              />
-            </ms-action-bar>
-          </div>
+          <!-- file-viewer component -->
+          <component
+            :is="viewerComponent"
+            :content-info="contentInfo"
+          />
         </div>
       </div>
     </ion-content>
@@ -91,14 +60,14 @@ import {
   closeHistoryFile,
 } from '@/parsec';
 import { IonPage, IonContent, IonButton, IonText, IonIcon, IonButtons } from '@ionic/vue';
-import { add, open, remove, resize } from 'ionicons/icons';
-import { Base64, MsSpinner, MsImage, MsActionBar, MsActionBarButton } from 'megashark-lib';
+import { open } from 'ionicons/icons';
+import { Base64, MsSpinner, MsImage } from 'megashark-lib';
 import { ref, Ref, type Component, inject, onMounted, shallowRef } from 'vue';
 import { ImageViewer, VideoViewer, SpreadsheetViewer, DocumentViewer, AudioViewer, TextViewer, PdfViewer } from '@/views/viewers';
 import { Information, InformationLevel, InformationManager, InformationManagerKey, PresentationMode } from '@/services/informationManager';
 import { getCurrentRouteQuery, getDocumentPath, getWorkspaceHandle, navigateTo, Routes } from '@/router';
 import { DetectedFileType, FileContentType } from '@/common/fileTypes';
-import { FileContentInfo, ViewerConfig, imageViewerUtils } from '@/views/viewers/utils';
+import { FileContentInfo } from '@/views/viewers/utils';
 import { Env } from '@/services/environment';
 import { DateTime } from 'luxon';
 import { getFileIcon } from '@/common/file';
@@ -110,9 +79,6 @@ const detectedFileType = ref<DetectedFileType | null>(null);
 const loaded = ref(false);
 const READ_CHUNK_SIZE = 512_000;
 const atDateTime: Ref<DateTime | null> = ref(null);
-const viewerConfig: Ref<ViewerConfig> = ref({
-  zoomLevel: 100,
-});
 
 onMounted(async () => {
   loaded.value = false;
@@ -274,18 +240,6 @@ async function onClick(event: MouseEvent): Promise<void> {
     }
   }
 }
-
-function zoomOut(): void {
-  viewerConfig.value = imageViewerUtils.zoomOut(viewerConfig.value);
-}
-
-function resetZoom(): void {
-  viewerConfig.value = imageViewerUtils.resetZoom(viewerConfig.value);
-}
-
-function zoomIn(): void {
-  viewerConfig.value = imageViewerUtils.zoomIn(viewerConfig.value);
-}
 </script>
 
 <style scoped lang="scss">
@@ -357,28 +311,6 @@ function zoomIn(): void {
         }
       }
     }
-
-    &-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: hidden;
-    }
-
-    &-bottombar {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 1.5rem;
-
-      .action-bar {
-        padding: 0.5rem 1rem;
-        width: fit-content;
-        background: var(--parsec-color-light-primary-100);
-        border-radius: 5em;
-        box-shadow: var(--parsec-shadow-light);
-      }
-    }
   }
 }
 </style>
diff --git a/client/src/views/viewers/FileViewerWrapper.vue b/client/src/views/viewers/FileViewerWrapper.vue
new file mode 100644
index 00000000000..b143750bf74
--- /dev/null
+++ b/client/src/views/viewers/FileViewerWrapper.vue
@@ -0,0 +1,35 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <!-- file-viewer wrapper -->
+  <div class="file-viewer-wrapper">
+    <slot name="viewer" />
+  </div>
+
+  <!-- file-viewer bottombar -->
+  <div class="file-viewer-bottombar">
+    <slot name="controls" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.file-viewer-wrapper {
+  height: 100%;
+  height: -webkit-fill-available;
+  height: -moz-available;
+  height: stretch;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.file-viewer-bottombar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+}
+</style>
diff --git a/client/src/views/viewers/ImageViewer.vue b/client/src/views/viewers/ImageViewer.vue
index c0170f15f18..171218e636c 100644
--- a/client/src/views/viewers/ImageViewer.vue
+++ b/client/src/views/viewers/ImageViewer.vue
@@ -1,24 +1,43 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <img
-    v-if="src.length"
-    :src="src"
-  />
+  <file-viewer-wrapper>
+    <template #viewer>
+      <img
+        v-if="src.length"
+        :src="src"
+      />
+    </template>
+    <template #controls>
+      <file-viewer-action-bar
+        :actions="[
+          { icon: remove, handler: zoomOut },
+          { icon: resize, handler: resetZoom },
+          { icon: add, handler: zoomIn },
+        ]"
+      />
+    </template>
+  </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
+import { add, remove, resize } from 'ionicons/icons';
 import { computed, onMounted, ref } from 'vue';
-import { FileContentInfo, ImageViewerConfig } from '@/views/viewers/utils';
+import { FileViewerActionBar } from '@/components/viewers';
+import { FileViewerWrapper } from '@/views/viewers';
+import { FileContentInfo, imageViewerUtils } from '@/views/viewers/utils';
 
 const props = defineProps<{
   contentInfo: FileContentInfo;
-  config: ImageViewerConfig;
 }>();
 
+const viewerConfig = ref({
+  zoomLevel: 100,
+});
+
 const src = ref('');
 const zoomLevel = computed(() => {
-  const level = props.config.zoomLevel;
+  const level = viewerConfig.value.zoomLevel;
   console.log('Setting zoom level to', level);
   if (level < 5 || level > 500) {
     return;
@@ -29,6 +48,18 @@ const zoomLevel = computed(() => {
 onMounted(async () => {
   src.value = URL.createObjectURL(new Blob([props.contentInfo.data], { type: props.contentInfo.mimeType }));
 });
+
+function zoomOut(): void {
+  viewerConfig.value = imageViewerUtils.zoomOut(viewerConfig.value);
+}
+
+function resetZoom(): void {
+  viewerConfig.value = imageViewerUtils.resetZoom(viewerConfig.value);
+}
+
+function zoomIn(): void {
+  viewerConfig.value = imageViewerUtils.zoomIn(viewerConfig.value);
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/client/src/views/viewers/PdfViewer.vue b/client/src/views/viewers/PdfViewer.vue
index 7680285697d..b8da7a70c26 100644
--- a/client/src/views/viewers/PdfViewer.vue
+++ b/client/src/views/viewers/PdfViewer.vue
@@ -1,47 +1,33 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <div
-    class="pdf-container"
-    v-if="pdf"
-  >
-    <div :disabled="loading">
-      <span
-        class="zoom"
-        @click="zoom(-0.2)"
+  <file-viewer-wrapper>
+    <template #viewer>
+      <div
+        class="pdf-container"
+        v-if="pdf"
       >
-        ZOOM-
-      </span>
-      <span
-        class="zoom"
-        @click="zoom(0.2)"
-      >
-        ZOOM+
-      </span>
-      <span
-        class="page"
-        v-for="i in pdf.numPages"
-        :key="i"
-        :class="{ 'page-disabled': i === currentPage }"
-        :disabled="i === currentPage"
-        @click="loadPage(i)"
-      >
-        {{ i }}
-      </span>
-    </div>
-    <ms-spinner v-show="loading" />
-    <canvas
-      v-show="!loading"
-      class="canvas"
-      ref="canvas"
-    />
-  </div>
+        <ms-spinner v-show="loading" />
+        <canvas
+          v-show="!loading"
+          class="canvas"
+          ref="canvas"
+        />
+      </div>
+    </template>
+    <template #controls>
+      <file-viewer-action-bar :actions="actions" />
+    </template>
+  </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
+import { add, remove, resize } from 'ionicons/icons';
 import { inject, onMounted, ref, Ref, shallowRef } from 'vue';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { MsSpinner } from 'megashark-lib';
+import { FileViewerWrapper } from '@/views/viewers';
+import { FileViewerActionBar } from '@/components/viewers';
+import { I18n, MsSpinner, Translatable } from 'megashark-lib';
 import * as pdfjs from 'pdfjs-dist';
 import { Information, InformationLevel, InformationManager, InformationManagerKey, PresentationMode } from '@/services/informationManager';
 
@@ -51,10 +37,12 @@ const props = defineProps<{
 
 const loading = ref(true);
 const canvas = ref();
-const scale = ref(1.0);
+const defaultScale = 1.0;
+const scale = ref(defaultScale);
 const currentPage = ref(1);
 const pdf: Ref<pdfjs.PDFDocumentProxy | null> = shallowRef(null);
 const informationManager: InformationManager = inject(InformationManagerKey)!;
+const actions: Ref<Array<{ icon?: string; text?: Translatable; handler: () => void }>> = ref([]);
 
 onMounted(async () => {
   loading.value = true;
@@ -62,6 +50,14 @@ onMounted(async () => {
   try {
     pdf.value = await pdfjs.getDocument(props.contentInfo.data).promise;
     await loadPage(1);
+    actions.value = [
+      { icon: remove, handler: zoomOut },
+      { icon: resize, handler: resetZoom },
+      { icon: add, handler: zoomIn },
+    ];
+    for (let i = 1; i <= pdf.value.numPages; i++) {
+      actions.value.push({ text: I18n.valueAsTranslatable(`Page ${i.toString()}`), handler: () => loadPage(i) });
+    }
   } catch (error: any) {
     window.electronAPI.log('error', `Failed to parse PDF: ${error}`);
     informationManager.present(
@@ -81,6 +77,19 @@ async function zoom(factor: number): Promise<void> {
   await loadPage(currentPage.value);
 }
 
+async function zoomIn(): Promise<void> {
+  await zoom(0.2);
+}
+
+async function zoomOut(): Promise<void> {
+  await zoom(-0.2);
+}
+
+async function resetZoom(): Promise<void> {
+  scale.value = defaultScale;
+  await loadPage(currentPage.value);
+}
+
 async function loadPage(pageIndex: number): Promise<void> {
   if (!pdf.value) {
     return;
@@ -124,24 +133,12 @@ async function loadPage(pageIndex: number): Promise<void> {
 <style scoped lang="scss">
 .pdf-container {
   width: 100%;
-  height: 600px;
-}
+  max-height: 100%;
+  display: flex;
+  justify-content: center;
 
-.page {
-  padding-right: 1em;
-  cursor: pointer;
-  user-select: none;
-  font-weight: bold;
-
-  &-disabled {
-    color: grey;
-    font-weight: normal;
+  & * {
+    transition: all 0.3s ease-in-out;
   }
 }
-
-.zoom {
-  cursor: pointer;
-  user-select: none;
-  font-weight: bold;
-}
 </style>
diff --git a/client/src/views/viewers/SpreadsheetViewer.vue b/client/src/views/viewers/SpreadsheetViewer.vue
index a73e932cad8..98cd88c7814 100644
--- a/client/src/views/viewers/SpreadsheetViewer.vue
+++ b/client/src/views/viewers/SpreadsheetViewer.vue
@@ -1,29 +1,27 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <div class="pages">
-    <ion-button
-      v-for="page in pages"
-      @click="switchToPage(page)"
-      :disabled="page === currentPage || loading"
-      :key="page"
-    >
-      {{ page }}
-    </ion-button>
-  </div>
-  <ms-spinner v-show="loading" />
-  <div
-    v-show="!loading"
-    class="spreadsheet-content"
-    v-html="htmlContent"
-  />
+  <file-viewer-wrapper>
+    <template #viewer>
+      <ms-spinner v-show="loading" />
+      <div
+        v-show="!loading"
+        class="spreadsheet-content"
+        v-html="htmlContent"
+      />
+    </template>
+    <template #controls>
+      <file-viewer-action-bar :actions="actions" />
+    </template>
+  </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
-import { IonButton } from '@ionic/vue';
-import { MsSpinner } from 'megashark-lib';
-import { onBeforeMount, onMounted, ref } from 'vue';
+import { MsSpinner, I18n, Translatable } from 'megashark-lib';
+import { onBeforeMount, onMounted, Ref, ref } from 'vue';
 import XLSX from 'xlsx';
+import { FileViewerActionBar } from '@/components/viewers';
+import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
 
 const props = defineProps<{
@@ -36,11 +34,16 @@ const pages = ref<Array<string>>([]);
 const currentPage = ref('');
 const loading = ref(true);
 let worker: Worker | null = null;
+const actions: Ref<Array<{ icon?: string; text?: Translatable; handler: () => void }>> = ref([]);
 
 onMounted(async () => {
   workbook = XLSX.read(props.contentInfo.data, { type: 'array' });
   pages.value = workbook.SheetNames;
   await switchToPage(workbook.SheetNames[0]);
+  for (const page of pages.value) {
+    console.log(page);
+    actions.value.push({ text: I18n.valueAsTranslatable(page), handler: () => switchToPage(page) });
+  }
 });
 
 onBeforeMount(async () => {
@@ -78,7 +81,7 @@ async function switchToPage(page: string): Promise<void> {
 <style scoped lang="scss">
 .spreadsheet-content {
   width: 100%;
-  height: 680px;
+  max-height: 100%;
   overflow: auto;
 
   :deep(table) {
diff --git a/client/src/views/viewers/TextViewer.vue b/client/src/views/viewers/TextViewer.vue
index 17dd2b3414d..66021283816 100644
--- a/client/src/views/viewers/TextViewer.vue
+++ b/client/src/views/viewers/TextViewer.vue
@@ -42,6 +42,6 @@ function getLanguage(): string | undefined {
 <style scoped lang="scss">
 .text-container {
   width: 100%;
-  height: 680px;
+  height: 100%;
 }
 </style>
diff --git a/client/src/views/viewers/VideoViewer.vue b/client/src/views/viewers/VideoViewer.vue
index 81f4a2f3e7a..5f804cbda78 100644
--- a/client/src/views/viewers/VideoViewer.vue
+++ b/client/src/views/viewers/VideoViewer.vue
@@ -1,37 +1,94 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <video
-    class="video"
-    controls
-    width="250"
-    v-if="src.length"
-  >
-    <source
-      :src="src"
-      :type="contentInfo.mimeType"
-    />
-  </video>
+  <file-viewer-wrapper>
+    <template #viewer>
+      <video
+        class="video"
+        v-if="src.length"
+        ref="videoElement"
+        @play="updateMediaData"
+        @playing="updateMediaData"
+        @canplay="updateMediaData"
+        @pause="updateMediaData"
+        @volumechange="updateMediaData"
+      >
+        <source
+          :src="src"
+          :type="contentInfo.mimeType"
+        />
+      </video>
+    </template>
+    <template #controls>
+      <file-viewer-action-bar
+        :actions="[
+          { icon: paused ? play : pause, handler: togglePlayback },
+          { icon: getVolumeIcon(), handler: toggleVolume },
+          { icon: scan, handler: toggleFullScreen },
+        ]"
+      />
+    </template>
+  </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
+import { play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute, scan } from 'ionicons/icons';
 import { onMounted, ref } from 'vue';
 import { FileContentInfo } from '@/views/viewers/utils';
+import { FileViewerActionBar } from '@/components/viewers';
+import { FileViewerWrapper } from '@/views/viewers';
 
 const props = defineProps<{
   contentInfo: FileContentInfo;
 }>();
 
+const VOLUME_LEVELS = [0, 0.25, 0.5, 1];
+
 const src = ref('');
+const videoElement = ref();
+const paused = ref(true);
+const volume = ref(1);
 
 onMounted(async () => {
   src.value = URL.createObjectURL(new Blob([props.contentInfo.data], { type: props.contentInfo.mimeType }));
 });
+
+function togglePlayback(): void {
+  videoElement.value.paused ? videoElement.value.play() : videoElement.value.pause();
+}
+
+function toggleVolume(): void {
+  videoElement.value.volume = VOLUME_LEVELS[(VOLUME_LEVELS.indexOf(videoElement.value.volume) + 1) % VOLUME_LEVELS.length];
+}
+
+function toggleFullScreen(): void {
+  videoElement.value?.requestFullscreen();
+}
+
+function updateMediaData(event: Event): void {
+  volume.value = (event.target as HTMLVideoElement).volume;
+  paused.value = (event.target as HTMLVideoElement).paused;
+}
+
+function getVolumeIcon(): string {
+  switch (volume.value) {
+    case 0:
+      return volumeMute;
+    case 0.25:
+      return volumeLow;
+    case 0.5:
+      return volumeMedium;
+    case 1:
+      return volumeHigh;
+    default:
+      return volumeMute;
+  }
+}
 </script>
 
 <style scoped lang="scss">
 .video {
   width: 100%;
-  height: 680px;
+  max-height: 100%;
 }
 </style>
diff --git a/client/src/views/viewers/index.ts b/client/src/views/viewers/index.ts
index d7a163deed1..6d6cacb7081 100644
--- a/client/src/views/viewers/index.ts
+++ b/client/src/views/viewers/index.ts
@@ -3,10 +3,11 @@
 import AudioViewer from '@/views/viewers/AudioViewer.vue';
 import DocumentViewer from '@/views/viewers/DocumentViewer.vue';
 import FileViewer from '@/views/viewers/FileViewer.vue';
+import FileViewerWrapper from '@/views/viewers/FileViewerWrapper.vue';
 import ImageViewer from '@/views/viewers/ImageViewer.vue';
 import PdfViewer from '@/views/viewers/PdfViewer.vue';
 import SpreadsheetViewer from '@/views/viewers/SpreadsheetViewer.vue';
 import TextViewer from '@/views/viewers/TextViewer.vue';
 import VideoViewer from '@/views/viewers/VideoViewer.vue';
 
-export { AudioViewer, DocumentViewer, FileViewer, ImageViewer, PdfViewer, SpreadsheetViewer, TextViewer, VideoViewer };
+export { AudioViewer, DocumentViewer, FileViewer, FileViewerWrapper, ImageViewer, PdfViewer, SpreadsheetViewer, TextViewer, VideoViewer };
diff --git a/client/src/views/workspaces/WorkspaceHistoryPage.vue b/client/src/views/workspaces/WorkspaceHistoryPage.vue
index 2c42c5b008c..5e70cef2f50 100644
--- a/client/src/views/workspaces/WorkspaceHistoryPage.vue
+++ b/client/src/views/workspaces/WorkspaceHistoryPage.vue
@@ -361,7 +361,7 @@ async function onEntryClicked(entry: WorkspaceHistoryEntryModel): Promise<void>
       return;
     }
 
-    const modal = await openSpinnerModal('OPENING FILE');
+    const modal = await openSpinnerModal('fileViewers.openingFile');
     const contentType = await detectFileContentType(workspaceInfo.value.handle, entry.path, DateTime.fromJSDate(selectedDateTime.value));
 
     try {

From 3a0ba88f4becceb632c40ff63575a25b34047b58 Mon Sep 17 00:00:00 2001
From: Maxime GRANDCOLAS <maxime.grandcolas@scille.fr>
Date: Mon, 25 Nov 2024 07:54:16 +0100
Subject: [PATCH 2/2] [MS] Disabled component tests

---
 client/vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/vite.config.ts b/client/vite.config.ts
index 9078a1b3b04..55f1bdef7ca 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -64,7 +64,7 @@ if (process.env.PARSEC_APP_SENTRY_AUTH_TOKEN) {
 // https://vitejs.dev/config/
 const config: UserConfigExport = () => ({
   test: {
-    include: ['tests/component/specs/*.spec.ts', 'tests/unit/specs/*.spec.ts'],
+    include: ['tests/unit/specs/*.spec.ts'],
     setupFiles: [path.resolve(__dirname, './tests/component/support/setup.ts')],
     server: {
       deps: {