dictate-button 0.2.0 → 1.0.0

package/dist/inject-exclusive.es.js

@@ -1,35 +0,0 @@
-function i() {
-  const a = document.querySelectorAll(
-    'textarea[data-dictate-button-on]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-on]:not([data-dictate-button-enabled]), textarea[data-dictate-button-target]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-target]:not([data-dictate-button-enabled])'
-  );
-  for (const o of a) {
-    const n = document.createElement("div");
-    n.style.position = "relative", n.style.display = "inline-block", n.style.width = "auto", n.style.color = "inherit", o.parentNode.insertBefore(n, o), o.setAttribute("data-dictate-button-enabled", ""), n.appendChild(o), o.style.boxSizing = "border-box";
-    const t = document.createElement("dictate-button");
-    t.size = 24, t.style.position = "absolute", t.style.right = "0", t.style.top = "0", t.addEventListener("recording:started", (e) => {
-      console.log("recording:started", e);
-    }), t.addEventListener("recording:stopped", (e) => {
-      console.log("recording:stopped", e);
-    }), t.addEventListener("recording:failed", (e) => {
-      console.log("recording:failed", e);
-    }), t.addEventListener("transcribing:started", (e) => {
-      console.log("transcribing:started", e);
-    }), t.addEventListener("transcribing:finished", (e) => {
-      console.log("transcribing:finished", e);
-      const d = e.detail;
-      r(o, d);
-    }), t.addEventListener("transcribing:failed", (e) => {
-      console.log("transcribing:failed", e);
-    }), n.appendChild(t);
-  }
-}
-function r(a, o) {
-  const n = a.selectionStart || 0, t = a.selectionEnd || 0;
-  a.value = a.value.substring(0, n) + o + a.value.substring(t);
-}
-document.addEventListener("DOMContentLoaded", () => {
-  i(), new MutationObserver(i).observe(document.body, {
-    childList: !0,
-    subtree: !0
-  });
-});

package/dist/inject-inclusive.cjs.js

@@ -1 +0,0 @@
-"use strict";function s(){const i=document.querySelectorAll('textarea:not([data-dictate-button-off]):not([data-dictate-button-enabled]), input[type="text"]:not([data-dictate-button-off]):not([data-dictate-button-enabled])');for(const o of i){const n=document.createElement("div");n.style.position="relative",n.style.display="inline-block",n.style.width="auto",n.style.color="inherit",o.parentNode.insertBefore(n,o),o.setAttribute("data-dictate-button-enabled",""),n.appendChild(o),o.style.boxSizing="border-box";const t=document.createElement("dictate-button");t.size=24,t.style.position="absolute",t.style.right="0",t.style.top="0",t.addEventListener("recording:started",e=>{console.log("recording:started",e)}),t.addEventListener("recording:stopped",e=>{console.log("recording:stopped",e)}),t.addEventListener("recording:failed",e=>{console.log("recording:failed",e)}),t.addEventListener("transcribing:started",e=>{console.log("transcribing:started",e)}),t.addEventListener("transcribing:finished",e=>{console.log("transcribing:finished",e);const d=e.detail;r(o,d)}),t.addEventListener("transcribing:failed",e=>{console.log("transcribing:failed",e)}),n.appendChild(t)}}function r(i,o){const n=i.selectionStart||0,t=i.selectionEnd||0;i.value=i.value.substring(0,n)+o+i.value.substring(t)}document.addEventListener("DOMContentLoaded",()=>{s(),new MutationObserver(s).observe(document.body,{childList:!0,subtree:!0})});

package/dist/inject-inclusive.es.js

