This is a lovely library and I want to start of with a big thanks to the authors and contributors! 🧡
Issue
The cover property doesn't quite work as expected for me. When set to false the video won't cover the container (as expected), but once it's decoded and rendered via the canvas it will cover it.
Proposed Solution
Use the objectFit property for both the video and the canvas and expose it. This way users can set it to "contain", "cover", "fill", etc. without the need to implement custom scaling functions like setCoverStyle.
Remove the cover property (or set it to false) and add an objectFit property in the constructor. Default the object fit to "cover" to replicate the previous default behaviour:
objectFit = "cover", // How the video and canvas should be fit inside the container
Add the new objectFit option where the other options are saved:
this.objectFit = objectFit;
Set the videos heigth, width and objectFit, where it is created:
6. Clean up, remove setCoverStyle and all the places here cover was used.
---
### Considerations
Browser support should be good for object-fit according to caniuse.com. I haven't found any negative side effects so far, but I might be overlooking something? You could also keep the cover prop for backwards-compatibility and set the newly introduced objectFit property accordingly. Also should consider to add a objectPosition prop as well.
Preface
This is a lovely library and I want to start of with a big thanks to the authors and contributors! 🧡
Issue
The cover property doesn't quite work as expected for me. When set to false the video won't cover the container (as expected), but once it's decoded and rendered via the canvas it will cover it.
Proposed Solution
Use the objectFit property for both the video and the canvas and expose it. This way users can set it to "contain", "cover", "fill", etc. without the need to implement custom scaling functions like setCoverStyle.
Remove the cover property (or set it to false) and add an objectFit property in the constructor. Default the object fit to "cover" to replicate the previous default behaviour:
Add the new objectFit option where the other options are saved:
Set the videos heigth, width and objectFit, where it is created:
Do the same for the canvas inside the decodeVideo function:
Remove the folowing resizing logic from paintCanvasFunction
if (width / height > currFrame.width / currFrame.height) { this.canvas.style.width = '100%'; this.canvas.style.height = 'auto'; } else { this.canvas.style.height = '100%'; this.canvas.style.width = 'auto'; }