From cad162dc6700a9543571ef051b24d123d41fe9f9 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Fri, 18 Dec 2020 20:46:06 +0100
Subject: [PATCH] feat: add `ctrl+f` as hotkey to focus search field

---
 .../channel-list-container.component.html     |  1 +
 .../channel-list-container.component.ts       | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.html b/src/app/player/components/channel-list-container/channel-list-container.component.html
index fe0ebc46b..0012bdc1b 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.html
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.html
@@ -4,6 +4,7 @@
             <mat-list-item>
                 <mat-form-field class="full-width">
                     <input
+                        #search
                         matInput
                         placeholder="Search channel ({{
                             _channelList?.length
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.ts b/src/app/player/components/channel-list-container/channel-list-container.component.ts
index 4ff587d1a..d2853cb1f 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.ts
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.ts
@@ -1,4 +1,10 @@
-import { Component, Input } from '@angular/core';
+import {
+    Component,
+    ElementRef,
+    HostListener,
+    Input,
+    ViewChild,
+} from '@angular/core';
 import { Channel, ChannelStore, ChannelQuery } from '../../../state';
 
 import * as _ from 'lodash';
@@ -44,6 +50,17 @@ export class ChannelListContainerComponent {
         name: '',
     };
 
+    /** Search field element */
+    @ViewChild('search') searchElement: ElementRef;
+
+    /** Register ctrl+f as keyboard hotkey to focus the search input field */
+    @HostListener('document:keypress', ['$event'])
+    handleKeyboardEvent(event: KeyboardEvent): void {
+        if (event.key === 'f' && event.ctrlKey) {
+            this.searchElement.nativeElement.focus();
+        }
+    }
+
     /**
      * Creates an instance of ChannelListContainerComponent
      * @param channelQuery akita's channel query