Re: Porting audio.js away from jQuery (Was: Re: MediaGoblin website moved to sourcehut pages (was: TLS certificate expired for mediagoblin.org, take 2))

[Ben Sturmfels]

Hi Andre,

Woo! Great work on porting audio.js! Comments inline below.

On Sat, 28 Aug 2021, Andre Jaenisch wrote:

> Hey Ben,
>
> I've got started by replicating the repository on my private Gitea
> instance. (I don't accept other accounts there, so don't look for a
> sign-up page - in that sense, it is private).
>
> Next, I ran the tests (still five failing) and branched off to tackle
> the first porting in 
> https://jaenis.ch/hobbies/coding/repos/ryuno-ki/mediagoblin/src/branch/refactor/port-audio-js

Can you send me details of the failing tests please and the commands you used 
to run them?

> The intermediate changes can be seen in:
> https://jaenis.ch/hobbies/coding/repos/ryuno-ki/mediagoblin/compare/712728c331ea3518b1964bbc7fcf06ff2c567064...c00d3ad053d5d0862f1b71ec126e3c9e1493967d

Great stuff. A couple of comments:

We may want to move the <script src="../audio.js"> to the end of the page body 
and drop all the ready() code.

Feel free to consider the spirit of the code, rather than doing a literal 
translation. For example, the "spectrogram.addEventListener" code is doing some 
pretty complicated DOM traversal. I suspect this could be simplified with:

  var seekbar = document.querySelector('.audio-spectogram .seekbar');
  seekbar.addEventListener(...

Fade and other animations are absolutely not critical and you're welcome to 
just drop them if they're not trivial to implement.

Feel free to translate any code to use ES6 features where they make things 
easier to read.

I'd suggest adding a "use strict"; at the top.

>
> In order to continue on audio.js I need some assistance. The file gets
> referenced in these places:
>
> -
>   
> extlib/sandyseventiesspeedboat/templates/mediagoblin/media_displays/audio.html
> -
>   
> mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/audio_head.html
> - mediagoblin/templates/mediagoblin/media_displays/audio.html
>
> Which of them are relevant?
> How can I navigate to them?

> I want to make sure to not break something, but have to have a look at
> the HTML to properly port the code (there are difference between a
> single element being selected vs. multiple).
>
> My gut feeling would be to look at the templates one and ignore the
> other.

Yes, as you suggest, ignore the "sandyseventiesspeedboat" template,
since this is external to the project (using git submodule) and no
longer maintained. But change the other two. Archivalook is a plugin
that you'll need to enable to test.

Regards,
Ben