Apply audio durations to scope immediately upon their availability

[laineyhm]

Fixes #1512

Description

With our AngularJS bindings, the duration of an audio file is not displayed unless it has been loaded. Previously, the DOM was not being updated immediately upon the duration becoming available. This PR tells the $scope to apply its changes to the DOM once the "durationchange" event has occurred on the HTML audio element.

Because it takes a small amount of time for the duration to become available, there is still visible movement; there is a split second from when the entry is clicked on and the duration is not there, to when the duration appears.

Type of Change

• UI change

Screenshots

Before, I was able to reproduce Chris's bug video in issue #1512, for me on Windows 10 with Google Chrome. Now I am seeing this:

video1546811699.mp4

A potential concern of mine is that the quick flash when the duration appears might be considered unpleasant to look at. But, I am not sure I can make it appear with zero delay, since our code already says the duration should appear if it's available, the instant you had clicked it.

Checklist

• I have performed a self-review of my own code
• I have reviewed the title/description of this PR which will be used as the squashed PR commit message
• I have commented my code, particularly in hard-to-understand areas
• I have added tests that prove my fix is effective or that my feature works

How to test

• Load the page. See if an entry's audio duration appears right after you load the page.
• Click on some entries with audio. See if the audio duration appears right after you click on it.
• Upload an audio file. See if the audio duration displays right after the upload completes.
• Record an audio segment. See if the audio duration displays right after the upload completes.

qa.languageforge.org testing

Testers: Check the box and put in a date/time to sign-off/attest the feature works as expected on qa.languageforge.org

• Billy (2022-10-05)

durations were visible for entries with audio already (pretty quickly)

durations were visible for newly recorded audio

durations were visible for newly uploaded audio

• Tester2 (YYYY-MM-DD HH:MM)

[github-actions]

Unit Test Results

368 tests   368 ✔️  11s ⏱️
    1 suites      0 💤
    1 files        0 ❌

Results for commit 9c9a6b7.

[megahirt]

Wow! Nailed it! Well done.