First commit

package.json

@@ -12,22 +12,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.0.0",
+    "@angular/animations": "^5.2.0",
-    "@angular/common": "^4.0.0",
+    "@angular/cdk": "^5.0.4",
-    "@angular/compiler": "^4.0.0",
+    "@angular/common": "^5.2.0",
-    "@angular/core": "^4.0.0",
+    "@angular/compiler": "^5.2.0",
-    "@angular/forms": "^4.0.0",
+    "@angular/core": "^5.2.0",
-    "@angular/http": "^4.0.0",
+    "@angular/forms": "^5.0.0",
-    "@angular/platform-browser": "^4.0.0",
+    "@angular/http": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/material": "^5.0.4",
-    "@angular/router": "^4.0.0",
+    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/router": "^5.0.0",
     "core-js": "^2.4.1",
-    "rxjs": "^5.1.0",
+    "ng4-configure": "^0.1.7",
+    "rxjs": "^5.5.3",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.1.2",
+    "@angular/cli": "1.5.5",
-    "@angular/compiler-cli": "^4.0.0",
+    "@angular/compiler-cli": "^5.0.0",
     "@angular/language-service": "^4.0.0",
     "@types/jasmine": "2.5.45",
     "@types/node": "~6.0.60",
@@ -43,6 +46,6 @@
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "typescript": "~2.5.3"
   }
 }

src/app/app.component.css

@@ -0,0 +1,41 @@
+.demo-card {
+    margin: 16px;
+}
+
+.demo-basic {
+    padding: 0;
+}
+
+.demo-basic .mat-card-content {
+    padding: 16px;
+}
+
+mat-toolbar.top {
+    height: 60px;
+    width: 100%;
+    text-align: center;
+}
+
+/*::ng-deep .mat-form-field-placeholder{
+
+    transform: scale(.75) translateY(20px) !important;
+  }*/
+
+.big {
+    width: 60%;
+    margin: 0 auto;
+}
+
+.centered {
+    margin: 0 auto;
+    top: 50%;
+    left: 50%;
+}
+
+.example-full-width {
+    width: 100%;
+}
+
+mat-form-field.mat-form-field {
+    font-size: 24px;
+  }

src/app/app.component.html

@@ -1,20 +1,40 @@
-<!--The whole content below can be removed with the new code.-->
+<mat-toolbar color="primary" class="top">
-<div style="text-align:center">
+        <table width="100%" height="100%">
-  <h1>
+            <td class="topbar" style="text-align: left; left:0px; font-size: 15px">
-    Welcome to {{title}}!!
+            </td>
-  </h1>
+            <td class="topbar" style="text-align: center">
-  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" />
+                <div style="margin-top: 14px">{{topBarTitle}}</div>
-</div>
+            </td>
-<h2>Here are some links to help you start: </h2>
+            <td class="topbar" style="text-align: right">
-<ul>
+    
-  <li>
+            </td>
-    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+        </table>
-  </li>
+</mat-toolbar>
-  <li>
-    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
-  </li>
-</ul>
 
