+
+
+
+
+
+
+
+
+
+
diff --git a/projects/demo/src/app/app.component.less b/projects/demo/src/app/app.component.less
index 6ab4946..50f58aa 100644
--- a/projects/demo/src/app/app.component.less
+++ b/projects/demo/src/app/app.component.less
@@ -1,6 +1,58 @@
:host {
- perspective: 150vw;
- user-select: none;
- flex-direction: column;
+ display: block;
+}
+
+.transcript {
+ opacity: 0.5;
+ color: var(--tui-text-01);
+
+ &_final {
+ opacity: 1;
+ }
+}
+
+.form {
+ width: 320px;
+ margin: 0 auto;
+}
+
+.textarea {
+ margin: 16px 0;
+ overflow: visible;
+}
+
+.recognition {
+ margin: 16px 0;
+ box-shadow: inset 0 0 0 1px gainsboro;
+ border-radius: var(--tui-radius);
+ padding: 8px 16px;
+ color: var(--tui-text-02);
+}
+
+.buttons {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.sidebar {
+ padding: 12px 16px;
+}
+
+.link {
+ display: flex;
+ justify-content: space-between;
align-items: center;
+ color: #444;
+ border-radius: 4px;
+ border: 1px solid gainsboro;
+ font-size: 14px;
+ padding: 16px;
+ margin: 16px 10px;
+ box-sizing: border-box;
+ transition: box-shadow 0.3s;
+
+ &:hover {
+ box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
+ }
}
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
index 67d9132..8eaf9a8 100644
--- a/projects/demo/src/app/app.component.ts
+++ b/projects/demo/src/app/app.component.ts
@@ -1,4 +1,16 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {
+ continuous,
+ isSaid,
+ skipUntilSaid,
+ SPEECH_SYNTHESIS_VOICES,
+ SpeechRecognitionService,
+ SpeechSynthesisUtteranceOptions,
+ takeUntilSaid,
+} from '@ng-web-apis/speech';
+import {TuiContextWithImplicit, tuiPure} from '@taiga-ui/cdk';
+import {merge, Observable} from 'rxjs';
+import {filter, mapTo, repeat, retry, share} from 'rxjs/operators';
@Component({
selector: 'main',
@@ -6,4 +18,72 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
styleUrls: ['./app.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class AppComponent {}
+export class AppComponent {
+ paused = true;
+
+ voice = null;
+
+ text = 'Hit play/pause to speak this text';
+
+ readonly nameExtractor = ({
+ $implicit,
+ }: TuiContextWithImplicit