feat(selection): detect esc key in all frames

src/content/redux/modules/widget.ts

@@ -135,11 +135,9 @@ export function startUpAction (): Dispatcher {
     listenTripleCtrl(dispatch, getState)
 
     // close panel on esc
-    window.addEventListener('keyup', e => {
-      if (e.key === 'Escape') {
-        dispatch(closePanel() as any)
-      }
-    }, { capture: true })
+    message.self.addListener(MsgType.EscapeKey, () => {
+      dispatch(closePanel() as any)
+    })
   }
 }
 
@@ -165,6 +163,7 @@ export function closePanel (): Dispatcher {
       dispatch(restoreWidget())
       dispatch(sendEmptySelection() as any)
     }
+    message.send({ type: MsgType.PlayAudio, src: '' })
   }
 }
 

src/selection/index.ts

@@ -37,16 +37,9 @@ let config = appConfigFactory()
 let isCtrlPressed = false
 let clickPeriodCount = 0
 
-const isCtrlPressed$: Observable<boolean> = merge(
-  map(isCtrlKey)(fromEvent<KeyboardEvent>(window, 'keydown', { capture: true })),
-  mapTo(false)(fromEvent(window, 'keyup', { capture: true })),
-  mapTo(false)(fromEvent(window, 'blur', { capture: true })),
-  of(false)
-).pipe(
-  distinctUntilChanged()
-)
+const isCtrlPressed$$ = share<boolean>()(isKeyPressed(isCtrlKey))
 
-const validCtrlPressed$$ = isCtrlPressed$.pipe(
+const validCtrlPressed$$ = isCtrlPressed$$.pipe(
   filter(isCtrlPressed => config.active && isCtrlPressed),
   share(),
 )
@@ -78,7 +71,13 @@ const clickPeriodCount$ = merge(
 
 createAppConfigStream().subscribe(newConfig => config = newConfig)
 
-isCtrlPressed$.subscribe(flag => isCtrlPressed = flag)
+isCtrlPressed$$.subscribe(flag => isCtrlPressed = flag)
+
+isKeyPressed(isEscapeKey).subscribe(flag => {
+  if (flag) {
+    message.self.send({ type: MsgType.EscapeKey })
+  }
+})
 
 clickPeriodCount$.subscribe(count => clickPeriodCount = count)
 
@@ -181,19 +180,23 @@ function sendEmptyMessage () {
  * Is ctrl/command button pressed
  */
 function isCtrlKey (evt: KeyboardEvent): boolean {
-  // ctrl & command(mac)
-  if (evt.keyCode) {
-    if (evt.keyCode === 17 || evt.keyCode === 91 || evt.keyCode === 93) {
-      return true
-    }
-    return false
-  }
+  return evt.key === 'Control' || evt.key === 'Meta'
+}
 
-  if (evt.key) {
-    if (evt.key === 'Control' || evt.key === 'Meta') {
-      return true
-    }
-  }
+/**
+ * Is esc button pressed
+ */
+function isEscapeKey (evt: KeyboardEvent): boolean {
+  return evt.key === 'Escape'
+}
 
-  return false
+function isKeyPressed (keySelectior: (e: KeyboardEvent) => boolean): Observable<boolean> {
+  return distinctUntilChanged<boolean>()(
+    merge(
+      map(keySelectior)(fromEvent<KeyboardEvent>(window, 'keydown', { capture: true })),
+      mapTo(false)(fromEvent(window, 'keyup', { capture: true })),
+      mapTo(false)(fromEvent(window, 'blur', { capture: true })),
+      of(false)
+    )
+  )
 }

src/typings/message.ts

@@ -14,6 +14,9 @@ export const enum MsgType {
   /** Ctrl/Command has been hit 3 times */
   TripleCtrl,
 
+  /** Escape key is pressed */
+  EscapeKey,
+
   /** Response the pageInfo of a page */
   PageInfo,
 
@@ -88,6 +91,7 @@ export type MsgOpenUrl = MsgOpenUrlWithoutPlaceholder | MsgOpenUrlWithPlaceholde
 
 export interface MsgAudioPlay {
   readonly type: MsgType.PlayAudio
+  /** empty string for stoping */
   readonly src: string
 }
 

test/specs/selection/index.spec.ts

@@ -169,6 +169,18 @@ describe('Message Selection', () => {
     }, 0)
   })
 
+  it('should detect esc key being pressed', done => {
+    window.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Escape',
+    }))
+
+    setTimeout(() => {
+      expect(message.self.send).toHaveBeenCalledTimes(1)
+      expect(message.self.send).toBeCalledWith({ type: MsgType.EscapeKey })
+      done()
+    }, 0)
+  })
+
   it('ctrlKey should be true if ctrl key is pressed while clicking', done => {
     window.dispatchEvent(new KeyboardEvent('keydown', {
       key: 'Control',