+<br/>
+
+<mat-card id="card" class="big demo-basic">
+    <mat-card-title>
+        <mat-toolbar color="primary">Youtube Downloader</mat-toolbar>
+    </mat-card-title>
+    <div style="width: 100%; height: 100%; padding-left: 24px; padding-right: 24px; position: relative">
+        <mat-card-content>
+            <form class="example-form">
+                <mat-form-field class="example-full-width">
+                    <input matInput [(ngModel)]="url" placeholder="URL" type="url" name="url" [formControl]="urlForm" required>
+                    <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
+                </mat-form-field>
+            </form>
+            <br/>
+            <mat-checkbox [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
+            <button style="float: right; margin-top: -16px" (click)="downloadClicked()" [disabled]="downloadingmp3" type="submit" mat-raised-button color="primary">Download</button>
+        </mat-card-content>
+    </div>
+</mat-card>
+<br/>
+<div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+</div>
+<ng-template #nofile>
+
+</ng-template>

src/app/app.component.ts

@@ -1,4 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import {PostsService} from './posts.services';
+import { Observable } from 'rxjs/Observable';
+import {FormControl, Validators} from '@angular/forms';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/mapTo';
+import 'rxjs/add/operator/toPromise';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +13,109 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  downloadingmp3: boolean = false;
+  audioOnly: boolean;
+  urlError: boolean = false;
+  path: string = '';
+  url: string = '';
+  exists: boolean = false;
+  topBarTitle: string = "Youtube Downloader";
+  constructor(private postsService: PostsService) { 
+    this.audioOnly = true;
+
+    // starts handshake
+    this.doHandshake();
+  }
+
+  urlForm = new FormControl('', [Validators.required]);
+
+  doHandshake() {
+    this.postsService.startHandshake().subscribe(url => {
+      this.postsService.path = "http://" + url;
+      this.postsService.handShakeComplete = true;
+      console.log("Handshake complete!");
+    },
+    error => {
+      console.log("Initial handshake failed, make sure port 17442 is open!");
+      this.postsService.handShakeComplete = false;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  downloadHelperMp3(name: string)
+  {
+    this.postsService.getFileStatusMp3(name).subscribe(fileExists => {
+      this.exists = fileExists;
+      if (this.exists == false)
+      {
+        this.downloadHelperMp3(name);
+      }
+      else
+      {
+        window.location.href = 'https://grynsztein.com/audio/' + this.path + ".mp3";
+      }
+    });
+    
+  }
+
+  downloadHelperMp4(name: string)
+  {
+    this.postsService.getFileStatusMp4(name).subscribe(fileExists => {
+      this.exists = fileExists;
+      if (this.exists == false)
+      {
+        this.downloadHelperMp4(name);
+      }
+      else
+      {
+        window.location.href = 'https://grynsztein.com/video/' + this.path + ".mp4";
+      }
+    });
+    
+  }
+
+  downloadClicked()
+  {
+    if (this.ValidURL(this.url))
+    {
+      this.urlError = false;
+      this.path = "";
+      
+      if (this.audioOnly)
+      {
+        this.downloadingmp3 = true;
+        this.postsService.makeMP3(this.url).subscribe(posts => {
+          this.path = posts;
+          if (this.path != "-1")
+          {
+            this.downloadHelperMp3(this.path);
+          }
+        });
+        
+      }
+      else
+      {
+        this.downloadingmp3 = true;
+        this.postsService.makeMP4(this.url).subscribe(posts => {
+          this.path = posts;
+          if (this.path != "-1")
+          {
+            this.downloadHelperMp4(this.path);
+          }
+        });
+      }
+    }
+    else
+    {
+      this.urlError = true;
+    }
+  }
+
+  ValidURL(str) {
+    var strRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
+    var re=new RegExp(strRegex);
+    return re.test(str);
+  }
 }

src/app/app.module.ts

@@ -1,16 +1,43 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule,
+  MatSnackBarModule, MatCardModule, MatSelectModule, MatToolbarModule, MatCheckboxModule,
+  MatProgressBarModule  } from '@angular/material';
+  import { NgConfigureModule, ConfigureOptions } from 'ng4-configure/ng4-configure';
+  import { MyOptions } from './configuration_options.component';
+  import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppComponent } from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
+import { PostsService } from 'app/posts.services';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatNativeDateModule,
+    MatRadioModule,
+    FormsModule,
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    HttpModule,
+    HttpClientModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatSnackBarModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatListModule,
+    MatProgressBarModule
   ],
-  providers: [],
+  providers: [PostsService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/configuration_options.component.ts

@@ -0,0 +1,7 @@
+import { ConfigureOptions } from 'ng4-configure/ng4-configure';
+ 
+   export class MyOptions extends ConfigureOptions {
+     ConfigurationURL: string = 'assets/config.json';
+     AppVersion: string = '0.0.0';
+     BustCache: boolean = false
+   }

src/app/posts.services.ts

@@ -0,0 +1,63 @@
+import {Injectable} from '@angular/core';
+import {Http} from '@angular/http';
+import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/observable/throw';
+
+@Injectable()
+export class PostsService {
+    path: string = "";
+    audioFolder: string = "";
+    videoFolder: string = "";
+    startPath: string = "http://localhost:17442/";
+    handShakeComplete: boolean = false;
+
+    constructor(private http: Http){
+        console.log('PostsService Initialized...');
+    }
+
+    startHandshake(): Observable<string>
+    {
+        return this.http.get(this.startPath + "url")
+            .map(res => res.json());
+    }
+
+    getVideoFolder(): Observable<string>
+    {
+        return this.http.get(this.startPath + "videofolder")
+            .map(res => res.json());
+    }
+
+    getAudioFolder(): Observable<string>
+    {
+        return this.http.get(this.startPath + "audiofolder")
+            .map(res => res.json());
+    }
+
+    makeMP3(url: string): Observable<string>
+    {
+        return this.http.post(this.path + "tomp3",{url: url})
+            .map(res => res.json());
+    }
+
+    makeMP4(url: string): Observable<string>
+    {
+        return this.http.post(this.path + "tomp4",{url: url})
+            .map(res => res.json());
+    }
+
+    getFileStatusMp3(name: string): Observable<boolean> {
+        return this.http.post(this.path + "mp3fileexists",{name: name})
+            .map(res => res.json());
+    }
+
+    getFileStatusMp4(name: string): Observable<boolean> {
+        return this.http.post(this.path + "mp4fileexists",{name: name})
+            .map(res => res.json());
+    }
+}
+
+
+

src/index.html

@@ -6,7 +6,13 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">    <script src="systemjs.config.js"></script>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  
 </head>
 <body>
   <app-root></app-root>