* parametered animation for slideshow direction

* keyboard control
* angular2 update

src/app/app.component.css

@@ -0,0 +1,9 @@
+.pause-indicator {
+  position: fixed;
+  width: 100%;
+  z-index: 999;
+  background-color: lightgrey;
+  color: red;
+  text-align: center;
+  font-weight: bold;
+}

src/app/app.component.html

@@ -1 +1,2 @@
-<router-outlet></router-outlet>
+<div class="pause-indicator" *ngIf="paused">Slideshow is paused</div>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { TimerService } from './shared/service/timer.service';
+import { SlideShowService } from './display/slide-show.service';
 
 @Component({
   selector: 'app-root',
@@ -7,6 +8,29 @@ import { TimerService } from './shared/service/timer.service';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  constructor(private timerService: TimerService) {}
+  constructor(private timerService: TimerService,
+              private slideShowService: SlideShowService) {}
+
   public ngOnInit() {}
+
+  @HostListener('document:keyup', ['$event.key'])
+  private keyPressed(key: string) {
+    switch (key) {
+      case ' ':
+        this.timerService.togglePause();
+        break;
+      case 'ArrowLeft':
+        this.timerService.pause();
+        this.slideShowService.prevSlide();
+        break;
+      case 'ArrowRight':
+        this.timerService.pause();
+        this.slideShowService.nextSlide();
+        break;
+    }
+  }
+
+  public get paused(): boolean {
+    return this.timerService.paused;
+  }
 }

src/app/display/commit-tracker/commit-tracker.component.ts

@@ -1,16 +1,16 @@
-import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription, timer } from 'rxjs';
+import {Component, HostBinding, OnDestroy, OnInit} from '@angular/core';
+import {Title} from '@angular/platform-browser';
+import {ActivatedRoute} from '@angular/router';
+import {Subscription, timer} from 'rxjs';
 
-import { slideInOutAnimation } from '../../shared/slide-in-out-animation';
-import { CommitTrackerService } from '../../shared/service/commit-tracker.service';
-import { SettingsService } from '../../shared/service/settings.service';
-import { Commit } from '../../shared/commit';
-import { CommitStatus } from '../../shared/commit-status.enum';
-import { Result } from '../../shared/result.enum';
-import { Build } from '../../shared/build';
-import { environment } from '../../../environments/environment';
+import {slideInOutAnimation} from '../../shared/slide-in-out-animation';
+import {CommitTrackerService} from '../../shared/service/commit-tracker.service';
+import {AnimationDirection, SettingsService} from '../../shared/service/settings.service';
+import {Commit} from '../../shared/commit';
+import {CommitStatus} from '../../shared/commit-status.enum';
+import {Result} from '../../shared/result.enum';
+import {Build} from '../../shared/build';
+import {environment} from '../../../environments/environment';
 
 const TIMER_COMMITTRACKER_REFRESH = 10000;
 const DEFAULT_AVATAR = '/assets/riddler.png';
