@ghchinoy/lit-audio-ui 0.3.4 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +23 -22
- package/dist/scream-audio-ui.umd.js +55 -55
- package/dist/utils/audio-utils.js +33 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import { ScreamVoiceButton as e } from "./components/scream-voice-button.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import { UiAudioVolumeSlider as
|
|
23
|
-
|
|
2
|
+
import { applyCanvasEdgeFade as t, createAudioAnalyser as n, createMockAnalyser as r, generateRandomAudioData as i, getNormalizedFrequencyData as a } from "./utils/audio-utils.js";
|
|
3
|
+
import { UiLiveWaveform as o } from "./components/ui-live-waveform.js";
|
|
4
|
+
import { UiVoiceButton as s } from "./components/ui-voice-button.js";
|
|
5
|
+
import { UiWaveform as c } from "./components/ui-waveform.js";
|
|
6
|
+
import { audioPlayerContext as l } from "./utils/audio-context.js";
|
|
7
|
+
import { UiAudioProvider as u } from "./components/ui-audio-provider.js";
|
|
8
|
+
import { UiAudioPlayButton as d } from "./components/ui-audio-play-button.js";
|
|
9
|
+
import { UiAudioProgressSlider as f } from "./components/ui-audio-progress-slider.js";
|
|
10
|
+
import { UiAudioTimeDisplay as p } from "./components/ui-audio-time-display.js";
|
|
11
|
+
import { UiAudioPlayer as m } from "./components/ui-audio-player.js";
|
|
12
|
+
import { UiMicSelector as h } from "./components/ui-mic-selector.js";
|
|
13
|
+
import { UiVoicePicker as g } from "./components/ui-voice-picker.js";
|
|
14
|
+
import { UiScrollingWaveform as _ } from "./components/ui-scrolling-waveform.js";
|
|
15
|
+
import { UiShowcaseCard as v } from "./components/ui-showcase-card.js";
|
|
16
|
+
import { UiShimmeringText as y } from "./components/ui-shimmering-text.js";
|
|
17
|
+
import { speechContext as b } from "./utils/speech-context.js";
|
|
18
|
+
import { UiSpeechProvider as x } from "./components/ui-speech-provider.js";
|
|
19
|
+
import { UiSpeechRecordButton as S } from "./components/ui-speech-record-button.js";
|
|
20
|
+
import { UiSpeechCancelButton as C } from "./components/ui-speech-cancel-button.js";
|
|
21
|
+
import { UiSpeechPreview as w } from "./components/ui-speech-preview.js";
|
|
22
|
+
import { UiAudioVolumeSlider as T } from "./components/ui-audio-volume-slider.js";
|
|
23
|
+
import { UiOrb as E } from "./components/ui-orb.js";
|
|
24
|
+
export { e as ScreamVoiceButton, d as UiAudioPlayButton, m as UiAudioPlayer, f as UiAudioProgressSlider, u as UiAudioProvider, p as UiAudioTimeDisplay, T as UiAudioVolumeSlider, o as UiLiveWaveform, h as UiMicSelector, E as UiOrb, _ as UiScrollingWaveform, y as UiShimmeringText, v as UiShowcaseCard, C as UiSpeechCancelButton, w as UiSpeechPreview, x as UiSpeechProvider, S as UiSpeechRecordButton, s as UiVoiceButton, g as UiVoicePicker, c as UiWaveform, t as applyCanvasEdgeFade, l as audioPlayerContext, n as createAudioAnalyser, r as createMockAnalyser, i as generateRandomAudioData, a as getNormalizedFrequencyData, b as speechContext };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`lit`),require(`lit/decorators.js`),require(`@material/web/button/filled-button.js`),require(`@material/web/icon/icon.js`),require(`lit/directives/class-map.js`),require(`@material/web/button/outlined-button.js`),require(`@material/web/iconbutton/filled-icon-button.js`),require(`@material/web/progress/circular-progress.js`),require(`@material/web/slider/slider.js`),require(`@material/web/menu/menu.js`),require(`@material/web/menu/menu-item.js`),require(`@material/web/divider/divider.js`),require(`@material/web/button/text-button.js`),require(`@material/web/button/filled-tonal-button.js`),require(`@material/web/textfield/outlined-text-field.js`),require(`@material/web/iconbutton/icon-button.js`),require(`three`)):typeof define==`function`&&define.amd?define([`exports`,`lit`,`lit/decorators.js`,`@material/web/button/filled-button.js`,`@material/web/icon/icon.js`,`lit/directives/class-map.js`,`@material/web/button/outlined-button.js`,`@material/web/iconbutton/filled-icon-button.js`,`@material/web/progress/circular-progress.js`,`@material/web/slider/slider.js`,`@material/web/menu/menu.js`,`@material/web/menu/menu-item.js`,`@material/web/divider/divider.js`,`@material/web/button/text-button.js`,`@material/web/button/filled-tonal-button.js`,`@material/web/textfield/outlined-text-field.js`,`@material/web/iconbutton/icon-button.js`,`three`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ScreamAudioUI={},e.Lit,e.Lit,e.MaterialWeb,e.MaterialWeb,e.Lit,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.THREE))})(this,function(e,t,n,r,i,a,o,s,c,l,u,ee,
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`lit`),require(`lit/decorators.js`),require(`@material/web/button/filled-button.js`),require(`@material/web/icon/icon.js`),require(`lit/directives/class-map.js`),require(`@material/web/button/outlined-button.js`),require(`@material/web/iconbutton/filled-icon-button.js`),require(`@material/web/progress/circular-progress.js`),require(`@material/web/slider/slider.js`),require(`@material/web/menu/menu.js`),require(`@material/web/menu/menu-item.js`),require(`@material/web/divider/divider.js`),require(`@material/web/button/text-button.js`),require(`@material/web/button/filled-tonal-button.js`),require(`@material/web/textfield/outlined-text-field.js`),require(`@material/web/iconbutton/icon-button.js`),require(`three`)):typeof define==`function`&&define.amd?define([`exports`,`lit`,`lit/decorators.js`,`@material/web/button/filled-button.js`,`@material/web/icon/icon.js`,`lit/directives/class-map.js`,`@material/web/button/outlined-button.js`,`@material/web/iconbutton/filled-icon-button.js`,`@material/web/progress/circular-progress.js`,`@material/web/slider/slider.js`,`@material/web/menu/menu.js`,`@material/web/menu/menu-item.js`,`@material/web/divider/divider.js`,`@material/web/button/text-button.js`,`@material/web/button/filled-tonal-button.js`,`@material/web/textfield/outlined-text-field.js`,`@material/web/iconbutton/icon-button.js`,`three`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ScreamAudioUI={},e.Lit,e.Lit,e.MaterialWeb,e.MaterialWeb,e.Lit,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.THREE))})(this,function(e,t,n,r,i,a,o,s,c,l,u,ee,te,ne,re,ie,ae,d){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var f=Object.create,p=Object.defineProperty,m=Object.getOwnPropertyDescriptor,h=Object.getOwnPropertyNames,g=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty,v=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=h(t),a=0,o=i.length,s;a<o;a++)s=i[a],!_.call(e,s)&&s!==n&&p(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=m(t,s))||r.enumerable});return e};d=((e,t,n)=>(n=e==null?{}:f(g(e)),v(t||!e||!e.__esModule?p(n,`default`,{value:e,enumerable:!0}):n,e)))(d);function y(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var b=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`}static{this.styles=t.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
${this.state===`recording`?`Recording...`:`Speak`}
|
|
24
24
|
</md-filled-button>
|
|
25
|
-
`}_handleClick(){this.state=this.state===`idle`?`recording`:`idle`,this.dispatchEvent(new CustomEvent(`voice-toggle`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};
|
|
25
|
+
`}_handleClick(){this.state=this.state===`idle`?`recording`:`idle`,this.dispatchEvent(new CustomEvent(`voice-toggle`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};y([(0,n.property)({type:String})],b.prototype,`state`,void 0),b=y([(0,n.customElement)(`scream-voice-button`)],b);function x(){return{fftSize:256,frequencyBinCount:128,getByteFrequencyData:e=>{let t=performance.now()/1e3;for(let n=0;n<e.length;n++){let r=Math.sin(t*2+n*.1)*50+Math.sin(t*5+n*.2)*30+100;e[n]=Math.max(0,Math.min(255,r))}}}}function S(e,t={}){let n=new(window.AudioContext||window.webkitAudioContext),r=n.createMediaStreamSource(e),i=n.createAnalyser();return t.fftSize!==void 0&&(i.fftSize=t.fftSize),t.smoothingTimeConstant!==void 0&&(i.smoothingTimeConstant=t.smoothingTimeConstant),t.minDecibels!==void 0&&(i.minDecibels=t.minDecibels),t.maxDecibels!==void 0&&(i.maxDecibels=t.maxDecibels),r.connect(i),{analyser:i,audioContext:n,cleanup:()=>{r.disconnect(),n.state!==`closed`&&n.close()}}}function C(e,t){e.getByteFrequencyData(t);let n=[];for(let e=0;e<t.length;e++)n.push(t[e]/255);return n}function w(e,t=.5){let n=[];for(let r=0;r<e;r++)n.push(Math.random()*t);return n}function T(e,t,n,r){if(r<=0||t<=0)return;let i=e.createLinearGradient(0,0,t,0),a=Math.min(.2,r/t);i.addColorStop(0,`rgba(0,0,0,0)`),i.addColorStop(a,`rgba(0,0,0,1)`),i.addColorStop(1-a,`rgba(0,0,0,1)`),i.addColorStop(1,`rgba(0,0,0,0)`),e.globalCompositeOperation=`destination-in`,e.fillStyle=i,e.fillRect(0,0,t,n),e.globalCompositeOperation=`source-over`}var E=class extends t.LitElement{constructor(...e){super(...e),this.active=!1,this.processing=!1,this.barWidth=3,this.barHeight=4,this.barGap=1,this.barRadius=1.5,this.fadeEdges=!0,this.fadeWidth=24,this.height=64,this.sensitivity=1,this.updateRate=30,this._animationFrameId=0,this._lastUpdateTime=0,this._currentBars=[],this._processingTime=0,this._transitionProgress=0,this._lastActiveData=[]}static{this.styles=t.css`
|
|
26
26
|
:host {
|
|
27
27
|
display: block;
|
|
28
28
|
width: 100%;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
<div class="container" style="height: ${this.height}px;">
|
|
44
44
|
<canvas></canvas>
|
|
45
45
|
</div>
|
|
46
|
-
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._themeObserver=new MutationObserver(()=>{this._renderFrame()}),this._themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`class`,`style`]}),this._startAnimationLoop()}updated(e){super.updated(e),e.has(`analyserNode`)&&this.analyserNode&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),e.has(`processing`)&&this.processing&&!this.active&&(this._processingTime=0,this._transitionProgress=0)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._themeObserver&&this._themeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t),this._renderFrame()}_startAnimationLoop(){let e=t=>{this._updateData(t),this._renderFrame(),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}_updateData(e){if(!this._canvas)return;let t=this._canvas.getBoundingClientRect(),n=Math.floor(t.width/(this.barWidth+this.barGap));if(this.active&&this.analyserNode&&this._dataArray){if(e-this._lastUpdateTime>this.updateRate){this._lastUpdateTime=e;let t=C(this.analyserNode,this._dataArray),r=Math.floor(t.length*.05),i=Math.floor(t.length*.4),a=t.slice(r,i),o=Math.floor(n/2),s=Array(n).fill(.05),c=a.length-1;for(let e=0;e<=o;e++){let t=e/o,r=a[Math.floor(t*c)]||0;t>.8&&(r*=1-(t-.8)*5);let i=Math.max(.05,Math.min(1,r*this.sensitivity)),l=o+e,u=o-e;l<n&&(s[l]=i),u>=0&&(s[u]=i)}this._currentBars=s,this._lastActiveData=[...s]}}else if(this.processing&&!this.active){this._processingTime+=.03,this._transitionProgress=Math.min(1,this._transitionProgress+.02);let e=Array(n).fill(.05),t=Math.floor(n/2);for(let r=0;r<n;r++){let n=(r-t)/t,i=1-Math.abs(n)*.4,a=Math.sin(this._processingTime*1.5+n*3)*.25,o=Math.sin(this._processingTime*.8-n*2)*.2,s=Math.cos(this._processingTime*2+n)*.15,c=(.2+(a+o+s))*i,l=c;if(this._lastActiveData.length>0&&this._transitionProgress<1){let e=Math.min(r,this._lastActiveData.length-1);l=(this._lastActiveData[e]||0)*(1-this._transitionProgress)+c*this._transitionProgress}e[r]=Math.max(.05,Math.min(1,l))}this._currentBars=e}else if(this._currentBars.length>0){let e=!0;for(let t=0;t<this._currentBars.length;t++)this._currentBars[t]=Math.max(.05,this._currentBars[t]*.85),this._currentBars[t]>.06&&(e=!1);e&&(this._currentBars=[])}}_renderFrame(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor||`currentColor`;if(r.startsWith(`var(`)){let e=r.match(/var\(([^,)]+)/)?.[1].trim();if(e){let t=n.getPropertyValue(e).trim();t&&(r=t)}}(r===`currentColor`||!r)&&(r=n.getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`);let i=this.barWidth+this.barGap,a=Math.floor(t.width/i),o=t.height/2;for(let n=0;n<a&&n<this._currentBars.length;n++){let a=this._currentBars[n]||.05,s=n*i,c=Math.max(this.barHeight,a*t.height*.8),l=o-c/2;e.fillStyle=r,e.globalAlpha=.4+a*.6,this.barRadius>0?(e.beginPath(),e.roundRect(s,l,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(s,l,this.barWidth,c)}this.fadeEdges&&
|
|
46
|
+
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._themeObserver=new MutationObserver(()=>{this._renderFrame()}),this._themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`class`,`style`]}),this._startAnimationLoop()}updated(e){super.updated(e),e.has(`analyserNode`)&&this.analyserNode&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),e.has(`processing`)&&this.processing&&!this.active&&(this._processingTime=0,this._transitionProgress=0)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._themeObserver&&this._themeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t),this._renderFrame()}_startAnimationLoop(){let e=t=>{this._updateData(t),this._renderFrame(),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}_updateData(e){if(!this._canvas)return;let t=this._canvas.getBoundingClientRect(),n=Math.floor(t.width/(this.barWidth+this.barGap));if(this.active&&this.analyserNode&&this._dataArray){if(e-this._lastUpdateTime>this.updateRate){this._lastUpdateTime=e;let t=C(this.analyserNode,this._dataArray),r=Math.floor(t.length*.05),i=Math.floor(t.length*.4),a=t.slice(r,i),o=Math.floor(n/2),s=Array(n).fill(.05),c=a.length-1;for(let e=0;e<=o;e++){let t=e/o,r=a[Math.floor(t*c)]||0;t>.8&&(r*=1-(t-.8)*5);let i=Math.max(.05,Math.min(1,r*this.sensitivity)),l=o+e,u=o-e;l<n&&(s[l]=i),u>=0&&(s[u]=i)}this._currentBars=s,this._lastActiveData=[...s]}}else if(this.processing&&!this.active){this._processingTime+=.03,this._transitionProgress=Math.min(1,this._transitionProgress+.02);let e=Array(n).fill(.05),t=Math.floor(n/2);for(let r=0;r<n;r++){let n=(r-t)/t,i=1-Math.abs(n)*.4,a=Math.sin(this._processingTime*1.5+n*3)*.25,o=Math.sin(this._processingTime*.8-n*2)*.2,s=Math.cos(this._processingTime*2+n)*.15,c=(.2+(a+o+s))*i,l=c;if(this._lastActiveData.length>0&&this._transitionProgress<1){let e=Math.min(r,this._lastActiveData.length-1);l=(this._lastActiveData[e]||0)*(1-this._transitionProgress)+c*this._transitionProgress}e[r]=Math.max(.05,Math.min(1,l))}this._currentBars=e}else if(this._currentBars.length>0){let e=!0;for(let t=0;t<this._currentBars.length;t++)this._currentBars[t]=Math.max(.05,this._currentBars[t]*.85),this._currentBars[t]>.06&&(e=!1);e&&(this._currentBars=[])}}_renderFrame(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor||`currentColor`;if(r.startsWith(`var(`)){let e=r.match(/var\(([^,)]+)/)?.[1].trim();if(e){let t=n.getPropertyValue(e).trim();t&&(r=t)}}(r===`currentColor`||!r)&&(r=n.getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`);let i=this.barWidth+this.barGap,a=Math.floor(t.width/i),o=t.height/2;for(let n=0;n<a&&n<this._currentBars.length;n++){let a=this._currentBars[n]||.05,s=n*i,c=Math.max(this.barHeight,a*t.height*.8),l=o-c/2;e.fillStyle=r,e.globalAlpha=.4+a*.6,this.barRadius>0?(e.beginPath(),e.roundRect(s,l,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(s,l,this.barWidth,c)}this.fadeEdges&&T(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};y([(0,n.property)({type:Boolean})],E.prototype,`active`,void 0),y([(0,n.property)({type:Boolean})],E.prototype,`processing`,void 0),y([(0,n.property)({attribute:!1})],E.prototype,`analyserNode`,void 0),y([(0,n.property)({type:Number})],E.prototype,`barWidth`,void 0),y([(0,n.property)({type:Number})],E.prototype,`barHeight`,void 0),y([(0,n.property)({type:Number})],E.prototype,`barGap`,void 0),y([(0,n.property)({type:Number})],E.prototype,`barRadius`,void 0),y([(0,n.property)({type:String})],E.prototype,`barColor`,void 0),y([(0,n.property)({type:Boolean})],E.prototype,`fadeEdges`,void 0),y([(0,n.property)({type:Number})],E.prototype,`fadeWidth`,void 0),y([(0,n.property)({type:Number})],E.prototype,`height`,void 0),y([(0,n.property)({type:Number})],E.prototype,`sensitivity`,void 0),y([(0,n.property)({type:Number})],E.prototype,`updateRate`,void 0),y([(0,n.query)(`canvas`)],E.prototype,`_canvas`,void 0),y([(0,n.query)(`.container`)],E.prototype,`_container`,void 0),E=y([(0,n.customElement)(`ui-live-waveform`)],E);var D=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`,this.disabled=!1,this._showFeedback=!1,this._feedbackType=null}static{this.styles=t.css`
|
|
47
47
|
:host {
|
|
48
48
|
display: inline-block;
|
|
49
49
|
--ui-waveform-height: 24px;
|
|
@@ -235,7 +235,7 @@
|
|
|
235
235
|
`:``}
|
|
236
236
|
</div>
|
|
237
237
|
</md-filled-button>
|
|
238
|
-
`}_handleClick(e){this.dispatchEvent(new CustomEvent(`voice-button-click`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};
|
|
238
|
+
`}_handleClick(e){this.dispatchEvent(new CustomEvent(`voice-button-click`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};y([(0,n.property)({type:String})],D.prototype,`state`,void 0),y([(0,n.property)({type:String})],D.prototype,`label`,void 0),y([(0,n.property)({type:String})],D.prototype,`trailing`,void 0),y([(0,n.property)({type:Boolean})],D.prototype,`disabled`,void 0),y([(0,n.property)({attribute:!1})],D.prototype,`analyserNode`,void 0),y([(0,n.state)()],D.prototype,`_showFeedback`,void 0),y([(0,n.state)()],D.prototype,`_feedbackType`,void 0),D=y([(0,n.customElement)(`ui-voice-button`)],D);var O=class extends t.LitElement{constructor(...e){super(...e),this.data=[],this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128}static{this.styles=t.css`
|
|
239
239
|
:host {
|
|
240
240
|
display: block;
|
|
241
241
|
width: 100%;
|
|
@@ -256,7 +256,7 @@
|
|
|
256
256
|
<div class="container" style="height: ${this.height}px;">
|
|
257
257
|
<canvas></canvas>
|
|
258
258
|
</div>
|
|
259
|
-
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container)}updated(e){super.updated(e),(e.has(`data`)||e.has(`barColor`))&&this._renderWaveform()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&(n.scale(t,t),this._renderWaveform())}_renderWaveform(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=Math.floor(t.width/(this.barWidth+this.barGap)),a=t.height/2;for(let n=0;n<i;n++){let o=Math.floor(n/i*this.data.length),s=this.data[o]||0,c=Math.max(this.barHeight,s*t.height*.8),l=n*(this.barWidth+this.barGap),u=a-c/2;e.fillStyle=r,e.globalAlpha=.3+s*.7,this.barRadius>0?(e.beginPath(),e.roundRect(l,u,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(l,u,this.barWidth,c)}this.fadeEdges&&
|
|
259
|
+
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container)}updated(e){super.updated(e),(e.has(`data`)||e.has(`barColor`))&&this._renderWaveform()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&(n.scale(t,t),this._renderWaveform())}_renderWaveform(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=Math.floor(t.width/(this.barWidth+this.barGap)),a=t.height/2;for(let n=0;n<i;n++){let o=Math.floor(n/i*this.data.length),s=this.data[o]||0,c=Math.max(this.barHeight,s*t.height*.8),l=n*(this.barWidth+this.barGap),u=a-c/2;e.fillStyle=r,e.globalAlpha=.3+s*.7,this.barRadius>0?(e.beginPath(),e.roundRect(l,u,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(l,u,this.barWidth,c)}this.fadeEdges&&T(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};y([(0,n.property)({type:Array})],O.prototype,`data`,void 0),y([(0,n.property)({type:Number})],O.prototype,`barWidth`,void 0),y([(0,n.property)({type:Number})],O.prototype,`barHeight`,void 0),y([(0,n.property)({type:Number})],O.prototype,`barGap`,void 0),y([(0,n.property)({type:Number})],O.prototype,`barRadius`,void 0),y([(0,n.property)({type:String})],O.prototype,`barColor`,void 0),y([(0,n.property)({type:Boolean})],O.prototype,`fadeEdges`,void 0),y([(0,n.property)({type:Number})],O.prototype,`fadeWidth`,void 0),y([(0,n.property)({type:Number})],O.prototype,`height`,void 0),y([(0,n.query)(`canvas`)],O.prototype,`_canvas`,void 0),y([(0,n.query)(`.container`)],O.prototype,`_container`,void 0),O=y([(0,n.customElement)(`ui-waveform`)],O);var k=class extends Event{constructor(e,t,n,r){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t,this.callback=n,this.subscribe=r??!1}};function A(e){return e}var j=class{constructor(e,t,n,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(e,t)=>{this.unsubscribe&&(this.unsubscribe!==t&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=e,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(e,t)),this.unsubscribe=t},this.host=e,t.context!==void 0){let e=t;this.context=e.context,this.callback=e.callback,this.subscribe=e.subscribe??!1}else this.context=t,this.callback=n,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&=(this.unsubscribe(),void 0)}dispatchRequest(){this.host.dispatchEvent(new k(this.context,this.host,this.t,this.subscribe))}},M=class{get value(){return this.o}set value(e){this.setValue(e)}setValue(e,t=!1){let n=t||!Object.is(e,this.o);this.o=e,n&&this.updateObservers()}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:t}]of this.subscriptions)e(this.o,t)},e!==void 0&&(this.value=e)}addCallback(e,t,n){if(!n)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e)},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r)}clearCallbacks(){this.subscriptions.clear()}},oe=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},N=class extends M{constructor(e,t,n){super(t.context===void 0?n:t.initialValue),this.onContextRequest=e=>{if(e.context!==this.context)return;let t=e.contextTarget??e.composedPath()[0];t!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,t,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;let t=new Set;for(let[e,{consumerHost:n}]of this.subscriptions)t.has(e)||(t.add(e),n.dispatchEvent(new k(this.context,n,e,!0)));e.stopPropagation()},this.host=e,t.context===void 0?this.context=t:this.context=t.context,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(`context-request`,this.onContextRequest),this.host.addEventListener(`context-provider`,this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new oe(this.context,this.host))}};function P({context:e}){return(t,n)=>{let r=new WeakMap;if(typeof n==`object`)return{get(){return t.get.call(this)},set(e){return r.get(this).setValue(e),t.set.call(this,e)},init(t){return r.set(this,new N(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new N(t,{context:e}))}));let i=Object.getOwnPropertyDescriptor(t,n),a;if(i===void 0){let e=new WeakMap;a={get(){return e.get(this)},set(t){r.get(this).setValue(t),e.set(this,t)},configurable:!0,enumerable:!0}}else{let e=i.set;a={...i,set(t){r.get(this).setValue(t),e?.call(this,t)}}}Object.defineProperty(t,n,a);return}}}function F({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new j(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new j(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}let I=A(`ui-audio-player-context`);var L=class extends t.LitElement{constructor(...e){super(...e),this.src=``,this._animationFrameId=0,this.state={src:``,isPlaying:!1,isBuffering:!1,currentTime:0,duration:0,volume:1,muted:!1,analyserNode:void 0,play:()=>this.play(),pause:()=>this.pause(),togglePlay:()=>this._togglePlay(),seek:e=>this._seek(e),setVolume:e=>this._setVolume(e),toggleMute:()=>this._toggleMute()}}static{this.styles=t.css`
|
|
260
260
|
:host {
|
|
261
261
|
display: contents; /* We are completely invisible, just wrapping children */
|
|
262
262
|
}
|
|
@@ -277,7 +277,7 @@
|
|
|
277
277
|
@error="${this._handleError}"
|
|
278
278
|
></audio>
|
|
279
279
|
<slot></slot>
|
|
280
|
-
`}willUpdate(e){e.has(`src`)&&this._updateState({src:this.src,isPlaying:!1,currentTime:0,error:void 0})}updated(e){e.has(`src`)&&this._audioEl&&this._audioEl.load()}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._audioContext&&this._audioContext.state!==`closed`&&this._audioContext.close()}_updateState(e){this.state={...this.state,...e},this.dispatchEvent(new CustomEvent(`state-change`,{detail:this.state,bubbles:!0,composed:!0}))}_setupAudioContext(){if(!(this._audioContext||!this._audioEl))try{this._audioContext=new(window.AudioContext||window.webkitAudioContext),this._analyserNode=this._audioContext.createAnalyser(),this._analyserNode.fftSize=256,this._analyserNode.smoothingTimeConstant=.8,this._mediaSource=this._audioContext.createMediaElementSource(this._audioEl),this._mediaSource.connect(this._analyserNode),this._analyserNode.connect(this._audioContext.destination),this._updateState({analyserNode:this._analyserNode})}catch(e){console.warn(`Failed to set up AudioContext for visualizer:`,e)}}play(){this._audioEl.src&&(this._setupAudioContext(),this._audioContext?.state===`suspended`&&this._audioContext.resume(),this._audioEl.play().catch(e=>{console.error(`Error playing audio`,e),this._updateState({error:`Playback failed`})}))}pause(){this._audioEl&&this._audioEl.pause()}_togglePlay(){this.state.isPlaying?this.pause():this.play()}_seek(e){this._audioEl&&(this._audioEl.currentTime=e,this._updateState({currentTime:e}))}_setVolume(e){this._audioEl&&(this._audioEl.volume=e,this._updateState({volume:e,muted:e===0}))}_toggleMute(){this._audioEl&&(this._audioEl.muted=!this._audioEl.muted,this._updateState({muted:this._audioEl.muted}))}_handleLoadedMetadata(){this._updateState({duration:this._audioEl.duration})}_handleEnded(){this._updateState({isPlaying:!1,currentTime:0}),this._audioEl.currentTime=0}_handlePlaying(){this._updateState({isPlaying:!0,isBuffering:!1,error:void 0}),this._startTrackingTime()}_handlePause(){this._updateState({isPlaying:!1}),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleError(){this._updateState({error:`Error loading audio`,isPlaying:!1,isBuffering:!1})}_startTrackingTime(){let e=()=>{this._audioEl&&this.state.isPlaying&&(Math.abs(this.state.currentTime-this._audioEl.currentTime)>.05&&this._updateState({currentTime:this._audioEl.currentTime}),this._animationFrameId=requestAnimationFrame(e))};this._animationFrameId=requestAnimationFrame(e)}};
|
|
280
|
+
`}willUpdate(e){e.has(`src`)&&this._updateState({src:this.src,isPlaying:!1,currentTime:0,error:void 0})}updated(e){e.has(`src`)&&this._audioEl&&this._audioEl.load()}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._audioContext&&this._audioContext.state!==`closed`&&this._audioContext.close()}_updateState(e){this.state={...this.state,...e},this.dispatchEvent(new CustomEvent(`state-change`,{detail:this.state,bubbles:!0,composed:!0}))}_setupAudioContext(){if(!(this._audioContext||!this._audioEl))try{this._audioContext=new(window.AudioContext||window.webkitAudioContext),this._analyserNode=this._audioContext.createAnalyser(),this._analyserNode.fftSize=256,this._analyserNode.smoothingTimeConstant=.8,this._mediaSource=this._audioContext.createMediaElementSource(this._audioEl),this._mediaSource.connect(this._analyserNode),this._analyserNode.connect(this._audioContext.destination),this._updateState({analyserNode:this._analyserNode})}catch(e){console.warn(`Failed to set up AudioContext for visualizer:`,e)}}play(){this._audioEl.src&&(this._setupAudioContext(),this._audioContext?.state===`suspended`&&this._audioContext.resume(),this._audioEl.play().catch(e=>{console.error(`Error playing audio`,e),this._updateState({error:`Playback failed`})}))}pause(){this._audioEl&&this._audioEl.pause()}_togglePlay(){this.state.isPlaying?this.pause():this.play()}_seek(e){this._audioEl&&(this._audioEl.currentTime=e,this._updateState({currentTime:e}))}_setVolume(e){this._audioEl&&(this._audioEl.volume=e,this._updateState({volume:e,muted:e===0}))}_toggleMute(){this._audioEl&&(this._audioEl.muted=!this._audioEl.muted,this._updateState({muted:this._audioEl.muted}))}_handleLoadedMetadata(){this._updateState({duration:this._audioEl.duration})}_handleEnded(){this._updateState({isPlaying:!1,currentTime:0}),this._audioEl.currentTime=0}_handlePlaying(){this._updateState({isPlaying:!0,isBuffering:!1,error:void 0}),this._startTrackingTime()}_handlePause(){this._updateState({isPlaying:!1}),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleError(){this._updateState({error:`Error loading audio`,isPlaying:!1,isBuffering:!1})}_startTrackingTime(){let e=()=>{this._audioEl&&this.state.isPlaying&&(Math.abs(this.state.currentTime-this._audioEl.currentTime)>.05&&this._updateState({currentTime:this._audioEl.currentTime}),this._animationFrameId=requestAnimationFrame(e))};this._animationFrameId=requestAnimationFrame(e)}};y([(0,n.property)({type:String})],L.prototype,`src`,void 0),y([(0,n.query)(`audio`)],L.prototype,`_audioEl`,void 0),y([P({context:I}),(0,n.state)()],L.prototype,`state`,void 0),L=y([(0,n.customElement)(`ui-audio-provider`)],L);var R=class extends t.LitElement{static{this.styles=t.css`
|
|
281
281
|
:host {
|
|
282
282
|
display: inline-flex;
|
|
283
283
|
position: relative;
|
|
@@ -336,7 +336,7 @@
|
|
|
336
336
|
<md-icon>${e?`pause`:`play_arrow`}</md-icon>
|
|
337
337
|
</md-filled-icon-button>
|
|
338
338
|
${n&&e?t.html`<md-circular-progress indeterminate></md-circular-progress>`:``}
|
|
339
|
-
`}_handleClick(){this.playerState&&this.playerState.togglePlay()}};
|
|
339
|
+
`}_handleClick(){this.playerState&&this.playerState.togglePlay()}};y([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],R.prototype,`playerState`,void 0),R=y([(0,n.customElement)(`ui-audio-play-button`)],R);var z=class extends t.LitElement{constructor(...e){super(...e),this._isDragging=!1,this._dragValue=0}static{this.styles=t.css`
|
|
340
340
|
:host {
|
|
341
341
|
display: flex;
|
|
342
342
|
width: 100%;
|
|
@@ -359,7 +359,7 @@
|
|
|
359
359
|
@input="${this._handleInput}"
|
|
360
360
|
@change="${this._handleChange}"
|
|
361
361
|
></md-slider>
|
|
362
|
-
`}_handleInput(e){this._isDragging=!0,this._dragValue=e.target.value}_handleChange(e){this._dragValue=e.target.value,this.playerState&&this.playerState.seek(this._dragValue),this._isDragging=!1}};
|
|
362
|
+
`}_handleInput(e){this._isDragging=!0,this._dragValue=e.target.value}_handleChange(e){this._dragValue=e.target.value,this.playerState&&this.playerState.seek(this._dragValue),this._isDragging=!1}};y([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],z.prototype,`playerState`,void 0),z=y([(0,n.customElement)(`ui-audio-progress-slider`)],z);var B=class extends t.LitElement{constructor(...e){super(...e),this.format=`full`}static{this.styles=t.css`
|
|
363
363
|
:host {
|
|
364
364
|
display: inline-block;
|
|
365
365
|
font-variant-numeric: tabular-nums;
|
|
@@ -368,7 +368,7 @@
|
|
|
368
368
|
font-family: inherit;
|
|
369
369
|
}
|
|
370
370
|
`}render(){let e=this.playerState?.currentTime||0,n=this.playerState?.duration||0;if(this.format===`elapsed`)return t.html`${this._formatTime(e)}`;if(this.format===`remaining`){let r=Math.max(0,n-e);return t.html`-${this._formatTime(r)}`}else return t.html`${this._formatTime(e)} /
|
|
371
|
-
${n?this._formatTime(n):`--:--`}`}_formatTime(e){if(!e||isNaN(e))return`0:00`;let t=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),i=``;return t>0&&(i+=``+t+`:`+(n<10?`0`:``)),i+=``+n+`:`+(r<10?`0`:``),i+=``+r,i}};
|
|
371
|
+
${n?this._formatTime(n):`--:--`}`}_formatTime(e){if(!e||isNaN(e))return`0:00`;let t=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),i=``;return t>0&&(i+=``+t+`:`+(n<10?`0`:``)),i+=``+n+`:`+(r<10?`0`:``),i+=``+r,i}};y([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],B.prototype,`playerState`,void 0),y([(0,n.property)({type:String})],B.prototype,`format`,void 0),B=y([(0,n.customElement)(`ui-audio-time-display`)],B);var V=class extends t.LitElement{static{this.styles=t.css`
|
|
372
372
|
:host {
|
|
373
373
|
display: inline-block;
|
|
374
374
|
width: 100%;
|
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
</div>
|
|
413
413
|
</div>
|
|
414
414
|
</ui-audio-provider>
|
|
415
|
-
`}};
|
|
415
|
+
`}};y([(0,n.property)({type:Object})],V.prototype,`item`,void 0),V=y([(0,n.customElement)(`ui-audio-player`)],V);var H=class extends t.LitElement{constructor(...e){super(...e),this.muted=!1,this.disabled=!1,this._devices=[],this._loading=!0,this._error=null,this._hasPermission=!1,this._isMenuOpen=!1,this._handleDeviceChange=()=>{this._hasPermission?this._loadDevicesWithPermission():this._loadDevicesWithoutPermission()}}static{this.styles=t.css`
|
|
416
416
|
:host {
|
|
417
417
|
display: inline-block;
|
|
418
418
|
position: relative;
|
|
@@ -566,7 +566,7 @@
|
|
|
566
566
|
</div>
|
|
567
567
|
`:``}
|
|
568
568
|
</md-menu>
|
|
569
|
-
`}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open,this._isMenuOpen=this._menuEl.open)}_selectDevice(e){this.value=e,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:e},bubbles:!0,composed:!0})),this._isMenuOpen&&!this.muted&&this._hasPermission&&this._startPreview()}_toggleMute(e){e.stopPropagation(),this.muted=!this.muted,this.dispatchEvent(new CustomEvent(`mute-change`,{detail:{muted:this.muted},bubbles:!0,composed:!0}))}async _loadDevicesWithoutPermission(){try{this._loading=!0,this._error=null;let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e)}catch(e){this._error=e instanceof Error?e.message:`Failed to get audio devices`}finally{this._loading=!1}}async _loadDevicesWithPermission(){if(!this._loading)try{this._loading=!0,this._error=null,(await navigator.mediaDevices.getUserMedia({audio:!0})).getTracks().forEach(e=>e.stop());let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e),this._hasPermission=!0,this._isMenuOpen&&!this.muted&&this._startPreview()}catch(e){this._error=e instanceof Error?e.message:`Permission denied`}finally{this._loading=!1}}_parseDeviceList(e){let t=e.filter(e=>e.kind===`audioinput`).map(e=>{let t=e.label||`Microphone`;return t=t.replace(/\s*\([^)]*\)/g,``).trim(),{deviceId:e.deviceId,label:t,groupId:e.groupId}});this._devices=t,!this.value&&t.length>0&&(this.value=t[0].deviceId,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:this.value},bubbles:!0,composed:!0})))}async _startPreview(){if(this._stopPreview(),this.value)try{this._previewStream=await navigator.mediaDevices.getUserMedia({audio:{deviceId:{exact:this.value}}}),this._previewAudioContext=new(window.AudioContext||window.webkitAudioContext),this._previewAnalyser=this._previewAudioContext.createAnalyser(),this._previewAnalyser.fftSize=256,this._previewAnalyser.smoothingTimeConstant=.8,this._previewAudioContext.createMediaStreamSource(this._previewStream).connect(this._previewAnalyser)}catch(e){console.warn(`Failed to start preview stream`,e)}}_stopPreview(){this._previewStream&&=(this._previewStream.getTracks().forEach(e=>e.stop()),void 0),this._previewAudioContext&&this._previewAudioContext.state!==`closed`&&(this._previewAudioContext.close(),this._previewAudioContext=void 0),this._previewAnalyser=void 0}};
|
|
569
|
+
`}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open,this._isMenuOpen=this._menuEl.open)}_selectDevice(e){this.value=e,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:e},bubbles:!0,composed:!0})),this._isMenuOpen&&!this.muted&&this._hasPermission&&this._startPreview()}_toggleMute(e){e.stopPropagation(),this.muted=!this.muted,this.dispatchEvent(new CustomEvent(`mute-change`,{detail:{muted:this.muted},bubbles:!0,composed:!0}))}async _loadDevicesWithoutPermission(){try{this._loading=!0,this._error=null;let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e)}catch(e){this._error=e instanceof Error?e.message:`Failed to get audio devices`}finally{this._loading=!1}}async _loadDevicesWithPermission(){if(!this._loading)try{this._loading=!0,this._error=null,(await navigator.mediaDevices.getUserMedia({audio:!0})).getTracks().forEach(e=>e.stop());let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e),this._hasPermission=!0,this._isMenuOpen&&!this.muted&&this._startPreview()}catch(e){this._error=e instanceof Error?e.message:`Permission denied`}finally{this._loading=!1}}_parseDeviceList(e){let t=e.filter(e=>e.kind===`audioinput`).map(e=>{let t=e.label||`Microphone`;return t=t.replace(/\s*\([^)]*\)/g,``).trim(),{deviceId:e.deviceId,label:t,groupId:e.groupId}});this._devices=t,!this.value&&t.length>0&&(this.value=t[0].deviceId,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:this.value},bubbles:!0,composed:!0})))}async _startPreview(){if(this._stopPreview(),this.value)try{this._previewStream=await navigator.mediaDevices.getUserMedia({audio:{deviceId:{exact:this.value}}}),this._previewAudioContext=new(window.AudioContext||window.webkitAudioContext),this._previewAnalyser=this._previewAudioContext.createAnalyser(),this._previewAnalyser.fftSize=256,this._previewAnalyser.smoothingTimeConstant=.8,this._previewAudioContext.createMediaStreamSource(this._previewStream).connect(this._previewAnalyser)}catch(e){console.warn(`Failed to start preview stream`,e)}}_stopPreview(){this._previewStream&&=(this._previewStream.getTracks().forEach(e=>e.stop()),void 0),this._previewAudioContext&&this._previewAudioContext.state!==`closed`&&(this._previewAudioContext.close(),this._previewAudioContext=void 0),this._previewAnalyser=void 0}};y([(0,n.property)({type:String})],H.prototype,`value`,void 0),y([(0,n.property)({type:Boolean})],H.prototype,`muted`,void 0),y([(0,n.property)({type:Boolean})],H.prototype,`disabled`,void 0),y([(0,n.state)()],H.prototype,`_devices`,void 0),y([(0,n.state)()],H.prototype,`_loading`,void 0),y([(0,n.state)()],H.prototype,`_error`,void 0),y([(0,n.state)()],H.prototype,`_hasPermission`,void 0),y([(0,n.state)()],H.prototype,`_isMenuOpen`,void 0),y([(0,n.state)()],H.prototype,`_previewAnalyser`,void 0),y([(0,n.query)(`md-menu`)],H.prototype,`_menuEl`,void 0),H=y([(0,n.customElement)(`ui-mic-selector`)],H);var U=class extends t.LitElement{constructor(...e){super(...e),this.voices=[],this.placeholder=`Select a voice...`,this.idKey=`voiceId`,this.titleKey=`name`,this.subtitleKey=`category`,this.previewUrlKey=`previewUrl`,this.useOrbs=!1,this.colorKey=`colors`,this._searchQuery=``}static{this.styles=t.css`
|
|
570
570
|
:host {
|
|
571
571
|
display: inline-block;
|
|
572
572
|
width: 100%;
|
|
@@ -880,7 +880,7 @@
|
|
|
880
880
|
</md-menu-item>
|
|
881
881
|
`)}
|
|
882
882
|
</md-menu>
|
|
883
|
-
`}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open)}_handleMenuClosed(){this._stopPreview()}_selectVoice(e){this.value=e,this.dispatchEvent(new CustomEvent(`voice-change`,{detail:{voiceId:e},bubbles:!0,composed:!0}))}_togglePreview(e,t){e.stopPropagation(),e.preventDefault(),!(!t[this.previewUrlKey]||!this._audioEl)&&(this._previewingVoiceId===t[this.idKey]?this._stopPreview():(this._audioEl.src=t[this.previewUrlKey],this._audioEl.play().catch(console.error),this._previewingVoiceId=t[this.idKey]))}_stopPreview(){this._audioEl&&(this._audioEl.pause(),this._audioEl.currentTime=0),this._previewingVoiceId=void 0}};
|
|
883
|
+
`}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open)}_handleMenuClosed(){this._stopPreview()}_selectVoice(e){this.value=e,this.dispatchEvent(new CustomEvent(`voice-change`,{detail:{voiceId:e},bubbles:!0,composed:!0}))}_togglePreview(e,t){e.stopPropagation(),e.preventDefault(),!(!t[this.previewUrlKey]||!this._audioEl)&&(this._previewingVoiceId===t[this.idKey]?this._stopPreview():(this._audioEl.src=t[this.previewUrlKey],this._audioEl.play().catch(console.error),this._previewingVoiceId=t[this.idKey]))}_stopPreview(){this._audioEl&&(this._audioEl.pause(),this._audioEl.currentTime=0),this._previewingVoiceId=void 0}};y([(0,n.property)({type:Array})],U.prototype,`voices`,void 0),y([(0,n.property)({type:String})],U.prototype,`value`,void 0),y([(0,n.property)({type:String})],U.prototype,`placeholder`,void 0),y([(0,n.property)({type:String})],U.prototype,`idKey`,void 0),y([(0,n.property)({type:String})],U.prototype,`titleKey`,void 0),y([(0,n.property)({type:String})],U.prototype,`subtitleKey`,void 0),y([(0,n.property)({type:String})],U.prototype,`previewUrlKey`,void 0),y([(0,n.property)({type:Boolean})],U.prototype,`useOrbs`,void 0),y([(0,n.property)({type:String})],U.prototype,`colorKey`,void 0),y([(0,n.state)()],U.prototype,`_searchQuery`,void 0),y([(0,n.state)()],U.prototype,`_previewingVoiceId`,void 0),y([(0,n.query)(`md-menu`)],U.prototype,`_menuEl`,void 0),y([(0,n.query)(`audio`)],U.prototype,`_audioEl`,void 0),U=y([(0,n.customElement)(`ui-voice-picker`)],U);var W=class extends t.LitElement{constructor(...e){super(...e),this.speed=50,this.barCount=60,this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128,this.active=!0,this._animationFrameId=0,this._lastTime=0,this._bars=[],this._seed=Math.random(),this._dataIndex=0}static{this.styles=t.css`
|
|
884
884
|
:host {
|
|
885
885
|
display: block;
|
|
886
886
|
width: 100%;
|
|
@@ -902,7 +902,7 @@
|
|
|
902
902
|
<div class="container" style="height: ${this.height}px;">
|
|
903
903
|
<canvas></canvas>
|
|
904
904
|
</div>
|
|
905
|
-
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._canvas&&this._container&&this._populateInitialBars(),this._startAnimation()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t)}_seededRandom(e){let t=Math.sin(this._seed*1e4+e*137.5)*1e4;return t-Math.floor(t)}_populateInitialBars(){let e=this._container.getBoundingClientRect(),t=this.barWidth+this.barGap,n=e.width,r=0;for(this._bars=[];n>-t;)this._bars.push({x:n,height:.2+this._seededRandom(r++)*.6}),n-=t;this._bars.reverse()}_startAnimation(){this._lastTime=performance.now();let e=t=>{if(!this._canvas)return;let n=this._canvas.getContext(`2d`);if(!n)return;let r=this._lastTime?(t-this._lastTime)/1e3:0;this._lastTime=t;let i=this._canvas.getBoundingClientRect();n.clearRect(0,0,i.width,i.height);let a=this.barColor;a||=getComputedStyle(this).getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`;let o=this.barWidth+this.barGap,s=this.active?this.speed:0;for(let e=0;e<this._bars.length;e++)this._bars[e].x-=s*r,this.active||(this._bars[e].height+=(.05-this._bars[e].height)*.15);for(this._bars=this._bars.filter(e=>e.x+this.barWidth>-o);this._bars.length===0||this._bars[this._bars.length-1].x<i.width;){let e=this._bars[this._bars.length-1],t=e?e.x+o:i.width,n;if(this.data&&this.data.length>0)n=this.data[this._dataIndex%this.data.length]||.1,this._dataIndex=(this._dataIndex+1)%this.data.length;else if(this.analyserNode){(!this._dataArray||this._dataArray.length!==this.analyserNode.frequencyBinCount)&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),this.analyserNode.getByteFrequencyData(this._dataArray);let e=0,t=Math.min(this._dataArray.length,50);for(let n=0;n<t;n++)e+=this._dataArray[n];let r=e/t/255;n=Math.max(.1,r**1.5*1.5)}else{let e=Date.now()/1e3,t=this._bars.length+e*.01,r=Math.sin(t*.1)*.2,i=Math.cos(t*.05)*.15,a=this._seededRandom(t)*.4;n=Math.max(.1,Math.min(.9,.3+r+i+a))}if(this._bars.push({x:t,height:n}),this._bars.length>this.barCount*2)break}let c=i.height/2;for(let e of this._bars)if(e.x<i.width&&e.x+this.barWidth>0){let t=Math.max(this.barHeight,e.height*i.height*.8),r=c-t/2;n.fillStyle=a,n.globalAlpha=.3+e.height*.7,this.barRadius>0?(n.beginPath(),n.roundRect(e.x,r,this.barWidth,t,this.barRadius),n.fill()):n.fillRect(e.x,r,this.barWidth,t)}n.globalAlpha=1,this.fadeEdges&&this.fadeWidth>0&&
|
|
905
|
+
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._canvas&&this._container&&this._populateInitialBars(),this._startAnimation()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t)}_seededRandom(e){let t=Math.sin(this._seed*1e4+e*137.5)*1e4;return t-Math.floor(t)}_populateInitialBars(){let e=this._container.getBoundingClientRect(),t=this.barWidth+this.barGap,n=e.width,r=0;for(this._bars=[];n>-t;)this._bars.push({x:n,height:.2+this._seededRandom(r++)*.6}),n-=t;this._bars.reverse()}_startAnimation(){this._lastTime=performance.now();let e=t=>{if(!this._canvas)return;let n=this._canvas.getContext(`2d`);if(!n)return;let r=this._lastTime?(t-this._lastTime)/1e3:0;this._lastTime=t;let i=this._canvas.getBoundingClientRect();n.clearRect(0,0,i.width,i.height);let a=this.barColor;a||=getComputedStyle(this).getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`;let o=this.barWidth+this.barGap,s=this.active?this.speed:0;for(let e=0;e<this._bars.length;e++)this._bars[e].x-=s*r,this.active||(this._bars[e].height+=(.05-this._bars[e].height)*.15);for(this._bars=this._bars.filter(e=>e.x+this.barWidth>-o);this._bars.length===0||this._bars[this._bars.length-1].x<i.width;){let e=this._bars[this._bars.length-1],t=e?e.x+o:i.width,n;if(this.data&&this.data.length>0)n=this.data[this._dataIndex%this.data.length]||.1,this._dataIndex=(this._dataIndex+1)%this.data.length;else if(this.analyserNode){(!this._dataArray||this._dataArray.length!==this.analyserNode.frequencyBinCount)&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),this.analyserNode.getByteFrequencyData(this._dataArray);let e=0,t=Math.min(this._dataArray.length,50);for(let n=0;n<t;n++)e+=this._dataArray[n];let r=e/t/255;n=Math.max(.1,r**1.5*1.5)}else{let e=Date.now()/1e3,t=this._bars.length+e*.01,r=Math.sin(t*.1)*.2,i=Math.cos(t*.05)*.15,a=this._seededRandom(t)*.4;n=Math.max(.1,Math.min(.9,.3+r+i+a))}if(this._bars.push({x:t,height:n}),this._bars.length>this.barCount*2)break}let c=i.height/2;for(let e of this._bars)if(e.x<i.width&&e.x+this.barWidth>0){let t=Math.max(this.barHeight,e.height*i.height*.8),r=c-t/2;n.fillStyle=a,n.globalAlpha=.3+e.height*.7,this.barRadius>0?(n.beginPath(),n.roundRect(e.x,r,this.barWidth,t,this.barRadius),n.fill()):n.fillRect(e.x,r,this.barWidth,t)}n.globalAlpha=1,this.fadeEdges&&this.fadeWidth>0&&T(n,i.width,i.height,this.fadeWidth),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}};y([(0,n.property)({type:Number})],W.prototype,`speed`,void 0),y([(0,n.property)({type:Number})],W.prototype,`barCount`,void 0),y([(0,n.property)({type:Number})],W.prototype,`barWidth`,void 0),y([(0,n.property)({type:Number})],W.prototype,`barHeight`,void 0),y([(0,n.property)({type:Number})],W.prototype,`barGap`,void 0),y([(0,n.property)({type:Number})],W.prototype,`barRadius`,void 0),y([(0,n.property)({type:String})],W.prototype,`barColor`,void 0),y([(0,n.property)({type:Boolean})],W.prototype,`fadeEdges`,void 0),y([(0,n.property)({type:Number})],W.prototype,`fadeWidth`,void 0),y([(0,n.property)({type:Number})],W.prototype,`height`,void 0),y([(0,n.property)({type:Array})],W.prototype,`data`,void 0),y([(0,n.property)({attribute:!1})],W.prototype,`analyserNode`,void 0),y([(0,n.property)({type:Boolean})],W.prototype,`active`,void 0),y([(0,n.query)(`canvas`)],W.prototype,`_canvas`,void 0),y([(0,n.query)(`.container`)],W.prototype,`_container`,void 0),W=y([(0,n.customElement)(`ui-scrolling-waveform`)],W);var G=class extends t.LitElement{constructor(...e){super(...e),this.title=`Component`,this.description=``,this.mode=`preview`}static{this.styles=t.css`
|
|
906
906
|
:host {
|
|
907
907
|
display: block;
|
|
908
908
|
background: var(--md-sys-color-surface, #ffffff);
|
|
@@ -1026,7 +1026,7 @@
|
|
|
1026
1026
|
class="code-panel ${this.mode===`code`?`active`:``}"
|
|
1027
1027
|
><code><slot name="code"></slot></code></pre>
|
|
1028
1028
|
</div>
|
|
1029
|
-
`}};
|
|
1029
|
+
`}};y([(0,n.property)({type:String})],G.prototype,`title`,void 0),y([(0,n.property)({type:String})],G.prototype,`description`,void 0),y([(0,n.property)({type:String})],G.prototype,`mode`,void 0),G=y([(0,n.customElement)(`ui-showcase-card`)],G);var K=class extends t.LitElement{constructor(...e){super(...e),this.text=``,this.duration=2,this.delay=0,this.repeat=!0,this.repeatDelay=.5,this.startOnView=!0,this.once=!1,this.spread=2,this._isInView=!1}static{this.styles=t.css`
|
|
1030
1030
|
:host {
|
|
1031
1031
|
display: inline-block;
|
|
1032
1032
|
font-family: inherit;
|
|
@@ -1084,11 +1084,11 @@
|
|
|
1084
1084
|
<span class="${e?`active`:``}" style="${o}">
|
|
1085
1085
|
${this.text}
|
|
1086
1086
|
</span>
|
|
1087
|
-
`}};
|
|
1087
|
+
`}};y([(0,n.property)({type:String})],K.prototype,`text`,void 0),y([(0,n.property)({type:Number})],K.prototype,`duration`,void 0),y([(0,n.property)({type:Number})],K.prototype,`delay`,void 0),y([(0,n.property)({type:Boolean})],K.prototype,`repeat`,void 0),y([(0,n.property)({type:Number})],K.prototype,`repeatDelay`,void 0),y([(0,n.property)({type:Boolean})],K.prototype,`startOnView`,void 0),y([(0,n.property)({type:Boolean})],K.prototype,`once`,void 0),y([(0,n.property)({type:Number})],K.prototype,`spread`,void 0),y([(0,n.property)({type:String})],K.prototype,`color`,void 0),y([(0,n.property)({type:String})],K.prototype,`shimmerColor`,void 0),y([(0,n.state)()],K.prototype,`_isInView`,void 0),K=y([(0,n.customElement)(`ui-shimmering-text`)],K);let q=A(`ui-speech-context`);var J=class extends t.LitElement{constructor(...e){super(...e),this._context={state:`idle`,transcript:``,partialTranscript:``,start:()=>this.start(),stop:()=>this.stop(),cancel:()=>this.cancel()},this.state=`idle`,this.simulation=!1,this.manual=!1,this.transcript=``,this.partialTranscript=``,this._fakeTranscript=[`I`,` am`,` recording`,` a`,` message`,` using`,` atomic`,` components...`]}static{this.styles=t.css`
|
|
1088
1088
|
:host {
|
|
1089
1089
|
display: contents;
|
|
1090
1090
|
}
|
|
1091
|
-
`}willUpdate(e){let t={};e.has(`state`)&&(t.state=this.state),e.has(`transcript`)&&(t.transcript=this.transcript),e.has(`partialTranscript`)&&(t.partialTranscript=this.partialTranscript),Object.keys(t).length>0&&this._updateContext(t)}async start(){if(this._context.state===`idle`){if(this.manual){this.dispatchEvent(new CustomEvent(`speech-request-start`,{bubbles:!0,composed:!0}));return}try{if(this._updateContext({state:`connecting`}),this.simulation)this._analyser=
|
|
1091
|
+
`}willUpdate(e){let t={};e.has(`state`)&&(t.state=this.state),e.has(`transcript`)&&(t.transcript=this.transcript),e.has(`partialTranscript`)&&(t.partialTranscript=this.partialTranscript),Object.keys(t).length>0&&this._updateContext(t)}async start(){if(this._context.state===`idle`){if(this.manual){this.dispatchEvent(new CustomEvent(`speech-request-start`,{bubbles:!0,composed:!0}));return}try{if(this._updateContext({state:`connecting`}),this.simulation)this._analyser=x();else{this._stream=await navigator.mediaDevices.getUserMedia({audio:!0}),this._audioCtx||=new(window.AudioContext||window.webkitAudioContext);let e=this._audioCtx.createMediaStreamSource(this._stream);this._analyser=this._audioCtx.createAnalyser(),this._analyser.fftSize=256,e.connect(this._analyser)}if(this._updateContext({state:`recording`,analyserNode:this._analyser,transcript:``,partialTranscript:this.simulation?`Listening...`:``}),this.simulation){let e=0;this._transcriptInterval=setInterval(()=>{if(e<this._fakeTranscript.length){e===0&&this._updateContext({partialTranscript:``});let t=this._context.partialTranscript;this._updateContext({partialTranscript:t+this._fakeTranscript[e]}),e++}},500)}this.dispatchEvent(new CustomEvent(`speech-start`,{bubbles:!0,composed:!0,detail:{stream:this._stream}}))}catch(e){console.error(`Failed to start speech recording`,e),this._updateContext({state:`error`,error:e.message})}}}stop(){if(this._context.state===`recording`){if(this.manual){this.dispatchEvent(new CustomEvent(`speech-request-stop`,{bubbles:!0,composed:!0}));return}this._transcriptInterval&&clearInterval(this._transcriptInterval),this._cleanupStream(),this._updateContext({state:`processing`,transcript:this.simulation?this._context.partialTranscript:this.transcript,partialTranscript:``}),this.dispatchEvent(new CustomEvent(`speech-stop`,{bubbles:!0,composed:!0})),this.simulation&&setTimeout(()=>{this._context.state===`processing`&&(this._updateContext({state:`success`}),setTimeout(()=>this.cancel(),2e3))},1500)}}cancel(){this._transcriptInterval&&clearInterval(this._transcriptInterval),this._cleanupStream(),this._updateContext({state:`idle`,transcript:``,partialTranscript:``,analyserNode:void 0}),this.dispatchEvent(new CustomEvent(`speech-cancel`,{bubbles:!0,composed:!0}))}_cleanupStream(){this._stream&&=(this._stream.getTracks().forEach(e=>e.stop()),void 0)}_updateContext(e){this._context={...this._context,...e},e.state&&(this.state=e.state),this.dispatchEvent(new CustomEvent(`state-change`,{bubbles:!0,composed:!0,detail:this._context}))}render(){return t.html`<slot></slot>`}};y([P({context:q}),(0,n.state)()],J.prototype,`_context`,void 0),y([(0,n.property)({type:String})],J.prototype,`state`,void 0),y([(0,n.property)({type:Boolean})],J.prototype,`simulation`,void 0),y([(0,n.property)({type:Boolean})],J.prototype,`manual`,void 0),y([(0,n.property)({type:String})],J.prototype,`transcript`,void 0),y([(0,n.property)({type:String})],J.prototype,`partialTranscript`,void 0),J=y([(0,n.customElement)(`ui-speech-provider`)],J);var Y=class extends t.LitElement{constructor(...e){super(...e),this.size=`default`}static{this.styles=t.css`
|
|
1092
1092
|
:host {
|
|
1093
1093
|
display: inline-block;
|
|
1094
1094
|
}
|
|
@@ -1142,7 +1142,7 @@
|
|
|
1142
1142
|
>
|
|
1143
1143
|
<md-icon>${i}</md-icon>
|
|
1144
1144
|
</md-filled-icon-button>
|
|
1145
|
-
`}_handleClick(){this._context&&(this._context.state===`idle`?this._context.start():this._context.state===`recording`&&this._context.stop())}};
|
|
1145
|
+
`}_handleClick(){this._context&&(this._context.state===`idle`?this._context.start():this._context.state===`recording`&&this._context.stop())}};y([F({context:q,subscribe:!0})],Y.prototype,`_context`,void 0),y([(0,n.property)({type:String})],Y.prototype,`size`,void 0),Y=y([(0,n.customElement)(`ui-speech-record-button`)],Y);var X=class extends t.LitElement{static{this.styles=t.css`
|
|
1146
1146
|
:host {
|
|
1147
1147
|
display: inline-block;
|
|
1148
1148
|
opacity: 0;
|
|
@@ -1166,7 +1166,7 @@
|
|
|
1166
1166
|
<md-icon-button @click=${this._handleClick}>
|
|
1167
1167
|
<md-icon>close</md-icon>
|
|
1168
1168
|
</md-icon-button>
|
|
1169
|
-
`):t.html``}_handleClick(){this._context?.cancel()}};
|
|
1169
|
+
`):t.html``}_handleClick(){this._context?.cancel()}};y([F({context:q,subscribe:!0})],X.prototype,`_context`,void 0),X=y([(0,n.customElement)(`ui-speech-cancel-button`)],X);var Z=class extends t.LitElement{constructor(...e){super(...e),this.placeholder=`Jot down some thoughts...`}static{this.styles=t.css`
|
|
1170
1170
|
:host {
|
|
1171
1171
|
display: inline-flex;
|
|
1172
1172
|
align-items: center;
|
|
@@ -1223,7 +1223,42 @@
|
|
|
1223
1223
|
barColor="var(--ui-speech-wave-color, currentColor)"
|
|
1224
1224
|
></ui-live-waveform>
|
|
1225
1225
|
</div>
|
|
1226
|
-
`}};
|
|
1226
|
+
`}};y([F({context:q,subscribe:!0})],Z.prototype,`_context`,void 0),y([(0,n.property)({type:String})],Z.prototype,`placeholder`,void 0),Z=y([(0,n.customElement)(`ui-speech-preview`)],Z);var Q=class extends t.LitElement{static{this.styles=t.css`
|
|
1227
|
+
:host {
|
|
1228
|
+
display: flex;
|
|
1229
|
+
align-items: center;
|
|
1230
|
+
gap: 8px;
|
|
1231
|
+
width: 100%;
|
|
1232
|
+
box-sizing: border-box;
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
md-slider {
|
|
1236
|
+
flex: 1;
|
|
1237
|
+
min-width: 0; /* Prevent flex overflow */
|
|
1238
|
+
width: 100%;
|
|
1239
|
+
--md-slider-inactive-track-color: var(
|
|
1240
|
+
--md-sys-color-outline-variant,
|
|
1241
|
+
#c4c7c5
|
|
1242
|
+
);
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
md-icon-button {
|
|
1246
|
+
color: var(--md-sys-color-on-surface-variant, #444);
|
|
1247
|
+
}
|
|
1248
|
+
`}render(){let e=this.playerState?.volume??1,n=this.playerState?.muted??!1,r=`volume_up`;return n||e===0?r=`volume_off`:e<.5&&(r=`volume_down`),t.html`
|
|
1249
|
+
<md-icon-button @click="${this._toggleMute}" part="button">
|
|
1250
|
+
<md-icon>${r}</md-icon>
|
|
1251
|
+
</md-icon-button>
|
|
1252
|
+
<md-slider
|
|
1253
|
+
part="slider"
|
|
1254
|
+
min="0"
|
|
1255
|
+
max="1"
|
|
1256
|
+
value="${n?0:e}"
|
|
1257
|
+
step="0.01"
|
|
1258
|
+
?disabled="${!this.playerState?.src}"
|
|
1259
|
+
@input="${this._handleInput}"
|
|
1260
|
+
></md-slider>
|
|
1261
|
+
`}_handleInput(e){let t=e.target;this.playerState&&this.playerState.setVolume(t.value)}_toggleMute(){this.playerState&&this.playerState.toggleMute()}};y([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],Q.prototype,`playerState`,void 0),Q=y([(0,n.customElement)(`ui-audio-volume-slider`)],Q);var $=class extends t.LitElement{constructor(...e){super(...e),this.agentState=null,this.inputVolume=0,this.outputVolume=0,this.volumeMode=`auto`,this.seed=Math.floor(Math.random()*2**32),this._animationFrameId=0,this._animSpeed=.1,this._curIn=0,this._curOut=0,this._textureLoader=new d.TextureLoader,this._lastTime=0,this._vertexShader=`
|
|
1227
1262
|
uniform float uTime;
|
|
1228
1263
|
uniform sampler2D uPerlinTexture;
|
|
1229
1264
|
varying vec2 vUv;
|
|
@@ -1403,39 +1438,4 @@ void main() {
|
|
|
1403
1438
|
width: 100%;
|
|
1404
1439
|
height: 100%;
|
|
1405
1440
|
}
|
|
1406
|
-
`}render(){return t.html`<div class="container"></div>`}firstUpdated(){this._initThree()}updated(e){e.has(`colors`)&&this._updateColors()}_updateColors(){if(!(!this._targetColor1||!this._targetColor2))if(this.colors&&this.colors.length===2)this._targetColor1.set(this.colors[0]),this._targetColor2.set(this.colors[1]);else{let e=getComputedStyle(this),t=e.getPropertyValue(`--md-sys-color-primary`).trim()||`#CADCFC`,n=e.getPropertyValue(`--md-sys-color-secondary`).trim()||`#A0B9D1`;this._targetColor1.set(t),this._targetColor2.set(n)}}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._resizeObserver&&this._resizeObserver.disconnect(),this._renderer&&this._renderer.dispose(),this._mesh&&(this._mesh.geometry.dispose(),this._mesh.material.dispose())}async _initThree(){if(!this._container)return;this._targetColor1=new
|
|
1407
|
-
:host {
|
|
1408
|
-
display: flex;
|
|
1409
|
-
align-items: center;
|
|
1410
|
-
gap: 8px;
|
|
1411
|
-
width: 100%;
|
|
1412
|
-
box-sizing: border-box;
|
|
1413
|
-
}
|
|
1414
|
-
|
|
1415
|
-
md-slider {
|
|
1416
|
-
flex: 1;
|
|
1417
|
-
min-width: 0; /* Prevent flex overflow */
|
|
1418
|
-
width: 100%;
|
|
1419
|
-
--md-slider-inactive-track-color: var(
|
|
1420
|
-
--md-sys-color-outline-variant,
|
|
1421
|
-
#c4c7c5
|
|
1422
|
-
);
|
|
1423
|
-
}
|
|
1424
|
-
|
|
1425
|
-
md-icon-button {
|
|
1426
|
-
color: var(--md-sys-color-on-surface-variant, #444);
|
|
1427
|
-
}
|
|
1428
|
-
`}render(){let e=this.playerState?.volume??1,n=this.playerState?.muted??!1,r=`volume_up`;return n||e===0?r=`volume_off`:e<.5&&(r=`volume_down`),t.html`
|
|
1429
|
-
<md-icon-button @click="${this._toggleMute}" part="button">
|
|
1430
|
-
<md-icon>${r}</md-icon>
|
|
1431
|
-
</md-icon-button>
|
|
1432
|
-
<md-slider
|
|
1433
|
-
part="slider"
|
|
1434
|
-
min="0"
|
|
1435
|
-
max="1"
|
|
1436
|
-
value="${n?0:e}"
|
|
1437
|
-
step="0.01"
|
|
1438
|
-
?disabled="${!this.playerState?.src}"
|
|
1439
|
-
@input="${this._handleInput}"
|
|
1440
|
-
></md-slider>
|
|
1441
|
-
`}_handleInput(e){let t=e.target;this.playerState&&this.playerState.setVolume(t.value)}_toggleMute(){this.playerState&&this.playerState.toggleMute()}};b([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],$.prototype,`playerState`,void 0),$=b([(0,n.customElement)(`ui-audio-volume-slider`)],$),Object.defineProperty(e,`ScreamVoiceButton`,{enumerable:!0,get:function(){return x}}),Object.defineProperty(e,`UiAudioPlayButton`,{enumerable:!0,get:function(){return R}}),Object.defineProperty(e,`UiAudioPlayer`,{enumerable:!0,get:function(){return V}}),Object.defineProperty(e,`UiAudioProgressSlider`,{enumerable:!0,get:function(){return z}}),Object.defineProperty(e,`UiAudioProvider`,{enumerable:!0,get:function(){return L}}),Object.defineProperty(e,`UiAudioTimeDisplay`,{enumerable:!0,get:function(){return B}}),Object.defineProperty(e,`UiAudioVolumeSlider`,{enumerable:!0,get:function(){return $}}),Object.defineProperty(e,`UiLiveWaveform`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(e,`UiMicSelector`,{enumerable:!0,get:function(){return H}}),Object.defineProperty(e,`UiOrb`,{enumerable:!0,get:function(){return Q}}),Object.defineProperty(e,`UiScrollingWaveform`,{enumerable:!0,get:function(){return W}}),Object.defineProperty(e,`UiShimmeringText`,{enumerable:!0,get:function(){return K}}),Object.defineProperty(e,`UiShowcaseCard`,{enumerable:!0,get:function(){return G}}),Object.defineProperty(e,`UiSpeechCancelButton`,{enumerable:!0,get:function(){return X}}),Object.defineProperty(e,`UiSpeechPreview`,{enumerable:!0,get:function(){return Z}}),Object.defineProperty(e,`UiSpeechProvider`,{enumerable:!0,get:function(){return J}}),Object.defineProperty(e,`UiSpeechRecordButton`,{enumerable:!0,get:function(){return Y}}),Object.defineProperty(e,`UiVoiceButton`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(e,`UiVoicePicker`,{enumerable:!0,get:function(){return U}}),Object.defineProperty(e,`UiWaveform`,{enumerable:!0,get:function(){return D}}),e.audioPlayerContext=I,e.speechContext=q});
|
|
1441
|
+
`}render(){return t.html`<div class="container"></div>`}firstUpdated(){this._initThree()}updated(e){e.has(`colors`)&&this._updateColors()}_updateColors(){if(!(!this._targetColor1||!this._targetColor2))if(this.colors&&this.colors.length===2)this._targetColor1.set(this.colors[0]),this._targetColor2.set(this.colors[1]);else{let e=getComputedStyle(this),t=e.getPropertyValue(`--md-sys-color-primary`).trim()||`#CADCFC`,n=e.getPropertyValue(`--md-sys-color-secondary`).trim()||`#A0B9D1`;this._targetColor1.set(t),this._targetColor2.set(n)}}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._resizeObserver&&this._resizeObserver.disconnect(),this._renderer&&this._renderer.dispose(),this._mesh&&(this._mesh.geometry.dispose(),this._mesh.material.dispose())}async _initThree(){if(!this._container)return;this._targetColor1=new d.Color,this._targetColor2=new d.Color,this._updateColors();try{this._perlinNoiseTexture=await this._textureLoader.loadAsync(`https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png`),this._perlinNoiseTexture.wrapS=d.RepeatWrapping,this._perlinNoiseTexture.wrapT=d.RepeatWrapping}catch(e){console.warn(`Failed to load perlin noise texture for orb.`,e);return}let e=this._container.clientWidth,t=this._container.clientHeight;this._scene=new d.Scene,this._camera=new d.OrthographicCamera(-5,5,5,-5,.1,10),this._camera.position.z=1,this._renderer=new d.WebGLRenderer({alpha:!0,antialias:!0,premultipliedAlpha:!0}),this._renderer.setSize(e,t),this._renderer.setPixelRatio(window.devicePixelRatio),this._container.appendChild(this._renderer.domElement);let n=this._splitmix32(this.seed),r=new Float32Array(Array.from({length:7},()=>n()*Math.PI*2)),i=document.documentElement.classList.contains(`dark`)||window.matchMedia(`(prefers-color-scheme: dark)`).matches,a={uColor1:new d.Uniform(this._targetColor1),uColor2:new d.Uniform(this._targetColor2),uOffsets:{value:r},uPerlinTexture:new d.Uniform(this._perlinNoiseTexture),uTime:new d.Uniform(0),uAnimation:new d.Uniform(.1),uInverted:new d.Uniform(i?1:0),uInputVolume:new d.Uniform(0),uOutputVolume:new d.Uniform(0),uOpacity:new d.Uniform(0)},o=new d.CircleGeometry(3.5,64),s=new d.ShaderMaterial({uniforms:a,vertexShader:this._vertexShader,fragmentShader:this._fragmentShader,transparent:!0});this._mesh=new d.Mesh(o,s),this._scene.add(this._mesh),this._resizeObserver=new ResizeObserver(()=>{this._container&&this._renderer&&this._renderer.setSize(this._container.clientWidth,this._container.clientHeight)}),this._resizeObserver.observe(this._container),new MutationObserver(()=>{if(!this._mesh)return;let e=document.documentElement.classList.contains(`dark`);this._mesh.material.uniforms.uInverted.value=e?1:0,this._updateColors()}).observe(document.documentElement,{attributes:!0,attributeFilter:[`class`]}),this._lastTime=performance.now(),this._animate()}_animate(){if(this._animationFrameId=requestAnimationFrame(()=>this._animate()),!this._mesh||!this._renderer||!this._scene||!this._camera)return;let e=performance.now(),t=(e-this._lastTime)/1e3;this._lastTime=e;let n=this._mesh.material.uniforms;n.uTime.value+=t*.5,n.uOpacity.value<1&&(n.uOpacity.value=Math.min(1,n.uOpacity.value+t*2));let r=0,i=.3;if(this.volumeMode===`manual`)r=this._clamp01(this.inputVolume),i=this._clamp01(this.outputVolume);else{let e=n.uTime.value*2;if(this.agentState===null)r=0,i=.3;else if(this.agentState===`listening`)r=this._clamp01(.55+Math.sin(e*3.2)*.35),i=.45;else if(this.agentState===`talking`)r=this._clamp01(.65+Math.sin(e*4.8)*.22),i=this._clamp01(.75+Math.sin(e*3.6)*.22);else{let t=.38+.07*Math.sin(e*.7),n=.05*Math.sin(e*2.1)*Math.sin(e*.37+1.2);r=this._clamp01(t+n),i=this._clamp01(.48+.12*Math.sin(e*1.05+.6))}}this._curIn+=(r-this._curIn)*.2,this._curOut+=(i-this._curOut)*.2;let a=.1+(1-(this._curOut-1)**2)*.9;this._animSpeed+=(a-this._animSpeed)*.12,n.uAnimation.value+=t*this._animSpeed,n.uInputVolume.value=this._curIn,n.uOutputVolume.value=this._curOut,n.uColor1.value.lerp(this._targetColor1,.08),n.uColor2.value.lerp(this._targetColor2,.08),this._renderer.render(this._scene,this._camera)}_splitmix32(e){return function(){e|=0,e=e+2654435769|0;let t=e^e>>>16;return t=Math.imul(t,569420461),t^=t>>>15,t=Math.imul(t,1935289751),((t^=t>>>15)>>>0)/4294967296}}_clamp01(e){return Number.isFinite(e)?Math.min(1,Math.max(0,e)):0}};y([(0,n.property)({type:Array})],$.prototype,`colors`,void 0),y([(0,n.property)({type:String})],$.prototype,`agentState`,void 0),y([(0,n.property)({type:Number})],$.prototype,`inputVolume`,void 0),y([(0,n.property)({type:Number})],$.prototype,`outputVolume`,void 0),y([(0,n.property)({type:String})],$.prototype,`volumeMode`,void 0),y([(0,n.property)({type:Number})],$.prototype,`seed`,void 0),y([(0,n.query)(`.container`)],$.prototype,`_container`,void 0),$=y([(0,n.customElement)(`ui-orb`)],$),Object.defineProperty(e,`ScreamVoiceButton`,{enumerable:!0,get:function(){return b}}),Object.defineProperty(e,`UiAudioPlayButton`,{enumerable:!0,get:function(){return R}}),Object.defineProperty(e,`UiAudioPlayer`,{enumerable:!0,get:function(){return V}}),Object.defineProperty(e,`UiAudioProgressSlider`,{enumerable:!0,get:function(){return z}}),Object.defineProperty(e,`UiAudioProvider`,{enumerable:!0,get:function(){return L}}),Object.defineProperty(e,`UiAudioTimeDisplay`,{enumerable:!0,get:function(){return B}}),Object.defineProperty(e,`UiAudioVolumeSlider`,{enumerable:!0,get:function(){return Q}}),Object.defineProperty(e,`UiLiveWaveform`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(e,`UiMicSelector`,{enumerable:!0,get:function(){return H}}),Object.defineProperty(e,`UiOrb`,{enumerable:!0,get:function(){return $}}),Object.defineProperty(e,`UiScrollingWaveform`,{enumerable:!0,get:function(){return W}}),Object.defineProperty(e,`UiShimmeringText`,{enumerable:!0,get:function(){return K}}),Object.defineProperty(e,`UiShowcaseCard`,{enumerable:!0,get:function(){return G}}),Object.defineProperty(e,`UiSpeechCancelButton`,{enumerable:!0,get:function(){return X}}),Object.defineProperty(e,`UiSpeechPreview`,{enumerable:!0,get:function(){return Z}}),Object.defineProperty(e,`UiSpeechProvider`,{enumerable:!0,get:function(){return J}}),Object.defineProperty(e,`UiSpeechRecordButton`,{enumerable:!0,get:function(){return Y}}),Object.defineProperty(e,`UiVoiceButton`,{enumerable:!0,get:function(){return D}}),Object.defineProperty(e,`UiVoicePicker`,{enumerable:!0,get:function(){return U}}),Object.defineProperty(e,`UiWaveform`,{enumerable:!0,get:function(){return O}}),e.applyCanvasEdgeFade=T,e.audioPlayerContext=I,e.createAudioAnalyser=S,e.createMockAnalyser=x,e.generateRandomAudioData=w,e.getNormalizedFrequencyData=C,e.speechContext=q});
|
|
@@ -18,19 +18,49 @@ function e() {
|
|
|
18
18
|
};
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
|
+
* Creates and configures an AnalyserNode from a given MediaStream.
|
|
22
|
+
*
|
|
23
|
+
* @param mediaStream The stream to analyze (e.g. from getUserMedia)
|
|
24
|
+
* @param options Configuration for the AnalyserNode
|
|
25
|
+
* @returns An object containing the analyser, the context, and a cleanup function.
|
|
26
|
+
*/
|
|
27
|
+
function t(e, t = {}) {
|
|
28
|
+
let n = new (window.AudioContext || window.webkitAudioContext)(), r = n.createMediaStreamSource(e), i = n.createAnalyser();
|
|
29
|
+
return t.fftSize !== void 0 && (i.fftSize = t.fftSize), t.smoothingTimeConstant !== void 0 && (i.smoothingTimeConstant = t.smoothingTimeConstant), t.minDecibels !== void 0 && (i.minDecibels = t.minDecibels), t.maxDecibels !== void 0 && (i.maxDecibels = t.maxDecibels), r.connect(i), {
|
|
30
|
+
analyser: i,
|
|
31
|
+
audioContext: n,
|
|
32
|
+
cleanup: () => {
|
|
33
|
+
r.disconnect(), n.state !== "closed" && n.close();
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
21
38
|
* Normalizes raw frequency data from the AnalyserNode into an array of values between 0.0 and 1.0.
|
|
22
39
|
*
|
|
23
40
|
* @param analyser The AnalyserNode to read from
|
|
24
41
|
* @param dataArray A pre-allocated Uint8Array to hold the raw byte data
|
|
25
42
|
* @returns An array of normalized numbers (0.0 to 1.0)
|
|
26
43
|
*/
|
|
27
|
-
function
|
|
44
|
+
function n(e, t) {
|
|
28
45
|
e.getByteFrequencyData(t);
|
|
29
46
|
let n = [];
|
|
30
47
|
for (let e = 0; e < t.length; e++) n.push(t[e] / 255);
|
|
31
48
|
return n;
|
|
32
49
|
}
|
|
33
50
|
/**
|
|
51
|
+
* Generates an array of random normalized values.
|
|
52
|
+
* Useful for "processing" states when no real audio is available.
|
|
53
|
+
*
|
|
54
|
+
* @param count The number of values to generate
|
|
55
|
+
* @param modifier A multiplier to limit the random scale (e.g. 0.5)
|
|
56
|
+
* @returns Array of random normalized numbers
|
|
57
|
+
*/
|
|
58
|
+
function r(e, t = .5) {
|
|
59
|
+
let n = [];
|
|
60
|
+
for (let r = 0; r < e; r++) n.push(Math.random() * t);
|
|
61
|
+
return n;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
34
64
|
* Creates an edge-fade gradient over a canvas to smoothly blend the left and right edges.
|
|
35
65
|
*
|
|
36
66
|
* @param ctx The canvas 2D rendering context
|
|
@@ -38,9 +68,9 @@ function t(e, t) {
|
|
|
38
68
|
* @param height The logical height of the canvas
|
|
39
69
|
* @param fadeWidth The physical width in pixels of the fade effect
|
|
40
70
|
*/
|
|
41
|
-
function
|
|
71
|
+
function i(e, t, n, r) {
|
|
42
72
|
if (r <= 0 || t <= 0) return;
|
|
43
73
|
let i = e.createLinearGradient(0, 0, t, 0), a = Math.min(.2, r / t);
|
|
44
74
|
i.addColorStop(0, "rgba(0,0,0,0)"), i.addColorStop(a, "rgba(0,0,0,1)"), i.addColorStop(1 - a, "rgba(0,0,0,1)"), i.addColorStop(1, "rgba(0,0,0,0)"), e.globalCompositeOperation = "destination-in", e.fillStyle = i, e.fillRect(0, 0, t, n), e.globalCompositeOperation = "source-over";
|
|
45
75
|
}
|
|
46
|
-
export {
|
|
76
|
+
export { i as applyCanvasEdgeFade, t as createAudioAnalyser, e as createMockAnalyser, r as generateRandomAudioData, n as getNormalizedFrequencyData };
|