[MS] FileControlsFullscreen component

client/src/components/viewers/controls/FileControlsFullscreen.vue

@@ -0,0 +1,14 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <file-controls-group>
+    <file-controls-button :icon="scan" />
+  </file-controls-group>
+</template>
+
+<script setup lang="ts">
+import { scan } from 'ionicons/icons';
+import { FileControlsButton, FileControlsGroup } from '@/components/viewers';
+</script>
+
+<style lang="scss" scoped></style>

client/src/components/viewers/index.ts

@@ -2,9 +2,18 @@
 
 import FileControls from '@/components/viewers/controls/FileControls.vue';
 import FileControlsButton from '@/components/viewers/controls/FileControlsButton.vue';
+import FileControlsFullscreen from '@/components/viewers/controls/FileControlsFullscreen.vue';
 import FileControlsGroup from '@/components/viewers/controls/FileControlsGroup.vue';
 import FileControlsInput from '@/components/viewers/controls/FileControlsInput.vue';
 import FileControlsPagination from '@/components/viewers/controls/FileControlsPagination.vue';
 import FileControlsZoom from '@/components/viewers/controls/FileControlsZoom.vue';
 
-export { FileControls, FileControlsButton, FileControlsGroup, FileControlsInput, FileControlsPagination, FileControlsZoom };
+export {
+  FileControls,
+  FileControlsButton,
+  FileControlsFullscreen,
+  FileControlsGroup,
+  FileControlsInput,
+  FileControlsPagination,
+  FileControlsZoom,
+};

client/src/views/viewers/AudioViewer.vue

@@ -17,19 +17,20 @@
       />
     </template>
     <!-- Disabled till we add an illustration in the viewer -->
-    <!-- <template #controls>
+    <template #controls>
       <file-controls>
-        <file-controls-button
+        <!-- <file-controls-button
           :class="{'flip-horizontal-ion-icon': ended}"
           :icon="getPlaybackIcon()"
           @click="togglePlayback"
-        />
-        <file-controls-button
+        /> -->
+        <!-- <file-controls-button
           :icon="getVolumeIcon()"
           @click="toggleVolume"
-        />
+        /> -->
+        <file-controls-fullscreen @click="toggleFullScreen" />
       </file-controls>
-    </template> -->
+    </template>
   </file-viewer-wrapper>
 </template>
 
@@ -38,6 +39,7 @@
 import { onMounted, ref } from 'vue';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
