client/src/app/shared/shared-moderation/report-modals/video-report.component.html

   1 <ng-template #modal>
   2   <div class="modal-header">
   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>
   5   </div>
   6
   7   <div class="modal-body">
   8     <form novalidate [formGroup]="form" (ngSubmit)="report()">
   9
  10     <div class="row">
  11       <div class="col-5 form-group">
  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
  18               <div class="form-group" *ngFor="let reason of predefinedReasons">
  19                 <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
  20                   <ng-template *ngIf="reason.help" ptTemplate="help">
  21                     <div [innerHTML]="reason.help"></div>
  22                   </ng-template>
  23
  24                   <ng-container *ngIf="reason.description" ngProjectAs="description">
  25                     <div [innerHTML]="reason.description"></div>
  26                   </ng-container>
  27                 </my-peertube-checkbox>
  28               </div>
  29
  30             </ng-container>
  31           </div>
  32
  33       </div>
  34
  35       <div class="col-7">
  36         <div class="row justify-content-center">
  37           <div class="col-12 col-lg-9 mb-2">
  38             <div class="screenratio">
  39               <div [innerHTML]="embedHtml"></div>
  40             </div>
  41           </div>
  42         </div>
  43
  44         <div class="mb-1 start-at" formGroupName="timestamp">
  45           <my-peertube-checkbox
  46             formControlName="hasStart"
  47             i18n-labelText labelText="Start at"
  48           ></my-peertube-checkbox>
  49
  50           <my-timestamp-input
  51             [timestamp]="timestamp.startAt"
  52             [maxTimestamp]="video.duration"
  53             formControlName="startAt"
  54             inputName="startAt"
  55           >
  56           </my-timestamp-input>
  57         </div>
  58
  59         <div class="mb-3 stop-at"  formGroupName="timestamp" *ngIf="timestamp.hasStart">
  60           <my-peertube-checkbox
  61             formControlName="hasEnd"
  62             i18n-labelText labelText="Stop at"
  63           ></my-peertube-checkbox>
  64
  65           <my-timestamp-input
  66             [timestamp]="timestamp.endAt"
  67             [maxTimestamp]="video.duration"
  68             formControlName="endAt"
  69             inputName="endAt"
  70           >
  71           </my-timestamp-input>
  72         </div>
  73
  74         <div i18n class="information">
  75           Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemote()"> and will be forwarded to the video origin ({{ originHost }}) too</ng-container>.
  76         </div>
  77
  78         <div class="form-group">
  79           <textarea
  80             i18n-placeholder placeholder="Please describe the issue..." formControlName="reason" ngbAutofocus
  81             [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
  82           ></textarea>
  83           <div *ngIf="formErrors.reason" class="form-error">
  84             {{ formErrors.reason }}
  85           </div>
  86         </div>
  87       </div>
  88     </div>
  89
  90     <div class="form-group inputs">
  91       <input
  92         type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
  93         (click)="hide()" (key.enter)="hide()"
  94       >
  95
  96       <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
  97     </div>
  98
  99     </form>
 100   </div>
 101 </ng-template>