@@ -1,35 +0,0 @@
-function d() {
-  const i = document.querySelectorAll(
-    'textarea:not([data-dictate-button-off]):not([data-dictate-button-enabled]), input[type="text"]:not([data-dictate-button-off]):not([data-dictate-button-enabled])'
-  );
-  for (const o of i) {
-    const n = document.createElement("div");
-    n.style.position = "relative", n.style.display = "inline-block", n.style.width = "auto", n.style.color = "inherit", o.parentNode.insertBefore(n, o), o.setAttribute("data-dictate-button-enabled", ""), n.appendChild(o), o.style.boxSizing = "border-box";
-    const t = document.createElement("dictate-button");
-    t.size = 24, t.style.position = "absolute", t.style.right = "0", t.style.top = "0", t.addEventListener("recording:started", (e) => {
-      console.log("recording:started", e);
-    }), t.addEventListener("recording:stopped", (e) => {
-      console.log("recording:stopped", e);
-    }), t.addEventListener("recording:failed", (e) => {
-      console.log("recording:failed", e);
-    }), t.addEventListener("transcribing:started", (e) => {
-      console.log("transcribing:started", e);
-    }), t.addEventListener("transcribing:finished", (e) => {
-      console.log("transcribing:finished", e);
-      const s = e.detail;
-      r(o, s);
-    }), t.addEventListener("transcribing:failed", (e) => {
-      console.log("transcribing:failed", e);
-    }), n.appendChild(t);
-  }
-}
-function r(i, o) {
-  const n = i.selectionStart || 0, t = i.selectionEnd || 0;
-  i.value = i.value.substring(0, n) + o + i.value.substring(t);
-}
-document.addEventListener("DOMContentLoaded", () => {
-  d(), new MutationObserver(d).observe(document.body, {
-    childList: !0,
-    subtree: !0
-  });
-});

package/dist/inject.cjs.js

@@ -1 +0,0 @@
-"use strict";require("./inject-exclusive.cjs.js");

package/dist/inject.d.ts

@@ -1 +0,0 @@
-export {}

package/dist/inject.es.js

@@ -1 +0,0 @@
-import "./inject-exclusive.es.js";

package/firebase.json

@@ -1,42 +0,0 @@
-{
-  "hosting": {
-    "predeploy": [
-      "pnpm run build"
-    ],
-    "public": "dist",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
-    "headers": [
-      {
-        "source": "**/*.@(js|ts)",
-        "headers": [
-          {
-            "key": "Access-Control-Allow-Origin",
-            "value": "*"
-          }
-        ]
-      },
-      {
-        "source": "**/*.@(js|ts)",
-        "headers": [
-          {
-            "key": "Cache-Control",
-            "value": "no-cache"
-          }
-        ]
-      },
-      {
-        "source": "404.html",
-        "headers": [
-          {
-            "key": "Cache-Control",
-            "value": "max-age=300"
-          }
-        ]
-      }
-    ]
-  }
-}

package/pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-onlyBuiltDependencies:
-  - esbuild

package/src/dictate-button.styles.ts

@@ -1,36 +0,0 @@
-export const dictateButtonStyles = `
-:host([theme="dark"]) {
-  color-scheme: only dark;
-}
-:host([theme="light"]) {
-  color-scheme: only light;
-}
-
-:host .dictate-button__container {
-  margin: 5px;
-}
-
-:host .dictate-button__button {
-  cursor: pointer;
-  padding: 2px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.8;
-  transition: opacity 0.2s ease-in-out;
-}
-
-:host .dictate-button__button .dictate-button__icon {
-  width: 100%;
-  height: 100%;
-}
-
-:host .dictate-button__button .dictate-button__icon.dictate-button__icon--processing {
-  animation: dictate-button-rotate 1s linear infinite;
-}
-
-@keyframes dictate-button-rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-`

package/src/dictate-button.tsx

