[Fix] no-unknown-property: add more audio/video attributes

Author: sjarva

CHANGELOG.md

@@ -8,6 +8,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ### Fixed
 * [`no-unknown-property`]: `onError` and `onLoad` both work on `img` and `script` ([#3388][] @ljharb)
 * [`no-unknown-property`]: data-* attributes can have numbers ([#3390][] @sjarva)
+* [`no-unknown-property`]: add more audio/video attributes ([#3390][] @sjarva)
 
 [#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388

lib/rules/no-unknown-property.js

@@ -82,6 +82,16 @@ const ATTRIBUTE_TAGS_MAP = {
   onWaiting: ['audio', 'video'],
   scrolling: ['iframe'],
   playsInline: ['video'],
+  // Video related attributes
+  autoPictureInPicture: ['video'],
+  controls: ['audio', 'video'],
+  controlList: ['video'],
+  disablePictureInPicture: ['video'],
+  disableRemotePlayback: ['audio', 'video'],
+  loop: ['audio', 'video'],
+  muted: ['audio', 'video'],
+  poster: ['video'],
+  preload: ['audio', 'video'],
 };
 
 const SVGDOM_ATTRIBUTE_NAMES = {
@@ -199,6 +209,8 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [
   'property',
   // React specific attributes
   'ref', 'key', 'children',
+  // Video specific
+  'controls',
 ];
 
 const DOM_PROPERTY_NAMES_TWO_WORDS = [
@@ -258,6 +270,8 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded',
   'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange',
   'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting',
+  // Video specific,
+  'autoPictureInPicture', 'controlList', 'disablePictureInPicture', 'disableRemotePlayback',
 ];
 
 const DOM_PROPERTIES_IGNORE_CASE = ['charset'];

tests/lib/rules/no-unknown-property.js

@@ -102,7 +102,8 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<details onToggle={this.onToggle}>Some details</details>' },
     { code: '<path fill="pink" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"></path>' },
     { code: '<link as="audio">Audio content</link>' },
-    { code: '<audio onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
+    { code: '<video controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></video>' },
+    { code: '<audio controls={this.controls} crossOrigin="anonymous" disableRemotePlayback loop muted preload="none" src="something" onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
   ]),
   invalid: parsers.all([
     {
@@ -391,5 +392,42 @@ ruleTester.run('no-unknown-property', rule, {
         },
       ],
     },
+    {
+      code: '<div controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></div>',
+      errors: [
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'controls',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'loop',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'muted',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'playsInline',
+            tagName: 'div',
+            allowedTags: 'video',
+          },
+        },
+      ],
+    },
   ]),
 });