added library section and ability to upload and view files

gulpfile.js

@@ -39,7 +39,7 @@ function ngc(done) {
 
 let rollUpBundle;
 let rollupApp = gulp.series(
-    function cleanGlobalJs() {return del('dist/app*.js')},
+    function cleanRollupJs() {return del('dist/app*.js')},
     function buildRollupApp() {
         let devPlugins = [
             nodeResolve({jsnext: true, module: true}),
@@ -67,6 +67,9 @@ let rollupApp = gulp.series(
                     format: 'iife',
                     dest: `dist/app-${Date.now().toString(36)}.js`
                 });
+            })
+            .catch((err) => {
+                console.error(err);
             });
     }
 );
@@ -78,7 +81,8 @@ let globalJs = gulp.series(
         return gulp.src([
             'node_modules/core-js/client/shim.min.js',
             'node_modules/zone.js/dist/zone.min.js',
-            'node_modules/hammerjs/hammer.js'
+            'node_modules/hammerjs/hammer.js',
+            'lib/jsmediatags/jsmediatags.min.js'
         ])
             .pipe(concat('global.js'))
             .pipe(rev())
@@ -120,13 +124,13 @@ gulp.task('index', index);
 
 let appJs = gulp.series(componentStyles, ngc, rollupApp);
 let build = gulp.series(clean, gulp.parallel(appJs, globalJs, globalSass), index);
+gulp.task('build', build);
 
 gulp.task('default', gulp.series(build, function watch() {
     let componentStylePaths = ['src/**/*.scss', '!src/globalSass/**'];
     let componentTemplatePaths = ['src/**/*.html', '!src/index.html'];
 
-    gulp.watch(['src/**/*.ts', ...componentStylePaths, ...componentTemplatePaths], gulp.series(ngc, rollupApp, index));
-    gulp.watch(componentStylePaths, gulp.series(componentStyles, index));
+    gulp.watch(['src/**/*.ts', ...componentStylePaths, ...componentTemplatePaths], gulp.series(componentStyles, ngc, rollupApp, index));
     gulp.watch('src/globalSass/**/*.scss', gulp.series(globalSass, index));
     gulp.watch('src/index.html', index);
 }));

src/app.component.html

@@ -1,41 +1,44 @@
 <md-sidenav-container>
-    <md-toolbar>
-        Toolbar
-    </md-toolbar>
+    <div  class="main-content">
+        <md-toolbar>
+            <toolbar></toolbar>
+        </md-toolbar>
+        <!--<button (click)="toggleHeading()">Toggle Heading</button>-->
+        <!--<h1 *ngIf="showHeading">Hello Angular</h1>-->
 
-    <!--<button (click)="toggleHeading()">Toggle Heading</button>-->
-    <!--<h1 *ngIf="showHeading">Hello Angular</h1>-->
+        <!--<h3>List of Heroes</h3>-->
+        <!--<div *ngFor="let hero of heroes">{{hero}}</div>-->
 
-    <!--<h3>List of Heroes</h3>-->
-    <!--<div *ngFor="let hero of heroes">{{hero}}</div>-->
 
-
-    <!--<div>-->
+        <!--<div>-->
         <!--<button md-raised-button color="primary">Primary Button</button>-->
         <!--<button md-raised-button color="accent">Accent Button</button>-->
-    <!--</div>-->
+        <!--</div>-->
 
-    <!--<div class="deck1">-->
+        <!--<div class="deck1">-->
         <!--<button md-raised-button color="primary">Primary Button</button>-->
         <!--<button md-raised-button color="accent">Accent Button</button>-->
-    <!--</div>-->
+        <!--</div>-->
 
-    <!--<div class="deck2">-->
+        <!--<div class="deck2">-->
         <!--<button md-raised-button color="primary">Primary Button</button>-->
         <!--<button md-raised-button color="accent">Accent Button</button>-->
-    <!--</div>-->
-
-    <!--<md-slider min="-1" max="1" step="0.015625" value="0"></md-slider>-->
-
-    <md-grid-list cols="7" gutterSize="3" rowHeight="300">
-        <md-grid-tile colspan="2" class="deck1" style="background-color: red">
-            a
-        </md-grid-tile>
-        <md-grid-tile colspan="3" style="background-color: blue">
-b
-        </md-grid-tile>
-        <md-grid-tile colspan="2" class="deck2" style="background-color: green">
-c
-        </md-grid-tile>
-    </md-grid-list>
-</md-sidenav-container>
+        <!--</div>-->
+
+        <!--<md-slider min="-1" max="1" step="0.015625" value="0"></md-slider>-->
+        <div class="deck-section">
+            <div class="deck1 deck" style="background-color: red;">
+                a
+            </div>
+            <div class="center-controls" style="background-color: blue;">
+                b
+            </div>
+            <div class="deck2 deck" style="background-color: green;">
+                c
+            </div>
+        </div>
+        <div class="library-section">
+            <library></library>
+        </div>
+    </div>
+</md-sidenav-container>

src/app.component.scss

@@ -0,0 +1,37 @@
+.main-content {
+  padding: 0 3px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.row {
+  margin-bottom: 3px;
+}
+
+.deck-section {
+  height: 450px;
+  display: flex;
+}
+
+.deck-section-item {
+
+}
+
+.deck {
+  width: 28.6%
+}
+
+.center-controls {
+  width: 42.8%;
+}
+
+.library-section {
+  flex-grow: 1;
+  display: flex;
+}
+
+library {
+  display: flex;
+  flex-grow: 1;
+}

src/app.component.ts

@@ -2,15 +2,14 @@ import {Component} from '@angular/core';
 import moment from 'moment';
 
 @Component({
-    moduleId: module.id,
     selector: 'my-app',
     templateUrl: 'app.component.html',
     styles: [`
         h1 {
             color: red;
         }
     `],
-    styleUrls: ['app.css']
+    styleUrls: ['app.component.css']
 })
 export class AppComponent {
     showHeading = true;

src/app.module.ts

@@ -1,12 +1,21 @@
-import {NgModule}      from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
-import { MaterialModule } from '@angular/material';
-import {AppComponent}  from './app.component';
+import {NgModule} from "@angular/core";
+import {BrowserModule} from "@angular/platform-browser";
+import {MaterialModule} from "@angular/material";
+import {AppComponent} from "./app.component";
+import {LibraryComponent} from "./library/library.component";
+import {FileDropDirective} from "./library/fileDrop.directive";
+import {ToolbarComponent} from "./toolbar/toolbar.component";
+import {AudioUtil} from "./services/audioUtil";
+import {Db} from "./services/db";
+import {SpinnerComponent} from "./spinner/spinner.component";
 
 @NgModule({
     imports: [BrowserModule, MaterialModule.forRoot()],
-    declarations: [AppComponent],
-    bootstrap: [AppComponent]
+    declarations: [AppComponent, LibraryComponent, ToolbarComponent, FileDropDirective, SpinnerComponent],
+    bootstrap: [AppComponent],
+    providers: [AudioUtil, Db]
 })
+
 export class AppModule {
+
 }

src/globalSass/material/_materialTheme.scss

@@ -67,4 +67,9 @@ $deck2-theme: md-dark-theme(md-palette($dvs-grey), md-palette($dvs-blue));
 
 [md-raised-button], [md-raised-button]:active {
   box-shadow: none;
+}
+
+md-grid-tile figure {
+  align-items: stretch;
+  justify-content: flex-start;
 }

src/library/fileDrop.directive.ts

@@ -0,0 +1,150 @@
+interface iFileAPI {
+    readAsDataURL(file: File, cb: Function): void;
+    readAsBinaryString(file: File, cb: Function): void;
+    readAsArrayBuffer(file: File, cb: Function): void;
+    readAsText(file: File, cb: Function): void;
+}
+
+declare let FileAPI: iFileAPI;
+
+import {
+    Directive,
+    EventEmitter,
+    ElementRef,
+    HostListener,
+    Input,
+    Output,
+} from '@angular/core';
+
+export interface Options {
+    readAs?: string;
+}
+
+@Directive({ selector: '[fileDrop]' })
+export class FileDropDirective {
+    @Output() public fileOver: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Output() public onFileDrop: EventEmitter<File> = new EventEmitter<File>();
+    @Input() public options: Options;
+
+    private element: ElementRef;
+
+    public constructor(
+        element: ElementRef
+    ) {
+        this.element = element;
+    }
+
+    @HostListener('dragover', [
+        '$event',
+    ])
+    public onDragOver(event: any): void {
+        const transfer = this.getDataTransfer(event);
+
+        if (!this.haveFiles(transfer.types)) {
+            return;
+        }
+
+        transfer.dropEffect = 'copy';
+        this.preventAndStop(event);
+        this.emitFileOver(true);
+    }
+
+    @HostListener('dragleave', [
+        '$event',
+    ])
+    public onDragLeave(event: any): void {
+        if (event.currentTarget === (this as any).element[0]) {
+            return;
+        }
+
+        this.preventAndStop(event);
+        this.emitFileOver(false);
+    }
+
+    @HostListener('drop', [
+        '$event',
+    ])
+    public onDrop(event: any): void {
+        const transfer = this.getDataTransfer(event);
+
+        if (!transfer) {
+            return;
+        }
+
+        this.preventAndStop(event);
+        this.emitFileOver(false);
+        this.readFile(transfer.files[0]);
+    }
+
+    private readFile(file: File): void {
+        const strategy = this.pickStrategy();
+
+        if (!strategy) {
+            this.emitFileDrop(file);
+        } else {
+            // XXX Waiting for angular/zone.js#358
+            const method = `readAs${strategy}`;
+
+            let reader  = new FileReader();
+            reader[method](file, (event) => {
+                if (event.type === 'load') {
+                    this.emitFileDrop(event.result);
+                } else if (event.type === 'error') {
+                    throw new Error(`Couldn't read file '${file.name}'`);
+                }
+            });
+        }
+    }
+
+    private emitFileOver(isOver: boolean): void {
+        this.fileOver.emit(isOver);
+    }
+
+    private emitFileDrop(file: any): void {
+        this.onFileDrop.emit(file);
+    }
+
+    private pickStrategy(): string | void {
+        if (!this.options) {
+            return;
+        }
+
+        if (this.hasStrategy(this.options.readAs)) {
+            return this.options.readAs;
+        }
+    }
+
+    private hasStrategy(type: string): boolean {
+        return [
+                'DataURL',
+                'BinaryString',
+                'ArrayBuffer',
+                'Text',
+            ].indexOf(type) !== -1;
+    }
+
+    private getDataTransfer(event: any | any): DataTransfer {
+        return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer;
+    }
+
+    private preventAndStop(event: any): void {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    private haveFiles(types: any): boolean {
+        if (!types) {
+            return false;
+        }
+
+        if (types.indexOf) {
+            return types.indexOf('Files') !== -1;
+        }
+
+        if (types.contains) {
+            return types.contains('Files');
+        }
+
+        return false;
+    }
+}

src/library/library.component.html

@@ -0,0 +1,15 @@
+<div id="library">
+    <div fileDrop
+         [ngClass]="{'file-is-over-drop': fileIsOverDrop && !uploadingFile}" class="file-drop-section"
+         (fileOver)="onFileOverDrop($event)"
+         (onFileDrop)="uploadFile($event)">
+        drop files here
+        <spinner *ngIf="uploadingFile"></spinner>
+    </div>
+    <div class="file-list">
+        <div *ngFor="let songDetails of allSongDetails | async">
+            {{songDetails.title}}
+            <img [src]="'data:' + songDetails.picFormat + ';base64,' + songDetails.base64Pic" alt="Album Cover" height="64px">
+        </div>
+    </div>
+</div>