oppia/oppia

[BUG]: Embedded exploration player causes infinite re-renders when changing language to Arabic

Open

#21 220 ouverte le 2 nov. 2024

Voir sur GitHub
 (20 commentaires) (0 réactions) (0 assignés)Python (5 292 stars) (3 534 forks)batch import
EUJ LO.11EUJ PP.2Impact: MediumWork: Mediumbackendbuggood first issue

Description

Describe the bug

When you change the language of the embedded exploration player to Arabic it causes the player to go in infinite re-rendering.

Currently there is no dropdown to change the langauge of the embedded exploration ( work in progress PR #21216 )

So, the manual way to change the language is - ( Ref 1 )

  1. Inspect the page
  2. Go to Application Tab
  3. In local storage section find the file associated to your player
  4. There you can see two values - direction ( direction of the flow of the language ) & lang (language code)

Embedded Exploration File - https://drive.google.com/file/d/1XjhKIVC6h9cFs99oCuQ1xCTRo-iRqIBj/view?usp=sharing - this is from #21069

URL of the page where the issue is observed.

N/A

Steps To Reproduce

  1. Download the file
  2. Change the iframe src to http://localhost:8181/embed/exploration/{explorationId}
  3. Open it in your browser
  4. Repeat the steps mentioned in Ref 1 ( to find direction & lang )
  5. Change direction to rtl
  6. Change lang to ar
  7. Refresh the page

Expected Behavior

The language should be changed successfully and all RTL CSS should be applied

Screenshots/Videos

Screen Recording 2024-11-02 at 2.44.19 PM.webm

What device are you using?

Desktop

Operating System

MacOS

What browsers are you seeing the problem on?

Chrome

Browser version

No response

Additional context

No response

Tips for developers

Before addressing the bug, please identify which PR caused the issue (you can follow the steps here). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).

Then, please leave a comment with details of the approach that you plan to take to fix the issue (see example).

Note: If this is your first Oppia issue, please make sure to follow our guidelines for choosing an issue and setting things up. You will also need to show a demo of the fix working correctly on your local machine. Thanks!

Guide contributeur

Stack technique
javascripttypescriptangularhtmlcss
Domaine
frontend
Type d'issue
bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
half day
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
mostly clear
Prérequis
Angular basicsDebugging re renders
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60
Direction de recherche
Investigate the embedded exploration player's language change handling. Look at the component that listens to language changes and triggers re renders. Check the code responsible for applying RTL CSS. Possibly related to Angular change detection. Review the steps to reproduce and check if the infinite re render is caused by a missing dependency in useEffect or similar. Consider testing with Arabic language to isolate the issue.