From ca78e461ed28bd8ef64c408e13c4bc862f4814c6 Mon Sep 17 00:00:00 2001
From: rouxxi <gwenvael.laskar@pix.fr>
Date: Wed, 11 Dec 2024 15:38:12 +0100
Subject: [PATCH 1/2] feat(junior): add reload on embed-simulator

---
 .../challenge-embed-simulator/component.js    | 27 +++++++++++++++++++
 .../challenge-embed-simulator/template.hbs    | 14 ++++++++++
 .../components/challenge/item/component.js    | 15 +++++++++++
 .../components/challenge/item/template.hbs    |  1 +
 .../challenge/challenge-embed-simulator.scss  | 11 ++++++++
 junior/translations/fr.json                   |  7 +++++
 6 files changed, 75 insertions(+)

diff --git a/junior/app/components/challenge/challenge-embed-simulator/component.js b/junior/app/components/challenge/challenge-embed-simulator/component.js
index 5fd02f48667..efd6b3c5c62 100644
--- a/junior/app/components/challenge/challenge-embed-simulator/component.js
+++ b/junior/app/components/challenge/challenge-embed-simulator/component.js
@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
@@ -8,4 +9,30 @@ export default class ChallengeEmbedSimulator extends Component {
     const height = this.args.isMediaWithForm ? (baseHeight * itemMedia.offsetWidth) / 710 : baseHeight;
     return htmlSafe(`height: ${height}px; max-height: ${baseHeight}px`);
   }
+
+  @action
+  setIframeHtmlElement(htmlElement) {
+    this.iframe = htmlElement;
+  }
+
+  @action
+  rebootSimulator() {
+    const iframe = this.iframe;
+    const tmpSrc = iframe.src;
+
+    const loadListener = () => {
+      if (iframe.src === 'about:blank') {
+        // First onload: when we reset the iframe
+        iframe.src = tmpSrc;
+      } else {
+        // Second onload: when we re-assign the iframe's src to its original value
+        iframe.focus();
+        iframe.removeEventListener('load', loadListener);
+      }
+    };
+
+    iframe.addEventListener('load', loadListener);
+
+    iframe.src = 'about:blank';
+  }
 }
diff --git a/junior/app/components/challenge/challenge-embed-simulator/template.hbs b/junior/app/components/challenge/challenge-embed-simulator/template.hbs
index e173748d53e..31976595b49 100644
--- a/junior/app/components/challenge/challenge-embed-simulator/template.hbs
+++ b/junior/app/components/challenge/challenge-embed-simulator/template.hbs
@@ -10,6 +10,20 @@
     src="{{@url}}"
     title="{{@title}}"
     style="{{this.embedDocumentHeightStyle}}"
+    {{did-render this.setIframeHtmlElement}}
   >
   </iframe>
+  {{#if @shouldDisplayRebootButton}}
+    <div class="reboot-container">
+      <button
+        type="button"
+        class="link link--grey reboot-container__content"
+        aria-label={{t "pages.challenge.embed-simulator.actions.reset-label"}}
+        {{on "click" this.rebootSimulator}}
+      >
+        <PixIcon @name="refresh" @ariaHidden={{true}} class="embed-reboot-content__icon" />
+        {{t "components.challenge.embed-simulator.actions.reset"}}
+      </button>
+    </div>
+  {{/if}}
 </div>
\ No newline at end of file
diff --git a/junior/app/components/challenge/item/component.js b/junior/app/components/challenge/item/component.js
index cc45b9457ad..d8bfc003eae 100644
--- a/junior/app/components/challenge/item/component.js
+++ b/junior/app/components/challenge/item/component.js
@@ -1,6 +1,17 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 export default class Item extends Component {
+  @tracked isRebootable = false;
+
+  constructor() {
+    super(...arguments);
+    window.addEventListener('message', ({ data }) => {
+      if (data?.from === 'pix' && data?.type === 'init') {
+        this.isRebootable = !!data.rebootable;
+      }
+    });
+  }
   get isMediaWithForm() {
     return this.args.challenge.hasForm && this.hasMedia && this.args.challenge.type !== undefined;
   }
@@ -12,4 +23,8 @@ export default class Item extends Component {
       this.args.challenge.hasWebComponent
     );
   }
+
+  get shouldDisplayRebootButton() {
+    return this.isRebootable && !this.args.isDisabled;
+  }
 }
diff --git a/junior/app/components/challenge/item/template.hbs b/junior/app/components/challenge/item/template.hbs
index 66d98543247..a1111a8cc41 100644
--- a/junior/app/components/challenge/item/template.hbs
+++ b/junior/app/components/challenge/item/template.hbs
@@ -14,6 +14,7 @@
             @height={{@challenge.embedHeight}}
             @hideSimulator={{@isDisabled}}
             @isMediaWithForm={{this.isMediaWithForm}}
+            @shouldDisplayRebootButton={{this.shouldDisplayRebootButton}}
           />
         </div>
       {{/if}}
diff --git a/junior/app/styles/components/challenge/challenge-embed-simulator.scss b/junior/app/styles/components/challenge/challenge-embed-simulator.scss
index def5d299d0c..6e7cd76933e 100644
--- a/junior/app/styles/components/challenge/challenge-embed-simulator.scss
+++ b/junior/app/styles/components/challenge/challenge-embed-simulator.scss
@@ -16,6 +16,17 @@
     width: 100%;
     height: 100%;
   }
