Fixes #589 speech UI changed

src/app/actions/speech.ts

@@ -0,0 +1,13 @@
+import { Action } from '@ngrx/store';
+import { type } from '../utils';
+export const ActionTypes = {
+  CHANGE: type('[Speech] Change'),
+
+};
+export class SearchAction implements Action {
+  type = ActionTypes.CHANGE;
+  constructor(public payload: any) {}
+}
+
+export type Actions
+  = SearchAction;

src/app/app.component.html

@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<app-speechtotext *ngIf="hidespeech|async"></app-speechtotext>

src/app/app.component.spec.ts

@@ -27,6 +27,7 @@ import {AutoCompleteComponent} from "./auto-complete/auto-complete.component";
 import { ThemeComponent } from './theme/theme.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
 import {IntelligenceComponent} from "./intelligence/intelligence.component";
+import {SpeechtotextComponent} from "./speechtotext/speechtotext.component";
 import {AutoCorrectComponent} from "./auto-correct/auto-correct.component";
 
 describe('AppComponent', () => {
@@ -60,6 +61,7 @@ describe('AppComponent', () => {
         ThemeComponent,
         DropdownComponent,
         IntelligenceComponent,
+        SpeechtotextComponent,
         AutoCorrectComponent
       ]
     });

src/app/app.component.ts

@@ -18,7 +18,9 @@ export class AppComponent implements OnInit {
     start: 0,
   };
   wholequery$: Observable<any>;
+  hidespeech: Observable<any>;
   constructor(private router: Router, private store: Store<fromRoot.State>) {
+    this.hidespeech = store.select(fromRoot.getSpeechMode);
     this.resultscomponentchange$ = store.select(fromRoot.getItems);
     this.resultscomponentchange$.subscribe(res => {
       if (this.searchdata.query.length > 0) {

src/app/app.module.ts

@@ -38,6 +38,7 @@ import { SpeechService } from './speech.service';
 import { DropdownComponent } from './dropdown/dropdown.component';
 import { IntelligenceComponent } from './intelligence/intelligence.component';
 import {IntelligenceService} from "./intelligence.service";
+import { SpeechtotextComponent } from './speechtotext/speechtotext.component';
 import { AutoCorrectComponent } from './auto-correct/auto-correct.component';
 import {AutocorrectService} from "./autocorrect.service";
 
@@ -76,6 +77,7 @@ const appRoutes: Routes = [
     SearchsettingsComponent,
     DropdownComponent,
     IntelligenceComponent,
+    SpeechtotextComponent,
     AutoCorrectComponent,
   ],
 

src/app/index/index.component.css

@@ -157,3 +157,4 @@ footer {
   left: 0px;
   width:100%;
 }
+

src/app/index/index.component.html

@@ -1,3 +1,4 @@
+
 <div class="container-fluid">
     <div class="starter-template">
         <div id="search-bar">
@@ -33,3 +34,4 @@ <h3>Set Susper as your default search engine on Mozilla!</h3>
 <div class="dropdown-menu-box-homepage">
     <app-dropdown></app-dropdown>
 </div>
+

src/app/index/index.component.spec.ts

@@ -17,6 +17,7 @@ import {IntelligenceComponent} from "../intelligence/intelligence.component";
 
 import { AutocompleteService } from '../autocomplete.service';
 import { SpeechService } from '../speech.service';
+import {SpeechtotextComponent} from "../speechtotext/speechtotext.component";
 
 describe('IndexComponent', () => {
   let component: IndexComponent;
@@ -36,7 +37,8 @@ describe('IndexComponent', () => {
         SearchBarComponent,
         FooterNavbarComponent,
         DropdownComponent,
-        AutoCompleteComponent
+        AutoCompleteComponent,
+        SpeechtotextComponent
       ],
       providers: [
         AutocompleteService,

src/app/index/index.component.ts

@@ -3,6 +3,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import * as fromRoot from '../reducers';
 import {Store} from "@ngrx/store";
 import * as queryactions from '../actions/query';
+import {Observable} from "rxjs";
 
 @Component({
   selector: 'app-index',
@@ -17,9 +18,11 @@ export class IndexComponent implements OnInit {
     rows: 10,
 
   };
+  hidespeech: Observable<boolean>;
   constructor(private route: ActivatedRoute, private router: Router, private store: Store<fromRoot.State> ) {
     this.store.dispatch(new queryactions.QueryAction(''));
     this.store.dispatch(new queryactions.QueryServerAction(''));
+    this.hidespeech = store.select(fromRoot.getSpeechMode);
   }
 
   ngOnInit() {

src/app/intelligence/intelligence.component.spec.ts

@@ -44,27 +44,10 @@ describe('IntelligenceComponent', () => {
         HttpModule,
         JsonpModule,
         StoreModule.provideStore(reducer),
-        StoreDevtoolsModule.instrumentOnlyWithExtension(),
+
       ],
       declarations: [
-        AppComponent,
-        NavbarComponent,
-        IndexComponent,
-        ResultsComponent,
-        NotFoundComponent,
-        AdvancedsearchComponent,
-        SearchBarComponent,
-        FooterNavbarComponent,
-        AboutComponent,
-        ContactComponent,
-        ModalComponent,
-        InfoboxComponent,
-        RelatedSearchComponent,
-        AutoCompleteComponent,
-        ThemeComponent,
-        DropdownComponent,
-        IntelligenceComponent,
-        AutoCorrectComponent
+        IntelligenceComponent
       ],
       providers: [
         IntelligenceService

src/app/not-found/not-found.component.spec.ts

@@ -29,6 +29,7 @@ import { ThemeComponent } from '../theme/theme.component';
 import { SpeechService } from '../speech.service';
 import { DropdownComponent } from '../dropdown/dropdown.component';
 import {IntelligenceComponent} from "../intelligence/intelligence.component";
+import {SpeechtotextComponent} from "../speechtotext/speechtotext.component";
 import {AutoCorrectComponent} from "../auto-correct/auto-correct.component";
 
 describe('NotFoundComponent', () => {
@@ -65,6 +66,7 @@ describe('NotFoundComponent', () => {
         ThemeComponent,
         DropdownComponent,
         IntelligenceComponent,
+        SpeechtotextComponent,
         AutoCorrectComponent
       ],
       providers: [

src/app/reducers/index.ts

@@ -39,6 +39,7 @@ import { combineReducers } from '@ngrx/store';
 import * as fromSearch from './search';
 import * as fromQuery from './query';
 import * as fromKnowledge from './knowledge';
+import * as fromSpeech from './speech';
 /**
  * As mentioned, we treat each reducer like a table in a database. This means
  * our top level state interface is just a map of keys to inner state types.
@@ -47,6 +48,7 @@ export interface State {
   search: fromSearch.State;
   query: fromQuery.State;
   knowledge: fromKnowledge.State;
+  speech: fromSpeech.State;
 }
 
 
@@ -60,7 +62,8 @@ export interface State {
 const reducers = {
   search: fromSearch.reducer,
   query: fromQuery.reducer,
-  knowledge: fromKnowledge.reducer
+  knowledge: fromKnowledge.reducer,
+  speech: fromSpeech.reducer,
 };
 
 const developmentReducer: ActionReducer<State> = compose(storeFreeze, combineReducers)(reducers);
@@ -75,6 +78,7 @@ export function reducer(state: any, action: any) {
 }
 export const getSearchState = (state: State) => state.search;
 export const getQueryState = (state: State) => state.query;
+export const getSpeechState = (state: State) => state.speech;
 export const getKnowledgeState = (state: State) => state.knowledge;
 export const getSearchResults = createSelector(getSearchState, fromSearch.getsearchresults);
 export const getItems = createSelector(getSearchState, fromSearch.getItems);
@@ -84,3 +88,5 @@ export const getquery = createSelector(getQueryState, fromQuery.getpresentquery)
 export const getwholequery = createSelector(getQueryState, fromQuery.getpresentwholequery);
 export const getKnowledge = createSelector(getKnowledgeState, fromKnowledge.getresponse);
 export const getResponseTime = createSelector(getSearchState, fromSearch.getresponsetime);
+export const getSpeechMode = createSelector(getSpeechState, fromSpeech.getspeechmode);
+

src/app/reducers/speech.ts

@@ -0,0 +1,32 @@
+import { compose } from '@ngrx/core';
+import { combineReducers } from '@ngrx/store';
+import { ActionReducer, Action } from '@ngrx/store';
+import { createSelector } from 'reselect';
+import * as speech from '../actions/speech';
+export const CHANGE = 'CHANGE';
+export interface State {
+  speechmode: boolean;
+}
+/**
+ * There is always a need of initial state to be passed onto the store.
+ *
+ * @prop: query: ''
+ * @prop: loading: false
+ */
+const initialState: State = {
+  speechmode: false
+};
+export function reducer(state: State = initialState, action: speech.Actions): State {
+  switch (action.type) {
+    case speech.ActionTypes.CHANGE: {
+      const response = action.payload;
+      return Object.assign({}, state, {
+        speechmode: response,
+      });
+    }
+    default: {
+      return state;
+    }
+  }
+}
+export const getspeechmode = (state: State) => state.speechmode;

src/app/related-search/related-search.component.spec.ts

@@ -28,6 +28,7 @@ import {AutoCompleteComponent} from "../auto-complete/auto-complete.component";
 import { ThemeComponent } from '../theme/theme.component';
 import { DropdownComponent } from '../dropdown/dropdown.component';
 import {IntelligenceComponent} from "../intelligence/intelligence.component";
+import {SpeechtotextComponent} from "../speechtotext/speechtotext.component";
 import {AutoCorrectComponent} from "../auto-correct/auto-correct.component";
 
 describe('RelatedSearchComponent', () => {
@@ -64,6 +65,7 @@ describe('RelatedSearchComponent', () => {
         ThemeComponent,
         DropdownComponent,
         IntelligenceComponent,
+        SpeechtotextComponent,
         AutoCorrectComponent
       ],
       providers: [

src/app/results/results.component.html

@@ -156,3 +156,4 @@
 </div>
 </div>
 <app-footer-navbar [hidden]="hidefooter"></app-footer-navbar>
+

src/app/results/results.component.spec.ts

@@ -33,6 +33,7 @@ import { SpeechService } from '../speech.service';
 import { DropdownComponent } from '../dropdown/dropdown.component';
 import {IntelligenceComponent} from "../intelligence/intelligence.component";
 import {IntelligenceService} from "../intelligence.service";
+import {SpeechtotextComponent} from "../speechtotext/speechtotext.component";
 import {AutoCorrectComponent} from "../auto-correct/auto-correct.component";
 import {AutocorrectService} from "../autocorrect.service";
 
@@ -70,6 +71,7 @@ describe('ResultsComponent', () => {
         ThemeComponent,
         DropdownComponent,
         IntelligenceComponent,
+        SpeechtotextComponent,
         AutoCorrectComponent
       ],
       providers: [SearchService, KnowledgeapiService, AutocompleteService, ThemeService, SpeechService, IntelligenceService, AutocorrectService]

src/app/search-bar/search-bar.component.html

@@ -7,7 +7,7 @@
            [(ngModel)]="searchdata.query" autocomplete="off" (keypress)="onEnter($event)">
       </div>
     <div class="input-group-btn">
-      <button class="btn btn-default" id="nav-button" type="submit" (click)="submit()">
+      <button class="btn btn-default" id="nav-button" type="submit">
         <img src="../../assets/images/microphone.png" class="microphone" (click)="speechRecognition()"/>
       </button>
       <button class="btn btn-default" id="nav-button" type="submit" (click)="submit()" *ngIf="this.resultspage">

src/app/search-bar/search-bar.component.ts

@@ -9,7 +9,7 @@ import { Observable } from 'rxjs';
 import * as query from '../actions/query';
 import * as queryactions from '../actions/query';
 import { SpeechService } from '../speech.service';
-
+import * as speechactions from '../actions/speech';
 @Component({
   selector: 'app-search-bar',
   templateUrl: './search-bar.component.html',
@@ -25,6 +25,7 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
     start: 0,
     fq: ''
   };
+  showspeech: boolean = false;
   wholequery$: Observable<any>;
   resultspage: any;
 
@@ -43,7 +44,7 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
   };
 
   speechRecognition() {
-    this.speech.record('en_US').subscribe(voice => this.onquery(voice));
+    this.store.dispatch(new speechactions.SearchAction(true));
   }
 
   hidesuggestions(data: number) {

src/app/shared/mocks/search.mock.ts

@@ -29,4 +29,4 @@ export const MockSearchApi = {
       }
     }
   }
-}
+};

src/app/speech.service.ts

@@ -21,7 +21,6 @@ export class SpeechService {
         observe.next(take.results.item(take.results.length - 1).item(0).transcript)
       );
 
-      recognition.onerror = err => observe.error(err);
       recognition.onend = () => observe.complete();
       recognition.lang = lang;
       recognition.start();