Parts of Lessons converted to React now in Preview

Two more bugs I found during lessons on the preview server (with userscripts disabled):

  • When I’m on a vocab item “Reading” tab and switch to a different vocab item by clicking on it in the list at the bottom, it autoplays this item’s audio.
  • When I’m on a kanji item’s “Examples” tab and press Enter, instead of going to the next item, it switches back to the current item’s “Readings” tab. This seems to only happen in a specific circumstance: The first completed lesson in this batch has to be a radical. I have added a screenshot below showing a situation (RKKRR) where this problem occurs. If I get KKRRR and continuously hit enter, it works correctly. But if I jump to a radical before completing the first K, and later come back to the K, the bug occurs. Similarly, if I get RRKRR and immediately jump to the K lesson, it works, but if I first complete an R lesson, it breaks. (sorry for the wordy explanation; I hope it was still understandable)
Screenshot

The double autoplay audio bug also happens to me. Sometimes they play delayed, making it more noticeable, and sometimes they play at the same time, making it just louder.


On another note: Since @acm2010 (the original script author) is not around anymore, I have looked into fixing wk_interaction.js that was created for the Keisei and Niai scripts, and is also used by the Rendaku Information script. However, React makes it really hard to reliably tell when a lesson tab switch happens. Until now, wk_interaction.js used a MutationObserver to detect when the supplement div changes, but React sometimes just re-uses existing elements, so this approach does not seem sufficiently reliable. It also seems like on a tab switch, React does not always remove elements that were added to the old tab by a script, so scripts now have to do that themselves.

My current solution for wk_interaction.js contains

$.jStorage.listenKeyChange("l/currentLesson", () => this.lessonInfoCallback());
this.lessonInfoObserver.observe(document.getElementById(`lesson`), {childList: true, subtree: true});

The MutationObserver is for detecting tab changes, but it misses changes where the tab stays the same, and only the current lesson changes – this can happen for example if you are at the “Name” tab (the first tab) of a radical and then jump to a different radical by clicking on it at the bottom. For the new radical, the tab is still the “Name” tab, and the MutationObserver only reports small content changes that I think can’t be discerned from changes made by other userscripts, which I think should not trigger anything. To catch these cases, I added a jStorage change listener that triggers when the lesson changes, but this means that if the tab and the current lesson change at the same time, the script triggers twice. So in my solution, Keisei generates and adds its information section, then immediately deletes it and generates and adds it again.

It works, but it’s not ideal. If anyone has better suggestions/solutions for detecting tab changes, let me know – otherwise I will leave it at that and create a pull request with this mediocre fix.

1 Like