tour.component.ts

tour.component.ts

import {
  Component,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  OnInit,
  ViewChild,
  NgZone
} from '@angular/core';
import { COMMON_PIPES, COMMON_DIRECTIVES } from '@angular/common';
import { RouteParams, Router, CanActivate } from '@angular/router-deprecated';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Store} from '@ngrx/store';
import {Observable} from 'rxjs/Observable';
import {Subscription} from 'rxjs/Subscription';

import {IUser, IGetRequestResponse, IUserOnMap} from '../../api';
import {RequestsRtManager} from '../../requests/requests-rt-manager';
import {ChatManager, SendMessageRequest} from '../../chat-rt';
import {TourViewModel} from './tour.viewmodel';
import {MenuPanelTourComponent } from '../menu-panel-tour';
import {TourPreparation} from '../tour-preparation';
import {TourMinimap} from '../tour-minimap';
import {TourMessenger} from '../tour-messenger';
import {ToastsComponent} from '../toasts';
import {ProxiesActions} from '../../proxies/proxies.actions';
import {RequestsActions} from '../../requests/requests.actions';
import {VirtPlayerComponent} from '../virt-player';
import {ActivityOpacityDirective} from './activity-opacity/activity-opacity.directive';
import {shouldActivate, isRequestStatus} from '../../common/helpers';
import {POLL_STATUS, RECEIVE_STATUS} from '../../streams';
import {ChatRemoveAllMessages} from '../../chat';
import {IToast} from '../../toasts';


@Component({
  selector: 'tour',
  template: require('./tour.html'),
  styles: [require('./tour.css')],
  directives: [
    COMMON_DIRECTIVES,
    MenuPanelTourComponent,
    TourPreparation,
    TourMinimap,
    TourMessenger,
    ToastsComponent,
    VirtPlayerComponent,
    ActivityOpacityDirective
  ],
  providers: [TourViewModel],
  pipes: [COMMON_PIPES],
  changeDetection: ChangeDetectionStrategy.OnPush
})
@CanActivate((to, from) => {
  return shouldActivate(to, from).then((hasAccess) => {
    return hasAccess && isRequestStatus(['online'],
      +to.params['requestId'], // tslint:disable-line
      ['ClientMainScreen']);
  });
})
export class Tour implements OnInit {

  tourPrepare: any;
  tourComponents: any;
  videoPlayer: any;
  toasts: IToast[] = [];

  @ViewChild(VirtPlayerComponent) private _playerComponent: VirtPlayerComponent;
  private _timeoutId: any;
  private proxy$ = new BehaviorSubject<IUser>(null);
  private request$ = new BehaviorSubject<IGetRequestResponse>(null);
  private _subscriptions: Subscription[] = [];

  constructor(
    public vm: TourViewModel,
    private _store: Store<any>,
    private _chatManager: ChatManager,
    private _requestsManager: RequestsRtManager,
    private _requestActions: RequestsActions,
    private _routeParams: RouteParams,
    private _router: Router,
    private _proxiesActions: ProxiesActions,
    private _changeDetector: ChangeDetectorRef) {
  }

  ngOnInit() {
    this._requestsManager.restoreSubscription();
    this._requestsManager.on(['completed', 'halted'], (request, proxy) => {
      this._router.navigate(['ClientMainScreen']);
    });
    const requestSubscription = Observable.combineLatest(
      this.vm.requests$,
      this.vm.proxiesById$
    ).subscribe(args => {
      const requests = args[0];
      const users = args[1];
      const requestId = +this._routeParams.get('requestId');
      const request = requests[requestId];
      if (!request) {
        this._requestActions.get({ request_id: requestId });
        return;
      }
      this.request$.next(request);
      const proxy = users[request.proxy_id];
      if (!proxy) {
        return;
      }
      this.proxy$.next(proxy);
      this._store.dispatch({ type: POLL_STATUS, payload: request.stream_hls_url });
    });
    this._subscriptions.push(requestSubscription);
    this._subscriptions.push(this.vm.isOnline$
      .distinctUntilChanged()
      .subscribe(isOnline => {
        this.toasts = [{
          text: isOnline
            ? 'Stream is online.'
            : 'Stream is currently offline.',
          type: isOnline ? 'notification' : 'error',
          autohide: isOnline
        }];
        this._changeDetector.markForCheck();
        this._changeDetector.detectChanges();
      }));
    this._proxiesActions.getOnlineProxies();
  }

  ngAfterViewInit() {
    this._timeoutId = setTimeout(() => {
      this.tourPrepare.opaque = true;
      this.tourComponents.opaque = false;
      this.videoPlayer.opaque = false;
      this._changeDetector.markForCheck();
      this._changeDetector.detectChanges();
    }, 4800);
  }

  ngOnDestroy() {
    clearTimeout(this._timeoutId);
    this._subscriptions.forEach(sub => sub.unsubscribe());
    this._store.dispatch(new ChatRemoveAllMessages());
  }

  onFinish() {
    if (!confirm('Are you sure?')) {
      return;
    }
    this.request$.subscribe(request => {
      if (!request) {
        return;
      }
      if (request.status === 'completed') {
        this._router.navigate(['ClientMainScreen']);
      } else {
        this._requestActions.setCompleted(request.request_id);
      }
    });
  }

  onReload() {
    this._playerComponent.reload();
  }

  onMessageSend(text: string) {
    const requestId = +this._routeParams.get('requestId');
    const sendRequest = new SendMessageRequest(requestId, text);
    this._chatManager.sendMessage(sendRequest);
  }

  onPlayerError(text) {
    this.toasts.push({
      text,
      type: 'error',
      autohide: false
    });
    this._changeDetector.markForCheck();
    this._changeDetector.detectChanges();
  }
}