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="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         <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
  29           <div class="input-group">
  30             <input
  31               type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
  32               formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
  33             >
  34             <div class="input-group-text">@{{ instanceHost }}</div>
  35           </div>
  36           <div *ngIf="formErrors['name']" class="form-error">
  37             {{ formErrors['name'] }}
  38           </div>
  39         </div>
  40
  41         <div class="form-group">
  42           <label i18n for="display-name">Display name</label>
  43           <input
  44             type="text" id="display-name" class="form-control"
  45             formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
  46           >
  47           <div *ngIf="formErrors['display-name']" class="form-error">
  48             {{ formErrors['display-name'] }}
  49           </div>
  50         </div>
  51
  52         <div class="form-group">
  53           <label i18n for="description">Description</label>
  54           <textarea
  55             id="description" formControlName="description" class="form-control"
  56             [ngClass]="{ 'input-error': formErrors['description'] }"
  57           ></textarea>
  58           <div *ngIf="formErrors.description" class="form-error">
  59             {{ formErrors.description }}
  60           </div>
  61         </div>
  62
  63         <div class="form-group">
  64           <label for="support">Support</label>
  65           <my-help
  66             helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support the channel (membership platform...).<br /><br />
  67       When a video is uploaded in this channel, the video support field will be automatically filled by this text."
  68           ></my-help>
  69           <my-markdown-textarea
  70               id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
  71               [classes]="{ 'input-error': formErrors['support'] }"
  72           ></my-markdown-textarea>
  73           <div *ngIf="formErrors.support" class="form-error">
  74             {{ formErrors.support }}
  75           </div>
  76         </div>
  77
  78         <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
  79           <my-peertube-checkbox
  80             inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
  81             i18n-labelText labelText="Overwrite support field of all videos of this channel"
  82           ></my-peertube-checkbox>
  83         </div>
  84
  85       </div>
  86     </div>
  87
  88     <div class="row"> <!-- submit placement block -->
  89       <div class="col-md-7 col-xl-5"></div>
  90       <div class="col-md-5 col-xl-5 d-inline-flex">
  91         <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
  92       </div>
  93     </div>
  94   </form>
  95 </div>