proper icon

electron-builder.json

@@ -1,12 +1,13 @@
 {
-  "productName": "angular-electron",
+  "productName": "audible-to-mp3",
+  "extraFiles": ["./ffmpeg.exe"],
   "directories": {
     "output": "app-builds"
   },
   "win": {
     "icon": "dist",
     "target": [
-      "portable"
+      "nsis"
     ]
   },
   "mac": {

main.ts

@@ -52,7 +52,7 @@ function createWindow() {
     // when you should delete the corresponding element.
     win = null;
   });
-}
+} 
 
 try {
 

package.json

@@ -39,6 +39,7 @@
     "@angular/flex-layout": "^6.0.0-beta.17",
     "@angular/material": "^6.4.3",
     "jspdf": "^1.3.5",
+    "material-design-icons": "^3.0.1",
     "ngx-electron": "^1.0.4",
     "rxjs-compat": "^6.0.0-rc.0"
   },

src/app/app.module.ts

@@ -30,7 +30,9 @@ import {MatCardModule} from '@angular/material/card';
 import {MatListModule} from '@angular/material/list';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {FlexLayoutModule} from "@angular/flex-layout";
+import {MatIconModule} from '@angular/material/icon';
 
+import {MatStepperModule} from '@angular/material/stepper';
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -51,9 +53,11 @@ export function HttpLoaderFactory(http: HttpClient) {
     AppRoutingModule,
     MatCardModule,
     NgxElectronModule,
+    MatStepperModule,
     MatButtonModule,
     MatToolbarModule,
     MatListModule,
+    MatIconModule,
     FlexLayoutModule,
     MatProgressSpinnerModule,
     TranslateModule.forRoot({

src/app/components/home/home.component.html

@@ -1,51 +1,90 @@
-<div class="container mat-typography" id="images">
+<div class="container mat-typography" id="images" fxLayout="row" fxLayoutGap="3em">
+
+  <mat-vertical-stepper [linear]="false" #stepper fxFlex="50">
+    <mat-step>
+      <ng-template matStepLabel>Source</ng-template>
+      <form #f="ngForm" (ngSubmit)="onSubmit(f)">
+        <button mat-stroked-button (click)="browseInput.click()">Browse file to encode</button>
+        <input style="display: none" #browseInput mat-button type="file" #file ngModel name="directory" (change)="onChange(file.files)"
+        />
+        <!--<button mat-stroked-button type="submit" color="primary">Discover</button>-->
+        <!--<input type="button" (click)="getPDF()" value="get pdf :)"/>-->
+      </form>
+
+      <button mat-button matStepperNext>Next</button>
+    </mat-step>
+    <mat-step>
+      <ng-template matStepLabel>Destination</ng-template>
+      <form #f="ngForm" (ngSubmit)="onSubmit(f)">
+        <button mat-stroked-button (click)="browseInputTarget.click()">Browse target directory</button>
+        <input style="display: none" #browseInputTarget mat-button type="file" #fileTarget ngModel name="targetDirectory" webkitDirectory
+          (change)="onChangeTargetDir(fileTarget.files)" />
+        <!--<button mat-stroked-button type="submit" color="primary">Discover</button>-->
+        <!--<input type="button" (click)="getPDF()" value="get pdf :)"/>-->
+      </form>
+
+      <button mat-button matStepperNext>Next</button>
+    </mat-step>
+    <mat-step *ngIf="(chapters | async)?.length">
+      <ng-template matStepLabel>Encode</ng-template>
+      <div *ngIf="chapters | async as chaptersAs">
+        IN : {{inPath}}
+        <br/> OUT: {{getOutFilename(chaptersAs[0],0)}}
+        <br/>
+
+        <button mat-flat-button (click)="encode()">encode</button>
+      </div>
+    </mat-step>
+  </mat-vertical-stepper>
+
+
 
-  <form #f="ngForm" (ngSubmit)="onSubmit(f)">
-    <button mat-stroked-button (click)="browseInput.click()">Browse file</button>
-    <input style="display: none" #browseInput mat-button type="file" #file ngModel name="directory" (change)="onChange(file.files)"
-    />
-    <!--<button mat-stroked-button type="submit" color="primary">Discover</button>-->
-    <!--<input type="button" (click)="getPDF()" value="get pdf :)"/>-->
-  </form>
 
-  <button mat-stroked-button (click)="encode()">encode</button>
 
   <!--<mat-card>
       Hello world !
   </mat-card>-->
+  <div fxFlex="50">
+    <h1>{{(book | async)?.title}}</h1>
+    <h2>{{(book | async)?.author}}</h2>
 
-  <h1>{{(book | async)?.title}}</h1>
-  <h2>{{(book | async)?.author}}</h2>
+    <div *ngIf="book | async as bookAs">
+      {{slugify(bookAs.author)}}/{{slugify(bookAs.title)}}/
+    </div>
 
-  <div *ngIf="book | async as bookAs">
-    {{slugify(bookAs.author)}}/{{slugify(bookAs.title)}}/
-  </div>
+    <div>
+      <ng-container *ngFor="let chapter of chapters | async" style="padding-top: 0.2em; padding-bottom: 0.2em">
+        <div fxLayout="row" style="padding: 0.8em">
+          <div fxFlex="10">
 
-  <div>
-    <div *ngFor="let chapter of chapters | async" fxLayout="row" style="padding-top: 0.2em; padding-bottom: 0.2em">
 
-      <div fxFlex="10">
-
+            <b>{{chapter.name}}</b>
 
-        <b>{{chapter.name}}</b>
-
-      </div>
-      <div fxFlex="10">
-          {{(chapter.end - chapter.start) / 60 | number: '1.0-0'}}m
-      </div>
+          </div>
+          <div fxFlex="10">
+            {{(chapter.end - chapter.start) / 60 | number: '1.0-0'}}m
+          </div>
 
-      <div fxFlex>
-        &nbsp;
-      </div>
-      <div>
-        <span *ngIf="chapter.inprocess"> &#9749;</span>
-        <span *ngIf="chapter.processed">&#9745;</span>
-      </div>
+          <div fxFlex>
+            &nbsp;
+          </div>
+          <div>
 
+            <span *ngIf="chapter.inprocess"> 
+                <mat-icon>transform</mat-icon>
+            </span>
+            <span *ngIf="chapter.processed">
+              <mat-icon>done</mat-icon>
+            </span>
+          </div>
+        </div>
+        <mat-divider></mat-divider>
 
-    </div>
-    <div>
-      <!--<app-filediv *ngFor="let file of files | async" filename="{{file}}" class="file">
+
+      </ng-container>
+      <div>
+        <!--<app-filediv *ngFor="let file of files | async" filename="{{file}}" class="file">
   
   </app-filediv>-->
+      </div>
     </div>

src/app/components/home/home.component.ts

@@ -34,6 +34,7 @@ export class HomeComponent implements OnInit {
   public observableFiles: Observable<any[]>;
   private syncChap = [];
   private inPath = '';
+  private targetDir;
 
   slugify(text) {
     return text.toString().toLowerCase()
@@ -78,13 +79,13 @@ export class HomeComponent implements OnInit {
 
   }
 
-  getOutFilename(chapter, i) {
+  public getOutFilename(chapter, i) {
     console.log(this.book);
     console.log(this.syncBook);
 
     const numChapter = (i + '').padStart(4, '0');
 
-    return this.slugify(this.syncBook.author) + '/' + this.slugify(this.syncBook.title) + '/'
+    return this.targetDir + '\\' + this.slugify(this.syncBook.author) + '/' + this.slugify(this.syncBook.title) + '/'
       + numChapter + '-' + this.slugify(chapter.name) + '.mp3';
   }
 
@@ -133,6 +134,15 @@ export class HomeComponent implements OnInit {
     });*/
   }
 
+  onChangeTargetDir(file) {
+    // console.log('on change !');
+    // console.log(files[0].path);
+
+    // console.log(file);
+    const path = file[0].path;
+    this.targetDir = path;
+  }
+
   getPDF() {
     /*console.log(jsPDF);
     const doc = new jsPDF();

src/styles.scss

@@ -6,6 +6,8 @@ html, body {
   height: 100%;
 }
 
+@import "material-design-icons/iconfont/material-icons.css";
+
 
 @import '~@angular/material/theming';
 @include mat-core();