+import { FileControls, FileControlsFullscreen } from '@/components/viewers';
 
 const props = defineProps<{
   contentInfo: FileContentInfo;
@@ -95,6 +97,10 @@ function updateMediaData(event: Event): void {
 //       return pause;
 //   }
 // }
+
+function toggleFullScreen(): void {
+  audioElement.value?.requestFullscreen();
+}
 </script>
 
 <style scoped lang="scss"></style>

client/src/views/viewers/DocumentViewer.vue

@@ -5,18 +5,25 @@
     <template #viewer>
       <ms-spinner v-show="loading" />
       <div
+        ref="document"
         v-show="!loading"
         class="document-content"
         v-html="htmlContent"
       />
     </template>
+    <template #controls>
+      <file-controls>
+        <file-controls-fullscreen @click="toggleFullScreen" />
+      </file-controls>
+    </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 { FileControls, FileControlsFullscreen } from '@/components/viewers';
 import mammoth from 'mammoth';
 import { MsSpinner } from 'megashark-lib';
 
@@ -26,13 +33,18 @@ const props = defineProps<{
 
 const loading = ref(true);
 const htmlContent = ref('');
+const document = ref();
 
 onMounted(async () => {
   loading.value = true;
   const result = await mammoth.convertToHtml({ arrayBuffer: props.contentInfo.data.buffer });
   htmlContent.value = result.value;
   loading.value = false;
 });
+
+function toggleFullScreen(): void {
+  document.value?.requestFullscreen();
+}
 </script>
 
 <style scoped lang="scss"></style>

client/src/views/viewers/ImageViewer.vue

@@ -5,6 +5,7 @@
     <template #viewer>
       <img
         v-if="src.length"
+        ref="imgElement"
         :src="src"
       />
     </template>
@@ -14,14 +15,15 @@
           @change="onChange"
           ref="zoomControl"
         />
+        <file-controls-fullscreen @click="toggleFullScreen" />
       </file-controls>
     </template>
   </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { FileControls, FileControlsZoom } from '@/components/viewers';
+import { FileControls, FileControlsFullscreen, FileControlsZoom } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
 
@@ -32,6 +34,7 @@ const props = defineProps<{
 const src = ref('');
 const zoomControl = ref();
 const zoomLevel = ref(1);
+const imgElement = ref();
 
 onMounted(async () => {
   src.value = URL.createObjectURL(new Blob([props.contentInfo.data], { type: props.contentInfo.mimeType }));
@@ -41,6 +44,10 @@ onMounted(async () => {
 function onChange(value: number): void {
   zoomLevel.value = value / 100;
 }
+
+function toggleFullScreen(): void {
+  imgElement.value?.requestFullscreen();
+}
 </script>
 
 <style scoped lang="scss">

client/src/views/viewers/PdfViewer.vue

@@ -27,6 +27,7 @@
           @change="loadPage"
           ref="pagination"
         />
+        <file-controls-fullscreen @click="toggleFullScreen" />
       </file-controls>
     </template>
   </file-viewer-wrapper>
@@ -36,7 +37,7 @@
 import { inject, onMounted, ref, Ref, shallowRef } from 'vue';
 import { FileContentInfo } from '@/views/viewers/utils';
 import { FileViewerWrapper } from '@/views/viewers';
-import { FileControls, FileControlsPagination, FileControlsZoom } from '@/components/viewers';
+import { FileControls, FileControlsPagination, FileControlsFullscreen, FileControlsZoom } 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';
@@ -121,6 +122,10 @@ async function loadPage(pageIndex: number): Promise<void> {
 
   loading.value = false;
 }
+
+function toggleFullScreen(): void {
+  canvas.value?.requestFullscreen();
+}
 </script>
 
 <style scoped lang="scss">

client/src/views/viewers/SpreadsheetViewer.vue

@@ -5,6 +5,7 @@
     <template #viewer>
       <ms-spinner v-show="loading" />
       <div
+        ref="spreadsheet"
         v-show="!loading"
         class="spreadsheet-content"
         v-html="htmlContent"
@@ -18,6 +19,7 @@
           @click="action.handler"
           :label="action.text"
         />
+        <file-controls-fullscreen @click="toggleFullScreen" />
       </file-controls>
     </template>
   </file-viewer-wrapper>
@@ -27,7 +29,7 @@
 import { MsSpinner, I18n, Translatable } from 'megashark-lib';
 import { onBeforeMount, onMounted, Ref, ref } from 'vue';
 import XLSX from 'xlsx';
-import { FileControls, FileControlsButton } from '@/components/viewers';
+import { FileControls, FileControlsButton, FileControlsFullscreen } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
 
@@ -42,6 +44,7 @@ const currentPage = ref('');
 const loading = ref(true);
 let worker: Worker | null = null;
 const actions: Ref<Array<{ icon?: string; text?: Translatable; handler: () => void }>> = ref([]);
+const spreadsheet = ref();
 
 onMounted(async () => {
   workbook = XLSX.read(props.contentInfo.data, { type: 'array' });
@@ -83,6 +86,10 @@ async function switchToPage(page: string): Promise<void> {
   };
   worker.postMessage(ws);
 }
+
+function toggleFullScreen(): void {
+  spreadsheet.value.requestFullscreen();
+}
 </script>
 
 <style scoped lang="scss">

client/src/views/viewers/TextViewer.vue

@@ -1,17 +1,27 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <div
-    ref="container"
-    class="text-container"
-  />
+  <file-viewer-wrapper>
+    <template #viewer>
+      <div
+        ref="container"
+        class="text-container"
+      />
+    </template>
+    <template #controls>
+      <file-controls>
+        <file-controls-fullscreen @click="toggleFullScreen" />
+      </file-controls>
+    </template>
+  </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import * as monaco from 'monaco-editor';
 import { FileContentInfo } from '@/views/viewers/utils';
-
+import { FileViewerWrapper } from '@/views/viewers';
+import { FileControls, FileControlsFullscreen } from '@/components/viewers';
 const props = defineProps<{
   contentInfo: FileContentInfo;
 }>();
@@ -37,6 +47,10 @@ function getLanguage(): string | undefined {
   ]);
   return langs.get(props.contentInfo.extension);
 }
+
+function toggleFullScreen(): void {
+  container.value?.requestFullscreen();
+}
 </script>
 
 <style scoped lang="scss">

client/src/views/viewers/VideoViewer.vue

@@ -31,20 +31,17 @@
           :icon="getVolumeIcon()"
           @click="toggleVolume"
         />
-        <file-controls-button
-          :icon="scan"
-          @click="toggleFullScreen"
-        />
+        <file-controls-fullscreen @click="toggleFullScreen" />
       </file-controls>
     </template>
   </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
-import { refresh, play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute, scan } from 'ionicons/icons';
+import { refresh, play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute } from 'ionicons/icons';
 import { onMounted, ref } from 'vue';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { FileControls, FileControlsButton } from '@/components/viewers';
+import { FileControls, FileControlsButton, FileControlsFullscreen } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 
 const props = defineProps<{