@corti/dictation-web
Version:
Web component for Corti Dictation
292 lines • 12.9 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;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _CortiDictation_recordingButtonRef, _CortiDictation_contextProviderRef;
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { createRef, ref } from "lit/directives/ref.js";
import { DEFAULT_DICTATION_CONFIG } from "../constants.js";
import { commaSeparatedConverter } from "../utils/converters.js";
import "../contexts/dictation-context.js";
import "./recording-button.js";
import "./settings-menu.js";
let CortiDictation = class CortiDictation extends LitElement {
constructor() {
super(...arguments);
// ─────────────────────────────────────────────────────────────────────────────
// Private refs
// ─────────────────────────────────────────────────────────────────────────────
_CortiDictation_recordingButtonRef.set(this, createRef());
_CortiDictation_contextProviderRef.set(this, createRef());
/**
* Which settings should be available in the UI.
* If an empty array is passed, the settings will be disabled entirely.
* Options are language and devices
*/
this.settingsEnabled = ["device", "language"];
/**
* When false (default), allows the start/stop button from taking focus when clicked,
* disabling textareas or other input elements to maintain focus.
* Set to "true" to allow the button to receive focus on click.
*/
this.allowButtonFocus = false;
/**
* Overrides any device selection and instead uses getDisplayMedia to stream system audio.
* Should only be used for debugging.
*/
this.debug_displayAudio = false;
this._dictationConfig = DEFAULT_DICTATION_CONFIG;
}
/**
* List of all language codes available for use with the Web Component.
* Default list depends on the accessToken
*/
set languagesSupported(value) {
this._languagesSupported = value;
}
get languagesSupported() {
return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.languages ||
this._languagesSupported ||
[]);
}
/**
* Configuration settings for dictation
*/
set dictationConfig(value) {
this._dictationConfig = value;
}
get dictationConfig() {
return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.dictationConfig || this._dictationConfig);
}
/**
* List of available recording devices
*/
set devices(value) {
this._devices = value;
}
get devices() {
return __classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.devices || this._devices || [];
}
/**
* The selected device used for recording (MediaDeviceInfo).
*/
set selectedDevice(value) {
this._selectedDevice = value;
}
get selectedDevice() {
return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.selectedDevice || this._selectedDevice);
}
/**
* Current state of recording (stopped, recording, initializing and stopping, ).
*/
get recordingState() {
return __classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.recordingState || "stopped";
}
/**
* Push-to-talk keybinding for keyboard shortcut. Single key only (e.g., "Space", "k", "meta", "ctrl").
* Combinations with "+" are not supported.
* Keydown starts recording, keyup stops recording.
* Defaults to "Space" if keybinding is in settingsEnabled, otherwise undefined
*/
set pushToTalkKeybinding(value) {
this._pushToTalkKeybinding = value;
}
get pushToTalkKeybinding() {
return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.pushToTalkKeybinding ||
this._pushToTalkKeybinding);
}
/**
* Toggle-to-talk keybinding for keyboard shortcut. Single key only (e.g., "`", "k", "meta", "ctrl").
* Combinations with "+" are not supported.
* Pressing the key toggles recording on/off.
* Defaults to "`" if keybinding is in settingsEnabled, otherwise undefined
*/
set toggleToTalkKeybinding(value) {
this._toggleToTalkKeybinding = value;
}
get toggleToTalkKeybinding() {
return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.toggleToTalkKeybinding ||
this._toggleToTalkKeybinding);
}
// ─────────────────────────────────────────────────────────────────────────────
// Public methods
// ─────────────────────────────────────────────────────────────────────────────
/**
* Set the latest access token.
* @returns ServerConfig with environment, tenant, and accessToken
* @deprecated Use 'accessToken' property instead.
*/
setAccessToken(token) {
this.accessToken = token;
return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.setAccessToken(token) ?? {
accessToken: token,
environment: undefined,
tenant: undefined,
});
}
/**
* Set the auth configuration for OAuth flows.
* @returns Promise with ServerConfig containing environment, tenant, and accessToken
* @deprecated Use 'authConfig' property instead.
*/
async setAuthConfig(config) {
this.authConfig = config;
return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.setAuthConfig(config) ?? {
accessToken: undefined,
environment: undefined,
tenant: undefined,
});
}
/**
* Starts a recording.
*/
startRecording() {
__classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f").value?.startRecording();
}
/**
* Stops a recording.
*/
stopRecording() {
__classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f").value?.stopRecording();
}
/**
* Starts or stops recording. Convenience layer on top of the start/stop methods.
*/
toggleRecording() {
__classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f").value?.toggleRecording();
}
/**
* Opens the WebSocket connection without starting recording.
* Use this to pre-establish the connection before recording starts.
*/
async openConnection() {
await __classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f").value?.openConnection();
}
/**
* Closes the WebSocket connection by sending "end" and waiting for "ended".
* Call this to receive "usage" statistics or when done with the connection.
*/
async closeConnection() {
await __classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f").value?.closeConnection();
}
// ─────────────────────────────────────────────────────────────────────────────
// Render
// ─────────────────────────────────────────────────────────────────────────────
render() {
const isHidden = !this.accessToken &&
!this.authConfig &&
!this.socketUrl &&
!this.socketProxy;
return html `
<dictation-root
${ref(__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f"))}
class=${classMap({ hidden: isHidden })}
.accessToken=${this.accessToken}
.authConfig=${this.authConfig}
.socketUrl=${this.socketUrl}
.socketProxy=${this.socketProxy}
.dictationConfig=${this._dictationConfig}
.languages=${this._languagesSupported}
.devices=${this._devices}
.selectedDevice=${this._selectedDevice}
.debug_displayAudio=${this.debug_displayAudio}
.pushToTalkKeybinding=${this._pushToTalkKeybinding}
.toggleToTalkKeybinding=${this._toggleToTalkKeybinding}
>
<dictation-recording-button
${ref(__classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f"))}
?allowButtonFocus=${this.allowButtonFocus}
></dictation-recording-button>
${this.settingsEnabled?.length > 0
? html `<dictation-settings-menu
.settingsEnabled=${this.settingsEnabled}
></dictation-settings-menu>`
: nothing}
</dictation-root>
`;
}
};
_CortiDictation_recordingButtonRef = new WeakMap();
_CortiDictation_contextProviderRef = new WeakMap();
CortiDictation.styles = css `
.hidden {
display: none;
}
`;
__decorate([
property({ type: String })
], CortiDictation.prototype, "accessToken", void 0);
__decorate([
property({ attribute: false, type: Object })
], CortiDictation.prototype, "authConfig", void 0);
__decorate([
property({ type: String })
], CortiDictation.prototype, "socketUrl", void 0);
__decorate([
property({ attribute: false, type: Object })
], CortiDictation.prototype, "socketProxy", void 0);
__decorate([
property({
converter: commaSeparatedConverter,
type: Array,
})
], CortiDictation.prototype, "languagesSupported", null);
__decorate([
state()
], CortiDictation.prototype, "_languagesSupported", void 0);
__decorate([
property({
converter: commaSeparatedConverter,
type: Array,
})
], CortiDictation.prototype, "settingsEnabled", void 0);
__decorate([
property({ type: Boolean })
], CortiDictation.prototype, "allowButtonFocus", void 0);
__decorate([
property({ attribute: "debug-display-audio", type: Boolean })
], CortiDictation.prototype, "debug_displayAudio", void 0);
__decorate([
property({ attribute: false, type: Object })
], CortiDictation.prototype, "dictationConfig", null);
__decorate([
state()
], CortiDictation.prototype, "_dictationConfig", void 0);
__decorate([
property({ attribute: false, type: Array })
], CortiDictation.prototype, "devices", null);
__decorate([
state()
], CortiDictation.prototype, "_devices", void 0);
__decorate([
property({ attribute: false, type: Object })
], CortiDictation.prototype, "selectedDevice", null);
__decorate([
state()
], CortiDictation.prototype, "_selectedDevice", void 0);
__decorate([
property({ type: String })
], CortiDictation.prototype, "pushToTalkKeybinding", null);
__decorate([
state()
], CortiDictation.prototype, "_pushToTalkKeybinding", void 0);
__decorate([
property({ type: String })
], CortiDictation.prototype, "toggleToTalkKeybinding", null);
__decorate([
state()
], CortiDictation.prototype, "_toggleToTalkKeybinding", void 0);
CortiDictation = __decorate([
customElement("corti-dictation")
], CortiDictation);
export { CortiDictation };
//# sourceMappingURL=corti-dictation.js.map