client/src/app/+videos/+video-watch/comment/video-comment-add.component.html

   1 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
   2   <div class="avatar-and-textarea">
   3     <img [src]="getAvatarUrl()" alt="Avatar" />
   4
   5     <div class="form-group">
   6       <my-help class="markdown-guide" helpType="custom" iconName="markdown" i18n-title title="Markdown compatible">
   7         <ng-template ptTemplate="customHtml">
   8           <div i18n>
   9             Markdown compatible that supports:
  10
  11             <ul>
  12               <li>Emphasis: <strong>**bold**</strong>, <i>_italic_</i></li>
  13               <li>Links</li>
  14               <li>Break lines</li>
  15               <li>Lists</li>
  16               <li>Emojis</li>
  17             </ul>
  18           </div>
  19         </ng-template>
  20       </my-help>
  21       <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
  22                 [readonly]="(user === null) ? true : false"
  23                 (click)="openVisitorModal($event)"
  24                 formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
  25                 (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
  26
  27       </textarea>
  28       <div *ngIf="formErrors.text" class="form-error">
  29         {{ formErrors.text }}
  30       </div>
  31     </div>
  32   </div>
  33
  34   <div class="comment-buttons">
  35     <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" type="button" i18n>
  36       Cancel
  37     </button>
  38     <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }">
  39       {{ addingCommentButtonValue }}
  40     </button>
  41   </div>
  42 </form>
  43
  44 <ng-template #visitorModal let-modal>
  45   <div class="modal-header">
  46     <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
  47     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideVisitorModal()"></my-global-icon>
  48   </div>
  49   <div class="modal-body">
  50     <span i18n>
  51       You can comment using an account on any ActivityPub-compatible instance.
  52       On most platforms, you can find the video by typing its URL in the search bar and then comment it
  53       from within the software's interface.
  54     </span>
  55     <span i18n>
  56       If you have an account on Mastodon or Pleroma, you can open it directly in their interface:
  57     </span>
  58     <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
  59   </div>
  60   <div class="modal-footer inputs">
  61     <input
  62       type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
  63       (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
  64     >
  65
  66     <input
  67       type="submit" i18n-value value="Login to comment" class="action-button-submit"
  68       (click)="gotoLogin()"
  69     >
  70   </div>
  71 </ng-template>