@@ -1,240 +0,0 @@
-import { customElement } from 'solid-element'
-import { createSignal } from 'solid-js'
-import { dictateButtonStyles } from './dictate-button.styles'
-
-console.debug('dictate-button version:', __APP_VERSION__)
-
-export interface DictateButtonProps {
-  size?: number
-  apiEndpoint?: string
-  // The props below are for types only. We don't use them inside the component.
-  theme?: 'light' | 'dark'
-  class?: string
-}
-
-declare module 'solid-js' {
-  namespace JSX {
-    interface IntrinsicElements {
-      'dictate-button': Element & DictateButtonProps
-    }
-  }
-}
-
-type DictateButtonStatus = 'idle' | 'recording' | 'processing' | 'error'
-
-const DEFAULT_TRANSCRIBE_API_ENDPOINT =
-  'https://api.dictate-button.io/transcribe'
-const APP_NAME = 'dictate-button.io'
-
-customElement(
-  'dictate-button',
-  {
-    size: 24,
-    apiEndpoint: DEFAULT_TRANSCRIBE_API_ENDPOINT,
-  },
-  (props: DictateButtonProps, { element }) => {
-    const { size, apiEndpoint } = props
-
-    console.debug('api', apiEndpoint)
-
-    const [status, setStatus] = createSignal<DictateButtonStatus>('idle')
-
-    let mediaRecorder: MediaRecorder | null = null
-    let audioChunks: Blob[] = []
-
-    const cleanup = () => {
-      if (mediaRecorder && mediaRecorder.state !== 'inactive') {
-        mediaRecorder.stop()
-      }
-      audioChunks = []
-    }
-
-    element.addEventListener('disconnected', cleanup)
-
-    const toggleRecording = async () => {
-      cleanup()
-
-      if (status() === 'idle') {
-        try {
-          const stream = await navigator.mediaDevices.getUserMedia({
-            audio: true,
-          })
-          mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' })
-          audioChunks = []
-
-          mediaRecorder.ondataavailable = (event) => {
-            audioChunks.push(event.data)
-          }
-
-          mediaRecorder.onstop = async () => {
-            setStatus('processing')
-
-            event(element, 'transcribing:started', 'Started transcribing')
-
-            const audioBlob = new Blob(audioChunks, { type: 'audio/webm' })
-
-            try {
-              const response = await fetch(apiEndpoint!, {
-                method: 'POST',
-                body: audioBlob,
-              })
-
-              if (!response.ok) throw new Error('Failed to transcribe audio')
-
-              const data = await response.json()
-
-              // If user cancelled processing, don't emit transcribing:finished event.
-              if (status() !== 'processing') return
-
-              event(element, 'transcribing:finished', data.text)
-
-              setStatus('idle')
-            } catch (error) {
-              console.error('Failed to transcribe audio:', error)
-
-              event(
-                element,
-                'transcribing:failed',
-                'Failed to transcribe audio'
-              )
-
-              setErrorStatus()
-            }
-          }
-
-          mediaRecorder.start()
-
-          event(element, 'recording:started', 'Started recording')
-
-          setStatus('recording')
-        } catch (error) {
-          console.error('Failed to start recording:', error)
-
-          event(element, 'recording:failed', 'Failed to start recording')
-
-          setErrorStatus()
-        }
-      } else {
-        event(element, 'recording:stopped', 'Stopped recording')
-
-        setStatus('idle')
-      }
-    }
-
-    const setErrorStatus = () => {
-      setStatus('error')
-      setTimeout(() => setStatus('idle'), 2000)
-    }
-
-    return (
-      <div part="container" class="dictate-button__container">
-        <style>{dictateButtonStyles}</style>
-        <button
-          part="button"
-          style={`width:${size}px;height:${size}px"`}
-          class="dictate-button__button"
-          onClick={toggleRecording}
-          title={buttonTitle(status())}
-        >
-          {status() === 'idle' && <IdleIcon />}
-          {status() === 'recording' && <RecordingIcon />}
-          {status() === 'processing' && <ProcessingIcon />}
-          {status() === 'error' && <ErrorIcon />}
-        </button>
-      </div>
-    )
-  }
-)
-
-const buttonTitle = (status: DictateButtonStatus) => {
-  switch (status) {
-    case 'idle':
-      return `Start dictation (${APP_NAME})`
-    case 'recording':
-      return `Stop dictation (${APP_NAME})`
-    case 'processing':
-      return `Stop processing (${APP_NAME})`
-    case 'error':
-      return `Click to reset (${APP_NAME})`
-  }
-}
-
-const event = (element: any, eventName: string, detail: string) => {
-  element.dispatchEvent(
-    new CustomEvent(eventName, {
-      detail,
-      bubbles: true,
-      composed: true,
-    })
-  )
-}
-
-const IdleIcon = () => (
-  <svg
-    // @ts-ignore
-    part="icon"
-    class={`dictate-button__icon dictate-button__icon--idle`}
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"
-    />
-  </svg>
-)
-
-const RecordingIcon = () => (
-  <svg
-    // @ts-ignore
-    part="icon"
-    class="dictate-button__icon dictate-button__icon--recording"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z"
-      clip-rule="evenodd"
-    />
-  </svg>
-)
-
-const ProcessingIcon = () => (
-  <svg
-    // @ts-ignore
-    part="icon"
-    class="dictate-button__icon dictate-button__icon--processing"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-    />
-  </svg>
-)
-
-const ErrorIcon = () => (
-  <svg
-    // @ts-ignore
-    part="icon"
-    class="dictate-button__icon dictate-button__icon--error"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M6 18 18 6M6 6l12 12"
-    />
-  </svg>
-)

