changeset 344:7b099900f049

Add a basic component for drawing a Play head.

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/playhead/PlayHeadHelpers.ts	Thu May 25 17:51:03 2017 +0100
@@ -0,0 +1,5 @@
+/**
+ * Created by lucast on 23/05/2017.
+ */
+export type TimePixelMapper = (timeSeconds: number) => number;
+export type OnSeekHandler = (timeSeconds: number) => void;

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/playhead/playhead.component.ts	Thu May 25 17:51:03 2017 +0100
@@ -0,0 +1,34 @@
+/**
+ * Created by lucast on 23/05/2017.
+ */
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input
+} from '@angular/core';
+import {TimePixelMapper} from './PlayHeadHelpers';
+
+const defaultColour = '#000';
+
+@Component({
+  selector: 'ugly-play-head',
+  template: `<div [ngStyle]="currentStyle"></div>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PlayHeadComponent {
+  @Input() timeToPixel: TimePixelMapper;
+  @Input() set currentTime(x: number) {
+    const position = this.timeToPixel(x);
+    this.currentStyle.transform = `translateX(${position}px)`;
+  }
+  @Input() set colour(hex: string) {
+    this.currentStyle.background = hex || defaultColour;
+  }
+
+  private currentStyle = {
+    background: defaultColour,
+    height: '100%',
+    width: '2px',
+    transform: null
+  };
+}