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

Added ability to modify file metadata

Browse Source
This commit is contained in:
Isaac Abadi
2022-06-17 15:34:12 -04:00
parent 53a181e04d
commit 9cf8b87c6e
12 changed files with 264 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/app/dialogs/video-info-dialog/video-info-dialog.component.html
View File

@@ -1,36 +1,64 @@
<h4 mat-dialog-title>{{file.title}}</h4>
<mat-dialog-content>
<div class="info-item">
<div class="info-item-label"><strong><ng-container i18n="Video name property">Name:</ng-container>&nbsp;</strong></div>
<div class="info-item-value">{{file.title}}</div>
</div>
<div class="info-item">
<div class="info-item-label"><strong><ng-container i18n="Video URL property">URL:</ng-container>&nbsp;</strong></div>
<div class="info-item-value"><a target="_blank" [href]="file.url">{{file.url}}</a></div>
</div>
<div class="info-item">
<div class="info-item-label"><strong><ng-container i18n="Video ID property">Uploader:</ng-container>&nbsp;</strong></div>
<div class="info-item-value">{{file.uploader ? file.uploader : 'N/A'}}</div>
<div style="width: 100%; position: relative;">
<button style="position: absolute; right: 16px; top: 8px;" mat-icon-button (click)="editing = !editing"><mat-icon>edit</mat-icon></button>
</div>
<mat-form-field class="info-field">
<input [(ngModel)]="new_file.title" matInput placeholder="Name" i18n-placeholder="Name" [disabled]="!editing">
</mat-form-field>
<mat-form-field class="info-field">
<input [(ngModel)]="new_file.url" matInput placeholder="URL" i18n-placeholder="URL" [disabled]="!editing">
<button mat-icon-button matSuffix (click)="window.open(new_file.url, '_blank')">
<mat-icon>link</mat-icon>
</button>
</mat-form-field>
<mat-form-field class="info-field">
<input [(ngModel)]="new_file.uploader" matInput placeholder="Uploader" i18n-placeholder="Uploader" [disabled]="!editing">
</mat-form-field>
<mat-form-field class="info-field">
<mat-label i18n="Upload date">Upload date</mat-label>
<input [value]="upload_date" matInput [matDatepicker]="picker" (dateChange)="uploadDateChanged($event)" [disabled]="!editing">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field class="info-field">
<input [(ngModel)]="new_file.thumbnailPath" matInput placeholder="Thumbnail path" i18n-placeholder="Thumbnail path" [disabled]="!editing">
</mat-form-field>
<mat-form-field class="info-field">
<input [(ngModel)]="new_file.thumbnailURL" matInput placeholder="Thumbnail URL" i18n-placeholder="Thumbnail URL" [disabled]="!editing || new_file.thumbnailPath">
</mat-form-field>
<mat-form-field class="info-field">
<mat-select placeholder="Category" i18n-placeholder="Category" [value]="category" (valueChange)="categoryChanged($event)" [compareWith]="categoryComparisonFunction" [disabled]="!editing">
<mat-option [value]="{}">
N/A
</mat-option>
<mat-option *ngFor="let available_category of postsService.categories | keyvalue" [value]="available_category">
{{available_category.value.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="info-field">
<input type="number" [(ngModel)]="new_file.view_count" matInput placeholder="View count" i18n-placeholder="View count" [disabled]="!editing">
</mat-form-field>
<mat-form-field class="info-field">
<input type="number" [(ngModel)]="new_file.local_view_count" matInput placeholder="Local view count" i18n-placeholder="Local view count" [disabled]="!editing">
</mat-form-field>
<mat-divider style="margin-bottom: 16px;"></mat-divider>
<div class="info-item">
<div class="info-item-label"><strong><ng-container i18n="Video file size property">File size:</ng-container>&nbsp;</strong></div>
<div class="info-item-value">{{file.size ? filesize(file.size) : 'N/A'}}</div>
<div class="info-item-value">{{new_file.size ? filesize(new_file.size) : 'N/A'}}</div>
</div>
<div class="info-item">
<div class="info-item-label"><strong><ng-container i18n="Video path property">Path:</ng-container>&nbsp;</strong></div>
<div class="info-item-value">{{file.path ? file.path : 'N/A'}}</div>
</div>
<div class="info-item">
<div class="info-item-label"><strong><ng-container i18n="Video upload date property">Upload Date:</ng-container>&nbsp;</strong></div>
<div class="info-item-value">{{file.upload_date ? file.upload_date : 'N/A'}}</div>
</div>
<div class="info-item">
<div class="info-item-label"><strong><ng-container i18n="Category property">Category:</ng-container>&nbsp;</strong></div>
<div class="info-item-value"><ng-container *ngIf="file.category"><mat-chip-list><mat-chip>{{file.category.name}}</mat-chip></mat-chip-list></ng-container><ng-container *ngIf="!file.category">N/A</ng-container></div>
<div class="info-item-value">{{new_file.path ? new_file.path : 'N/A'}}</div>
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close><ng-container i18n="Close subscription info button">Close</ng-container></button>
<button mat-button mat-dialog-close><ng-container i18n="Close video info button">Close</ng-container></button>
<button mat-button [disabled]="!metadataChanged()" (click)="saveChanges()"><ng-container i18n="Save video info button">Save</ng-container></button>
</mat-dialog-actions>

4
src/app/dialogs/video-info-dialog/video-info-dialog.component.scss
View File

@@ -17,6 +17,10 @@
vertical-align: top;
}
.info-field {
width: 90%;
}
.a-wrap {
word-wrap: break-word
}

69
src/app/dialogs/video-info-dialog/video-info-dialog.component.ts
View File

@@ -1,6 +1,9 @@
import { Component, OnInit, Inject } from '@angular/core';
import filesize from 'filesize';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { PostsService } from 'app/posts.services';
import { Category, DatabaseFile } from 'api-types';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-video-info-dialog',
@@ -8,15 +11,75 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
styleUrls: ['./video-info-dialog.component.scss']
})
export class VideoInfoDialogComponent implements OnInit {
file: any;
file: DatabaseFile;
new_file: DatabaseFile;
filesize;
constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
window = window;
upload_date: Date;
category: Category;
editing = false;
constructor(@Inject(MAT_DIALOG_DATA) public data: any, public postsService: PostsService, private datePipe: DatePipe) { }
ngOnInit(): void {
this.filesize = filesize;
if (this.data) {
this.file = this.data.file;
this.initializeFile(this.data.file);
}
this.postsService.reloadCategories();
}
initializeFile(file: DatabaseFile): void {
this.file = file;
this.new_file = JSON.parse(JSON.stringify(file));
// use UTC for the date picker. not the cleanest approach but it allows it to match the upload date
this.upload_date = new Date(this.new_file.upload_date);
this.upload_date.setMinutes( this.upload_date.getMinutes() + this.upload_date.getTimezoneOffset() );
this.category = this.file.category ? this.category : {};
// we need to align whether missing category is null or undefined. this line helps with that.
if (!this.file.category) { this.new_file.category = null; this.file.category = null; }
}
saveChanges(): void {
const change_obj = {};
const keys = Object.keys(this.file);
keys.forEach(key => {
if (this.file[key] !== this.new_file[key]) change_obj[key] = this.new_file[key];
});
this.postsService.updateFile(this.file.uid, change_obj).subscribe(res => {
this.getFile();
});
}
getFile(): void {
this.postsService.getFile(this.file.uid).subscribe(res => {
this.file = res['file'];
this.initializeFile(this.file);
});
}
uploadDateChanged(event): void {
this.new_file.upload_date = this.datePipe.transform(event.value, 'yyyy-MM-dd');
}
categoryChanged(event): void {
this.new_file.category = Object.keys(event).length ? {uid: event.uid, name: event.name} : null;
}
categoryComparisonFunction(option: Category, value: Category): boolean {
// can't access properties of null/undefined values, prehandle these
if (!option && !value) return true;
else if (!option || !value) return false;
return option.uid === value.uid;
}
metadataChanged(): boolean {
return JSON.stringify(this.file) !== JSON.stringify(this.new_file);
}
}