First commit
Isaac Grynsztein
8 years ago
parent
1ebf3cf36e
commit
d6cb024de1
@ -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;
|
||||||
|
}
|
||||||
@ -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>
|
||||||
|
</td>
|
||||||
|
<td class="topbar" style="text-align: right">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</table>
|
||||||
|
</mat-toolbar>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
<h2>Here are some links to help you start: </h2>
|
<ng-template #nofile>
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
|
|
||||||
</li>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|||||||
@ -1,16 +1,43 @@
|
|||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { NgModule } from '@angular/core';
|
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 { 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({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent
|
AppComponent
|
||||||
],
|
],
|
||||||
imports: [
|
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]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
export class AppModule { }
|
export class AppModule { }
|
||||||
|
|||||||
@ -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
|
||||||
|
}
|
||||||
@ -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());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue