keyboard shortcuts and key map view (#974)

client/package.json

@@ -62,6 +62,7 @@
     "@types/sanitize-html": "^1.14.0",
     "@types/video.js": "6.2.7",
     "@types/webtorrent": "^0.98.4",
+    "angular2-hotkeys": "^2.1.2",
     "angular2-notifications": "^1.0.2",
     "awesome-typescript-loader": "5.2.0",
     "bootstrap": "^4.1.3",

client/src/app/app.component.html

@@ -1,5 +1,7 @@
 <div *ngIf="customCSS" [innerHTML]="customCSS"></div>
 
+<hotkeys-cheatsheet></hotkeys-cheatsheet>
+
 <div [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }">
   <div class="header">
 

client/src/app/app.component.ts

@@ -5,6 +5,7 @@ import { AuthService, RedirectService, ServerService } from '@app/core'
 import { is18nPath } from '../../../shared/models/i18n'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { skip } from 'rxjs/operators'
+import { HotkeysService, Hotkey } from 'angular2-hotkeys'
 
 @Component({
   selector: 'my-app',
@@ -35,7 +36,8 @@ export class AppComponent implements OnInit {
     private serverService: ServerService,
     private domSanitizer: DomSanitizer,
     private redirectService: RedirectService,
-    private screenService: ScreenService
+    private screenService: ScreenService,
+    private hotkeysService: HotkeysService
   ) { }
 
   get serverVersion () {
@@ -120,6 +122,33 @@ export class AppComponent implements OnInit {
             this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
           }
         })
+
+    this.hotkeysService.add([
+      new Hotkey('/', (event: KeyboardEvent): boolean => {
+        document.getElementById('search-video').focus()
+        return false // Prevent bubbling
+      }, undefined, 'Focus the search bar'),
+      new Hotkey('g+s', (event: KeyboardEvent): boolean => {
+        this.router.navigate([ '/videos/subscriptions' ])
+        return false
+      }, undefined, 'Go to the subscriptions videos page'),
+      new Hotkey('g+t', (event: KeyboardEvent): boolean => {
+        this.router.navigate([ '/videos/trending' ])
+        return false
+      }, undefined, 'Go to the trending videos page'),
+      new Hotkey('g+r', (event: KeyboardEvent): boolean => {
+        this.router.navigate([ '/videos/recently-added' ])
+        return false
+      }, undefined, 'Go to the recently added videos page'),
+      new Hotkey('g+l', (event: KeyboardEvent): boolean => {
+        this.router.navigate([ '/videos/local' ])
+        return false
+      }, undefined, 'Go to the local videos page'),
+      new Hotkey('g+u', (event: KeyboardEvent): boolean => {
+        this.router.navigate([ '/videos/upload' ])
+        return false
+      }, undefined, 'Go to the videos upload page')
+    ])
   }
 
   isUserLoggedIn () {

client/src/app/app.module.ts

@@ -5,6 +5,7 @@ import { ResetPasswordModule } from '@app/reset-password'
 
 import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
 import { ClipboardModule } from 'ngx-clipboard'
+import { HotkeyModule, IHotkeyOptions } from 'angular2-hotkeys'
 
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
@@ -45,6 +46,9 @@ export function metaFactory (serverService: ServerService): MetaLoader {
     BrowserModule,
     // FIXME: https://github.com/maxisam/ngx-clipboard/issues/133
     ClipboardModule,
+    HotkeyModule.forRoot({
+      cheatSheetCloseEsc: true
+    } as IHotkeyOptions),
 
     CoreModule,
     SharedModule,

client/yarn.lock

@@ -305,6 +305,10 @@
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-0.0.5.tgz#5cdcbe08e81075d5dbf15466b311359b02a30c2b"
 
+"@types/mousetrap@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@types/mousetrap/-/mousetrap-1.6.0.tgz#c3951ab98b88ff6093cd0b1e4f8591af439141b8"
+
 "@types/node@*":
   version "10.5.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.5.4.tgz#6eccc158504357d1da91434d75e86acde94bb10b"
@@ -766,6 +770,13 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+angular2-hotkeys@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/angular2-hotkeys/-/angular2-hotkeys-2.1.2.tgz#6693ecc2fbbf6f3874fb6715804e88ba6a584c0a"
+  dependencies:
+    "@types/mousetrap" "^1.6.0"
+    mousetrap "^1.6.0"
+
 angular2-notifications@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/angular2-notifications/-/angular2-notifications-1.0.2.tgz#93b6c6838dc582c3838d46d03a21adc333056059"
@@ -4958,6 +4969,10 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   dependencies:
     minimist "0.0.8"
 
+mousetrap@^1.6.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.2.tgz#caadd9cf886db0986fb2fee59a82f6bd37527587"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"