Merge pull request #20 from nextcloud/enhancement/modal/resize

Recalculate size on window resize

Author: skjnldsv

apps/viewer/apps/viewer/package-lock.json

@@ -35,9 +35,10 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "debounce": "^1.2.0",
     "mime-types": "^2.1.22",
     "nextcloud-server": "^0.15.9",
-    "nextcloud-vue": "^0.8.0",
+    "nextcloud-vue": "^0.9.0",
     "vue": "^2.6.8",
     "vue-async-computed": "^3.6.1"
   },

apps/viewer/apps/viewer/package.json

@@ -34,6 +34,7 @@
 import mime from 'Mixins/Mime'
 import axios from 'axios'
 import Vue from 'vue'
+import debounce from 'debounce'
 import AsyncComputed from 'vue-async-computed'
 
 Vue.use(AsyncComputed)
@@ -51,7 +52,13 @@ export default {
 			return this.getBase64FromImage()
 		}
 	},
+	mounted() {
+		window.addEventListener('resize', debounce(() => {
+			this.updateImgSize()
+		}, 100))
+	},
 	methods: {
+		// Updates the dimensions of the modal
 		updateImgSize() {
 			const naturalHeight = this.$el.naturalHeight
 			const naturalWidth = this.$el.naturalWidth
@@ -64,6 +71,7 @@ export default {
 
 			this.doneLoading()
 		},
+
 		/**
 		 * Manually retrieve the path and return its base64
 		 *

apps/viewer/apps/viewer/src/components/Images.vue

@@ -43,6 +43,7 @@
 </template>
 
 <script>
+import debounce from 'debounce'
 import mime from 'Mixins/Mime'
 
 export default {
@@ -67,18 +68,28 @@ export default {
 			}
 		}
 	},
+	mounted() {
+		window.addEventListener('resize', debounce(() => {
+			this.updateVideoSize()
+		}, 100))
+	},
 	methods: {
+		// Updates the dimensions of the modal
 		updateVideoSize() {
 			const videoHeight = this.$el.videoHeight
 			const videoWidth = this.$el.videoWidth
 			this.updateHeightWidth(videoHeight, videoWidth)
 		},
+
+		// Show/hide video controls
 		showControls() {
 			this.visibleControls = true
 		},
 		hideControls() {
 			this.visibleControls = false
 		},
+
+		// Toggle play/pause
 		playPause() {
 			if (this.$el.paused) {
 				this.$el.play()

apps/viewer/apps/viewer/src/components/Videos.vue

@@ -67,7 +67,7 @@ export default {
 			const modalContainer = this.$parent.$el.querySelector('#modal-wrapper')
 			if (modalContainer) {
 				// ! modal container have maxHeight:80% AND maxWidth: 900px
-				const parentHeight = Math.round(modalContainer.clientHeight * 0.8)
+				const parentHeight = Math.round(modalContainer.clientHeight * 0.8) - 50 // minus header
 				const parentWidth = modalContainer.clientWidth > 900
 					? 900
 					: modalContainer.clientWidth

apps/viewer/apps/viewer/src/mixins/Mime.js

@@ -41,7 +41,7 @@
 			:key="previousFile.path"
 			:mime="previousFile.mime"
 			:path="previousFile.path"
-			class="hidden-visually"
+			class="hidden-visually file-view"
 			@error="previousFailed" />
 		<error
 			v-else
@@ -56,6 +56,7 @@
 			:mime="currentFile.mime"
 			:path="currentFile.path"
 			:active="true"
+			class="file-view"
 			@loaded="doneLoading"
 			@error="currentFailed" />
 		<error
@@ -70,7 +71,7 @@
 			:key="nextFile.path"
 			:mime="nextFile.mime"
 			:path="nextFile.path"
-			class="hidden-visually"
+			class="hidden-visually file-view"
 			@error="nextFailed" />
 		<error
 			v-else
@@ -439,4 +440,9 @@ export default {
 .icon-share-white-forced {
 	background-image: url('~Assets/share-white.svg');
 }
+
+.file-view {
+	transition: height 100ms ease,
+		width 100ms ease;
+}
 </style>