@corti/dictation-web
Version:
Web component for Corti Dictation
187 lines (186 loc) • 6.88 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
// corti-dictation.ts
import { html, LitElement } from 'lit';
import { property, state } from 'lit/decorators.js';
import { RecorderManager } from './RecorderManager.js';
import './components/settings-menu.js';
import './components/audio-visualiser.js';
import './icons/icons.js';
import ThemeStyles from './styles/theme.js';
import ButtonStyles from './styles/buttons.js';
import ComponentStyles from './styles/ComponentStyles.js';
import { DEFAULT_DICTATION_CONFIG } from './constants.js';
import CalloutStyles from './styles/callout.js';
import { decodeToken } from './utils.js';
export class CortiDictation extends LitElement {
constructor() {
super(...arguments);
this.dictationConfig = DEFAULT_DICTATION_CONFIG;
this.debug_displayAudio = false;
this._audioLevel = 0;
this._recordingState = 'stopped';
this._devices = [];
this.recorderManager = new RecorderManager();
}
async connectedCallback() {
super.connectedCallback();
const devices = await this.recorderManager.initialize();
if (devices.selectedDevice) {
this._selectedDevice = this.recorderManager.selectedDevice;
this._devices = this.recorderManager.devices;
this.dispatchEvent(new CustomEvent('ready'));
}
// Map event names to any extra handling logic
const eventHandlers = {
'recording-state-changed': e => {
this._recordingState = e.detail.state;
},
'devices-changed': () => {
this._devices = [...this.recorderManager.devices];
this.requestUpdate();
},
'audio-level-changed': e => {
this._audioLevel = e.detail.audioLevel;
this.requestUpdate();
},
};
const eventsToRelay = [
'recording-state-changed',
'recording-devices-changed',
'audio-level-changed',
'error',
'transcript',
'command',
'ready',
];
eventsToRelay.forEach(eventName => {
this.recorderManager.addEventListener(eventName, (e) => {
const customEvent = e;
// Perform any additional handling if defined
if (eventHandlers[eventName]) {
eventHandlers[eventName](customEvent);
}
// Re-dispatch the event from the component
this.dispatchEvent(new CustomEvent(eventName, {
detail: customEvent.detail,
bubbles: true,
composed: true,
}));
});
});
}
toggleRecording() {
this._toggleRecording();
}
setAccessToken(token) {
try {
const decoded = decodeToken(token);
this._serverConfig = decoded;
return decoded;
}
catch (e) {
throw new Error('Invalid token');
}
}
get selectedDevice() {
return this.recorderManager.selectedDevice || null;
}
get recordingState() {
return this._recordingState;
}
get devices() {
return this._devices;
}
async setRecordingDevice(device) {
this.recorderManager.selectedDevice = device;
this._selectedDevice = device;
if (!this._serverConfig)
return;
if (this._recordingState === 'recording') {
await this.recorderManager.stopRecording();
await this.recorderManager.startRecording({
dictationConfig: this.dictationConfig,
serverConfig: this._serverConfig,
});
}
}
_toggleRecording() {
if (!this._serverConfig)
return;
if (this._recordingState === 'recording') {
this.recorderManager.stopRecording();
}
else if (this._recordingState === 'stopped') {
this.recorderManager.startRecording({
dictationConfig: this.dictationConfig,
serverConfig: this._serverConfig,
debug_displayAudio: this.debug_displayAudio,
});
}
}
// Handle device change events if needed
async _onRecordingDevicesChanged(event) {
const customEvent = event;
this.setRecordingDevice(customEvent.detail.selectedDevice);
}
render() {
if (!this._serverConfig) {
return html ` <div style="display: none"></div> `;
}
const isLoading = this._recordingState === 'initializing' ||
this._recordingState === 'stopping';
const isRecording = this._recordingState === 'recording';
return html `
<div class="wrapper">
<button
=${this._toggleRecording}
class=${isRecording ? 'red' : 'accent'}
>
${isLoading
? html `<icon-loading-spinner></icon-loading-spinner>`
: isRecording
? html `<icon-recording></icon-recording>`
: html `<icon-mic-on></icon-mic-on>`}
<audio-visualiser
.level=${this._audioLevel}
.active=${isRecording}
></audio-visualiser>
</button>
<settings-menu
.selectedDevice=${this._selectedDevice}
?settingsDisabled=${this._recordingState !== 'stopped'}
-devices-changed=${this._onRecordingDevicesChanged}
></settings-menu>
</div>
`;
}
}
CortiDictation.styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];
__decorate([
property({ type: Object })
], CortiDictation.prototype, "dictationConfig", void 0);
__decorate([
property({ type: Boolean })
], CortiDictation.prototype, "debug_displayAudio", void 0);
__decorate([
state()
], CortiDictation.prototype, "_serverConfig", void 0);
__decorate([
state()
], CortiDictation.prototype, "_audioLevel", void 0);
__decorate([
state()
], CortiDictation.prototype, "_recordingState", void 0);
__decorate([
state()
], CortiDictation.prototype, "_selectedDevice", void 0);
__decorate([
state()
], CortiDictation.prototype, "_devices", void 0);
export default CortiDictation;
//# sourceMappingURL=CortiDictation.js.map