Updated video dimensions to fit view horizontal/vertical (#10101)

changelog/unreleased/bugfix-video-dimensions

@@ -0,0 +1,7 @@
+Bugfix: Displaying full video in their dimensions
+
+We've fixed a bug which set the video width and height to 100% of the screen size instead of the actual video size.
+This bug made it impossible to see the full video in 1080x1920, while 1920x1080 might have been slightly cropped.
+
+https://github.com/owncloud/web/issues/10010
+https://github.com/owncloud/web/pull/10101

packages/web-app-preview/src/components/Sources/MediaVideo.vue

@@ -1,10 +1,16 @@
 <template>
-  <video :key="`media-video-${file.id}`" controls preload="preload" :autoplay="isAutoPlayEnabled">
+  <video
+    ref="video"
+    :key="`media-video-${file.id}`"
+    controls
+    preload="preload"
+    :autoplay="isAutoPlayEnabled"
+  >
     <source :src="file.url" :type="file.mimeType" />
   </video>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, onBeforeUnmount, onMounted, PropType, ref } from 'vue'
 import { CachedFile } from '../../helpers/types'
 
 export default defineComponent({
@@ -18,6 +24,27 @@ export default defineComponent({
       type: Boolean,
       default: true
     }
+  },
+  setup() {
+    const video = ref(null)
+    const resizeVideoDimensions = () => {
+      const stageMedia: HTMLElement = document.querySelector('.stage_media')
+      video.value.style.maxHeight = `${stageMedia.offsetHeight - 10}px`
+      video.value.style.maxWidth = `${stageMedia.offsetWidth - 10}px`
+    }
+
+    onMounted(() => {
+      resizeVideoDimensions()
+      window.addEventListener('resize', resizeVideoDimensions)
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', resizeVideoDimensions)
+    })
+
+    return {
+      video
+    }
   }
 })
 </script>