@aurally/speech-control
Version:
A class to handle microphone permissions, start and observe speech input
45 lines • 2.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var when_dom_ready_1 = require("when-dom-ready");
var Css = "\n #arly-ms {\n position: fixed;\n top: 0.75rem;\n left: 0.75rem;\n right: 0.75rem;\n z-index: 100000;\n border-radius: 6px;\n display: flex;\n align-items: center;\n padding: 1rem;\n background: rgba(0,0,0,0.7);\n box-shadow: 0 0 3px 0 rgba(0,0,0,0.7);\n color: #fff;\n transition: opacity 0.3s;\n text-align: left;\n }\n\n #arly-ms.hidden {\n opacity: 0;\n }\n\n #arly-ms.gone {\n z-index: -1;\n }\n\n .arly-ms-text {\n flex: 1;\n }\n\n .arly-ms-rec {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n margin-right: 1rem;\n border-radius: 50%;\n background: #C91C2E;\n box-shadow: 0 0 5px 0 rgba(201,28,46,0.7);\n }\n\n .arly-ms-disable {\n color: #bbb;\n text\n }\n";
var Html = function (notificationText, disableText) { return "\n <style>\n " + Css + "\n </style>\n <div id=\"arly-ms\">\n <span class=\"arly-ms-rec\"></span>\n <span class=\"arly-ms-text\">" + notificationText + "</span>\n\n <span class=\"arly-ms-disable\">" + disableText + "</span>\n </div>\n"; };
function getNotification() {
return document.querySelector('#arly-ms');
}
function notificationEvents(notification) {
var disable = new Promise(function (resolve) {
var disableSpan = notification && notification.querySelector('.arly-ms-disable');
disableSpan && disableSpan.addEventListener('click', resolve);
});
return {
disable: disable
};
}
exports.append = function (notificationOptions) {
if (notificationOptions === void 0) { notificationOptions = {}; }
return new Promise(function (resolve) {
var notification = getNotification();
if (!notification) {
when_dom_ready_1.default().then(function () {
var language = navigator.language || navigator.userLanguage;
var container = notificationOptions.container || document.body;
var notificationText = notificationOptions.text || "I am listening for your search. Your language is " + language;
var disableText = notificationOptions.disableText || "Disable";
container.insertAdjacentHTML('beforeend', Html(notificationText, disableText));
resolve(notificationEvents(getNotification()));
});
}
else {
notification.classList.remove('hidden', 'gone');
resolve(notificationEvents(notification));
}
});
};
exports.remove = function () {
var notification = getNotification();
if (notification) {
notification.classList.add('hidden');
setTimeout(function () { return notification.classList.add('gone'); }, 500);
}
};
//# sourceMappingURL=notification.js.map