@ghchinoy/lit-audio-ui 0.3.2 → 0.3.4
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.
|
@@ -35,6 +35,7 @@ var c = class extends t {
|
|
|
35
35
|
display: inline-block;
|
|
36
36
|
position: relative;
|
|
37
37
|
font-family: inherit;
|
|
38
|
+
color-scheme: light dark;
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
.anchor-button {
|
|
@@ -42,11 +43,11 @@ var c = class extends t {
|
|
|
42
43
|
align-items: center;
|
|
43
44
|
gap: 8px;
|
|
44
45
|
padding: 8px 16px;
|
|
45
|
-
background: var(--md-sys-color-surface-container-high,
|
|
46
|
-
color: var(--md-sys-color-on-surface
|
|
46
|
+
background: var(--md-sys-color-surface-container-high, transparent);
|
|
47
|
+
color: var(--md-sys-color-on-surface);
|
|
47
48
|
border-radius: 999px;
|
|
48
49
|
cursor: pointer;
|
|
49
|
-
border:
|
|
50
|
+
border: 1px solid var(--md-sys-color-outline-variant, currentColor);
|
|
50
51
|
font-family: inherit;
|
|
51
52
|
font-size: 14px;
|
|
52
53
|
font-weight: 500;
|
|
@@ -55,7 +56,7 @@ var c = class extends t {
|
|
|
55
56
|
}
|
|
56
57
|
|
|
57
58
|
.anchor-button:hover:not(:disabled) {
|
|
58
|
-
background: var(--md-sys-color-surface-container-highest
|
|
59
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
59
60
|
}
|
|
60
61
|
|
|
61
62
|
.anchor-button:disabled {
|
|
@@ -74,15 +75,21 @@ var c = class extends t {
|
|
|
74
75
|
md-menu {
|
|
75
76
|
--md-menu-container-color: var(
|
|
76
77
|
--md-sys-color-surface-container,
|
|
77
|
-
var(--md-sys-color-surface
|
|
78
|
+
var(--md-sys-color-surface)
|
|
78
79
|
);
|
|
79
80
|
--md-menu-container-shape: 12px;
|
|
80
81
|
min-width: 280px;
|
|
81
82
|
font-family: inherit;
|
|
83
|
+
/* Force typescale fonts to inherit project font */
|
|
84
|
+
--md-sys-typescale-body-medium-font: inherit;
|
|
85
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
86
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
82
87
|
}
|
|
83
88
|
|
|
84
89
|
md-menu-item {
|
|
85
90
|
font-family: inherit;
|
|
91
|
+
--md-menu-item-label-text-font: inherit;
|
|
92
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
86
93
|
}
|
|
87
94
|
|
|
88
95
|
md-menu-item div[slot='headline'] {
|
|
@@ -100,6 +107,8 @@ var c = class extends t {
|
|
|
100
107
|
|
|
101
108
|
md-text-button {
|
|
102
109
|
font-family: inherit;
|
|
110
|
+
--md-text-button-label-text-font: inherit;
|
|
111
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
103
112
|
}
|
|
104
113
|
|
|
105
114
|
.preview-waveform {
|
|
@@ -107,7 +116,7 @@ var c = class extends t {
|
|
|
107
116
|
height: 24px;
|
|
108
117
|
background: var(
|
|
109
118
|
--md-sys-color-surface-variant,
|
|
110
|
-
var(--md-sys-color-surface-container-highest
|
|
119
|
+
var(--md-sys-color-surface-container-highest)
|
|
111
120
|
);
|
|
112
121
|
border-radius: 6px;
|
|
113
122
|
overflow: hidden;
|
|
@@ -231,7 +240,7 @@ var c = class extends t {
|
|
|
231
240
|
}
|
|
232
241
|
_parseDeviceList(e) {
|
|
233
242
|
let t = e.filter((e) => e.kind === "audioinput").map((e) => {
|
|
234
|
-
let t = e.label || "Microphone
|
|
243
|
+
let t = e.label || "Microphone";
|
|
235
244
|
return t = t.replace(/\s*\([^)]*\)/g, "").trim(), {
|
|
236
245
|
deviceId: e.deviceId,
|
|
237
246
|
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 };
|
|
@@ -32,6 +32,7 @@ var c = class extends t {
|
|
|
32
32
|
display: inline-block;
|
|
33
33
|
width: 100%;
|
|
34
34
|
font-family: inherit;
|
|
35
|
+
color-scheme: light dark;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
.anchor-button {
|
|
@@ -40,10 +41,13 @@ var c = class extends t {
|
|
|
40
41
|
justify-content: space-between;
|
|
41
42
|
width: 100%;
|
|
42
43
|
padding: 8px 16px;
|
|
43
|
-
background:
|
|
44
|
-
|
|
44
|
+
background: var(
|
|
45
|
+
--ui-voice-picker-anchor-bg,
|
|
46
|
+
var(--md-sys-color-surface-container-high, transparent)
|
|
47
|
+
);
|
|
48
|
+
border: 1px solid var(--md-sys-color-outline-variant, currentColor);
|
|
45
49
|
border-radius: 8px;
|
|
46
|
-
color: var(--md-sys-color-on-surface
|
|
50
|
+
color: var(--md-sys-color-on-surface);
|
|
47
51
|
cursor: pointer;
|
|
48
52
|
font-family: inherit;
|
|
49
53
|
font-size: 14px;
|
|
@@ -54,13 +58,13 @@ var c = class extends t {
|
|
|
54
58
|
}
|
|
55
59
|
|
|
56
60
|
.anchor-button:hover {
|
|
57
|
-
background: var(--md-sys-color-surface-container-highest
|
|
61
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
58
62
|
}
|
|
59
63
|
|
|
60
64
|
.anchor-button:focus-visible {
|
|
61
65
|
outline: none;
|
|
62
|
-
border-color: var(--md-sys-color-primary
|
|
63
|
-
box-shadow: 0 0 0 1px var(--md-sys-color-primary
|
|
66
|
+
border-color: var(--md-sys-color-primary);
|
|
67
|
+
box-shadow: 0 0 0 1px var(--md-sys-color-primary);
|
|
64
68
|
}
|
|
65
69
|
|
|
66
70
|
.trigger-content {
|
|
@@ -100,14 +104,19 @@ var c = class extends t {
|
|
|
100
104
|
|
|
101
105
|
md-menu {
|
|
102
106
|
--md-menu-container-shape: 12px;
|
|
103
|
-
--md-menu-container-color: var(
|
|
107
|
+
--md-menu-container-color: var(
|
|
108
|
+
--md-sys-color-surface-container,
|
|
109
|
+
var(--md-sys-color-surface)
|
|
110
|
+
);
|
|
104
111
|
max-width: 400px;
|
|
105
112
|
font-family: inherit;
|
|
113
|
+
--md-sys-typescale-body-medium-font: inherit;
|
|
114
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
106
115
|
}
|
|
107
116
|
|
|
108
117
|
.search-container {
|
|
109
118
|
padding: 8px 12px;
|
|
110
|
-
background: var(--md-sys-color-surface-container
|
|
119
|
+
background: var(--md-sys-color-surface-container);
|
|
111
120
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
112
121
|
font-family: inherit;
|
|
113
122
|
}
|
|
@@ -116,6 +125,9 @@ var c = class extends t {
|
|
|
116
125
|
width: 100%;
|
|
117
126
|
--md-outlined-text-field-container-shape: 8px;
|
|
118
127
|
font-family: inherit;
|
|
128
|
+
--md-outlined-text-field-label-text-font: inherit;
|
|
129
|
+
--md-outlined-text-field-input-text-font: inherit;
|
|
130
|
+
--md-sys-typescale-body-large-font: inherit;
|
|
119
131
|
}
|
|
120
132
|
|
|
121
133
|
md-menu-item {
|
|
@@ -125,6 +137,9 @@ var c = class extends t {
|
|
|
125
137
|
--md-menu-item-focus-state-layer-color: var(
|
|
126
138
|
--md-sys-color-on-surface-variant
|
|
127
139
|
);
|
|
140
|
+
--md-menu-item-label-text-color: var(--md-sys-color-on-surface);
|
|
141
|
+
--md-menu-item-label-text-font: inherit;
|
|
142
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
128
143
|
font-family: inherit;
|
|
129
144
|
}
|
|
130
145
|
|
|
@@ -417,6 +417,7 @@
|
|
|
417
417
|
display: inline-block;
|
|
418
418
|
position: relative;
|
|
419
419
|
font-family: inherit;
|
|
420
|
+
color-scheme: light dark;
|
|
420
421
|
}
|
|
421
422
|
|
|
422
423
|
.anchor-button {
|
|
@@ -424,11 +425,11 @@
|
|
|
424
425
|
align-items: center;
|
|
425
426
|
gap: 8px;
|
|
426
427
|
padding: 8px 16px;
|
|
427
|
-
background: var(--md-sys-color-surface-container-high,
|
|
428
|
-
color: var(--md-sys-color-on-surface
|
|
428
|
+
background: var(--md-sys-color-surface-container-high, transparent);
|
|
429
|
+
color: var(--md-sys-color-on-surface);
|
|
429
430
|
border-radius: 999px;
|
|
430
431
|
cursor: pointer;
|
|
431
|
-
border:
|
|
432
|
+
border: 1px solid var(--md-sys-color-outline-variant, currentColor);
|
|
432
433
|
font-family: inherit;
|
|
433
434
|
font-size: 14px;
|
|
434
435
|
font-weight: 500;
|
|
@@ -437,7 +438,7 @@
|
|
|
437
438
|
}
|
|
438
439
|
|
|
439
440
|
.anchor-button:hover:not(:disabled) {
|
|
440
|
-
background: var(--md-sys-color-surface-container-highest
|
|
441
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
441
442
|
}
|
|
442
443
|
|
|
443
444
|
.anchor-button:disabled {
|
|
@@ -456,15 +457,21 @@
|
|
|
456
457
|
md-menu {
|
|
457
458
|
--md-menu-container-color: var(
|
|
458
459
|
--md-sys-color-surface-container,
|
|
459
|
-
var(--md-sys-color-surface
|
|
460
|
+
var(--md-sys-color-surface)
|
|
460
461
|
);
|
|
461
462
|
--md-menu-container-shape: 12px;
|
|
462
463
|
min-width: 280px;
|
|
463
464
|
font-family: inherit;
|
|
465
|
+
/* Force typescale fonts to inherit project font */
|
|
466
|
+
--md-sys-typescale-body-medium-font: inherit;
|
|
467
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
468
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
464
469
|
}
|
|
465
470
|
|
|
466
471
|
md-menu-item {
|
|
467
472
|
font-family: inherit;
|
|
473
|
+
--md-menu-item-label-text-font: inherit;
|
|
474
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
468
475
|
}
|
|
469
476
|
|
|
470
477
|
md-menu-item div[slot='headline'] {
|
|
@@ -482,6 +489,8 @@
|
|
|
482
489
|
|
|
483
490
|
md-text-button {
|
|
484
491
|
font-family: inherit;
|
|
492
|
+
--md-text-button-label-text-font: inherit;
|
|
493
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
485
494
|
}
|
|
486
495
|
|
|
487
496
|
.preview-waveform {
|
|
@@ -489,7 +498,7 @@
|
|
|
489
498
|
height: 24px;
|
|
490
499
|
background: var(
|
|
491
500
|
--md-sys-color-surface-variant,
|
|
492
|
-
var(--md-sys-color-surface-container-highest
|
|
501
|
+
var(--md-sys-color-surface-container-highest)
|
|
493
502
|
);
|
|
494
503
|
border-radius: 6px;
|
|
495
504
|
overflow: hidden;
|
|
@@ -557,11 +566,12 @@
|
|
|
557
566
|
</div>
|
|
558
567
|
`:``}
|
|
559
568
|
</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
|
|
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}};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
570
|
:host {
|
|
562
571
|
display: inline-block;
|
|
563
572
|
width: 100%;
|
|
564
573
|
font-family: inherit;
|
|
574
|
+
color-scheme: light dark;
|
|
565
575
|
}
|
|
566
576
|
|
|
567
577
|
.anchor-button {
|
|
@@ -570,10 +580,13 @@
|
|
|
570
580
|
justify-content: space-between;
|
|
571
581
|
width: 100%;
|
|
572
582
|
padding: 8px 16px;
|
|
573
|
-
background:
|
|
574
|
-
|
|
583
|
+
background: var(
|
|
584
|
+
--ui-voice-picker-anchor-bg,
|
|
585
|
+
var(--md-sys-color-surface-container-high, transparent)
|
|
586
|
+
);
|
|
587
|
+
border: 1px solid var(--md-sys-color-outline-variant, currentColor);
|
|
575
588
|
border-radius: 8px;
|
|
576
|
-
color: var(--md-sys-color-on-surface
|
|
589
|
+
color: var(--md-sys-color-on-surface);
|
|
577
590
|
cursor: pointer;
|
|
578
591
|
font-family: inherit;
|
|
579
592
|
font-size: 14px;
|
|
@@ -584,13 +597,13 @@
|
|
|
584
597
|
}
|
|
585
598
|
|
|
586
599
|
.anchor-button:hover {
|
|
587
|
-
background: var(--md-sys-color-surface-container-highest
|
|
600
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
588
601
|
}
|
|
589
602
|
|
|
590
603
|
.anchor-button:focus-visible {
|
|
591
604
|
outline: none;
|
|
592
|
-
border-color: var(--md-sys-color-primary
|
|
593
|
-
box-shadow: 0 0 0 1px var(--md-sys-color-primary
|
|
605
|
+
border-color: var(--md-sys-color-primary);
|
|
606
|
+
box-shadow: 0 0 0 1px var(--md-sys-color-primary);
|
|
594
607
|
}
|
|
595
608
|
|
|
596
609
|
.trigger-content {
|
|
@@ -630,14 +643,19 @@
|
|
|
630
643
|
|
|
631
644
|
md-menu {
|
|
632
645
|
--md-menu-container-shape: 12px;
|
|
633
|
-
--md-menu-container-color: var(
|
|
646
|
+
--md-menu-container-color: var(
|
|
647
|
+
--md-sys-color-surface-container,
|
|
648
|
+
var(--md-sys-color-surface)
|
|
649
|
+
);
|
|
634
650
|
max-width: 400px;
|
|
635
651
|
font-family: inherit;
|
|
652
|
+
--md-sys-typescale-body-medium-font: inherit;
|
|
653
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
636
654
|
}
|
|
637
655
|
|
|
638
656
|
.search-container {
|
|
639
657
|
padding: 8px 12px;
|
|
640
|
-
background: var(--md-sys-color-surface-container
|
|
658
|
+
background: var(--md-sys-color-surface-container);
|
|
641
659
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
642
660
|
font-family: inherit;
|
|
643
661
|
}
|
|
@@ -646,6 +664,9 @@
|
|
|
646
664
|
width: 100%;
|
|
647
665
|
--md-outlined-text-field-container-shape: 8px;
|
|
648
666
|
font-family: inherit;
|
|
667
|
+
--md-outlined-text-field-label-text-font: inherit;
|
|
668
|
+
--md-outlined-text-field-input-text-font: inherit;
|
|
669
|
+
--md-sys-typescale-body-large-font: inherit;
|
|
649
670
|
}
|
|
650
671
|
|
|
651
672
|
md-menu-item {
|
|
@@ -655,6 +676,9 @@
|
|
|
655
676
|
--md-menu-item-focus-state-layer-color: var(
|
|
656
677
|
--md-sys-color-on-surface-variant
|
|
657
678
|
);
|
|
679
|
+
--md-menu-item-label-text-color: var(--md-sys-color-on-surface);
|
|
680
|
+
--md-menu-item-label-text-font: inherit;
|
|
681
|
+
--md-sys-typescale-label-large-font: inherit;
|
|
658
682
|
font-family: inherit;
|
|
659
683
|
}
|
|
660
684
|
|
|
@@ -957,8 +981,8 @@
|
|
|
957
981
|
|
|
958
982
|
.code-panel {
|
|
959
983
|
display: none;
|
|
960
|
-
background: #1e1e1e;
|
|
961
|
-
color: #e3e3e3;
|
|
984
|
+
background: var(--md-sys-color-surface-container-highest, #1e1e1e);
|
|
985
|
+
color: var(--md-sys-color-on-surface, #e3e3e3);
|
|
962
986
|
padding: 1.5rem;
|
|
963
987
|
border-radius: 8px;
|
|
964
988
|
overflow-x: auto;
|
|
@@ -966,6 +990,7 @@
|
|
|
966
990
|
font-size: 0.85rem;
|
|
967
991
|
line-height: 1.5;
|
|
968
992
|
margin: 0;
|
|
993
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
969
994
|
}
|
|
970
995
|
|
|
971
996
|
.code-panel.active {
|
|
@@ -1059,11 +1084,11 @@
|
|
|
1059
1084
|
<span class="${e?`active`:``}" style="${o}">
|
|
1060
1085
|
${this.text}
|
|
1061
1086
|
</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`
|
|
1087
|
+
`}};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
1088
|
:host {
|
|
1064
1089
|
display: contents;
|
|
1065
1090
|
}
|
|
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
|
|
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=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
1092
|
:host {
|
|
1068
1093
|
display: inline-block;
|
|
1069
1094
|
}
|