From 7cccc6a6bc6539475c24679f75092d77e8129bf2 Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Wed, 22 Jan 2025 22:54:21 +0100
Subject: [PATCH] Add new JS rule GCI36

---
 CHANGELOG.md                           |  3 +-
 src/main/rules/GCI36/js/GCI36.asciidoc | 59 ++++++++++++++++++++++++++
 src/main/rules/GCI36/js/GCI36.json     |  4 ++
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/main/rules/GCI36/js/GCI36.asciidoc
 create mode 100644 src/main/rules/GCI36/js/GCI36.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06d6ade2..fe7af9a7 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/main/rules/GCI36/js/GCI36.asciidoc b/src/main/rules/GCI36/js/GCI36.asciidoc
new file mode 100644
index 00000000..384feebb
--- /dev/null
+++ b/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]
diff --git a/src/main/rules/GCI36/js/GCI36.json b/src/main/rules/GCI36/js/GCI36.json
new file mode 100644
index 00000000..e1a0771d
--- /dev/null
+++ b/src/main/rules/GCI36/js/GCI36.json
@@ -0,0 +1,4 @@
+{
+  "tags": ["creedengo", "eco-design", "react-native", "video", "audio"],
+  "compatibleLanguages": ["JAVASCRIPT", "TYPESCRIPT"]
+}