Porting GCI36 rule to JavaScript (#370)

Author: utarwyn

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - GCI90 C#: Use `Cast` instead of `Select` to cast.
+- [#370](https://github.com/green-code-initiative/creedengo-rules-specifications/pull/370) Add new JS rule GCI36 - Avoid autoplay for videos and audio content
 
 ### Changed
 
@@ -310,7 +311,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- [#40](https://github.com/green-code-initiative/creedengo-rules-specifications/issues/40) Refactoring of package names (`cnumr` to  `greencodeinitiative`)
+- [#40](https://github.com/green-code-initiative/creedengo-rules-specifications/issues/40) Refactoring of package names (`cnumr` to `greencodeinitiative`)
 - [#55](https://github.com/green-code-initiative/creedengo-rules-specifications/issues/55) rename `eco-conception` tag of rules to `eco-design`
 - [#58](https://github.com/green-code-initiative/creedengo-rules-specifications/issues/58) check and upgrade compatibility to SonarQube 9.9
 - move common init scripts to `ecoCode-common` repository

src/main/rules/GCI36/js/GCI36.asciidoc

@@ -0,0 +1,59 @@
+:!sectids:
+
+== Why is this an issue?
+
+Autoplaying media consumes unnecessary energy, especially when users might not be actively engaging with the content.
+This can drain battery life on devices, particularly on mobile devices, leading to increased energy consumption and potentially contributing to environmental impact.
+It can also consume data, particularly for users on limited data plans or in areas with poor internet connectivity.
+This can lead to unnecessary data usage and potentially increased costs for users.
+
+However, even without autoplay, segments of video or audio files might still download.
+This leads to unnecessary data usage, especially if users don't commence playback.
+To mitigate this, it's crucial to prevent browsers from preloading any content by configuring the appropriate settings.
+
+Video:
+
+[source,typescriptjsx,data-diff-id="3",data-diff-type="noncompliant"]
+----
+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
+  </>
+)
+----
+
+[source,typescriptjsx,data-diff-id="2",data-diff-type="compliant"]
+----
+return (
+  <video src="video.mp4" preload="none"/> // Compliant
+)
+----
+
+Audio:
+
+[source,typescriptjsx,data-diff-id="2",data-diff-type="noncompliant"]
+----
+return (
+  <audio controls src="audiofile.mp3" autoplay></audio> // Non-compliant
+)
+----
+
+[source,typescriptjsx,data-diff-id="2",data-diff-type="compliant"]
+----
+return (
+  <audio controls src="audiofile.mp3" preload="none"></audio> // Compliant
+)
+----
+
+== Resources
+
+=== Documentation
+
+- https://github.com/cnumr/best-practices/blob/main/chapters/BP_4003_en.md[CNUMR best practices] - Avoid autoplay for videos and audio content
+
+=== Articles & blog posts
+
+- https://eco-conception.designersethiques.org/guide/en/content/5-2-video.html[eco-conception.designersethiques.org - 5.2. Video and sound]
+- https://www.ecoindex.fr/en/ecodesign/[www.ecoindex.fr - Some good practices]

src/main/rules/GCI36/js/GCI36.json

@@ -0,0 +1,4 @@
+{
+  "tags": ["creedengo", "eco-design", "react-native", "video", "audio"],
+  "compatibleLanguages": ["JAVASCRIPT", "TYPESCRIPT"]
+}