Updated video dimensions to fit view horizontal/vertical #10101
Conversation
|
Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes. |
| methods: { | ||
| updateDimensions() { | ||
| this.resizeVideoDimensions() | ||
| window.addEventListener('resize', this.resizeVideoDimensions) |
There was a problem hiding this comment.
Each time this method gets called you register an event listener, is this done intentionally? Wouldn't it make more sense to register the event listener once on mount?
There was a problem hiding this comment.
Oh.. my bad, you are right. At first I was working with the videoWidth and videoHeight, then change it to setting max dimensions and didn't update this. Yeah, thats completely reasonable to set in onMounted
| beforeUnmount() { | ||
| window.removeEventListener('resize', this.resizeVideoDimensions) | ||
| }, | ||
| methods: { |
There was a problem hiding this comment.
Please use the composition API by adding the methods and onBeforeUnmount in setup.
| @@ -18,6 +24,30 @@ export default defineComponent({ | |||
| type: Boolean, | |||
| default: true | |||
| } | |||
| }, | |||
| setup() { | |||
| const video = ref<Ref<HTMLVideoElement | null>>(null) | |||
There was a problem hiding this comment.
Issue with the type:
packages/web-app-preview/src/components/Sources/MediaVideo.vue(31,65): error TS2339: Property 'offsetHeight' does not exist on type 'Element'.
packages/web-app-preview/src/components/Sources/MediaVideo.vue(32,64): error TS2339: Property 'offsetWidth' does not exist on type 'Element'.
|
Kudos, SonarCloud Quality Gate passed! |
Description
Video preview is automatically settings dimensions to eliminate cropping for video, mostly benefical for vertical videos.
Dimensions are updated once video metadata are loaded and further on window resize
Related Issue
Screenshots (if appropriate):
Before:
Horizontal
Vertical
Now:
Horizontal
Vertical
Types of changes
Checklist: