From 5bed8527c0113b1c16ffaeca5535ab54c498a0d7 Mon Sep 17 00:00:00 2001
From: Jacob Noah <138569835+jacob-nv@users.noreply.github.com>
Date: Fri, 8 Dec 2023 23:33:42 +0100
Subject: [PATCH] Updated video dimensions to fit view horizontal/vertical
 (#10101)

---
 changelog/unreleased/bugfix-video-dimensions  |  7 +++++
 .../src/components/Sources/MediaVideo.vue     | 31 +++++++++++++++++--
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-video-dimensions

diff --git a/changelog/unreleased/bugfix-video-dimensions b/changelog/unreleased/bugfix-video-dimensions
new file mode 100644
index 00000000000..f85a2a3d070
--- /dev/null
+++ b/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
diff --git a/packages/web-app-preview/src/components/Sources/MediaVideo.vue b/packages/web-app-preview/src/components/Sources/MediaVideo.vue
index c568fa7a482..77e1307427a 100644
--- a/packages/web-app-preview/src/components/Sources/MediaVideo.vue
+++ b/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>