client/src/app/+manage/video-channel-edit/video-channel-edit.component.html

   1 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
   2
   3 <div class="margin-content">
   4   <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
   5
   6     <div class="form-row"> <!-- channel grid -->
   7       <div class="form-group col-12 col-lg-4 col-xl-3">
   8         <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
   9         <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
  10       </div>
  11
  12       <div class="form-group col-12 col-lg-8 col-xl-9">
  13         <h6 i18n>Banner image of the channel</h6>
  14
  15         <my-actor-banner-edit
  16           *ngIf="videoChannel" [previewImage]="isCreation()"
  17           [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
  18         ></my-actor-banner-edit>
  19
  20         <my-actor-avatar-edit
  21           *ngIf="videoChannel" [previewImage]="isCreation()"
  22           [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
  23           [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
  24         ></my-actor-avatar-edit>
  25
  26         <div class="form-group" *ngIf="isCreation()">
  27           <label i18n for="name">Name</label>
  28           <div class="input-group">
  29             <input
  30               type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
  31               formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
  32             >
  33             <div class="input-group-append">
  34               <span class="input-group-text">@{{ instanceHost }}</span>
  35             </div>
  36           </div>
  37           <div *ngIf="formErrors['name']" class="form-error">
  38             {{ formErrors['name'] }}
  39           </div>
  40         </div>
  41
  42         <div class="form-group">
  43           <label i18n for="display-name">Display name</label>
  44           <input
  45             type="text" id="display-name" class="form-control"
  46             formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
  47           >
  48           <div *ngIf="formErrors['display-name']" class="form-error">
  49             {{ formErrors['display-name'] }}
  50           </div>
  51         </div>
  52
  53         <div class="form-group">
  54           <label i18n for="description">Description</label>
  55           <textarea
  56             id="description" formControlName="description" class="form-control"
  57             [ngClass]="{ 'input-error': formErrors['description'] }"
  58           ></textarea>
  59           <div *ngIf="formErrors.description" class="form-error">
  60             {{ formErrors.description }}
  61           </div>
  62         </div>
  63
  64         <div class="form-group">
  65           <label for="support">Support</label>
  66           <my-help
  67             helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support the channel (membership platform...).<br /><br />
  68       When a video is uploaded in this channel, the video support field will be automatically filled by this text."
  69           ></my-help>
  70           <my-markdown-textarea
  71               id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
  72               [classes]="{ 'input-error': formErrors['support'] }"
  73           ></my-markdown-textarea>
  74           <div *ngIf="formErrors.support" class="form-error">
  75             {{ formErrors.support }}
  76           </div>
  77         </div>
  78
  79         <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
  80           <my-peertube-checkbox
  81             inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
  82             i18n-labelText labelText="Overwrite support field of all videos of this channel"
  83           ></my-peertube-checkbox>
  84         </div>
  85
  86       </div>
  87     </div>
  88
  89     <div class="form-row"> <!-- submit placement block -->
  90       <div class="col-md-7 col-xl-5"></div>
  91       <div class="col-md-5 col-xl-5 d-inline-flex">
  92         <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
  93       </div>
  94     </div>
  95   </form>
  96 </div>