Audio controller (#569)

* Convert audio.js into a class

* Move audio-ui.js classes into audio.js

* Rename fields

* Merge classes

* Remove audio-ui.js
This commit is contained in:
toasted-nutbread 2020-05-29 19:56:38 -04:00 committed by GitHub
parent 5f9889fd26
commit c62f980f37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 176 additions and 219 deletions

View File

@ -1,139 +0,0 @@
/*
* Copyright (C) 2019-2020 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
class AudioSourceUI {
static instantiateTemplate(templateSelector) {
const template = document.querySelector(templateSelector);
const content = document.importNode(template.content, true);
return content.firstChild;
}
}
AudioSourceUI.Container = class Container {
constructor(audioSources, container, addButton) {
this.audioSources = audioSources;
this.container = container;
this.addButton = addButton;
this.children = [];
this.container.textContent = '';
for (const audioSource of toIterable(audioSources)) {
this.children.push(new AudioSourceUI.AudioSource(this, audioSource, this.children.length));
}
this._clickListener = this.onAddAudioSource.bind(this);
this.addButton.addEventListener('click', this._clickListener, false);
}
cleanup() {
for (const child of this.children) {
child.cleanup();
}
this.addButton.removeEventListener('click', this._clickListener, false);
this.container.textContent = '';
this._clickListener = null;
}
save() {
// Override
}
remove(child) {
const index = this.children.indexOf(child);
if (index < 0) {
return;
}
child.cleanup();
this.children.splice(index, 1);
this.audioSources.splice(index, 1);
for (let i = index; i < this.children.length; ++i) {
this.children[i].index = i;
}
}
onAddAudioSource() {
const audioSource = this.getUnusedAudioSource();
this.audioSources.push(audioSource);
this.save();
this.children.push(new AudioSourceUI.AudioSource(this, audioSource, this.children.length));
}
getUnusedAudioSource() {
const audioSourcesAvailable = [
'jpod101',
'jpod101-alternate',
'jisho',
'custom'
];
for (const source of audioSourcesAvailable) {
if (this.audioSources.indexOf(source) < 0) {
return source;
}
}
return audioSourcesAvailable[0];
}
};
AudioSourceUI.AudioSource = class AudioSource {
constructor(parent, audioSource, index) {
this.parent = parent;
this.audioSource = audioSource;
this.index = index;
this.container = AudioSourceUI.instantiateTemplate('#audio-source-template');
this.select = this.container.querySelector('.audio-source-select');
this.removeButton = this.container.querySelector('.audio-source-remove');
this.select.value = audioSource;
this._selectChangeListener = this.onSelectChanged.bind(this);
this._removeClickListener = this.onRemoveClicked.bind(this);
this.select.addEventListener('change', this._selectChangeListener, false);
this.removeButton.addEventListener('click', this._removeClickListener, false);
parent.container.appendChild(this.container);
}
cleanup() {
this.select.removeEventListener('change', this._selectChangeListener, false);
this.removeButton.removeEventListener('click', this._removeClickListener, false);
if (this.container.parentNode !== null) {
this.container.parentNode.removeChild(this.container);
}
}
save() {
this.parent.save();
}
onSelectChanged() {
this.audioSource = this.select.value;
this.parent.audioSources[this.index] = this.audioSource;
this.save();
}
onRemoveClicked() {
this.parent.remove(this);
this.save();
}
};

View File

@ -16,47 +16,63 @@
*/ */
/* global /* global
* AudioSourceUI
* AudioSystem * AudioSystem
* getOptionsContext * getOptionsContext
* getOptionsMutable * getOptionsMutable
* settingsSaveOptions * settingsSaveOptions
*/ */
let audioSourceUI = null; class AudioController {
let audioSystem = null; constructor() {
this._audioSystem = null;
this._settingsAudioSources = null;
this._audioSourceContainer = null;
this._audioSourceAddButton = null;
this._audioSourceEntries = [];
}
async function audioSettingsInitialize() { async prepare() {
audioSystem = new AudioSystem({ this._audioSystem = new AudioSystem({
audioUriBuilder: null, audioUriBuilder: null,
useCache: true useCache: true
}); });
const optionsContext = getOptionsContext(); const optionsContext = getOptionsContext();
const options = await getOptionsMutable(optionsContext); const options = await getOptionsMutable(optionsContext);
audioSourceUI = new AudioSourceUI.Container(
options.audio.sources,
document.querySelector('.audio-source-list'),
document.querySelector('.audio-source-add')
);
audioSourceUI.save = settingsSaveOptions;
textToSpeechInitialize(); this._settingsAudioSources = options.audio.sources;
} this._audioSourceContainer = document.querySelector('.audio-source-list');
this._audioSourceAddButton = document.querySelector('.audio-source-add');
this._audioSourceContainer.textContent = '';
function textToSpeechInitialize() { this._audioSourceAddButton.addEventListener('click', this._onAddAudioSource.bind(this), false);
for (const audioSource of toIterable(this._settingsAudioSources)) {
this._createAudioSourceEntry(audioSource);
}
this._prepareTextToSpeech();
}
// Private
async _save() {
await settingsSaveOptions();
}
_prepareTextToSpeech() {
if (typeof speechSynthesis === 'undefined') { return; } if (typeof speechSynthesis === 'undefined') { return; }
speechSynthesis.addEventListener('voiceschanged', updateTextToSpeechVoices, false); speechSynthesis.addEventListener('voiceschanged', this._updateTextToSpeechVoices.bind(this), false);
updateTextToSpeechVoices(); this._updateTextToSpeechVoices();
document.querySelector('#text-to-speech-voice').addEventListener('change', onTextToSpeechVoiceChange, false); document.querySelector('#text-to-speech-voice').addEventListener('change', this._onTextToSpeechVoiceChange.bind(this), false);
document.querySelector('#text-to-speech-voice-test').addEventListener('click', textToSpeechTest, false); document.querySelector('#text-to-speech-voice-test').addEventListener('click', this._testTextToSpeech.bind(this), false);
} }
function updateTextToSpeechVoices() { _updateTextToSpeechVoices() {
const voices = Array.prototype.map.call(speechSynthesis.getVoices(), (voice, index) => ({voice, index})); const voices = Array.prototype.map.call(speechSynthesis.getVoices(), (voice, index) => ({voice, index}));
voices.sort(textToSpeechVoiceCompare); voices.sort(this._textToSpeechVoiceCompare.bind(this));
document.querySelector('#text-to-speech-voice-container').hidden = (voices.length === 0); document.querySelector('#text-to-speech-voice-container').hidden = (voices.length === 0);
@ -78,18 +94,11 @@ function updateTextToSpeechVoices() {
select.textContent = ''; select.textContent = '';
select.appendChild(fragment); select.appendChild(fragment);
select.value = select.dataset.value; select.value = select.dataset.value;
} }
function languageTagIsJapanese(languageTag) { _textToSpeechVoiceCompare(a, b) {
return ( const aIsJapanese = this._languageTagIsJapanese(a.voice.lang);
languageTag.startsWith('ja-') || const bIsJapanese = this._languageTagIsJapanese(b.voice.lang);
languageTag.startsWith('jpn-')
);
}
function textToSpeechVoiceCompare(a, b) {
const aIsJapanese = languageTagIsJapanese(a.voice.lang);
const bIsJapanese = languageTagIsJapanese(b.voice.lang);
if (aIsJapanese) { if (aIsJapanese) {
if (!bIsJapanese) { return -1; } if (!bIsJapanese) { return -1; }
} else { } else {
@ -105,21 +114,109 @@ function textToSpeechVoiceCompare(a, b) {
} }
return a.index - b.index; return a.index - b.index;
} }
function textToSpeechTest() { _languageTagIsJapanese(languageTag) {
return (
languageTag.startsWith('ja-') ||
languageTag.startsWith('jpn-')
);
}
_testTextToSpeech() {
try { try {
const text = document.querySelector('#text-to-speech-voice-test').dataset.speechText || ''; const text = document.querySelector('#text-to-speech-voice-test').dataset.speechText || '';
const voiceUri = document.querySelector('#text-to-speech-voice').value; const voiceUri = document.querySelector('#text-to-speech-voice').value;
const audio = audioSystem.createTextToSpeechAudio(text, voiceUri); const audio = this._audioSystem.createTextToSpeechAudio(text, voiceUri);
audio.volume = 1.0; audio.volume = 1.0;
audio.play(); audio.play();
} catch (e) { } catch (e) {
// NOP // NOP
} }
} }
function onTextToSpeechVoiceChange(e) { _instantiateTemplate(templateSelector) {
const template = document.querySelector(templateSelector);
const content = document.importNode(template.content, true);
return content.firstChild;
}
_getUnusedAudioSource() {
const audioSourcesAvailable = [
'jpod101',
'jpod101-alternate',
'jisho',
'custom'
];
for (const source of audioSourcesAvailable) {
if (this._settingsAudioSources.indexOf(source) < 0) {
return source;
}
}
return audioSourcesAvailable[0];
}
_createAudioSourceEntry(value) {
const eventListeners = new EventListenerCollection();
const container = this._instantiateTemplate('#audio-source-template');
const select = container.querySelector('.audio-source-select');
const removeButton = container.querySelector('.audio-source-remove');
select.value = value;
const entry = {
container,
eventListeners
};
eventListeners.addEventListener(select, 'change', this._onAudioSourceSelectChange.bind(this, entry), false);
eventListeners.addEventListener(removeButton, 'click', this._onAudioSourceRemoveClicked.bind(this, entry), false);
this._audioSourceContainer.appendChild(container);
this._audioSourceEntries.push(entry);
}
_removeAudioSourceEntry(entry) {
const index = this._audioSourceEntries.indexOf(entry);
if (index < 0) { return; }
const {container, eventListeners} = entry;
if (container.parentNode !== null) {
container.parentNode.removeChild(container);
}
eventListeners.removeAllEventListeners();
this._audioSourceEntries.splice(index, 1);
this._settingsAudioSources.splice(index, 1);
for (let i = index, ii = this._audioSourceEntries.length; i < ii; ++i) {
this._audioSourceEntries[i].index = i;
}
}
_onTextToSpeechVoiceChange(e) {
e.currentTarget.dataset.value = e.currentTarget.value; e.currentTarget.dataset.value = e.currentTarget.value;
}
_onAddAudioSource() {
const audioSource = this._getUnusedAudioSource();
this._settingsAudioSources.push(audioSource);
this._createAudioSourceEntry(audioSource);
this._save();
}
_onAudioSourceSelectChange(entry, event) {
const index = this._audioSourceEntries.indexOf(entry);
if (index < 0) { return; }
const value = event.currentTarget.value;
this._settingsAudioSources[index] = value;
this._save();
}
_onAudioSourceRemoveClicked(entry) {
this._removeAudioSourceEntry(entry);
this._save();
}
} }

View File

@ -18,12 +18,12 @@
/* global /* global
* AnkiController * AnkiController
* AnkiTemplatesController * AnkiTemplatesController
* AudioController
* ProfileController * ProfileController
* SettingsBackup * SettingsBackup
* SettingsController * SettingsController
* api * api
* appearanceInitialize * appearanceInitialize
* audioSettingsInitialize
* dictSettingsInitialize * dictSettingsInitialize
* onDictionaryOptionsChanged * onDictionaryOptionsChanged
* storageInfoInitialize * storageInfoInitialize
@ -319,7 +319,7 @@ async function onReady() {
await settingsPopulateModifierKeys(); await settingsPopulateModifierKeys();
formSetupEventListeners(); formSetupEventListeners();
appearanceInitialize(); appearanceInitialize();
await audioSettingsInitialize(); new AudioController().prepare();
await (new ProfileController()).prepare(); await (new ProfileController()).prepare();
await dictSettingsInitialize(); await dictSettingsInitialize();
ankiController = new AnkiController(); ankiController = new AnkiController();

View File

@ -1141,7 +1141,6 @@
<script src="/bg/js/settings/anki.js"></script> <script src="/bg/js/settings/anki.js"></script>
<script src="/bg/js/settings/anki-templates.js"></script> <script src="/bg/js/settings/anki-templates.js"></script>
<script src="/bg/js/settings/audio.js"></script> <script src="/bg/js/settings/audio.js"></script>
<script src="/bg/js/settings/audio-ui.js"></script>
<script src="/bg/js/settings/backup.js"></script> <script src="/bg/js/settings/backup.js"></script>
<script src="/bg/js/settings/conditions-ui.js"></script> <script src="/bg/js/settings/conditions-ui.js"></script>
<script src="/bg/js/settings/dictionaries.js"></script> <script src="/bg/js/settings/dictionaries.js"></script>