Add rule "Avoid autoplay"

Co-authored-by: Diane Cordier <[email protected]>

eslint-plugin/README.md

@@ -67,18 +67,19 @@ Add `@ecocode` to the `plugins` section of your `.eslintrc`, followed by rules c
 ⚠️ Configurations set to warn in.\
 ✅ Set in the `recommended` configuration.
 
-| Name                                                                                   | Description                                                | ⚠️ |
-| :------------------------------------------------------------------------------------- | :--------------------------------------------------------- | :- |
-| [avoid-css-animations](docs/rules/avoid-css-animations.md)                             | Avoid usage of CSS animations                              | ✅  |
-| [avoid-high-accuracy-geolocation](docs/rules/avoid-high-accuracy-geolocation.md)       | Avoid using high accuracy geolocation in web applications. | ✅  |
-| [limit-db-query-results](docs/rules/limit-db-query-results.md)                         | Should limit the number of returns for a SQL query         | ✅  |
-| [no-empty-image-src-attribute](docs/rules/no-empty-image-src-attribute.md)             | Disallow usage of image with empty source attribute        | ✅  |
-| [no-import-all-from-library](docs/rules/no-import-all-from-library.md)                 | Should not import all from library                         | ✅  |
-| [no-multiple-access-dom-element](docs/rules/no-multiple-access-dom-element.md)         | Disallow multiple access of same DOM element.              | ✅  |
-| [no-multiple-style-changes](docs/rules/no-multiple-style-changes.md)                   | Disallow multiple style changes at once.                   | ✅  |
-| [prefer-collections-with-pagination](docs/rules/prefer-collections-with-pagination.md) | Prefer API collections with pagination.                    | ✅  |
-| [prefer-shorthand-css-notations](docs/rules/prefer-shorthand-css-notations.md)         | Encourage usage of shorthand CSS notations                 | ✅  |
-| [provide-print-css](docs/rules/provide-print-css.md)                                   | Enforce providing a print stylesheet                       | ✅  |
+| Name                                                                                   | Description                                                               | ⚠️ |
+| :------------------------------------------------------------------------------------- | :------------------------------------------------------------------------ | :- |
+| [avoid-autoplay](docs/rules/avoid-autoplay.md)                                         | Disallow autoplay and enforce preload='none' for video and audio elements | ✅  |
+| [avoid-css-animations](docs/rules/avoid-css-animations.md)                             | Avoid usage of CSS animations                                             | ✅  |
+| [avoid-high-accuracy-geolocation](docs/rules/avoid-high-accuracy-geolocation.md)       | Avoid using high accuracy geolocation in web applications.                | ✅  |
+| [limit-db-query-results](docs/rules/limit-db-query-results.md)                         | Should limit the number of returns for a SQL query                        | ✅  |
+| [no-empty-image-src-attribute](docs/rules/no-empty-image-src-attribute.md)             | Disallow usage of image with empty source attribute                       | ✅  |
+| [no-import-all-from-library](docs/rules/no-import-all-from-library.md)                 | Should not import all from library                                        | ✅  |
+| [no-multiple-access-dom-element](docs/rules/no-multiple-access-dom-element.md)         | Disallow multiple access of same DOM element.                             | ✅  |
+| [no-multiple-style-changes](docs/rules/no-multiple-style-changes.md)                   | Disallow multiple style changes at once.                                  | ✅  |
+| [prefer-collections-with-pagination](docs/rules/prefer-collections-with-pagination.md) | Prefer API collections with pagination.                                   | ✅  |
+| [prefer-shorthand-css-notations](docs/rules/prefer-shorthand-css-notations.md)         | Encourage usage of shorthand CSS notations                                | ✅  |
+| [provide-print-css](docs/rules/provide-print-css.md)                                   | Enforce providing a print stylesheet                                      | ✅  |
 
 <!-- end auto-generated rules list -->
 

eslint-plugin/docs/rules/avoid-autoplay.md

