From ee1fc23a8794364687ea06cbb738bc5f6ce70d7f Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 28 Aug 2018 09:32:03 +0200 Subject: keyboard shortcuts and key map view (#974) --- client/package.json | 1 + client/src/app/app.component.html | 2 ++ client/src/app/app.component.ts | 31 ++++++++++++++++++++++++++++++- client/src/app/app.module.ts | 4 ++++ client/yarn.lock | 15 +++++++++++++++ 5 files changed, 52 insertions(+), 1 deletion(-) diff --git a/client/package.json b/client/package.json index 281fd0e95..4b24d5e31 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 09b2c15be..697abec8e 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -1,5 +1,7 @@
+ +
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 2149768a2..a69f419be 100644 --- a/client/src/app/app.component.ts +++ b/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 () { diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 118831ed3..b484a89e8 100644 --- a/client/src/app/app.module.ts +++ b/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, diff --git a/client/yarn.lock b/client/yarn.lock index 5d7ad7522..c79ec3c27 100644 --- a/client/yarn.lock +++ b/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" -- cgit v1.2.3