@corti/dictation-web 0.0.1 → 0.0.2

package/src/RecorderManager.ts

@@ -1,114 +0,0 @@
-import { getAudioDevices } from './utils';
-import { AudioService } from './audioService';
-import { DictationService } from './DictationService';
-import type { DictationConfig, RecordingState, ServerConfig } from './types';
-
-export class RecorderManager extends EventTarget {
-  public devices: MediaDeviceInfo[] = [];
-
-  public selectedDevice: string = '';
-
-  public recordingState: RecordingState = 'stopped';
-
-  private _mediaStream: MediaStream | null = null;
-
-  private _audioService: AudioService | null = null;
-
-  private _dictationService: DictationService | null = null;
-
-  private _visualiserInterval?: number;
-
-  async initialize() {
-    const deviceResponse = await getAudioDevices();
-    this.devices = deviceResponse.devices;
-    this.selectedDevice = deviceResponse.defaultDeviceId || '';
-    return deviceResponse;
-  }
-
-  async startRecording(params: {
-    dictationConfig: DictationConfig;
-    serverConfig: ServerConfig;
-  }) {
-    this._updateRecordingState('initializing');
-    try {
-      this._mediaStream = await navigator.mediaDevices.getUserMedia({
-        audio: { deviceId: this.selectedDevice },
-      });
-      this._audioService = new AudioService(this._mediaStream);
-      this._dictationService = new DictationService(this._mediaStream, params);
-
-      // Forward custom events from dictation service
-      this._dictationService.addEventListener('error', e =>
-        this.dispatchEvent(
-          new CustomEvent('error', {
-            detail: (e as CustomEvent).detail,
-            bubbles: true,
-            composed: true,
-          }),
-        ),
-      );
-      this._dictationService.addEventListener('stream-closed', () =>
-        this.stopRecording(),
-      );
-      this._dictationService.addEventListener('transcript', e =>
-        this.dispatchEvent(
-          new CustomEvent('transcript', {
-            detail: (e as CustomEvent).detail,
-            bubbles: true,
-            composed: true,
-          }),
-        ),
-      );
-    } catch (error) {
-      this.dispatchEvent(
-        new CustomEvent('error', {
-          detail: error,
-          bubbles: true,
-          composed: true,
-        }),
-      );
-      this._updateRecordingState('stopped');
-      return;
-    }
-
-    this._dictationService?.startRecording();
-    this._updateRecordingState('recording');
-    this._visualiserInterval = window.setInterval(() => {
-      const level = this._audioService
-        ? this._audioService.getAudioLevel() * 3
-        : 0;
-      this.dispatchEvent(
-        new CustomEvent('audio-level-changed', {
-          detail: { audioLevel: level },
-          bubbles: true,
-          composed: true,
-        }),
-      );
-    }, 150);
-  }
-
-  async stopRecording() {
-    this._updateRecordingState('stopping');
-    if (this._visualiserInterval) {
-      clearInterval(this._visualiserInterval);
-      this._visualiserInterval = undefined;
-    }
-    if (this._mediaStream) {
-      this._mediaStream.getTracks().forEach(track => track.stop());
-      this._mediaStream = null;
-    }
-    await this._dictationService?.stopRecording();
-    this._updateRecordingState('stopped');
-  }
-
-  private _updateRecordingState(state: RecordingState) {
-    this.recordingState = state;
-    this.dispatchEvent(
-      new CustomEvent('recording-state-changed', {
-        detail: { state },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-}

package/src/audioService.ts

@@ -1,25 +0,0 @@
-export class AudioService {
-  private audioContext: AudioContext;
-
-  private analyser: AnalyserNode;
-
-  constructor(mediaStream: MediaStream) {
-    this.audioContext = new AudioContext();
-    const source = this.audioContext.createMediaStreamSource(mediaStream);
-    this.analyser = this.audioContext.createAnalyser();
-    this.analyser.fftSize = 8192;
-    source.connect(this.analyser);
-  }
-
-  public getAudioLevel(): number {
-    const bufferLength = this.analyser.fftSize;
-    const dataArray = new Uint8Array(bufferLength);
-    this.analyser.getByteTimeDomainData(dataArray);
-    let sum = 0;
-    for (let i = 0; i < bufferLength; i += 1) {
-      const normalized = (dataArray[i] - 128) / 128;
-      sum += normalized * normalized;
-    }
-    return Math.sqrt(sum / bufferLength);
-  }
-}

package/src/components/audio-visualiser.ts

@@ -1,56 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-@customElement('audio-visualiser')
-export class AudioVisualiser extends LitElement {
-  @property({ type: Number }) level = 0; // expects a value from 0 to 100
-
-  @property({ type: Boolean }) active = true;
-
-  static styles = css`
-    :host {
-      height: 100%;
-    }
-    .container {
-      display: flex;
-      width: 8px;
-      flex-direction: column-reverse; /* Bottom-up stacking */
-      height: 100%;
-      gap: 1px;
-      opacity: 0.5;
-      &.active {
-        opacity: 1;
-      }
-    }
-    .segment {
-      flex: 1;
-      background-color: var(--action-accent-text-color);
-      transition: background-color 0.25s;
-      border-radius: 1px;
-      opacity: 0.5;
-    }
-    .segment.active {
-      opacity: 1;
-    }
-  `;
-
-  render() {
-    // Each segment represents 20%. Using Math.ceil to fill segments optimistically.
-    const activeSegments = Math.round(this.level * 5);
-    const segments = [];
-    for (let i = 0; i < 5; i += 1) {
-      segments.push(html`
-        <div class="segment ${i < activeSegments ? 'active' : ''}"></div>
-      `);
-    }
-    return html`
-      <div class="container ${this.active ? 'active' : ''}">${segments}</div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'audio-visualiser': AudioVisualiser;
-  }
-}

package/src/components/settings-menu.ts

@@ -1,152 +0,0 @@
-// mic-selector.ts
-import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import ButtonStyles from '../styles/buttons';
-import SelectStyles from '../styles/select';
-import { LANGUAGES_SUPPORTED } from '../constants';
-import { getLanguageName } from '../utils';
-import CalloutStyles from '../styles/callout';
-
-@customElement('settings-menu')
-export class SettingsMenu extends LitElement {
-  @property({ type: Array })
-  devices: MediaDeviceInfo[] = [];
-
-  @property({ type: String })
-  selectedDevice: string = '';
-
-  @property({ type: String })
-  selectedLanguage: string = '';
-
-  @property({ type: Boolean })
-  settingsDisabled: boolean = false;
-
-  static styles: CSSResultGroup = [
-    css`
-      :host {
-        display: block;
-        font-family: var(--component-font-family);
-      }
-      /* Retain the anchor-name styling for this component */
-      #settings-popover-button {
-        anchor-name: --settings_popover_btn;
-      }
-      [popover] {
-        margin: 0;
-        padding: 16px;
-        border: 0;
-        background: var(--card-background);
-        border: 1px solid var(--card-border-color);
-        border-radius: var(--card-border-radius);
-        box-shadow: var(--card-box-shadow);
-        z-index: 1000;
-        max-width: 260px;
-        width: 100%;
-        min-width: 200px;
-        position-anchor: --settings_popover_btn;
-        position-area: bottom;
-        position-visibility: always;
-        /* inset: unset; */
-        transform: translateX(40%);
-        overflow-x: hidden;
-      }
-      .settings-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-    `,
-    ButtonStyles,
-    SelectStyles,
-    CalloutStyles,
-  ];
-
-  private _selectDevice(deviceId: string): void {
-    this.selectedDevice = deviceId;
-    // Find the device object
-    const device = this.devices.find(d => d.deviceId === deviceId);
-    this.dispatchEvent(
-      new CustomEvent('recording-device-changed', {
-        detail: device,
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
-  render(): TemplateResult {
-    return html`
-      <div class="mic-selector">
-        <button id="settings-popover-button" popovertarget="settings-popover">
-          <icon-settings></icon-settings>
-        </button>
-        <div id="settings-popover" popover>
-          <div class="settings-wrapper">
-            ${this.settingsDisabled
-              ? html`
-                  <div class="callout orange">
-                    Recording is in progress. Stop recording to change settings.
-                  </div>
-                `
-              : ''}
-            <div class="form-group">
-              <label id="device-select-label" for="device-select">
-                Recording Device
-              </label>
-              <select
-                id="device-select"
-                aria-labelledby="device-select-label"
-                @change=${(e: Event) => {
-                  this._selectDevice((e.target as HTMLSelectElement).value);
-                }}
-                ?disabled=${this.settingsDisabled}
-              >
-                ${this.devices.map(
-                  device => html`
-                    <option
-                      value=${device.deviceId}
-                      ?selected=${this.selectedDevice === device.deviceId}
-                    >
-                      ${device.label || 'Unknown Device'}
-                    </option>
-                  `,
-                )}
-              </select>
-            </div>
-            <div class="form-group">
-              <label id="language-select-label" for="language-select">
-                Dictation Language
-              </label>
-              <select
-                id="language-select"
-                aria-labelledby="language-select-label"
-                @change=${(e: Event) => {
-                  this._selectDevice((e.target as HTMLSelectElement).value);
-                }}
-                ?disabled=${this.settingsDisabled}
-              >
-                ${LANGUAGES_SUPPORTED.map(
-                  language => html`
-                    <option
-                      value=${language}
-                      ?selected=${this.selectedLanguage === language}
-                    >
-                      ${getLanguageName(language)}
-                    </option>
-                  `,
-                )}
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'settings-menu': SettingsMenu;
-  }
-}

package/src/constants.ts

@@ -1,10 +0,0 @@
-import { DictationConfig } from './types';
-
-export const LANGUAGES_SUPPORTED = ['en', 'da'];
-export const DEFAULT_DICTATION_CONFIG: DictationConfig = {
-  primaryLanguage: 'en',
-  interimResults: true,
-  spokenPunctuation: true,
-  automaticPunctuation: true,
-  model: 'others',
-};

package/src/corti-dictation.ts

@@ -1,3 +0,0 @@
-import CortiDictation from './index.js';
-
-window.customElements.define('corti-dictation', CortiDictation);

package/src/icons/icons.ts

@@ -1,141 +0,0 @@
-/* eslint-disable max-classes-per-file */
-import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-@customElement('icon-mic-on')
-export class IconMicOn extends LitElement {
-  render() {
-    return html`
-      <div style="display: flex">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="lucide lucide-mic"
-        >
-          <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
-          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-          <line x1="12" x2="12" y1="19" y2="22" />
-        </svg>
-      </div>
-    `;
-  }
-}
-
-@customElement('icon-mic-off')
-export class IconMicOff extends LitElement {
-  render() {
-    return html` <div style="display: flex">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="lucide lucide-mic-off"
-      >
-        <line x1="2" x2="22" y1="2" y2="22" />
-        <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" />
-        <path d="M5 10v2a7 7 0 0 0 12 5" />
-        <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" />
-        <path d="M9 9v3a3 3 0 0 0 5.12 2.12" />
-        <line x1="12" x2="12" y1="19" y2="22" />
-      </svg>
-    </div>`;
-  }
-}
-
-@customElement('icon-recording')
-export class IconRecording extends LitElement {
-  render() {
-    return html`
-      <div style="display: flex;">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="lucide lucide-circle-stop"
-        >
-          <circle cx="12" cy="12" r="10" />
-          <rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" />
-        </svg>
-      </div>
-    `;
-  }
-}
-@customElement('icon-settings')
-export class IconSettings extends LitElement {
-  render() {
-    return html`<div style="display: flex">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="lucide lucide-settings-2"
-      >
-        <path d="M20 7h-9" />
-        <path d="M14 17H5" />
-        <circle cx="17" cy="17" r="3" />
-        <circle cx="7" cy="7" r="3" />
-      </svg>
-    </div>`;
-  }
-}
-
-@customElement('icon-loading-spinner')
-export class IconLoadingSpinner extends LitElement {
-  static styles = css`
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-    .spin {
-      animation: spin 1s linear infinite;
-    }
-  `;
-
-  render() {
-    return html`<div style="display: flex">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="lucide lucide-loader-circle spin"
-      >
-        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-      </svg>
-    </div>`;
-  }
-}

package/src/index.ts

@@ -1,154 +0,0 @@
-// corti-dictation.ts
-import { html, LitElement } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { RecorderManager } from './RecorderManager';
-import './components/settings-menu';
-import './components/audio-visualiser';
-import './icons/icons';
-import ThemeStyles from './styles/theme';
-import ButtonStyles from './styles/buttons';
-import ComponentStyles from './styles/ComponentStyles';
-
-import { DictationConfig, ServerConfig } from './types';
-import { DEFAULT_DICTATION_CONFIG } from './constants';
-import CalloutStyles from './styles/callout';
-
-export class CortiDictation extends LitElement {
-  static styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];
-
-  @property({ type: Array })
-  devices: MediaDeviceInfo[] = [];
-
-  @property({ type: String, reflect: true })
-  recordingState = 'stopped';
-
-  @property({ type: Object })
-  dictationConfig: DictationConfig = DEFAULT_DICTATION_CONFIG;
-
-  @property({ type: Object })
-  serverConfig: ServerConfig = {};
-
-  @state()
-  private _audioLevel = 0;
-
-  private recorderManager = new RecorderManager();
-
-  async connectedCallback() {
-    super.connectedCallback();
-    await this.recorderManager.initialize();
-    this.devices = this.recorderManager.devices;
-
-    // Map event names to any extra handling logic
-    const eventHandlers: Record<string, (e: CustomEvent) => void> = {
-      'recording-state-changed': e => {
-        this.recordingState = e.detail.state;
-      },
-      'audio-level-changed': e => {
-        this._audioLevel = e.detail.audioLevel;
-        this.requestUpdate();
-      },
-    };
-
-    const eventsToRelay = [
-      'recording-state-changed',
-      'audio-level-changed',
-      'error',
-      'transcript',
-    ];
-
-    eventsToRelay.forEach(eventName => {
-      this.recorderManager.addEventListener(eventName, (e: Event) => {
-        const customEvent = e as CustomEvent;
-        // 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,
-          }),
-        );
-      });
-    });
-  }
-
-  public toggleRecording() {
-    this._toggleRecording();
-  }
-
-  _toggleRecording() {
-    if (this.recordingState === 'recording') {
-      this.recorderManager.stopRecording();
-    } else if (this.recordingState === 'stopped') {
-      this.recorderManager.startRecording({
-        dictationConfig: this.dictationConfig,
-        serverConfig: this.serverConfig,
-      });
-    }
-  }
-
-  // Handle device change events if needed
-  async _onRecordingDeviceChanged(event: Event) {
-    const customEvent = event as CustomEvent;
-    this.recorderManager.selectedDevice = customEvent.detail.deviceId;
-    if (this.recordingState === 'recording') {
-      await this.recorderManager.stopRecording();
-      await this.recorderManager.startRecording({
-        dictationConfig: this.dictationConfig,
-        serverConfig: this.serverConfig,
-      });
-    }
-  }
-
-  render() {
-    const isConfigured =
-      this.serverConfig &&
-      this.serverConfig.token &&
-      this.serverConfig.environment &&
-      this.serverConfig.tenant;
-    if (!isConfigured) {
-      return html`
-        <div class="wrapper">
-          <div class="callout red tiny">
-            Please configure the server settings in the parent component.
-          </div>
-        </div>
-      `;
-    }
-
-    const isLoading =
-      this.recordingState === 'initializing' ||
-      this.recordingState === 'stopping';
-    const isRecording = this.recordingState === 'recording';
-    return html`
-      <div class="wrapper">
-        <button
-          @click=${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
-          .devices=${this.devices}
-          .selectedDevice=${this.recorderManager.selectedDevice}
-          ?settingsDisabled=${this.recordingState !== 'stopped'}
-          @recording-device-changed=${this._onRecordingDeviceChanged}
-        ></settings-menu>
-      </div>
-    `;
-  }
-}
-
-export default CortiDictation;