|
@@ -1,85 +1,84 @@
|
|
|
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
|
|
|
|
|
- <div class="pt-two-cols"> <!-- playlist grid -->
|
|
|
- <div class="title-col">
|
|
|
- <nav aria-label="breadcrumb">
|
|
|
- <ol class="pt-breadcrumb">
|
|
|
- <li class="breadcrumb-item">
|
|
|
- <a routerLink="/my-library/video-playlists" i18n>My Playlists</a>
|
|
|
+<div class="pt-two-cols"> <!-- playlist grid -->
|
|
|
+ <div class="title-col">
|
|
|
+ <nav aria-label="breadcrumb">
|
|
|
+ <ol class="pt-breadcrumb">
|
|
|
+ <li class="breadcrumb-item">
|
|
|
+ <a routerLink="/my-library/video-playlists" i18n>My Playlists</a>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ @if (isCreation()) {
|
|
|
+ <li class="breadcrumb-item active" i18n>Create</li>
|
|
|
+ } @else {
|
|
|
+ <li class="breadcrumb-item active" i18n>Edit</li>
|
|
|
+
|
|
|
+ <li class="breadcrumb-item active" aria-current="page">
|
|
|
+ <a *ngIf="videoPlaylistToUpdate" [routerLink]="[ '/my-library/video-playlists/update', videoPlaylistToUpdate?.shortUUID]">
|
|
|
+ {{ videoPlaylistToUpdate?.displayName }}
|
|
|
+ </a>
|
|
|
</li>
|
|
|
+ }
|
|
|
+ </ol>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ @if (isCreation()) {
|
|
|
+ <h2 class="visually-hidden" i18n>NEW PLAYLIST</h2>
|
|
|
+ } @else {
|
|
|
+ <h2 class="visually-hidden" i18n>UPDATE PLAYLIST</h2>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
|
|
|
- @if (isCreation()) {
|
|
|
- <li class="breadcrumb-item active" i18n>Create</li>
|
|
|
- } @else {
|
|
|
- <li class="breadcrumb-item active" i18n>Edit</li>
|
|
|
-
|
|
|
- <li class="breadcrumb-item active" aria-current="page">
|
|
|
- <a *ngIf="videoPlaylistToUpdate" [routerLink]="[ '/my-library/video-playlists/update', videoPlaylistToUpdate?.shortUUID]">
|
|
|
- {{ videoPlaylistToUpdate?.displayName }}
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- }
|
|
|
- </ol>
|
|
|
- </nav>
|
|
|
-
|
|
|
- @if (isCreation()) {
|
|
|
- <h2 class="visually-hidden" i18n>NEW PLAYLIST</h2>
|
|
|
- } @else {
|
|
|
- <h2 class="visually-hidden" i18n>UPDATE PLAYLIST</h2>
|
|
|
- }
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="content-col">
|
|
|
- <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <label for="thumbnailfile" i18n>Playlist thumbnail</label>
|
|
|
-
|
|
|
- <my-preview-upload
|
|
|
- i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile"
|
|
|
- previewWidth="223px" previewHeight="122px"
|
|
|
- ></my-preview-upload>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <label i18n for="displayName">Display name</label>
|
|
|
- <input
|
|
|
- type="text" id="displayName" class="form-control"
|
|
|
- formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
|
|
|
- >
|
|
|
- <div *ngIf="formErrors['displayName']" class="form-error" role="alert">
|
|
|
- {{ formErrors['displayName'] }}
|
|
|
- </div>
|
|
|
+ <div class="content-col">
|
|
|
+ <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="thumbnailfile" i18n>Playlist thumbnail</label>
|
|
|
+
|
|
|
+ <my-preview-upload
|
|
|
+ i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile"
|
|
|
+ previewWidth="223px" previewHeight="122px"
|
|
|
+ ></my-preview-upload>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label i18n for="displayName">Display name</label>
|
|
|
+ <input
|
|
|
+ type="text" id="displayName" class="form-control"
|
|
|
+ formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
|
|
|
+ >
|
|
|
+ <div *ngIf="formErrors['displayName']" class="form-error" role="alert">
|
|
|
+ {{ formErrors['displayName'] }}
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <label i18n for="description">Description</label><my-help helpType="markdownText"></my-help>
|
|
|
- <my-markdown-textarea id="description" formControlName="description" [formError]="formErrors['description']"></my-markdown-textarea>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label i18n for="description">Description</label><my-help helpType="markdownText"></my-help>
|
|
|
+ <my-markdown-textarea id="description" formControlName="description" [formError]="formErrors['description']"></my-markdown-textarea>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label i18n for="privacy">Privacy</label>
|
|
|
+ <div class="peertube-select-container">
|
|
|
+ <my-select-options
|
|
|
+ labelForId="privacy" [items]="videoPlaylistPrivacies" formControlName="privacy" [clearable]="false"
|
|
|
+ ></my-select-options>
|
|
|
</div>
|
|
|
|
|
|
- <div class="form-group">
|
|
|
- <label i18n for="privacy">Privacy</label>
|
|
|
- <div class="peertube-select-container">
|
|
|
- <my-select-options
|
|
|
- labelForId="privacy" [items]="videoPlaylistPrivacies" formControlName="privacy" [clearable]="false"
|
|
|
- ></my-select-options>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div *ngIf="formErrors.privacy" class="form-error" role="alert">{{ formErrors.privacy }}</div>
|
|
|
- </div>
|
|
|
+ <div *ngIf="formErrors.privacy" class="form-error" role="alert">{{ formErrors.privacy }}</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="form-group">
|
|
|
- <label for="videoChannelIdl" i18n>Channel</label>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="videoChannelIdl" i18n>Channel</label>
|
|
|
|
|
|
- <my-select-channel
|
|
|
- labelForId="videoChannelId" [items]="userVideoChannels" formControlName="videoChannelId"
|
|
|
- ></my-select-channel>
|
|
|
+ <my-select-channel
|
|
|
+ labelForId="videoChannelId" [items]="userVideoChannels" formControlName="videoChannelId"
|
|
|
+ ></my-select-channel>
|
|
|
|
|
|
- <div *ngIf="formErrors['videoChannelId']" class="form-error" role="alert">{{ formErrors['videoChannelId'] }}</div>
|
|
|
- </div>
|
|
|
+ <div *ngIf="formErrors['videoChannelId']" class="form-error" role="alert">{{ formErrors['videoChannelId'] }}</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <input type="submit" class="peertube-button orange-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
|
|
|
- </form>
|
|
|
- </div>
|
|
|
+ <input type="submit" class="peertube-button orange-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
|
|
|
+ </form>
|
|
|
</div>
|
|
|
-
|
|
|
+</div>
|