Bertomlab/CrawlFlix-Front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add alot of feats
All checks were successful
ci / Image build (push) Successful in 1m50s
Details
ci / Deployment (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Joris Bertomeu
2024-10-02 16:09:38 +02:00
parent abcb3f9159
commit 2925cd043d
3 changed files with 113 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -65,33 +65,53 @@
</div>
<div class="card shadow mt-3">
<div class="card-content p-3">
<form [formGroup]="processingForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-6">
<label>MP4 Filename</label>
<input type="text" formControlName="mp4Filename" class="form-control" placeholder="ex: S01E01">
</div>
<div class="col-6">
<label>Wanted Resolution</label>
<select formControlName="wantedResolution" class="form-select">
<option value="4k">4K</option>
<option value="1080p" selected>1080p</option>
<option value="720p">720p</option>
<option value="480p">480p</option>
<option value="360p">360p</option>
<option value="240p">240p</option>
</select>
</div>
<form [formGroup]="loadForm" (ngSubmit)="onSubmitLoad()">
<div class="flex flex-col mt-2">
<label>MP4 Filename</label>
<input type="text" formControlName="mp4Filename" class="form-control" placeholder="ex: S01E01">
</div>
<div class="flex flex-col mt-2">
<label>MPD URL</label>
<input type="text" formControlName="mpdUrl" class="form-control" placeholder="ex: https://....">
</div>
<button type="submit" [disabled]="!loadForm.valid" class="btn btn-primary float-end mt-2"><i class="fa fa-download me-2"></i>Load</button>
</form>
</div>
</div>
<div class="card shadow mt-3" *ngIf="loaded">
<div class="card-content p-3">
<form [formGroup]="processingForm" (ngSubmit)="onSubmit()">
<div class="flex flex-col mt-2">
<label>Wanted Resolution</label>
<select formControlName="wantedResolution" class="form-select">
<option [value]="res.name" *ngFor="let res of loaded.videoTracks">{{res.name}} ({{res.codec}} - {{humanFileSize(res.bandwidth)}})</option>
</select>
</div>
<div class="row mt-2">
<div class="col-8">
<label class="mb-2">Wanted Audio Tracks</label>
<div class="form-check form-switch" *ngFor="let audio of loaded.audioTracks; let index = index">
<input [ngModelOptions]="{standalone: true}" [(ngModel)]="audio.selected" class="form-check-input" type="checkbox" role="switch" [id]="'audio_track_' + index">
<label class="form-check-label" [for]="'audio_track_' + index">
{{audio.name}} ({{audio.language}} - {{audio.attributes.CODECS}} - {{humanFileSize(audio.attributes.BANDWIDTH)}})
</label>
</div>
</div>
<div class="col-4">
<label class="mb-2">Wanted Subtitles Tracks</label>
<div class="form-check form-switch" *ngFor="let sub of loaded.subtitles; let index = index">
<input [ngModelOptions]="{standalone: true}" [(ngModel)]="sub.selected" class="form-check-input" type="checkbox" role="switch" [id]="'sub_track_' + index">
<label class="form-check-label" [for]="'sub_track_' + index">
{{sub.name}} ({{sub.language}} - {{sub.attributes.CODECS}} - {{humanFileSize(sub.attributes.BANDWIDTH)}})
</label>
</div>
</div>
</div>
<div class="flex flex-col mt-2">
<label>Widevine L3 Decryption Keys (one per line, key:value)</label>
<textarea formControlName="keys" rows="4" class="form-control" placeholder="ex: ca2c28ab6c6a4e91935e12b6bb37a952:779afc2503a1ea7947b4747d24fbeb63"></textarea>
</div>
<button type="submit" [disabled]="!processingForm.valid" class="btn btn-primary float-end mt-2">Add to Queue</button>
<button type="submit" [disabled]="!processingForm.valid" class="btn btn-primary float-end mt-2"><i class="fa fa-cog me-2"></i>Add to Queue</button>
</form>
<!-- <div *ngIf="jobId" class="mt-6">
@@ -111,7 +131,7 @@
Jobs Queue ({{jobs.length}})
<i [ngClass]="{'fa-beat-fade text-success': lastJobSuccess, 'text-danger': !lastJobSuccess}" class="fa fa-circle float-end mt-1"></i>
</div>
<div class="card-content p-2" style="max-height: 90vh;overflow-y:scroll">
<div class="card-content p-2 px-3" style="max-height: 90vh;overflow-y:scroll">
<div class="row" *ngIf="jobs.length === 0">
<div class="col-12 text-center py-3">
<!-- <i class="fa fa-circle-notch fa-spin fa-2x"></i> -->
@@ -120,11 +140,21 @@
</div>
<div *ngFor="let job of jobs | orderBy: 'addedOn':true; let last = last" class="pb-2" [ngClass]="{'border-bottom mb-2': !last}">
<div class="row">
<div class="col-8 text-center border-right mb-2">
<b>{{job.data.mp4Filename}}</b><br>
</div>
<div class="col-4 text-center mb-2">
<i>{{job.data.wantedResolution || '1080p'}}</i>
<div class="col-12">
<div class="card my-2 border-0" style="background-color: #f5f6fa;">
<div class="card-content p-2">
<div class="row">
<div class="col-12 text-center mb-2">
<h5 class="mb-0"><b>{{job.data.mp4Filename}}</b></h5>
</div>
<div class="col-12 mb-1">
<i class="fa fa-display me-2 text-primary"></i><i>{{job.data.wantedResolution?.name || 'Unknown'}} &commat;{{humanFileSize(job.data.wantedResolution.bandwidth)}} ({{job.data.wantedResolution.codec}})</i><br>
<i class="fa fa-volume-high me-2 text-success"></i><i>{{displayJobAudio(job.data.wantedAudioTracks) || 'Unknown'}}</i><br>
<i class="fa fa-closed-captioning me-2 text-warning"></i><i>{{displayJobAudio(job.data.wantedSubtitles) || 'Unknown'}}</i><br>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<p class="text-sm mb-1">Job ID: {{ job.id }}</p>
@@ -142,7 +172,7 @@
<p class="text-sm mb-1">Duration: {{ ((job.finishedOn - job.processedOn)/1000) | amDuration:'seconds' }}</p>
</div>
</div>
<div class="alert alert-danger mt-2" *ngIf="job.state === 'failed' && job.failedReason">
<div class="alert alert-danger mt-2 mb-1" *ngIf="job.state === 'failed' && job.failedReason">
{{job.failedReason}}
</div>
<div class="alert alert-success mt-2 mb-4" *ngIf="job.state === 'completed' && job.returnValue?.message">