changeset 21:d9c0a1ca005c

Prototype some playback controls, and tabbed menus in the sidebar.

--- a/src/app/app.component.css	Fri Oct 28 08:29:24 2016 +0100
+++ b/src/app/app.component.css	Fri Oct 28 16:27:25 2016 +0100
@@ -7,6 +7,10 @@
 }
 
 md-sidenav {
-  width: 240px;
   text-align: center;
 }
+
+.md-tab-body {
+  background-color: black;
+}
+

--- a/src/app/app.component.html	Fri Oct 28 08:29:24 2016 +0100
+++ b/src/app/app.component.html	Fri Oct 28 16:27:25 2016 +0100
@@ -1,5 +1,5 @@
 <md-toolbar color="primary">
-  <md-icon svgSrc="/assets/duck.svg"></md-icon>
+  <md-icon svgSrc="assets/duck.svg"></md-icon>
   <!-- This fills the remaining space of the current row -->
   <span class="app-toolbar-filler"></span>
 
@@ -17,11 +17,28 @@
 
 <md-sidenav-layout>
   <md-sidenav align="end" mode="side" opened>
-    <md-slider></md-slider>
-    <button md-icon-button (click)="testRef()">
-      <md-icon>face</md-icon>
-    </button>
-    <h1>{{count}}</h1>
+    <md-tab-group>
+      <md-tab>
+        <template md-tab-label>
+          Playback
+        </template>
+        <template md-tab-content>
+          <app-playback-control class="playback-content"></app-playback-control>
+          <button md-icon-button (click)="testRef()">
+            <md-icon>face</md-icon>
+          </button>
+          <h1>{{count}}</h1>
+        </template>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>
+          Feature Extraction
+        </template>
+        <template md-tab-content>
+          <p>Extraction</p>
+        </template>
+      </md-tab>
+    </md-tab-group>
   </md-sidenav>
   <app-waveform [audioBuffer]="audioBuffer"></app-waveform>
 </md-sidenav-layout>

--- a/src/app/app.module.ts	Fri Oct 28 08:29:24 2016 +0100
+++ b/src/app/app.module.ts	Fri Oct 28 16:27:25 2016 +0100
@@ -8,12 +8,14 @@
 import {MaterialModule} from "@angular/material";
 import { WaveformComponent } from './waveform/waveform.component';
 import { AudioFileOpenComponent } from './audio-file-open/audio-file-open.component';
+import { PlaybackControlComponent } from './playback-control/playback-control.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     WaveformComponent,
-    AudioFileOpenComponent
+    AudioFileOpenComponent,
+    PlaybackControlComponent
   ],
   imports: [
     BrowserModule,

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/playback-control/playback-control.component.css	Fri Oct 28 16:27:25 2016 +0100
@@ -0,0 +1,19 @@
+.play {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.play md-icon {
+  font-size: 50px;
+  width: 50px;
+  height: 50px;
+}
+
+.seek-controls {
+  display: block;
+  margin: auto;
+}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/playback-control/playback-control.component.html	Fri Oct 28 16:27:25 2016 +0100
@@ -0,0 +1,8 @@
+<button md-icon-button class="play"><md-icon>play_circle_outline</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>
+</span>
+<md-slider></md-slider>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/playback-control/playback-control.component.spec.ts	Fri Oct 28 16:27:25 2016 +0100
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PlaybackControlComponent } from './playback-control.component';
+
+describe('PlaybackControlComponent', () => {
+  let component: PlaybackControlComponent;
+  let fixture: ComponentFixture<PlaybackControlComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlaybackControlComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlaybackControlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/playback-control/playback-control.component.ts	Fri Oct 28 16:27:25 2016 +0100
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-playback-control',
+  templateUrl: './playback-control.component.html',
+  styleUrls: ['./playback-control.component.css']
+})
+export class PlaybackControlComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}