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=b607dabe95e6a78f5b8759d79eb9665d04be5fad;hb=d0fbc9fd0a29c37f3ff9b99030351e90b276fe7d;hp=bf8b0b2673017d11f5bc0f07729cf04f14f689c6;hpb=0151c41c65e0e3e94288314afe295358b9d698f7;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 bf8b0b267..b607dabe9 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
@@ -1,11 +1,17 @@
 <div class="video-edit" [formGroup]="form">
   <div ngbNav #nav="ngbNav" class="nav-tabs">
 
+    <ng-template #pluginSettingTemplate let-pluginSetting>
+      <div class="form-group" [hidden]="isPluginFieldHidden(pluginSetting)">
+        <my-dynamic-form-field [form]="pluginDataFormGroup" [formErrors]="formErrors['pluginData']" [setting]="pluginSetting.commonOptions"></my-dynamic-form-field>
+      </div>
+    </ng-template>
+
     <ng-container ngbNavItem>
       <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>
@@ -16,7 +22,7 @@
             </div>
 
             <div class="form-group">
-              <label i18n class="label-tags">Tags</label>
+              <label for="label-tags" i18n class="label-tags">Tags</label>
 
               <my-help>
                 <ng-template ptTemplate="customHtml">
@@ -39,17 +45,18 @@
 
               <my-help helpType="markdownText">
                 <ng-template ptTemplate="preHtml">
-                  <ng-container i18n>
-                    Video descriptions are truncated by default and require manual action to expand them.
-                  </ng-container>
+                  <ng-container i18n>Video descriptions are truncated by default and require manual action to expand them.</ng-container>
+
+                  <br />
+
+                  <ng-container i18n>A timestamp (<i>00:05</i> for example) is automatically converted into a link to a part of the video.</ng-container>
                 </ng-template>
               </my-help>
 
-              <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="true"></my-markdown-textarea>
-
-              <div *ngIf="formErrors.description" class="form-error">
-                {{ formErrors.description }}
-              </div>
+              <my-markdown-textarea
+                formControlName="description" [markdownVideo]="videoToUpdate"
+                [formError]="formErrors.description" [truncate]="250"
+              ></my-markdown-textarea>
             </div>
           </div>
 
@@ -76,7 +83,7 @@
               <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 license for your work.
+                    <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>
@@ -117,7 +124,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>
 
@@ -132,20 +139,25 @@
               </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="isWaitTranscodingDisplayed()" inputName="waitTranscoding" formControlName="waitTranscoding" helpPlacement="bottom-right">
+            <my-peertube-checkbox *ngIf="!hideWaitTranscoding" inputName="waitTranscoding" formControlName="waitTranscoding" helpPlacement="bottom-right">
               <ng-template ptTemplate="label">
                 <ng-container i18n>Publish after transcoding</ng-container>
               </ng-template>
 
               <ng-template ptTemplate="help">
-                <ng-container i18n>If you decide not to wait for transcoding before publishing the video, it could be unplayable until transcoding ends.</ng-container>
+                <ng-container i18n>The video may be unplayable during the transcoding process. It's the reason why we prefer to publish publicly the video after transcoding.</ng-container>
               </ng-template>
             </my-peertube-checkbox>
 
+            <ng-container
+              *ngFor="let pluginSetting of getPluginsFields('main')"
+              [ngTemplateOutlet]="pluginSettingTemplate" [ngTemplateOutletContext]="{ $implicit: pluginSetting }"
+            >
+            </ng-container>
           </div>
         </div>
       </ng-template>
@@ -158,10 +170,10 @@
         <div class="captions">
 
           <div class="captions-header">
-            <a (click)="openAddCaptionModal()" class="create-caption">
+            <button (click)="openAddCaptionModal()" class="peertube-create-button">
               <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
               <ng-container i18n>Add another caption</ng-container>
-            </a>
+            </button>
           </div>
 
           <div class="form-group" *ngFor="let videoCaption of videoCaptions">
@@ -173,9 +185,10 @@
                   [href]="videoCaption.captionPath"
                 >{{ videoCaption.language.label }}</a>
 
-                <div i18n class="caption-entry-state">Already uploaded	&#10004;</div>
+                <div i18n class="caption-entry-state">Already uploaded on {{ videoCaption.updatedAt | date }}	&#10004;</div>
 
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</span>
+                <button i18n class="caption-entry-edit" (click)="openEditCaptionModal(videoCaption)">Edit</button>
+                <button i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</button>
               </ng-container>
 
               <ng-container *ngIf="videoCaption.action === 'CREATE'">
@@ -183,7 +196,15 @@
 
                 <div i18n class="caption-entry-state caption-entry-state-create">Will be created on update</div>
 
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</span>
+                <button i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</button>
+              </ng-container>
+
+              <ng-container *ngIf="videoCaption.action === 'UPDATE'">
+                <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
+
+                <div i18n class="caption-entry-state caption-entry-state-create">Will be edited on update</div>
+
+                <button i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel edition</button>
               </ng-container>
 
               <ng-container *ngIf="videoCaption.action === 'REMOVE'">
@@ -191,7 +212,7 @@
 
                 <div i18n class="caption-entry-state caption-entry-state-delete">Will be deleted on update</div>
 
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</span>
+                <button i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</button>
               </ng-container>
             </div>
           </div>
@@ -210,20 +231,48 @@
       <ng-template ngbNavContent>
         <div class="row live-settings">
           <div class="col-md-12">
+            <div class="alert pt-alert-primary">
+              <my-live-documentation-link></my-live-documentation-link>
+            </div>
 
-            <div class="form-group">
+            <div *ngIf="liveVideo.rtmpUrl" class="form-group">
               <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
