Fix #21972: Add onResize event to video elements (#21973)

* Fix #21972: Add `onResize` event to video elements

This is a simple fix for #21972 that adds support for the `onResize` media event.

I created a separate `videoEventTypes` array since I doubt anyone will want to add `onResize` to an audio event. It would simplify the code a bit to just add `resize` to the `mediaEventTypes` array, if that’s preferred.

Pre-commit checklist ([source](https://reactjs.org/docs/how-to-contribute.html#sending-a-pull-request))

✅ Fork the repository and create your branch from `main`.
✅ Run `yarn` in the repository root.
✅ If you’ve fixed a bug or added code that should be tested, add tests!
✅ Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
✅ Run `yarn test --prod` to test in the production environment.
✅ If you need a debugger, run `yarn debug-test --watch TestName`, open chrome://inspect, and press “Inspect”.
✅ Format your code with prettier (`yarn prettier`).
✅ Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
✅ Run the Flow typechecks (`yarn flow`).
✅ If you haven’t already, complete the CLA.

* Consolidate `videoEventTypes` array into `mediaEventTypes`

Author: rileyjshaw

fixtures/dom/src/components/fixtures/media-events/index.js

@@ -21,6 +21,7 @@ export default class MediaEvents extends React.Component {
       onPlaying: false,
       onProgress: false,
       onRateChange: false,
+      onResize: false,
       onSeeked: false,
       onSeeking: false,
       onSuspend: false,

packages/react-dom/src/__tests__/ReactDOMEventListener-test.js

@@ -388,6 +388,7 @@ describe('ReactDOMEventListener', () => {
       onPlaying() {},
       onProgress() {},
       onRateChange() {},
+      onResize() {},
       onSeeked() {},
       onSeeking() {},
       onStalled() {},
@@ -430,6 +431,7 @@ describe('ReactDOMEventListener', () => {
         case 'playing':
         case 'progress':
         case 'ratechange':
+        case 'resize':
         case 'seeked':
         case 'seeking':
         case 'stalled':

packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js

@@ -1095,6 +1095,22 @@ describe('ReactDOMEventListener', () => {
       });
     });
 
+    it('onResize', () => {
+      testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onResize',
+        reactEventType: 'resize',
+        nativeEvent: 'resize',
+        dispatch(node) {
+          const e = new Event('resize', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
     it('onSeeked', () => {
       testEmulatedBubblingEvent({
         type: 'video',

packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap

@@ -69,6 +69,7 @@ Array [
   "progress",
   "rateChange",
   "reset",
+  "resize",
   "scroll",
   "seeked",
   "seeking",

packages/react-dom/src/events/DOMEventNames.js

@@ -86,6 +86,7 @@ export type DOMEventName =
   | 'progress'
   | 'ratechange'
   | 'reset'
+  | 'resize'
   | 'scroll'
   | 'seeked'
   | 'seeking'

packages/react-dom/src/events/DOMEventProperties.js

@@ -86,6 +86,7 @@ const simpleEventPluginEvents = [
   'progress',
   'rateChange',
   'reset',
+  'resize',
   'seeked',
   'seeking',
   'stalled',

packages/react-dom/src/events/DOMPluginEventSystem.js

@@ -192,6 +192,7 @@ export const mediaEventTypes: Array<DOMEventName> = [
   'playing',
   'progress',
   'ratechange',
+  'resize',
   'seeked',
   'seeking',
   'stalled',

packages/react-dom/src/events/ReactDOMEventListener.js

@@ -321,6 +321,7 @@ export function getEventPriority(domEventName: DOMEventName): * {
     case 'pointerup':
     case 'ratechange':
     case 'reset':
+    case 'resize':
     case 'seeked':
     case 'submit':
     case 'touchcancel':

packages/react-dom/src/events/TopLevelEventTypes.js

@@ -71,6 +71,7 @@ export type TopLevelType =
   | 'progress'
   | 'ratechange'
   | 'reset'
+  | 'resize'
   | 'scroll'
   | 'seeked'
   | 'seeking'

packages/react-dom/src/test-utils/ReactTestUtils.js

@@ -642,6 +642,7 @@ const simulatedEventTypes = [
   'pointerUp',
   'rateChange',
   'reset',
+  'resize',
   'seeked',
   'submit',
   'touchCancel',