update hotkeys to include user-specific routes

also fix left-menu width

3 files changed, 31 insertions, 6 deletions

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 8354a8724..907bc583b 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -133,10 +133,6 @@ export class AppComponent implements OnInit {
         this.toggleMenu()
         return false
       }, undefined, 'Toggle the left menu'),
-      new Hotkey('g s', (event: KeyboardEvent): boolean => {
-        this.router.navigate([ '/videos/subscriptions' ])
-        return false
-      }, undefined, 'Go to the subscriptions videos page'),
       new Hotkey('g o', (event: KeyboardEvent): boolean => {
         this.router.navigate([ '/videos/overview' ])
         return false
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 9ec404557..88ea89639 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -14,6 +14,7 @@ import { AuthUser } from './auth-user.model'
 import { objectToUrlEncoded } from '@app/shared/misc/utils'
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { HotkeysService, Hotkey } from 'angular2-hotkeys'
 
 interface UserLoginWithUsername extends UserLogin {
   access_token: string
@@ -36,6 +37,7 @@ export class AuthService {
 
   loginChangedSource: Observable<AuthStatus>
   userInformationLoaded = new ReplaySubject<boolean>(1)
+  hotkeys: Hotkey[]
 
   private clientId: string = peertubeLocalStorage.getItem(AuthService.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_ID)
   private clientSecret: string = peertubeLocalStorage.getItem(AuthService.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_SECRET)
@@ -46,6 +48,7 @@ export class AuthService {
   constructor (
     private http: HttpClient,
     private notificationsService: NotificationsService,
+    private hotkeysService: HotkeysService,
     private restExtractor: RestExtractor,
     private router: Router,
     private i18n: I18n
@@ -55,6 +58,26 @@ export class AuthService {
 
     // Return null if there is nothing to load
     this.user = AuthUser.load()
+
+    // Set HotKeys
+    this.hotkeys = [
+      new Hotkey('m s', (event: KeyboardEvent): boolean => {
+        this.router.navigate([ '/videos/subscriptions' ])
+        return false
+      }, undefined, 'Go to my subscriptions'),
+      new Hotkey('m v', (event: KeyboardEvent): boolean => {
+        this.router.navigate([ '/my-account/videos' ])
+        return false
+      }, undefined, 'Go to my videos'),
+      new Hotkey('m i', (event: KeyboardEvent): boolean => {
+        this.router.navigate([ '/my-account/video-imports' ])
+        return false
+      }, undefined, 'Go to my imports'),
+      new Hotkey('m c', (event: KeyboardEvent): boolean => {
+        this.router.navigate([ '/my-account/video-channels' ])
+        return false
+      }, undefined, 'Go to my channels')
+    ]
   }
 
   loadClientCredentials () {
@@ -152,6 +175,8 @@ export class AuthService {
     AuthUser.flush()
 
     this.setStatus(AuthStatus.LoggedOut)
+
+    this.hotkeysService.remove(this.hotkeys)
   }
 
   refreshAccessToken () {
@@ -231,6 +256,8 @@ export class AuthService {
 
     this.setStatus(AuthStatus.LoggedIn)
     this.userInformationLoaded.next(true)
+
+    this.hotkeysService.add(this.hotkeys)
   }
 
   private handleRefreshToken (obj: UserRefreshToken) {
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index f1b0a284f..0f98da0e2 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -28,6 +28,7 @@ menu {
 
   .top-menu {
     flex-grow: 1;
+    width: $menu-width;
   }
 
   .logged-in-block {
@@ -193,6 +194,7 @@ menu {
     padding-bottom: 15px;
     padding-left: $menu-lateral-padding;
     padding-right: $menu-lateral-padding;
+    width: $menu-width;
 
     .language, .color-palette {
       display: inline-block;
@@ -238,7 +240,7 @@ menu {
     width: 100% !important;
   }
 
-  .top-menu {
-    width: 100%;
+  .top-menu, .footer {
+    width: 100% !important;
   }
 }