-              <my-input-readonly-copy id="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl"></my-input-readonly-copy>
+              <my-input-text inputId="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
+            </div>
+
+            <div *ngIf="liveVideo.rtmpsUrl" class="form-group">
+              <label for="liveVideoRTMPSUrl" i18n>Live RTMPS Url</label>
+              <my-input-text inputId="liveVideoRTMPSUrl" [value]="liveVideo.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
             </div>
 
             <div class="form-group">
               <label for="liveVideoStreamKey" i18n>Live stream key</label>
-              <my-input-readonly-copy id="liveVideoStreamKey" [value]="liveVideo.streamKey"></my-input-readonly-copy>
+              <my-input-text inputId="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-text>
 
               <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
             </div>
 
-            <div class="form-group" *ngIf="isSaveReplayEnabled()">
+            <div class="form-group">
+              <div class="peertube-radio-container">
+                <input type="radio" formControlName="permanentLive" id="permanentLiveFalse" [value]="false">
+                <label i18n for="permanentLiveFalse" class="radio">This is a normal live</label>
+
+                <span class="form-group-description" i18n>
+                  You can stream only once in a normal live. If you enable replay, it will be saved under the same URL as your live
+                </span>
+              </div>
+
+              <div class="peertube-radio-container">
+                <input type="radio" formControlName="permanentLive" id="permanentLiveTrue" [value]="true">
+                <label i18n for="permanentLiveTrue" class="radio">This is a permanent/recurring live</label>
+
+                <span class="form-group-description" i18n>
+                  You can stream multiple times in a permanent/recurring live. If you enable replays, they will be saved as separate videos
+                </span>
+              </div>
+            </div>
+
+            <div class="form-group" *ngIf="isSaveReplayAllowed()">
               <my-peertube-checkbox inputName="liveVideoSaveReplay" formControlName="saveReplay">
                 <ng-template ptTemplate="label">
                   <ng-container i18n>Automatically publish a replay when your live ends</ng-container>
@@ -234,6 +283,24 @@
                 </ng-container>
               </my-peertube-checkbox>
             </div>
+
+            <div class="form-group mx-4" *ngIf="isSaveReplayEnabled()">
+              <label i18n for="replayPrivacy">Privacy of the new replay</label>
+              <my-select-options
+                labelForId="replayPrivacy" [items]="videoPrivacies" [clearable]="false" formControlName="replayPrivacy"
+              ></my-select-options>
+            </div>
+
+            <div class="form-group" *ngIf="isLatencyModeEnabled()">
+              <label i18n for="latencyMode">Latency mode</label>
+              <my-select-options
+                labelForId="latencyMode" [items]="latencyModes" formControlName="latencyMode" [clearable]="true"
+              ></my-select-options>
+
+              <div *ngIf="formErrors.latencyMode" class="form-error">
+                {{ formErrors.latencyMode }}
+              </div>
+            </div>
           </div>
         </div>
       </ng-template>
@@ -249,7 +316,7 @@
           <div class="col-md-12 col-xl-8">
 
             <div class="form-group">
-              <label i18n for="previewfile">Video preview</label>
+              <label i18n for="previewfile">Video thumbnail</label>
 
               <my-preview-upload
                 i18n-inputLabel inputLabel="Edit" inputName="previewfile" formControlName="previewfile"
@@ -266,17 +333,30 @@
                   </ng-container>
                 </ng-template>
               </my-help>
+
               <my-markdown-textarea
                 id="support" formControlName="support" markdownType="enhanced"
-                [classes]="{ 'input-error': formErrors['support'] }"
+                [formError]="formErrors['support']"
               ></my-markdown-textarea>
-              <div *ngIf="formErrors.support" class="form-error">
-                {{ formErrors.support }}
-              </div>
             </div>
           </div>
 
           <div class="col-md-12 col-xl-4">
+
+            <div *ngIf="videoSource" class="form-group">
+              <label i18n for="filename">Filename</label>
+
+              <my-help>
+                <ng-template ptTemplate="preHtml">
+                  <ng-container i18n>
+                    Name of the uploaded file
+                  </ng-container>
+                </ng-template>
+              </my-help>
+
+              <input type="text" [disabled]="true" id="filename" class="form-control" [value]="videoSource.filename" />
+            </div>
+
             <div class="form-group originally-published-at">
               <label i18n for="originallyPublishedAt">Original publication date</label>
               <my-help>
@@ -287,8 +367,8 @@
                 </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>
 
@@ -311,16 +391,18 @@
       </ng-template>
     </ng-container>
 
-    <ng-container ngbNavItem *ngIf="pluginFields.length !== 0">
+    <ng-container ngbNavItem *ngIf="getPluginsFields('plugin-settings').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">
-              <my-dynamic-form-field [form]="pluginDataFormGroup" [formErrors]="formErrors" [setting]="pluginSetting.commonOptions"></my-dynamic-form-field>
-            </div>
+            <ng-container
+              *ngFor="let pluginSetting of getPluginsFields('plugin-settings')"
+              [ngTemplateOutlet]="pluginSettingTemplate" [ngTemplateOutletContext]="{ $implicit: pluginSetting }"
+            >
+            </ng-container>
           </div>
 
         </div>
@@ -332,5 +414,5 @@
 </div>
 
 <my-video-caption-add-modal
-  #videoCaptionAddModal [existingCaptions]="existingCaptions" [serverConfig]="serverConfig" (captionAdded)="onCaptionAdded($event)"
+  #videoCaptionAddModal [existingCaptions]="getExistingCaptions()" [serverConfig]="serverConfig" (captionAdded)="onCaptionEdited($event)"
 ></my-video-caption-add-modal>