add like, dislike and subscribe button hotkeys
[oweals/peertube.git] / client / src / app / +video-channels / video-channels.component.ts
1 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
2 import { ActivatedRoute } from '@angular/router'
3 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
4 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
5 import { RestExtractor } from '@app/shared'
6 import { catchError, distinctUntilChanged, map, switchMap } from 'rxjs/operators'
7 import { Subscription } from 'rxjs'
8 import { AuthService } from '@app/core'
9 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
10 import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
11
12 @Component({
13   templateUrl: './video-channels.component.html',
14   styleUrls: [ './video-channels.component.scss' ]
15 })
16 export class VideoChannelsComponent implements OnInit, OnDestroy {
17   @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
18
19   videoChannel: VideoChannel
20   hotkeys: Hotkey[]
21
22   private routeSub: Subscription
23
24   constructor (
25     private route: ActivatedRoute,
26     private authService: AuthService,
27     private videoChannelService: VideoChannelService,
28     private restExtractor: RestExtractor,
29     private hotkeysService: HotkeysService
30   ) { }
31
32   ngOnInit () {
33     this.routeSub = this.route.params
34                         .pipe(
35                           map(params => params[ 'videoChannelId' ]),
36                           distinctUntilChanged(),
37                           switchMap(videoChannelId => this.videoChannelService.getVideoChannel(videoChannelId)),
38                           catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))
39                         )
40                         .subscribe(videoChannel => this.videoChannel = videoChannel)
41
42     this.hotkeys = [
43       new Hotkey('S', (event: KeyboardEvent): boolean => {
44         this.subscribeButton.subscribed ?
45           this.subscribeButton.unsubscribe() :
46           this.subscribeButton.subscribe()
47         return false
48       }, undefined, 'Subscribe to the account')
49     ]
50     if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
51   }
52
53   ngOnDestroy () {
54     if (this.routeSub) this.routeSub.unsubscribe()
55
56     // Unbind hotkeys
57     if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
58   }
59
60   isUserLoggedIn () {
61     return this.authService.isLoggedIn()
62   }
63 }