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

Added video previews when hovering over a file card

Browse Source
This commit is contained in:
Isaac Abadi
2021-08-25 23:36:31 -06:00
parent cca76dd248
commit 6639305771
3 changed files with 49 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/unified-file-card/unified-file-card.component.html
View File

@@ -51,8 +51,10 @@
<mat-card [matTooltip]="null" (click)="navigateToFile($event)" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'large-mat-card': card_size === 'large', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
<div style="padding:5px">
<div *ngIf="!loading && file_obj.thumbnailURL" class="img-div">
<div style="position: relative">
<img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailPath ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
<div [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" style="position: relative">
<img *ngIf="!(elevated && !is_playlist)" [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailPath ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
<video *ngIf="elevated && !is_playlist" autoplay loop muted [muted]="true" [ngClass]="{'video-small': card_size === 'small', 'video': card_size === 'medium', 'video-large': card_size === 'large'}" [src]="streamURL">
</video>
<div class="duration-time">
{{file_length}}
</div>

24
src/app/components/unified-file-card/unified-file-card.component.scss
View File

@@ -51,6 +51,30 @@
object-fit: cover;
}
.video-large {
width: 300px;
height: 167.5px;
object-fit: cover;
position: absolute;
top: 0px;
}
.video {
width: 200px;
height: 112.5px;
object-fit: cover;
position: absolute;
top: 0px;
}
.video-small {
width: 150px;
height: 84.5px;
object-fit: cover;
position: absolute;
top: 0px;
}
.example-full-width-height {
width: 100%;
height: 100%

21
src/app/components/unified-file-card/unified-file-card.component.ts
View File

@@ -35,6 +35,8 @@ export class UnifiedFileCardComponent implements OnInit {
// optional vars
thumbnailBlobURL = null;
streamURL = null;
// input/output
@Input() loading = true;
@Input() theme = null;
@@ -78,6 +80,8 @@ export class UnifiedFileCardComponent implements OnInit {
const bloburl = URL.createObjectURL(blob);
this.thumbnailBlobURL = this.sanitizer.bypassSecurityTrustUrl(bloburl);*/
}
this.streamURL = this.generateStreamURL();
}
emitDeleteFile(blacklistMode = false) {
@@ -128,6 +132,23 @@ export class UnifiedFileCardComponent implements OnInit {
this.contextMenu.openMenu();
}
generateStreamURL() {
let baseLocation = 'stream/';
let fullLocation = this.baseStreamPath + baseLocation + `?test=test&uid=${this.file_obj['uid']}`;
if (this.jwtString) {
fullLocation += `&jwt=${this.jwtString}`;
}
if (this.file_obj['sub_id']) {
fullLocation += `&sub_id=${this.file_obj['sub_id']}`;
}
fullLocation += '&t=,10';
return fullLocation;
}
}
function fancyTimeFormat(time) {