diff src/app/playback-control/playback-control.component.html @ 32:6fb6c04878ec

wire up playback controls.

--- a/src/app/playback-control/playback-control.component.html	Wed Nov 30 10:21:27 2016 +0000
+++ b/src/app/playback-control/playback-control.component.html	Wed Nov 30 10:21:49 2016 +0000
@@ -1,10 +1,17 @@
-<button md-icon-button class="play">
-  <md-icon>play_circle_outline</md-icon>
+<button md-icon-button class="play" (click)="emitPlayPause()">
+  <md-icon>
+    <template [ngIf]="isPlaying()">pause_circle_outline</template>
+    <template [ngIf]="!isPlaying()">play_circle_outline</template>
+  </md-icon>
 </button>
 <span class="seek-controls">
-  <button md-icon-button><md-icon>fast_rewind</md-icon></button>
-  <button md-icon-button><md-icon>skip_previous</md-icon></button>
-  <button md-icon-button><md-icon>skip_next</md-icon></button>
-  <button md-icon-button><md-icon>fast_forward</md-icon></button>
+  <button md-icon-button (click)="emitFastRewindStart()"><md-icon>skip_previous</md-icon></button>
+  <button md-icon-button (click)="emitFastRewind()"><md-icon>fast_rewind</md-icon></button>
+  <button md-icon-button (click)="emitFastForward()"><md-icon>fast_forward</md-icon></button>
+  <button md-icon-button (click)="emitFastForwardEnd()"><md-icon>skip_next</md-icon></button>
 </span>
-<md-slider></md-slider>
+<md-slider #volume
+           (slide)="emitVolumeChanged(volume.percent)"
+           (click)="emitVolumeChanged(volume.percent)"
+           value="50">
+</md-slider>