diff --git a/package.json b/package.json index b0451a9..b7a721c 100644 --- a/package.json +++ b/package.json @@ -12,22 +12,25 @@ }, "private": true, "dependencies": { - "@angular/animations": "^4.0.0", - "@angular/common": "^4.0.0", - "@angular/compiler": "^4.0.0", - "@angular/core": "^4.0.0", - "@angular/forms": "^4.0.0", - "@angular/http": "^4.0.0", - "@angular/platform-browser": "^4.0.0", - "@angular/platform-browser-dynamic": "^4.0.0", - "@angular/router": "^4.0.0", + "@angular/animations": "^5.2.0", + "@angular/cdk": "^5.0.4", + "@angular/common": "^5.2.0", + "@angular/compiler": "^5.2.0", + "@angular/core": "^5.2.0", + "@angular/forms": "^5.0.0", + "@angular/http": "^5.0.0", + "@angular/material": "^5.0.4", + "@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/compiler-cli": "^4.0.0", + "@angular/cli": "1.5.5", + "@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" } } diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..2a8b31f 100644 --- a/src/app/app.component.css +++ b/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; + } \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index b41bbe4..521def9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,40 @@ - -
-

- Welcome to {{title}}!! -

- + + + + + +
+ +
{{topBarTitle}}
+ 		+ +
+ + +
+ + + + Youtube Downloader + +
+ +
+ + + Please enter a valid URL! + +
+
+ Only Audio + + +
+ +
+
+
-

Here are some links to help you start:

- + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7b0f672..5b5eb6b 100644 --- a/src/app/app.component.ts +++ b/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); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..a98c8b3 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/configuration_options.component.ts b/src/app/configuration_options.component.ts new file mode 100644 index 0000000..c6d72ff --- /dev/null +++ b/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 + } \ No newline at end of file diff --git a/src/app/posts.services.ts b/src/app/posts.services.ts new file mode 100644 index 0000000..d6962b3 --- /dev/null +++ b/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 + { + return this.http.get(this.startPath + "url") + .map(res => res.json()); + } + + getVideoFolder(): Observable + { + return this.http.get(this.startPath + "videofolder") + .map(res => res.json()); + } + + getAudioFolder(): Observable + { + return this.http.get(this.startPath + "audiofolder") + .map(res => res.json()); + } + + makeMP3(url: string): Observable + { + return this.http.post(this.path + "tomp3",{url: url}) + .map(res => res.json()); + } + + makeMP4(url: string): Observable + { + return this.http.post(this.path + "tomp4",{url: url}) + .map(res => res.json()); + } + + getFileStatusMp3(name: string): Observable { + return this.http.post(this.path + "mp3fileexists",{name: name}) + .map(res => res.json()); + } + + getFileStatusMp4(name: string): Observable { + return this.http.post(this.path + "mp4fileexists",{name: name}) + .map(res => res.json()); + } +} + + + diff --git a/src/index.html b/src/index.html index d4c75e0..510b804 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,13 @@ + + + + + +