[ec36-avoid-autoplay] implement rule autoplay and preload

Author: chihebtalan

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

@@ -0,0 +1,42 @@
+# Disallow usage of image with empty source attribute (`@ecocode/no-empty-image-src-attribute`)
+
+⚠️ 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,74 @@
+/*
+ * 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.",
+            EnforcePreloadNone: "Set preload='none' for <video> and <audio> elements.",
+            NoAutoplay_EnforcePreloadNone: "Avoid using autoplay attribute 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 === "autoplay",
+                    );
+                    const preloadAttr = node.attributes.find(
+                        (attr) => attr.name.name === "preload",
+                    );
+                    if(autoplayAttr && (!preloadAttr || preloadAttr.value.value !== "none")) {
+                      //  console.log("NoAutoplay_EnforcePreloadNone")
+                        context.report({
+                            node: autoplayAttr||preloadAttr,
+                            messageId: "NoAutoplay_EnforcePreloadNone",
+                        });
+                    }
+                    else {
+                        if (autoplayAttr) {
+                            //console.log("NoAutoplay", 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,88 @@
+/*
+ * 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],
+        }
+
+    ],
+});