Fix undefined error in video custom size

fixes MAT-586

flag=none

test plan
- Navigate to a RCE instance
- Embed a video and wait until it's loaded
- Click it and open Video Options
- Click on Size dropdown and select Custom
- Select Percentage radio button
> Verify that there is no error
- Change the number input to 5
> Verify that a error frame appears and
is says "Must be at least 10%"

Change-Id: I52d9a76629dae7168e936eaf38d63b1f7bb14d2f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/283488
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jacob DeWar <jacob.dewar@instructure.com>
QA-Review: Jacob DeWar <jacob.dewar@instructure.com>
Product-Review: Juan Chavez <juan.chavez@instructure.com>

packages/canvas-rce/src/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -34,6 +34,7 @@ import {ClosedCaptionPanel} from '@instructure/canvas-media'
 import {
   CUSTOM,
   MIN_WIDTH_VIDEO,
+  MIN_PERCENTAGE,
   videoSizes,
   labelForImageSize,
   scaleToSize
@@ -57,8 +58,9 @@ export default function VideoOptionsTray(props) {
   const [subtitles, setSubtitles] = useState(videoOptions.tracks || [])
   const [minWidth] = useState(MIN_WIDTH_VIDEO)
   const [minHeight] = useState(Math.round((videoHeight / videoWidth) * MIN_WIDTH_VIDEO))
+  const [minPercentage] = useState(MIN_PERCENTAGE)
 
-  const dimensionsState = useDimensionsState(videoOptions, {minHeight, minWidth})
+  const dimensionsState = useDimensionsState(videoOptions, {minHeight, minWidth, minPercentage})
   function handleTitleTextChange(event) {
     setTitleText(event.target.value)
   }
@@ -215,6 +217,7 @@ export default function VideoOptionsTray(props) {
                             disabled={displayAs !== 'embed'}
                             minHeight={minHeight}
                             minWidth={minWidth}
+                            minPercentage={minPercentage}
                           />
                         </View>
                       )}