Update the view on sidebar show & hide

src/components/Images.vue

@@ -44,7 +44,6 @@
 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)
@@ -104,24 +103,16 @@ export default {
 		}
 	},
 	mounted() {
-		// update image size on window resize
-		window.addEventListener('resize', debounce(() => {
-			this.updateImgSize()
-		}, 100))
 		// end the dragging if your mouse go out of the content
 		window.addEventListener('mouseout', this.dragEnd)
 	},
 	methods: {
 		// Updates the dimensions of the modal
 		updateImgSize() {
-			const naturalHeight = this.$el.naturalHeight
-			const naturalWidth = this.$el.naturalWidth
-
-			this.updateHeightWidth(
-				naturalHeight,
-				naturalWidth
-			)
+			this.naturalHeight = this.$el.naturalHeight
+			this.naturalWidth = this.$el.naturalWidth
 
+			this.updateHeightWidth()
 			this.doneLoading()
 		},
 

src/components/Videos.vue

@@ -43,7 +43,6 @@
 </template>
 
 <script>
-import debounce from 'debounce'
 import mime from 'Mixins/Mime'
 
 export default {
@@ -68,17 +67,12 @@ 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)
+			this.naturalHeight = this.$el.videoHeight
+			this.naturalWidth = this.$el.videoWidth
+			this.updateHeightWidth()
 		},
 
 		// Show/hide video controls

src/mixins/Mime.js

@@ -19,6 +19,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import debounce from 'debounce'
 
 export default {
 	props: {
@@ -45,13 +46,19 @@ export default {
 		loaded: {
 			type: Boolean,
 			default: false
+		},
+		sidebarShown: {
+			type: Boolean,
+			default: false
 		}
 	},
 
 	data() {
 		return {
 			height: null,
 			width: null,
+			naturalHeight: null,
+			naturalWidth: null,
 			isLoaded: false
 		}
 	},
@@ -65,6 +72,11 @@ export default {
 					this.doneLoading()
 				}
 			}
+		},
+		// update image size on SIDEBARsidebar
+		sidebarShown: function() {
+			// wait for transition to complete (100ms)
+			setTimeout(this.updateHeightWidth, 150)
 		}
 	},
 
@@ -74,6 +86,11 @@ export default {
 			console.error('Error loading', this.path, e)
 			this.$emit('error', e)
 		})
+
+		// update image size on window resize
+		window.addEventListener('resize', debounce(() => {
+			this.updateHeightWidth()
+		}, 100))
 	},
 
 	methods: {
@@ -92,39 +109,36 @@ export default {
 		/**
 		 * Updates the current height and width data
 		 * based on the viewer maximum size
-		 *
-		 * @param {Integer} contentHeight your element height
-		 * @param {Integer} contentWidth your element width
 		 */
-		updateHeightWidth(contentHeight, contentWidth) {
+		updateHeightWidth() {
 			const modalWrapper = this.$parent.$el.querySelector('.modal-wrapper')
-			if (modalWrapper) {
+			if (modalWrapper && this.naturalHeight > 0 && this.naturalWidth > 0) {
 				const modalContainer = modalWrapper.querySelector('.modal-container')
-				const wrapperMaxHeight = window.getComputedStyle(modalContainer).maxHeight.replace('%', '')
-				const wrapperMaxWidth = window.getComputedStyle(modalContainer).maxWidth.replace('%', '')
+				const wrapperMaxHeight = Number(window.getComputedStyle(modalContainer).maxHeight.replace('%', ''))
+				const wrapperMaxWidth = Number(window.getComputedStyle(modalContainer).maxWidth.replace('%', ''))
 
-				const parentHeight = Math.round(modalWrapper.clientHeight * Number(wrapperMaxHeight) / 100) - 50 // minus header
-				const parentWidth = Math.round(modalWrapper.clientWidth * Number(wrapperMaxWidth) / 100)
+				const parentHeight = Math.round(modalWrapper.clientHeight * wrapperMaxHeight / 100) - 50 // minus header
+				const parentWidth = Math.round(modalWrapper.clientWidth * wrapperMaxWidth / 100)
 
-				const heightRatio = parentHeight / contentHeight
-				const widthRatio = parentWidth / contentWidth
+				const heightRatio = parentHeight / this.naturalHeight
+				const widthRatio = parentWidth / this.naturalWidth
 
 				// if the video height is capped by the parent height
 				// AND the video is bigger than the parent
 				if (heightRatio < widthRatio && heightRatio < 1) {
 					this.height = parentHeight
-					this.width = Math.round(contentWidth / contentHeight * parentHeight)
+					this.width = Math.round(this.naturalWidth / this.naturalHeight * parentHeight)
 
 				// if the video width is capped by the parent width
 				// AND the video is bigger than the parent
 				} else if (heightRatio > widthRatio && widthRatio < 1) {
 					this.width = parentWidth
-					this.height = Math.round(contentHeight / contentWidth * parentWidth)
+					this.height = Math.round(this.naturalHeight / this.naturalWidth * parentWidth)
 
 				// RESET
 				} else {
-					this.height = contentHeight
-					this.width = contentWidth
+					this.height = this.naturalHeight
+					this.width = this.naturalWidth
 				}
 			}
 		},

src/views/Viewer.vue

@@ -64,6 +64,7 @@
 			:dav-path="currentFile.path"
 			:active="true"
 			:can-swipe.sync="canSwipe"
+			:sidebar-shown="showSidebar"
 			class="file-view"
 			:loaded.sync="currentFile.loaded"
 			@error="currentFailed" />