+
+  .reboot-container {
+    display: flex;
+    justify-content: flex-end;
+    color: var(--pix-neutral-500);
+
+    &__content {
+      display: flex;
+      align-items: center;
+    }
+  }
 }
 
 
diff --git a/junior/translations/fr.json b/junior/translations/fr.json
index d6e8f8d75be..e9f16325eee 100644
--- a/junior/translations/fr.json
+++ b/junior/translations/fr.json
@@ -13,6 +13,13 @@
       "play": "J'écoute",
       "stop": "Stop",
       "label": "Lire la consigne à haute voix"
+    },
+    "challenge": {
+      "embed-simulator": {
+        "actions": {
+          "reset": "Recommencer"
+        }
+      }
     }
   },
   "pages": {

From e39959c1532432083a9272b4ace461ac5beb35e9 Mon Sep 17 00:00:00 2001
From: rouxxi <gwenvael.laskar@pix.fr>
Date: Mon, 16 Dec 2024 10:50:00 +0100
Subject: [PATCH 2/2] feat(junior): change embed reboot button into a pixButton

---
 .../challenge/challenge-embed-simulator/template.hbs   | 10 +++++-----
 .../challenge/challenge-embed-simulator.scss           |  6 +++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/junior/app/components/challenge/challenge-embed-simulator/template.hbs b/junior/app/components/challenge/challenge-embed-simulator/template.hbs
index 31976595b49..d5ca00f8832 100644
--- a/junior/app/components/challenge/challenge-embed-simulator/template.hbs
+++ b/junior/app/components/challenge/challenge-embed-simulator/template.hbs
@@ -15,15 +15,15 @@
   </iframe>
   {{#if @shouldDisplayRebootButton}}
     <div class="reboot-container">
-      <button
-        type="button"
+      <PixButton
         class="link link--grey reboot-container__content"
         aria-label={{t "pages.challenge.embed-simulator.actions.reset-label"}}
-        {{on "click" this.rebootSimulator}}
+        @iconBefore="refresh"
+        @variant="tertiary"
+        @triggerAction={{this.rebootSimulator}}
       >
-        <PixIcon @name="refresh" @ariaHidden={{true}} class="embed-reboot-content__icon" />
         {{t "components.challenge.embed-simulator.actions.reset"}}
-      </button>
+      </PixButton>
     </div>
   {{/if}}
 </div>
\ No newline at end of file
diff --git a/junior/app/styles/components/challenge/challenge-embed-simulator.scss b/junior/app/styles/components/challenge/challenge-embed-simulator.scss
index 6e7cd76933e..bfbaf4cbb30 100644
--- a/junior/app/styles/components/challenge/challenge-embed-simulator.scss
+++ b/junior/app/styles/components/challenge/challenge-embed-simulator.scss
@@ -20,7 +20,11 @@
   .reboot-container {
     display: flex;
     justify-content: flex-end;
-    color: var(--pix-neutral-500);
+
+    .pix-button--tertiary {
+      color: var(--pix-neutral-500);
+      text-decoration: none;
+    }
 
     &__content {
       display: flex;