@@ -27,7 +27,11 @@ export class CommitTrackerComponent implements OnInit, OnDestroy {
   private refreshCommitTrackerTimer: Subscription;
 
   @HostBinding('@slideInOutAnimation')
-  slideIn = false;
+  public get slideInOutAnimation() {
+    return this.settings.animationDirection === AnimationDirection.RIGHT
+      ? {value: 'right', params: {offsetEnter: 100, offsetLeave: -100}}
+      : {value: 'left', params: {offsetEnter: -100, offsetLeave: 100}};
+  }
 
   constructor(private commitTrackerService: CommitTrackerService,
               private settings: SettingsService,

src/app/display/kanban-board/kanban-board.component.css

@@ -1,7 +1,8 @@
 :host {
     display: inline-block;
     height: 100vh;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: scroll;
     background-color: #444;
     padding: 10px;
 }

src/app/display/kanban-board/kanban-board.component.ts

@@ -1,10 +1,10 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
+import {Component, HostBinding, OnInit} from '@angular/core';
+import {Title} from '@angular/platform-browser';
+import {ActivatedRoute} from '@angular/router';
 
-import { KanbanBoard, KanbanEntry, KanbanService, } from '../shared';
-import { slideInOutAnimation } from '../../shared/slide-in-out-animation';
-import { SettingsService } from '../../shared/service/settings.service';
+import {KanbanBoard, KanbanEntry, KanbanService,} from '../shared';
+import {slideInOutAnimation} from '../../shared/slide-in-out-animation';
+import {AnimationDirection, SettingsService} from '../../shared/service/settings.service';
 
 @Component({
   selector: 'app-kanban-board',
@@ -15,7 +15,11 @@ import { SettingsService } from '../../shared/service/settings.service';
 export class KanbanBoardComponent implements OnInit {
 
   @HostBinding('@slideInOutAnimation')
-  slideIn = true;
+  public get slideInOutAnimation() {
+    return this.settingService.animationDirection === AnimationDirection.RIGHT
+      ? {value: 'right', params: {offsetEnter: 100, offsetLeave: -100}}
+      : {value: 'left', params: {offsetEnter: -100, offsetLeave: 100}};
+  }
 
   constructor(private titleService: Title,
               private route: ActivatedRoute,

src/app/display/slide-show.service.ts

@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
-import { Slide, SlideVisibility } from '../shared/slide';
-import { SlideService } from '../shared/service/slide.service';
-import { Router } from '@angular/router';
-import { SettingsService } from '../shared/service/settings.service';
+import {Injectable} from '@angular/core';
+import {Slide, SlideVisibility} from '../shared/slide';
+import {SlideService} from '../shared/service/slide.service';
+import {Router} from '@angular/router';
+import {AnimationDirection, SettingsService} from '../shared/service/settings.service';
 
 @Injectable()
 export class SlideShowService {
@@ -17,30 +17,52 @@ export class SlideShowService {
     this.reloadSlides();
   }
 
-  public nextSlide() {
-    switch (this.currentSlideIndex) {
-      case this.slides.length - 1:
-        this.currentSlideIndex++;
-        this.router.navigate(['/kanban']);
-        break;
-      case this.slides.length:
-        this.currentSlideIndex++;
-        this.router.navigate(['/commit-tracker']);
-        break;
-      case this.slides.length + 1:
-        this.currentSlideIndex = -1;
-        this.reloadSlides();
-        this.router.navigate(['/watchers']);
-        break;
-      default:
-        this.oddEven = !this.oddEven;
-        this.currentSlideIndex++;
-        this.router.navigate([
-          this.oddEven ? '/slideshow-odd' : '/slideshow-even',
-          this.slides[this.currentSlideIndex].id
-        ]);
-        break;
+  public prevSlide() {
+    this.settingsService.animationDirection = AnimationDirection.LEFT;
+    console.log('prev-in', this.slides.length, this.currentSlideIndex);
+    if (this.currentSlideIndex > this.slides.length) {
+      this.currentSlideIndex = this.slides.length;
+      this.router.navigate(['/watchers']);
+    } else if (this.currentSlideIndex === this.slides.length) {
+      this.currentSlideIndex--;
+      this.router.navigate(['/commit-tracker']);
+    } else if (this.currentSlideIndex < 0) {
+      this.currentSlideIndex = this.slides.length + 1;
+      this.reloadSlides();
+      this.router.navigate(['/kanban']);
+    } else {
+      this.oddEven = !this.oddEven;
+      this.router.navigate([
+        this.oddEven ? '/slideshow-odd' : '/slideshow-even',
+        this.slides[this.currentSlideIndex].id
+      ]);
+      this.currentSlideIndex--;
     }
+    console.log('prev-out', this.slides.length, this.currentSlideIndex);
+  }
+
+  public nextSlide() {
+    this.settingsService.animationDirection = AnimationDirection.RIGHT;
+    console.log('next-in', this.slides.length, this.currentSlideIndex);
+    if (this.currentSlideIndex < 0) {
+      this.currentSlideIndex++;
+      this.router.navigate(['/kanban']);
+    } else if (this.currentSlideIndex === this.slides.length) {
+      this.currentSlideIndex++;
+      this.router.navigate(['/commit-tracker']);
+    } else if (this.currentSlideIndex > this.slides.length) {
+      this.currentSlideIndex = -1;
+      this.reloadSlides();
+      this.router.navigate(['/watchers']);
+    } else {
+      this.oddEven = !this.oddEven;
+      this.router.navigate([
+        this.oddEven ? '/slideshow-odd' : '/slideshow-even',
+        this.slides[this.currentSlideIndex].id
+      ]);
+      this.currentSlideIndex++;
+    }
+    console.log('next-out', this.slides.length, this.currentSlideIndex);
   }
 
   private reloadSlides() {

src/app/display/slide-show/slide-show.component.ts

@@ -3,8 +3,9 @@ import {ActivatedRoute} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 
 import * as marked from 'marked';
-import {slideInOutAnimation} from '../../shared/slide-in-out-animation';
 import {Slide, SlideType} from '../../shared/slide';
+import {slideInOutAnimation} from '../../shared/slide-in-out-animation';
+import {AnimationDirection, SettingsService} from '../../shared/service/settings.service';
 
 @Component({
   selector: 'app-slide-show',
@@ -17,10 +18,15 @@ export class SlideShowComponent implements OnInit {
   public slide: Slide;
 
   @HostBinding('@slideInOutAnimation')
-  slideIn = true;
+  public get slideInOutAnimation() {
+    return this.settings.animationDirection === AnimationDirection.RIGHT
+      ? {value: 'right', params: {offsetEnter: 100, offsetLeave: -100}}
+      : {value: 'left', params: {offsetEnter: -100, offsetLeave: 100}};
+  }
 
   constructor(private route: ActivatedRoute,
-              private titleService: Title) {
+              private titleService: Title,
+              private settings: SettingsService) {
     this.md = marked.setOptions({});
   }
 

src/app/display/watchers/watchers.component.ts

@@ -1,7 +1,7 @@
 import {Component, HostBinding, OnInit} from '@angular/core';
-import { Title } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
-import { SettingsService } from '../../shared/service/settings.service';
+import {Title} from '@angular/platform-browser';
+import {ActivatedRoute} from '@angular/router';
+import {AnimationDirection, SettingsService} from '../../shared/service/settings.service';
 import {slideInOutAnimation} from '../../shared/slide-in-out-animation';
 import {WatcherService} from '../shared/watcher.service';
 import {WatchedIssue} from '../shared/watched-issue.model';
@@ -18,7 +18,11 @@ const DEFAULT_AVATAR = '/assets/riddler.png';
 export class WatchersComponent implements OnInit {
 
   @HostBinding('@slideInOutAnimation')
-  slideIn = true;
+  public get slideInOutAnimation() {
+    return this.settingService.animationDirection === AnimationDirection.RIGHT
+      ? {value: 'right', params: {offsetEnter: 100, offsetLeave: -100}}
+      : {value: 'left', params: {offsetEnter: -100, offsetLeave: 100}};
+  }
 
   constructor(private titleService: Title,
               private route: ActivatedRoute,

src/app/shared/service/settings.service.ts

@@ -13,6 +13,8 @@ export class SettingsService {
   private teamSubject: Subject<Team> = new Subject<Team>();
   private intervalSubject: Subject<number> = new Subject<number>();
 
+  public animationDirection: AnimationDirection = AnimationDirection.RIGHT;
+
   constructor() {}
 
   get team(): Team {
@@ -51,3 +53,8 @@ export class SettingsService {
     return this.teamSubject.asObservable();
   }
 }
+
+export enum AnimationDirection {
+  LEFT,
+  RIGHT,
+}

src/app/shared/service/timer.service.ts

@@ -14,6 +14,7 @@ const TIME_SEPARATOR = ':';
 
 @Injectable()
 export class TimerService implements OnDestroy {
+  public paused = false;
   private autoSwitch = false;
   private slideShowTimer: Subscription;
   private selfUpdateCheckerTimer: Subscription;
@@ -52,19 +53,32 @@ export class TimerService implements OnDestroy {
   }
 
   private changeSlide() {
-    if (this.autoSwitch && this.isDuringDailyStandup()) {
-      this.router.navigate(['/kanban']);
+    if (!this.paused) {
+      if (this.autoSwitch && this.isDuringDailyStandup()) {
+        this.router.navigate(['/kanban']);
+      }
+      if (this.autoSwitch && !this.isDuringDailyStandup()) {
+        this.slideShowService.nextSlide();
+      }
+      this.setSlideTimer(this.settings.slideInterval);
     }
-    if (this.autoSwitch && !this.isDuringDailyStandup()) {
-      this.slideShowService.nextSlide();
-    }
-    this.setSlideTimer(this.settings.slideInterval);
   }
 
   public setSlideTimer(delay: number) {
     this.slideTimerSubject.next(delay);
   }
 
+  public togglePause() {
+    this.paused = !this.paused;
+    if (!this.paused) {
+      this.setSlideTimer(this.settings.slideInterval);
+    }
+  }
+
+  public pause() {
+    this.paused = true;
+  }
+
   private isDuringDailyStandup(): boolean {
     if (this.settings.team.dailyLockEnabled) {
       const now = new Date();

src/app/shared/slide-in-out-animation.ts

@@ -21,7 +21,7 @@ export const slideInOutAnimation =
       style({
         // start with the content positioned off the right of the screen,
         // -400% is required instead of -100% because the negative position adds to the width of the element
-        transform: 'translateX(100%)'
+        transform: 'translateX({{offsetEnter}}%)'
       }),
 
       // animation and styles at end of transition
@@ -36,7 +36,7 @@ export const slideInOutAnimation =
       // animation and styles at end of transition
       animate('.75s cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({
         // transition the right position to -400% which slides the content out of view
-        transform: 'translateX(-100%)'
+        transform: 'translateX({{offsetLeave}}%)'
       }))
     ])
   ]);