fix(crop-area): recalculate sizes on media objectFit change (#506)

Co-authored-by: Ruslan Kruchkou <[email protected]>
ValentinH · Dec 15, 2023 · ff0e9dd · ff0e9dd
1 parent 6e6d984
commit ff0e9dd
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/Cropper.tsx b/src/Cropper.tsx
@@ -67,6 +67,7 @@ export type CropperProps = {
 type State = {
   cropSize: Size | null
   hasWheelJustStarted: boolean
+  mediaObjectFit: String | undefined
 }
 
 const MIN_ZOOM = 1
@@ -121,6 +122,7 @@ class Cropper extends React.Component<CropperProps, State> {
   state: State = {
     cropSize: null,
     hasWheelJustStarted: false,
+    mediaObjectFit: undefined
   }
 
   componentDidMount() {
@@ -218,6 +220,11 @@ class Cropper extends React.Component<CropperProps, State> {
     if (prevProps.video !== this.props.video) {
       this.videoRef.current?.load()
     }
+
+    const objectFit = this.getObjectFit();
+    if (objectFit !== this.state.mediaObjectFit) {
+      this.setState({mediaObjectFit: objectFit}, this.computeSizes)
+    }
   }
 
   initResizeObserver = () => {
@@ -350,8 +357,7 @@ class Cropper extends React.Component<CropperProps, State> {
       let renderedMediaSize: Size
 
       if (isMediaScaledDown) {
-        const objectFit = this.getObjectFit()
-        switch (objectFit) {
+        switch (this.state.mediaObjectFit) {
           default:
           case 'contain':
             renderedMediaSize =
@@ -737,7 +743,7 @@ class Cropper extends React.Component<CropperProps, State> {
       classes: { containerClassName, cropAreaClassName, mediaClassName },
     } = this.props
 
-    const objectFit = this.getObjectFit()
+    const objectFit = this.state.mediaObjectFit;
 
     return (
       <div