101 lines
2.9 KiB
HTML
101 lines
2.9 KiB
HTML
<div class="overlay" (click)="closeVideoUploadOverview()">
|
|
<div class="center" (click)="stopPropagation($event)">
|
|
<div class="content">
|
|
<div class="headline">Upload Video</div>
|
|
<form
|
|
#videoForm="ngForm"
|
|
(ngSubmit)="onSubmit(videoForm)"
|
|
onsubmit="return false"
|
|
(input)="this.errorService.clearError()"
|
|
>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
name="title"
|
|
#title="ngModel"
|
|
placeholder="Title"
|
|
[(ngModel)]="videoData.title"
|
|
[class.error-border]="!title.valid && title.touched"
|
|
required
|
|
/>
|
|
<div class="error-msg">
|
|
@if (!title.valid && title.touched) {
|
|
<p>Please enter a video title</p>
|
|
}
|
|
</div>
|
|
<textarea
|
|
id="description"
|
|
name="description"
|
|
#description="ngModel"
|
|
placeholder="Description"
|
|
[(ngModel)]="videoData.description"
|
|
[class.error-border]="!description.valid && description.touched"
|
|
rows="4"
|
|
required
|
|
></textarea>
|
|
<div class="error-msg">
|
|
@if (!description.valid && description.touched) {
|
|
<p>Please enter a video description</p>
|
|
}
|
|
</div>
|
|
<select
|
|
id="genre"
|
|
name="genre"
|
|
#genre="ngModel"
|
|
[(ngModel)]="videoData.genre"
|
|
[class.error-border]="!genre.valid && genre.touched"
|
|
required
|
|
>
|
|
<!-- Get genres -->
|
|
@if (genres$ | async; as genres) {
|
|
|
|
<!-- Loop through genres -->
|
|
@for (genre of genres; track genre) {
|
|
<option [value]="genre.code">{{ genre.name }}</option>
|
|
} }
|
|
</select>
|
|
<div class="error-msg">
|
|
@if (!genre.valid && genre.touched) {
|
|
<p>Please enter a genre</p>
|
|
}
|
|
</div>
|
|
<input
|
|
type="file"
|
|
id="videoFile"
|
|
name="videoFile"
|
|
placeholder="Video file"
|
|
(change)="onFileChange($event)"
|
|
accept="video/mp4"
|
|
required
|
|
/>
|
|
<div class="error-msg">
|
|
<p>{{ errorMsgFileSize }}</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<app-btn-large
|
|
[type]="'button'"
|
|
[value]="'Close'"
|
|
(click)="closeVideoUploadOverview()"
|
|
></app-btn-large>
|
|
<app-btn-large
|
|
[type]="'submit'"
|
|
[value]="'Upload Video'"
|
|
[disabled]="
|
|
!videoData.title ||
|
|
!videoData.description ||
|
|
!videoData.genre ||
|
|
!videoData.file ||
|
|
videoData.send
|
|
"
|
|
></app-btn-large>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@if(videoData.send){
|
|
<app-loading-dialog
|
|
loadingMsg="Video is uploading, please be patient a moment."
|
|
[uploadProgress]="uploadProgress"
|
|
></app-loading-dialog>
|
|
}
|