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