X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideos%2F%2Bvideo-edit%2Fshared%2Fvideo-edit.component.html;h=50d030ac9ce3b26922d29c6dc37d96a7af94c28b;hb=7e6bdb5ae5d87e1a36ef185273536901ae97b9db;hp=c11a60dce6713530cae1ed8c800d4755142c5636;hpb=1942f11d5ee6926ad93dc1b79fae18325ba5de18;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index c11a60dce..50d030ac9 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -5,7 +5,7 @@
       <a ngbNavLink i18n>Basic info</a>
 
       <ng-template ngbNavContent>
-        <div class="row">
+        <div class="form-columns">
           <div class="col-video-edit">
             <div class="form-group">
               <label i18n for="name">Title</label>
@@ -23,16 +23,15 @@
                   <ng-container i18n>
                     Tags could be used to suggest relevant recommendations. <br />
                     There is a maximum of 5 tags. <br />
-                    Press Enter to add a new tag.
+                    Press <kbd>Enter</kbd> to add a new tag.
                   </ng-container>
                 </ng-template>
               </my-help>
 
-              <tag-input
-                [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-                i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a new tag"
-                formControlName="tags" [maxItems]="5" [modelAsStrings]="true"
-              ></tag-input>
+              <my-select-tags labelForId="label-tags" formControlName="tags"></my-select-tags>
+              <div *ngIf="formErrors.tags" class="form-error">
+                {{ formErrors.tags }}
+              </div>
             </div>
 
             <div class="form-group">
@@ -56,22 +55,15 @@
 
           <div class="col-video-edit">
             <div class="form-group">
-              <label i18n>Channel</label>
-              <div class="peertube-select-container">
-                <select formControlName="channelId" class="form-control">
-                  <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
-                </select>
-              </div>
+              <label i18n for="channel">Channel</label>
+              <my-select-channel labelForId="channel" [items]="userVideoChannels" formControlName="channelId"></my-select-channel>
             </div>
 
             <div class="form-group">
               <label i18n for="category">Category</label>
-              <div class="peertube-select-container">
-                <select id="category" formControlName="category" class="form-control">
-                  <option></option>
-                  <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-                </select>
-              </div>
+              <my-select-options
+                labelForId="category" [items]="videoCategories" formControlName="category" [clearable]="true"
+              ></my-select-options>
 
               <div *ngIf="formErrors.category" class="form-error">
                 {{ formErrors.category }}
@@ -80,12 +72,18 @@
 
             <div class="form-group">
               <label i18n for="licence">Licence</label>
-              <div class="peertube-select-container">
-                <select id="licence" formControlName="licence" class="form-control">
-                  <option></option>
-                  <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-                </select>
-              </div>
+
+              <my-help>
+                <ng-template ptTemplate="customHtml">
+                  <ng-container i18n>
+                    <a href="https://chooser-beta.creativecommons.org/" target="_blank" rel="noopener noreferrer">Choose</a> the appropriate licence for your work.
+                  </ng-container>
+                </ng-template>
+              </my-help>
+
+              <my-select-options
+                labelForId="licence" [items]="videoLicences" formControlName="licence" [clearable]="true"
+              ></my-select-options>
 
               <div *ngIf="formErrors.licence" class="form-error">
                 {{ formErrors.licence }}
@@ -94,12 +92,10 @@
 
             <div class="form-group">
               <label i18n for="language">Language</label>
-              <div class="peertube-select-container">
-                <select id="language" formControlName="language" class="form-control">
-                  <option></option>
-                  <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-                </select>
-              </div>
+              <my-select-options
+                labelForId="language" [items]="videoLanguages" formControlName="language"
+                [clearable]="true" [searchable]="true" [groupBy]="'group'"
+              ></my-select-options>
 
               <div *ngIf="formErrors.language" class="form-error">
                 {{ formErrors.language }}
@@ -108,13 +104,9 @@
 
             <div class="form-group">
               <label i18n for="privacy">Privacy</label>
-              <div class="peertube-select-container">
-                <select id="privacy" formControlName="privacy" class="form-control">
-                  <option></option>
-                  <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-                  <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
-                </select>
-              </div>
+              <my-select-options
+                labelForId="privacy" [items]="videoPrivacies" formControlName="privacy" [clearable]="false"
+              ></my-select-options>
 
               <div *ngIf="formErrors.privacy" class="form-error">
                 {{ formErrors.privacy }}
@@ -125,7 +117,7 @@
               <label i18n for="schedulePublicationAt">Schedule publication ({{ calendarTimezone }})</label>
               <p-calendar
                 id="schedulePublicationAt" formControlName="schedulePublicationAt" [dateFormat]="calendarDateFormat"
-                [locale]="calendarLocale" [minDate]="minScheduledDate" [showTime]="true" [hideOnDateTimeSelect]="true"
+                [firstDayOfWeek]="0" [minDate]="minScheduledDate" [showTime]="true" [hideOnDateTimeSelect]="true"
               >
               </p-calendar>
 
@@ -136,17 +128,17 @@
 
             <my-peertube-checkbox inputName="nsfw" formControlName="nsfw" helpPlacement="bottom-right">
               <ng-template ptTemplate="label">
-                <ng-container i18n>This video contains mature or explicit content</ng-container>
+                <ng-container i18n>Contains sensitive content</ng-container>
               </ng-template>
 
               <ng-template ptTemplate="help">
-                <ng-container i18n>Some instances do not list videos containing mature or explicit content by default.</ng-container>
+                <ng-container i18n>Some instances hide videos containing mature or explicit content by default.</ng-container>
               </ng-template>
             </my-peertube-checkbox>
 
             <my-peertube-checkbox *ngIf="waitTranscodingEnabled" inputName="waitTranscoding" formControlName="waitTranscoding" helpPlacement="bottom-right">
               <ng-template ptTemplate="label">
-                <ng-container i18n>Wait transcoding before publishing the video</ng-container>
+                <ng-container i18n>Publish after transcoding</ng-container>
               </ng-template>
 
               <ng-template ptTemplate="help">
@@ -159,7 +151,7 @@
       </ng-template>
     </ng-container>
 
-    <ng-container ngbNavItem>
+    <ng-container ngbNavItem *ngIf="!liveVideo">
       <a ngbNavLink i18n>Captions</a>
 
       <ng-template ngbNavContent>
@@ -212,6 +204,58 @@
       </ng-template>
     </ng-container>
 
+    <ng-container ngbNavItem *ngIf="liveVideo">
+      <a ngbNavLink i18n>Live settings</a>
+
+      <ng-template ngbNavContent>
+        <div class="row live-settings">
+          <div class="col-md-12">
+            <div class="alert alert-info">
+              <my-live-documentation-link></my-live-documentation-link>
+            </div>
+
+            <div class="form-group">
+              <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
+              <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+            </div>
+
+            <div class="form-group">
+              <label for="liveVideoStreamKey" i18n>Live stream key</label>
+              <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+
+              <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
+            </div>
+
+            <div class="form-group">
+              <my-peertube-checkbox inputName="liveVideoPermanentLive" formControlName="permanentLive">
+                <ng-template ptTemplate="label">
+                  <ng-container i18n>This is a permanent live</ng-container>
+                </ng-template>
+
+                <ng-container ngProjectAs="description">
+                  <span i18n>You can stream multiple times in a permanent live. The URL for your viewers won't change but you cannot save replays of your lives</span>
+                </ng-container>
+              </my-peertube-checkbox>
+            </div>
+
+            <div class="form-group" *ngIf="isSaveReplayEnabled()">
+              <my-peertube-checkbox inputName="liveVideoSaveReplay" formControlName="saveReplay">
+                <ng-template ptTemplate="label">
+                  <ng-container i18n>Automatically publish a replay when your live ends</ng-container>
+                </ng-template>
+
+                <ng-container ngProjectAs="description">
+                  <span i18n>⚠️ If you enable this option, your live will be terminated if you exceed your video quota</span>
+                </ng-container>
+              </my-peertube-checkbox>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+
+    </ng-container>
+
+
     <ng-container ngbNavItem>
       <a ngbNavLink i18n>Advanced settings</a>
 
@@ -230,7 +274,13 @@
 
             <div class="form-group">
               <label i18n for="support">Support</label>
-              <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
+              <my-help helpType="markdownEnhanced">
+                <ng-template ptTemplate="preHtml">
+                  <ng-container i18n>
+                    Short text to tell people how they can support you (membership platform...).
+                  </ng-container>
+                </ng-template>
+              </my-help>
               <my-markdown-textarea
                 id="support" formControlName="support" markdownType="enhanced"
                 [classes]="{ 'input-error': formErrors['support'] }"
@@ -244,10 +294,16 @@
           <div class="col-md-12 col-xl-4">
             <div class="form-group originally-published-at">
               <label i18n for="originallyPublishedAt">Original publication date</label>
-              <my-help i18n-preHtml preHtml="This is the date when the content was originally published (e.g. the release date for a film)"></my-help>
+              <my-help>
+                <ng-template ptTemplate="preHtml">
+                  <ng-container i18n>
+                    This is the date when the content was originally published (e.g. the release date for a film)
+                  </ng-container>
+                </ng-template>
+              </my-help>
               <p-calendar
-                id="originallyPublishedAt" formControlName="originallyPublishedAt" [dateFormat]="calendarDateFormat"
-                [locale]="calendarLocale" [showTime]="true" [hideOnDateTimeSelect]="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="myYearRange"
+                id="originallyPublishedAt" formControlName="originallyPublishedAt" [dateFormat]="calendarDateFormat" [firstDayOfWeek]="0"
+                [showTime]="true" [hideOnDateTimeSelect]="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="myYearRange"
               >
               </p-calendar>
 
@@ -270,11 +326,26 @@
       </ng-template>
     </ng-container>
 
+    <ng-container ngbNavItem *ngIf="pluginFields.length !== 0">
+      <a ngbNavLink i18n>Plugin settings</a>
+
+      <ng-template ngbNavContent>
+        <div class="row plugin-settings">
+
+          <div class="col-md-12 col-xl-8">
+            <div *ngFor="let pluginSetting of pluginFields" class="form-group" [hidden]="isPluginFieldHidden(pluginSetting)">
+              <my-dynamic-form-field [form]="pluginDataFormGroup" [formErrors]="formErrors" [setting]="pluginSetting.commonOptions"></my-dynamic-form-field>
+            </div>
+          </div>
+
+        </div>
+      </ng-template>
+    </ng-container>
   </div>
 
   <div [ngbNavOutlet]="nav"></div>
 </div>
 
 <my-video-caption-add-modal
-  #videoCaptionAddModal [existingCaptions]="existingCaptions" [serverConfig]="serverConfig" (captionAdded)="onCaptionAdded($event)"
+  #videoCaptionAddModal [existingCaptions]="getExistingCaptions()" [serverConfig]="serverConfig" (captionAdded)="onCaptionAdded($event)"
 ></my-video-caption-add-modal>