package/src/inject-exclusive.js

@@ -1,76 +0,0 @@
-const BUTTONS_SIZE = 24 // px
-const WATCH_DOM_CHANGES = true
-
-function injectDictateButton() {
-  const textFields = document.querySelectorAll(
-    'textarea[data-dictate-button-on]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-on]:not([data-dictate-button-enabled]), textarea[data-dictate-button-target]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-target]:not([data-dictate-button-enabled])'
-  )
-
-  for (const textField of textFields) {
-    // Add a wrapper div with relative positioning.
-    const container = document.createElement('div')
-    container.style.position = 'relative'
-    container.style.display = 'inline-block'
-    container.style.width = 'auto'
-    container.style.color = 'inherit'
-    textField.parentNode.insertBefore(container, textField)
-
-    textField.setAttribute('data-dictate-button-enabled', '')
-
-    container.appendChild(textField)
-
-    // Ensure textarea fills container
-    textField.style.boxSizing = 'border-box'
-    // textarea.style.paddingRight = `${BUTTONS_SIZE + 2 * 2 + 6}px`
-
-    // Add the dictate-button component.
-    const dictateBtn = document.createElement('dictate-button')
-    dictateBtn.size = BUTTONS_SIZE
-    dictateBtn.style.position = 'absolute'
-    dictateBtn.style.right = '0'
-    dictateBtn.style.top = '0'
-
-    // Add event listeners for the dictate-button component.
-    dictateBtn.addEventListener('recording:started', (e) => {
-      console.log('recording:started', e)
-    })
-    dictateBtn.addEventListener('recording:stopped', (e) => {
-      console.log('recording:stopped', e)
-    })
-    dictateBtn.addEventListener('recording:failed', (e) => {
-      console.log('recording:failed', e)
-    })
-
-    dictateBtn.addEventListener('transcribing:started', (e) => {
-      console.log('transcribing:started', e)
-    })
-    dictateBtn.addEventListener('transcribing:finished', (e) => {
-      console.log('transcribing:finished', e)
-      const customEvent = e
-      const text = customEvent.detail
-      receiveText(textField, text)
-    })
-    dictateBtn.addEventListener('transcribing:failed', (e) => {
-      console.log('transcribing:failed', e)
-    })
-
-    container.appendChild(dictateBtn)
-  }
-}
-
-function receiveText(textField, text) {
-  const start = textField.selectionStart || 0
-  const end = textField.selectionEnd || 0
-  textField.value =
-    textField.value.substring(0, start) + text + textField.value.substring(end)
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  injectDictateButton()
-  if (WATCH_DOM_CHANGES) {
-    new MutationObserver(injectDictateButton).observe(document.body, {
-      childList: true,
-      subtree: true,
-    })
-  }
-})

package/src/inject-inclusive.js

