client/src/app/shared/video/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               <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>
  29
  30       </div>
  31
  32       <div class="col-7">
  33         <div class="row justify-content-center">
  34           <div class="col-12 col-lg-9 mb-2">
  35             <div class="screenratio">
  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>
  61
  62           <my-timestamp-input
  63             [timestamp]="timestamp.endAt"
  64             [maxTimestamp]="video.duration"
  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>
  84       </div>
  85     </div>
  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>
  96   </div>
  97 </ng-template>