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}}
>
+ {{#if @shouldDisplayRebootButton}}
+
+
+
+ {{/if}}
\ 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}}
/>
{{/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": {