TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-03 22:01:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

added theming support with 3 themes (only 2 selectable for now)

Browse Source 
switched from css to scss default style system

cleaned up unused code in app component

upated youtube search results styling

downloading video from home screen now shows local progress bar under that video
This commit is contained in:
Isaac Grynsztein
2020-02-20 10:45:37 -05:00
parent 8545016f1d
commit c58f8a4058
16 changed files with 319 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/main/main.component.css
View File

@@ -81,4 +81,34 @@ mat-form-field.mat-form-field {
.margined {
margin-left: 20px;
margin-right: 20px;
}
.results-div {
position: relative;
top: -15px;
}
.first-result-card {
border-radius: 4px 4px 0px 0px !important;
}
.last-result-card {
border-radius: 0px 0px 4px 4px !important;
}
.only-result-card {
border-radius: 4px !important;
}
.result-card {
height: 120px;
border-radius: 0px;
padding-bottom: 5px;
}
.download-progress-bar {
z-index: 999;
position: absolute;
bottom: 0px;
width: 150px;
}

32
src/app/main/main.component.html
View File

@@ -9,15 +9,15 @@
<form class="example-form">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-9">
<mat-form-field class="example-full-width">
<div [ngClass]="allowQualitySelect ? 'col-sm-9' : null" class="col-12">
<mat-form-field color="accent" class="example-full-width">
<input style="padding-right: 25px;" matInput (ngModelChange)="inputChanged($event)" [(ngModel)]="url" [placeholder]="'URL' + (youtubeSearchEnabled ? ' or search' : '')" type="url" name="url" [formControl]="urlForm" required #urlinput>
<mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
<button class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>
</mat-form-field>
</div>
<div class="col-7 col-sm-3">
<mat-form-field style="display: inline-block; width: inherit; min-width: 120px;">
<div *ngIf="allowQualitySelect" class="col-7 col-sm-3">
<mat-form-field color="accent" style="display: inline-block; width: inherit; min-width: 120px;">
<mat-label>Quality</mat-label>
<mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedQuality">
<ng-container *ngFor="let option of qualityOptions[(audioOnly) ? 'audio' : 'video']">
@@ -33,21 +33,20 @@
</div>
</div>
</div>
<span *ngIf="results_showing">
<span *ngFor="let result of results">
<mat-card style="height: 120px; border-radius: 0px">
<div class="results-div" *ngIf="results_showing">
<span *ngFor="let result of results; let i = index">
<mat-card class="result-card mat-elevation-z7" [ngClass]="[(i === 0 && results.length > 1) ? 'first-result-card' : '', ((i === results.length-1) && results.length > 1) ? 'last-result-card' : '', (results.length === 1) ? 'only-result-card' : '']">
<div class="search-card-title">
{{result.title}}
</div>
<div style="font-size: 12px">
<div style="font-size: 12px; margin-bottom: 10px;">
{{result.uploaded}}
</div>
<br/>
<button mat-flat-button color="primary" style="float: left;" (click)="useURL(result.videoUrl)">Use URL</button>
<button mat-stroked-button color="primary" (click)="visitURL(result.videoUrl)" style="float: right">View</button>
</mat-card>
</span>
</span>
</div>
</form>
<br/>
<mat-checkbox (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
@@ -56,7 +55,7 @@
</mat-card-content>
<mat-card-actions>
<button style="margin-left: 8px; margin-bottom: 8px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-stroked-button
color="primary">Download</button>
color="accent">Download</button>
</mat-card-actions>
</mat-card>
</div>
@@ -95,13 +94,18 @@
<mat-grid-tile *ngFor="let file of mp3s; index as i;">
<app-file-card (removeFile)="removeFromMp3($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
[length]="file.duration" [isAudio]="true"></app-file-card>
<mat-progress-bar *ngIf="downloading_content['audio'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
</mat-grid-tile>
</mat-grid-list>
<mat-divider *ngIf="playlists.audio.length > 0"></mat-divider>
<div style="width: 100%; text-align: center; margin-top: 10px;" *ngIf="playlists.audio.length > 0">
<h6>Playlists</h6>
</div>
<mat-grid-list *ngIf="playlists.audio.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
<mat-grid-tile *ngFor="let playlist of playlists.audio; let i = index;">
<app-file-card (removeFile)="removePlaylistMp3(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
[length]="null" [isAudio]="true" [isPlaylist]="true" [count]="playlist.fileNames.length"></app-file-card>
<mat-progress-bar *ngIf="downloading_content['audio'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
</mat-grid-tile>
</mat-grid-list>
</div>
@@ -121,13 +125,19 @@
<mat-grid-tile *ngFor="let file of mp4s; index as i;">
<app-file-card (removeFile)="removeFromMp4($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
[length]="file.duration" [isAudio]="false"></app-file-card>
<mat-progress-bar *ngIf="downloading_content['video'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
</mat-grid-tile>
</mat-grid-list>
<mat-divider *ngIf="playlists.video.length > 0"></mat-divider>
<div style="width: 100%; text-align: center; margin-top: 10px;" *ngIf="playlists.video.length > 0">
<h6>Playlists</h6>
</div>
<mat-grid-list *ngIf="playlists.video.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
<mat-grid-tile *ngFor="let playlist of playlists.video; let i = index;">
<app-file-card (removeFile)="removePlaylistMp4(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
[length]="null" [isAudio]="false" [isPlaylist]="true" [count]="playlist.fileNames.length"></app-file-card>
<mat-progress-bar *ngIf="downloading_content['video'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
</mat-grid-tile>
</mat-grid-list>
</div>

59
src/app/main/main.component.ts
View File

@@ -33,7 +33,10 @@ export class MainComponent implements OnInit {
url = '';
exists = '';
percentDownloaded: number;
// settings
fileManagerEnabled = false;
allowQualitySelect = false;
downloadOnlyMode = false;
baseStreamPath;
audioFolderPath;
@@ -53,6 +56,7 @@ export class MainComponent implements OnInit {
files_cols = (window.innerWidth <= 450) ? 2 : 4;
playlists = {'audio': [], 'video': []};
playlist_thumbnails = {};
downloading_content = {'audio': {}, 'video': {}};
urlForm = new FormControl('', [Validators.required]);
@@ -171,6 +175,7 @@ export class MainComponent implements OnInit {
this.youtubeSearchEnabled = result['YoutubeDLMaterial']['API'] && result['YoutubeDLMaterial']['API']['use_youtube_API'] &&
result['YoutubeDLMaterial']['API']['youtube_API_key'];
this.youtubeAPIKey = this.youtubeSearchEnabled ? result['YoutubeDLMaterial']['API']['youtube_API_key'] : null;
this.allowQualitySelect = result['YoutubeDLMaterial']['Extra']['allow_quality_select'];
this.postsService.path = backendUrl;
this.postsService.startPath = backendUrl;
@@ -246,23 +251,38 @@ export class MainComponent implements OnInit {
public goToFile(name, isAudio) {
if (isAudio) {
this.downloadHelperMp3(name, false, true);
this.downloadHelperMp3(name, false, false);
} else {
this.downloadHelperMp4(name, false, true);
this.downloadHelperMp4(name, false, false);
}
}
public goToPlaylist(playlistID, type) {
for (let i = 0; i < this.playlists[type].length; i++) {
const playlist = this.playlists[type][i];
if (playlist.id === playlistID) {
// found the playlist, now go to it
const playlist = this.getPlaylistObjectByID(playlistID, type);
if (playlist) {
if (this.downloadOnlyMode) {
this.downloading_content[type][playlistID] = true;
this.downloadPlaylist(playlist.fileNames, type, playlist.name, playlistID);
} else {
const fileNames = playlist.fileNames;
this.router.navigate(['/player', {fileNames: fileNames.join('|nvr|'), type: type, id: playlistID}]);
}
} else {
// playlist not found
console.error(`Playlist with ID ${playlistID} not found!`);
}
}
getPlaylistObjectByID(playlistID, type) {
for (let i = 0; i < this.playlists[type].length; i++) {
const playlist = this.playlists[type][i];
if (playlist.id === playlistID) {
return playlist;
}
}
return null;
}
public removeFromMp3(name: string) {
for (let i = 0; i < this.mp3s.length; i++) {
if (this.mp3s[i].id === name) {
@@ -275,6 +295,7 @@ export class MainComponent implements OnInit {
this.postsService.removePlaylist(playlistID, 'audio').subscribe(res => {
if (res['success']) {
this.playlists.audio.splice(index, 1);
this.openSnackBar('Playlist successfully removed.', '');
}
this.getMp3s();
});
@@ -292,6 +313,7 @@ export class MainComponent implements OnInit {
this.postsService.removePlaylist(playlistID, 'video').subscribe(res => {
if (res['success']) {
this.playlists.video.splice(index, 1);
this.openSnackBar('Playlist successfully removed.', '');
}
this.getMp4s();
});
@@ -315,9 +337,8 @@ export class MainComponent implements OnInit {
// if download only mode, just download the file. no redirect
if (forceView === false && this.downloadOnlyMode && !this.iOS) {
if (is_playlist) {
for (let i = 0; i < name.length; i++) {
this.downloadAudioFile(decodeURI(name[i]));
}
const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
this.downloadPlaylist(name, 'audio', zipName);
} else {
this.downloadAudioFile(decodeURI(name));
}
@@ -343,9 +364,8 @@ export class MainComponent implements OnInit {
// if download only mode, just download the file. no redirect
if (forceView === false && this.downloadOnlyMode) {
if (is_playlist) {
for (let i = 0; i < name.length; i++) {
this.downloadVideoFile(decodeURI(name[i]));
}
const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
this.downloadPlaylist(name, 'video', zipName);
} else {
this.downloadVideoFile(decodeURI(name));
}
@@ -422,7 +442,9 @@ export class MainComponent implements OnInit {
}
downloadAudioFile(name) {
this.downloading_content['audio'][name] = true;
this.postsService.downloadFileFromServer(name, 'audio').subscribe(res => {
this.downloading_content['audio'][name] = false;
const blob: Blob = res;
saveAs(blob, name + '.mp3');
@@ -437,7 +459,9 @@ export class MainComponent implements OnInit {
}
downloadVideoFile(name) {
this.downloading_content['video'][name] = true;
this.postsService.downloadFileFromServer(name, 'video').subscribe(res => {
this.downloading_content['video'][name] = false;
const blob: Blob = res;
saveAs(blob, name + '.mp4');
@@ -451,6 +475,15 @@ export class MainComponent implements OnInit {
});
}
downloadPlaylist(fileNames, type, zipName = null, playlistID = null) {
this.postsService.downloadFileFromServer(fileNames, type, zipName).subscribe(res => {
if (playlistID) { this.downloading_content[type][playlistID] = false };
const blob: Blob = res;
saveAs(blob, zipName + '.zip');
});
}
clearInput() {
this.url = '';
this.results_showing = false;
@@ -493,7 +526,7 @@ export class MainComponent implements OnInit {
const reYT = new RegExp(youtubeStrRegex);
const ytValid = reYT.test(str);
if (valid && ytValid && Date.now() - this.last_url_check > 1000) {
if (str !== this.last_valid_url) {
if (str !== this.last_valid_url && this.allowQualitySelect) {
// get info
this.getURLInfo(str);
}