-
-
+
+
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
index b257a16a9..0958b5f80 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -1,8 +1,9 @@
@import '_variables';
@import '_mixins';
-.peertube-select-container {
- @include peertube-select-container(auto);
+label {
+ font-weight: $font-regular;
+ font-size: 100%;
}
.caption-file {
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 4d3b84626..ae3413e79 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
@@ -28,11 +28,10 @@
-
+ {{ formErrors.tags }}
+
@@ -56,22 +55,15 @@
-
-
-
-
+
+
-
-
-
+
{{ formErrors.category }}
@@ -80,12 +72,9 @@
-
-
-
+
{{ formErrors.licence }}
@@ -94,12 +83,10 @@
-
-
-
+
{{ formErrors.language }}
@@ -108,13 +95,9 @@
-
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index 581199d65..de4f65df3 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -17,7 +17,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
video: VideoEdit
isUpdatingVideo = false
- userVideoChannels: { id: number, label: string, support: string }[] = []
+ userVideoChannels: { id: number, label: string, support: string, avatar?: string }[] = []
schedulePublicationPossible = false
videoCaptions: VideoCaptionEdit[] = []
waitTranscodingEnabled = true
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts
index 30bcf4d74..a391913d8 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -28,7 +28,12 @@ export class VideoUpdateResolver implements Resolve {
.listAccountVideoChannels(video.account)
.pipe(
map(result => result.data),
- map(videoChannels => videoChannels.map(c => ({ id: c.id, label: c.displayName, support: c.support })))
+ map(videoChannels => videoChannels.map(c => ({
+ id: c.id,
+ label: c.displayName,
+ support: c.support,
+ avatarPath: c.avatar?.path
+ })))
),
this.videoCaptionService
diff --git a/client/src/app/helpers/utils.ts b/client/src/app/helpers/utils.ts
index 825b6ca96..aa37fdd46 100644
--- a/client/src/app/helpers/utils.ts
+++ b/client/src/app/helpers/utils.ts
@@ -16,7 +16,10 @@ function getParameterByName (name: string, url: string) {
return decodeURIComponent(results[2].replace(/\+/g, ' '))
}
-function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support?: string }[]) {
+function populateAsyncUserVideoChannels (
+ authService: AuthService,
+ channel: { id: number, label: string, support?: string, avatarPath?: string, recent?: boolean }[]
+) {
return new Promise(res => {
authService.userInformationLoaded
.subscribe(
@@ -27,7 +30,12 @@ function populateAsyncUserVideoChannels (authService: AuthService, channel: { id
const videoChannels = user.videoChannels
if (Array.isArray(videoChannels) === false) return
- videoChannels.forEach(c => channel.push({ id: c.id, label: c.displayName, support: c.support }))
+ videoChannels.forEach(c => channel.push({
+ id: c.id,
+ label: c.displayName,
+ support: c.support,
+ avatarPath: c.avatar?.path
+ }))
return res()
}
diff --git a/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts
index 9b24e4f62..c96e4ef66 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts
@@ -1,5 +1,5 @@
import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
+import { Validators, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms'
import { Injectable } from '@angular/core'
import { BuildFormValidator } from './form-validator.service'
@@ -13,7 +13,8 @@ export class VideoValidatorsService {
readonly VIDEO_IMAGE: BuildFormValidator
readonly VIDEO_CHANNEL: BuildFormValidator
readonly VIDEO_DESCRIPTION: BuildFormValidator
- readonly VIDEO_TAGS: BuildFormValidator
+ readonly VIDEO_TAGS_ARRAY: BuildFormValidator
+ readonly VIDEO_TAG: BuildFormValidator
readonly VIDEO_SUPPORT: BuildFormValidator
readonly VIDEO_SCHEDULE_PUBLICATION_AT: BuildFormValidator
readonly VIDEO_ORIGINALLY_PUBLISHED_AT: BuildFormValidator
@@ -71,7 +72,7 @@ export class VideoValidatorsService {
}
}
- this.VIDEO_TAGS = {
+ this.VIDEO_TAG = {
VALIDATORS: [ Validators.minLength(2), Validators.maxLength(30) ],
MESSAGES: {
'minlength': this.i18n('A tag should be more than 2 characters long.'),
@@ -79,6 +80,14 @@ export class VideoValidatorsService {
}
}
+ this.VIDEO_TAGS_ARRAY = {
+ VALIDATORS: [ Validators.maxLength(5), this.arrayTagLengthValidator() ],
+ MESSAGES: {
+ 'maxlength': this.i18n('A maximum of 5 tags can be used on a video.'),
+ 'arrayTagLength': this.i18n('A tag should be more than 2, and less than 30 characters long.')
+ }
+ }
+
this.VIDEO_SUPPORT = {
VALIDATORS: [ Validators.minLength(3), Validators.maxLength(1000) ],
MESSAGES: {
@@ -99,4 +108,16 @@ export class VideoValidatorsService {
MESSAGES: {}
}
}
+
+ arrayTagLengthValidator (min = 2, max = 30): ValidatorFn {
+ return (control: AbstractControl): ValidationErrors => {
+ const array = control.value as Array
+
+ if (array.every(e => e.length > min && e.length < max)) {
+ return null
+ }
+
+ return { 'arrayTagLength': true }
+ }
+ }
}
diff --git a/client/src/app/shared/shared-forms/select-channel.component.html b/client/src/app/shared/shared-forms/select-channel.component.html
new file mode 100644
index 000000000..897d13ee7
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select-channel.component.html
@@ -0,0 +1,16 @@
+
+
+ ![]()
+ {{ channel.label }}
+
+
diff --git a/client/src/app/shared/shared-forms/select-channel.component.ts b/client/src/app/shared/shared-forms/select-channel.component.ts
new file mode 100644
index 000000000..de98c8c0a
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select-channel.component.ts
@@ -0,0 +1,51 @@
+import { Component, Input, forwardRef, ViewChild } from '@angular/core'
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
+import { Actor } from '../shared-main'
+
+@Component({
+ selector: 'my-select-channel',
+ styleUrls: [ './select-shared.component.scss' ],
+ templateUrl: './select-channel.component.html',
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => SelectChannelComponent),
+ multi: true
+ }
+ ]
+})
+export class SelectChannelComponent implements ControlValueAccessor {
+ @Input() items: { id: number, label: string, support: string, avatarPath?: string }[] = []
+
+ selectedId: number
+
+ // ng-select options
+ bindLabel = 'label'
+ bindValue = 'id'
+ clearable = false
+ searchable = false
+
+ get channels () {
+ return this.items.map(c => Object.assign(c, {
+ avatarPath: c.avatarPath ? c.avatarPath : Actor.GET_DEFAULT_AVATAR_URL()
+ }))
+ }
+
+ propagateChange = (_: any) => { /* empty */ }
+
+ writeValue (id: number) {
+ this.selectedId = id
+ }
+
+ registerOnChange (fn: (_: any) => void) {
+ this.propagateChange = fn
+ }
+
+ registerOnTouched () {
+ // Unused
+ }
+
+ onModelChange () {
+ this.propagateChange(this.selectedId)
+ }
+}
diff --git a/client/src/app/shared/shared-forms/select-options.component.html b/client/src/app/shared/shared-forms/select-options.component.html
new file mode 100644
index 000000000..fda0c2c56
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select-options.component.html
@@ -0,0 +1,18 @@
+
+
+ {{ item.label }}
+
+
+ {{ item.description }} +
+
+
diff --git a/client/src/app/shared/shared-forms/select-options.component.ts b/client/src/app/shared/shared-forms/select-options.component.ts
new file mode 100644
index 000000000..09f7df53b
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select-options.component.ts
@@ -0,0 +1,47 @@
+import { Component, Input, forwardRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
+
+export type SelectOptionsItem = { id: number | string, label: string, description?: string }
+
+@Component({
+ selector: 'my-select-options',
+ styleUrls: [ './select-shared.component.scss' ],
+ templateUrl: './select-options.component.html',
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => SelectOptionsComponent),
+ multi: true
+ }
+ ]
+})
+export class SelectOptionsComponent implements ControlValueAccessor {
+ @Input() items: SelectOptionsItem[] = []
+ @Input() clearable = false
+ @Input() searchable = false
+ @Input() bindValue = 'id'
+ @Input() groupBy: string
+
+ selectedId: number | string
+
+ // ng-select options
+ bindLabel = 'label'
+
+ propagateChange = (_: any) => { /* empty */ }
+
+ writeValue (id: number | string) {
+ this.selectedId = id
+ }
+
+ registerOnChange (fn: (_: any) => void) {
+ this.propagateChange = fn
+ }
+
+ registerOnTouched () {
+ // Unused
+ }
+
+ onModelChange () {
+ this.propagateChange(this.selectedId)
+ }
+}
diff --git a/client/src/app/shared/shared-forms/select-shared.component.scss b/client/src/app/shared/shared-forms/select-shared.component.scss
new file mode 100644
index 000000000..4f231d28a
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select-shared.component.scss
@@ -0,0 +1,20 @@
+$width-size: auto;
+
+ng-select {
+ width: $width-size;
+ @media screen and (max-width: $width-size) {
+ width: 100%;
+ }
+}
+
+// make sure the image is vertically adjusted
+ng-select ::ng-deep .ng-value-label img {
+ position: relative;
+ top: -1px;
+}
+
+ng-select ::ng-deep img {
+ border-radius: 50%;
+ height: 20px;
+ width: 20px;
+}
diff --git a/client/src/app/shared/shared-forms/select-tags.component.html b/client/src/app/shared/shared-forms/select-tags.component.html
new file mode 100644
index 000000000..0609c9d20
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select-tags.component.html
@@ -0,0 +1,13 @@
+
+
diff --git a/client/src/app/shared/shared-forms/select-tags.component.scss b/client/src/app/shared/shared-forms/select-tags.component.scss
new file mode 100644
index 000000000..ad76bc7ee
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select-tags.component.scss
@@ -0,0 +1,3 @@
+ng-select ::ng-deep .ng-arrow-wrapper {
+ display: none;
+}
diff --git a/client/src/app/shared/shared-forms/select-tags.component.ts b/client/src/app/shared/shared-forms/select-tags.component.ts
new file mode 100644
index 000000000..2e07d7e8f
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select-tags.component.ts
@@ -0,0 +1,38 @@
+import { Component, Input, forwardRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
+
+@Component({
+ selector: 'my-select-tags',
+ styleUrls: [ './select-shared.component.scss', './select-tags.component.scss' ],
+ templateUrl: './select-tags.component.html',
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => SelectTagsComponent),
+ multi: true
+ }
+ ]
+})
+export class SelectTagsComponent implements ControlValueAccessor {
+ @Input() items: string[] = []
+ @Input() _items: string[] = []
+
+ propagateChange = (_: any) => { /* empty */ }
+
+ writeValue (items: string[]) {
+ this._items = items
+ this.propagateChange(this._items)
+ }
+
+ registerOnChange (fn: (_: any) => void) {
+ this.propagateChange = fn
+ }
+
+ registerOnTouched () {
+ // Unused
+ }
+
+ onModelChange () {
+ this.propagateChange(this._items)
+ }
+}
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index ba33704cf..19d812948 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -28,6 +28,9 @@ import { PreviewUploadComponent } from './preview-upload.component'
import { ReactiveFileComponent } from './reactive-file.component'
import { TextareaAutoResizeDirective } from './textarea-autoresize.directive'
import { TimestampInputComponent } from './timestamp-input.component'
+import { SelectChannelComponent } from './select-channel.component'
+import { SelectOptionsComponent } from './select-options.component'
+import { SelectTagsComponent } from './select-tags.component'
@NgModule({
imports: [
@@ -45,7 +48,10 @@ import { TimestampInputComponent } from './timestamp-input.component'
PreviewUploadComponent,
ReactiveFileComponent,
TextareaAutoResizeDirective,
- TimestampInputComponent
+ TimestampInputComponent,
+ SelectChannelComponent,
+ SelectOptionsComponent,
+ SelectTagsComponent
],
exports: [
@@ -58,7 +64,10 @@ import { TimestampInputComponent } from './timestamp-input.component'
PreviewUploadComponent,
ReactiveFileComponent,
TextareaAutoResizeDirective,
- TimestampInputComponent
+ TimestampInputComponent,
+ SelectChannelComponent,
+ SelectOptionsComponent,
+ SelectTagsComponent
],
providers: [
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 22a207e51..a4d18d562 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -17,6 +17,7 @@ import {
NgbPopoverModule,
NgbTooltipModule
} from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { SharedGlobalIconModule } from '../shared-icons'
import { AccountService, ActorAvatarInfoComponent, AvatarComponent } from './account'
@@ -55,6 +56,8 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
MultiSelectModule,
InputSwitchModule,
+ NgSelectModule,
+
SharedGlobalIconModule
],
@@ -134,7 +137,9 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
TopMenuDropdownComponent,
UserQuotaComponent,
- UserNotificationsComponent
+ UserNotificationsComponent,
+
+ NgSelectModule
],
providers: [
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index edaefa9f2..978f775bf 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -339,23 +339,25 @@ export class VideoService implements VideosProvider {
const base = [
{
id: VideoPrivacy.PRIVATE,
- label: this.i18n('Only I can see this video')
+ description: this.i18n('Only I can see this video')
},
{
id: VideoPrivacy.UNLISTED,
- label: this.i18n('Only people with the private link can see this video')
+ description: this.i18n('Only shareable via a private link')
},
{
id: VideoPrivacy.PUBLIC,
- label: this.i18n('Anyone can see this video')
+ description: this.i18n('Anyone can see this video')
},
{
id: VideoPrivacy.INTERNAL,
- label: this.i18n('Only users of this instance can see this video')
+ description: this.i18n('Only users of this instance can see this video')
}
]
- return base.filter(o => !!privacies.find(p => p.id === o.id))
+ return base
+ .filter(o => !!privacies.find(p => p.id === o.id)) // filter down to privacies that where in the input
+ .map(o => ({ ...privacies[o.id - 1], ...o })) // merge the input privacies that contain a label, and extend them with a description
}
nsfwPolicyToParam (nsfwPolicy: NSFWPolicyType) {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 30960393f..d2811d24a 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -13,6 +13,7 @@ $assets-path: '../../assets/';
@import './bootstrap';
@import './primeng-custom';
+@import './ng-select.scss';
[hidden] {
display: none !important;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e4c2dffa0..ae2b99a5b 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -807,75 +807,6 @@
}
}
-@mixin ng2-tags {
- ::ng-deep {
- .ng2-tag-input {
- border: none !important;
- }
-
- .ng2-tags-container {
- display: flex;
- align-items: center;
- border: 1px solid #C6C6C6;
- border-radius: 3px;
- padding: 5px !important;
- height: max-content;
-
- &:focus-within {
- box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
- }
- }
-
- tag-input-form {
- input {
- height: 30px !important;
- font-size: 12px !important;
-
- background-color: pvar(--mainBackgroundColor) !important;
- color: pvar(--mainForegroundColor) !important;
- }
- }
-
- tag {
- background-color: $grey-background-color !important;
- color: #000 !important;
- border-radius: 3px !important;
- font-size: 12px !important;
- height: 30px !important;
- line-height: 30px !important;
- margin: 0 5px 0 0 !important;
- cursor: default !important;
- padding: 0 8px 0 10px !important;
-
- div {
- height: 100% !important;
- }
- }
-
- delete-icon {
- cursor: pointer !important;
- height: auto !important;
- vertical-align: middle !important;
- padding-left: 6px !important;
-
- svg {
- position: relative;
- top: -1px;
- height: auto !important;
- vertical-align: middle !important;
-
- path {
- fill: pvar(--greyForegroundColor) !important;
- }
- }
-
- &:hover {
- transform: none !important;
- }
- }
- }
-}
-
@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
width: 95%;
border-top: .05rem solid $color;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
new file mode 100644
index 000000000..f836e203c
--- /dev/null
+++ b/client/src/sass/ng-select.scss
@@ -0,0 +1,29 @@
+@import '_variables';
+
+$ng-select-highlight: #f2690d;
+// $ng-select-primary-text: #333 !default;
+// $ng-select-disabled-text: #f9f9f9 !default;
+// $ng-select-border: #ccc !default;
+// $ng-select-border-radius: 4px !default;
+// $ng-select-bg: #ffffff !default;
+// $ng-select-selected: lighten($ng-select-highlight, 46) !default;
+// $ng-select-marke d: lighten($ng-select-highlight, 48) !default;
+$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
+$ng-select-height: 30px;
+// $ng-select-value-padding-left: 10px !default;
+// $ng-select-value-font-size: 0.9em !default;
+
+@import "~@ng-select/ng-select/scss/default.theme.scss";
+
+.ng-input {
+ font-size: .9em;
+}
+
+.ng-select {
+ &.ng-select-focused {
+ &:not(.ng-select-opened) > .ng-select-container {
+ border-color: #ccc !important;
+ }
+ }
+}
diff --git a/client/yarn.lock b/client/yarn.lock
index 843ca4f10..38aea725e 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1344,6 +1344,13 @@
dependencies:
tslib "^2.0.0"
+"@ng-select/ng-select@^5.0.0":
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/@ng-select/ng-select/-/ng-select-5.0.0.tgz#db021e5ca7be3fe6be346c3b63b3f2e109afa0f0"
+ integrity sha512-1mdGNh5xGriSnCLcLF/GWxqCgCehB3Stu7mxhB9K/+BxNCRE365Q1MgpzO61XQBgL0L6ktxiXRhCQWXXtFoq9w==
+ dependencies:
+ tslib "^2.0.0"
+
"@ngtools/webpack@10.1.0-next.4":
version "10.1.0-next.4"
resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-10.1.0-next.4.tgz#5397417820d110e29c7dc99db8adb538de98676e"
@@ -7866,21 +7873,6 @@ next-tick@~1.0.0:
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
-ng2-material-dropdown@0.11.0:
- version "0.11.0"
- resolved "https://registry.yarnpkg.com/ng2-material-dropdown/-/ng2-material-dropdown-0.11.0.tgz#27a402ef3cbdcaf6791ef4cfd4b257e31db7546f"
- integrity sha512-wptBo09qKecY0QPTProAThrc4A3ajJTcHE9LTpCG5XZZUhXLBzhnGK8OW33TN8A+K/jqcs7OB74ppYJiqs3nhQ==
- dependencies:
- tslib "^1.9.0"
-
-ngx-chips@2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/ngx-chips/-/ngx-chips-2.1.0.tgz#aa299bcf40dc3e1f6288bf1d29e2fdfe9a132ed3"
- integrity sha512-OQV4dTfD3nXm5d2mGKUSgwOtJOaMnZ4F+lwXOtd7DWRSUne0JQWwoZNHdOpuS6saBGhqCPDAwq6KxdR5XSgZUQ==
- dependencies:
- ng2-material-dropdown "0.11.0"
- tslib "^1.9.0"
-
ngx-pipes@^2.6.0:
version "2.7.5"
resolved "https://registry.yarnpkg.com/ngx-pipes/-/ngx-pipes-2.7.5.tgz#22e2e4b7015ae9103210dfa2dacd6f4ae4411639"
diff --git a/shared/models/videos/video-constant.model.ts b/shared/models/videos/video-constant.model.ts
index 342a7c0cf..353a29535 100644
--- a/shared/models/videos/video-constant.model.ts
+++ b/shared/models/videos/video-constant.model.ts
@@ -1,4 +1,5 @@
export interface VideoConstant {
id: T
label: string
+ description?: string
}
-
-
+
{{ formErrors.privacy }}
@@ -136,7 +119,7 @@
- This video contains mature or explicit content
+ Contains sensitive content
@@ -146,7 +129,7 @@
- Wait transcoding before publishing the video
+ Publish after transcoding
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 69b907288..9caf009c5 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -161,8 +161,6 @@ p-calendar {
}
}
-@include ng2-tags;
-
// columns for the video
.col-video-edit {
@include make-col-ready();
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index 239e453ad..4cd3838de 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -8,6 +8,11 @@ import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-ma
import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { forkJoin } from 'rxjs'
+import { InstanceService } from '@app/shared/shared-instance'
+
+type VideoLanguages = VideoConstant & { group?: string }
@Component({
selector: 'my-video-edit',
@@ -31,7 +36,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
videoPrivacies: VideoConstant[] = []
videoCategories: VideoConstant[] = []
videoLicences: VideoConstant[] = []
- videoLanguages: VideoConstant[] = []
+ videoLanguages: VideoLanguages[] = []
tagValidators: ValidatorFn[]
tagValidatorsMessages: { [ name: string ]: string }
@@ -56,12 +61,11 @@ export class VideoEditComponent implements OnInit, OnDestroy {
private videoValidatorsService: VideoValidatorsService,
private videoService: VideoService,
private serverService: ServerService,
+ private instanceService: InstanceService,
private i18nPrimengCalendarService: I18nPrimengCalendarService,
+ private i18n: I18n,
private ngZone: NgZone
) {
- this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS
- this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES
-
this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale()
this.calendarTimezone = this.i18nPrimengCalendarService.getTimezone()
this.calendarDateFormat = this.i18nPrimengCalendarService.getDateFormat()
@@ -93,7 +97,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
licence: this.videoValidatorsService.VIDEO_LICENCE,
language: this.videoValidatorsService.VIDEO_LANGUAGE,
description: this.videoValidatorsService.VIDEO_DESCRIPTION,
- tags: null,
+ tags: this.videoValidatorsService.VIDEO_TAGS_ARRAY,
previewfile: null,
support: this.videoValidatorsService.VIDEO_SUPPORT,
schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT,
@@ -126,11 +130,29 @@ export class VideoEditComponent implements OnInit, OnDestroy {
.subscribe(res => this.videoCategories = res)
this.serverService.getVideoLicences()
.subscribe(res => this.videoLicences = res)
- this.serverService.getVideoLanguages()
- .subscribe(res => this.videoLanguages = res)
+ forkJoin([
+ this.instanceService.getAbout(),
+ this.serverService.getVideoLanguages()
+ ]).pipe(map(([ about, languages ]) => ({ about, languages })))
+ .subscribe(res => {
+ this.videoLanguages = res.languages
+ .map(l => res.about.instance.languages.includes(l.id)
+ ? { ...l, group: this.i18n('Instance languages'), groupOrder: 0 }
+ : { ...l, group: this.i18n('All languages'), groupOrder: 1 })
+ .sort((a, b) => a.groupOrder - b.groupOrder)
+ })
this.serverService.getVideoPrivacies()
- .subscribe(privacies => this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies))
+ .subscribe(privacies => {
+ this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies)
+ if (this.schedulePublicationPossible) {
+ this.videoPrivacies.push({
+ id: this.SPECIAL_SCHEDULED_PRIVACY,
+ label: this.i18n('Scheduled'),
+ description: this.i18n('Hide the video until a specific date')
+ })
+ }
+ })
this.serverConfig = this.serverService.getTmpConfig()
this.serverService.getConfig()
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts
index d1bbbafe9..593114181 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts
@@ -1,4 +1,3 @@
-import { TagInputModule } from 'ngx-chips'
import { CalendarModule } from 'primeng/calendar'
import { NgModule } from '@angular/core'
import { SharedFormModule } from '@app/shared/shared-forms'
@@ -10,7 +9,6 @@ import { VideoEditComponent } from './video-edit.component'
@NgModule({
imports: [
- TagInputModule,
CalendarModule,
SharedMainModule,
@@ -24,7 +22,6 @@ import { VideoEditComponent } from './video-edit.component'
],
exports: [
- TagInputModule,
CalendarModule,
SharedMainModule,
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
index 5678f548f..8db37a293 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -25,20 +25,16 @@
-
-
-
+
-
-
-
-
+
-
-
+
-
[] = []
videoCaptions: VideoCaptionEdit[] = []
@@ -44,7 +44,7 @@ export abstract class VideoSend extends FormReactive implements OnInit {
this.serverService.getVideoPrivacies()
.subscribe(
privacies => {
- this.videoPrivacies = privacies
+ this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies)
this.firstStepPrivacyId = this.DEFAULT_VIDEO_PRIVACY
})
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
index 95b6628f6..ed697c25b 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
@@ -9,21 +9,16 @@
-
-
+
-
-
-
+
-
-
-
+ + {{ item.description }} +