summaryrefslogtreecommitdiff
path: root/ext/mixed/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-01-23 20:24:52 -0500
committerGitHub <noreply@github.com>2021-01-23 20:24:52 -0500
commit85c039850c45246e367e194232e5ace8771f14e7 (patch)
treebe2fdfee93d7915002cb71bd522e2bfe549203a5 /ext/mixed/js
parent643afcddd21ba7f5d1307e73bab4a6ac9f2866c8 (diff)
Audio play button status badge (#1300)
* Add plus-thick.svg * Add success-color variable * Fix icon display * Add badge * Add missing audioResolved * Update audio badge * Expose attribute
Diffstat (limited to 'ext/mixed/js')
-rw-r--r--ext/mixed/js/display-audio.js49
1 files changed, 48 insertions, 1 deletions
diff --git a/ext/mixed/js/display-audio.js b/ext/mixed/js/display-audio.js
index 2d95eea4..e1a9e250 100644
--- a/ext/mixed/js/display-audio.js
+++ b/ext/mixed/js/display-audio.js
@@ -135,9 +135,11 @@ class DisplayAudio {
this.stopAudio();
// Update details
+ const potentialAvailableAudioCount = this._getPotentialAvailableAudioCount(expression, reading);
for (const button of this._getAudioPlayButtons(definitionIndex, expressionIndex)) {
const titleDefault = button.dataset.titleDefault || '';
button.title = `${titleDefault}\n${title}`;
+ this._updateAudioPlayButtonBadge(button, potentialAvailableAudioCount);
}
// Play
@@ -277,7 +279,7 @@ class DisplayAudio {
async _getExpressionAudioInfoList(source, expression, reading, details) {
const infoList = await api.getExpressionAudioInfoList(source, expression, reading, details);
- return infoList.map((info) => ({info, audioPromise: null, audio: null}));
+ return infoList.map((info) => ({info, audioPromise: null, audioResolved: false, audio: null}));
}
_getExpressionAndReading(definitionIndex, expressionIndex) {
@@ -313,4 +315,49 @@ class DisplayAudio {
_clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}
+
+ _updateAudioPlayButtonBadge(button, potentialAvailableAudioCount) {
+ if (potentialAvailableAudioCount === null) {
+ delete button.dataset.potentialAvailableAudioCount;
+ } else {
+ button.dataset.potentialAvailableAudioCount = `${potentialAvailableAudioCount}`;
+ }
+
+ const badge = button.querySelector('.action-button-badge');
+ if (badge === null) { return; }
+
+ const badgeData = badge.dataset;
+ switch (potentialAvailableAudioCount) {
+ case 0:
+ badgeData.icon = 'cross';
+ badgeData.hidden = false;
+ break;
+ case 1:
+ case null:
+ delete badgeData.icon;
+ badgeData.hidden = true;
+ break;
+ default:
+ badgeData.icon = 'plus-thick';
+ badgeData.hidden = false;
+ break;
+ }
+ }
+
+ _getPotentialAvailableAudioCount(expression, reading) {
+ const key = this._getExpressionReadingKey(expression, reading);
+ const sourceMap = this._cache.get(key);
+ if (typeof sourceMap === 'undefined') { return null; }
+
+ let count = 0;
+ for (const {infoList} of sourceMap.values()) {
+ if (infoList === null) { continue; }
+ for (const {audio, audioResolved} of infoList) {
+ if (!audioResolved || audio !== null) {
+ ++count;
+ }
+ }
+ }
+ return count;
+ }
}