diff options
Diffstat (limited to 'client/src/app/shared/video/modals/video-report.component.html')
-rw-r--r-- | client/src/app/shared/video/modals/video-report.component.html | 105 |
1 files changed, 82 insertions, 23 deletions
diff --git a/client/src/app/shared/video/modals/video-report.component.html b/client/src/app/shared/video/modals/video-report.component.html index e336b6660..d6beb6d2a 100644 --- a/client/src/app/shared/video/modals/video-report.component.html +++ b/client/src/app/shared/video/modals/video-report.component.html | |||
@@ -1,38 +1,97 @@ | |||
1 | <ng-template #modal> | 1 | <ng-template #modal> |
2 | <div class="modal-header"> | 2 | <div class="modal-header"> |
3 | <h4 i18n class="modal-title">Report video</h4> | 3 | <h4 i18n class="modal-title">Report video "{{ video.name }}"</h4> |
4 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> | 4 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> |
5 | </div> | 5 | </div> |
6 | 6 | ||
7 | <div class="modal-body"> | 7 | <div class="modal-body"> |
8 | <form novalidate [formGroup]="form" (ngSubmit)="report()"> | ||
8 | 9 | ||
9 | <div i18n class="information"> | 10 | <div class="row"> |
10 | Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemoteVideo()"> and will be forwarded to the video origin ({{ originHost }}) too</ng-container>. | 11 | <div class="col-5 form-group"> |
11 | </div> | 12 | |
13 | <label i18n for="reportPredefinedReasons">What is the issue?</label> | ||
14 | |||
15 | <div class="ml-2 mt-2 d-flex flex-column"> | ||
16 | <ng-container formGroupName="predefinedReasons"> | ||
17 | <div class="form-group" *ngFor="let reason of predefinedReasons"> | ||
18 | <my-peertube-checkbox formControlName="{{reason.id}}" labelText="{{reason.label}}"> | ||
19 | <ng-template *ngIf="reason.help" ptTemplate="help"> | ||
20 | <div [innerHTML]="reason.help"></div> | ||
21 | </ng-template> | ||
22 | <ng-container *ngIf="reason.description" ngProjectAs="description"> | ||
23 | <div [innerHTML]="reason.description"></div> | ||
24 | </ng-container> | ||
25 | </my-peertube-checkbox> | ||
26 | </div> | ||
27 | </ng-container> | ||
28 | </div> | ||
12 | 29 | ||
13 | <form novalidate [formGroup]="form" (ngSubmit)="report()"> | ||
14 | <div class="form-group"> | ||
15 | <textarea | ||
16 | i18n-placeholder placeholder="Reason..." formControlName="reason" | ||
17 | [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control" | ||
18 | ></textarea> | ||
19 | <div *ngIf="formErrors.reason" class="form-error"> | ||
20 | {{ formErrors.reason }} | ||
21 | </div> | ||
22 | </div> | 30 | </div> |
23 | 31 | ||
24 | <div class="form-group inputs"> | 32 | <div class="col-7"> |
25 | <input | 33 | <div class="row justify-content-center"> |
26 | type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" | 34 | <div class="col-12 col-lg-9 mb-2"> |
27 | (click)="hide()" (key.enter)="hide()" | 35 | <div class="screenratio"> |
28 | > | 36 | <div [innerHTML]="embedHtml"></div> |
37 | </div> | ||
38 | </div> | ||
39 | </div> | ||
40 | |||
41 | <div class="mb-1 start-at" formGroupName="timestamp"> | ||
42 | <my-peertube-checkbox | ||
43 | formControlName="hasStart" | ||
44 | i18n-labelText labelText="Start at" | ||
45 | ></my-peertube-checkbox> | ||
46 | |||
47 | <my-timestamp-input | ||
48 | [timestamp]="timestamp.startAt" | ||
49 | [maxTimestamp]="video.duration" | ||
50 | formControlName="startAt" | ||
51 | inputName="startAt" | ||
52 | > | ||
53 | </my-timestamp-input> | ||
54 | </div> | ||
55 | |||
56 | <div class="mb-3 stop-at" formGroupName="timestamp" *ngIf="timestamp.hasStart"> | ||
57 | <my-peertube-checkbox | ||
58 | formControlName="hasEnd" | ||
59 | i18n-labelText labelText="Stop at" | ||
60 | ></my-peertube-checkbox> | ||
29 | 61 | ||
30 | <input | 62 | <my-timestamp-input |
31 | type="submit" i18n-value value="Submit" class="action-button-submit" | 63 | [timestamp]="timestamp.endAt" |
32 | [disabled]="!form.valid" | 64 | [maxTimestamp]="video.duration" |
33 | > | 65 | formControlName="endAt" |
66 | inputName="endAt" | ||
67 | > | ||
68 | </my-timestamp-input> | ||
69 | </div> | ||
70 | |||
71 | <div i18n class="information"> | ||
72 | Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemoteVideo()"> and will be forwarded to the video origin ({{ originHost }}) too</ng-container>. | ||
73 | </div> | ||
74 | |||
75 | <div class="form-group"> | ||
76 | <textarea | ||
77 | i18n-placeholder placeholder="Please describe the issue..." formControlName="reason" ngbAutofocus | ||
78 | [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control" | ||
79 | ></textarea> | ||
80 | <div *ngIf="formErrors.reason" class="form-error"> | ||
81 | {{ formErrors.reason }} | ||
82 | </div> | ||
83 | </div> | ||
34 | </div> | 84 | </div> |
35 | </form> | 85 | </div> |
36 | 86 | ||
87 | <div class="form-group inputs"> | ||
88 | <input | ||
89 | type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" | ||
90 | (click)="hide()" (key.enter)="hide()" | ||
91 | > | ||
92 | <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid"> | ||
93 | </div> | ||
94 | |||
95 | </form> | ||
37 | </div> | 96 | </div> |
38 | </ng-template> | 97 | </ng-template> |