Implement full screen mode

changelog/unreleased/enhancement-preview-app-introduce-full-screen-mode

@@ -0,0 +1,4 @@
+Enhancement: Introduce full screen mode to the preview app
+
+https://github.com/owncloud/web/pull/7994
+https://github.com/owncloud/web/issues/6700

packages/web-app-preview/src/App.vue

@@ -37,6 +37,7 @@
       <div
         v-show="activeMediaFileCached"
         class="oc-width-1-1 oc-flex oc-flex-center oc-flex-middle oc-p-s oc-box-shadow-medium preview-player"
+        :class="{ lightbox: isFullScreenModeActivated }"
       >
         <img
           v-if="activeMediaFileCached.isImage"
@@ -64,7 +65,10 @@
         </audio>
       </div>
     </template>
-    <div class="oc-position-medium oc-position-bottom-center preview-details">
+    <div
+      class="oc-position-medium oc-position-bottom-center preview-details"
+      :class="{ lightbox: isFullScreenModeActivated }"
+    >
       <div
         class="oc-background-brand oc-p-s oc-width-large oc-flex oc-flex-middle oc-flex-center oc-flex-around preview-controls-action-bar"
       >
@@ -92,6 +96,25 @@
         >
           <oc-icon size="large" name="arrow-drop-right" />
         </oc-button>
+        <div class="oc-flex">
+          <oc-button
+            v-oc-tooltip="
+              isFullScreenModeActivated ? exitFullScreenDescription : enterFullScreenDescription
+            "
+            class="preview-controls-fullscreen"
+            appearance="raw"
+            variation="inverse"
+            :aria-label="
+              isFullScreenModeActivated ? exitFullScreenDescription : enterFullScreenDescription
+            "
+            @click="toggleFullscreenMode"
+          >
+            <oc-icon
+              fill-type="line"
+              :name="isFullScreenModeActivated ? 'fullscreen-exit' : 'fullscreen'"
+            />
+          </oc-button>
+        </div>
         <div v-if="activeMediaFileCached.isImage" class="oc-flex oc-flex-middle">
           <div class="oc-flex">
             <oc-button
@@ -153,7 +176,7 @@
   </main>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { mapGetters } from 'vuex'
 import {
   useAccessToken,
@@ -176,12 +199,30 @@ export default defineComponent({
   setup() {
     const store = useStore()
 
+    const isFullScreenModeActivated = ref(false)
+    const toggleFullscreenMode = () => {
+      const activateFullscreen = !unref(isFullScreenModeActivated)
+      isFullScreenModeActivated.value = activateFullscreen
+      if (activateFullscreen) {
+        if (document.documentElement.requestFullscreen) {
+          document.documentElement.requestFullscreen()
+        }
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        }
+      }
+    }
+
     return {
       ...useAppDefaults({
         applicationId: 'preview'
       }),
       accessToken: useAccessToken({ store }),
-      isPublicLinkContext: usePublicLinkContext({ store })
+      isPublicLinkContext: usePublicLinkContext({ store }),
+
+      isFullScreenModeActivated,
+      toggleFullscreenMode
     }
   },
   data() {
@@ -264,6 +305,12 @@ export default defineComponent({
     isActiveFileTypeVideo() {
       return this.activeFilteredFile.mimeType.toLowerCase().startsWith('video')
     },
+    enterFullScreenDescription() {
+      return this.$gettext('Enter full screen mode')
+    },
+    exitFullScreenDescription() {
+      return this.$gettext('Exit full screen mode')
+    },
     imageShrinkDescription() {
       return this.$gettext('Shrink the image')
     },
@@ -287,6 +334,9 @@ export default defineComponent({
     },
     currentZoomDisplayValue() {
       return `${(this.currentImageZoom * 100).toFixed(0)}%`
+    },
+    toggleFullScreenDescription() {
+      return this.$gettext('Toggle full screen mode')
     }
   },
 
@@ -304,13 +354,16 @@ export default defineComponent({
   async mounted() {
     // keep a local history for this component
     window.addEventListener('popstate', this.handleLocalHistoryEvent)
+    document.addEventListener('fullscreenchange', this.handleFullScreenChangeEvent)
+
     await this.loadFolderForFileContext(this.currentFileContext)
     this.setActiveFile(this.currentFileContext.driveAliasAndItem)
     this.$refs.preview.focus()
   },
 
   beforeDestroy() {
     window.removeEventListener('popstate', this.handleLocalHistoryEvent)
+    document.removeEventListener('fullscreenchange', this.handleFullScreenChangeEvent)
 
     this.cachedFiles.forEach((medium) => {
       this.revokeUrl(medium.url)
@@ -339,6 +392,12 @@ export default defineComponent({
       this.setActiveFile(result.route.params.driveAliasAndItem)
     },
 
+    handleFullScreenChangeEvent() {
+      if (document.fullscreenElement === null) {
+        this.isFullScreenModeActivated = false
+      }
+    },
+
     // update route and url
     updateLocalHistory() {
       const routeOptions = mergeFileRouteOptions(
@@ -479,10 +538,32 @@ export default defineComponent({
     max-height: 65vh;
   }
 }
+.preview-player.lightbox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  margin: 0;
+  background: rgba(38, 38, 38, 0.8);
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+}
+
+.preview-player.lightbox > * {
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+.preview-details.lightbox {
+  z-index: 1000;
+  opacity: 0.9;
+}
 
 .preview-tool-bar {
   align-items: center;
   justify-content: space-between;
+  z-index: 1001;
 }
 
 .preview-controls-action-count {