Merge branch 'release/4.2.0' into develop

client/src/app/+my-library/my-video-imports/my-video-imports.component.html

@@ -24,7 +24,7 @@
   <ng-template pTemplate="body" let-expanded="expanded" let-videoImport>
     <tr>
       <td class="expand-cell" [pRowToggler]="videoImport">
-        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+        <my-table-expander-icon *ngIf="videoImport.error" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss

@@ -20,6 +20,11 @@ input[type=text] {
   @include peertube-select-container(340px);
 }
 
+my-select-channel {
+  display: block;
+  max-width: 340px;
+}
+
 input[type=submit] {
   @include peertube-button;
   @include orange-button;

client/src/app/+my-library/my-videos/my-videos.component.ts

@@ -67,7 +67,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
 
   user: User
 
-  inputFilters: AdvancedInputFilter[]
+  inputFilters: AdvancedInputFilter[] = []
 
   disabled = false
 

client/src/app/+search/search-filters.component.ts

@@ -138,11 +138,11 @@ export class SearchFiltersComponent implements OnInit {
   private loadOriginallyPublishedAtYears () {
     this.originallyPublishedStartYear = this.advancedSearch.originallyPublishedStartDate
       ? new Date(this.advancedSearch.originallyPublishedStartDate).getFullYear().toString()
-      : null
+      : undefined
 
     this.originallyPublishedEndYear = this.advancedSearch.originallyPublishedEndDate
       ? new Date(this.advancedSearch.originallyPublishedEndDate).getFullYear().toString()
-      : null
+      : undefined
   }
 
   private loadFromDurationRange () {
@@ -189,7 +189,7 @@ export class SearchFiltersComponent implements OnInit {
 
       this.advancedSearch.originallyPublishedStartDate = start.toISOString()
     } else {
-      this.advancedSearch.originallyPublishedStartDate = null
+      this.advancedSearch.originallyPublishedStartDate = undefined
     }
 
     if (this.originallyPublishedEndYear) {
@@ -199,7 +199,7 @@ export class SearchFiltersComponent implements OnInit {
 
       this.advancedSearch.originallyPublishedEndDate = end.toISOString()
     } else {
-      this.advancedSearch.originallyPublishedEndDate = null
+      this.advancedSearch.originallyPublishedEndDate = undefined
     }
   }
 

client/src/app/+videos/+video-edit/video-add-components/video-send.scss

@@ -17,7 +17,7 @@ $width-size: 250px;
   align-items: center;
 
   .upload-icon {
-    @include apply-svg-color(#C6C6C6);
+    @include apply-svg-color($input-border-color);
 
     width: 90px;
     margin-bottom: 25px;

client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss

@@ -56,8 +56,8 @@ form {
       width: $markdown-icon-width;
 
       svg {
-        color: #C6C6C6;
+        color: $input-border-color;
-        fill: #C6C6C6;
+        fill: $input-border-color;
         border-radius: 3px;
       }
     }
@@ -66,7 +66,7 @@ form {
     &:active,
     &:hover {
       my-global-icon svg {
-        background-color: #C6C6C6;
+        background-color: $input-border-color;
         color: pvar(--mainBackgroundColor);
         fill: pvar(--mainBackgroundColor);
       }

client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html

@@ -5,9 +5,7 @@
     </div>
 
     <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
-      <my-global-icon iconName="upload"></my-global-icon>
+      <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
-      <label for="bannerfile" i18n>Upload a new banner</label>
-      <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
     </div>
 
     <div
@@ -22,9 +20,7 @@
 
 <ng-template #bannerEditContent>
   <div class="dropdown-item c-hand" [ngbTooltip]="bannerFormat" placement="right" container="body">
-    <my-global-icon iconName="upload"></my-global-icon>
+    <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
-    <span for="bannerfile" i18n>Upload a new banner</span>
-    <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
   </div>
 
   <div class="dropdown-item c-hand" (click)="deleteBanner()" (key.enter)="deleteBanner()">
@@ -32,3 +28,9 @@
     <span i18n>Remove banner</span>
   </div>
 </ng-template>
+
+<ng-template #uploadNewBanner>
+  <my-global-icon iconName="upload"></my-global-icon>
+  <span for="bannerfile" i18n>Upload a new banner</span>
+  <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+</ng-template>

client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss

@@ -25,3 +25,7 @@
     margin-bottom: 0;
   }
 }
+
+my-global-icon {
+  margin: 0 5px;
+}

client/src/app/shared/shared-forms/markdown-textarea.component.scss

@@ -4,7 +4,6 @@
 
 $nav-preview-tab-height: 30px;
 $base-padding: 15px;
-$input-border-color: #C6C6C6;
 $input-border-radius: 3px;
 
 @mixin in-small-view {

client/src/app/shared/shared-main/buttons/button.component.html

@@ -1,6 +1,6 @@
 <span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
-  <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
   <my-small-loader [loading]="loading"></my-small-loader>
+  <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
 
   <span *ngIf="label" class="button-label">{{ label }}</span>
 

client/src/app/shared/shared-main/buttons/button.component.scss

@@ -34,6 +34,12 @@ span[class$=-button] {
   @include button-with-icon(21px);
 
   width: 100%; // useful for ellipsis, allow to define a max-width on host component
+
+  &.icon-only {
+    my-global-icon {
+      margin: 0;
+    }
+  }
 }
 
 .orange-button {

client/src/app/shared/shared-main/buttons/button.component.ts

@@ -20,6 +20,7 @@ export class ButtonComponent {
     return {
       [this.className]: true,
       disabled: this.disabled,
+      'icon-only': !this.label,
       'responsive-label': this.responsiveLabel
     }
   }

client/src/app/shared/shared-search/advanced-search.model.ts

@@ -40,9 +40,6 @@ export class AdvancedSearch {
   searchTarget: SearchTargetType
   resultType: AdvancedSearchResultType
 
-  // Filters we don't want to count, because they are mandatory
-  private silentFilters = new Set([ 'sort', 'searchTarget' ])
-
   constructor (options?: {
     startDate?: string
     endDate?: string
@@ -101,14 +98,7 @@ export class AdvancedSearch {
   }
 
   containsValues () {
-    const obj = this.toUrlObject()
+    return this.size() !== 0
-    for (const k of Object.keys(obj)) {
-      if (this.silentFilters.has(k)) continue
-
-      if (this.isValidValue(obj[k])) return true
-    }
-
-    return false
   }
 
   reset () {
@@ -193,12 +183,19 @@ export class AdvancedSearch {
   size () {
     let acc = 0
 
-    const obj = this.toUrlObject()
+    if (this.isValidValue(this.startDate) || this.isValidValue(this.endDate)) acc++
-    for (const k of Object.keys(obj)) {
+    if (this.isValidValue(this.originallyPublishedStartDate) || this.isValidValue(this.originallyPublishedEndDate)) acc++
-      if (this.silentFilters.has(k)) continue
 
-      if (this.isValidValue(obj[k])) acc++
+    if (this.isValidValue(this.nsfw)) acc++
-    }
+    if (this.isValidValue(this.categoryOneOf)) acc++
+    if (this.isValidValue(this.licenceOneOf)) acc++
+    if (this.isValidValue(this.languageOneOf)) acc++
+    if (this.isValidValue(this.tagsOneOf)) acc++
+    if (this.isValidValue(this.tagsAllOf)) acc++
+    if (this.isValidValue(this.durationMin) || this.isValidValue(this.durationMax)) acc++
+    if (this.isValidValue(this.isLive)) acc++
+    if (this.isValidValue(this.host)) acc++
+    if (this.isValidValue(this.resultType)) acc++
 
     return acc
   }

client/src/sass/include/_mixins.scss

@@ -92,7 +92,7 @@
   max-width: $width;
   color: pvar(--inputForegroundColor);
   background-color: pvar(--inputBackgroundColor);
-  border: 1px solid #C6C6C6;
+  border: 1px solid $input-border-color;
   border-radius: 3px;
   font-size: 15px;
 
@@ -138,7 +138,7 @@
   &.disabled {
     cursor: default;
     color: #fff;
-    background-color: #C6C6C6;
+    background-color: $input-border-color;
   }
 
   my-global-icon {
@@ -168,7 +168,7 @@
   &.disabled {
     cursor: default;
     color: pvar(--mainColor);
-    background-color: #C6C6C6;
+    background-color: $input-border-color;
   }
 
   my-global-icon {
@@ -385,10 +385,9 @@
   select {
     padding: 0 35px 0 12px;
     position: relative;
-    border: 1px solid #C6C6C6;
+    border: 1px solid $input-border-color;
     background: transparent none;
     appearance: none;
-    cursor: pointer;
     height: $button-height;
     text-overflow: ellipsis;
     color: pvar(--mainForegroundColor);
@@ -404,14 +403,17 @@
 
     option {
       color: #000;
+
+      &[value=undefined] {
+        font-weight: $font-semibold;
+      }
     }
   }
 
   &.peertube-select-button {
     @include grey-button;
 
-    select,
+    select {
-    option {
       font-weight: $font-semibold;
       color: pvar(--greyForegroundColor);
       border: 0;
@@ -446,7 +448,7 @@
     top: 0;
     width: 18px;
     height: 18px;
-    border: 1px solid #C6C6C6;
+    border: 1px solid $input-border-color;
     border-radius: 100%;
     background: #fff;
   }
@@ -493,7 +495,7 @@
     width: 18px;
     min-width: 18px;
     height: 18px;
-    border: $border-width solid #C6C6C6;
+    border: $border-width solid $input-border-color;
     border-radius: 3px;
     vertical-align: middle;
     cursor: pointer;
@@ -612,7 +614,7 @@
   margin-bottom: 20px;
 
   @if $separator {
-    border-bottom: 1px solid #C6C6C6;
+    border-bottom: 1px solid $input-border-color;
   }
 
   @media screen and (max-width: $small-view) {

client/src/sass/include/_variables.scss

@@ -85,6 +85,7 @@ $theater-bottom-space: 115px;
 $input-foreground-color: $fg-color;
 $input-background-color: $bg-color;
 $input-placeholder-color: #898989;
+$input-border-color: #C6C6C6;
 
 $textarea-foreground-color: $fg-color;
 $textarea-background-color: $bg-color;

client/src/sass/ng-select.scss

@@ -4,7 +4,7 @@
 $ng-select-highlight: #f2690d;
 // $ng-select-primary-text: #333 !default;
 // $ng-select-disabled-text: #f9f9f9 !default;
-// $ng-select-border: #ccc !default;
+$ng-select-border: $input-border-color;
 // $ng-select-border-radius: 4px !default;
 // $ng-select-bg: #ffffff !default;
 // $ng-select-selected: lighten($ng-select-highlight, 46) !default;
@@ -46,6 +46,14 @@ $ng-select-value-font-size: 15px;
     @include padding-right(12px);
   }
 
+  .ng-arrow {
+    border-color: #000 transparent transparent !important;
+  }
+
+  &.ng-select-opened .ng-arrow {
+    border-color: transparent transparent #000 !important;
+  }
+
   &.ng-select-single .ng-value-container .ng-value {
     color: pvar(--inputForegroundColor);