@@ -0,0 +1,46 @@
+# Disallow autoplay and enforce preload='none' for video and audio elements (`@ecocode/avoid-autoplay`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+## Why is this an issue?
+
+Automatic videos and audio files activation (autoplay) during web pages loading uses resources on each tier (device,
+network, data center). In many cases, automatic playback is not necessary. Moreover, it can draw users' attention and
+distract them from the initially requested service. Therefore, whenever possible, these playbacks should be initiated by
+the users and by not using the autoplay attributes in the `<audio>` and `<video>` elements.
+
+Nevertheless, some parts of the video or audio files may be downloaded even if autoplay is not activated. Moreover, data
+will be unnecessarily downloaded even if users do not start the video playback. It is therefore necessary to force
+browsers not to preload anything by setting the `preload` attribute to `none`.
+
+```jsx
+return (
+    <>
+        <video src="video.mp4" autoplay/> // Non-compliant
+        <video src="video.mp4" preload="auto"/> // Non-compliant
+        <video src="video.mp4" autoplay preload="auto"/> // Non-compliant
+        <video src="video.mp4" preload="none"/> // Compliant
+    </>
+)
+```
+
+This rule is build for [React](https://react.dev/) and JSX.
+
+## Resources
+
+### Documentation
+
+- [Mozilla Web Technology for Developers](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay) -
+  Autoplay in HTML
+- [Mozilla Web Technology for Developers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) - Video and
+  audio content
+- [Mozilla Web Technology for Developers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload) -
+  Preload in HTML
+
+

eslint-plugin/lib/rules/avoid-autoplay.js

@@ -0,0 +1,78 @@
+/*
+ * ecoCode JavaScript plugin - Provides rules to reduce the environmental footprint of your JavaScript programs
+ * Copyright © 2023 Green Code Initiative (https://www.ecocode.io)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+"use strict";
+
+/** @type {import("eslint").Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Disallow autoplay and enforce preload='none' for video and audio elements",
+      category: "eco-design",
+      recommended: "warn",
+    },
+    messages: {
+      NoAutoplay:
+        "Avoid using autoplay attribute for <video> and <audio> elements. Reference to Rule RGESN 4.1 : https://www.arcep.fr/mes-demarches-et-services/entreprises/fiches-pratiques/referentiel-general-ecoconception-services-numeriques.html",
+      EnforcePreloadNone:
+        "Set preload='none' for <video> and <audio> elements. Reference to Rule RGESN 4.1 : https://www.arcep.fr/mes-demarches-et-services/entreprises/fiches-pratiques/referentiel-general-ecoconception-services-numeriques.html",
+      NoAutoplay_EnforcePreloadNone:
+        "Avoid using autoplay attribute and set preload='none' for <video> and <audio> elements. Reference to Rule RGESN 4.1 : https://www.arcep.fr/mes-demarches-et-services/entreprises/fiches-pratiques/referentiel-general-ecoconception-services-numeriques.html ",
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.name === "video" || node.name.name === "audio") {
+          const autoplayAttr = node.attributes.find(
+            (attr) => attr.name.name === "autoplay",
+          );
+          const preloadAttr = node.attributes.find(
+            (attr) => attr.name.name === "preload",
+          );
+          if (
+            autoplayAttr &&
+            (!preloadAttr || preloadAttr.value.value !== "none")
+          ) {
+            context.report({
+              node: autoplayAttr || preloadAttr,
+              messageId: "NoAutoplay_EnforcePreloadNone",
+            });
+          } else {
+            if (autoplayAttr) {
+              context.report({
+                node: autoplayAttr,
+                messageId: "NoAutoplay",
+              });
+            }
+
+            if (!preloadAttr || preloadAttr.value.value !== "none") {
+              context.report({
+                node: preloadAttr || node,
+                messageId: "EnforcePreloadNone",
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+};

eslint-plugin/tests/lib/rules/avoid-autoplay.js

@@ -0,0 +1,84 @@
+/*
+ * ecoCode JavaScript plugin - Provides rules to reduce the environmental footprint of your JavaScript programs
+ * Copyright © 2023 Green Code Initiative (https://www.ecocode.io)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/avoid-autoplay");
+const RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+const expectedError1 = {
+  messageId: "NoAutoplay",
+  type: "JSXAttribute",
+};
+const expectedError2 = {
+  messageId: "EnforcePreloadNone",
+  type: "JSXAttribute",
+};
+const expectedError3 = {
+  messageId: "NoAutoplay_EnforcePreloadNone",
+  type: "JSXAttribute",
+};
+
+ruleTester.run("autoplay-audio-video-attribute-not-present", rule, {
+  valid: [
+    `
+      <audio preload="none"></audio>
+    `,
+    '<video preload="none"></video>',
+  ],
+
+  invalid: [
+    {
+      code: `
+        <audio autoplay></audio>
+      `,
+      errors: [expectedError3],
+    },
+    {
+      code: `
+        <video autoplay preload="auto"></video>
+           `,
+      errors: [expectedError3],
+    },
+    {
+      code: '<video autoplay preload="none"></video>',
+      errors: [expectedError1],
+    },
+    {
+      code: '<audio  preload="auto"></audio>',
+      errors: [expectedError2],
+    },
+  ],
+});

sonar-plugin/src/main/java/io/ecocode/javascript/CheckList.java

@@ -43,7 +43,8 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
                 NoMultipleStyleChanges.class,
                 PreferCollectionsWithPagination.class,
                 PreferShorthandCSSNotations.class,
-                ProvidePrintCSS.class
+                ProvidePrintCSS.class,
+                AvoidAutoPlay.class
         );
     }
 

sonar-plugin/src/main/java/io/ecocode/javascript/checks/AvoidAutoPlay.java

@@ -0,0 +1,34 @@
+/*
+ * ecoCode JavaScript plugin - Provides rules to reduce the environmental footprint of your JavaScript programs
+ * Copyright © 2023 Green Code Initiative (https://www.ecocode.io)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+package io.ecocode.javascript.checks;
+
+import org.sonar.check.Rule;
+import org.sonar.plugins.javascript.api.EslintBasedCheck;
+import org.sonar.plugins.javascript.api.JavaScriptRule;
+import org.sonar.plugins.javascript.api.TypeScriptRule;
+@JavaScriptRule
+@TypeScriptRule
+@Rule(key = AvoidAutoPlay.RULE_KEY)
+public class AvoidAutoPlay  implements EslintBasedCheck {
+    public static final String RULE_KEY = "EC36";
+
+    @Override
+    public String eslintKey() {
+        return "@ecocode/avoid-autoplay";
+    }
+}

sonar-plugin/src/main/resources/io/ecocode/profiles/ecocode_javascript_profile.json

@@ -9,6 +9,7 @@
     "EC25",
     "EC26",
     "EC29",
-    "EC30"
+    "EC30",
+    "EC36"
   ]
 }

sonar-plugin/src/main/resources/io/ecocode/profiles/ecocode_typescript_profile.json

@@ -1,6 +1,7 @@
 {
   "name": "ecoCode",
   "ruleKeys": [
-    "EC13"
+    "EC13",
+    "EC36"
   ]
 }

sonar-plugin/src/main/resources/io/ecocode/rules/javascript/EC36.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>

sonar-plugin/src/main/resources/io/ecocode/rules/javascript/EC36.json

@@ -0,0 +1,22 @@
+{
+  "title": "Avoid autoplay for videos and audio content",
+  "type": "CODE_SMELL",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "MEDIUM"
+    },
+    "attribute": "EFFICIENT"
+  },
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "ecocode",
+    "eco-design",
+    "video",
+    "audio"
+  ],
+  "defaultSeverity": "Major"
+}