<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>
<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">
</ng-template>
</my-help>
- <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="true"></my-markdown-textarea>
+ <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="videoToUpdate"></my-markdown-textarea>
<div *ngIf="formErrors.description" class="form-error">
{{ formErrors.description }}
<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 }}
<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 }}
<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 }}
<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 }}
<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>
<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">
</ng-template>
</my-peertube-checkbox>
+ <ng-container
+ *ngFor="let pluginSetting of getPluginsFields('main')"
+ [ngTemplateOutlet]="pluginSettingTemplate" [ngTemplateOutletContext]="{ $implicit: pluginSetting }"
+ >
+ </ng-container>
</div>
</div>
</ng-template>
</ng-container>
- <ng-container ngbNavItem>
+ <ng-container ngbNavItem *ngIf="!liveVideo">
<a ngbNavLink i18n>Captions</a>
<ng-template ngbNavContent>
<div i18n class="caption-entry-state">Already uploaded ✔</div>
+ <span i18n class="caption-entry-edit" (click)="videoCaptionEditModal.show()">Edit</span>
<span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</span>
</ng-container>
<span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</span>
</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>
+
+ <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel edition</span>
+ </ng-container>
+
<ng-container *ngIf="videoCaption.action === 'REMOVE'">
<span class="caption-entry-label">{{ videoCaption.language.label }}</span>
<span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</span>
</ng-container>
+
+ <my-video-caption-edit-modal
+ #videoCaptionEditModal
+ [videoCaption]="videoCaption"
+ [serverConfig]="serverConfig"
+ (captionEdited)="onCaptionEdited($event)"
+ ></my-video-caption-edit-modal>
</div>
</div>
</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 pt-alert-primary">
+ <my-live-documentation-link></my-live-documentation-link>
+ </div>
+
+ <div *ngIf="liveVideo.rtmpUrl" class="form-group">
+ <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
+ <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-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">
+ <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="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 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>
+
+ </ng-container>
+
+
<ng-container ngbNavItem>
<a ngbNavLink i18n>Advanced settings</a>
<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'] }"
<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>
</ng-template>
</ng-container>
+ <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">
+ <ng-container
+ *ngFor="let pluginSetting of getPluginsFields('plugin-settings')"
+ [ngTemplateOutlet]="pluginSettingTemplate" [ngTemplateOutletContext]="{ $implicit: pluginSetting }"
+ >
+ </ng-container>
+ </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)="onCaptionEdited($event)"
></my-video-caption-add-modal>
projects / github / Chocobozzz / PeerTube.git / blobdiff