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

Added duration of video in subscription file card along with implementations of deleting subscribed videos. Subscribed videos now get reloaded after deletion

Browse Source 
sidenav now closes when navigating

Updated subscription info to include more info
This commit is contained in:
Isaac Grynsztein
2020-03-07 17:00:50 -05:00
parent 4172b0b355
commit 881a103051
11 changed files with 191 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.component.html
View File

@@ -30,8 +30,8 @@
<mat-sidenav-container style="height: 100%">
<mat-sidenav #sidenav>
<mat-nav-list>
<a mat-list-item routerLink='/home'>Home</a>
<a mat-list-item routerLink='/subscriptions'>Subscriptions</a>
<a mat-list-item (click)="sidenav.close()" routerLink='/home'>Home</a>
<a mat-list-item (click)="sidenav.close()" routerLink='/subscriptions'>Subscriptions</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content [style.background]="postsService.theme ? postsService.theme.background_color : null">

17
src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.html
View File

@@ -1,7 +1,22 @@
<h4 mat-dialog-title>{{sub.name}}</h4>
<mat-dialog-content>
<strong>Type:</strong> {{(sub.isPlaylist ? 'Playlist' : 'Channel')}}
<div class="info-item">
<strong>Type: </strong>
<span class="info-item-value">{{(sub.isPlaylist ? 'Playlist' : 'Channel')}}</span>
</div>
<div class="info-item">
<strong>URL: </strong>
<span class="info-item-value">{{sub.url}}</span>
</div>
<div class="info-item">
<strong>ID: </strong>
<span class="info-item-value">{{sub.id}}</span>
</div>
<div class="info-item" *ngIf="sub.archive">
<strong>Archive: </strong>
<span class="info-item-value">{{sub.archive}}</span>
</div>
</mat-dialog-content>
<mat-dialog-actions>

7
src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.scss
View File

@@ -0,0 +1,7 @@
.info-item {
margin-bottom: 12px;
}
.info-item-value {
font-size: 13px;
}

4
src/app/posts.services.ts
View File

@@ -149,6 +149,10 @@ export class PostsService {
return this.http.post(this.path + 'unsubscribe', {sub: sub, deleteMode: deleteMode})
}
deleteSubscriptionFile(sub, file, deleteForever) {
return this.http.post(this.path + 'deleteSubscriptionFile', {sub: sub, file: file, deleteForever: deleteForever})
}
getSubscription(id) {
return this.http.post(this.path + 'getSubscription', {id: id});
}

8
src/app/subscription/subscription-file-card/subscription-file-card.component.html
View File

@@ -1,9 +1,11 @@
<div style="position: relative; width: fit-content;">
<div class="duration-time">
Length: {{formattedDuration}}
</div>
<button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
<mat-menu #action_menu="matMenu">
<button mat-menu-item><mat-icon>info</mat-icon>Info</button>
<button mat-menu-item><mat-icon>restore</mat-icon>Delete and redownload</button>
<button mat-menu-item><mat-icon>delete_forever</mat-icon>Delete forever</button>
<button (click)="deleteAndRedownload()" mat-menu-item><mat-icon>restore</mat-icon>Delete and redownload</button>
<button (click)="deleteForever()" mat-menu-item><mat-icon>delete_forever</mat-icon>Delete forever</button>
</mat-menu>
<mat-card (click)="goToFile(file.name)" matRipple class="example-card mat-elevation-z6">
<div style="padding:5px">

9
src/app/subscription/subscription-file-card/subscription-file-card.component.scss
View File

@@ -55,6 +55,13 @@
bottom: 5px;
position: absolute;
}
.duration-time {
position: absolute;
left: 5px;
top: 5px;
z-index: 99999;
}
@media (max-width: 576px){
@@ -66,4 +73,4 @@
width: 175px;
}
}
}

44
src/app/subscription/subscription-file-card/subscription-file-card.component.ts
View File

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { MatSnackBar } from '@angular/material';
import { Router } from '@angular/router';
import { PostsService } from 'app/posts.services';
@Component({
selector: 'app-subscription-file-card',
@@ -15,11 +16,15 @@ export class SubscriptionFileCardComponent implements OnInit {
scrollSubject;
scrollAndLoad;
formattedDuration = null;
@Input() file;
@Input() sub;
@Output() goToFileEmit = new EventEmitter<any>();
@Output() reloadSubscription = new EventEmitter<boolean>();
constructor(private snackBar: MatSnackBar) {
constructor(private snackBar: MatSnackBar, private postsService: PostsService) {
this.scrollSubject = new Subject();
this.scrollAndLoad = Observable.merge(
Observable.fromEvent(window, 'scroll'),
@@ -28,7 +33,9 @@ export class SubscriptionFileCardComponent implements OnInit {
}
ngOnInit() {
if (this.file.duration) {
this.formattedDuration = fancyTimeFormat(this.file.duration);
}
}
onImgError(event) {
@@ -47,6 +54,20 @@ export class SubscriptionFileCardComponent implements OnInit {
this.goToFileEmit.emit(this.file.title);
}
deleteAndRedownload() {
this.postsService.deleteSubscriptionFile(this.sub, this.file.id, false).subscribe(res => {
this.reloadSubscription.emit(true);
this.openSnackBar(`Successfully deleted file: '${this.file.id}'`, 'Dismiss.');
});
}
deleteForever() {
this.postsService.deleteSubscriptionFile(this.sub, this.file.id, true).subscribe(res => {
this.reloadSubscription.emit(true);
this.openSnackBar(`Successfully deleted file: '${this.file.id}'`, 'Dismiss.');
});
}
public openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 2000,
@@ -54,3 +75,22 @@ export class SubscriptionFileCardComponent implements OnInit {
}
}
function fancyTimeFormat(time)
{
// Hours, minutes and seconds
const hrs = ~~(time / 3600);
const mins = ~~((time % 3600) / 60);
const secs = ~~time % 60;
// Output like "1:01" or "4:03:59" or "123:03:59"
let ret = '';
if (hrs > 0) {
ret += '' + hrs + ':' + (mins < 10 ? '0' : '');
}
ret += '' + mins + ':' + (secs < 10 ? '0' : '');
ret += '' + secs;
return ret;
}

2
src/app/subscription/subscription/subscription.component.html
View File

@@ -13,7 +13,7 @@
<div class="container">
<div class="row">
<div *ngFor="let file of files" class="col mb-4 sub-file-col">
<app-subscription-file-card (goToFileEmit)="goToFile($event)" [file]="file"></app-subscription-file-card>
<app-subscription-file-card (reloadSubscription)="getSubscription()" (goToFileEmit)="goToFile($event)" [file]="file" [sub]="subscription"></app-subscription-file-card>
</div>
</div>
</div>

2
src/app/subscriptions/subscriptions.component.html
View File

@@ -27,7 +27,7 @@
<p>You have no channel subscriptions.</p>
</div>
<h4 style="text-align: center;">Playlists</h4>
<h4 style="text-align: center; margin-top: 10px;">Playlists</h4>
<mat-nav-list class="sub-nav-list">
<mat-list-item *ngFor="let sub of playlist_subscriptions">
<a class="a-list-item" matLine (click)="goToSubscription(sub)" href="javascript:void(0)">