@@ -1,76 +0,0 @@
-const BUTTONS_SIZE = 24 // px
-const WATCH_DOM_CHANGES = true
-
-function injectDictateButton() {
-  const textFields = document.querySelectorAll(
-    'textarea:not([data-dictate-button-off]):not([data-dictate-button-enabled]), input[type="text"]:not([data-dictate-button-off]):not([data-dictate-button-enabled])'
-  )
-
-  for (const textField of textFields) {
-    // Add a wrapper div with relative positioning.
-    const container = document.createElement('div')
-    container.style.position = 'relative'
-    container.style.display = 'inline-block'
-    container.style.width = 'auto'
-    container.style.color = 'inherit'
-    textField.parentNode.insertBefore(container, textField)
-
-    textField.setAttribute('data-dictate-button-enabled', '')
-
-    container.appendChild(textField)
-
-    // Ensure textarea fills container
-    textField.style.boxSizing = 'border-box'
-    // textarea.style.paddingRight = `${BUTTONS_SIZE + 2 * 2 + 6}px`
-
-    // Add the dictate-button component.
-    const dictateBtn = document.createElement('dictate-button')
-    dictateBtn.size = BUTTONS_SIZE
-    dictateBtn.style.position = 'absolute'
-    dictateBtn.style.right = '0'
-    dictateBtn.style.top = '0'
-
-    // Add event listeners for the dictate-button component.
-    dictateBtn.addEventListener('recording:started', (e) => {
-      console.log('recording:started', e)
-    })
-    dictateBtn.addEventListener('recording:stopped', (e) => {
-      console.log('recording:stopped', e)
-    })
-    dictateBtn.addEventListener('recording:failed', (e) => {
-      console.log('recording:failed', e)
-    })
-
-    dictateBtn.addEventListener('transcribing:started', (e) => {
-      console.log('transcribing:started', e)
-    })
-    dictateBtn.addEventListener('transcribing:finished', (e) => {
-      console.log('transcribing:finished', e)
-      const customEvent = e
-      const text = customEvent.detail
-      receiveText(textField, text)
-    })
-    dictateBtn.addEventListener('transcribing:failed', (e) => {
-      console.log('transcribing:failed', e)
-    })
-
-    container.appendChild(dictateBtn)
-  }
-}
-
-function receiveText(textField, text) {
-  const start = textField.selectionStart || 0
-  const end = textField.selectionEnd || 0
-  textField.value =
-    textField.value.substring(0, start) + text + textField.value.substring(end)
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  injectDictateButton()
-  if (WATCH_DOM_CHANGES) {
-    new MutationObserver(injectDictateButton).observe(document.body, {
-      childList: true,
-      subtree: true,
-    })
-  }
-})

package/src/inject.js

@@ -1,2 +0,0 @@
-// Enhance only specific fields.
-import './inject-exclusive'

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "dist",
-    "outDir": "dist",
-    "module": "ESNext",
-    "target": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
-    "jsxImportSource": "solid-js"
-  },
-  "include": ["src", "vite-env.d.ts"]
-}

package/vite-env.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-
-declare const __APP_VERSION__: string;

package/vite.config.ts

@@ -1,37 +0,0 @@
-import { defineConfig } from "vite";
-import dts from "vite-plugin-dts";
-import solidPlugin from "vite-plugin-solid";
-import { viteStaticCopy } from 'vite-plugin-static-copy'
-import pkg from './package.json'
-
-export default defineConfig({
-  define: {
-    __APP_VERSION__: JSON.stringify(pkg.version),
-  },
-  plugins: [
-    solidPlugin(),
-    dts({
-      insertTypesEntry: true,
-    }),
-    viteStaticCopy({
-      targets: [
-        {
-          src: '404.html',
-          dest: '',
-        },
-      ],
-    }),
-  ],
-  build: {
-    lib: {
-      entry: {
-        'dictate-button': 'src/dictate-button.tsx',
-        inject: 'src/inject.js',
-        'inject-exclusive': 'src/inject-exclusive.js',
-        'inject-inclusive': 'src/inject-inclusive.js',
-      },
-      formats: ['es', 'cjs'],
-      fileName: (format, entryName) => `${entryName}.${format}.js`,
-    },
-  },
-})