@samitouri / QOS-React-2 / commits / fbce2d5274

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`

Riley Shaw committed Sep 7, 2021 at 15:28 UTC fbce2d52749ff64a156c3f9cd6eb32715bb76e37
10 files changed +26
fixtures/dom/src/components/fixtures/media-events/index.js
+1
@@ -21,6 +21,7 @@ export default class MediaEvents extends React.Component {
21 onPlaying: false,
22 onProgress: false,
23 onRateChange: false,
24 + onResize: false,
25 onSeeked: false,
26 onSeeking: false,
27 onSuspend: false,
packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
+2
@@ -388,6 +388,7 @@ describe('ReactDOMEventListener', () => {
388 onPlaying() {},
389 onProgress() {},
390 onRateChange() {},
391 + onResize() {},
392 onSeeked() {},
393 onSeeking() {},
394 onStalled() {},
@@ -430,6 +431,7 @@ describe('ReactDOMEventListener', () => {
431 case 'playing':
432 case 'progress':
433 case 'ratechange':
434 + case 'resize':
435 case 'seeked':
436 case 'seeking':
437 case 'stalled':
packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+16
@@ -1095,6 +1095,22 @@ describe('ReactDOMEventListener', () => {
1095 });
1096 });
1097
1098 + it('onResize', () => {
1099 + testEmulatedBubblingEvent({
1100 + type: 'video',
1101 + reactEvent: 'onResize',
1102 + reactEventType: 'resize',
1103 + nativeEvent: 'resize',
1104 + dispatch(node) {
1105 + const e = new Event('resize', {
1106 + bubbles: false,
1107 + cancelable: true,
1108 + });
1109 + node.dispatchEvent(e);
1110 + },
1111 + });
1112 + });
1113 +
1114 it('onSeeked', () => {
1115 testEmulatedBubblingEvent({
1116 type: 'video',
packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap
+1
@@ -69,6 +69,7 @@ Array [
69 "progress",
70 "rateChange",
71 "reset",
72 + "resize",
73 "scroll",
74 "seeked",
75 "seeking",
packages/react-dom/src/events/DOMEventNames.js
+1
@@ -86,6 +86,7 @@ export type DOMEventName =
86 | 'progress'
87 | 'ratechange'
88 | 'reset'
89 + | 'resize'
90 | 'scroll'
91 | 'seeked'
92 | 'seeking'
packages/react-dom/src/events/DOMEventProperties.js
+1
@@ -86,6 +86,7 @@ const simpleEventPluginEvents = [
86 'progress',
87 'rateChange',
88 'reset',
89 + 'resize',
90 'seeked',
91 'seeking',
92 'stalled',
packages/react-dom/src/events/DOMPluginEventSystem.js
+1
@@ -192,6 +192,7 @@ export const mediaEventTypes: Array<DOMEventName> = [
192 'playing',
193 'progress',
194 'ratechange',
195 + 'resize',
196 'seeked',
197 'seeking',
198 'stalled',
packages/react-dom/src/events/ReactDOMEventListener.js
+1
@@ -321,6 +321,7 @@ export function getEventPriority(domEventName: DOMEventName): * {
321 case 'pointerup':
322 case 'ratechange':
323 case 'reset':
324 + case 'resize':
325 case 'seeked':
326 case 'submit':
327 case 'touchcancel':
packages/react-dom/src/events/TopLevelEventTypes.js
+1
@@ -71,6 +71,7 @@ export type TopLevelType =
71 | 'progress'
72 | 'ratechange'
73 | 'reset'
74 + | 'resize'
75 | 'scroll'
76 | 'seeked'
77 | 'seeking'
packages/react-dom/src/test-utils/ReactTestUtils.js
+1
@@ -642,6 +642,7 @@ const simulatedEventTypes = [
642 'pointerUp',
643 'rateChange',
644 'reset',
645 + 'resize',
646 'seeked',
647 'submit',
648 'touchCancel',