<!DOCTYPE html>

<script type="text/javascript">
(function() {
    var myvoice = 0;
    var voices;
    RED.nodes.registerType('ui_audio',{
        category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
        paletteLabel: 'audio out',
        color: 'rgb(119, 198, 204)',
        defaults: {
            name: {value:""},
            group: {type: 'ui_group', required: true},
            voice: {value:""},
            always: {value:""}
        },
        inputs:1,
        outputs:0,
        icon: "feed.png",
        align: "right",
        label: function() { return this.name||"audio out"; },
        labelStyle: function() { return this.name?"node_label_italic":""; },
        onpaletteadd: function() {
            if ('speechSynthesis' in window) { voices = window.speechSynthesis.getVoices(); }
        },
        oneditprepare: function() {
            if ('speechSynthesis' in window) {
                voices = window.speechSynthesis.getVoices();
                for (i = 0; i < voices.length ; i++) {
                    //console.log(i,voices[i].name,voices[i].lang,voices[i].voiceURI,voices[i].default);
                    var option = document.createElement('option');
                    option.textContent = i + " : " + voices[i].name + ' (' + voices[i].lang + ')';
                    if (voices[i].default) { option.textContent += ' -- DEFAULT'; }
                    option.setAttribute('value', voices[i].voiceURI);
                    document.getElementById("node-input-voice").appendChild(option);
                }
                $('#node-input-voice').val(this.voice || 0);
            }
            else {
                $('#voice-input-row').hide();
            }

            $("#node-input-voice").on("change", function() {
                myvoice = this.voice = $("#node-input-voice").val();
            });
        }
    });
})();
</script>

<script type="text/html" data-template-name="ui_audio">
    <div class="form-row">
        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
        <input type="text" id="node-input-group">
    </div>
    <div class="form-row" id="voice-input-row">
        <label for="node-input-voice"><i class="fa fa-language"></i> TTS Voice</label>
        <select id="node-input-voice" style="width:70%"></select>
    </div>
    <div class="form-row">
        <label for="node-input-always"></label>
        <input type="checkbox" checked id="node-input-always" style="display:inline-block; width:auto; vertical-align:top;">
        Play audio when window not in focus.
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>