Mercurial > hg > ugly-duckling
changeset 13:b12e78d6185e
Add a component for opening local audio files, unfinished and of course untested. Expect cross-cutting concerns to follow.
author | Lucas Thompson <dev@lucas.im> |
---|---|
date | Thu, 27 Oct 2016 13:36:09 +0100 |
parents | 1244f556512f |
children | 2ae70581dafd |
files | src/app/app.component.html src/app/app.module.ts src/app/audio-file-open/audio-file-open.component.css src/app/audio-file-open/audio-file-open.component.html src/app/audio-file-open/audio-file-open.component.spec.ts src/app/audio-file-open/audio-file-open.component.ts |
diffstat | 6 files changed, 65 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/src/app/app.component.html Thu Oct 27 10:44:34 2016 +0100 +++ b/src/app/app.component.html Thu Oct 27 13:36:09 2016 +0100 @@ -3,11 +3,12 @@ <!-- This fills the remaining space of the current row --> <span class="app-toolbar-filler"></span> + + <app-audio-file-open></app-audio-file-open> <!-- menu opens when trigger button is clicked --> <button md-icon-button [md-menu-trigger-for]="menu"> <md-icon>more_vert</md-icon> </button> - <md-menu x-position="before" #menu="mdMenu"> <button md-menu-item> Settings</button> <button md-menu-item> Help</button>
--- a/src/app/app.module.ts Thu Oct 27 10:44:34 2016 +0100 +++ b/src/app/app.module.ts Thu Oct 27 13:36:09 2016 +0100 @@ -7,11 +7,13 @@ import {MailService} from "./mail.service"; import {MaterialModule} from "@angular/material"; import { WaveformComponent } from './waveform/waveform.component'; +import { AudioFileOpenComponent } from './audio-file-open/audio-file-open.component'; @NgModule({ declarations: [ AppComponent, - WaveformComponent + WaveformComponent, + AudioFileOpenComponent ], imports: [ BrowserModule,
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/audio-file-open/audio-file-open.component.css Thu Oct 27 13:36:09 2016 +0100 @@ -0,0 +1,3 @@ +input { + display: none; +}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/audio-file-open/audio-file-open.component.html Thu Oct 27 13:36:09 2016 +0100 @@ -0,0 +1,4 @@ +<input #open type="file" accept="audio/*" (change)="openAudio($event.srcElement.files)"/> +<button md-icon-button (click)="openAudioDialog()"> + <md-icon>folder_open</md-icon> +</button>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/audio-file-open/audio-file-open.component.spec.ts Thu Oct 27 13:36:09 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 { AudioFileOpenComponent } from './audio-file-open.component'; + +describe('AudioFileOpenComponent', () => { + let component: AudioFileOpenComponent; + let fixture: ComponentFixture<AudioFileOpenComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AudioFileOpenComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AudioFileOpenComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +});
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/audio-file-open/audio-file-open.component.ts Thu Oct 27 13:36:09 2016 +0100 @@ -0,0 +1,25 @@ +import {Component, OnInit, ViewChild, ElementRef} from '@angular/core'; + +@Component({ + selector: 'app-audio-file-open', + templateUrl: './audio-file-open.component.html', + styleUrls: ['./audio-file-open.component.css'] +}) +export class AudioFileOpenComponent implements OnInit { + + @ViewChild('open') open: ElementRef; + + constructor() { } + + ngOnInit() { + } + + openAudio(files: FileList) { + console.log(files); + console.log("open"); + } + + openAudioDialog() { + this.open.nativeElement.click(); + } +}