From ff0e9dd6d21a6de557c0a821aaad6393a110452f Mon Sep 17 00:00:00 2001
From: kruchkou <45610004+kruchkou@users.noreply.github.com>
Date: Fri, 15 Dec 2023 09:56:21 +0100
Subject: [PATCH] fix(crop-area): recalculate sizes on media objectFit change
 (#506)

Co-authored-by: Ruslan Kruchkou <ruslan.kruchkou@sap.com>
---
 src/Cropper.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Cropper.tsx b/src/Cropper.tsx
index 196b155..d1b027e 100644
--- 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