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`
facebook · Sep 7, 2021 · fbce2d5 · fbce2d5
1 parent 2f156ea
commit fbce2d5
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 0 deletions.
diff --git a/fixtures/dom/src/components/fixtures/media-events/index.js b/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,

diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/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':

diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/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',

diff --git a/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap b/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap
@@ -69,6 +69,7 @@ Array [
   "progress",
   "rateChange",
   "reset",
+  "resize",
   "scroll",
   "seeked",
   "seeking",

diff --git a/packages/react-dom/src/events/DOMEventNames.js b/packages/react-dom/src/events/DOMEventNames.js
@@ -86,6 +86,7 @@ export type DOMEventName =
   | 'progress'
   | 'ratechange'
   | 'reset'
+  | 'resize'
   | 'scroll'
   | 'seeked'
   | 'seeking'

diff --git a/packages/react-dom/src/events/DOMEventProperties.js b/packages/react-dom/src/events/DOMEventProperties.js
@@ -86,6 +86,7 @@ const simpleEventPluginEvents = [
   'progress',
   'rateChange',
   'reset',
+  'resize',
   'seeked',
   'seeking',
   'stalled',

diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -192,6 +192,7 @@ export const mediaEventTypes: Array<DOMEventName> = [
   'playing',
   'progress',
   'ratechange',
+  'resize',
   'seeked',
   'seeking',
   'stalled',

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/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':

diff --git a/packages/react-dom/src/events/TopLevelEventTypes.js b/packages/react-dom/src/events/TopLevelEventTypes.js
@@ -71,6 +71,7 @@ export type TopLevelType =
   | 'progress'
   | 'ratechange'
   | 'reset'
+  | 'resize'
   | 'scroll'
   | 'seeked'
   | 'seeking'

diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -642,6 +642,7 @@ const simulatedEventTypes = [
   'pointerUp',
   'rateChange',
   'reset',
+  'resize',
   'seeked',
   'submit',
   'touchCancel',