@ghchinoy/lit-audio-ui 0.3.2 → 0.3.3
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.
|
@@ -79,10 +79,16 @@ var c = class extends t {
|
|
|
79
79
|
--md-menu-container-shape: 12px;
|
|
80
80
|
min-width: 280px;
|
|
81
81
|
font-family: inherit;
|
|
82
|
+
/* Force typescale fonts to inherit project font */
|
|
83
|
+
--md-sys-typescale-body-medium-font: inherit;
|
|
84
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
85
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
82
86
|
}
|
|
83
87
|
|
|
84
88
|
md-menu-item {
|
|
85
89
|
font-family: inherit;
|
|
90
|
+
--md-menu-item-label-text-font: inherit;
|
|
91
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
86
92
|
}
|
|
87
93
|
|
|
88
94
|
md-menu-item div[slot='headline'] {
|
|
@@ -100,6 +106,8 @@ var c = class extends t {
|
|
|
100
106
|
|
|
101
107
|
md-text-button {
|
|
102
108
|
font-family: inherit;
|
|
109
|
+
--md-text-button-label-text-font: inherit;
|
|
110
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
103
111
|
}
|
|
104
112
|
|
|
105
113
|
.preview-waveform {
|
|
@@ -145,7 +153,7 @@ var c = class extends t {
|
|
|
145
153
|
<md-menu
|
|
146
154
|
id="device-menu"
|
|
147
155
|
anchor="anchor-button"
|
|
148
|
-
positioning="
|
|
156
|
+
positioning="fixed"
|
|
149
157
|
@closed=${() => this._isMenuOpen = !1}
|
|
150
158
|
@opened=${() => this._isMenuOpen = !0}
|
|
151
159
|
>
|
|
@@ -231,7 +239,7 @@ var c = class extends t {
|
|
|
231
239
|
}
|
|
232
240
|
_parseDeviceList(e) {
|
|
233
241
|
let t = e.filter((e) => e.kind === "audioinput").map((e) => {
|
|
234
|
-
let t = e.label || "Microphone
|
|
242
|
+
let t = e.label || "Microphone";
|
|
235
243
|
return t = t.replace(/\s*\([^)]*\)/g, "").trim(), {
|
|
236
244
|
deviceId: e.deviceId,
|
|
237
245
|
label: t,
|
|
@@ -86,8 +86,8 @@ var o = class extends t {
|
|
|
86
86
|
|
|
87
87
|
.code-panel {
|
|
88
88
|
display: none;
|
|
89
|
-
background: #1e1e1e;
|
|
90
|
-
color: #e3e3e3;
|
|
89
|
+
background: var(--md-sys-color-surface-container-highest, #1e1e1e);
|
|
90
|
+
color: var(--md-sys-color-on-surface, #e3e3e3);
|
|
91
91
|
padding: 1.5rem;
|
|
92
92
|
border-radius: 8px;
|
|
93
93
|
overflow-x: auto;
|
|
@@ -95,6 +95,7 @@ var o = class extends t {
|
|
|
95
95
|
font-size: 0.85rem;
|
|
96
96
|
line-height: 1.5;
|
|
97
97
|
margin: 0;
|
|
98
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
98
99
|
}
|
|
99
100
|
|
|
100
101
|
.code-panel.active {
|
|
@@ -13,7 +13,7 @@ var u = class extends i {
|
|
|
13
13
|
start: () => this.start(),
|
|
14
14
|
stop: () => this.stop(),
|
|
15
15
|
cancel: () => this.cancel()
|
|
16
|
-
}, this.state = "idle", this.simulation = !1, this.transcript = "", this.partialTranscript = "", this._fakeTranscript = [
|
|
16
|
+
}, this.state = "idle", this.simulation = !1, this.manual = !1, this.transcript = "", this.partialTranscript = "", this._fakeTranscript = [
|
|
17
17
|
"I",
|
|
18
18
|
" am",
|
|
19
19
|
" recording",
|
|
@@ -36,54 +36,72 @@ var u = class extends i {
|
|
|
36
36
|
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);
|
|
37
37
|
}
|
|
38
38
|
async start() {
|
|
39
|
-
if (this._context.state === "idle")
|
|
40
|
-
if (this.
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
if (this._context.state === "idle") {
|
|
40
|
+
if (this.manual) {
|
|
41
|
+
this.dispatchEvent(new CustomEvent("speech-request-start", {
|
|
42
|
+
bubbles: !0,
|
|
43
|
+
composed: !0
|
|
44
|
+
}));
|
|
45
|
+
return;
|
|
45
46
|
}
|
|
46
|
-
|
|
47
|
-
state: "
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
this.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
47
|
+
try {
|
|
48
|
+
if (this._updateContext({ state: "connecting" }), this.simulation) this._analyser = t();
|
|
49
|
+
else {
|
|
50
|
+
this._stream = await navigator.mediaDevices.getUserMedia({ audio: !0 }), this._audioCtx ||= new (window.AudioContext || window.webkitAudioContext)();
|
|
51
|
+
let e = this._audioCtx.createMediaStreamSource(this._stream);
|
|
52
|
+
this._analyser = this._audioCtx.createAnalyser(), this._analyser.fftSize = 256, e.connect(this._analyser);
|
|
53
|
+
}
|
|
54
|
+
if (this._updateContext({
|
|
55
|
+
state: "recording",
|
|
56
|
+
analyserNode: this._analyser,
|
|
57
|
+
transcript: "",
|
|
58
|
+
partialTranscript: this.simulation ? "Listening..." : ""
|
|
59
|
+
}), this.simulation) {
|
|
60
|
+
let e = 0;
|
|
61
|
+
this._transcriptInterval = setInterval(() => {
|
|
62
|
+
if (e < this._fakeTranscript.length) {
|
|
63
|
+
e === 0 && this._updateContext({ partialTranscript: "" });
|
|
64
|
+
let t = this._context.partialTranscript;
|
|
65
|
+
this._updateContext({ partialTranscript: t + this._fakeTranscript[e] }), e++;
|
|
66
|
+
}
|
|
67
|
+
}, 500);
|
|
68
|
+
}
|
|
69
|
+
this.dispatchEvent(new CustomEvent("speech-start", {
|
|
70
|
+
bubbles: !0,
|
|
71
|
+
composed: !0,
|
|
72
|
+
detail: { stream: this._stream }
|
|
73
|
+
}));
|
|
74
|
+
} catch (e) {
|
|
75
|
+
console.error("Failed to start speech recording", e), this._updateContext({
|
|
76
|
+
state: "error",
|
|
77
|
+
error: e.message
|
|
78
|
+
});
|
|
60
79
|
}
|
|
61
|
-
this.dispatchEvent(new CustomEvent("speech-start", {
|
|
62
|
-
bubbles: !0,
|
|
63
|
-
composed: !0,
|
|
64
|
-
detail: { stream: this._stream }
|
|
65
|
-
}));
|
|
66
|
-
} catch (e) {
|
|
67
|
-
console.error("Failed to start speech recording", e), this._updateContext({
|
|
68
|
-
state: "error",
|
|
69
|
-
error: e.message
|
|
70
|
-
});
|
|
71
80
|
}
|
|
72
81
|
}
|
|
73
82
|
stop() {
|
|
74
|
-
this._context.state === "recording"
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
this.
|
|
83
|
-
|
|
83
|
+
if (this._context.state === "recording") {
|
|
84
|
+
if (this.manual) {
|
|
85
|
+
this.dispatchEvent(new CustomEvent("speech-request-stop", {
|
|
86
|
+
bubbles: !0,
|
|
87
|
+
composed: !0
|
|
88
|
+
}));
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
this._transcriptInterval && clearInterval(this._transcriptInterval), this._cleanupStream(), this._updateContext({
|
|
92
|
+
state: "processing",
|
|
93
|
+
transcript: this.simulation ? this._context.partialTranscript : this.transcript,
|
|
94
|
+
partialTranscript: ""
|
|
95
|
+
}), this.dispatchEvent(new CustomEvent("speech-stop", {
|
|
96
|
+
bubbles: !0,
|
|
97
|
+
composed: !0
|
|
98
|
+
})), this.simulation && setTimeout(() => {
|
|
99
|
+
this._context.state === "processing" && (this._updateContext({ state: "success" }), setTimeout(() => this.cancel(), 2e3));
|
|
100
|
+
}, 1500);
|
|
101
|
+
}
|
|
84
102
|
}
|
|
85
103
|
cancel() {
|
|
86
|
-
clearInterval(this._transcriptInterval), this._cleanupStream(), this._updateContext({
|
|
104
|
+
this._transcriptInterval && clearInterval(this._transcriptInterval), this._cleanupStream(), this._updateContext({
|
|
87
105
|
state: "idle",
|
|
88
106
|
transcript: "",
|
|
89
107
|
partialTranscript: "",
|
|
@@ -110,5 +128,5 @@ var u = class extends i {
|
|
|
110
128
|
return o`<slot></slot>`;
|
|
111
129
|
}
|
|
112
130
|
};
|
|
113
|
-
e([n({ context: r }), l()], u.prototype, "_context", void 0), e([c({ type: String })], u.prototype, "state", void 0), e([c({ type: Boolean })], u.prototype, "simulation", void 0), e([c({ type: String })], u.prototype, "transcript", void 0), e([c({ type: String })], u.prototype, "partialTranscript", void 0), u = e([s("ui-speech-provider")], u);
|
|
131
|
+
e([n({ context: r }), l()], u.prototype, "_context", void 0), e([c({ type: String })], u.prototype, "state", void 0), e([c({ type: Boolean })], u.prototype, "simulation", void 0), e([c({ type: Boolean })], u.prototype, "manual", void 0), e([c({ type: String })], u.prototype, "transcript", void 0), e([c({ type: String })], u.prototype, "partialTranscript", void 0), u = e([s("ui-speech-provider")], u);
|
|
114
132
|
export { u as UiSpeechProvider };
|
|
@@ -40,8 +40,11 @@ var c = class extends t {
|
|
|
40
40
|
justify-content: space-between;
|
|
41
41
|
width: 100%;
|
|
42
42
|
padding: 8px 16px;
|
|
43
|
-
background:
|
|
44
|
-
|
|
43
|
+
background: var(
|
|
44
|
+
--ui-voice-picker-anchor-bg,
|
|
45
|
+
var(--md-sys-color-surface-container-high, #e2e2e2)
|
|
46
|
+
);
|
|
47
|
+
border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
|
|
45
48
|
border-radius: 8px;
|
|
46
49
|
color: var(--md-sys-color-on-surface, #1e1e1e);
|
|
47
50
|
cursor: pointer;
|
|
@@ -83,8 +86,8 @@ var c = class extends t {
|
|
|
83
86
|
width: 24px;
|
|
84
87
|
height: 24px;
|
|
85
88
|
border-radius: 50%;
|
|
86
|
-
background: var(--md-sys-color-primary-container);
|
|
87
|
-
color: var(--md-sys-color-on-primary-container);
|
|
89
|
+
background: var(--md-sys-color-primary-container, #d1e4ff);
|
|
90
|
+
color: var(--md-sys-color-on-primary-container, #001d36);
|
|
88
91
|
display: flex;
|
|
89
92
|
align-items: center;
|
|
90
93
|
justify-content: center;
|
|
@@ -95,14 +98,19 @@ var c = class extends t {
|
|
|
95
98
|
white-space: nowrap;
|
|
96
99
|
overflow: hidden;
|
|
97
100
|
text-overflow: ellipsis;
|
|
98
|
-
color: var(--md-sys-color-on-surface);
|
|
101
|
+
color: var(--md-sys-color-on-surface, #1e1e1e);
|
|
99
102
|
}
|
|
100
103
|
|
|
101
104
|
md-menu {
|
|
102
105
|
--md-menu-container-shape: 12px;
|
|
103
|
-
--md-menu-container-color: var(
|
|
106
|
+
--md-menu-container-color: var(
|
|
107
|
+
--md-sys-color-surface-container,
|
|
108
|
+
var(--md-sys-color-surface, #f3f3f3)
|
|
109
|
+
);
|
|
104
110
|
max-width: 400px;
|
|
105
111
|
font-family: inherit;
|
|
112
|
+
--md-sys-typescale-body-medium-font: inherit;
|
|
113
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
106
114
|
}
|
|
107
115
|
|
|
108
116
|
.search-container {
|
|
@@ -116,6 +124,9 @@ var c = class extends t {
|
|
|
116
124
|
width: 100%;
|
|
117
125
|
--md-outlined-text-field-container-shape: 8px;
|
|
118
126
|
font-family: inherit;
|
|
127
|
+
--md-outlined-text-field-label-text-font: inherit;
|
|
128
|
+
--md-outlined-text-field-input-text-font: inherit;
|
|
129
|
+
--md-sys-typescale-body-large-font: inherit;
|
|
119
130
|
}
|
|
120
131
|
|
|
121
132
|
md-menu-item {
|
|
@@ -125,6 +136,9 @@ var c = class extends t {
|
|
|
125
136
|
--md-menu-item-focus-state-layer-color: var(
|
|
126
137
|
--md-sys-color-on-surface-variant
|
|
127
138
|
);
|
|
139
|
+
--md-menu-item-label-text-color: var(--md-sys-color-on-surface);
|
|
140
|
+
--md-menu-item-label-text-font: inherit;
|
|
141
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
128
142
|
font-family: inherit;
|
|
129
143
|
}
|
|
130
144
|
|
|
@@ -270,7 +284,7 @@ var c = class extends t {
|
|
|
270
284
|
<md-menu
|
|
271
285
|
id="voice-menu"
|
|
272
286
|
anchor="voice-anchor"
|
|
273
|
-
positioning="
|
|
287
|
+
positioning="fixed"
|
|
274
288
|
@closed=${this._handleMenuClosed}
|
|
275
289
|
>
|
|
276
290
|
<!-- The click.stop modifier stops the menu from closing when searching -->
|
|
@@ -461,10 +461,16 @@
|
|
|
461
461
|
--md-menu-container-shape: 12px;
|
|
462
462
|
min-width: 280px;
|
|
463
463
|
font-family: inherit;
|
|
464
|
+
/* Force typescale fonts to inherit project font */
|
|
465
|
+
--md-sys-typescale-body-medium-font: inherit;
|
|
466
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
467
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
464
468
|
}
|
|
465
469
|
|
|
466
470
|
md-menu-item {
|
|
467
471
|
font-family: inherit;
|
|
472
|
+
--md-menu-item-label-text-font: inherit;
|
|
473
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
468
474
|
}
|
|
469
475
|
|
|
470
476
|
md-menu-item div[slot='headline'] {
|
|
@@ -482,6 +488,8 @@
|
|
|
482
488
|
|
|
483
489
|
md-text-button {
|
|
484
490
|
font-family: inherit;
|
|
491
|
+
--md-text-button-label-text-font: inherit;
|
|
492
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
485
493
|
}
|
|
486
494
|
|
|
487
495
|
.preview-waveform {
|
|
@@ -514,7 +522,7 @@
|
|
|
514
522
|
<md-menu
|
|
515
523
|
id="device-menu"
|
|
516
524
|
anchor="anchor-button"
|
|
517
|
-
positioning="
|
|
525
|
+
positioning="fixed"
|
|
518
526
|
@closed=${()=>this._isMenuOpen=!1}
|
|
519
527
|
@opened=${()=>this._isMenuOpen=!0}
|
|
520
528
|
>
|
|
@@ -557,7 +565,7 @@
|
|
|
557
565
|
</div>
|
|
558
566
|
`:``}
|
|
559
567
|
</md-menu>
|
|
560
|
-
`}_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
|
|
568
|
+
`}_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}};b([(0,n.property)({type:String})],H.prototype,`value`,void 0),b([(0,n.property)({type:Boolean})],H.prototype,`muted`,void 0),b([(0,n.property)({type:Boolean})],H.prototype,`disabled`,void 0),b([(0,n.state)()],H.prototype,`_devices`,void 0),b([(0,n.state)()],H.prototype,`_loading`,void 0),b([(0,n.state)()],H.prototype,`_error`,void 0),b([(0,n.state)()],H.prototype,`_hasPermission`,void 0),b([(0,n.state)()],H.prototype,`_isMenuOpen`,void 0),b([(0,n.state)()],H.prototype,`_previewAnalyser`,void 0),b([(0,n.query)(`md-menu`)],H.prototype,`_menuEl`,void 0),H=b([(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`
|
|
561
569
|
:host {
|
|
562
570
|
display: inline-block;
|
|
563
571
|
width: 100%;
|
|
@@ -570,8 +578,11 @@
|
|
|
570
578
|
justify-content: space-between;
|
|
571
579
|
width: 100%;
|
|
572
580
|
padding: 8px 16px;
|
|
573
|
-
background:
|
|
574
|
-
|
|
581
|
+
background: var(
|
|
582
|
+
--ui-voice-picker-anchor-bg,
|
|
583
|
+
var(--md-sys-color-surface-container-high, #e2e2e2)
|
|
584
|
+
);
|
|
585
|
+
border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
|
|
575
586
|
border-radius: 8px;
|
|
576
587
|
color: var(--md-sys-color-on-surface, #1e1e1e);
|
|
577
588
|
cursor: pointer;
|
|
@@ -613,8 +624,8 @@
|
|
|
613
624
|
width: 24px;
|
|
614
625
|
height: 24px;
|
|
615
626
|
border-radius: 50%;
|
|
616
|
-
background: var(--md-sys-color-primary-container);
|
|
617
|
-
color: var(--md-sys-color-on-primary-container);
|
|
627
|
+
background: var(--md-sys-color-primary-container, #d1e4ff);
|
|
628
|
+
color: var(--md-sys-color-on-primary-container, #001d36);
|
|
618
629
|
display: flex;
|
|
619
630
|
align-items: center;
|
|
620
631
|
justify-content: center;
|
|
@@ -625,14 +636,19 @@
|
|
|
625
636
|
white-space: nowrap;
|
|
626
637
|
overflow: hidden;
|
|
627
638
|
text-overflow: ellipsis;
|
|
628
|
-
color: var(--md-sys-color-on-surface);
|
|
639
|
+
color: var(--md-sys-color-on-surface, #1e1e1e);
|
|
629
640
|
}
|
|
630
641
|
|
|
631
642
|
md-menu {
|
|
632
643
|
--md-menu-container-shape: 12px;
|
|
633
|
-
--md-menu-container-color: var(
|
|
644
|
+
--md-menu-container-color: var(
|
|
645
|
+
--md-sys-color-surface-container,
|
|
646
|
+
var(--md-sys-color-surface, #f3f3f3)
|
|
647
|
+
);
|
|
634
648
|
max-width: 400px;
|
|
635
649
|
font-family: inherit;
|
|
650
|
+
--md-sys-typescale-body-medium-font: inherit;
|
|
651
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
636
652
|
}
|
|
637
653
|
|
|
638
654
|
.search-container {
|
|
@@ -646,6 +662,9 @@
|
|
|
646
662
|
width: 100%;
|
|
647
663
|
--md-outlined-text-field-container-shape: 8px;
|
|
648
664
|
font-family: inherit;
|
|
665
|
+
--md-outlined-text-field-label-text-font: inherit;
|
|
666
|
+
--md-outlined-text-field-input-text-font: inherit;
|
|
667
|
+
--md-sys-typescale-body-large-font: inherit;
|
|
649
668
|
}
|
|
650
669
|
|
|
651
670
|
md-menu-item {
|
|
@@ -655,6 +674,9 @@
|
|
|
655
674
|
--md-menu-item-focus-state-layer-color: var(
|
|
656
675
|
--md-sys-color-on-surface-variant
|
|
657
676
|
);
|
|
677
|
+
--md-menu-item-label-text-color: var(--md-sys-color-on-surface);
|
|
678
|
+
--md-menu-item-label-text-font: inherit;
|
|
679
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
658
680
|
font-family: inherit;
|
|
659
681
|
}
|
|
660
682
|
|
|
@@ -792,7 +814,7 @@
|
|
|
792
814
|
<md-menu
|
|
793
815
|
id="voice-menu"
|
|
794
816
|
anchor="voice-anchor"
|
|
795
|
-
positioning="
|
|
817
|
+
positioning="fixed"
|
|
796
818
|
@closed=${this._handleMenuClosed}
|
|
797
819
|
>
|
|
798
820
|
<!-- The click.stop modifier stops the menu from closing when searching -->
|
|
@@ -957,8 +979,8 @@
|
|
|
957
979
|
|
|
958
980
|
.code-panel {
|
|
959
981
|
display: none;
|
|
960
|
-
background: #1e1e1e;
|
|
961
|
-
color: #e3e3e3;
|
|
982
|
+
background: var(--md-sys-color-surface-container-highest, #1e1e1e);
|
|
983
|
+
color: var(--md-sys-color-on-surface, #e3e3e3);
|
|
962
984
|
padding: 1.5rem;
|
|
963
985
|
border-radius: 8px;
|
|
964
986
|
overflow-x: auto;
|
|
@@ -966,6 +988,7 @@
|
|
|
966
988
|
font-size: 0.85rem;
|
|
967
989
|
line-height: 1.5;
|
|
968
990
|
margin: 0;
|
|
991
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
969
992
|
}
|
|
970
993
|
|
|
971
994
|
.code-panel.active {
|
|
@@ -1059,11 +1082,11 @@
|
|
|
1059
1082
|
<span class="${e?`active`:``}" style="${o}">
|
|
1060
1083
|
${this.text}
|
|
1061
1084
|
</span>
|
|
1062
|
-
`}};b([(0,n.property)({type:String})],K.prototype,`text`,void 0),b([(0,n.property)({type:Number})],K.prototype,`duration`,void 0),b([(0,n.property)({type:Number})],K.prototype,`delay`,void 0),b([(0,n.property)({type:Boolean})],K.prototype,`repeat`,void 0),b([(0,n.property)({type:Number})],K.prototype,`repeatDelay`,void 0),b([(0,n.property)({type:Boolean})],K.prototype,`startOnView`,void 0),b([(0,n.property)({type:Boolean})],K.prototype,`once`,void 0),b([(0,n.property)({type:Number})],K.prototype,`spread`,void 0),b([(0,n.property)({type:String})],K.prototype,`color`,void 0),b([(0,n.property)({type:String})],K.prototype,`shimmerColor`,void 0),b([(0,n.state)()],K.prototype,`_isInView`,void 0),K=b([(0,n.customElement)(`ui-shimmering-text`)],K);let q=k(`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.transcript=``,this.partialTranscript=``,this._fakeTranscript=[`I`,` am`,` recording`,` a`,` message`,` using`,` atomic`,` components...`]}static{this.styles=t.css`
|
|
1085
|
+
`}};b([(0,n.property)({type:String})],K.prototype,`text`,void 0),b([(0,n.property)({type:Number})],K.prototype,`duration`,void 0),b([(0,n.property)({type:Number})],K.prototype,`delay`,void 0),b([(0,n.property)({type:Boolean})],K.prototype,`repeat`,void 0),b([(0,n.property)({type:Number})],K.prototype,`repeatDelay`,void 0),b([(0,n.property)({type:Boolean})],K.prototype,`startOnView`,void 0),b([(0,n.property)({type:Boolean})],K.prototype,`once`,void 0),b([(0,n.property)({type:Number})],K.prototype,`spread`,void 0),b([(0,n.property)({type:String})],K.prototype,`color`,void 0),b([(0,n.property)({type:String})],K.prototype,`shimmerColor`,void 0),b([(0,n.state)()],K.prototype,`_isInView`,void 0),K=b([(0,n.customElement)(`ui-shimmering-text`)],K);let q=k(`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`
|
|
1063
1086
|
:host {
|
|
1064
1087
|
display: contents;
|
|
1065
1088
|
}
|
|
1066
|
-
`}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`)try{if(this._updateContext({state:`connecting`}),this.simulation)this._analyser=S();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(){this._context.state===`recording
|
|
1089
|
+
`}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=S();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>`}};b([P({context:q}),(0,n.state)()],J.prototype,`_context`,void 0),b([(0,n.property)({type:String})],J.prototype,`state`,void 0),b([(0,n.property)({type:Boolean})],J.prototype,`simulation`,void 0),b([(0,n.property)({type:Boolean})],J.prototype,`manual`,void 0),b([(0,n.property)({type:String})],J.prototype,`transcript`,void 0),b([(0,n.property)({type:String})],J.prototype,`partialTranscript`,void 0),J=b([(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`
|
|
1067
1090
|
:host {
|
|
1068
1091
|
display: inline-block;
|
|
1069
1092
|
}
|