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.

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/client/ReactDOMComponent.js

@@ -71,6 +71,7 @@ import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 
 import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 import {
+  videoEventTypes,
   mediaEventTypes,
   listenToNonDelegatedEvent,
 } from '../events/DOMPluginEventSystem';
@@ -496,6 +497,10 @@ export function setInitialProperties(
       props = rawProps;
       break;
     case 'video':
+      for (let i = 0; i < videoEventTypes.length; i++) {
+        listenToNonDelegatedEvent(videoEventTypes[i], domElement);
+      }
+    // falls through
     case 'audio':
       // We listen to these events in case to ensure emulated bubble
       // listeners still fire for all the media events.
@@ -885,6 +890,10 @@ export function diffHydratedProperties(
       listenToNonDelegatedEvent('load', domElement);
       break;
     case 'video':
+      for (let i = 0; i < videoEventTypes.length; i++) {
+        listenToNonDelegatedEvent(videoEventTypes[i], domElement);
+      }
+    // falls through
     case 'audio':
       // We listen to these events in case to ensure emulated bubble
       // listeners still fire for all the media events.

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

@@ -201,6 +201,9 @@ export const mediaEventTypes: Array<DOMEventName> = [
   'waiting',
 ];
 
+// List of events that need to be individually attached to video elements.
+export const videoEventTypes: Array<DOMEventName> = ['resize'];
+
 // We should not delegate these events to the container, but rather
 // set them on the actual target element itself. This is primarily
 // because these events do not consistently bubble in the DOM.
@@ -216,6 +219,7 @@ export const nonDelegatedEvents: Set<DOMEventName> = new Set([
   // and can occur on other elements too. Rather than duplicate that event,
   // we just take it from the media events array.
   ...mediaEventTypes,
+  ...videoEventTypes,
 ]);
 
 function executeDispatch(

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'