Add rule GCI36 "Avoid autoplay for videos and audio content" (#40)

Co-authored-by: Diane Cordier <diane.cordier44@gmail.com>
Co-authored-by: utarwyn <maxime.malgorn@laposte.net>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   [#40](https://github.com/green-code-initiative/creedengo-javascript/pull/40) Add rule `@creedengo/avoid-autoplay` (GCI36)
+
 ## [2.0.0] - 2025-01-22
 
 ### Added

eslint-plugin/README.md

@@ -76,6 +76,7 @@ Add `@creedengo` to the `plugins` section of your `.eslintrc`, followed by rules
 
 | Name                                                                                   | Description                                               | ⚠️ |
 | :------------------------------------------------------------------------------------- | :-------------------------------------------------------- | :- |
+| [avoid-autoplay](docs/rules/avoid-autoplay.md)                                         | Avoid autoplay for videos and audio content               | ✅  |
 | [avoid-brightness-override](docs/rules/avoid-brightness-override.md)                   | Should avoid to override brightness                       | ✅  |
 | [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 | ✅  |

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

@@ -0,0 +1,44 @@
+# Avoid autoplay for videos and audio content (`@creedengo/avoid-autoplay`)
+
+⚠️ 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
+- [W3C](https://w3c.github.io/sustyweb/star.html#UX16-1) - Autoplay attribute
+- [RGESN](https://www.arcep.fr/mes-demarches-et-services/entreprises/fiches-pratiques/referentiel-general-ecoconception-services-numeriques.html) - Reference Rule 4.1
+
+

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

@@ -0,0 +1,75 @@
+/*
+ * creedengo JavaScript plugin - Provides rules to reduce the environmental footprint of your JavaScript programs
+ * Copyright © 2023 Green Code Initiative (https://green-code-initiative.org)
+ *
+ * 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: "Avoid autoplay for videos and audio content",
+      category: "eco-design",
+      recommended: "warn",
+    },
+    messages: {
+      NoAutoplay: "Avoid autoplay for video and audio elements.",
+      EnforcePreloadNone: "Set preload='none' for video and audio elements.",
+      NoAutoplayAndEnforcePreloadNone:
+        "Avoid autoplay and set preload='none' for video and audio elements.",
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.name === "video" || node.name.name === "audio") {
+          const autoplayAttr = node.attributes.find(
+            (attr) => attr.name?.name.toLowerCase() === "autoplay",
+          );
+          const preloadAttr = node.attributes.find(
+            (attr) => attr.name?.name.toLowerCase() === "preload",
+          );
+          if (
+            autoplayAttr &&
+            (!preloadAttr || preloadAttr.value.value !== "none")
+          ) {
+            context.report({
+              node: autoplayAttr || preloadAttr,
+              messageId: "NoAutoplayAndEnforcePreloadNone",
+            });
+          } 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,87 @@
+/*
+ * creedengo JavaScript plugin - Provides rules to reduce the environmental footprint of your JavaScript programs
+ * Copyright © 2023 Green Code Initiative (https://green-code-initiative.org)
+ *
+ * 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 noAutoplayError = {
+  messageId: "NoAutoplay",
+  type: "JSXAttribute",
+};
+const enforcePreloadNoneError = {
+  messageId: "EnforcePreloadNone",
+  type: "JSXAttribute",
+};
+const BothError = {
+  messageId: "NoAutoplayAndEnforcePreloadNone",
+  type: "JSXAttribute",
+};
+
+ruleTester.run("autoplay-audio-video-attribute-not-present", rule, {
+  valid: [
+    '<audio preload="none"></audio>',
+    '<video preload="none"></video>',
+    '<video preload="none" {...props}></video>',
+  ],
+  invalid: [
+    {
+      code: "<audio autoplay></audio>",
+      errors: [BothError],
+    },
+    {
+      code: "<audio autoPlay></audio>",
+      errors: [BothError],
+    },
+    {
+      code: "<audio autoPlay={true}></audio>",
+      errors: [BothError],
+    },
+    {
+      code: '<video autoplay preload="auto"></video>',
+      errors: [BothError],
+    },
+    {
+      code: '<video autoplay preload="none"></video>',
+      errors: [noAutoplayError],
+    },
+    {
+      code: '<audio preload="auto"></audio>',
+      errors: [enforcePreloadNoneError],
+    },
+  ],
+});

sonar-plugin/pom.xml

@@ -49,7 +49,7 @@
         <project.build.sourceEncoding>${encoding}</project.build.sourceEncoding>
         <project.reporting.outputEncoding>${encoding}</project.reporting.outputEncoding>
 
-        <version.creedengo-rules-specifications>2.1.0</version.creedengo-rules-specifications>
+        <version.creedengo-rules-specifications>2.2.1</version.creedengo-rules-specifications>
         <version.sonarqube>9.14.0.375</version.sonarqube>
         <version.sonar-javascript>9.13.0.20537</version.sonar-javascript>
         <version.sonar-packaging>1.23.0.740</version.sonar-packaging>

sonar-plugin/src/main/java/org/greencodeinitiative/creedengo/javascript/CheckList.java

@@ -34,6 +34,7 @@ private CheckList() {
 
     public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
         return Arrays.asList(
+                AvoidAutoPlay.class,
                 AvoidBrightnessOverride.class,
                 AvoidCSSAnimations.class,
                 AvoidHighAccuracyGeolocation.class,

sonar-plugin/src/main/java/org/greencodeinitiative/creedengo/javascript/checks/AvoidAutoPlay.java

@@ -0,0 +1,37 @@
+/*
+ * Creedengo JavaScript plugin - Provides rules to reduce the environmental footprint of your JavaScript programs
+ * Copyright © 2023 Green Code Initiative (https://green-code-initiative.org)
+ *
+ * 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 org.greencodeinitiative.creedengo.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 = "GCI36";
+
+    @Override
+    public String eslintKey() {
+        return "@creedengo/avoid-autoplay";
+    }
+
+}

sonar-plugin/src/main/resources/org/greencodeinitiative/creedengo/profiles/javascript_profile.json

@@ -9,6 +9,7 @@
     "GCI26",
     "GCI29",
     "GCI30",
+    "GCI36",
     "GCI523",
     "GCI530"
   ]